mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
tidy(ui): remove unused components
This commit is contained in:
psychedelicious
parent
d9a0efb20b
commit
4627a7c75f
@ -1,53 +0,0 @@
|
||||
import { Flex, Heading } from '@chakra-ui/layout';
|
||||
import { memo } from 'react';
|
||||
import DownloadWorkflowButton from 'features/workflowLibrary/components/DownloadWorkflowButton';
|
||||
import UploadWorkflowButton from 'features/workflowLibrary/components/LoadWorkflowFromFileButton';
|
||||
import ResetWorkflowEditorButton from 'features/workflowLibrary/components/ResetWorkflowButton';
|
||||
import SaveWorkflowButton from 'features/workflowLibrary/components/SaveWorkflowButton';
|
||||
import SaveWorkflowAsButton from 'features/workflowLibrary/components/SaveWorkflowAsButton';
|
||||
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
|
||||
import { useAppSelector } from 'app/store/storeHooks';
|
||||
|
||||
const TopCenterPanel = () => {
|
||||
const isWorkflowLibraryEnabled =
|
||||
useFeatureStatus('workflowLibrary').isFeatureEnabled;
|
||||
const name = useAppSelector(
|
||||
(state) => state.workflow.name || 'Untitled Workflow'
|
||||
);
|
||||
|
||||
return (
|
||||
<Flex
|
||||
sx={{
|
||||
gap: 2,
|
||||
position: 'absolute',
|
||||
top: 2,
|
||||
insetInlineStart: '50%',
|
||||
transform: 'translate(-50%)',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Heading
|
||||
m={2}
|
||||
size="md"
|
||||
userSelect="none"
|
||||
pointerEvents="none"
|
||||
noOfLines={1}
|
||||
wordBreak="break-all"
|
||||
maxW={80}
|
||||
>
|
||||
{name}
|
||||
</Heading>
|
||||
{/* <DownloadWorkflowButton />
|
||||
<UploadWorkflowButton />
|
||||
{isWorkflowLibraryEnabled && (
|
||||
<>
|
||||
<SaveWorkflowButton />
|
||||
<SaveWorkflowAsButton />
|
||||
</>
|
||||
)}
|
||||
<ResetWorkflowEditorButton /> */}
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(TopCenterPanel);
|
||||
@ -1,29 +0,0 @@
|
||||
import IAIIconButton from 'common/components/IAIIconButton';
|
||||
import { useWorkflow } from 'features/nodes/hooks/useWorkflow';
|
||||
import { memo, useCallback } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { FaDownload } from 'react-icons/fa';
|
||||
|
||||
const DownloadWorkflowButton = () => {
|
||||
const { t } = useTranslation();
|
||||
const workflow = useWorkflow();
|
||||
const handleDownload = useCallback(() => {
|
||||
const blob = new Blob([JSON.stringify(workflow, null, 2)]);
|
||||
const a = document.createElement('a');
|
||||
a.href = URL.createObjectURL(blob);
|
||||
a.download = `${workflow.name || 'My Workflow'}.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
}, [workflow]);
|
||||
return (
|
||||
<IAIIconButton
|
||||
icon={<FaDownload />}
|
||||
tooltip={t('workflows.downloadWorkflow')}
|
||||
aria-label={t('workflows.downloadWorkflow')}
|
||||
onClick={handleDownload}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(DownloadWorkflowButton);
|
||||
@ -1,30 +0,0 @@
|
||||
import { FileButton } from '@mantine/core';
|
||||
import IAIIconButton from 'common/components/IAIIconButton';
|
||||
import { useLoadWorkflowFromFile } from 'features/workflowLibrary/hooks/useLoadWorkflowFromFile';
|
||||
import { memo, useRef } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { FaUpload } from 'react-icons/fa';
|
||||
|
||||
const UploadWorkflowButton = () => {
|
||||
const { t } = useTranslation();
|
||||
const resetRef = useRef<() => void>(null);
|
||||
const loadWorkflowFromFile = useLoadWorkflowFromFile({ resetRef });
|
||||
return (
|
||||
<FileButton
|
||||
resetRef={resetRef}
|
||||
accept="application/json"
|
||||
onChange={loadWorkflowFromFile}
|
||||
>
|
||||
{(props) => (
|
||||
<IAIIconButton
|
||||
icon={<FaUpload />}
|
||||
tooltip={t('workflows.uploadWorkflow')}
|
||||
aria-label={t('workflows.uploadWorkflow')}
|
||||
{...props}
|
||||
/>
|
||||
)}
|
||||
</FileButton>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(UploadWorkflowButton);
|
||||
@ -1,87 +0,0 @@
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogBody,
|
||||
AlertDialogContent,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogOverlay,
|
||||
Button,
|
||||
Flex,
|
||||
Text,
|
||||
useDisclosure,
|
||||
} from '@chakra-ui/react';
|
||||
import { useAppDispatch } from 'app/store/storeHooks';
|
||||
import IAIIconButton from 'common/components/IAIIconButton';
|
||||
import { nodeEditorReset } from 'features/nodes/store/nodesSlice';
|
||||
import { addToast } from 'features/system/store/systemSlice';
|
||||
import { makeToast } from 'features/system/util/makeToast';
|
||||
import { memo, useCallback, useRef } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { FaTrash } from 'react-icons/fa';
|
||||
|
||||
const ResetWorkflowEditorButton = () => {
|
||||
const { t } = useTranslation();
|
||||
const dispatch = useAppDispatch();
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const cancelRef = useRef<HTMLButtonElement | null>(null);
|
||||
|
||||
const handleConfirmClear = useCallback(() => {
|
||||
dispatch(nodeEditorReset());
|
||||
|
||||
dispatch(
|
||||
addToast(
|
||||
makeToast({
|
||||
title: t('workflows.workflowEditorReset'),
|
||||
status: 'success',
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
onClose();
|
||||
}, [dispatch, t, onClose]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<IAIIconButton
|
||||
icon={<FaTrash />}
|
||||
tooltip={t('nodes.resetWorkflow')}
|
||||
aria-label={t('nodes.resetWorkflow')}
|
||||
onClick={onOpen}
|
||||
colorScheme="error"
|
||||
/>
|
||||
|
||||
<AlertDialog
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
leastDestructiveRef={cancelRef}
|
||||
isCentered
|
||||
>
|
||||
<AlertDialogOverlay />
|
||||
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader fontSize="lg" fontWeight="bold">
|
||||
{t('nodes.resetWorkflow')}
|
||||
</AlertDialogHeader>
|
||||
|
||||
<AlertDialogBody py={4}>
|
||||
<Flex flexDir="column" gap={2}>
|
||||
<Text>{t('nodes.resetWorkflowDesc')}</Text>
|
||||
<Text variant="subtext">{t('nodes.resetWorkflowDesc2')}</Text>
|
||||
</Flex>
|
||||
</AlertDialogBody>
|
||||
|
||||
<AlertDialogFooter>
|
||||
<Button ref={cancelRef} onClick={onClose}>
|
||||
{t('common.cancel')}
|
||||
</Button>
|
||||
<Button colorScheme="error" ml={3} onClick={handleConfirmClear}>
|
||||
{t('common.accept')}
|
||||
</Button>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(ResetWorkflowEditorButton);
|
||||
@ -1,89 +0,0 @@
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogBody,
|
||||
AlertDialogContent,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogOverlay,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Input,
|
||||
useDisclosure,
|
||||
} from '@chakra-ui/react';
|
||||
import { useAppSelector } from 'app/store/storeHooks';
|
||||
import IAIButton from 'common/components/IAIButton';
|
||||
import IAIIconButton from 'common/components/IAIIconButton';
|
||||
import { useSaveWorkflowAs } from 'features/workflowLibrary/hooks/useSaveWorkflowAs';
|
||||
import { getWorkflowCopyName } from 'features/workflowLibrary/util/getWorkflowCopyName';
|
||||
import { ChangeEvent, memo, useCallback, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { FaClone } from 'react-icons/fa';
|
||||
|
||||
const SaveWorkflowAsButton = () => {
|
||||
const currentName = useAppSelector((state) => state.workflow.name);
|
||||
const { t } = useTranslation();
|
||||
const { saveWorkflowAs, isLoading } = useSaveWorkflowAs();
|
||||
const [name, setName] = useState(getWorkflowCopyName(currentName));
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const onOpenCallback = useCallback(() => {
|
||||
setName(getWorkflowCopyName(currentName));
|
||||
onOpen();
|
||||
}, [currentName, onOpen]);
|
||||
|
||||
const onSave = useCallback(async () => {
|
||||
saveWorkflowAs({ name, onSuccess: onClose, onError: onClose });
|
||||
}, [name, onClose, saveWorkflowAs]);
|
||||
|
||||
const onChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
|
||||
setName(e.target.value);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<IAIIconButton
|
||||
icon={<FaClone />}
|
||||
onClick={onOpenCallback}
|
||||
isLoading={isLoading}
|
||||
tooltip={t('workflows.saveWorkflowAs')}
|
||||
aria-label={t('workflows.saveWorkflowAs')}
|
||||
/>
|
||||
<AlertDialog
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
leastDestructiveRef={inputRef}
|
||||
isCentered
|
||||
>
|
||||
<AlertDialogOverlay>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader fontSize="lg" fontWeight="bold">
|
||||
{t('workflows.saveWorkflowAs')}
|
||||
</AlertDialogHeader>
|
||||
|
||||
<AlertDialogBody>
|
||||
<FormControl>
|
||||
<FormLabel>{t('workflows.workflowName')}</FormLabel>
|
||||
<Input
|
||||
ref={inputRef}
|
||||
value={name}
|
||||
onChange={onChange}
|
||||
placeholder={t('workflows.workflowName')}
|
||||
/>
|
||||
</FormControl>
|
||||
</AlertDialogBody>
|
||||
|
||||
<AlertDialogFooter>
|
||||
<IAIButton onClick={onClose}>{t('common.cancel')}</IAIButton>
|
||||
<IAIButton colorScheme="accent" onClick={onSave} ml={3}>
|
||||
{t('common.saveAs')}
|
||||
</IAIButton>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialogOverlay>
|
||||
</AlertDialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(SaveWorkflowAsButton);
|
||||
@ -1,21 +0,0 @@
|
||||
import IAIIconButton from 'common/components/IAIIconButton';
|
||||
import { useSaveLibraryWorkflow } from 'features/workflowLibrary/hooks/useSaveWorkflow';
|
||||
import { memo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { FaSave } from 'react-icons/fa';
|
||||
|
||||
const SaveLibraryWorkflowButton = () => {
|
||||
const { t } = useTranslation();
|
||||
const { saveWorkflow, isLoading } = useSaveLibraryWorkflow();
|
||||
return (
|
||||
<IAIIconButton
|
||||
icon={<FaSave />}
|
||||
onClick={saveWorkflow}
|
||||
isLoading={isLoading}
|
||||
tooltip={t('workflows.saveWorkflow')}
|
||||
aria-label={t('workflows.saveWorkflow')}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(SaveLibraryWorkflowButton);
|
||||
Loading…
Reference in New Issue
Block a user