set default for informational popups to be disabled (#4611)

## What type of PR is this? (check all applicable)

- [ ] Refactor
- [ ] Feature
- [x] Bug Fix
- [ ] Optimization
- [ ] Documentation Update
- [ ] Community Node Submission


## Have you discussed this change with the InvokeAI team?
- [x] Yes
- [ ] No, because:

      
## Have you updated all relevant documentation?
- [ ] Yes
- [ ] No


## Description


## Related Tickets & Documents

<!--
For pull requests that relate or close an issue, please include them
below. 

For example having the text: "closes #1234" would connect the current
pull
request to issue 1234.  And when we merge the pull request, Github will
automatically close the issue.
-->

- Related Issue #
- Closes #

## QA Instructions, Screenshots, Recordings

<!-- 
Please provide steps on how to test changes, any hardware or 
software specifications as well as any other pertinent information. 
-->

## Added/updated tests?

- [ ] Yes
- [ ] No : _please replace this line with details on why tests
      have not been included_

## [optional] Are there any post deployment tasks we need to perform?

Author: chainchompa

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

@@ -32,15 +32,15 @@ function IAIInformationalPopover({
   children,
   placement,
 }: Props): JSX.Element {
-  const shouldDisableInformationalPopovers = useAppSelector(
-    (state) => state.system.shouldDisableInformationalPopovers
+  const shouldEnableInformationalPopovers = useAppSelector(
+    (state) => state.system.shouldEnableInformationalPopovers
   );
   const { t } = useTranslation();
 
   const heading = t(`popovers.${details}.heading`);
   const paragraph = t(`popovers.${details}.paragraph`);
 
-  if (shouldDisableInformationalPopovers) {
+  if (!shouldEnableInformationalPopovers) {
     return children;
   } else {
     return (

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxSize.tsx

@@ -1,4 +1,4 @@
-import { Flex, Spacer, Text } from '@chakra-ui/react';
+import { Box, Flex, Spacer, Text } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
@@ -94,20 +94,22 @@ export default function ParamBoundingBoxSize() {
       }}
     >
       <Flex alignItems="center" gap={2}>
-        <IAIInformationalPopover details="paramRatio">
-          <Text
-            sx={{
-              fontSize: 'sm',
-              width: 'full',
-              color: 'base.700',
-              _dark: {
-                color: 'base.300',
-              },
-            }}
-          >
-            {t('parameters.aspectRatio')}
-          </Text>
-        </IAIInformationalPopover>
+        <Box width="full">
+          <IAIInformationalPopover details="paramRatio">
+            <Text
+              sx={{
+                fontSize: 'sm',
+                width: 'full',
+                color: 'base.700',
+                _dark: {
+                  color: 'base.300',
+                },
+              }}
+            >
+              {t('parameters.aspectRatio')}
+            </Text>
+          </IAIInformationalPopover>
+        </Box>
         <Spacer />
         <ParamAspectRatio />
         <IAIIconButton

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSize.tsx

@@ -1,4 +1,4 @@
-import { Flex, Spacer, Text } from '@chakra-ui/react';
+import { Box, Flex, Spacer, Text } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
@@ -84,20 +84,21 @@ export default function ParamSize() {
       }}
     >
       <Flex alignItems="center" gap={2}>
-        <IAIInformationalPopover details="paramRatio">
-          <Text
-            sx={{
-              fontSize: 'sm',
-              width: 'full',
-              color: 'base.700',
-              _dark: {
-                color: 'base.300',
-              },
-            }}
-          >
-            {t('parameters.aspectRatio')}
-          </Text>
-        </IAIInformationalPopover>
+        <Box width="full">
+          <IAIInformationalPopover details="paramRatio">
+            <Text
+              sx={{
+                fontSize: 'sm',
+                color: 'base.700',
+                _dark: {
+                  color: 'base.300',
+                },
+              }}
+            >
+              {t('parameters.aspectRatio')}
+            </Text>
+          </IAIInformationalPopover>
+        </Box>
         <Spacer />
         <ParamAspectRatio />
         <IAIIconButton

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

@@ -23,7 +23,7 @@ import {
   consoleLogLevelChanged,
   setEnableImageDebugging,
   setShouldConfirmOnDelete,
-  setShouldDisableInformationalPopovers,
+  setShouldEnableInformationalPopovers,
   shouldAntialiasProgressImageChanged,
   shouldLogToConsoleChanged,
   shouldUseNSFWCheckerChanged,
@@ -67,7 +67,7 @@ const selector = createSelector(
       shouldAntialiasProgressImage,
       shouldUseNSFWChecker,
       shouldUseWatermarker,
-      shouldDisableInformationalPopovers,
+      shouldEnableInformationalPopovers,
     } = system;
 
     const {
@@ -87,7 +87,7 @@ const selector = createSelector(
       shouldUseNSFWChecker,
       shouldUseWatermarker,
       shouldAutoChangeDimensions,
-      shouldDisableInformationalPopovers,
+      shouldEnableInformationalPopovers,
     };
   },
   {
@@ -161,7 +161,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
     shouldUseNSFWChecker,
     shouldUseWatermarker,
     shouldAutoChangeDimensions,
-    shouldDisableInformationalPopovers,
+    shouldEnableInformationalPopovers,
   } = useAppSelector(selector);
 
   const handleClickResetWebUI = useCallback(() => {
@@ -312,11 +312,11 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                   />
                 )}
                 <SettingSwitch
-                  label="Disable informational popovers"
-                  isChecked={shouldDisableInformationalPopovers}
+                  label="Enable informational popovers"
+                  isChecked={shouldEnableInformationalPopovers}
                   onChange={(e: ChangeEvent<HTMLInputElement>) =>
                     dispatch(
-                      setShouldDisableInformationalPopovers(e.target.checked)
+                      setShouldEnableInformationalPopovers(e.target.checked)
                     )
                   }
                 />

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

@@ -35,7 +35,7 @@ export const initialSystemState: SystemState = {
   language: 'en',
   shouldUseNSFWChecker: false,
   shouldUseWatermarker: false,
-  shouldDisableInformationalPopovers: false,
+  shouldEnableInformationalPopovers: false,
   status: 'DISCONNECTED',
 };
 
@@ -76,11 +76,11 @@ export const systemSlice = createSlice({
     shouldUseWatermarkerChanged(state, action: PayloadAction<boolean>) {
       state.shouldUseWatermarker = action.payload;
     },
-    setShouldDisableInformationalPopovers(
+    setShouldEnableInformationalPopovers(
       state,
       action: PayloadAction<boolean>
     ) {
-      state.shouldDisableInformationalPopovers = action.payload;
+      state.shouldEnableInformationalPopovers = action.payload;
     },
   },
   extraReducers(builder) {
@@ -241,7 +241,7 @@ export const {
   languageChanged,
   shouldUseNSFWCheckerChanged,
   shouldUseWatermarkerChanged,
-  setShouldDisableInformationalPopovers,
+  setShouldEnableInformationalPopovers,
 } = systemSlice.actions;
 
 export default systemSlice.reducer;

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

@@ -33,7 +33,7 @@ export interface SystemState {
   shouldUseNSFWChecker: boolean;
   shouldUseWatermarker: boolean;
   status: SystemStatus;
-  shouldDisableInformationalPopovers: boolean;
+  shouldEnableInformationalPopovers: boolean;
 }
 
 export const LANGUAGES = {