chore: Improve UI consistency (#283)

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseFilter.tsx

@@ -90,7 +90,7 @@ export default function TestCaseFilter({
         <h3 className="text-default-500 text-small">{messages.priority}</h3>
         <Dropdown>
           <DropdownTrigger>
-            <Button variant="bordered" endContent={<ChevronDown size={16} />}>
+            <Button size="sm" variant="bordered" endContent={<ChevronDown size={16} />}>
               {selectedPriorities === 'all' || selectedPriorities.size === 0
                 ? messages.selectPriorities
                 : `${selectedPriorities.size} ${messages.selected || 'selected'}`}
@@ -118,7 +118,7 @@ export default function TestCaseFilter({
         <h3 className="text-default-500 text-small">{messages.type}</h3>
         <Dropdown>
           <DropdownTrigger>
-            <Button variant="bordered" endContent={<ChevronDown size={16} />}>
+            <Button size="sm" variant="bordered" endContent={<ChevronDown size={16} />}>
               {selectedTypes === 'all' || selectedTypes.size === 0
                 ? messages.selectTypes || 'Select Types'
                 : `${selectedTypes.size} ${messages.selected || 'selected'}`}

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx

@@ -13,7 +13,6 @@ import {
   DropdownItem,
   Selection,
   SortDescriptor,
-  ButtonGroup,
   cn,
   Badge,
   Input,
@@ -91,7 +90,6 @@ export default function TestCaseTable({
     column: 'id',
     direction: 'ascending',
   });
-  const [exportType, setExportType] = useState(new Set(['json']));
   const [showFilter, setShowFilter] = useState(false);
   const [localQueryTerm, setLocalQueryTerm] = useState(queryTerm);
 
@@ -195,10 +193,6 @@ export default function TestCaseTable({
     setSelectedKeys(new Set([]));
   };
 
-  const handleExportTypeChange = (keys: Selection) => {
-    setExportType(new Set(Array.from(keys as Set<string>)));
-  };
-
   const hasActiveFilters = activePriorityFilters.length > 0 || activeTypeFilters.length > 0;
 
   const classNames = useMemo(
@@ -226,6 +220,19 @@ export default function TestCaseTable({
         <div className="flex items-center justify-between p-3 ">
           <h3 className="font-bold">{messages.testCaseList}</h3>
           <div className="flex items-center">
+            {((selectedKeys !== 'all' && selectedKeys.size > 0) || selectedKeys === 'all') && (
+              <Button
+                startContent={<Trash size={16} />}
+                size="sm"
+                variant="bordered"
+                isDisabled={isDisabled}
+                color="danger"
+                className="me-2"
+                onPress={handleDeleteCases}
+              >
+                {messages.delete}
+              </Button>
+            )}
             <Input
               className="me-2"
               variant="bordered"
@@ -254,6 +261,7 @@ export default function TestCaseTable({
             >
               <Button
                 size="sm"
+                variant="bordered"
                 isIconOnly
                 onPress={handleFilterChange}
                 className={cn('me-2', showFilter && 'bg-primary')}
@@ -261,49 +269,31 @@ export default function TestCaseTable({
                 <Filter size={16} className={cn('text-default-500', showFilter && 'text-white')} />
               </Button>
             </Badge>
-            {((selectedKeys !== 'all' && selectedKeys.size > 0) || selectedKeys === 'all') && (
+            <Dropdown>
-              <Button
-                startContent={<Trash size={16} />}
-                size="sm"
-                isDisabled={isDisabled}
-                color="danger"
-                className="me-2"
-                onPress={handleDeleteCases}
-              >
-                {messages.delete}
-              </Button>
-            )}
-            <ButtonGroup className="me-2">
-              <Button
-                startContent={<FileDown size={16} />}
-                size="sm"
-                onPress={() => onExportCases(Array.from(exportType)[0])}
-              >
-                {messages.export} {exportType}
-              </Button>
-              <Dropdown placement="bottom-end">
               <DropdownTrigger>
-                  <Button isIconOnly size="sm">
+                <Button
-                    <ChevronDown size={16} />
+                  size="sm"
+                  variant="bordered"
+                  className="me-2"
+                  startContent={<FileDown size={16} />}
+                  endContent={<ChevronDown size={16} />}
+                >
+                  {messages.export}
                 </Button>
               </DropdownTrigger>
-                <DropdownMenu
+              <DropdownMenu aria-label="Export options">
-                  disallowEmptySelection
+                <DropdownItem key="json" startContent={<FileJson size={16} />} onPress={() => onExportCases('json')}>
-                  aria-label="Export options"
-                  className="max-w-[300px]"
-                  selectedKeys={exportType}
-                  selectionMode="single"
-                  onSelectionChange={handleExportTypeChange}
-                >
-                  <DropdownItem key="json" startContent={<FileJson size={16} />}>
                   json
                 </DropdownItem>
-                  <DropdownItem key="csv" startContent={<FileSpreadsheet size={16} />}>
+                <DropdownItem
+                  key="csv"
+                  startContent={<FileSpreadsheet size={16} />}
+                  onPress={() => onExportCases('csv')}
+                >
                   csv
                 </DropdownItem>
               </DropdownMenu>
             </Dropdown>
-            </ButtonGroup>
             <Button
               startContent={<Plus size={16} />}
               size="sm"

frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx

@@ -222,40 +222,42 @@ export default function RunEditor({
           <h3 className="font-bold ms-2">{testRun.name}</h3>
         </div>
         <div className="flex items-center">
-          <ButtonGroup className="me-2">
-            <Button
-              startContent={<FileDown size={16} />}
-              size="sm"
-              onPress={() => exportRun(tokenContext.token.access_token, Number(testRun.id), Array.from(exportType)[0])}
-            >
-              {messages.export} {exportType}
-            </Button>
           <Dropdown placement="bottom-end">
             <DropdownTrigger>
-                <Button isIconOnly size="sm">
+              <Button
-                  <ChevronDown size={16} />
+                variant="bordered"
+                size="sm"
+                className="me-2"
+                startContent={<FileDown size={16} />}
+                endContent={<ChevronDown size={16} />}
+              >
+                {messages.export}
               </Button>
             </DropdownTrigger>
-              <DropdownMenu
+            <DropdownMenu disallowEmptySelection aria-label="Export options">
-                disallowEmptySelection
+              <DropdownItem
-                aria-label="Export options"
+                key="xml"
-                className="max-w-[300px]"
+                startContent={<FileCode size={16} />}
-                selectedKeys={exportType}
+                onPress={() => exportRun(tokenContext.token.access_token, Number(testRun.id), 'xml')}
-                selectionMode="single"
-                onSelectionChange={handleExportTypeChange}
               >
-                <DropdownItem key="xml" startContent={<FileCode size={16} />}>
                 xml
               </DropdownItem>
-                <DropdownItem key="json" startContent={<FileJson size={16} />}>
+              <DropdownItem
+                key="json"
+                startContent={<FileJson size={16} />}
+                onPress={() => exportRun(tokenContext.token.access_token, Number(testRun.id), 'json')}
+              >
                 json
               </DropdownItem>
-                <DropdownItem key="csv" startContent={<FileSpreadsheet size={16} />}>
+              <DropdownItem
+                key="csv"
+                startContent={<FileSpreadsheet size={16} />}
+                onPress={() => exportRun(tokenContext.token.access_token, Number(testRun.id), 'csv')}
+              >
                 csv
               </DropdownItem>
             </DropdownMenu>
           </Dropdown>
-          </ButtonGroup>
           <Button
             startContent={
               <Badge isInvisible={!isDirty} color="danger" size="sm" content="" shape="circle">