fix(ui): fix model edit button disabled status

This commit is contained in:
psychedelicious 2023-07-14 17:36:10 +10:00
parent 48a8bd4985
commit 6d7fb49a7a
3 changed files with 11 additions and 15 deletions

View File

@ -6,13 +6,13 @@ import { Divider, Flex, Text } from '@chakra-ui/react';
import { useForm } from '@mantine/form'; import { useForm } from '@mantine/form';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import type { RootState } from 'app/store/store';
import IAIButton from 'common/components/IAIButton'; import IAIButton from 'common/components/IAIButton';
import IAIMantineSelect from 'common/components/IAIMantineSelect'; import IAIMantineSelect from 'common/components/IAIMantineSelect';
import { makeToast } from 'app/components/Toaster'; import { makeToast } from 'app/components/Toaster';
import IAIMantineTextInput from 'common/components/IAIMantineInput'; import IAIMantineTextInput from 'common/components/IAIMantineInput';
import { MODEL_TYPE_MAP } from 'features/parameters/types/constants'; import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
import { selectIsBusy } from 'features/system/store/systemSelectors';
import { addToast } from 'features/system/store/systemSlice'; import { addToast } from 'features/system/store/systemSlice';
import { useUpdateMainModelsMutation } from 'services/api/endpoints/models'; import { useUpdateMainModelsMutation } from 'services/api/endpoints/models';
import { components } from 'services/api/schema'; import { components } from 'services/api/schema';
@ -39,9 +39,7 @@ type CheckpointModelEditProps = {
}; };
export default function CheckpointModelEdit(props: CheckpointModelEditProps) { export default function CheckpointModelEdit(props: CheckpointModelEditProps) {
const isProcessing = useAppSelector( const isBusy = useAppSelector(selectIsBusy);
(state: RootState) => state.system.isProcessing
);
const { modelToEdit, retrievedModel } = props; const { modelToEdit, retrievedModel } = props;
@ -153,8 +151,8 @@ export default function CheckpointModelEdit(props: CheckpointModelEditProps) {
{...checkpointEditForm.getInputProps('config')} {...checkpointEditForm.getInputProps('config')}
/> />
<IAIButton <IAIButton
disabled={isProcessing}
type="submit" type="submit"
isDisabled={isBusy || isLoading}
isLoading={isLoading} isLoading={isLoading}
> >
{t('modelManager.updateModel')} {t('modelManager.updateModel')}

View File

@ -7,12 +7,12 @@ import { useTranslation } from 'react-i18next';
import { useForm } from '@mantine/form'; import { useForm } from '@mantine/form';
import { makeToast } from 'app/components/Toaster'; import { makeToast } from 'app/components/Toaster';
import type { RootState } from 'app/store/store';
import IAIButton from 'common/components/IAIButton'; import IAIButton from 'common/components/IAIButton';
import IAIMantineTextInput from 'common/components/IAIMantineInput'; import IAIMantineTextInput from 'common/components/IAIMantineInput';
import IAIMantineSelect from 'common/components/IAIMantineSelect'; import IAIMantineSelect from 'common/components/IAIMantineSelect';
import { MODEL_TYPE_MAP } from 'features/parameters/types/constants'; import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
import { selectIsBusy } from 'features/system/store/systemSelectors';
import { addToast } from 'features/system/store/systemSlice'; import { addToast } from 'features/system/store/systemSlice';
import { useUpdateMainModelsMutation } from 'services/api/endpoints/models'; import { useUpdateMainModelsMutation } from 'services/api/endpoints/models';
import { components } from 'services/api/schema'; import { components } from 'services/api/schema';
@ -38,9 +38,8 @@ const variantSelectData = [
]; ];
export default function DiffusersModelEdit(props: DiffusersModelEditProps) { export default function DiffusersModelEdit(props: DiffusersModelEditProps) {
const isProcessing = useAppSelector( const isBusy = useAppSelector(selectIsBusy);
(state: RootState) => state.system.isProcessing
);
const { retrievedModel, modelToEdit } = props; const { retrievedModel, modelToEdit } = props;
const [updateMainModel, { isLoading, error }] = useUpdateMainModelsMutation(); const [updateMainModel, { isLoading, error }] = useUpdateMainModelsMutation();
@ -138,8 +137,8 @@ export default function DiffusersModelEdit(props: DiffusersModelEditProps) {
{...diffusersEditForm.getInputProps('vae')} {...diffusersEditForm.getInputProps('vae')}
/> />
<IAIButton <IAIButton
disabled={isProcessing}
type="submit" type="submit"
isDisabled={isBusy || isLoading}
isLoading={isLoading} isLoading={isLoading}
> >
{t('modelManager.updateModel')} {t('modelManager.updateModel')}

View File

@ -13,6 +13,7 @@ import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIAlertDialog from 'common/components/IAIAlertDialog'; import IAIAlertDialog from 'common/components/IAIAlertDialog';
import IAIIconButton from 'common/components/IAIIconButton'; import IAIIconButton from 'common/components/IAIIconButton';
import { selectIsBusy } from 'features/system/store/systemSelectors';
import { setOpenModel } from 'features/system/store/systemSlice'; import { setOpenModel } from 'features/system/store/systemSlice';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useDeleteMainModelsMutation } from 'services/api/endpoints/models'; import { useDeleteMainModelsMutation } from 'services/api/endpoints/models';
@ -26,9 +27,7 @@ type ModelListItemProps = {
}; };
export default function ModelListItem(props: ModelListItemProps) { export default function ModelListItem(props: ModelListItemProps) {
const { isProcessing, isConnected } = useAppSelector( const isBusy = useAppSelector(selectIsBusy);
(state: RootState) => state.system
);
const { colorMode } = useColorMode(); const { colorMode } = useColorMode();
@ -89,7 +88,7 @@ export default function ModelListItem(props: ModelListItemProps) {
size="sm" size="sm"
onClick={openModelHandler} onClick={openModelHandler}
aria-label={t('accessibility.modifyConfig')} aria-label={t('accessibility.modifyConfig')}
isDisabled={status === 'active' || isProcessing || !isConnected} isDisabled={isBusy}
/> />
<IAIAlertDialog <IAIAlertDialog
title={t('modelManager.deleteModel')} title={t('modelManager.deleteModel')}
@ -100,7 +99,7 @@ export default function ModelListItem(props: ModelListItemProps) {
icon={<DeleteIcon />} icon={<DeleteIcon />}
size="sm" size="sm"
aria-label={t('modelManager.deleteConfig')} aria-label={t('modelManager.deleteConfig')}
isDisabled={status === 'active' || isProcessing || !isConnected} isDisabled={isBusy}
colorScheme="error" colorScheme="error"
/> />
} }