From 5be0de967d6cc70f5504974b7b90aced3b67bdd3 Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Wed, 24 Jul 2024 19:01:12 -0400
Subject: [PATCH] feat(ui): close generation and advanced accordions when
 switching to upscale tab

---
 .../AdvancedSettingsAccordion.tsx              | 10 ++++++++--
 .../GenerationSettingsAccordion.tsx            | 18 +++++++++++++++---
 .../hooks/useStandaloneAccordionToggle.ts      |  6 +++++-
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx
index 682878187f..06f9f74da1 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx
@@ -15,7 +15,7 @@ import ParamVAEPrecision from 'features/parameters/components/VAEModel/ParamVAEP
 import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
 import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { memo, useMemo } from 'react';
+import { memo, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useGetModelConfigQuery } from 'services/api/endpoints/models';
 
@@ -63,11 +63,17 @@ export const AdvancedSettingsAccordion = memo(() => {
   );
   const badges = useAppSelector(selectBadges);
   const { t } = useTranslation();
-  const { isOpen, onToggle } = useStandaloneAccordionToggle({
+  const { isOpen, onToggle, onClose } = useStandaloneAccordionToggle({
     id: 'advanced-settings',
     defaultIsOpen: false,
   });
 
+  useEffect(() => {
+    if (activeTabName === 'upscaling') {
+      onClose();
+    }
+  }, [activeTabName, onClose]);
+
   return (
     <StandaloneAccordion label={t('accordions.advanced.title')} badges={badges} isOpen={isOpen} onToggle={onToggle}>
       <Flex gap={4} alignItems="center" p={4} flexDir="column" data-testid="advanced-settings-accordion">
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx
index 1d9eee7cd8..50d7ea00b3 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx
@@ -14,8 +14,9 @@ import ParamMainModelSelect from 'features/parameters/components/MainModel/Param
 import { UseDefaultSettingsButton } from 'features/parameters/components/MainModel/UseDefaultSettingsButton';
 import { useExpanderToggle } from 'features/settingsAccordions/hooks/useExpanderToggle';
 import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle';
+import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { filter } from 'lodash-es';
-import { memo, useMemo } from 'react';
+import { memo, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelectedModelConfig } from 'services/api/hooks/useSelectedModelConfig';
 
@@ -26,6 +27,7 @@ const formLabelProps: FormLabelProps = {
 export const GenerationSettingsAccordion = memo(() => {
   const { t } = useTranslation();
   const modelConfig = useSelectedModelConfig();
+  const activeTabName = useAppSelector(activeTabNameSelector);
   const selectBadges = useMemo(
     () =>
       createMemoizedSelector(selectLoraSlice, (lora) => {
@@ -41,11 +43,21 @@ export const GenerationSettingsAccordion = memo(() => {
     id: 'generation-settings-advanced',
     defaultIsOpen: false,
   });
-  const { isOpen: isOpenAccordion, onToggle: onToggleAccordion } = useStandaloneAccordionToggle({
+  const {
+    isOpen: isOpenAccordion,
+    onToggle: onToggleAccordion,
+    onClose: onCloseAccordion,
+  } = useStandaloneAccordionToggle({
     id: 'generation-settings',
-    defaultIsOpen: true,
+    defaultIsOpen: activeTabName !== 'upscaling',
   });
 
+  useEffect(() => {
+    if (activeTabName === 'upscaling') {
+      onCloseAccordion();
+    }
+  }, [activeTabName, onCloseAccordion]);
+
   return (
     <StandaloneAccordion
       label={t('accordions.generation.title')}
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/hooks/useStandaloneAccordionToggle.ts b/invokeai/frontend/web/src/features/settingsAccordions/hooks/useStandaloneAccordionToggle.ts
index d69d08d17d..c7b92d9750 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/hooks/useStandaloneAccordionToggle.ts
+++ b/invokeai/frontend/web/src/features/settingsAccordions/hooks/useStandaloneAccordionToggle.ts
@@ -18,5 +18,9 @@ export const useStandaloneAccordionToggle = (arg: UseStandaloneAccordionToggleAr
   const onToggle = useCallback(() => {
     dispatch(accordionStateChanged({ id: arg.id, isOpen: !isOpen }));
   }, [arg.id, dispatch, isOpen]);
-  return { isOpen, onToggle };
+
+  const onClose = useCallback(() => {
+    dispatch(accordionStateChanged({ id: arg.id, isOpen: false }));
+  }, [arg.id, dispatch]);
+  return { isOpen, onToggle, onClose };
 };