vvzvlad/portainer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(gitops): align list component with current design [BE-12888] (#2445)

Browse Source
This commit is contained in:
Chaim Lev-Ari
2026-04-26 16:54:51 +03:00
committed by GitHub
parent 718e11ccd0
commit 86f6aba362
18 changed files with 468 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/react/components/GroupSortTable/GroupSortTableHeader.tsx
+6 -3
View File
@@ -1,4 +1,4 @@
import React from 'react';
import { ReactNode } from 'react';
import clsx from 'clsx';
import { AutomationTestingProps } from '@/types';
@@ -18,10 +18,11 @@ interface Props<TSortKey extends string> {
onSearchChange: (term: string) => void;
sortOptions: SortOption<TSortKey>[];
searchPlaceholder?: string;
actionButton?: React.ReactNode;
actionButton?: ReactNode;
groupFilter: string | null;
groupOptions?: Record<string, DropdownOption[]>;
onGroupFilterChange: (value: string | null) => void;
headerButtons?: ReactNode;
}
export function GroupSortTableHeader<TSortKey extends string>({
@@ -35,6 +36,7 @@ export function GroupSortTableHeader<TSortKey extends string>({
groupFilter,
groupOptions,
onGroupFilterChange,
headerButtons,
'data-cy': dataCy,
}: Props<TSortKey> & AutomationTestingProps) {
return (
@@ -42,7 +44,7 @@ export function GroupSortTableHeader<TSortKey extends string>({
className={clsx(
'flex items-center justify-between gap-3 px-5 py-3',
'bg-gray-2 th-highcontrast:bg-black th-dark:bg-gray-iron-10',
'border-0 border-b border-solid border-gray-4'
'border-0 border-b border-solid border-gray-5 th-dark:border-gray-9'
)}
>
<SortByGroup
@@ -55,6 +57,7 @@ export function GroupSortTableHeader<TSortKey extends string>({
dataCy={dataCy}
/>
<div className="ml-auto flex items-center gap-2">
{headerButtons}
<SearchBar
value={searchTerm}
placeholder={searchPlaceholder}
app/react/components/GroupSortTable/SortByGroup.tsx
+34 -13
View File
@@ -63,18 +63,21 @@ export function SortByGroup<TSortKey extends string>({
);
}
const baseBtn =
'px-4 py-1.5 text-xs align-middle font-medium transition-colors';
const activeBtn =
'z-10 border-none rounded-md font-medium ' +
'bg-white text-gray-8 ' +
'th-dark:bg-gray-iron-10 th-dark:text-white ' +
'th-highcontrast:bg-white th-highcontrast:text-black';
const inactiveBtn =
'text-muted border-none rounded-md ' +
'bg-gray-4 hover:bg-gray-2 ' +
'th-dark:bg-gray-iron-11 th-dark:text-white th-dark:hover:bg-gray-iron-9 ' +
'th-highcontrast:bg-black th-highcontrast:text-white th-highcontrast:hover:bg-white th-highcontrast:hover:text-black';
const baseBtn = clsx(
'px-4 py-1.5 align-middle text-xs font-medium transition-colors'
);
const activeBtn = clsx(
'z-10 rounded-md border-none font-medium',
'bg-white text-gray-8',
'th-dark:bg-gray-iron-10 th-dark:text-white',
'th-highcontrast:border th-highcontrast:border-solid th-highcontrast:bg-transparent th-highcontrast:text-white'
);
const inactiveBtn = clsx(
'text-muted rounded-md border-none',
'bg-gray-4 hover:bg-gray-2',
'th-dark:bg-gray-iron-11 th-dark:text-white th-dark:hover:bg-gray-iron-9',
'th-highcontrast:bg-black th-highcontrast:text-white th-highcontrast:hover:bg-white th-highcontrast:hover:text-black'
);
interface SortOptionItemProps<TSortKey extends string> {
option: SortOption<TSortKey>;
@@ -113,7 +116,11 @@ function SortOptionItem<TSortKey extends string>({
options={groupOptions?.[option.key]}
selected={groupFilter}
onSelect={onGroupFilterChange}
badge={isActive ? groupFilter : undefined}
badge={
isActive
? getGroupLabel(groupOptions, option.key, groupFilter)
: undefined
}
className={className}
data-cy={`${dataCy}-sort-by-${option.key.toLowerCase()}-button`}
onClick={() => {
@@ -140,3 +147,17 @@ function SortOptionItem<TSortKey extends string>({
</button>
);
}
function getGroupLabel(
groupOptions: Record<string, DropdownOption[]> | undefined,
groupKey: string,
filter: string | null
): string | null {
if (!filter) {
return null;
}
const option = groupOptions?.[groupKey]?.find((o) => o.key === filter);
if (!option) return null;
return option.label ?? option.key;
}