Skip to content

Commit

Permalink
fix: switch to managing hiddenColumnKeys in TableColumnsSettingModal
Browse files Browse the repository at this point in the history
  • Loading branch information
@agatha197
agatha197 committed Nov 27, 2024
1 parent e49d0ff commit 8aa9a76
Show file tree
Hide file tree
Showing 12 changed files with 244 additions and 172 deletions.
37 changes: 22 additions & 15 deletions react/src/components/AgentList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
import { useSuspendedBackendaiClient, useUpdatableState } from '../hooks';
import { ResourceSlotName, useResourceSlotsDetails } from '../hooks/backendai';
import { useBAIPaginationOptionState } from '../hooks/reactPaginationQueryOptions';
import { useBAISettingUserState } from '../hooks/useBAISetting';
import { useThemeMode } from '../hooks/useThemeMode';
import AgentDetailModal from './AgentDetailModal';
import AgentSettingModal from './AgentSettingModal';
Expand All @@ -32,7 +33,7 @@ import {
ReloadOutlined,
SettingOutlined,
} from '@ant-design/icons';
import { useLocalStorageState } from 'ahooks';
import { useToggle } from 'ahooks';
import {
Button,
Segmented,
Expand Down Expand Up @@ -71,7 +72,8 @@ const AgentList: React.FC<AgentListProps> = ({
useState<AgentDetailModalFragment$key | null>();
const [currentSettingAgent, setCurrentSettingAgent] =
useState<AgentSettingModalFragment$key | null>();
const [isOpenColumnsSetting, setIsOpenColumnsSetting] = useState(false);
const [visibleColumnSettingModal, { toggle: toggleColumnSettingModal }] =
useToggle();
const baiClient = useSuspendedBackendaiClient();
const [isPendingStatusFetch, startStatusFetchTransition] = useTransition();
const [isPendingRefresh, startRefreshTransition] = useTransition();
Expand Down Expand Up @@ -756,12 +758,9 @@ const AgentList: React.FC<AgentListProps> = ({
},
},
];
const [displayedColumnKeys, setDisplayedColumnKeys] = useLocalStorageState(
'backendaiwebui.AgentList.displayedColumnKeys',
{
defaultValue: columns.map((column) => _.toString(column.key)),
},
);

const [hiddenColumnKeys, setHiddenColumnKeys] =
useBAISettingUserState('hiddenColumnKeys');

return (
<Flex direction="column" align="stretch" style={containerStyle}>
Expand Down Expand Up @@ -855,8 +854,10 @@ const AgentList: React.FC<AgentListProps> = ({
dataSource={filterNonNullItems(agent_list?.items)}
showSorterTooltip={false}
columns={
_.filter(columns, (column) =>
displayedColumnKeys?.includes(_.toString(column.key)),
_.filter(
columns,
(column) =>
!_.includes(hiddenColumnKeys?.value, _.toString(column?.key)),
) as ColumnType<AnyObject>[]
}
pagination={{
Expand Down Expand Up @@ -898,7 +899,7 @@ const AgentList: React.FC<AgentListProps> = ({
type="text"
icon={<SettingOutlined />}
onClick={() => {
setIsOpenColumnsSetting(true);
toggleColumnSettingModal();
}}
/>
</Flex>
Expand All @@ -918,14 +919,20 @@ const AgentList: React.FC<AgentListProps> = ({
}}
/>
<TableColumnsSettingModal
open={isOpenColumnsSetting}
open={visibleColumnSettingModal}
onRequestClose={(values) => {
values?.selectedColumnKeys &&
setDisplayedColumnKeys(values?.selectedColumnKeys);
setIsOpenColumnsSetting(false);
setHiddenColumnKeys({
key: 'AgentList',
value: _.difference(
columns.map((column) => _.toString(column.key)),
values?.selectedColumnKeys,
),
});
toggleColumnSettingModal();
}}
columns={columns}
displayedColumnKeys={displayedColumnKeys ? displayedColumnKeys : []}
hiddenColumnKeys={hiddenColumnKeys}
/>
</Flex>
);
Expand Down
36 changes: 21 additions & 15 deletions react/src/components/AgentSummaryList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { useSuspendedBackendaiClient, useUpdatableState } from '../hooks';
import { ResourceSlotName, useResourceSlotsDetails } from '../hooks/backendai';
import { useBAIPaginationOptionState } from '../hooks/reactPaginationQueryOptions';
import { useSuspenseTanQuery } from '../hooks/reactQueryAlias';
import { useBAISettingUserState } from '../hooks/useBAISetting';
import BAIProgressWithLabel from './BAIProgressWithLabel';
import BAIPropertyFilter from './BAIPropertyFilter';
import Flex from './Flex';
Expand All @@ -25,7 +26,7 @@ import {
ReloadOutlined,
SettingOutlined,
} from '@ant-design/icons';
import { useLocalStorageState } from 'ahooks';
import { useToggle } from 'ahooks';
import {
Button,
Segmented,
Expand Down Expand Up @@ -59,7 +60,8 @@ const AgentSummaryList: React.FC<AgentSummaryListProps> = ({
const { t } = useTranslation();
const { token } = theme.useToken();
const { mergedResourceSlots } = useResourceSlotsDetails();
const [isOpenColumnsSetting, setIsOpenColumnsSetting] = useState(false);
const [visibleColumnSettingModal, { toggle: toggleColumnSettingModal }] =
useToggle();
const [isPendingStatusFetch, startStatusFetchTransition] = useTransition();
const [isPendingRefresh, startRefreshTransition] = useTransition();
const [isPendingPageChange, startPageChangeTransition] = useTransition();
Expand Down Expand Up @@ -372,12 +374,8 @@ const AgentSummaryList: React.FC<AgentSummaryListProps> = ({
sorter: true,
},
];
const [displayedColumnKeys, setDisplayedColumnKeys] = useLocalStorageState(
'backendaiwebui.AgentSummaryList.displayedColumnKeys',
{
defaultValue: columns.map((column) => _.toString(column.key)),
},
);
const [hiddenColumnKeys, setHiddenColumnKeys] =
useBAISettingUserState('hiddenColumnKeys');

return (
<Flex direction="column" align="stretch" style={containerStyle}>
Expand Down Expand Up @@ -466,8 +464,10 @@ const AgentSummaryList: React.FC<AgentSummaryListProps> = ({
dataSource={filterNonNullItems(filteredAgentSummaryList)}
showSorterTooltip={false}
columns={
_.filter(columns, (column) =>
displayedColumnKeys?.includes(_.toString(column.key)),
_.filter(
columns,
(column) =>
!_.includes(hiddenColumnKeys?.value, _.toString(column?.key)),
) as ColumnType<AnyObject>[]
}
pagination={{
Expand Down Expand Up @@ -509,19 +509,25 @@ const AgentSummaryList: React.FC<AgentSummaryListProps> = ({
type="text"
icon={<SettingOutlined />}
onClick={() => {
setIsOpenColumnsSetting(true);
toggleColumnSettingModal();
}}
/>
</Flex>
<TableColumnsSettingModal
open={isOpenColumnsSetting}
open={visibleColumnSettingModal}
onRequestClose={(values) => {
values?.selectedColumnKeys &&
setDisplayedColumnKeys(values?.selectedColumnKeys);
setIsOpenColumnsSetting(false);
setHiddenColumnKeys({
key: 'AgentSummaryList',
value: _.difference(
columns.map((column) => _.toString(column.key)),
values?.selectedColumnKeys,
),
});
toggleColumnSettingModal();
}}
columns={columns}
displayedColumnKeys={displayedColumnKeys ? displayedColumnKeys : []}
hiddenColumnKeys={hiddenColumnKeys}
/>
</Flex>
);
Expand Down
27 changes: 16 additions & 11 deletions react/src/components/ContainerRegistryList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { filterNonNullItems, transformSorterToOrderString } from '../helper';
import { useSuspendedBackendaiClient, useUpdatableState } from '../hooks';
import { useBAIPaginationOptionState } from '../hooks/reactPaginationQueryOptions';
import { useSetBAINotification } from '../hooks/useBAINotification';
import { useBAISettingUserState } from '../hooks/useBAISetting';
import { usePainKiller } from '../hooks/usePainKiller';
import BAIModal from './BAIModal';
import BAIPropertyFilter from './BAIPropertyFilter';
Expand All @@ -23,7 +24,7 @@ import {
SettingOutlined,
SyncOutlined,
} from '@ant-design/icons';
import { useLocalStorageState, useToggle } from 'ahooks';
import { useToggle } from 'ahooks';
import {
Button,
Form,
Expand Down Expand Up @@ -441,12 +442,8 @@ const ContainerRegistryList: React.FC<{
},
];

const [displayedColumnKeys, setDisplayedColumnKeys] = useLocalStorageState(
'backendaiwebui.ContainerRegistryList.displayedColumnKeys',
{
defaultValue: _.map(columns, (column) => _.toString(column.key)),
},
);
const [hiddenColumnKeys, setHiddenColumnKeys] =
useBAISettingUserState('hiddenColumnKeys');

return (
<Flex
Expand Down Expand Up @@ -541,8 +538,10 @@ const ContainerRegistryList: React.FC<{
}}
dataSource={filterNonNullItems(containerRegistries)}
columns={
_.filter(columns, (column) =>
_.includes(displayedColumnKeys, _.toString(column.key)),
_.filter(
columns,
(column) =>
!_.includes(hiddenColumnKeys?.value, _.toString(column?.key)),
) as ColumnType<AnyObject>[]
}
/>
Expand Down Expand Up @@ -688,11 +687,17 @@ const ContainerRegistryList: React.FC<{
open={visibleColumnSettingModal}
onRequestClose={(values) => {
values?.selectedColumnKeys &&
setDisplayedColumnKeys(values?.selectedColumnKeys);
setHiddenColumnKeys({
key: 'ContainerRegistryList',
value: _.difference(
columns.map((column) => _.toString(column.key)),
values?.selectedColumnKeys,
),
});
toggleColumnSettingModal();
}}
columns={columns}
displayedColumnKeys={displayedColumnKeys ? displayedColumnKeys : []}
hiddenColumnKeys={hiddenColumnKeys}
/>
</Flex>
);
Expand Down
36 changes: 21 additions & 15 deletions react/src/components/CustomizedImageList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
useSuspendedBackendaiClient,
useUpdatableState,
} from '../hooks';
import { useBAISettingUserState } from '../hooks/useBAISetting';
import AliasedImageDoubleTags from './AliasedImageDoubleTags';
import BAITable from './BAITable';
import { ImageTags } from './ImageTags';
Expand All @@ -26,7 +27,7 @@ import {
SearchOutlined,
SettingOutlined,
} from '@ant-design/icons';
import { useLocalStorageState } from 'ahooks';
import { useToggle } from 'ahooks';
import { App, Button, Input, Popconfirm, theme, Typography } from 'antd';
import { AnyObject } from 'antd/es/_util/type';
import { ColumnsType, ColumnType } from 'antd/es/table';
Expand All @@ -53,7 +54,8 @@ const CustomizedImageList: React.FC<PropsWithChildren> = ({ children }) => {
const supportExtendedImageInfo =
baiClient?.supports('extended-image-info') ?? false;

const [isOpenColumnsSetting, setIsOpenColumnsSetting] = useState(false);
const [visibleColumnSettingModal, { toggle: toggleColumnSettingModal }] =
useToggle();
const [isRefetchPending, startRefetchTransition] = useTransition();
const [customizedImageListFetchKey, updateCustomizedImageListFetchKey] =
useUpdatableState('initial-fetch');
Expand Down Expand Up @@ -403,12 +405,8 @@ const CustomizedImageList: React.FC<PropsWithChildren> = ({ children }) => {
},
]);

const [displayedColumnKeys, setDisplayedColumnKeys] = useLocalStorageState(
'backendaiwebui.CustomizedImageList.displayedColumnKeys',
{
defaultValue: columns.map((column) => _.toString(column.key)),
},
);
const [hiddenColumnKeys, setHiddenColumnKeys] =
useBAISettingUserState('hiddenColumnKeys');

return (
<Flex direction="column" align="stretch" gap={'xs'}>
Expand Down Expand Up @@ -439,8 +437,10 @@ const CustomizedImageList: React.FC<PropsWithChildren> = ({ children }) => {
resizable
loading={isPendingSearchTransition}
columns={
columns.filter((column) =>
displayedColumnKeys?.includes(_.toString(column.key)),
_.filter(
columns,
(column) =>
!_.includes(hiddenColumnKeys?.value, _.toString(column?.key)),
) as ColumnType<AnyObject>[]
}
dataSource={filterNonNullItems(filteredImageData)}
Expand All @@ -458,20 +458,26 @@ const CustomizedImageList: React.FC<PropsWithChildren> = ({ children }) => {
type="text"
icon={<SettingOutlined />}
onClick={() => {
setIsOpenColumnsSetting(true);
toggleColumnSettingModal();
}}
/>
</Flex>
</Flex>
<TableColumnsSettingModal
open={isOpenColumnsSetting}
open={visibleColumnSettingModal}
onRequestClose={(values) => {
values?.selectedColumnKeys &&
setDisplayedColumnKeys(values?.selectedColumnKeys);
setIsOpenColumnsSetting(!isOpenColumnsSetting);
setHiddenColumnKeys({
key: 'CustomizedImageList',
value: _.difference(
columns.map((column) => _.toString(column.key)),
values?.selectedColumnKeys,
),
});
toggleColumnSettingModal();
}}
columns={columns}
displayedColumnKeys={displayedColumnKeys ? displayedColumnKeys : []}
hiddenColumnKeys={hiddenColumnKeys}
/>
</Flex>
);
Expand Down
Loading

0 comments on commit 8aa9a76

Please sign in to comment.