easier way to override Whats New

Author: Mary Hipp

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

@@ -18,6 +18,7 @@ import { $openAPISchemaUrl } from 'app/store/nanostores/openAPISchemaUrl';
 import { $projectId, $projectName, $projectUrl } from 'app/store/nanostores/projectId';
 import { $queueId, DEFAULT_QUEUE_ID } from 'app/store/nanostores/queueId';
 import { $store } from 'app/store/nanostores/store';
+import { $whatsNew } from 'app/store/nanostores/whatsNew';
 import { createStore } from 'app/store/store';
 import type { PartialAppConfig } from 'app/types/invokeai';
 import Loading from 'common/components/Loading/Loading';
@@ -58,6 +59,7 @@ interface Props extends PropsWithChildren {
   socketOptions?: Partial<ManagerOptions & SocketOptions>;
   isDebugging?: boolean;
   logo?: ReactNode;
+  whatsNew?: ReactNode[];
   workflowCategories?: WorkflowCategory[];
   workflowTagCategories?: WorkflowTagCategory[];
   workflowSortOptions?: WorkflowSortOption[];
@@ -90,6 +92,7 @@ const InvokeAIUI = ({
   workflowSortOptions,
   loggingOverrides,
   onClickGoToModelManager,
+  whatsNew,
 }: Props) => {
   useLayoutEffect(() => {
     /*
@@ -224,6 +227,16 @@ const InvokeAIUI = ({
     };
   }, [logo]);
 
+  useEffect(() => {
+    if (whatsNew) {
+      $whatsNew.set(whatsNew);
+    }
+
+    return () => {
+      $whatsNew.set(undefined);
+    };
+  }, [whatsNew]);
+
   useEffect(() => {
     if (onClickGoToModelManager) {
       $onClickGoToModelManager.set(onClickGoToModelManager);

invokeai/frontend/web/src/app/store/nanostores/whatsNew.ts

@@ -0,0 +1,4 @@
+import { atom } from 'nanostores';
+import type { ReactNode } from 'react';
+
+export const $whatsNew = atom<ReactNode[] | undefined>(undefined);

invokeai/frontend/web/src/features/ui/components/WhatsNew.tsx

@@ -1,5 +1,7 @@
 import { ExternalLink, Flex, ListItem, Text, UnorderedList } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
 import { createSelector } from '@reduxjs/toolkit';
+import { $whatsNew } from 'app/store/nanostores/whatsNew';
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectConfigSlice } from 'features/system/store/configSlice';
 import type { ReactNode } from 'react';
@@ -17,8 +19,13 @@ export const WhatsNew = () => {
   const { t } = useTranslation();
   const { data } = useGetAppVersionQuery();
   const isLocal = useAppSelector(selectIsLocal);
+  const whatsNew = useStore($whatsNew);
 
   const items = useMemo<ReactNode[]>(() => {
+    if (whatsNew) {
+      return whatsNew;
+    }
+
     if (data?.highlights?.length) {
       return data.highlights.map((highlight, index) => <ListItem key={`${highlight}-${index}`}>{highlight}</ListItem>);
     }
@@ -32,7 +39,7 @@ export const WhatsNew = () => {
         <Trans i18nKey={key} components={components} />
       </ListItem>
     ));
-  }, [data?.highlights, t]);
+  }, [data?.highlights, t, whatsNew]);
 
   return (
     <Flex gap={4} flexDir="column">