add toggle for isNodesEnabled in settings (#3839)

Co-authored-by: Mary Hipp <maryhipp@Marys-MacBook-Air.local>

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

@@ -11,7 +11,7 @@ import {
   Text,
   useDisclosure,
 } from '@chakra-ui/react';
-import { createSelector } from '@reduxjs/toolkit';
+import { createSelector, current } from '@reduxjs/toolkit';
 import { VALID_LOG_LEVELS } from 'app/logging/useLogger';
 import { LOCALSTORAGE_KEYS, LOCALSTORAGE_PREFIX } from 'app/store/constants';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
@@ -23,6 +23,7 @@ import {
   SystemState,
   consoleLogLevelChanged,
   setEnableImageDebugging,
+  setIsNodesEnabled,
   setShouldConfirmOnDelete,
   setShouldDisplayGuides,
   shouldAntialiasProgressImageChanged,
@@ -60,6 +61,7 @@ const selector = createSelector(
       consoleLogLevel,
       shouldLogToConsole,
       shouldAntialiasProgressImage,
+      isNodesEnabled,
     } = system;
 
     const {
@@ -80,6 +82,7 @@ const selector = createSelector(
       shouldLogToConsole,
       shouldAntialiasProgressImage,
       shouldShowAdvancedOptions,
+      isNodesEnabled,
     };
   },
   {
@@ -93,6 +96,7 @@ type ConfigOptions = {
   shouldShowBetaLayout: boolean;
   shouldShowAdvancedOptionsSettings: boolean;
   shouldShowClearIntermediates: boolean;
+  shouldShowNodesToggle: boolean;
 };
 
 type SettingsModalProps = {
@@ -113,6 +117,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
     config?.shouldShowAdvancedOptionsSettings ?? true;
   const shouldShowClearIntermediates =
     config?.shouldShowClearIntermediates ?? true;
+  const shouldShowNodesToggle = config?.shouldShowNodesToggle ?? true;
 
   useEffect(() => {
     if (!shouldShowDeveloperSettings) {
@@ -143,6 +148,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
     shouldLogToConsole,
     shouldAntialiasProgressImage,
     shouldShowAdvancedOptions,
+    isNodesEnabled,
   } = useAppSelector(selector);
 
   const handleClickResetWebUI = useCallback(() => {
@@ -173,6 +179,13 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
     [dispatch]
   );
 
+  const handleToggleNodes = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      dispatch(setIsNodesEnabled(e.target.checked));
+    },
+    [dispatch]
+  );
+
   return (
     <>
       {cloneElement(children, {
@@ -257,6 +270,13 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                     )
                   }
                 />
+                {shouldShowNodesToggle && (
+                  <IAISwitch
+                    label="Enable Nodes Editor (Experimental)"
+                    isChecked={isNodesEnabled}
+                    onChange={handleToggleNodes}
+                  />
+                )}
               </StyledFlex>
 
               {shouldShowDeveloperSettings && (