feat(ui): close generation and advanced accordions when switching to upscale tab

Author: Mary Hipp

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">

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')}

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 };
 };