Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-19 13:29:41 +02:00
Code Issues Releases Activity

refactor(docker/images): convert table to react [EE-4668] (#8910)

Browse source
This commit is contained in:
Chaim Lev-Ari 2023-07-13 10:47:20 +03:00 • committed by GitHub
parent 0e9902fee9
commit ecd54ab929
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 496 additions and 441 deletions
Download patch file Download diff file Expand all files Collapse all files

18
app/react/components/datatables/Filter.tsx
View file

@ -4,6 +4,8 @@ import { Menu, MenuButton, MenuPopover } from '@reach/menu-button';
import { Column } from '@tanstack/react-table';
import { Check, Filter } from 'lucide-react';
import { getValueAsArrayOfStrings } from '@/portainer/helpers/array';
import { Icon } from '@@/Icon';
interface MultipleSelectionFilterProps {
@ -103,19 +105,3 @@ export function filterHOC<TData extends Record<string, unknown>>(
);
};
}
function getValueAsArrayOfStrings(value: unknown): string[] {
if (Array.isArray(value)) {
return value;
}
if (!value || (typeof value !== 'string' && typeof value !== 'number')) {
return [];
}
if (typeof value === 'number') {
return [value.toString()];
}
return [value];
}

17
app/react/components/datatables/types.ts
View file

@ -93,8 +93,23 @@ export function createPersistedStore<T extends BasicTableSettings>(
...create(set),
} as T),
{
name: keyBuilder(storageKey),
name: `datatable_settings_${keyBuilder(storageKey)}`,
}
)
);
}
/** this class is just a dummy class to get return type of createPersistedStore
* can be fixed after upgrade to ts 4.7+
* https://stackoverflow.com/a/64919133
*/
class Wrapper<T extends BasicTableSettings> {
// eslint-disable-next-line class-methods-use-this
wrapped() {
return createPersistedStore<T>('', '');
}
}
export type CreatePersistedStoreReturn<
T extends BasicTableSettings = BasicTableSettings
> = ReturnType<Wrapper<T>['wrapped']>;

15
app/react/components/datatables/useTableState.ts
View file

@ -2,22 +2,11 @@ import { useMemo, useState } from 'react';
import { useStore } from 'zustand';
import { useSearchBarState } from './SearchBar';
import { BasicTableSettings, createPersistedStore } from './types';
/** this class is just a dummy class to get return type of createPersistedStore
* can be fixed after upgrade to ts 4.7+
* https://stackoverflow.com/a/64919133
*/
class Wrapper<T extends BasicTableSettings> {
// eslint-disable-next-line class-methods-use-this
wrapped() {
return createPersistedStore<T>('', '');
}
}
import { BasicTableSettings, CreatePersistedStoreReturn } from './types';
export function useTableState<
TSettings extends BasicTableSettings = BasicTableSettings
>(store: ReturnType<Wrapper<TSettings>['wrapped']>, storageKey: string) {
>(store: CreatePersistedStoreReturn<TSettings>, storageKey: string) {
const settings = useStore(store);
const [search, setSearch] = useSearchBarState(storageKey);