From 4cce12f99d50eb50c44eaef15607582b3d7a0362 Mon Sep 17 00:00:00 2001 From: Denise Li Date: Fri, 4 Oct 2024 12:16:46 -0400 Subject: [PATCH 1/3] temp --- .../src/features/modules/ModulesTree.tsx | 25 ++++++++++++++++--- .../src/features/modules/module.utils.ts | 2 ++ 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/frontend/console/src/features/modules/ModulesTree.tsx b/frontend/console/src/features/modules/ModulesTree.tsx index ba41fbab9a..f5235c3d08 100644 --- a/frontend/console/src/features/modules/ModulesTree.tsx +++ b/frontend/console/src/features/modules/ModulesTree.tsx @@ -144,7 +144,8 @@ export const ModulesTree = ({ modules }: { modules: ModuleTreeItem[] }) => { const declTypesFromUrl = declTypeMultiselectOpts.filter((o) => declTypeKeysFromUrl.includes(o.key)) const [selectedDeclTypes, setSelectedDeclTypes] = useState(declTypesFromUrl.length === 0 ? declTypeMultiselectOpts : declTypesFromUrl) - const [expandedModules, setExpandedModules] = useState(getInitialExpandedModules(moduleName, declName)) + const initialExpanded = getInitialExpandedModules(moduleName, declName) + const [expandedModules, setExpandedModules] = useState(initialExpanded) useEffect(() => { setExpandedModules(getInitialExpandedModules(moduleName, declName)) }, [moduleName, declName]) @@ -160,14 +161,30 @@ export const ModulesTree = ({ modules }: { modules: ModuleTreeItem[] }) => { setSelectedDeclTypes(opts) } - function toggle(moduleName: string) { - toggleModuleExpansionInLocalStorage(moduleName) + function toggle(toggledModule: string) { + const beforeFromLS = listExpandedModulesFromLocalStorage() + if (toggledModule === moduleName && beforeFromLS.includes(toggledModule) && !expandedModules.includes(toggledModule)) { + // Local storage is out of sync from the state because user closed the + // module for the selected decl, which un-syncs the state from the saved + // state. Re-opening the selected module lets us re-sync those. + // The reason they go out of sync is getInitialExpandedModules gets called + // while the decl is still selected, so the module gets added back to the + // saved state despite being hence removed from the component state. + //setExpandedModules(listExpandedModulesFromLocalStorage()) + //return + } + console.log('asdf', listExpandedModulesFromLocalStorage(), expandedModules) + toggleModuleExpansionInLocalStorage(toggledModule) setExpandedModules(listExpandedModulesFromLocalStorage()) + console.log('asdf2', listExpandedModulesFromLocalStorage(), expandedModules) } function collapseAll() { collapseAllModulesInLocalStorage() - setExpandedModules([]) + if (moduleName && declName) { + addModuleToLocalStorageIfMissing(moduleName) + } + setExpandedModules(listExpandedModulesFromLocalStorage()) } modules.sort((m1, m2) => Number(m1.isBuiltin) - Number(m2.isBuiltin)) diff --git a/frontend/console/src/features/modules/module.utils.ts b/frontend/console/src/features/modules/module.utils.ts index 68a3e56361..d8323c267b 100644 --- a/frontend/console/src/features/modules/module.utils.ts +++ b/frontend/console/src/features/modules/module.utils.ts @@ -99,6 +99,7 @@ export const declFromSchema = (moduleName: string, declName: string, schema: Pul export const listExpandedModulesFromLocalStorage = () => (localStorage.getItem('tree_m') || '').split(',').filter((s) => s !== '') export const toggleModuleExpansionInLocalStorage = (moduleName: string) => { + console.log('toggle') const expanded = listExpandedModulesFromLocalStorage() const i = expanded.indexOf(moduleName) if (i === -1) { @@ -110,6 +111,7 @@ export const toggleModuleExpansionInLocalStorage = (moduleName: string) => { } export const addModuleToLocalStorageIfMissing = (moduleName?: string) => { + console.log('add') const expanded = listExpandedModulesFromLocalStorage() if (moduleName && !expanded.includes(moduleName)) { localStorage.setItem('tree_m', [...expanded, moduleName].join(',')) From d909e0e49ff33680650e366c64ce1db70a6638b2 Mon Sep 17 00:00:00 2001 From: Denise Li Date: Mon, 7 Oct 2024 14:33:10 -0400 Subject: [PATCH 2/3] move add selected --- .../src/features/modules/ModulesTree.tsx | 29 +++++-------------- 1 file changed, 7 insertions(+), 22 deletions(-) diff --git a/frontend/console/src/features/modules/ModulesTree.tsx b/frontend/console/src/features/modules/ModulesTree.tsx index f5235c3d08..d36370f0f4 100644 --- a/frontend/console/src/features/modules/ModulesTree.tsx +++ b/frontend/console/src/features/modules/ModulesTree.tsx @@ -127,13 +127,6 @@ const ModuleSection = ({ ) } -function getInitialExpandedModules(moduleName?: string, declName?: string): string[] { - if (moduleName && declName) { - addModuleToLocalStorageIfMissing(moduleName) - } - return listExpandedModulesFromLocalStorage() -} - const declTypesSearchParamKey = 'dt' export const ModulesTree = ({ modules }: { modules: ModuleTreeItem[] }) => { @@ -144,10 +137,13 @@ export const ModulesTree = ({ modules }: { modules: ModuleTreeItem[] }) => { const declTypesFromUrl = declTypeMultiselectOpts.filter((o) => declTypeKeysFromUrl.includes(o.key)) const [selectedDeclTypes, setSelectedDeclTypes] = useState(declTypesFromUrl.length === 0 ? declTypeMultiselectOpts : declTypesFromUrl) - const initialExpanded = getInitialExpandedModules(moduleName, declName) + const initialExpanded = listExpandedModulesFromLocalStorage() const [expandedModules, setExpandedModules] = useState(initialExpanded) useEffect(() => { - setExpandedModules(getInitialExpandedModules(moduleName, declName)) + if (moduleName && declName) { + addModuleToLocalStorageIfMissing(moduleName) + } + setExpandedModules(listExpandedModulesFromLocalStorage()) }, [moduleName, declName]) function msOnChange(opts: MultiselectOpt[]) { @@ -161,22 +157,11 @@ export const ModulesTree = ({ modules }: { modules: ModuleTreeItem[] }) => { setSelectedDeclTypes(opts) } + // ['didweb'] -> toggle: [] => didweb removed from ls + state, component reinits WITHOUT adding didweb back in, but when component inits otherwise, didweb does get added in + function toggle(toggledModule: string) { - const beforeFromLS = listExpandedModulesFromLocalStorage() - if (toggledModule === moduleName && beforeFromLS.includes(toggledModule) && !expandedModules.includes(toggledModule)) { - // Local storage is out of sync from the state because user closed the - // module for the selected decl, which un-syncs the state from the saved - // state. Re-opening the selected module lets us re-sync those. - // The reason they go out of sync is getInitialExpandedModules gets called - // while the decl is still selected, so the module gets added back to the - // saved state despite being hence removed from the component state. - //setExpandedModules(listExpandedModulesFromLocalStorage()) - //return - } - console.log('asdf', listExpandedModulesFromLocalStorage(), expandedModules) toggleModuleExpansionInLocalStorage(toggledModule) setExpandedModules(listExpandedModulesFromLocalStorage()) - console.log('asdf2', listExpandedModulesFromLocalStorage(), expandedModules) } function collapseAll() { From 1b11539c5287eeec6dc35f9b8dc2f6918346747d Mon Sep 17 00:00:00 2001 From: Denise Li Date: Mon, 7 Oct 2024 14:34:51 -0400 Subject: [PATCH 3/3] cleanup --- frontend/console/src/features/modules/ModulesTree.tsx | 2 -- frontend/console/src/features/modules/module.utils.ts | 2 -- 2 files changed, 4 deletions(-) diff --git a/frontend/console/src/features/modules/ModulesTree.tsx b/frontend/console/src/features/modules/ModulesTree.tsx index d36370f0f4..b3e7646125 100644 --- a/frontend/console/src/features/modules/ModulesTree.tsx +++ b/frontend/console/src/features/modules/ModulesTree.tsx @@ -157,8 +157,6 @@ export const ModulesTree = ({ modules }: { modules: ModuleTreeItem[] }) => { setSelectedDeclTypes(opts) } - // ['didweb'] -> toggle: [] => didweb removed from ls + state, component reinits WITHOUT adding didweb back in, but when component inits otherwise, didweb does get added in - function toggle(toggledModule: string) { toggleModuleExpansionInLocalStorage(toggledModule) setExpandedModules(listExpandedModulesFromLocalStorage()) diff --git a/frontend/console/src/features/modules/module.utils.ts b/frontend/console/src/features/modules/module.utils.ts index d8323c267b..68a3e56361 100644 --- a/frontend/console/src/features/modules/module.utils.ts +++ b/frontend/console/src/features/modules/module.utils.ts @@ -99,7 +99,6 @@ export const declFromSchema = (moduleName: string, declName: string, schema: Pul export const listExpandedModulesFromLocalStorage = () => (localStorage.getItem('tree_m') || '').split(',').filter((s) => s !== '') export const toggleModuleExpansionInLocalStorage = (moduleName: string) => { - console.log('toggle') const expanded = listExpandedModulesFromLocalStorage() const i = expanded.indexOf(moduleName) if (i === -1) { @@ -111,7 +110,6 @@ export const toggleModuleExpansionInLocalStorage = (moduleName: string) => { } export const addModuleToLocalStorageIfMissing = (moduleName?: string) => { - console.log('add') const expanded = listExpandedModulesFromLocalStorage() if (moduleName && !expanded.includes(moduleName)) { localStorage.setItem('tree_m', [...expanded, moduleName].join(','))