allow workflow sort options to be passed in

Author: Mary Hipp

invokeai/frontend/web/src/app/components/InvokeAIUI.tsx

@@ -19,11 +19,13 @@ import { $store } from 'app/store/nanostores/store';
 import { createStore } from 'app/store/store';
 import type { PartialAppConfig } from 'app/types/invokeai';
 import Loading from 'common/components/Loading/Loading';
-import type { WorkflowTagCategory } from 'features/nodes/store/workflowLibrarySlice';
+import type { WorkflowSortOption, WorkflowTagCategory } from 'features/nodes/store/workflowLibrarySlice';
 import {
   $workflowLibraryCategoriesOptions,
+  $workflowLibrarySortOptions,
   $workflowLibraryTagCategoriesOptions,
   DEFAULT_WORKFLOW_LIBRARY_CATEGORIES,
+  DEFAULT_WORKFLOW_LIBRARY_SORT_OPTIONS,
   DEFAULT_WORKFLOW_LIBRARY_TAG_CATEGORIES,
 } from 'features/nodes/store/workflowLibrarySlice';
 import type { WorkflowCategory } from 'features/nodes/types/workflow';
@@ -55,6 +57,7 @@ interface Props extends PropsWithChildren {
   logo?: ReactNode;
   workflowCategories?: WorkflowCategory[];
   workflowTagCategories?: WorkflowTagCategory[];
+  workflowSortOptions?: WorkflowSortOption[];
   loggingOverrides?: LoggingOverrides;
 }
 
@@ -76,6 +79,7 @@ const InvokeAIUI = ({
   logo,
   workflowCategories,
   workflowTagCategories,
+  workflowSortOptions,
   loggingOverrides,
 }: Props) => {
   useLayoutEffect(() => {
@@ -221,6 +225,16 @@ const InvokeAIUI = ({
     };
   }, [workflowTagCategories]);
 
+  useEffect(() => {
+    if (workflowSortOptions) {
+      $workflowLibrarySortOptions.set(workflowSortOptions);
+    }
+
+    return () => {
+      $workflowLibrarySortOptions.set(DEFAULT_WORKFLOW_LIBRARY_SORT_OPTIONS);
+    };
+  }, [workflowSortOptions]);
+
   useEffect(() => {
     if (socketOptions) {
       $socketOptions.set(socketOptions);

invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryTopNav.tsx

@@ -1,15 +1,18 @@
 import { Flex } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectWorkflowLibraryView } from 'features/nodes/store/workflowLibrarySlice';
 import { useRef } from 'react';
 
 import { WorkflowSearch } from './WorkflowSearch';
 import { WorkflowSortControl } from './WorkflowSortControl';
 
 export const WorkflowLibraryTopNav = () => {
   const searchInputRef = useRef<HTMLInputElement>(null);
+  const view = useAppSelector(selectWorkflowLibraryView);
   return (
     <Flex gap={8} justifyContent="space-between">
       <WorkflowSearch searchInputRef={searchInputRef} />
-      <WorkflowSortControl />
+      {view !== 'recent' && <WorkflowSortControl />}
     </Flex>
   );
 };

invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowSortControl.tsx

@@ -1,13 +1,15 @@
 import { Flex, FormControl, FormLabel, Select } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
+  $workflowLibrarySortOptions,
   selectWorkflowLibraryDirection,
   selectWorkflowLibraryOrderBy,
   workflowLibraryDirectionChanged,
   workflowLibraryOrderByChanged,
 } from 'features/nodes/store/workflowLibrarySlice';
 import type { ChangeEvent } from 'react';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 
@@ -24,6 +26,7 @@ export const WorkflowSortControl = () => {
 
   const orderBy = useAppSelector(selectWorkflowLibraryOrderBy);
   const direction = useAppSelector(selectWorkflowLibraryDirection);
+  const sortOptions = useStore($workflowLibrarySortOptions);
 
   const ORDER_BY_LABELS = useMemo(
     () => ({
@@ -65,15 +68,23 @@ export const WorkflowSortControl = () => {
     [dispatch]
   );
 
+  useEffect(() => {
+    if (!sortOptions.includes('opened_at')) {
+      dispatch(workflowLibraryOrderByChanged('name'));
+      dispatch(workflowLibraryDirectionChanged('ASC'));
+    }
+  }, [sortOptions, dispatch]);
+
   return (
     <Flex flexDir="row" gap={6}>
       <FormControl orientation="horizontal" gap={0} w="auto">
         <FormLabel>{t('common.orderBy')}</FormLabel>
-        <Select value={orderBy ?? 'opened_at'} onChange={onChangeOrderBy} size="sm">
-          <option value="opened_at">{ORDER_BY_LABELS['opened_at']}</option>
-          <option value="created_at">{ORDER_BY_LABELS['created_at']}</option>
-          <option value="updated_at">{ORDER_BY_LABELS['updated_at']}</option>
-          <option value="name">{ORDER_BY_LABELS['name']}</option>
+        <Select value={orderBy ?? sortOptions[0]} onChange={onChangeOrderBy} size="sm">
+          {sortOptions.map((option) => (
+            <option key={option} value={option}>
+              {ORDER_BY_LABELS[option]}
+            </option>
+          ))}
         </Select>
       </FormControl>
       <FormControl orientation="horizontal" gap={0} w="auto">

invokeai/frontend/web/src/features/nodes/store/workflowLibrarySlice.ts

@@ -101,3 +101,12 @@ export const $workflowLibraryTagCategoriesOptions = atom<WorkflowTagCategory[]>(
 export const $workflowLibraryTagOptions = computed($workflowLibraryTagCategoriesOptions, (tagCategories) =>
   tagCategories.flatMap(({ tags }) => tags)
 );
+
+export type WorkflowSortOption = 'opened_at' | 'created_at' | 'updated_at' | 'name';
+export const DEFAULT_WORKFLOW_LIBRARY_SORT_OPTIONS: WorkflowSortOption[] = [
+  'opened_at',
+  'created_at',
+  'updated_at',
+  'name',
+];
+export const $workflowLibrarySortOptions = atom<WorkflowSortOption[]>(DEFAULT_WORKFLOW_LIBRARY_SORT_OPTIONS);