From 1c3011cc67ae2a2b52221727df39f3bf50300b2d Mon Sep 17 00:00:00 2001 From: Sina Javaheri Date: Thu, 10 Oct 2024 13:12:44 +0200 Subject: [PATCH] fix(inventory): fix badly implemented transition --- src/locales/de-DE/messages.po | 12 ++-- src/locales/en-US/messages.po | 12 ++-- src/pages/panel/inventory/GridFilterItem.tsx | 8 +-- src/pages/panel/inventory/InventoryPage.tsx | 58 +++++++++++++------- 4 files changed, 55 insertions(+), 35 deletions(-) diff --git a/src/locales/de-DE/messages.po b/src/locales/de-DE/messages.po index ee84d3a4..4a888201 100644 --- a/src/locales/de-DE/messages.po +++ b/src/locales/de-DE/messages.po @@ -272,7 +272,7 @@ msgstr "" msgid "Account: {0}" msgstr "Konto: {0}" -#: src/pages/panel/inventory/InventoryPage.tsx:248 +#: src/pages/panel/inventory/InventoryPage.tsx:264 msgid "accounts" msgstr "" @@ -397,7 +397,7 @@ msgstr "" msgid "All checks have been disabled for this resource" msgstr "Für diese Ressource wurden alle Prüfungen deaktiviert" -#: src/pages/panel/inventory/InventoryPage.tsx:75 +#: src/pages/panel/inventory/InventoryPage.tsx:91 msgid "All resource kinds" msgstr "" @@ -793,7 +793,7 @@ msgstr "" msgid "Cloud Inventory" msgstr "Cloud Inventar" -#: src/pages/panel/inventory/InventoryPage.tsx:247 +#: src/pages/panel/inventory/InventoryPage.tsx:263 msgid "clouds" msgstr "" @@ -1583,7 +1583,7 @@ msgstr "" msgid "Invalid Value" msgstr "Ungültiger Wert" -#: src/pages/panel/inventory/InventoryPage.tsx:204 +#: src/pages/panel/inventory/InventoryPage.tsx:220 #: src/shared/layouts/panel-layout/menuList.tsx:34 msgid "Inventory" msgstr "Inventar" @@ -1612,7 +1612,7 @@ msgstr "" msgid "Kind" msgstr "Art" -#: src/pages/panel/inventory/InventoryPage.tsx:250 +#: src/pages/panel/inventory/InventoryPage.tsx:266 msgid "kinds" msgstr "" @@ -2238,7 +2238,7 @@ msgstr "Regenerieren" msgid "Region" msgstr "Region" -#: src/pages/panel/inventory/InventoryPage.tsx:249 +#: src/pages/panel/inventory/InventoryPage.tsx:265 msgid "regions" msgstr "" diff --git a/src/locales/en-US/messages.po b/src/locales/en-US/messages.po index efac8885..19c810ce 100644 --- a/src/locales/en-US/messages.po +++ b/src/locales/en-US/messages.po @@ -272,7 +272,7 @@ msgstr "Account usage" msgid "Account: {0}" msgstr "Account: {0}" -#: src/pages/panel/inventory/InventoryPage.tsx:248 +#: src/pages/panel/inventory/InventoryPage.tsx:264 msgid "accounts" msgstr "accounts" @@ -397,7 +397,7 @@ msgstr "All changes over all resources." msgid "All checks have been disabled for this resource" msgstr "All checks have been disabled for this resource" -#: src/pages/panel/inventory/InventoryPage.tsx:75 +#: src/pages/panel/inventory/InventoryPage.tsx:91 msgid "All resource kinds" msgstr "All resource kinds" @@ -793,7 +793,7 @@ msgstr "Cloud Accounts" msgid "Cloud Inventory" msgstr "Cloud Inventory" -#: src/pages/panel/inventory/InventoryPage.tsx:247 +#: src/pages/panel/inventory/InventoryPage.tsx:263 msgid "clouds" msgstr "clouds" @@ -1583,7 +1583,7 @@ msgstr "Invalid file, Please follow the step-by-step instructions {0}." msgid "Invalid Value" msgstr "Invalid Value" -#: src/pages/panel/inventory/InventoryPage.tsx:204 +#: src/pages/panel/inventory/InventoryPage.tsx:220 #: src/shared/layouts/panel-layout/menuList.tsx:34 msgid "Inventory" msgstr "Inventory" @@ -1612,7 +1612,7 @@ msgstr "kind" msgid "Kind" msgstr "Kind" -#: src/pages/panel/inventory/InventoryPage.tsx:250 +#: src/pages/panel/inventory/InventoryPage.tsx:266 msgid "kinds" msgstr "kinds" @@ -2238,7 +2238,7 @@ msgstr "Regenerate" msgid "Region" msgstr "Region" -#: src/pages/panel/inventory/InventoryPage.tsx:249 +#: src/pages/panel/inventory/InventoryPage.tsx:265 msgid "regions" msgstr "regions" diff --git a/src/pages/panel/inventory/GridFilterItem.tsx b/src/pages/panel/inventory/GridFilterItem.tsx index 679be4fb..bea03086 100644 --- a/src/pages/panel/inventory/GridFilterItem.tsx +++ b/src/pages/panel/inventory/GridFilterItem.tsx @@ -58,9 +58,9 @@ export const GridFilterItem = ({ name, items, onChange, values: orgValues }: Gri setValues(orgValues) }, [orgValues]) const handleClose = () => { + setOpen(null) setValues(orgValues) setSearch('') - setOpen(null) } const lowerCaseSearch = search.toLowerCase() return ( @@ -138,8 +138,8 @@ export const GridFilterItem = ({ name, items, onChange, values: orgValues }: Gri { - onChange([]) setSearch('') + onChange([]) }} > @@ -180,9 +180,9 @@ export const GridFilterItem = ({ name, items, onChange, values: orgValues }: Gri variant="contained" fullWidth onClick={() => { - onChange(values) - setSearch('') setOpen(null) + setSearch('') + onChange(values) }} > Apply filters diff --git a/src/pages/panel/inventory/InventoryPage.tsx b/src/pages/panel/inventory/InventoryPage.tsx index f7824a71..04de77cf 100644 --- a/src/pages/panel/inventory/InventoryPage.tsx +++ b/src/pages/panel/inventory/InventoryPage.tsx @@ -2,11 +2,12 @@ import { t, Trans } from '@lingui/macro' import { useLingui } from '@lingui/react' import { Box, ButtonBase, Divider, Stack, Typography } from '@mui/material' import { useSuspenseQueries } from '@tanstack/react-query' -import { ReactNode, useMemo, useState } from 'react' +import { Dispatch, ReactNode, SetStateAction, useCallback, useMemo, useState, useTransition } from 'react' import { getNameAndIconFromMetadataGroup, StacksIcon } from 'src/assets/icons' import { useUserProfile } from 'src/core/auth' import { getWorkspaceInventoryModelQuery, postWorkspaceInventoryDescendantSummaryQuery } from 'src/pages/panel/shared/queries' import { CloudToIcon } from 'src/shared/cloud-avatar' +import { LoadingSuspenseFallback } from 'src/shared/loading' import { HelpSlider } from 'src/shared/right-slider' import { ResourceComplexKind } from 'src/shared/types/server-shared' import { getAccountCloudName } from 'src/shared/utils/getAccountCloudName' @@ -21,13 +22,28 @@ const getString = (str?: null | string | string[]) => { return typeof str === 'string' && str ? str : null } +function useTransitionState( + initialState: StateType | (() => StateType), +): [StateType, Dispatch>, boolean] { + const [state, setState] = useState(initialState) + const [isPending, startTransition] = useTransition() + const handleSetState = useCallback>>((arg) => startTransition(() => setState(arg)), []) + return [state, handleSetState, isPending] +} + export default function InventoryPage() { const { selectedWorkspace } = useUserProfile() - const [cloudFilter, setCloudFilter] = useState([]) - const [accountFilter, setAccountFilter] = useState([]) - const [regionFilter, setRegionFilter] = useState([]) - const [kindFilter, setKindFilter] = useState([]) - const [groupFilter, setGroupFilter] = useState('') + const [cloudFilter, setCloudFilter, isCloudFilterChangePending] = useTransitionState([]) + const [accountFilter, setAccountFilter, isAccountFilterChangePending] = useTransitionState([]) + const [regionFilter, setRegionFilter, isRegionFilterChangePending] = useTransitionState([]) + const [kindFilter, setKindFilter, isKindFilterChangePending] = useTransitionState([]) + const [groupFilter, setGroupFilter, isGroupFilterChangePending] = useTransitionState('') + const pendingTransition = + isCloudFilterChangePending || + isAccountFilterChangePending || + isRegionFilterChangePending || + isKindFilterChangePending || + isGroupFilterChangePending const { i18n: { locale }, } = useLingui() @@ -265,19 +281,23 @@ export default function InventoryPage() { - + {pendingTransition ? ( + + ) : ( + + )}