update recent workflows UI

Author: Mary Hipp

Diff for: invokeai/frontend/web/public/locales/en.json

@@ -1726,6 +1726,7 @@
         "loadWorkflow": "$t(common.load) Workflow",
         "autoLayout": "Auto Layout",
         "edit": "Edit",
+        "view": "View",
         "download": "Download",
         "copyShareLink": "Copy Share Link",
         "copyShareLinkForWorkflow": "Copy Share Link for Workflow",

Diff for: invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/SaveWorkflow.tsx

@@ -18,11 +18,11 @@ export const ViewWorkflow = ({ workflowId }: { workflowId: string }) => {
   );
 
   return (
-    <Tooltip label={t('workflows.edit')} closeOnScroll>
+    <Tooltip label={t('workflows.view')} closeOnScroll>
       <IconButton
         size="sm"
         variant="ghost"
-        aria-label={t('workflows.edit')}
+        aria-label={t('workflows.view')}
         onClick={handleClickLoad}
         icon={<PiEyeBold />}
       />

Diff for: invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/ViewWorkflow.tsx

@@ -5,8 +5,10 @@ import { $workflowCategories } from 'app/store/nanostores/workflowCategories';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { WORKFLOW_TAGS, type WorkflowTag } from 'features/nodes/store/types';
 import {
+  selectWorkflowIsRecent,
   selectWorkflowLibrarySelectedTags,
   selectWorkflowSelectedCategories,
+  workflowIsRecentChanged,
   workflowSelectedCategoriesChanged,
   workflowSelectedTagsRese,
   workflowSelectedTagToggled,
@@ -18,7 +20,7 @@ import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiArrowCounterClockwiseBold, PiUsersBold } from 'react-icons/pi';
 import { useDispatch } from 'react-redux';
-import { useGetCountsQuery, useListWorkflowsQuery } from 'services/api/endpoints/workflows';
+import { useGetCountsQuery } from 'services/api/endpoints/workflows';
 import type { S } from 'services/api/types';
 
 export const WorkflowLibrarySideNav = () => {
@@ -27,21 +29,31 @@ export const WorkflowLibrarySideNav = () => {
   const categories = useAppSelector(selectWorkflowSelectedCategories);
   const categoryOptions = useStore($workflowCategories);
   const selectedTags = useAppSelector(selectWorkflowLibrarySelectedTags);
+  const isRecent = useAppSelector(selectWorkflowIsRecent);
 
   const selectYourWorkflows = useCallback(() => {
     dispatch(workflowSelectedCategoriesChanged(categoryOptions.includes('project') ? ['user', 'project'] : ['user']));
+    dispatch(workflowIsRecentChanged(undefined));
   }, [categoryOptions, dispatch]);
 
   const selectPrivateWorkflows = useCallback(() => {
     dispatch(workflowSelectedCategoriesChanged(['user']));
+    dispatch(workflowIsRecentChanged(undefined));
   }, [dispatch]);
 
   const selectSharedWorkflows = useCallback(() => {
     dispatch(workflowSelectedCategoriesChanged(['project']));
+    dispatch(workflowIsRecentChanged(undefined));
   }, [dispatch]);
 
   const selectDefaultWorkflows = useCallback(() => {
     dispatch(workflowSelectedCategoriesChanged(['default']));
+    dispatch(workflowIsRecentChanged(undefined));
+  }, [dispatch]);
+
+  const selectRecentWorkflows = useCallback(() => {
+    dispatch(workflowIsRecentChanged(true));
+    dispatch(workflowSelectedCategoriesChanged(['default', 'user', 'project']));
   }, [dispatch]);
 
   const resetTags = useCallback(() => {
@@ -50,33 +62,34 @@ export const WorkflowLibrarySideNav = () => {
 
   const isYourWorkflowsSelected = useMemo(() => {
     if (categoryOptions.includes('project')) {
-      return categories.includes('user') && categories.includes('project');
+      return categories.includes('user') && categories.includes('project') && isRecent === undefined;
     } else {
-      return categories.includes('user');
+      return categories.includes('user') && isRecent === undefined;
     }
-  }, [categoryOptions, categories]);
+  }, [categoryOptions, categories, isRecent]);
 
   const isPrivateWorkflowsExclusivelySelected = useMemo(() => {
-    return categories.length === 1 && categories.includes('user');
-  }, [categories]);
+    return categories.length === 1 && categories.includes('user') && isRecent === undefined;
+  }, [categories, isRecent]);
 
   const isSharedWorkflowsExclusivelySelected = useMemo(() => {
-    return categories.length === 1 && categories.includes('project');
-  }, [categories]);
+    return categories.length === 1 && categories.includes('project') && isRecent === undefined;
+  }, [categories, isRecent]);
 
   const isDefaultWorkflowsExclusivelySelected = useMemo(() => {
-    return categories.length === 1 && categories.includes('default');
-  }, [categories]);
+    return categories.length === 1 && categories.includes('default') && isRecent === undefined;
+  }, [categories, isRecent]);
+
+  const isRecentWorkflowsSelected = useMemo(() => {
+    return categories.length === 3 && !!isRecent;
+  }, [categories, isRecent]);
 
   return (
     <Flex h="full" minH={0} overflow="hidden" flexDir="column" w={64} gap={1}>
       <Flex flexDir="column" w="full" pb={2}>
-        <Text px={3} py={2} fontSize="md" fontWeight="semibold">
+        <CategoryButton isSelected={isRecentWorkflowsSelected} onClick={selectRecentWorkflows}>
           {t('workflows.recentlyOpened')}
-        </Text>
-        <Flex flexDir="column" gap={2} pl={4}>
-          <RecentWorkflows />
-        </Flex>
+        </CategoryButton>
       </Flex>
       <Flex flexDir="column" w="full" pb={2}>
         <CategoryButton isSelected={isYourWorkflowsSelected} onClick={selectYourWorkflows}>
@@ -148,36 +161,6 @@ export const WorkflowLibrarySideNav = () => {
   );
 };
 
-const recentWorkflowsQueryArg = {
-  page: 0,
-  per_page: 5,
-  order_by: 'opened_at',
-  direction: 'DESC',
-  is_recent: true,
-} satisfies Parameters<typeof useListWorkflowsQuery>[0];
-
-const RecentWorkflows = memo(() => {
-  const { t } = useTranslation();
-  const { data, isLoading } = useListWorkflowsQuery(recentWorkflowsQueryArg);
-
-  if (isLoading) {
-    return <Text variant="subtext">{t('common.loading')}</Text>;
-  }
-
-  if (!data) {
-    return <Text variant="subtext">{t('workflows.noRecentWorkflows')}</Text>;
-  }
-
-  return (
-    <>
-      {data.items.map((workflow) => {
-        return <RecentWorkflowButton key={workflow.workflow_id} workflow={workflow} />;
-      })}
-    </>
-  );
-});
-RecentWorkflows.displayName = 'RecentWorkflows';
-
 const RecentWorkflowButton = memo(({ workflow }: { workflow: S['WorkflowRecordListItemWithThumbnailDTO'] }) => {
   const loadWorkflow = useLoadWorkflow();
   const load = useCallback(() => {

Diff for: invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibrarySideNav.tsx

@@ -3,6 +3,7 @@ import { EMPTY_ARRAY } from 'app/store/constants';
 import { useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import {
+  selectWorkflowIsRecent,
   selectWorkflowLibrarySelectedTags,
   selectWorkflowOrderBy,
   selectWorkflowOrderDirection,
@@ -26,6 +27,7 @@ const useInfiniteQueryAry = () => {
   const direction = useAppSelector(selectWorkflowOrderDirection);
   const query = useAppSelector(selectWorkflowSearchTerm);
   const tags = useAppSelector(selectWorkflowLibrarySelectedTags);
+  const isRecent = useAppSelector(selectWorkflowIsRecent);
   const [debouncedQuery] = useDebounce(query, 500);
 
   const queryArg = useMemo(() => {
@@ -37,8 +39,9 @@ const useInfiniteQueryAry = () => {
       categories,
       query: debouncedQuery,
       tags: categories.length === 1 && categories.includes('default') ? tags : [],
+      is_recent: isRecent,
     } satisfies Parameters<typeof useListWorkflowsQuery>[0];
-  }, [orderBy, direction, categories, debouncedQuery, tags]);
+  }, [orderBy, direction, categories, debouncedQuery, tags, isRecent]);
 
   return queryArg;
 };

Diff for: invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowList.tsx

@@ -13,7 +13,6 @@ import type { WorkflowRecordListItemWithThumbnailDTO } from 'services/api/types'
 import { DeleteWorkflow } from './WorkflowLibraryListItemActions/DeleteWorkflow';
 import { DownloadWorkflow } from './WorkflowLibraryListItemActions/DownloadWorkflow';
 import { EditWorkflow } from './WorkflowLibraryListItemActions/EditWorkflow';
-import { SaveWorkflow } from './WorkflowLibraryListItemActions/SaveWorkflow';
 import { ViewWorkflow } from './WorkflowLibraryListItemActions/ViewWorkflow';
 
 const IMAGE_THUMBNAIL_SIZE = '80px';
@@ -81,19 +80,32 @@ export const WorkflowListItem = ({ workflow }: { workflow: WorkflowRecordListIte
         minWidth={IMAGE_THUMBNAIL_SIZE}
         borderRadius="base"
       />
-      <Flex flexDir="column" gap={1} justifyContent="flex-start">
-        <Flex gap={4} alignItems="center">
-          <Text noOfLines={2}>{workflow.name}</Text>
+      <Flex flexDir="column" gap={1} justifyContent="space-between">
+        <Flex flexDir="column" gap={1}>
+          <Flex gap={4} alignItems="center">
+            <Text noOfLines={2}>{workflow.name}</Text>
 
-          {isActive && (
-            <Badge color="invokeBlue.400" borderColor="invokeBlue.700" borderWidth={1} bg="transparent" flexShrink={0}>
-              {t('workflows.opened')}
-            </Badge>
-          )}
+            {isActive && (
+              <Badge
+                color="invokeBlue.400"
+                borderColor="invokeBlue.700"
+                borderWidth={1}
+                bg="transparent"
+                flexShrink={0}
+              >
+                {t('workflows.opened')}
+              </Badge>
+            )}
+          </Flex>
+          <Text variant="subtext" fontSize="xs" noOfLines={2}>
+            {workflow.description}
+          </Text>
         </Flex>
-        <Text variant="subtext" fontSize="xs" noOfLines={2}>
-          {workflow.description}
-        </Text>
+        {workflow.opened_at && (
+          <Text variant="subtext" fontSize="xs" noOfLines={2} justifySelf="flex-end">
+            {t('workflows.opened')}: {new Date(workflow.opened_at).toLocaleString()}
+          </Text>
+        )}
       </Flex>
 
       <Spacer />
@@ -114,13 +126,7 @@ export const WorkflowListItem = ({ workflow }: { workflow: WorkflowRecordListIte
           right={0}
           bottom={0}
         >
-          {workflow.category === 'default' && (
-            <>
-              {/* need to consider what is useful here and which icons show that. idea is to "try it out"/"view" or "clone for your own changes" */}
-              <ViewWorkflow workflowId={workflow.workflow_id} />
-              <SaveWorkflow workflowId={workflow.workflow_id} />
-            </>
-          )}
+          {workflow.category === 'default' && <ViewWorkflow workflowId={workflow.workflow_id} />}
           {workflow.category !== 'default' && (
             <>
               <EditWorkflow workflowId={workflow.workflow_id} />

Diff for: invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowListItem.tsx

@@ -39,5 +39,6 @@ export type WorkflowsState = Omit<WorkflowV3, 'nodes' | 'edges'> & {
   searchTerm: string;
   orderBy?: WorkflowRecordOrderBy;
   orderDirection: SQLiteDirection;
+  isRecent?: boolean;
   formFieldInitialValues: Record<string, StatefulFieldValue>;
 };

Diff for: invokeai/frontend/web/src/features/nodes/store/types.ts

@@ -84,7 +84,7 @@ const initialWorkflowState: WorkflowState = {
   mode: 'view',
   formFieldInitialValues: {},
   searchTerm: '',
-  orderBy: 'opened_at', // initial value is decided in component
+  orderBy: 'opened_at',
   orderDirection: 'DESC',
   selectedTags: [],
   selectedCategories: ['user'],
@@ -120,6 +120,9 @@ export const workflowSlice = createSlice({
         state.meta.category = action.payload;
       }
     },
+    workflowIsRecentChanged: (state, action: PayloadAction<boolean | undefined>) => {
+      state.isRecent = action.payload;
+    },
     workflowDescriptionChanged: (state, action: PayloadAction<string>) => {
       state.description = action.payload;
       state.isTouched = true;
@@ -317,6 +320,7 @@ export const {
   workflowSearchTermChanged,
   workflowOrderByChanged,
   workflowOrderDirectionChanged,
+  workflowIsRecentChanged,
   workflowSelectedCategoriesChanged,
   workflowSelectedTagToggled,
   workflowSelectedTagsRese,
@@ -385,6 +389,7 @@ export const selectWorkflowIsTouched = createWorkflowSelector((workflow) => work
 export const selectWorkflowSearchTerm = createWorkflowSelector((workflow) => workflow.searchTerm);
 export const selectWorkflowOrderBy = createWorkflowSelector((workflow) => workflow.orderBy);
 export const selectWorkflowOrderDirection = createWorkflowSelector((workflow) => workflow.orderDirection);
+export const selectWorkflowIsRecent = createWorkflowSelector((workflow) => workflow.isRecent);
 export const selectWorkflowSelectedCategories = createWorkflowSelector((workflow) => workflow.selectedCategories);
 export const selectWorkflowDescription = createWorkflowSelector((workflow) => workflow.description);
 export const selectWorkflowLibrarySelectedTags = createWorkflowSelector((workflow) => workflow.selectedTags);