add toggle for shouldDisableInformationalPopovers

invokeai/frontend/web/src/common/components/IAIInformationalPopover.tsx

@@ -13,6 +13,8 @@ import {
   Image,
 } from '@chakra-ui/react';
 import { ReactNode } from 'react';
+import { useAppSelector } from '../../app/store/storeHooks';
+import { systemSelector } from '../../features/system/store/systemSelectors';
 
 interface Props extends PopoverProps {
   heading: string;
@@ -31,6 +33,11 @@ function IAIInformationalPopover({
   buttonHref,
   triggerComponent,
 }: Props) {
+  const { shouldDisableInformationalPopovers } = useAppSelector(systemSelector);
+
+  if (shouldDisableInformationalPopovers) {
+    return triggerComponent;
+  } else {
     return (
       <Popover
         placement="top"
@@ -93,6 +100,7 @@ function IAIInformationalPopover({
         </PopoverContent>
       </Popover>
     );
+  }
 }
 
 export default IAIInformationalPopover;

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx

@@ -24,6 +24,7 @@ import {
   consoleLogLevelChanged,
   setEnableImageDebugging,
   setShouldConfirmOnDelete,
+  setShouldDisableInformationalPopovers,
   shouldAntialiasProgressImageChanged,
   shouldLogToConsoleChanged,
   shouldUseNSFWCheckerChanged,
@@ -67,6 +68,7 @@ const selector = createSelector(
       shouldAntialiasProgressImage,
       shouldUseNSFWChecker,
       shouldUseWatermarker,
+      shouldDisableInformationalPopovers,
     } = system;
 
     const {
@@ -89,6 +91,7 @@ const selector = createSelector(
       shouldUseNSFWChecker,
       shouldUseWatermarker,
       shouldAutoChangeDimensions,
+      shouldDisableInformationalPopovers,
     };
   },
   {
@@ -165,6 +168,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
     shouldUseNSFWChecker,
     shouldUseWatermarker,
     shouldAutoChangeDimensions,
+    shouldDisableInformationalPopovers,
   } = useAppSelector(selector);
 
   const handleClickResetWebUI = useCallback(() => {
@@ -323,6 +327,15 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                     onChange={handleLanguageChanged}
                   />
                 )}
+                <SettingSwitch
+                  label="Disable informational popovers"
+                  isChecked={shouldDisableInformationalPopovers}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                    dispatch(
+                      setShouldDisableInformationalPopovers(e.target.checked)
+                    )
+                  }
+                />
               </StyledFlex>
 
               {shouldShowDeveloperSettings && (

invokeai/frontend/web/src/features/system/store/systemSlice.ts

@@ -84,6 +84,7 @@ export interface SystemState {
   isUploading: boolean;
   shouldUseNSFWChecker: boolean;
   shouldUseWatermarker: boolean;
+  shouldDisableInformationalPopovers: boolean;
 }
 
 export const initialSystemState: SystemState = {
@@ -116,6 +117,7 @@ export const initialSystemState: SystemState = {
   isUploading: false,
   shouldUseNSFWChecker: false,
   shouldUseWatermarker: false,
+  shouldDisableInformationalPopovers: false,
 };
 
 export const systemSlice = createSlice({
@@ -194,6 +196,12 @@ export const systemSlice = createSlice({
     shouldUseWatermarkerChanged(state, action: PayloadAction<boolean>) {
       state.shouldUseWatermarker = action.payload;
     },
+    setShouldDisableInformationalPopovers(
+      state,
+      action: PayloadAction<boolean>
+    ) {
+      state.shouldDisableInformationalPopovers = action.payload;
+    },
   },
   extraReducers(builder) {
     /**
@@ -432,6 +440,7 @@ export const {
   progressImageSet,
   shouldUseNSFWCheckerChanged,
   shouldUseWatermarkerChanged,
+  setShouldDisableInformationalPopovers,
 } = systemSlice.actions;
 
 export default systemSlice.reducer;