add button to navigate to model manager if tab is enabled

This commit is contained in:
Mary Hipp 2024-03-01 10:59:35 -05:00 committed by Ryan Dick
parent 01d86f3a78
commit 107390e40b
3 changed files with 42 additions and 2 deletions

View File

@ -15,7 +15,7 @@ const STATUSES = {
const ImportQueueBadge = ({ status, errorReason }: { status?: ModelInstallStatus; errorReason?: string | null }) => { const ImportQueueBadge = ({ status, errorReason }: { status?: ModelInstallStatus; errorReason?: string | null }) => {
const { t } = useTranslation(); const { t } = useTranslation();
if (!status) { if (!status || !Object.keys(STATUSES).includes(status)) {
return <></>; return <></>;
} }

View File

@ -0,0 +1,36 @@
import type { IconButtonProps } from '@invoke-ai/ui-library';
import { IconButton } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { setActiveTab } from 'features/ui/store/uiSlice';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { PiGearSixBold } from 'react-icons/pi';
export const NavigateToModelManagerButton = memo((props: Omit<IconButtonProps, 'aria-label'>) => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const disabledTabs = useAppSelector((s) => s.config.disabledTabs);
const shouldShowButton = useMemo(() => !disabledTabs.includes('modelManager'), [disabledTabs]);
const handleClick = useCallback(() => {
dispatch(setActiveTab('modelManager'));
}, [dispatch]);
if (!shouldShowButton) {
return null;
}
return (
<IconButton
icon={<PiGearSixBold />}
tooltip={t('modelManager.modelManager')}
aria-label={t('modelManager.modelManager')}
onClick={handleClick}
size="sm"
variant="ghost"
{...props}
/>
);
});
NavigateToModelManagerButton.displayName = 'NavigateToModelManagerButton';

View File

@ -10,6 +10,7 @@ import { SyncModelsIconButton } from 'features/modelManagerV2/components/SyncMod
import ParamCFGScale from 'features/parameters/components/Core/ParamCFGScale'; import ParamCFGScale from 'features/parameters/components/Core/ParamCFGScale';
import ParamScheduler from 'features/parameters/components/Core/ParamScheduler'; import ParamScheduler from 'features/parameters/components/Core/ParamScheduler';
import ParamSteps from 'features/parameters/components/Core/ParamSteps'; import ParamSteps from 'features/parameters/components/Core/ParamSteps';
import { NavigateToModelManagerButton } from 'features/parameters/components/MainModel/NavigateToModelManagerButton';
import ParamMainModelSelect from 'features/parameters/components/MainModel/ParamMainModelSelect'; import ParamMainModelSelect from 'features/parameters/components/MainModel/ParamMainModelSelect';
import { useExpanderToggle } from 'features/settingsAccordions/hooks/useExpanderToggle'; import { useExpanderToggle } from 'features/settingsAccordions/hooks/useExpanderToggle';
import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle'; import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle';
@ -56,7 +57,10 @@ export const GenerationSettingsAccordion = memo(() => {
<Flex gap={4} flexDir="column"> <Flex gap={4} flexDir="column">
<Flex gap={4} alignItems="center"> <Flex gap={4} alignItems="center">
<ParamMainModelSelect /> <ParamMainModelSelect />
<SyncModelsIconButton /> <Flex>
<SyncModelsIconButton />
<NavigateToModelManagerButton />
</Flex>
</Flex> </Flex>
<Flex gap={4} flexDir="column"> <Flex gap={4} flexDir="column">
<LoRASelect /> <LoRASelect />