chore: Improve UI consistency (#283)

2025-09-19 21:02:09 +09:00
parent 761869736e
commit 81805c605a
3 changed files with 75 additions and 83 deletions
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseFilter.tsx
+++ b/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'}`}
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx
+++ b/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') && (
-              <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">
+            <Dropdown>
              <DropdownTrigger>
-                  <Button isIconOnly size="sm">
-                    <ChevronDown size={16} />
+                <Button
+                  size="sm"
+                  variant="bordered"
+                  className="me-2"
+                  startContent={<FileDown size={16} />}
+                  endContent={<ChevronDown size={16} />}
+                >
+                  {messages.export}
                </Button>
              </DropdownTrigger>
-                <DropdownMenu
-                  disallowEmptySelection
-                  aria-label="Export options"
-                  className="max-w-[300px]"
-                  selectedKeys={exportType}
-                  selectionMode="single"
-                  onSelectionChange={handleExportTypeChange}
-                >
-                  <DropdownItem key="json" startContent={<FileJson size={16} />}>
+              <DropdownMenu aria-label="Export options">
+                <DropdownItem key="json" startContent={<FileJson size={16} />} onPress={() => onExportCases('json')}>
                  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"
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx
+++ b/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">
-                  <ChevronDown size={16} />
+              <Button
+                variant="bordered"
+                size="sm"
+                className="me-2"
+                startContent={<FileDown size={16} />}
+                endContent={<ChevronDown size={16} />}
+              >
+                {messages.export}
              </Button>
            </DropdownTrigger>
-              <DropdownMenu
-                disallowEmptySelection
-                aria-label="Export options"
-                className="max-w-[300px]"
-                selectedKeys={exportType}
-                selectionMode="single"
-                onSelectionChange={handleExportTypeChange}
+            <DropdownMenu disallowEmptySelection aria-label="Export options">
+              <DropdownItem
+                key="xml"
+                startContent={<FileCode size={16} />}
+                onPress={() => exportRun(tokenContext.token.access_token, Number(testRun.id), 'xml')}
              >
-                <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">