mirror of
https://github.com/portainer/portainer.git
synced 2025-08-02 20:35:25 +02:00
refactor(kube/volumes): migrate to react [EE-4695] (#10987)
This commit is contained in:
Chaim Lev-Ari
GitHub
parent
2b53bebcb3
commit
da615afc92
24 changed files with 347 additions and 397 deletions
|
|
@ -9,7 +9,16 @@ export default {
|
|||
type: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: ['success', 'danger', 'warn', 'info'],
|
||||
options: [
|
||||
'success',
|
||||
'danger',
|
||||
'warn',
|
||||
'info',
|
||||
'successSecondary',
|
||||
'dangerSecondary',
|
||||
'warnSecondary',
|
||||
'infoSecondary',
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -14,45 +14,45 @@ export type BadgeType =
|
|||
// the classes are typed in full because tailwind doesn't render the interpolated classes
|
||||
const typeClasses: Record<BadgeType, string> = {
|
||||
success: clsx(
|
||||
`text-success-9 bg-success-2`,
|
||||
`th-dark:text-success-3 th-dark:bg-success-10`,
|
||||
`th-highcontrast:text-success-3 th-highcontrast:bg-success-10`
|
||||
'text-success-9 bg-success-2',
|
||||
'th-dark:text-success-3 th-dark:bg-success-10',
|
||||
'th-highcontrast:text-success-3 th-highcontrast:bg-success-10'
|
||||
),
|
||||
warn: clsx(
|
||||
`text-warning-9 bg-warning-2`,
|
||||
`th-dark:text-warning-3 th-dark:bg-warning-10`,
|
||||
`th-highcontrast:text-warning-3 th-highcontrast:bg-warning-10`
|
||||
'text-warning-9 bg-warning-2',
|
||||
'th-dark:text-warning-3 th-dark:bg-warning-10',
|
||||
'th-highcontrast:text-warning-3 th-highcontrast:bg-warning-10'
|
||||
),
|
||||
danger: clsx(
|
||||
`text-error-9 bg-error-2`,
|
||||
`th-dark:text-error-3 th-dark:bg-error-10`,
|
||||
`th-highcontrast:text-error-3 th-highcontrast:bg-error-10`
|
||||
'text-error-9 bg-error-2',
|
||||
'th-dark:text-error-3 th-dark:bg-error-10',
|
||||
'th-highcontrast:text-error-3 th-highcontrast:bg-error-10'
|
||||
),
|
||||
info: clsx(
|
||||
`text-blue-9 bg-blue-2`,
|
||||
`th-dark:text-blue-3 th-dark:bg-blue-10`,
|
||||
`th-highcontrast:text-blue-3 th-highcontrast:bg-blue-10`
|
||||
'text-blue-9 bg-blue-2',
|
||||
'th-dark:text-blue-3 th-dark:bg-blue-10',
|
||||
'th-highcontrast:text-blue-3 th-highcontrast:bg-blue-10'
|
||||
),
|
||||
// the secondary classes are a bit darker in light mode and a bit lighter in dark mode
|
||||
successSecondary: clsx(
|
||||
`text-success-9 bg-success-3`,
|
||||
`th-dark:text-success-3 th-dark:bg-success-9`,
|
||||
`th-highcontrast:text-success-3 th-highcontrast:bg-success-9`
|
||||
'text-success-9 bg-success-3',
|
||||
'th-dark:text-success-3 th-dark:bg-success-9',
|
||||
'th-highcontrast:text-success-3 th-highcontrast:bg-success-9'
|
||||
),
|
||||
warnSecondary: clsx(
|
||||
`text-warning-9 bg-warning-3`,
|
||||
`th-dark:text-warning-3 th-dark:bg-warning-9`,
|
||||
`th-highcontrast:text-warning-3 th-highcontrast:bg-warning-9`
|
||||
'text-warning-9 bg-warning-3',
|
||||
'th-dark:text-warning-3 th-dark:bg-warning-9',
|
||||
'th-highcontrast:text-warning-3 th-highcontrast:bg-warning-9'
|
||||
),
|
||||
dangerSecondary: clsx(
|
||||
`text-error-9 bg-error-3`,
|
||||
`th-dark:text-error-3 th-dark:bg-error-9`,
|
||||
`th-highcontrast:text-error-3 th-highcontrast:bg-error-9`
|
||||
'text-error-9 bg-error-3',
|
||||
'th-dark:text-error-3 th-dark:bg-error-9',
|
||||
'th-highcontrast:text-error-3 th-highcontrast:bg-error-9'
|
||||
),
|
||||
infoSecondary: clsx(
|
||||
`text-blue-9 bg-blue-3`,
|
||||
`th-dark:text-blue-3 th-dark:bg-blue-9`,
|
||||
`th-highcontrast:text-blue-3 th-highcontrast:bg-blue-9`
|
||||
'text-blue-9 bg-blue-3',
|
||||
'th-dark:text-blue-3 th-dark:bg-blue-9',
|
||||
'th-highcontrast:text-blue-3 th-highcontrast:bg-blue-9'
|
||||
),
|
||||
};
|
||||
|
||||
|
|
|
|||
5
app/react/components/Badge/ExternalBadge.tsx
Normal file
5
app/react/components/Badge/ExternalBadge.tsx
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import { Badge } from '@@/Badge';
|
||||
|
||||
export function ExternalBadge() {
|
||||
return <Badge type="info">external</Badge>;
|
||||
}
|
||||
5
app/react/components/Badge/SystemBadge.tsx
Normal file
5
app/react/components/Badge/SystemBadge.tsx
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import { Badge } from '@@/Badge';
|
||||
|
||||
export function SystemBadge() {
|
||||
return <Badge type="success">system</Badge>;
|
||||
}
|
||||
5
app/react/components/Badge/UnusedBadge.tsx
Normal file
5
app/react/components/Badge/UnusedBadge.tsx
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import { Badge } from '@@/Badge';
|
||||
|
||||
export function UnusedBadge() {
|
||||
return <Badge type="warn">unused</Badge>;
|
||||
}
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
import _ from 'lodash';
|
||||
import { useState } from 'react';
|
||||
|
||||
interface Props {
|
||||
value: number;
|
||||
onChange(value: number): void;
|
||||
|
|
@ -5,10 +8,17 @@ interface Props {
|
|||
}
|
||||
|
||||
export function ItemsPerPageSelector({ value, onChange, showAll }: Props) {
|
||||
const [id] = useState(() => `${_.uniqueId()}-items-per-page`);
|
||||
return (
|
||||
<span className="limitSelector">
|
||||
<span className="space-right">Items per page</span>
|
||||
<label
|
||||
className="space-right text-xs text-[--text-main-color] font-normal"
|
||||
htmlFor={id}
|
||||
>
|
||||
Items per page
|
||||
</label>
|
||||
<select
|
||||
id={id}
|
||||
className="form-control"
|
||||
value={value}
|
||||
onChange={(e) => onChange(Number(e.target.value))}
|
||||
|
|
|
|||
|
|
@ -13,5 +13,7 @@ export function TableActions({
|
|||
return null;
|
||||
}
|
||||
|
||||
return <div className={clsx('actionBar', className)}>{children}</div>;
|
||||
return (
|
||||
<div className={clsx('flex gap-2 items-center', className)}>{children}</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,13 +19,14 @@ export function TableSettingsMenu({
|
|||
className={clsx('table-setting-menu-btn', {
|
||||
'setting-active': isExpanded,
|
||||
})}
|
||||
aria-label="Settings"
|
||||
title="Settings"
|
||||
>
|
||||
<MoreVertical
|
||||
size="13"
|
||||
className="space-right"
|
||||
strokeWidth="3px"
|
||||
aria-hidden="true"
|
||||
aria-label="Settings"
|
||||
/>
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ export function buildExpandColumn<T extends DefaultType>(): ColumnDef<T> {
|
|||
color="none"
|
||||
icon={table.getIsAllRowsExpanded() ? ChevronDown : ChevronUp}
|
||||
title="Expand all"
|
||||
aria-label="Expand all rows"
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
|
@ -34,12 +35,13 @@ export function buildExpandColumn<T extends DefaultType>(): ColumnDef<T> {
|
|||
color="none"
|
||||
icon={row.getIsExpanded() ? ChevronDown : ChevronUp}
|
||||
title={row.getIsExpanded() ? 'Collapse' : 'Expand'}
|
||||
aria-label={row.getIsExpanded() ? 'Collapse row' : 'Expand row'}
|
||||
aria-expanded={row.getIsExpanded()}
|
||||
/>
|
||||
),
|
||||
enableColumnFilter: false,
|
||||
enableGlobalFilter: false,
|
||||
enableHiding: false,
|
||||
|
||||
meta: {
|
||||
width: 40,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -17,6 +17,8 @@ export function createSelectColumn<T>(): ColumnDef<T> {
|
|||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
aria-label="Select all rows"
|
||||
title="Select all rows"
|
||||
/>
|
||||
),
|
||||
cell: ({ row, table }) => (
|
||||
|
|
@ -38,6 +40,7 @@ export function createSelectColumn<T>(): ColumnDef<T> {
|
|||
|
||||
lastSelectedId = row.id;
|
||||
}}
|
||||
aria-label="Select row"
|
||||
/>
|
||||
),
|
||||
enableHiding: false,
|
||||
|
|
|
|||
|
|
@ -25,8 +25,8 @@ export function useTableState<
|
|||
);
|
||||
}
|
||||
|
||||
export function useTableStateWithStorage(
|
||||
...args: Parameters<typeof createPersistedStore>
|
||||
export function useTableStateWithStorage<T extends BasicTableSettings>(
|
||||
...args: Parameters<typeof createPersistedStore<T>>
|
||||
) {
|
||||
const [store] = useState(() => createPersistedStore(...args));
|
||||
return useTableState(store, args[0]);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue