yellowadmin/pp-tcms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: Improve UI consistency (#283)

Browse Source
This commit is contained in:
kimatata
2025-09-19 21:02:09 +09:00
committed by GitHub
parent 761869736e
commit 81805c605a
3 changed files with 75 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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