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,68 +33,74 @@ function IAIInformationalPopover({
   buttonHref,
   triggerComponent,
 }: Props) {
-  return (
+  const { shouldDisableInformationalPopovers } = useAppSelector(systemSelector);
-    <Popover
-      placement="top"
-      closeOnBlur={false}
-      trigger="hover"
-      variant="informational"
-    >
-      <PopoverTrigger>
-        <div>{triggerComponent}</div>
-      </PopoverTrigger>
-      <PopoverContent>
-        <PopoverArrow />
-        <PopoverCloseButton />
 
-        <PopoverBody>
+  if (shouldDisableInformationalPopovers) {
-          <Flex
+    return triggerComponent;
-            sx={{
+  } else {
-              gap: 3,
+    return (
-              flexDirection: 'column',
+      <Popover
-              width: '100%',
+        placement="top"
-            }}
+        closeOnBlur={false}
-          >
+        trigger="hover"
-            {image && (
+        variant="informational"
-              <Image
+      >
-                sx={{
+        <PopoverTrigger>
-                  objectFit: 'contain',
+          <div>{triggerComponent}</div>
-                  maxW: '100%',
+        </PopoverTrigger>
-                  maxH: 'full',
+        <PopoverContent>
-                  backgroundColor: 'white',
+          <PopoverArrow />
-                }}
+          <PopoverCloseButton />
-                src={image}
+
-                alt="Optional Image"
+          <PopoverBody>
-              />
-            )}
             <Flex
               sx={{
                 gap: 3,
                 flexDirection: 'column',
-
+                width: '100%',
-                p: 3,
-                pt: 0,
               }}
             >
-              <PopoverHeader>{heading}</PopoverHeader>
+              {image && (
-              <Text sx={{ pl: 3, pr: 3 }}>{paragraph}</Text>
+                <Image
-              {buttonLabel && (
+                  sx={{
-                <Flex sx={{ pl: 3, pr: 3 }} justifyContent="flex-end">
+                    objectFit: 'contain',
-                  <Button
+                    maxW: '100%',
-                    onClick={() => window.open(buttonHref)}
+                    maxH: 'full',
-                    size="sm"
+                    backgroundColor: 'white',
-                    variant="invokeAIOutline"
+                  }}
-                  >
+                  src={image}
-                    {buttonLabel}
+                  alt="Optional Image"
-                  </Button>
+                />
-                </Flex>
               )}
+              <Flex
+                sx={{
+                  gap: 3,
+                  flexDirection: 'column',
+
+                  p: 3,
+                  pt: 0,
+                }}
+              >
+                <PopoverHeader>{heading}</PopoverHeader>
+                <Text sx={{ pl: 3, pr: 3 }}>{paragraph}</Text>
+                {buttonLabel && (
+                  <Flex sx={{ pl: 3, pr: 3 }} justifyContent="flex-end">
+                    <Button
+                      onClick={() => window.open(buttonHref)}
+                      size="sm"
+                      variant="invokeAIOutline"
+                    >
+                      {buttonLabel}
+                    </Button>
+                  </Flex>
+                )}
+              </Flex>
             </Flex>
-          </Flex>
+          </PopoverBody>
-        </PopoverBody>
+        </PopoverContent>
-      </PopoverContent>
+      </Popover>
-    </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;