github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): format

Browse Source 
Lots of changed bc the line length is now 120. May as well do it now.
This commit is contained in:
psychedelicious
2024-01-27 20:55:55 +11:00
parent b922ee566a
commit 189c430e46
568 changed files with 3602 additions and 11172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx
View File

@@ -12,11 +12,7 @@ const WorkflowLibraryButton = () => {
return (
<WorkflowLibraryModalContext.Provider value={disclosure}>
<Button
leftIcon={<PiBooksBold />}
onClick={disclosure.onOpen}
pointerEvents="auto"
>
<Button leftIcon={<PiBooksBold />} onClick={disclosure.onOpen} pointerEvents="auto">
{t('workflows.workflowLibrary')}
</Button>
<WorkflowLibraryModal />

75
invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
View File

@@ -15,10 +15,7 @@ import {
import { useStore } from '@nanostores/react';
import { $projectId } from 'app/store/nanostores/projectId';
import { $workflowCategories } from 'app/store/nanostores/workflowCategories';
import {
IAINoContentFallback,
IAINoContentFallbackWithSpinner,
} from 'common/components/IAIImageFallback';
import { IAINoContentFallback, IAINoContentFallbackWithSpinner } from 'common/components/IAIImageFallback';
import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
import type { WorkflowCategory } from 'features/nodes/types/workflow';
import WorkflowLibraryListItem from 'features/workflowLibrary/components/WorkflowLibraryListItem';
@@ -28,10 +25,7 @@ import { memo, useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { PiXBold } from 'react-icons/pi';
import { useListWorkflowsQuery } from 'services/api/endpoints/workflows';
import type {
SQLiteDirection,
WorkflowRecordOrderBy,
} from 'services/api/types';
import type { SQLiteDirection, WorkflowRecordOrderBy } from 'services/api/types';
import { useDebounce } from 'use-debounce';
import { z } from 'zod';
@@ -49,8 +43,7 @@ const ORDER_BY_OPTIONS: ComboboxOption[] = [
const zDirection = z.enum(['ASC', 'DESC']);
type Direction = z.infer<typeof zDirection>;
const isDirection = (v: unknown): v is Direction =>
zDirection.safeParse(v).success;
const isDirection = (v: unknown): v is Direction => zDirection.safeParse(v).success;
const DIRECTION_OPTIONS: ComboboxOption[] = [
{ value: 'ASC', label: 'Ascending' },
{ value: 'DESC', label: 'Descending' },
@@ -59,21 +52,16 @@ const DIRECTION_OPTIONS: ComboboxOption[] = [
const WorkflowLibraryList = () => {
const { t } = useTranslation();
const workflowCategories = useStore($workflowCategories);
const [selectedCategory, setSelectedCategory] =
useState<WorkflowCategory>('user');
const [selectedCategory, setSelectedCategory] = useState<WorkflowCategory>('user');
const [page, setPage] = useState(0);
const [query, setQuery] = useState('');
const projectId = useStore($projectId);
const orderByOptions = useMemo(() => {
return projectId
? ORDER_BY_OPTIONS.filter((option) => option.value !== 'opened_at')
: ORDER_BY_OPTIONS;
return projectId ? ORDER_BY_OPTIONS.filter((option) => option.value !== 'opened_at') : ORDER_BY_OPTIONS;
}, [projectId]);
const [order_by, setOrderBy] = useState<WorkflowRecordOrderBy>(
orderByOptions[0]?.value as WorkflowRecordOrderBy
);
const [order_by, setOrderBy] = useState<WorkflowRecordOrderBy>(orderByOptions[0]?.value as WorkflowRecordOrderBy);
const [direction, setDirection] = useState<SQLiteDirection>('ASC');
const [debouncedQuery] = useDebounce(query, 500);
@@ -98,8 +86,7 @@ const WorkflowLibraryList = () => {
};
}, [selectedCategory, debouncedQuery, direction, order_by, page]);
const { data, isLoading, isError, isFetching } =
useListWorkflowsQuery(queryArg);
const { data, isLoading, isError, isFetching } = useListWorkflowsQuery(queryArg);
const onChangeOrderBy = useCallback<ComboboxOnChange>(
(v) => {
@@ -111,10 +98,7 @@ const WorkflowLibraryList = () => {
},
[order_by]
);
const valueOrderBy = useMemo(
() => orderByOptions.find((o) => o.value === order_by),
[order_by, orderByOptions]
);
const valueOrderBy = useMemo(() => orderByOptions.find((o) => o.value === order_by), [order_by, orderByOptions]);
const onChangeDirection = useCallback<ComboboxOnChange>(
(v) => {
@@ -126,10 +110,7 @@ const WorkflowLibraryList = () => {
},
[direction]
);
const valueDirection = useMemo(
() => DIRECTION_OPTIONS.find((o) => o.value === direction),
[direction]
);
const valueDirection = useMemo(() => DIRECTION_OPTIONS.find((o) => o.value === direction), [direction]);
const resetFilterText = useCallback(() => {
setQuery('');
@@ -148,13 +129,10 @@ const WorkflowLibraryList = () => {
[resetFilterText]
);
const handleChangeFilterText = useCallback(
(e: ChangeEvent<HTMLInputElement>) => {
setQuery(e.target.value);
setPage(0);
},
[]
);
const handleChangeFilterText = useCallback((e: ChangeEvent<HTMLInputElement>) => {
setQuery(e.target.value);
setPage(0);
}, []);
const handleSetCategory = useCallback((category: WorkflowCategory) => {
setSelectedCategory(category);
@@ -163,14 +141,7 @@ const WorkflowLibraryList = () => {
return (
<>
<Flex
gap={4}
alignItems="center"
h={16}
flexShrink={0}
flexGrow={0}
justifyContent="space-between"
>
<Flex gap={4} alignItems="center" h={16} flexShrink={0} flexGrow={0} justifyContent="space-between">
<ButtonGroup alignSelf="flex-end">
{workflowCategories.map((category) => (
<Button
@@ -195,11 +166,7 @@ const WorkflowLibraryList = () => {
}}
>
<FormLabel>{t('common.orderBy')}</FormLabel>
<Combobox
value={valueOrderBy}
options={orderByOptions}
onChange={onChangeOrderBy}
/>
<Combobox value={valueOrderBy} options={orderByOptions} onChange={onChangeOrderBy} />
</FormControl>
<FormControl
isDisabled={isFetching}
@@ -211,11 +178,7 @@ const WorkflowLibraryList = () => {
}}
>
<FormLabel>{t('common.direction')}</FormLabel>
<Combobox
value={valueDirection}
options={DIRECTION_OPTIONS}
onChange={onChangeDirection}
/>
<Combobox value={valueDirection} options={DIRECTION_OPTIONS} onChange={onChangeDirection} />
</FormControl>
</>
)}
@@ -260,11 +223,7 @@ const WorkflowLibraryList = () => {
<Divider />
{data && (
<Flex w="full" justifyContent="space-around">
<WorkflowLibraryPagination
data={data}
page={page}
setPage={setPage}
/>
<WorkflowLibraryPagination data={data} page={page} setPage={setPage} />
</Flex>
)}
</>

49
invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
View File

@@ -17,8 +17,7 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
const workflowId = useAppSelector((s) => s.workflow.id);
const { onClose } = useWorkflowLibraryModalContext();
const { deleteWorkflow, deleteWorkflowResult } = useDeleteLibraryWorkflow({});
const { getAndLoadWorkflow, getAndLoadWorkflowResult } =
useGetAndLoadLibraryWorkflow({ onSuccess: onClose });
const { getAndLoadWorkflow, getAndLoadWorkflowResult } = useGetAndLoadLibraryWorkflow({ onSuccess: onClose });
const handleDeleteWorkflow = useCallback(() => {
deleteWorkflow(workflowDTO.workflow_id);
@@ -28,39 +27,20 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
getAndLoadWorkflow(workflowDTO.workflow_id);
}, [getAndLoadWorkflow, workflowDTO.workflow_id]);
const isOpen = useMemo(
() => workflowId === workflowDTO.workflow_id,
[workflowId, workflowDTO.workflow_id]
);
const isOpen = useMemo(() => workflowId === workflowDTO.workflow_id, [workflowId, workflowDTO.workflow_id]);
return (
<Flex
key={workflowDTO.workflow_id}
w="full"
p={2}
borderRadius="base"
_hover={{ bg: 'base.750' }}
>
<Flex key={workflowDTO.workflow_id} w="full" p={2} borderRadius="base" _hover={{ bg: 'base.750' }}>
<Flex w="full" alignItems="center" gap={2} h={12}>
<Flex flexDir="column" flexGrow={1} h="full">
<Flex alignItems="center" w="full" h="50%">
<Heading
size="sm"
noOfLines={1}
variant={isOpen ? 'invokeBlue' : undefined}
>
<Heading size="sm" noOfLines={1} variant={isOpen ? 'invokeBlue' : undefined}>
{workflowDTO.name || t('workflows.unnamedWorkflow')}
</Heading>
<Spacer />
{workflowDTO.category !== 'default' && (
<Text
fontSize="sm"
variant="subtext"
flexShrink={0}
noOfLines={1}
>
{t('common.updated')}:{' '}
{dateFormat(workflowDTO.updated_at, masks.shortDate)}{' '}
<Text fontSize="sm" variant="subtext" flexShrink={0} noOfLines={1}>
{t('common.updated')}: {dateFormat(workflowDTO.updated_at, masks.shortDate)}{' '}
{dateFormat(workflowDTO.updated_at, masks.shortTime)}
</Text>
)}
@@ -71,25 +51,14 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
{workflowDTO.description}
</Text>
) : (
<Text
fontSize="sm"
variant="subtext"
fontStyle="italic"
noOfLines={1}
>
<Text fontSize="sm" variant="subtext" fontStyle="italic" noOfLines={1}>
{t('workflows.noDescription')}
</Text>
)}
<Spacer />
{workflowDTO.category !== 'default' && (
<Text
fontSize="sm"
variant="subtext"
flexShrink={0}
noOfLines={1}
>
{t('common.created')}:{' '}
{dateFormat(workflowDTO.created_at, masks.shortDate)}{' '}
<Text fontSize="sm" variant="subtext" flexShrink={0} noOfLines={1}>
{t('common.created')}: {dateFormat(workflowDTO.created_at, masks.shortDate)}{' '}
{dateFormat(workflowDTO.created_at, masks.shortTime)}
</Text>
)}

11
invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListWrapper.tsx
View File

@@ -4,16 +4,7 @@ import { memo } from 'react';
const WorkflowLibraryListWrapper = (props: PropsWithChildren) => {
return (
<Flex
w="full"
h="full"
flexDir="column"
layerStyle="second"
py={2}
px={4}
gap={2}
borderRadius="base"
>
<Flex w="full" h="full" flexDir="column" layerStyle="second" py={2} px={4} gap={2} borderRadius="base">
{props.children}
</Flex>
);

6
invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/DownloadWorkflowMenuItem.tsx
View File

@@ -9,11 +9,7 @@ const DownloadWorkflowMenuItem = () => {
const downloadWorkflow = useDownloadWorkflow();
return (
<MenuItem
as="button"
icon={<PiDownloadSimpleBold />}
onClick={downloadWorkflow}
>
<MenuItem as="button" icon={<PiDownloadSimpleBold />} onClick={downloadWorkflow}>
{t('workflows.downloadWorkflow')}
</MenuItem>
);

8
invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/NewWorkflowMenuItem.tsx
View File

@@ -1,10 +1,4 @@
import {
ConfirmationAlertDialog,
Flex,
MenuItem,
Text,
useDisclosure,
} from '@invoke-ai/ui-library';
import { ConfirmationAlertDialog, Flex, MenuItem, Text, useDisclosure } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { nodeEditorReset } from 'features/nodes/store/nodesSlice';
import { addToast } from 'features/system/store/systemSlice';

16
invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowAsMenuItem.tsx
View File

@@ -1,11 +1,4 @@
import {
ConfirmationAlertDialog,
FormControl,
FormLabel,
Input,
MenuItem,
useDisclosure,
} from '@invoke-ai/ui-library';
import { ConfirmationAlertDialog, FormControl, FormLabel, Input, MenuItem, useDisclosure } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks';
import { useSaveWorkflowAs } from 'features/workflowLibrary/hooks/useSaveWorkflowAs';
import { getWorkflowCopyName } from 'features/workflowLibrary/util/getWorkflowCopyName';
@@ -50,12 +43,7 @@ const SaveWorkflowAsButton = () => {
>
<FormControl>
<FormLabel>{t('workflows.workflowName')}</FormLabel>
<Input
ref={inputRef}
value={name}
onChange={onChange}
placeholder={t('workflows.workflowName')}
/>
<Input ref={inputRef} value={name} onChange={onChange} placeholder={t('workflows.workflowName')} />
</FormControl>
</ConfirmationAlertDialog>
</>

3
invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu.tsx
View File

@@ -23,8 +23,7 @@ const WorkflowLibraryMenu = () => {
const { isOpen, onOpen, onClose } = useDisclosure();
useGlobalMenuClose(onClose);
const isWorkflowLibraryEnabled =
useFeatureStatus('workflowLibrary').isFeatureEnabled;
const isWorkflowLibraryEnabled = useFeatureStatus('workflowLibrary').isFeatureEnabled;
return (
<Menu isOpen={isOpen} onOpen={onOpen} onClose={onClose}>

9
invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx
View File

@@ -18,14 +18,7 @@ const WorkflowLibraryModal = () => {
return (
<Modal isOpen={isOpen} onClose={onClose} isCentered>
<ModalOverlay />
<ModalContent
w="80%"
h="80%"
minW="unset"
minH="unset"
maxW="1200px"
maxH="664px"
>
<ModalContent w="80%" h="80%" minW="unset" minH="unset" maxW="1200px" maxH="664px">
<ModalHeader>{t('workflows.workflowLibrary')}</ModalHeader>
<ModalCloseButton />
<ModalBody>

10
invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryPagination.tsx
View File

@@ -31,14 +31,8 @@ const WorkflowLibraryPagination = ({ page, setPage, data }: Props) => {
const pages: PageData[] = useMemo(() => {
const pages = [];
let first =
data.pages > PAGES_TO_DISPLAY
? Math.max(0, page - Math.floor(PAGES_TO_DISPLAY / 2))
: 0;
const last =
data.pages > PAGES_TO_DISPLAY
? Math.min(data.pages, first + PAGES_TO_DISPLAY)
: data.pages;
let first = data.pages > PAGES_TO_DISPLAY ? Math.max(0, page - Math.floor(PAGES_TO_DISPLAY / 2)) : 0;
const last = data.pages > PAGES_TO_DISPLAY ? Math.min(data.pages, first + PAGES_TO_DISPLAY) : data.pages;
if (last - first < PAGES_TO_DISPLAY && data.pages > PAGES_TO_DISPLAY) {
first = last - PAGES_TO_DISPLAY;
}