add base prop for destination to direct users to different tabs

Author: chainchompa

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

@@ -16,6 +16,7 @@ import { useStarterModelsToast } from 'features/modelManagerV2/hooks/useStarterM
 import { configChanged } from 'features/system/store/configSlice';
 import { languageSelector } from 'features/system/store/systemSelectors';
 import InvokeTabs from 'features/ui/components/InvokeTabs';
+import type { InvokeTabName } from 'features/ui/store/tabMap';
 import { AnimatePresence } from 'framer-motion';
 import i18n from 'i18n';
 import { size } from 'lodash-es';
@@ -24,6 +25,7 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { useGetOpenAPISchemaQuery } from 'services/api/endpoints/appInfo';
 
 import AppErrorBoundaryFallback from './AppErrorBoundaryFallback';
+import Destination from './Destination';
 import PreselectedImage from './PreselectedImage';
 
 const DEFAULT_CONFIG = {};
@@ -34,9 +36,10 @@ interface Props {
     imageName: string;
     action: 'sendToImg2Img' | 'sendToCanvas' | 'useAllParameters';
   };
+  destination?: InvokeTabName | undefined;
 }
 
-const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
+const App = ({ config = DEFAULT_CONFIG, selectedImage, destination }: Props) => {
   const language = useAppSelector(languageSelector);
   const logger = useLogger('system');
   const dispatch = useAppDispatch();
@@ -96,6 +99,7 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
       <ChangeBoardModal />
       <DynamicPromptsModal />
       <PreselectedImage selectedImage={selectedImage} />
+      <Destination destination={destination} />
     </ErrorBoundary>
   );
 };

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

@@ -0,0 +1,14 @@
+import { useDestination } from 'features/parameters/hooks/useDestination';
+import type { InvokeTabName } from 'features/ui/store/tabMap';
+import { memo } from 'react';
+
+type Props = {
+  destination: InvokeTabName | undefined;
+};
+
+const Destination = (props: Props) => {
+  useDestination(props.destination);
+  return null;
+};
+
+export default memo(Destination);

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

@@ -43,6 +43,7 @@ interface Props extends PropsWithChildren {
     imageName: string;
     action: 'sendToImg2Img' | 'sendToCanvas' | 'useAllParameters';
   };
+  destination?: 'canvas' | 'workflows';
   customStarUi?: CustomStarUi;
   socketOptions?: Partial<ManagerOptions & SocketOptions>;
   isDebugging?: boolean;
@@ -62,6 +63,7 @@ const InvokeAIUI = ({
   projectUrl,
   queueId,
   selectedImage,
+  destination,
   customStarUi,
   socketOptions,
   isDebugging = false,
@@ -218,7 +220,7 @@ const InvokeAIUI = ({
         <React.Suspense fallback={<Loading />}>
           <ThemeLocaleProvider>
             <AppDndContext>
-              <App config={config} selectedImage={selectedImage} />
+              <App config={config} selectedImage={selectedImage} destination={destination} />
             </AppDndContext>
           </ThemeLocaleProvider>
         </React.Suspense>

invokeai/frontend/web/src/features/parameters/hooks/useDestination.ts

@@ -0,0 +1,20 @@
+import { useAppDispatch } from 'app/store/storeHooks';
+import type { InvokeTabName } from 'features/ui/store/tabMap';
+import { setActiveTab } from 'features/ui/store/uiSlice';
+import { useCallback, useEffect } from 'react';
+
+export const useDestination = (destination: InvokeTabName | undefined) => {
+  const dispatch = useAppDispatch();
+
+  const handleSendToDestination = useCallback(() => {
+    if (destination) {
+      dispatch(setActiveTab(destination));
+    }
+  }, [dispatch, destination]);
+
+  useEffect(() => {
+    handleSendToDestination();
+  }, [destination, handleSendToDestination]);
+
+  return { handleSendToDestination };
+};