From 9a1163490047c81bd2d8000990d4e7397a475ea3 Mon Sep 17 00:00:00 2001
From: jgresham <johnsgresham@gmail.com>
Date: Thu, 10 Nov 2022 23:32:17 -0600
Subject: [PATCH 1/6] wip checkin. refreshed settings rendered minus
 multiselect

---
 src/renderer/Footer/DynamicNodeConfig.tsx     |   5 +
 .../DynamicControls/Select.tsx                |  77 ++++++
 .../DynamicControls/TextArea.tsx              |  54 ++++
 .../DynamicSettings/DynamicSettings.tsx       |  88 +++++++
 .../redesign/DynamicSettings/Setting.tsx      | 138 ++++++++++
 .../convertConfigToLabelSettings.tsx          |  72 ++++++
 .../Generics/redesign/Input/Input.tsx         |  15 +-
 .../redesign/Input/folderInput.css.ts         |   1 +
 .../redesign/LabelSetting/LabelSettings.tsx   |   2 +-
 .../LabelSetting/LabelValuesSection.tsx       |  13 +-
 .../LabelSetting/labelSettingsSection.css.ts  |   4 +-
 .../Generic/DynamicSettings.stories.tsx       | 239 ++++++++++++++++++
 12 files changed, 699 insertions(+), 9 deletions(-)
 create mode 100644 src/renderer/Generics/redesign/DynamicSettings/DynamicControls/Select.tsx
 create mode 100644 src/renderer/Generics/redesign/DynamicSettings/DynamicControls/TextArea.tsx
 create mode 100644 src/renderer/Generics/redesign/DynamicSettings/DynamicSettings.tsx
 create mode 100644 src/renderer/Generics/redesign/DynamicSettings/Setting.tsx
 create mode 100644 src/renderer/Generics/redesign/DynamicSettings/convertConfigToLabelSettings.tsx
 create mode 100644 src/stories/Generic/DynamicSettings.stories.tsx

diff --git a/src/renderer/Footer/DynamicNodeConfig.tsx b/src/renderer/Footer/DynamicNodeConfig.tsx
index 0b8ef262e..3e618c500 100644
--- a/src/renderer/Footer/DynamicNodeConfig.tsx
+++ b/src/renderer/Footer/DynamicNodeConfig.tsx
@@ -36,6 +36,11 @@ const DynamicNodeConfig = () => {
     }
     console.log('NodeConfig isDisabled? ', isDisabled);
     setIsConfigDisabled(isDisabled);
+    console.log(
+      'DynamicSettings configValuesMap',
+      selectedNode?.config.configValuesMap
+    );
+    console.log('DynamicSettings configTranslationMap', configTranslationMap);
     setConfigTranslationMap(configTranslationMap);
   }, [selectedNode]);
 
diff --git a/src/renderer/Generics/redesign/DynamicSettings/DynamicControls/Select.tsx b/src/renderer/Generics/redesign/DynamicSettings/DynamicControls/Select.tsx
new file mode 100644
index 000000000..481c5f181
--- /dev/null
+++ b/src/renderer/Generics/redesign/DynamicSettings/DynamicControls/Select.tsx
@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+import ReactSelect, {
+  MenuPlacement,
+  MultiValue,
+  SingleValue,
+} from 'react-select';
+
+type SelectOption = { value: string; label: string };
+
+type Props = {
+  isDisabled: boolean;
+  options: SelectOption[];
+  value: undefined | string | string[];
+  onChange: (newValue?: string | string[]) => void;
+  isMulti: boolean;
+  menuPlacement?: string;
+};
+const Select = ({
+  isDisabled,
+  options,
+  value,
+  onChange,
+  isMulti,
+  menuPlacement,
+}: Props) => {
+  const [sSelectedOptions, setSelectedOptions] = useState<SelectOption[]>([]);
+
+  useEffect(() => {
+    // if no value is set in the prop, show the default value
+    // (ex. if no value is set in the node's config, show the node spec default value)
+    if (Array.isArray(value)) {
+      setSelectedOptions(
+        options.filter((option) => {
+          return value.includes(option.value);
+        })
+      );
+    } else {
+      setSelectedOptions(
+        options.filter((option) => {
+          return value === option.value;
+        })
+      );
+    }
+  }, [value, options]);
+
+  return (
+    <div style={{ color: 'initial' }}>
+      <ReactSelect
+        value={sSelectedOptions}
+        options={options}
+        onChange={(
+          newValue: SingleValue<SelectOption> | MultiValue<SelectOption>
+        ) => {
+          console.log('onChange newValue: ', newValue);
+          if (Array.isArray(newValue)) {
+            // return array of values
+            onChange(
+              newValue.map((selectOption) => {
+                return selectOption.value;
+              })
+            );
+          } else {
+            const singleValue = newValue as SingleValue<SelectOption>;
+            onChange(singleValue?.value ? singleValue.value : undefined);
+          }
+        }}
+        isDisabled={isDisabled}
+        isMulti={isMulti}
+        menuPlacement={menuPlacement as MenuPlacement}
+      />
+    </div>
+  );
+};
+Select.defaultProps = {
+  menuPlacement: 'bottom',
+};
+export default Select;
diff --git a/src/renderer/Generics/redesign/DynamicSettings/DynamicControls/TextArea.tsx b/src/renderer/Generics/redesign/DynamicSettings/DynamicControls/TextArea.tsx
new file mode 100644
index 000000000..e8925b89e
--- /dev/null
+++ b/src/renderer/Generics/redesign/DynamicSettings/DynamicControls/TextArea.tsx
@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react';
+
+type Props = {
+  isDisabled: boolean;
+  value: string | undefined;
+  onChange: (newValue: string) => void;
+};
+const TextArea = ({ isDisabled, value, onChange }: Props) => {
+  const [sText, setText] = useState<string>();
+
+  useEffect(() => {
+    setText(value);
+  }, [value]);
+
+  return (
+    <>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          onChange(sText ?? '');
+        }}
+      >
+        {/* <label>
+          Essay: */}
+        <textarea
+          style={{
+            minWidth: 400,
+            minHeight: 30,
+          }}
+          value={sText}
+          onChange={(e) => setText(e.target.value)}
+          disabled={isDisabled}
+        />
+        {/* </label> */}
+        <input type="submit" value="Submit" disabled={isDisabled} />
+      </form>
+
+      {/* <select
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        disabled={isDisabled}
+      >
+        {options.map((option) => {
+          return (
+            <option key={option.value} value={option.value}>
+              {option}
+            </option>
+          );
+        })}
+      </select> */}
+    </>
+  );
+};
+export default TextArea;
diff --git a/src/renderer/Generics/redesign/DynamicSettings/DynamicSettings.tsx b/src/renderer/Generics/redesign/DynamicSettings/DynamicSettings.tsx
new file mode 100644
index 000000000..228c319a3
--- /dev/null
+++ b/src/renderer/Generics/redesign/DynamicSettings/DynamicSettings.tsx
@@ -0,0 +1,88 @@
+import { useEffect, useState } from 'react';
+import {
+  ConfigValue,
+  ConfigTranslationMap,
+  ConfigTranslation,
+  ConfigTranslationControl,
+} from '../../../../common/nodeConfig';
+import convertConfigToLabelSettings from './convertConfigToLabelSettings';
+import Select from './DynamicControls/Select';
+import TextArea from './DynamicControls/TextArea';
+import Setting from './Setting';
+// import Warning from '../Warning';
+// import { InfoModal } from '../InfoIconButton';
+// import ExternalLink from '../Generics/ExternalLink';
+
+export type CategoryConfig = {
+  category: string;
+  configTranslationMap: ConfigTranslationMap;
+};
+// isDisabled? selectedNodeId (for dialog)
+export type DynamicSettingsProps = {
+  configTranslationMap: ConfigTranslationMap;
+  configValuesMap: any;
+  onChange?: (configKey: string, newValue: ConfigValue) => void;
+};
+// configTranslationMap = selectedNode.spec.configTranslation;
+const DynamicSettings = ({
+  configTranslationMap,
+  configValuesMap,
+  onChange,
+}: DynamicSettingsProps) => {
+  const [sCategoryConfigs, setCategoryConfigs] = useState<CategoryConfig[]>();
+
+  useEffect(() => {
+    // category to configs
+    const categoryMap: Record<string, ConfigTranslationMap> = {};
+    if (configTranslationMap) {
+      Object.keys(configTranslationMap).forEach((configKey) => {
+        const configTranslation: ConfigTranslation =
+          configTranslationMap[configKey];
+        const category = configTranslation.category ?? 'Other';
+        if (!categoryMap[category]) {
+          categoryMap[category] = {};
+        }
+        categoryMap[category][configKey] = configTranslation;
+      });
+    }
+    const arr = Object.keys(categoryMap).map((category) => {
+      return {
+        category,
+        configTranslationMap: categoryMap[category],
+      };
+    });
+
+    // Put 'Other' category at the bottom
+    arr.sort((x, y) => {
+      if (x.category === 'Other') {
+        return 1;
+      }
+      if (y.category === 'Other') {
+        return -1;
+      }
+      return 0;
+    });
+
+    setCategoryConfigs(arr);
+  }, [configTranslationMap]);
+
+  if (!configTranslationMap) {
+    return <>No config</>;
+  }
+
+  const onNodeConfigChange = async (
+    configKey: string,
+    newValue: ConfigValue
+  ) => {
+    // updateNode
+    console.log('updating node with newValue: ', newValue);
+    if (onChange) {
+      onChange(configKey, newValue);
+    }
+  };
+
+  return (
+    <>{convertConfigToLabelSettings(sCategoryConfigs ?? [], configValuesMap)}</>
+  );
+};
+export default DynamicSettings;
diff --git a/src/renderer/Generics/redesign/DynamicSettings/Setting.tsx b/src/renderer/Generics/redesign/DynamicSettings/Setting.tsx
new file mode 100644
index 000000000..69353751b
--- /dev/null
+++ b/src/renderer/Generics/redesign/DynamicSettings/Setting.tsx
@@ -0,0 +1,138 @@
+import { useEffect, useState } from 'react';
+import {
+  ConfigValue,
+  ConfigTranslationMap,
+  ConfigTranslation,
+  ConfigTranslationControl,
+  ConfigKey,
+} from '../../../../common/nodeConfig';
+import FolderInput from '../Input/FolderInput';
+import Input from '../Input/Input';
+import Select from '../Select/Select';
+import MultiSelect from './DynamicControls/Select';
+import TextArea from './DynamicControls/TextArea';
+// import Warning from '../Warning';
+// import { InfoModal } from '../InfoIconButton';
+// import ExternalLink from '../Generics/ExternalLink';
+
+type CategoryConfig = {
+  category: string;
+  configTranslationMap: ConfigTranslationMap;
+};
+// isDisabled? selectedNodeId (for dialog)
+export type SettingProps = {
+  configTranslation: ConfigTranslation;
+  configKey: ConfigKey;
+  currentValue: string | string[];
+  onChange?: (configKey: string, newValue: ConfigValue) => void;
+};
+// configTranslationMap = selectedNode.spec.configTranslation;
+const Setting = ({
+  configTranslation,
+  configKey,
+  currentValue,
+  onChange,
+}: SettingProps) => {
+  const onNodeConfigChange = async (newValue: ConfigValue) => {
+    // updateNode
+    console.log('updating node with newValue: ', newValue);
+    if (onChange) {
+      onChange(configKey, newValue);
+    }
+  };
+
+  const configTranslationControl: ConfigTranslationControl =
+    configTranslation.uiControl;
+
+  // configKey (ex. "http")
+  // configTranslation
+  // currentValue (Str)
+  return (
+    <div key={configKey}>
+      <div>
+        {/* <span>{configTranslation.displayName}</span> */}
+        {/* {(configTranslation.infoDescription ||
+                              configTranslation.documentation) && (
+                              <InfoModal title={configTranslation.displayName}>
+                                {configTranslation.infoDescription}
+                                {configTranslation.defaultValue && (
+                                  <p>
+                                    Default value:{' '}
+                                    {configTranslation.defaultValue}
+                                  </p>
+                                )}
+                                {configTranslation.documentation && (
+                                  <ExternalLink
+                                    title="Documentation Link"
+                                    url={configTranslation.documentation}
+                                  />
+                                )}
+                              </InfoModal>
+                            )} */}
+      </div>
+      {configTranslationControl?.type === 'filePath' && (
+        <FolderInput
+          placeholder={currentValue as string}
+          onClickChange={() => {
+            console.log('onclick dir');
+            // todo: fix
+            // electron.openDialogForNodeDataDir('test')}/>
+          }}
+        />
+        // <>
+        //   {`Current folder: ${currentValue}`}
+        //   <button
+        //     type="button"
+        //     onClick={
+        //       () => console.log('onclick dir')
+        //       // todo: fix
+        //       // electron.openDialogForNodeDataDir('test')
+        //     }
+        //     disabled={false}
+        //     // disabled={sIsConfigDisabled}
+        //   >
+        //     Select folder
+        //   </button>
+        // </>
+      )}
+      {configTranslationControl?.type === 'text' && (
+        <Input
+          value={currentValue as string}
+          onChange={(newValue: string) => onNodeConfigChange(newValue)}
+          // isDisabled={sIsConfigDisabled}
+          disabled={false}
+        />
+      )}
+      {configTranslationControl?.type === 'select/single' && (
+        <Select
+          value={currentValue as string}
+          // defaultValue={configTranslation.defaultValue}
+          onChange={(newValue) => onNodeConfigChange(newValue?.value)}
+          options={configTranslationControl.controlTranslations.map(
+            ({ value }) => {
+              return { value, label: value };
+            }
+          )}
+          // isDisabled={sIsConfigDisabled}
+          isDisabled={false}
+        />
+      )}
+      {configTranslationControl?.type === 'select/multiple' && (
+        <MultiSelect
+          value={currentValue}
+          // defaultValue={configTranslation.defaultValue}
+          onChange={(newValue) => onNodeConfigChange(newValue)}
+          options={configTranslationControl.controlTranslations.map(
+            ({ value }) => {
+              return { value, label: value };
+            }
+          )}
+          // isDisabled={sIsConfigDisabled}
+          isDisabled={false}
+          isMulti={configTranslationControl?.type === 'select/multiple'}
+        />
+      )}
+    </div>
+  );
+};
+export default Setting;
diff --git a/src/renderer/Generics/redesign/DynamicSettings/convertConfigToLabelSettings.tsx b/src/renderer/Generics/redesign/DynamicSettings/convertConfigToLabelSettings.tsx
new file mode 100644
index 000000000..26d913f2f
--- /dev/null
+++ b/src/renderer/Generics/redesign/DynamicSettings/convertConfigToLabelSettings.tsx
@@ -0,0 +1,72 @@
+import { ConfigTranslation } from '../../../../common/nodeConfig';
+import LineLabelSettings, {
+  LineLabelSettingsProps,
+} from '../LabelSetting/LabelSettings';
+import LabelSettingsSection, {
+  LabelSettingsItem,
+  LabelSettingsSectionProps,
+} from '../LabelSetting/LabelValuesSection';
+// eslint-disable-next-line import/no-cycle
+import { CategoryConfig } from './DynamicSettings';
+import Setting from './Setting';
+
+const convertConfigToLabelSettings = (
+  categoryConfigs: CategoryConfig[],
+  configValuesMap: any
+): React.ReactNode => {
+  // let lineLabelSettingsProps: LineLabelSettingsProps = {
+  //   items: [],
+  // };
+  console.log(
+    'settings categoryConfigs, configValuesMap: ',
+    categoryConfigs,
+    configValuesMap
+  );
+
+  // no separate settings sections (Only one for now)
+  const section: LabelSettingsSectionProps = {
+    // sectionTitle: category
+    items: [],
+  };
+  const configItems = categoryConfigs.map((categoryConfig) => {
+    const { configTranslationMap, category } = categoryConfig;
+
+    if (configTranslationMap) {
+      const categoryItems = Object.keys(configTranslationMap).map(
+        (configKey) => {
+          const configTranslation: ConfigTranslation =
+            configTranslationMap[configKey];
+
+          let currentValue: string | string[] = configValuesMap?.[configKey];
+          if (currentValue === undefined) {
+            if (configTranslation.niceNodeDefaultValue !== undefined) {
+              currentValue = configTranslation.niceNodeDefaultValue;
+            } else if (configTranslation.defaultValue !== undefined) {
+              currentValue = configTranslation.defaultValue;
+            }
+            // todo for mutli select?
+          }
+          const settingItem: LabelSettingsItem = {
+            label: configTranslation.displayName,
+            value: (
+              <Setting
+                key={configKey}
+                configKey={configKey}
+                configTranslation={configTranslation}
+                currentValue={currentValue}
+              />
+            ),
+          };
+          console.log('settings settingItem: ', settingItem);
+          return settingItem;
+        }
+      );
+      section.items = section.items.concat(categoryItems);
+    }
+
+    console.log('settings section: ', section);
+    return section;
+  });
+  return <LineLabelSettings items={[section]} />;
+};
+export default convertConfigToLabelSettings;
diff --git a/src/renderer/Generics/redesign/Input/Input.tsx b/src/renderer/Generics/redesign/Input/Input.tsx
index 0f9af5019..ff21a34e6 100644
--- a/src/renderer/Generics/redesign/Input/Input.tsx
+++ b/src/renderer/Generics/redesign/Input/Input.tsx
@@ -1,6 +1,10 @@
 import { container } from './input.css';
 
 export interface InputProps {
+  /**
+   *  Control the input by passing a value
+   */
+  value?: string;
   /**
    *  What's the placeholder text?
    */
@@ -13,15 +17,24 @@ export interface InputProps {
    *  Is this input field disabled?
    */
   disabled?: boolean;
+  onChange?: (newValue: string) => void;
 }
 
-const Input = ({ placeholder, required, disabled }: InputProps) => {
+const Input = ({
+  value,
+  placeholder,
+  required,
+  disabled,
+  onChange,
+}: InputProps) => {
   return (
     <input
       {...{
         type: 'text',
         className: [container].join(' '),
         placeholder,
+        value,
+        onchange: onChange,
         ...(disabled && { disabled }),
         ...(required && { required }),
       }}
diff --git a/src/renderer/Generics/redesign/Input/folderInput.css.ts b/src/renderer/Generics/redesign/Input/folderInput.css.ts
index 18596b792..ad40b0d6a 100644
--- a/src/renderer/Generics/redesign/Input/folderInput.css.ts
+++ b/src/renderer/Generics/redesign/Input/folderInput.css.ts
@@ -6,6 +6,7 @@ export const container = style({
   flexDirection: 'column',
   gap: 8,
   width: '100%',
+  minWidth: 400,
 });
 
 export const pathAndChangeContainer = style({
diff --git a/src/renderer/Generics/redesign/LabelSetting/LabelSettings.tsx b/src/renderer/Generics/redesign/LabelSetting/LabelSettings.tsx
index b40d07d87..7e4c10ff5 100644
--- a/src/renderer/Generics/redesign/LabelSetting/LabelSettings.tsx
+++ b/src/renderer/Generics/redesign/LabelSetting/LabelSettings.tsx
@@ -23,7 +23,7 @@ export interface LineLabelSettingsProps {
 }
 
 /**
- * Primary UI component for user interaction
+ * Rows of labels and inputs used for settings screens
  */
 const LineLabelSettings = ({
   title,
diff --git a/src/renderer/Generics/redesign/LabelSetting/LabelValuesSection.tsx b/src/renderer/Generics/redesign/LabelSetting/LabelValuesSection.tsx
index d0f8b31c2..5b35b53bb 100644
--- a/src/renderer/Generics/redesign/LabelSetting/LabelValuesSection.tsx
+++ b/src/renderer/Generics/redesign/LabelSetting/LabelValuesSection.tsx
@@ -9,19 +9,20 @@ import {
   sectionHeaderText,
 } from './labelSettingsSection.css';
 
+export type LabelSettingsItem = {
+  label: string;
+  value: ReactElement | string;
+  link?: string;
+};
 export interface LabelSettingsSectionProps {
   /**
    * Title gets uppercased
    */
-  sectionTitle: string;
+  sectionTitle?: string;
   /**
    * The sections label value items
    */
-  items: {
-    label: string;
-    value: ReactElement | string;
-    link?: string;
-  }[];
+  items: LabelSettingsItem[];
 }
 
 const LabelSettingsSection = ({
diff --git a/src/renderer/Generics/redesign/LabelSetting/labelSettingsSection.css.ts b/src/renderer/Generics/redesign/LabelSetting/labelSettingsSection.css.ts
index d58846732..80423ac1d 100644
--- a/src/renderer/Generics/redesign/LabelSetting/labelSettingsSection.css.ts
+++ b/src/renderer/Generics/redesign/LabelSetting/labelSettingsSection.css.ts
@@ -30,10 +30,12 @@ export const lineContainer = style({
   boxSizing: 'border-box',
   display: 'flex',
   flexDirection: 'row',
+  flexWrap: 'wrap',
   justifyContent: 'space-between',
   alignItems: 'center',
   padding: '8px 0px',
-  gap: '28px',
+  columnGap: '14px',
+  rowGap: '8px',
   flex: 'none',
   order: 1,
   alignSelf: 'stretch',
diff --git a/src/stories/Generic/DynamicSettings.stories.tsx b/src/stories/Generic/DynamicSettings.stories.tsx
new file mode 100644
index 000000000..5b7c5d6ab
--- /dev/null
+++ b/src/stories/Generic/DynamicSettings.stories.tsx
@@ -0,0 +1,239 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ConfigTranslationMap, ConfigValuesMap } from '../../common/nodeConfig';
+
+import DynamicSettings from '../../renderer/Generics/redesign/DynamicSettings/DynamicSettings';
+
+export default {
+  title: 'Generic/DynamicSettings',
+  component: DynamicSettings,
+  argTypes: {},
+} as ComponentMeta<typeof DynamicSettings>;
+
+const Template: ComponentStory<typeof DynamicSettings> = (args) => (
+  <DynamicSettings {...args} />
+);
+console.log('yoooooo');
+
+const configValuesMap: ConfigValuesMap = {
+  dataDir:
+    '/Users/johns/Library/Application Support/NiceNode/nodes/besu-1667947772',
+  hostAllowlist: 'localhost,host.docker.internal',
+  http: 'Enabled',
+  httpCorsDomains: '"http://localhost"',
+  webSockets: 'Disabled',
+};
+
+const configTranslationMap: ConfigTranslationMap = {
+  dataDir: {
+    displayName: 'Data location',
+    category: 'Storage',
+    cliConfigPrefix: '--data-path=',
+    uiControl: {
+      type: 'filePath',
+    },
+    documentation:
+      'https://besu.hyperledger.org/en/stable/Reference/CLI/CLI-Syntax/#data-path',
+  },
+  syncMode: {
+    displayName: 'Sync mode',
+    category: 'Syncronization',
+    cliConfigPrefix: '--sync-mode=',
+    uiControl: {
+      type: 'select/single',
+      controlTranslations: [
+        {
+          value: 'FAST',
+          config: 'FAST',
+        },
+        {
+          value: 'FULL',
+          config: 'FULL',
+        },
+      ],
+    },
+    defaultValue: 'FAST',
+    documentation:
+      'https://besu.hyperledger.org/en/stable/Concepts/Node-Types/',
+  },
+  http: {
+    displayName: 'RPC http connections',
+    category: 'RPC APIs',
+    uiControl: {
+      type: 'select/single',
+      controlTranslations: [
+        {
+          value: 'Enabled',
+          config: '--rpc-http-enabled',
+        },
+        {
+          value: 'Disabled',
+        },
+      ],
+    },
+    defaultValue: 'Disabled',
+    documentation:
+      'https://besu.hyperledger.org/en/stable/Reference/CLI/CLI-Syntax/#rpc-http-enabled',
+  },
+  webSockets: {
+    displayName: 'RPC websocket connections',
+    uiControl: {
+      type: 'select/single',
+      controlTranslations: [
+        {
+          value: 'Enabled',
+          config: '--rpc-ws-enabled=true',
+        },
+        {
+          value: 'Disabled',
+        },
+      ],
+    },
+    defaultValue: 'Disabled',
+    infoDescription:
+      'Enables or disables the WebSocket JSON-RPC service. The default is false.',
+    documentation:
+      'https://besu.hyperledger.org/en/stable/Reference/CLI/CLI-Syntax/#rpc-ws-enabled',
+  },
+  webSocketsPort: {
+    displayName: 'WebSockets RPC listening port',
+    cliConfigPrefix: '--rpc-ws-port=',
+    defaultValue: '8546',
+    uiControl: {
+      type: 'text',
+    },
+    documentation:
+      'https://besu.hyperledger.org/en/stable/Reference/CLI/CLI-Syntax/#rpc-ws-port',
+    infoDescription:
+      'The port (TCP) on which WebSocket JSON-RPC listens. The default is 8546. You must expose ports appropriately (https://besu.hyperledger.org/en/stable/HowTo/Find-and-Connect/Configuring-Ports/).',
+  },
+  httpApis: {
+    displayName: "Enabled HTTP API's",
+    category: 'RPC APIs',
+    cliConfigPrefix: '--rpc-http-api=',
+    valuesJoinStr: ',',
+    uiControl: {
+      type: 'select/multiple',
+      controlTranslations: [
+        {
+          value: 'ADMIN',
+          config: 'ADMIN',
+        },
+        {
+          value: 'CLIQUE',
+          config: 'CLIQUE',
+        },
+        {
+          value: 'DEBUG',
+          config: 'DEBUG',
+        },
+        {
+          value: 'EEA',
+          config: 'EEA',
+        },
+        {
+          value: 'ETH',
+          config: 'ETH',
+        },
+        {
+          value: 'IBFT',
+          config: 'IBFT',
+        },
+        {
+          value: 'MINER',
+          config: 'MINER',
+        },
+        {
+          value: 'NET',
+          config: 'NET',
+        },
+        {
+          value: 'PERM',
+          config: 'PERM',
+        },
+        {
+          value: 'PLUGINS',
+          config: 'PLUGINS',
+        },
+        {
+          value: 'QBFT',
+          config: 'QBFT',
+        },
+        {
+          value: 'TRACE',
+          config: 'TRACE',
+        },
+        {
+          value: 'TXPOOL',
+          config: 'TXPOOL',
+        },
+        {
+          value: 'WEB3',
+          config: 'WEB3',
+        },
+      ],
+    },
+    defaultValue: ['ETH', 'NET', 'WEB3'],
+    documentation:
+      'https://besu.hyperledger.org/en/stable/Reference/CLI/CLI-Syntax/#rpc-http-api',
+  },
+  hostAllowList: {
+    displayName: 'RPC connections accepted by node',
+    category: 'RPC APIs',
+    cliConfigPrefix: '--host-allowlist=',
+    uiControl: {
+      type: 'text',
+    },
+    infoDescription:
+      'A comma-separated list of hostnames to access the JSON-RPC API and pull Besu metrics. By default, Besu accepts requests from localhost and 127.0.0.1. Example value: medomain.com,meotherdomain.com',
+    defaultValue: 'localhost,127.0.0.1',
+  },
+  httpCorsDomains: {
+    displayName: 'Allowed virtual hostnames for inbound requests',
+    cliConfigPrefix: '--rpc-http-cors-origins=',
+    valuesJoinStr: ',',
+    uiControl: {
+      type: 'text',
+    },
+    documentation:
+      'https://besu.hyperledger.org/en/stable/public-networks/reference/cli/options/#rpc-http-cors-origins',
+    infoDescription:
+      'Change where the node accepts http connections (use comma separated urls wrapped in double quotes). If using a browser wallet, the extension url is required to be input here.',
+  },
+  dataStorageFormat: {
+    displayName: "Besu's data storage format",
+    category: 'Storage',
+    cliConfigPrefix: '--data-storage-format=',
+    uiControl: {
+      type: 'select/single',
+      controlTranslations: [
+        {
+          value: 'FOREST',
+          config: 'FOREST',
+        },
+        {
+          value: 'BONSAI',
+          config: 'BONSAI',
+        },
+      ],
+    },
+    defaultValue: 'FOREST',
+    documentation:
+      'https://besu.hyperledger.org/en/stable/Reference/CLI/CLI-Syntax/#data-storage-format',
+  },
+  maxPeerCount: {
+    displayName: 'Max Peer Count (set to low number to use less bandwidth)',
+    cliConfigPrefix: '--max-peers=',
+    defaultValue: '25',
+    uiControl: {
+      type: 'text',
+    },
+    documentation:
+      'https://besu.hyperledger.org/en/stable/HowTo/Find-and-Connect/Managing-Peers/#limit-peers',
+  },
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  configTranslationMap,
+  configValuesMap,
+};

From fc799ec9fef64b05896c06cba1d68bde5c422b65 Mon Sep 17 00:00:00 2001
From: jgresham <johnsgresham@gmail.com>
Date: Fri, 11 Nov 2022 11:55:18 -0600
Subject: [PATCH 2/6] feat: description and learn more for LabelSettings
 component. Caption component

---
 assets/locales/en/genericComponents.json      |  1 +
 assets/locales/es/genericComponents.json      |  1 +
 .../redesign/DynamicSettings/Setting.tsx      | 30 +-------
 .../convertConfigToLabelSettings.tsx          |  6 ++
 .../LabelSetting/LabelValuesSection.tsx       | 38 +++++----
 .../LabelSetting/labelSettingsSection.css.ts  | 15 +++-
 .../Generics/redesign/Link/ExternalLink.tsx   |  8 +-
 .../Generics/redesign/Select/MultiSelect.tsx  | 77 +++++++++++++++++++
 src/renderer/Generics/redesign/Typography     |  0
 .../Generics/redesign/Typography/Caption.tsx  | 13 ++++
 .../redesign/Typography/caption.css.ts        |  9 +++
 .../Generic/DynamicSettings.stories.tsx       | 18 -----
 src/stories/Generic/LabelSettings.stories.tsx | 13 +++-
 13 files changed, 159 insertions(+), 70 deletions(-)
 create mode 100644 src/renderer/Generics/redesign/Select/MultiSelect.tsx
 delete mode 100644 src/renderer/Generics/redesign/Typography
 create mode 100644 src/renderer/Generics/redesign/Typography/Caption.tsx
 create mode 100644 src/renderer/Generics/redesign/Typography/caption.css.ts

diff --git a/assets/locales/en/genericComponents.json b/assets/locales/en/genericComponents.json
index 5b7d5165d..f0249eb4a 100644
--- a/assets/locales/en/genericComponents.json
+++ b/assets/locales/en/genericComponents.json
@@ -9,6 +9,7 @@
   "Hide" : "Hide",
   "Language": "Language",
   "LaunchOnStartup": "Launch on startup",
+  "LearnMore": "Learn more",
   "LightMode": "Light mode",
   "loadingDotDotDot": "loading...",
   "MinorityClient" : "Minority Client",
diff --git a/assets/locales/es/genericComponents.json b/assets/locales/es/genericComponents.json
index 81776045a..98761f9cc 100644
--- a/assets/locales/es/genericComponents.json
+++ b/assets/locales/es/genericComponents.json
@@ -6,6 +6,7 @@
   "FinishingUp" : "Finishing arriba...",
   "Language" : "Idioma",
   "LaunchOnStartup" : "Empieze en Startup",
+  "LearnMore": "Aprender más",
   "LightMode": "Luz modo",
   "MinorityClient" : "Mejor Client",
   "NextStep" : "Proxima step",
diff --git a/src/renderer/Generics/redesign/DynamicSettings/Setting.tsx b/src/renderer/Generics/redesign/DynamicSettings/Setting.tsx
index 69353751b..b82efe583 100644
--- a/src/renderer/Generics/redesign/DynamicSettings/Setting.tsx
+++ b/src/renderer/Generics/redesign/DynamicSettings/Setting.tsx
@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react';
 import {
   ConfigValue,
   ConfigTranslationMap,
@@ -9,11 +8,8 @@ import {
 import FolderInput from '../Input/FolderInput';
 import Input from '../Input/Input';
 import Select from '../Select/Select';
-import MultiSelect from './DynamicControls/Select';
-import TextArea from './DynamicControls/TextArea';
+import MultiSelect from '../Select/MultiSelect';
 // import Warning from '../Warning';
-// import { InfoModal } from '../InfoIconButton';
-// import ExternalLink from '../Generics/ExternalLink';
 
 type CategoryConfig = {
   category: string;
@@ -26,7 +22,6 @@ export type SettingProps = {
   currentValue: string | string[];
   onChange?: (configKey: string, newValue: ConfigValue) => void;
 };
-// configTranslationMap = selectedNode.spec.configTranslation;
 const Setting = ({
   configTranslation,
   configKey,
@@ -34,7 +29,7 @@ const Setting = ({
   onChange,
 }: SettingProps) => {
   const onNodeConfigChange = async (newValue: ConfigValue) => {
-    // updateNode
+    // todo: updateNode
     console.log('updating node with newValue: ', newValue);
     if (onChange) {
       onChange(configKey, newValue);
@@ -49,27 +44,6 @@ const Setting = ({
   // currentValue (Str)
   return (
     <div key={configKey}>
-      <div>
-        {/* <span>{configTranslation.displayName}</span> */}
-        {/* {(configTranslation.infoDescription ||
-                              configTranslation.documentation) && (
-                              <InfoModal title={configTranslation.displayName}>
-                                {configTranslation.infoDescription}
-                                {configTranslation.defaultValue && (
-                                  <p>
-                                    Default value:{' '}
-                                    {configTranslation.defaultValue}
-                                  </p>
-                                )}
-                                {configTranslation.documentation && (
-                                  <ExternalLink
-                                    title="Documentation Link"
-                                    url={configTranslation.documentation}
-                                  />
-                                )}
-                              </InfoModal>
-                            )} */}
-      </div>
       {configTranslationControl?.type === 'filePath' && (
         <FolderInput
           placeholder={currentValue as string}
diff --git a/src/renderer/Generics/redesign/DynamicSettings/convertConfigToLabelSettings.tsx b/src/renderer/Generics/redesign/DynamicSettings/convertConfigToLabelSettings.tsx
index 26d913f2f..34be108b3 100644
--- a/src/renderer/Generics/redesign/DynamicSettings/convertConfigToLabelSettings.tsx
+++ b/src/renderer/Generics/redesign/DynamicSettings/convertConfigToLabelSettings.tsx
@@ -57,6 +57,12 @@ const convertConfigToLabelSettings = (
               />
             ),
           };
+          if (configTranslation.infoDescription) {
+            settingItem.description = configTranslation.infoDescription;
+          }
+          if (configTranslation.documentation) {
+            settingItem.learnMoreLink = configTranslation.documentation;
+          }
           console.log('settings settingItem: ', settingItem);
           return settingItem;
         }
diff --git a/src/renderer/Generics/redesign/LabelSetting/LabelValuesSection.tsx b/src/renderer/Generics/redesign/LabelSetting/LabelValuesSection.tsx
index 5b35b53bb..2e15797b3 100644
--- a/src/renderer/Generics/redesign/LabelSetting/LabelValuesSection.tsx
+++ b/src/renderer/Generics/redesign/LabelSetting/LabelValuesSection.tsx
@@ -1,5 +1,7 @@
 import React, { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
 import ExternalLink from '../Link/ExternalLink';
+import Caption from '../Typography/Caption';
 import {
   sectionContainer,
   lineContainer,
@@ -7,12 +9,14 @@ import {
   lineValueText,
   sectionHeaderContainer,
   sectionHeaderText,
+  labelAndDescriptionContainer,
 } from './labelSettingsSection.css';
 
 export type LabelSettingsItem = {
   label: string;
   value: ReactElement | string;
-  link?: string;
+  description?: string;
+  learnMoreLink?: string;
 };
 export interface LabelSettingsSectionProps {
   /**
@@ -29,18 +33,8 @@ const LabelSettingsSection = ({
   sectionTitle,
   items,
 }: LabelSettingsSectionProps) => {
-  const renderValue = (item: {
-    label: string;
-    value: ReactElement | string;
-    link?: string;
-  }) => {
-    const value = item.link ? (
-      <ExternalLink url={item.link} text={item.value.toString()} />
-    ) : (
-      item.value
-    );
-    return <div className={lineValueText}>{value}</div>;
-  };
+  const { t } = useTranslation('genericComponents');
+
   return (
     <div className={sectionContainer}>
       {sectionTitle && (
@@ -52,8 +46,22 @@ const LabelSettingsSection = ({
         items.map((item) => (
           <React.Fragment key={item.label + item.value}>
             <div className={lineContainer}>
-              <div className={lineKeyText}>{item.label}</div>
-              {renderValue(item)}
+              <div className={labelAndDescriptionContainer}>
+                <div className={lineKeyText}>{item.label}</div>
+                <Caption>
+                  {item.description}{' '}
+                  {item.learnMoreLink && (
+                    <ExternalLink
+                      url={item.learnMoreLink}
+                      text={t('LearnMore')}
+                      inline
+                      hideIcon
+                    />
+                  )}
+                </Caption>
+              </div>
+
+              <div className={lineValueText}>{item.value}</div>
             </div>
           </React.Fragment>
         ))}
diff --git a/src/renderer/Generics/redesign/LabelSetting/labelSettingsSection.css.ts b/src/renderer/Generics/redesign/LabelSetting/labelSettingsSection.css.ts
index 80423ac1d..9bfe4a42c 100644
--- a/src/renderer/Generics/redesign/LabelSetting/labelSettingsSection.css.ts
+++ b/src/renderer/Generics/redesign/LabelSetting/labelSettingsSection.css.ts
@@ -33,6 +33,7 @@ export const lineContainer = style({
   flexWrap: 'wrap',
   justifyContent: 'space-between',
   alignItems: 'center',
+  minHeight: '48px',
   padding: '8px 0px',
   columnGap: '14px',
   rowGap: '8px',
@@ -43,13 +44,21 @@ export const lineContainer = style({
   borderBottom: '1px solid',
   borderColor: vars.color.font10,
 });
+
+export const labelAndDescriptionContainer = style({
+  display: 'flex',
+  gap: 4,
+  flexDirection: 'column',
+  flex: 'none',
+  order: 0,
+  flexGrow: 0,
+  maxWidth: '100%',
+});
+
 export const lineKeyText = style({
   fontWeight: 590,
   color: vars.color.font70,
   letterSpacing: '-0.12px',
-  flex: 'none',
-  order: 0,
-  flexGrow: 0,
 });
 
 export const lineValueText = style({
diff --git a/src/renderer/Generics/redesign/Link/ExternalLink.tsx b/src/renderer/Generics/redesign/Link/ExternalLink.tsx
index 299e496f0..a693c6ace 100644
--- a/src/renderer/Generics/redesign/Link/ExternalLink.tsx
+++ b/src/renderer/Generics/redesign/Link/ExternalLink.tsx
@@ -15,16 +15,20 @@ export interface ExternalLinkProps {
    * Inline the link
    */
   inline?: boolean;
+  /**
+   * Hide the external link icon
+   */
+  hideIcon?: boolean;
 }
 
-const ExternalLink = ({ url, text, inline }: ExternalLinkProps) => {
+const ExternalLink = ({ url, text, inline, hideIcon }: ExternalLinkProps) => {
   const classContainer = inline ? inlineContainer : blockContainer;
   return (
     <div className={classContainer}>
       <a className={linkText} href={url} target="_blank" rel="noreferrer">
         {text}
       </a>
-      <Icon iconId="external" />
+      {!hideIcon && <Icon iconId="external" />}
     </div>
   );
 };
diff --git a/src/renderer/Generics/redesign/Select/MultiSelect.tsx b/src/renderer/Generics/redesign/Select/MultiSelect.tsx
new file mode 100644
index 000000000..91a827e12
--- /dev/null
+++ b/src/renderer/Generics/redesign/Select/MultiSelect.tsx
@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+import ReactSelect, {
+  MenuPlacement,
+  MultiValue,
+  SingleValue,
+} from 'react-select';
+
+type SelectOption = { value: string; label: string };
+
+type Props = {
+  isDisabled: boolean;
+  options: SelectOption[];
+  value: undefined | string | string[];
+  onChange: (newValue?: string | string[]) => void;
+  isMulti: boolean;
+  menuPlacement?: string;
+};
+const MultiSelect = ({
+  isDisabled,
+  options,
+  value,
+  onChange,
+  isMulti,
+  menuPlacement,
+}: Props) => {
+  const [sSelectedOptions, setSelectedOptions] = useState<SelectOption[]>([]);
+
+  useEffect(() => {
+    // if no value is set in the prop, show the default value
+    // (ex. if no value is set in the node's config, show the node spec default value)
+    if (Array.isArray(value)) {
+      setSelectedOptions(
+        options.filter((option) => {
+          return value.includes(option.value);
+        })
+      );
+    } else {
+      setSelectedOptions(
+        options.filter((option) => {
+          return value === option.value;
+        })
+      );
+    }
+  }, [value, options]);
+
+  return (
+    <div style={{ color: 'initial' }}>
+      <ReactSelect
+        value={sSelectedOptions}
+        options={options}
+        onChange={(
+          newValue: SingleValue<SelectOption> | MultiValue<SelectOption>
+        ) => {
+          console.log('onChange newValue: ', newValue);
+          if (Array.isArray(newValue)) {
+            // return array of values
+            onChange(
+              newValue.map((selectOption) => {
+                return selectOption.value;
+              })
+            );
+          } else {
+            const singleValue = newValue as SingleValue<SelectOption>;
+            onChange(singleValue?.value ? singleValue.value : undefined);
+          }
+        }}
+        isDisabled={isDisabled}
+        isMulti={isMulti}
+        menuPlacement={menuPlacement as MenuPlacement}
+      />
+    </div>
+  );
+};
+MultiSelect.defaultProps = {
+  menuPlacement: 'bottom',
+};
+export default MultiSelect;
diff --git a/src/renderer/Generics/redesign/Typography b/src/renderer/Generics/redesign/Typography
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/renderer/Generics/redesign/Typography/Caption.tsx b/src/renderer/Generics/redesign/Typography/Caption.tsx
new file mode 100644
index 000000000..c27d3019f
--- /dev/null
+++ b/src/renderer/Generics/redesign/Typography/Caption.tsx
@@ -0,0 +1,13 @@
+import { captionTextClass } from './caption.css';
+
+export interface CaptionProps {
+  children?: React.ReactNode;
+  text?: React.ReactNode | string;
+  // todo: display block or inline?
+}
+
+const Caption = ({ text, children }: CaptionProps) => {
+  return <div className={captionTextClass}>{children ?? text}</div>;
+};
+
+export default Caption;
diff --git a/src/renderer/Generics/redesign/Typography/caption.css.ts b/src/renderer/Generics/redesign/Typography/caption.css.ts
new file mode 100644
index 000000000..0f8c934ad
--- /dev/null
+++ b/src/renderer/Generics/redesign/Typography/caption.css.ts
@@ -0,0 +1,9 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../theme.css';
+
+export const captionTextClass = style({
+  fontWeight: 400,
+  fontSize: 11,
+  lineHeight: '14px',
+  color: vars.color.font70,
+});
diff --git a/src/stories/Generic/DynamicSettings.stories.tsx b/src/stories/Generic/DynamicSettings.stories.tsx
index 5b7c5d6ab..40a1efed1 100644
--- a/src/stories/Generic/DynamicSettings.stories.tsx
+++ b/src/stories/Generic/DynamicSettings.stories.tsx
@@ -31,8 +31,6 @@ const configTranslationMap: ConfigTranslationMap = {
     uiControl: {
       type: 'filePath',
     },
-    documentation:
-      'https://besu.hyperledger.org/en/stable/Reference/CLI/CLI-Syntax/#data-path',
   },
   syncMode: {
     displayName: 'Sync mode',
@@ -52,8 +50,6 @@ const configTranslationMap: ConfigTranslationMap = {
       ],
     },
     defaultValue: 'FAST',
-    documentation:
-      'https://besu.hyperledger.org/en/stable/Concepts/Node-Types/',
   },
   http: {
     displayName: 'RPC http connections',
@@ -71,8 +67,6 @@ const configTranslationMap: ConfigTranslationMap = {
       ],
     },
     defaultValue: 'Disabled',
-    documentation:
-      'https://besu.hyperledger.org/en/stable/Reference/CLI/CLI-Syntax/#rpc-http-enabled',
   },
   webSockets: {
     displayName: 'RPC websocket connections',
@@ -89,10 +83,6 @@ const configTranslationMap: ConfigTranslationMap = {
       ],
     },
     defaultValue: 'Disabled',
-    infoDescription:
-      'Enables or disables the WebSocket JSON-RPC service. The default is false.',
-    documentation:
-      'https://besu.hyperledger.org/en/stable/Reference/CLI/CLI-Syntax/#rpc-ws-enabled',
   },
   webSocketsPort: {
     displayName: 'WebSockets RPC listening port',
@@ -101,10 +91,6 @@ const configTranslationMap: ConfigTranslationMap = {
     uiControl: {
       type: 'text',
     },
-    documentation:
-      'https://besu.hyperledger.org/en/stable/Reference/CLI/CLI-Syntax/#rpc-ws-port',
-    infoDescription:
-      'The port (TCP) on which WebSocket JSON-RPC listens. The default is 8546. You must expose ports appropriately (https://besu.hyperledger.org/en/stable/HowTo/Find-and-Connect/Configuring-Ports/).',
   },
   httpApis: {
     displayName: "Enabled HTTP API's",
@@ -173,8 +159,6 @@ const configTranslationMap: ConfigTranslationMap = {
       ],
     },
     defaultValue: ['ETH', 'NET', 'WEB3'],
-    documentation:
-      'https://besu.hyperledger.org/en/stable/Reference/CLI/CLI-Syntax/#rpc-http-api',
   },
   hostAllowList: {
     displayName: 'RPC connections accepted by node',
@@ -227,8 +211,6 @@ const configTranslationMap: ConfigTranslationMap = {
     uiControl: {
       type: 'text',
     },
-    documentation:
-      'https://besu.hyperledger.org/en/stable/HowTo/Find-and-Connect/Managing-Peers/#limit-peers',
   },
 };
 
diff --git a/src/stories/Generic/LabelSettings.stories.tsx b/src/stories/Generic/LabelSettings.stories.tsx
index 50bc3b6bc..f1464a087 100644
--- a/src/stories/Generic/LabelSettings.stories.tsx
+++ b/src/stories/Generic/LabelSettings.stories.tsx
@@ -1,6 +1,7 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
 import LabelSettings from '../../renderer/Generics/redesign/LabelSetting/LabelSettings';
+import ExternalLink from '../../renderer/Generics/redesign/Link/ExternalLink';
 import Select from '../../renderer/Generics/redesign/Select/Select';
 import { Toggle } from '../../renderer/Generics/redesign/Toggle/Toggle';
 
@@ -21,12 +22,16 @@ About.args = {
     {
       sectionTitle: 'Preferences',
       items: [
-        { label: 'Launch on startup', value: <Toggle checked={true}/> },
-        { label: 'Language', value: <Select options={[{value: 'en', label: "English"}]}/> },
+        { label: 'Launch on startup', value: <Toggle checked={true}/>, description: "NiceNode will automatically open when your computer starts up.", learnMoreLink: 'https://ethereum.org' },
+        { label: 'Language', value: <Select options={[{value: 'en', label: "English"}]}/>, learnMoreLink: 'https://nicenode.xyz' },
         {
           label: 'Website',
-          value: 'nimbus.team',
-          link: 'https://ethereum.org',
+          value: <ExternalLink url="https://ethereum.org" text='nimbus website'/>,
+          description: "this is kind of obvious, just here to test"
+        },
+        {
+          label: 'Website',
+          value: <ExternalLink url="https://ethereum.org" text='Ethereum.org'/>,
         },
       ],
     }

From fd6cbdfc276c5a51f3da8da162e5c841e638713f Mon Sep 17 00:00:00 2001
From: jgresham <johnsgresham@gmail.com>
Date: Fri, 11 Nov 2022 13:43:00 -0600
Subject: [PATCH 3/6] feat: NodeSettings modal. disabled folder input and
 select styles

---
 src/renderer/Footer/DynamicNodeConfig.tsx     |   1 +
 .../DynamicSettings/DynamicSettings.tsx       |  67 +----
 .../redesign/DynamicSettings/Setting.tsx      |  12 +-
 .../convertConfigToLabelSettings.tsx          |  20 +-
 .../Generics/redesign/Input/FolderInput.tsx   |   7 +-
 .../Generics/redesign/Message/Message.tsx     |   4 +-
 .../Generics/redesign/Message/message.css.ts  |   1 -
 .../Generics/redesign/Select/Select.tsx       |   5 +-
 .../NodeSettingsModal/NodeSettings.tsx        |  59 +++++
 .../NodeSettingsModal/NodeSettingsWrapper.tsx |  93 +++++++
 .../Presentational/NodeSettings.stories.tsx   | 247 ++++++++++++++++++
 11 files changed, 444 insertions(+), 72 deletions(-)
 create mode 100644 src/renderer/Presentational/NodeSettingsModal/NodeSettings.tsx
 create mode 100644 src/renderer/Presentational/NodeSettingsModal/NodeSettingsWrapper.tsx
 create mode 100644 src/stories/Presentational/NodeSettings.stories.tsx

diff --git a/src/renderer/Footer/DynamicNodeConfig.tsx b/src/renderer/Footer/DynamicNodeConfig.tsx
index 3e618c500..0237eb025 100644
--- a/src/renderer/Footer/DynamicNodeConfig.tsx
+++ b/src/renderer/Footer/DynamicNodeConfig.tsx
@@ -76,6 +76,7 @@ const DynamicNodeConfig = () => {
       return 0;
     });
 
+    console.log('setting sCategoryConfigs ', arr);
     setCategoryConfigs(arr);
   }, [sConfigTranslationMap]);
 
diff --git a/src/renderer/Generics/redesign/DynamicSettings/DynamicSettings.tsx b/src/renderer/Generics/redesign/DynamicSettings/DynamicSettings.tsx
index 228c319a3..34c28c0b5 100644
--- a/src/renderer/Generics/redesign/DynamicSettings/DynamicSettings.tsx
+++ b/src/renderer/Generics/redesign/DynamicSettings/DynamicSettings.tsx
@@ -1,72 +1,27 @@
-import { useEffect, useState } from 'react';
 import {
   ConfigValue,
   ConfigTranslationMap,
-  ConfigTranslation,
-  ConfigTranslationControl,
 } from '../../../../common/nodeConfig';
+// eslint-disable-next-line import/no-cycle
 import convertConfigToLabelSettings from './convertConfigToLabelSettings';
-import Select from './DynamicControls/Select';
-import TextArea from './DynamicControls/TextArea';
-import Setting from './Setting';
-// import Warning from '../Warning';
-// import { InfoModal } from '../InfoIconButton';
-// import ExternalLink from '../Generics/ExternalLink';
 
 export type CategoryConfig = {
   category: string;
   configTranslationMap: ConfigTranslationMap;
 };
-// isDisabled? selectedNodeId (for dialog)
 export type DynamicSettingsProps = {
-  configTranslationMap: ConfigTranslationMap;
-  configValuesMap: any;
+  categoryConfigs?: CategoryConfig[];
+  configValuesMap?: unknown;
+  isDisabled?: boolean;
   onChange?: (configKey: string, newValue: ConfigValue) => void;
 };
-// configTranslationMap = selectedNode.spec.configTranslation;
 const DynamicSettings = ({
-  configTranslationMap,
+  categoryConfigs,
   configValuesMap,
+  isDisabled,
   onChange,
 }: DynamicSettingsProps) => {
-  const [sCategoryConfigs, setCategoryConfigs] = useState<CategoryConfig[]>();
-
-  useEffect(() => {
-    // category to configs
-    const categoryMap: Record<string, ConfigTranslationMap> = {};
-    if (configTranslationMap) {
-      Object.keys(configTranslationMap).forEach((configKey) => {
-        const configTranslation: ConfigTranslation =
-          configTranslationMap[configKey];
-        const category = configTranslation.category ?? 'Other';
-        if (!categoryMap[category]) {
-          categoryMap[category] = {};
-        }
-        categoryMap[category][configKey] = configTranslation;
-      });
-    }
-    const arr = Object.keys(categoryMap).map((category) => {
-      return {
-        category,
-        configTranslationMap: categoryMap[category],
-      };
-    });
-
-    // Put 'Other' category at the bottom
-    arr.sort((x, y) => {
-      if (x.category === 'Other') {
-        return 1;
-      }
-      if (y.category === 'Other') {
-        return -1;
-      }
-      return 0;
-    });
-
-    setCategoryConfigs(arr);
-  }, [configTranslationMap]);
-
-  if (!configTranslationMap) {
+  if (!categoryConfigs) {
     return <>No config</>;
   }
 
@@ -82,7 +37,13 @@ const DynamicSettings = ({
   };
 
   return (
-    <>{convertConfigToLabelSettings(sCategoryConfigs ?? [], configValuesMap)}</>
+    <>
+      {convertConfigToLabelSettings({
+        categoryConfigs: categoryConfigs ?? [],
+        configValuesMap,
+        isDisabled,
+      })}
+    </>
   );
 };
 export default DynamicSettings;
diff --git a/src/renderer/Generics/redesign/DynamicSettings/Setting.tsx b/src/renderer/Generics/redesign/DynamicSettings/Setting.tsx
index b82efe583..86da606e0 100644
--- a/src/renderer/Generics/redesign/DynamicSettings/Setting.tsx
+++ b/src/renderer/Generics/redesign/DynamicSettings/Setting.tsx
@@ -20,12 +20,14 @@ export type SettingProps = {
   configTranslation: ConfigTranslation;
   configKey: ConfigKey;
   currentValue: string | string[];
+  isDisabled?: boolean;
   onChange?: (configKey: string, newValue: ConfigValue) => void;
 };
 const Setting = ({
   configTranslation,
   configKey,
   currentValue,
+  isDisabled,
   onChange,
 }: SettingProps) => {
   const onNodeConfigChange = async (newValue: ConfigValue) => {
@@ -47,6 +49,7 @@ const Setting = ({
       {configTranslationControl?.type === 'filePath' && (
         <FolderInput
           placeholder={currentValue as string}
+          disabled={isDisabled}
           onClickChange={() => {
             console.log('onclick dir');
             // todo: fix
@@ -73,8 +76,7 @@ const Setting = ({
         <Input
           value={currentValue as string}
           onChange={(newValue: string) => onNodeConfigChange(newValue)}
-          // isDisabled={sIsConfigDisabled}
-          disabled={false}
+          disabled={isDisabled}
         />
       )}
       {configTranslationControl?.type === 'select/single' && (
@@ -87,8 +89,7 @@ const Setting = ({
               return { value, label: value };
             }
           )}
-          // isDisabled={sIsConfigDisabled}
-          isDisabled={false}
+          isDisabled={isDisabled}
         />
       )}
       {configTranslationControl?.type === 'select/multiple' && (
@@ -101,8 +102,7 @@ const Setting = ({
               return { value, label: value };
             }
           )}
-          // isDisabled={sIsConfigDisabled}
-          isDisabled={false}
+          isDisabled={isDisabled ?? false}
           isMulti={configTranslationControl?.type === 'select/multiple'}
         />
       )}
diff --git a/src/renderer/Generics/redesign/DynamicSettings/convertConfigToLabelSettings.tsx b/src/renderer/Generics/redesign/DynamicSettings/convertConfigToLabelSettings.tsx
index 34be108b3..7e983b3b6 100644
--- a/src/renderer/Generics/redesign/DynamicSettings/convertConfigToLabelSettings.tsx
+++ b/src/renderer/Generics/redesign/DynamicSettings/convertConfigToLabelSettings.tsx
@@ -1,8 +1,6 @@
 import { ConfigTranslation } from '../../../../common/nodeConfig';
-import LineLabelSettings, {
-  LineLabelSettingsProps,
-} from '../LabelSetting/LabelSettings';
-import LabelSettingsSection, {
+import LineLabelSettings from '../LabelSetting/LabelSettings';
+import {
   LabelSettingsItem,
   LabelSettingsSectionProps,
 } from '../LabelSetting/LabelValuesSection';
@@ -10,10 +8,15 @@ import LabelSettingsSection, {
 import { CategoryConfig } from './DynamicSettings';
 import Setting from './Setting';
 
-const convertConfigToLabelSettings = (
-  categoryConfigs: CategoryConfig[],
-  configValuesMap: any
-): React.ReactNode => {
+const convertConfigToLabelSettings = ({
+  categoryConfigs,
+  configValuesMap,
+  isDisabled,
+}: {
+  categoryConfigs: CategoryConfig[];
+  configValuesMap: any;
+  isDisabled?: boolean;
+}): React.ReactNode => {
   // let lineLabelSettingsProps: LineLabelSettingsProps = {
   //   items: [],
   // };
@@ -54,6 +57,7 @@ const convertConfigToLabelSettings = (
                 configKey={configKey}
                 configTranslation={configTranslation}
                 currentValue={currentValue}
+                isDisabled={isDisabled}
               />
             ),
           };
diff --git a/src/renderer/Generics/redesign/Input/FolderInput.tsx b/src/renderer/Generics/redesign/Input/FolderInput.tsx
index 52e0fdfd5..9713c1911 100644
--- a/src/renderer/Generics/redesign/Input/FolderInput.tsx
+++ b/src/renderer/Generics/redesign/Input/FolderInput.tsx
@@ -16,6 +16,10 @@ export interface FolderInputProps {
    *  is located (mounted).
    */
   freeStorageSpaceGBs?: number;
+  /**
+   *  Is this input field disabled?
+   */
+  disabled?: boolean;
   /**
    *  Provide to allow the user to change the folder location
    */
@@ -25,6 +29,7 @@ export interface FolderInputProps {
 const FolderInput = ({
   placeholder,
   freeStorageSpaceGBs,
+  disabled,
   onClickChange,
 }: FolderInputProps) => {
   return (
@@ -36,7 +41,7 @@ const FolderInput = ({
         <Button
           size="small"
           label="Change..."
-          disabled={!onClickChange}
+          disabled={!onClickChange || disabled}
           onClick={onClickChange}
         />
       </div>
diff --git a/src/renderer/Generics/redesign/Message/Message.tsx b/src/renderer/Generics/redesign/Message/Message.tsx
index 655d349f8..ee57d2ccb 100644
--- a/src/renderer/Generics/redesign/Message/Message.tsx
+++ b/src/renderer/Generics/redesign/Message/Message.tsx
@@ -43,7 +43,7 @@ export interface MessageProps {
   /**
    * Message description
    */
-  description: string;
+  description?: string;
   /**
    * onClick event
    */
@@ -63,7 +63,7 @@ export const Message = ({
       </div>
       <div className={textContainer}>
         <div className={messageTitle}>{title}</div>
-        <div className={messageDescription}>{description}</div>
+        {description && <div className={messageDescription}>{description}</div>}
       </div>
       {onClick && (
         <div className={closeContainer}>
diff --git a/src/renderer/Generics/redesign/Message/message.css.ts b/src/renderer/Generics/redesign/Message/message.css.ts
index d75d27c77..b2dbce047 100644
--- a/src/renderer/Generics/redesign/Message/message.css.ts
+++ b/src/renderer/Generics/redesign/Message/message.css.ts
@@ -11,7 +11,6 @@ export const container = style({
   borderRadius: '10px',
   padding: 24,
   position: 'relative',
-  marginBottom: 32,
   selectors: {
     [`&.info`]: {
       backgroundColor: vars.components.messageInfoBackground,
diff --git a/src/renderer/Generics/redesign/Select/Select.tsx b/src/renderer/Generics/redesign/Select/Select.tsx
index 69dfcc51e..e352f8993 100644
--- a/src/renderer/Generics/redesign/Select/Select.tsx
+++ b/src/renderer/Generics/redesign/Select/Select.tsx
@@ -80,7 +80,10 @@ const Select = ({
         styles={{
           control: (base) => ({
             ...base,
-            backgroundColor: 'inherit',
+            backgroundColor: isDisabled
+              ? vars.color.backgroundDisabled
+              : 'inherit',
+            color: isDisabled ? vars.color.fontDisabled : 'inherit',
             borderColor: vars.color.border,
             boxShadow: 'none',
             ':hover': {
diff --git a/src/renderer/Presentational/NodeSettingsModal/NodeSettings.tsx b/src/renderer/Presentational/NodeSettingsModal/NodeSettings.tsx
new file mode 100644
index 000000000..145b6ccf2
--- /dev/null
+++ b/src/renderer/Presentational/NodeSettingsModal/NodeSettings.tsx
@@ -0,0 +1,59 @@
+import { useTranslation } from 'react-i18next';
+
+import { Modal } from '../../Generics/redesign/Modal/Modal';
+import DynamicSettings, {
+  CategoryConfig,
+} from '../../Generics/redesign/DynamicSettings/DynamicSettings';
+import { ConfigValuesMap } from '../../../common/nodeConfig';
+import { Message } from '../../Generics/redesign/Message/Message';
+
+export type ThemeSetting = 'light' | 'dark' | 'auto';
+export type Preference = 'theme' | 'isOpenOnStartup';
+export interface NodeSettingsProps {
+  isOpen: boolean;
+  onClose: () => void;
+  categoryConfigs?: CategoryConfig[];
+  configValuesMap?: ConfigValuesMap;
+  isDisabled?: boolean;
+  onChange?: () => void;
+}
+
+const NodeSettings = ({
+  isOpen,
+  onClose,
+  categoryConfigs,
+  configValuesMap,
+  isDisabled,
+  onChange,
+}: NodeSettingsProps) => {
+  const { t } = useTranslation('genericComponents');
+
+  const onChangeSetting = () => {
+    if (onChange) {
+      onChange();
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      title={t('Node settings')}
+      onClickCloseButton={onClose}
+    >
+      {isDisabled && (
+        <Message
+          type="warning"
+          title="The node must be stopped to make changes"
+        />
+      )}
+      {/* todo: tab1 */}
+      <DynamicSettings
+        categoryConfigs={categoryConfigs}
+        configValuesMap={configValuesMap}
+        isDisabled={isDisabled}
+      />
+    </Modal>
+  );
+};
+
+export default NodeSettings;
diff --git a/src/renderer/Presentational/NodeSettingsModal/NodeSettingsWrapper.tsx b/src/renderer/Presentational/NodeSettingsModal/NodeSettingsWrapper.tsx
new file mode 100644
index 000000000..f016e43c3
--- /dev/null
+++ b/src/renderer/Presentational/NodeSettingsModal/NodeSettingsWrapper.tsx
@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+import {
+  ConfigTranslation,
+  ConfigTranslationMap,
+} from '../../../common/nodeConfig';
+import { CategoryConfig } from '../../Generics/redesign/DynamicSettings/DynamicSettings';
+import { useAppSelector } from '../../state/hooks';
+import { selectSelectedNode } from '../../state/node';
+import NodeSettings from './NodeSettings';
+
+export interface PreferencesWrapperProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const PreferencesWrapper = ({ isOpen, onClose }: PreferencesWrapperProps) => {
+  const [sIsConfigDisabled, setIsConfigDisabled] = useState<boolean>(true);
+  const [sConfigTranslationMap, setConfigTranslationMap] =
+    useState<ConfigTranslationMap>();
+  const [sCategoryConfigs, setCategoryConfigs] = useState<CategoryConfig[]>();
+
+  const selectedNode = useAppSelector(selectSelectedNode);
+
+  useEffect(() => {
+    let isDisabled = true;
+    let configTranslationMap;
+    console.log(selectedNode);
+    if (selectedNode) {
+      isDisabled = selectedNode.status === 'running';
+      configTranslationMap = selectedNode.spec.configTranslation;
+    }
+    console.log('NodeConfig isDisabled? ', isDisabled);
+    setIsConfigDisabled(isDisabled);
+    console.log(
+      'DynamicSettings configValuesMap',
+      selectedNode?.config.configValuesMap
+    );
+    console.log('DynamicSettings configTranslationMap', configTranslationMap);
+    setConfigTranslationMap(configTranslationMap);
+  }, [selectedNode]);
+  // configTranslationMap = selectedNode.spec.configTranslation;
+
+  useEffect(() => {
+    // category to configs
+    const categoryMap: Record<string, ConfigTranslationMap> = {};
+    if (sConfigTranslationMap) {
+      Object.keys(sConfigTranslationMap).forEach((configKey) => {
+        const configTranslation: ConfigTranslation =
+          sConfigTranslationMap[configKey];
+        const category = configTranslation.category ?? 'Other';
+        if (!categoryMap[category]) {
+          categoryMap[category] = {};
+        }
+        categoryMap[category][configKey] = configTranslation;
+      });
+    }
+    const arr = Object.keys(categoryMap).map((category) => {
+      return {
+        category,
+        configTranslationMap: categoryMap[category],
+      };
+    });
+
+    // Put 'Other' category at the bottom
+    arr.sort((x, y) => {
+      if (x.category === 'Other') {
+        return 1;
+      }
+      if (y.category === 'Other') {
+        return -1;
+      }
+      return 0;
+    });
+
+    setCategoryConfigs(arr);
+  }, [sConfigTranslationMap]);
+
+  return (
+    <NodeSettings
+      isOpen={isOpen}
+      onClose={onClose}
+      categoryConfigs={sCategoryConfigs}
+      configValuesMap={selectedNode?.config.configValuesMap}
+      isDisabled={sIsConfigDisabled}
+      // themeSetting={sThemeSetting}
+      // isOpenOnStartup={sIsOpenOnStartup}
+      // version={sNiceNodeVersion}
+      // onChange={onChangePreference}
+    />
+  );
+};
+
+export default PreferencesWrapper;
diff --git a/src/stories/Presentational/NodeSettings.stories.tsx b/src/stories/Presentational/NodeSettings.stories.tsx
new file mode 100644
index 000000000..e8614651e
--- /dev/null
+++ b/src/stories/Presentational/NodeSettings.stories.tsx
@@ -0,0 +1,247 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ConfigValuesMap } from '../../common/nodeConfig';
+
+import NodeSettings from '../../renderer/Presentational/NodeSettingsModal/NodeSettings';
+
+export default {
+  title: 'Presentational/NodeSettings',
+  component: NodeSettings,
+  argTypes: {},
+} as ComponentMeta<typeof NodeSettings>;
+
+const Template: ComponentStory<typeof NodeSettings> = (args) => (
+  <NodeSettings {...args} />
+);
+
+const configValuesMap: ConfigValuesMap = {
+  dataDir:
+    '/Users/johns/Library/Application Support/NiceNode/nodes/besu-1667947772',
+  hostAllowlist: 'localhost,host.docker.internal',
+  http: 'Enabled',
+  httpCorsDomains: '"http://localhost"',
+  webSockets: 'Disabled',
+};
+
+
+export const Primary = Template.bind({});
+Primary.args = {
+  isOpen: true,
+  onClose: () => alert('close'),
+  configValuesMap,
+  categoryConfigs: [
+    {
+      category: "Storage",
+      configTranslationMap: {
+        dataDir: {
+          displayName: "Node data is stored in this folder",
+          category: "Storage",
+          cliConfigPrefix: "--data-path=",
+          uiControl: {
+            type: "filePath"
+          },
+          documentation: "https://besu.hyperledger.org/en/stable/Reference/CLI/CLI-Syntax/#data-path"
+        },
+        dataStorageFormat: {
+          displayName: "The data storage format to use",
+          category: "Storage",
+          cliConfigPrefix: "--data-storage-format=",
+          uiControl: {
+            type: "select/single",
+            controlTranslations: [
+              {
+                value: "FOREST",
+                config: "FOREST"
+              },
+              {
+                value: "BONSAI",
+                config: "BONSAI"
+              }
+            ]
+          },
+          defaultValue: "FOREST",
+          documentation: "https://besu.hyperledger.org/en/stable/Reference/CLI/CLI-Syntax/#data-storage-format"
+        }
+      }
+    },
+    {
+      category: "Syncronization",
+      configTranslationMap: {
+        syncMode: {
+          displayName: "Node synchronization mode",
+          category: "Syncronization",
+          cliConfigPrefix: "--sync-mode=",
+          uiControl: {
+            type: "select/single",
+            controlTranslations: [
+              {
+                value: "FAST",
+                config: "FAST"
+              },
+              {
+                value: "FULL",
+                config: "FULL"
+              }
+            ]
+          },
+          defaultValue: "FAST",
+          documentation: "https://besu.hyperledger.org/en/stable/Concepts/Node-Types/"
+        }
+      }
+    },
+    {
+      category: "RPC APIs",
+      configTranslationMap: {
+        http: {
+          displayName: "rpc http connections (*NiceNode requires http connections)",
+          category: "RPC APIs",
+          uiControl: {
+            type: "select/single",
+            controlTranslations: [
+              {
+                value: "Enabled",
+                config: "--rpc-http-enabled"
+              },
+              {
+                value: "Disabled"
+              }
+            ]
+          },
+          defaultValue: "Disabled",
+          documentation: "https://besu.hyperledger.org/en/stable/Reference/CLI/CLI-Syntax/#rpc-http-enabled"
+        },
+        httpApis: {
+          displayName: "Enabled certain HTTP APIs",
+          category: "RPC APIs",
+          cliConfigPrefix: "--rpc-http-api=",
+          valuesJoinStr: ",",
+          uiControl: {
+            type: "select/multiple",
+            controlTranslations: [
+              {
+                value: "ADMIN",
+                config: "ADMIN"
+              },
+              {
+                value: "CLIQUE",
+                config: "CLIQUE"
+              },
+              {
+                value: "DEBUG",
+                config: "DEBUG"
+              },
+              {
+                value: "EEA",
+                config: "EEA"
+              },
+              {
+                value: "ETH",
+                config: "ETH"
+              },
+              {
+                value: "IBFT",
+                config: "IBFT"
+              },
+              {
+                value: "MINER",
+                config: "MINER"
+              },
+              {
+                value: "NET",
+                config: "NET"
+              },
+              {
+                value: "PERM",
+                config: "PERM"
+              },
+              {
+                value: "PLUGINS",
+                config: "PLUGINS"
+              },
+              {
+                value: "QBFT",
+                config: "QBFT"
+              },
+              {
+                value: "TRACE",
+                config: "TRACE"
+              },
+              {
+                value: "TXPOOL",
+                config: "TXPOOL"
+              },
+              {
+                value: "WEB3",
+                config: "WEB3"
+              }
+            ]
+          },
+          defaultValue: [
+            "ETH",
+            "NET",
+            "WEB3"
+          ],
+          documentation: "https://besu.hyperledger.org/en/stable/Reference/CLI/CLI-Syntax/#rpc-http-api"
+        },
+        hostAllowList: {
+          displayName: "A comma-separated list of hostnames to access the JSON-RPC API and pull Besu metrics. By default, Besu accepts requests from localhost and 127.0.0.1.",
+          category: "RPC APIs",
+          cliConfigPrefix: "--host-allowlist=",
+          uiControl: {
+            type: "text"
+          },
+          infoDescription: "Example value: medomain.com,meotherdomain.com",
+          defaultValue: "localhost,127.0.0.1"
+        }
+      }
+    },
+    {
+      category: "Other",
+      configTranslationMap: {
+        webSockets: {
+          displayName: "Enables or disables the WebSocket JSON-RPC service. The default is false.",
+          uiControl: {
+            type: "select/single",
+            controlTranslations: [
+              {
+                value: "Enabled",
+                config: "--rpc-ws-enabled=true"
+              },
+              {
+                value: "Disabled"
+              }
+            ]
+          },
+          defaultValue: "Disabled",
+          documentation: "https://besu.hyperledger.org/en/stable/Reference/CLI/CLI-Syntax/#rpc-ws-enabled"
+        },
+        webSocketsPort: {
+          displayName: "The port (TCP) on which WebSocket JSON-RPC listens.",
+          cliConfigPrefix: "--rpc-ws-port=",
+          defaultValue: "8546",
+          uiControl: {
+            type: "text"
+          },
+          documentation: "https://besu.hyperledger.org/en/stable/Reference/CLI/CLI-Syntax/#rpc-ws-port",
+          infoDescription: "The port (TCP) on which WebSocket JSON-RPC listens. The default is 8546. You must expose ports appropriately (https://besu.hyperledger.org/en/stable/HowTo/Find-and-Connect/Configuring-Ports/)."
+        },
+        httpCorsDomains: {
+          displayName: "Change where the node accepts http connections (use comma separated urls wrapped in double quotes)",
+          cliConfigPrefix: "--rpc-http-cors-origins=",
+          valuesJoinStr: ",",
+          uiControl: {
+            type: "text"
+          }
+        },
+        maxPeerCount: {
+          displayName: "Max Peer Count (set to low number to use less bandwidth)",
+          cliConfigPrefix: "--max-peers=",
+          defaultValue: "25",
+          uiControl: {
+            type: "text"
+          },
+          documentation: "https://besu.hyperledger.org/en/stable/HowTo/Find-and-Connect/Managing-Peers/#limit-peers"
+        }
+      }
+    }
+  ]
+};

From d7abace23dba25bc088ad55cb2e67481b50969b8 Mon Sep 17 00:00:00 2001
From: jgresham <johnsgresham@gmail.com>
Date: Fri, 11 Nov 2022 21:42:46 -0600
Subject: [PATCH 4/6] chore: disable eslint detect cycle

---
 .eslintrc.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.eslintrc.js b/.eslintrc.js
index 3db637c39..63d3caa95 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,6 +1,8 @@
 module.exports = {
   extends: 'erb',
   rules: {
+    // Javascript can handle cycles in dependencies
+    'import/no-cycle': 'off',
     // A temporary hack related to IDE not resolving correct package.json
     'import/no-extraneous-dependencies': 'off',
     'import/no-unresolved': 'error',

From 7ec64fece432a20648bf0372a6312cce19ea0178 Mon Sep 17 00:00:00 2001
From: jgresham <johnsgresham@gmail.com>
Date: Fri, 11 Nov 2022 22:25:24 -0600
Subject: [PATCH 5/6] feat: NodeSettings modal changes node settings. modal css
 fixed, esc key closes.

---
 src/common/nodeConfig.ts                      |  11 +-
 src/renderer/DynamicControls/Select.tsx       |  77 ----
 src/renderer/DynamicControls/TextArea.tsx     |  54 ---
 src/renderer/Footer/DynamicNodeConfig.tsx     | 235 ----------
 src/renderer/Footer/DynamicSettings.tsx       |  83 ----
 src/renderer/Footer/Footer.tsx                |  24 --
 .../DynamicSettings/DynamicSettings.tsx       |  45 +-
 .../redesign/DynamicSettings/Setting.tsx      |  56 +--
 .../convertConfigToLabelSettings.tsx          |  97 +++--
 .../Generics/redesign/Header/Header.tsx       |   9 +
 .../redesign/HeaderMetrics/HeaderMetrics.tsx  |   8 +-
 .../Generics/redesign/Input/Input.tsx         |   6 +-
 .../redesign/LabelSetting/LabelSettings.tsx   |   6 +-
 .../LabelSetting/LabelValuesSection.tsx       |   2 +-
 .../Generics/redesign/Modal/Modal.tsx         |  35 +-
 .../Generics/redesign/Modal/modal.css.ts      |  16 +-
 .../NodeSettingsModal/NodeSettings.tsx        |  16 +-
 .../NodeSettingsModal/NodeSettingsWrapper.tsx |  79 +++-
 .../Generic/DynamicSettings.stories.tsx       | 400 +++++++++---------
 .../Presentational/NodeSettings.stories.tsx   |   2 +-
 tsconfig.json                                 |   2 +-
 21 files changed, 452 insertions(+), 811 deletions(-)
 delete mode 100644 src/renderer/DynamicControls/Select.tsx
 delete mode 100644 src/renderer/DynamicControls/TextArea.tsx
 delete mode 100644 src/renderer/Footer/DynamicNodeConfig.tsx
 delete mode 100644 src/renderer/Footer/DynamicSettings.tsx

diff --git a/src/common/nodeConfig.ts b/src/common/nodeConfig.ts
index a421d4601..46e09203e 100644
--- a/src/common/nodeConfig.ts
+++ b/src/common/nodeConfig.ts
@@ -1,15 +1,16 @@
-type FilePathControl = {
+export const FilePathControlType = 'filePath';
+export type FilePathControl = {
   type: 'filePath';
 };
-type TextControl = {
+export type TextControl = {
   type: 'text';
 };
-type SelectTranslation = { value: string; config?: string };
-type SelectControl = {
+export type SelectTranslation = { value: string; config?: string };
+export type SelectControl = {
   type: 'select/single';
   controlTranslations: SelectTranslation[];
 };
-type MultiSelectControl = {
+export type MultiSelectControl = {
   type: 'select/multiple';
   controlTranslations: SelectTranslation[];
 };
diff --git a/src/renderer/DynamicControls/Select.tsx b/src/renderer/DynamicControls/Select.tsx
deleted file mode 100644
index 481c5f181..000000000
--- a/src/renderer/DynamicControls/Select.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { useEffect, useState } from 'react';
-import ReactSelect, {
-  MenuPlacement,
-  MultiValue,
-  SingleValue,
-} from 'react-select';
-
-type SelectOption = { value: string; label: string };
-
-type Props = {
-  isDisabled: boolean;
-  options: SelectOption[];
-  value: undefined | string | string[];
-  onChange: (newValue?: string | string[]) => void;
-  isMulti: boolean;
-  menuPlacement?: string;
-};
-const Select = ({
-  isDisabled,
-  options,
-  value,
-  onChange,
-  isMulti,
-  menuPlacement,
-}: Props) => {
-  const [sSelectedOptions, setSelectedOptions] = useState<SelectOption[]>([]);
-
-  useEffect(() => {
-    // if no value is set in the prop, show the default value
-    // (ex. if no value is set in the node's config, show the node spec default value)
-    if (Array.isArray(value)) {
-      setSelectedOptions(
-        options.filter((option) => {
-          return value.includes(option.value);
-        })
-      );
-    } else {
-      setSelectedOptions(
-        options.filter((option) => {
-          return value === option.value;
-        })
-      );
-    }
-  }, [value, options]);
-
-  return (
-    <div style={{ color: 'initial' }}>
-      <ReactSelect
-        value={sSelectedOptions}
-        options={options}
-        onChange={(
-          newValue: SingleValue<SelectOption> | MultiValue<SelectOption>
-        ) => {
-          console.log('onChange newValue: ', newValue);
-          if (Array.isArray(newValue)) {
-            // return array of values
-            onChange(
-              newValue.map((selectOption) => {
-                return selectOption.value;
-              })
-            );
-          } else {
-            const singleValue = newValue as SingleValue<SelectOption>;
-            onChange(singleValue?.value ? singleValue.value : undefined);
-          }
-        }}
-        isDisabled={isDisabled}
-        isMulti={isMulti}
-        menuPlacement={menuPlacement as MenuPlacement}
-      />
-    </div>
-  );
-};
-Select.defaultProps = {
-  menuPlacement: 'bottom',
-};
-export default Select;
diff --git a/src/renderer/DynamicControls/TextArea.tsx b/src/renderer/DynamicControls/TextArea.tsx
deleted file mode 100644
index e8925b89e..000000000
--- a/src/renderer/DynamicControls/TextArea.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useEffect, useState } from 'react';
-
-type Props = {
-  isDisabled: boolean;
-  value: string | undefined;
-  onChange: (newValue: string) => void;
-};
-const TextArea = ({ isDisabled, value, onChange }: Props) => {
-  const [sText, setText] = useState<string>();
-
-  useEffect(() => {
-    setText(value);
-  }, [value]);
-
-  return (
-    <>
-      <form
-        onSubmit={(e) => {
-          e.preventDefault();
-          onChange(sText ?? '');
-        }}
-      >
-        {/* <label>
-          Essay: */}
-        <textarea
-          style={{
-            minWidth: 400,
-            minHeight: 30,
-          }}
-          value={sText}
-          onChange={(e) => setText(e.target.value)}
-          disabled={isDisabled}
-        />
-        {/* </label> */}
-        <input type="submit" value="Submit" disabled={isDisabled} />
-      </form>
-
-      {/* <select
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        disabled={isDisabled}
-      >
-        {options.map((option) => {
-          return (
-            <option key={option.value} value={option.value}>
-              {option}
-            </option>
-          );
-        })}
-      </select> */}
-    </>
-  );
-};
-export default TextArea;
diff --git a/src/renderer/Footer/DynamicNodeConfig.tsx b/src/renderer/Footer/DynamicNodeConfig.tsx
deleted file mode 100644
index 0237eb025..000000000
--- a/src/renderer/Footer/DynamicNodeConfig.tsx
+++ /dev/null
@@ -1,235 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { useAppSelector } from '../state/hooks';
-import { selectSelectedNode } from '../state/node';
-import {
-  ConfigValue,
-  ConfigTranslationMap,
-  ConfigTranslation,
-  ConfigTranslationControl,
-} from '../../common/nodeConfig';
-import electron from '../electronGlobal';
-import Select from '../DynamicControls/Select';
-import TextArea from '../DynamicControls/TextArea';
-import Warning from '../Warning';
-import { InfoModal } from '../InfoIconButton';
-import ExternalLink from '../Generics/ExternalLink';
-
-type CategoryConfig = {
-  category: string;
-  configTranslationMap: ConfigTranslationMap;
-};
-const DynamicNodeConfig = () => {
-  const selectedNode = useAppSelector(selectSelectedNode);
-  const [sIsConfigDisabled, setIsConfigDisabled] = useState<boolean>(true);
-  const [sConfigTranslationMap, setConfigTranslationMap] =
-    useState<ConfigTranslationMap>();
-  const [sCategoryConfigs, setCategoryConfigs] = useState<CategoryConfig[]>();
-
-  useEffect(() => {
-    let isDisabled = true;
-    let configTranslationMap;
-    console.log(selectedNode);
-    if (selectedNode) {
-      isDisabled = selectedNode.status === 'running';
-      configTranslationMap = selectedNode.spec.configTranslation;
-    }
-    console.log('NodeConfig isDisabled? ', isDisabled);
-    setIsConfigDisabled(isDisabled);
-    console.log(
-      'DynamicSettings configValuesMap',
-      selectedNode?.config.configValuesMap
-    );
-    console.log('DynamicSettings configTranslationMap', configTranslationMap);
-    setConfigTranslationMap(configTranslationMap);
-  }, [selectedNode]);
-
-  useEffect(() => {
-    // category to configs
-    const categoryMap: Record<string, ConfigTranslationMap> = {};
-    if (sConfigTranslationMap) {
-      Object.keys(sConfigTranslationMap).forEach((configKey) => {
-        const configTranslation: ConfigTranslation =
-          sConfigTranslationMap[configKey];
-        const category = configTranslation.category ?? 'Other';
-        if (!categoryMap[category]) {
-          categoryMap[category] = {};
-        }
-        categoryMap[category][configKey] = configTranslation;
-      });
-    }
-    const arr = Object.keys(categoryMap).map((category) => {
-      return {
-        category,
-        configTranslationMap: categoryMap[category],
-      };
-    });
-
-    // Put 'Other' category at the bottom
-    arr.sort((x, y) => {
-      if (x.category === 'Other') {
-        return 1;
-      }
-      if (y.category === 'Other') {
-        return -1;
-      }
-      return 0;
-    });
-
-    console.log('setting sCategoryConfigs ', arr);
-    setCategoryConfigs(arr);
-  }, [sConfigTranslationMap]);
-
-  if (!selectedNode) {
-    return <>No node selected</>;
-  }
-
-  const onNodeConfigChange = async (
-    configKey: string,
-    newValue: ConfigValue
-  ) => {
-    // updateNode
-    console.log('updating node with newValue: ', newValue);
-    const { configValuesMap } = selectedNode.config;
-    const newConfig = {
-      ...selectedNode.config,
-      configValuesMap: {
-        ...configValuesMap,
-        [configKey]: newValue,
-      },
-    };
-    // console.log('updating node with newConfig: ', newConfig);
-    await electron.updateNode(selectedNode.id, {
-      config: newConfig,
-    });
-    // console.log('updated node!!!: ', updateNode);
-    // todo: show user a success notification
-  };
-
-  return (
-    <>
-      {sIsConfigDisabled && (
-        <Warning>
-          <h3>The node must be stopped to make configuration changes.</h3>
-        </Warning>
-      )}
-      {sCategoryConfigs && (
-        <>
-          {sCategoryConfigs.map((categoryConfig) => {
-            const { configTranslationMap, category } = categoryConfig;
-            return (
-              <div key={category}>
-                <h2 style={{ marginBlockEnd: 0 }}>{category}</h2>
-                {configTranslationMap ? (
-                  <>
-                    {Object.keys(configTranslationMap).map((configKey) => {
-                      const configTranslation: ConfigTranslation =
-                        configTranslationMap[configKey];
-
-                      const configTranslationControl: ConfigTranslationControl =
-                        configTranslation.uiControl;
-                      let currentValue: string | string[] =
-                        selectedNode.config?.configValuesMap?.[configKey];
-                      if (currentValue === undefined) {
-                        if (
-                          configTranslation.niceNodeDefaultValue !== undefined
-                        ) {
-                          currentValue = configTranslation.niceNodeDefaultValue;
-                        } else if (
-                          configTranslation.defaultValue !== undefined
-                        ) {
-                          currentValue = configTranslation.defaultValue;
-                        }
-                        // todo for mutli select?
-                      }
-                      // console.log(
-                      //   'rendering config: ',
-                      //   configTranslation,
-                      //   currentValue
-                      // );
-                      return (
-                        <div key={configKey} style={{ marginBottom: 20 }}>
-                          <div>
-                            <span>{configTranslation.displayName}</span>
-                            {(configTranslation.infoDescription ||
-                              configTranslation.documentation) && (
-                              <InfoModal title={configTranslation.displayName}>
-                                {configTranslation.infoDescription}
-                                {configTranslation.defaultValue && (
-                                  <p>
-                                    Default value:{' '}
-                                    {configTranslation.defaultValue}
-                                  </p>
-                                )}
-                                {configTranslation.documentation && (
-                                  <ExternalLink
-                                    title="Documentation Link"
-                                    url={configTranslation.documentation}
-                                  />
-                                )}
-                              </InfoModal>
-                            )}
-                          </div>
-                          {configTranslationControl?.type === 'filePath' && (
-                            <>
-                              {`Current folder: ${currentValue}`}
-                              <button
-                                type="button"
-                                onClick={() =>
-                                  electron.openDialogForNodeDataDir(
-                                    selectedNode.id
-                                  )
-                                }
-                                disabled={sIsConfigDisabled}
-                              >
-                                Select folder
-                              </button>
-                            </>
-                          )}
-                          {configTranslationControl?.type === 'text' && (
-                            <TextArea
-                              value={currentValue as string}
-                              onChange={(newValue: string) =>
-                                onNodeConfigChange(configKey, newValue)
-                              }
-                              isDisabled={sIsConfigDisabled}
-                            />
-                          )}
-                          {(configTranslationControl?.type ===
-                            'select/single' ||
-                            configTranslationControl?.type ===
-                              'select/multiple') && (
-                            <Select
-                              value={currentValue}
-                              // defaultValue={configTranslation.defaultValue}
-                              onChange={(newValue) =>
-                                onNodeConfigChange(configKey, newValue)
-                              }
-                              options={configTranslationControl.controlTranslations.map(
-                                ({ value }) => {
-                                  return { value, label: value };
-                                }
-                              )}
-                              isDisabled={sIsConfigDisabled}
-                              isMulti={
-                                configTranslationControl?.type ===
-                                'select/multiple'
-                              }
-                            />
-                          )}
-                        </div>
-                      );
-                    })}
-                  </>
-                ) : (
-                  <p>Unable to find configuration settings</p>
-                )}
-              </div>
-            );
-          })}
-        </>
-      )}
-    </>
-  );
-};
-export default DynamicNodeConfig;
diff --git a/src/renderer/Footer/DynamicSettings.tsx b/src/renderer/Footer/DynamicSettings.tsx
deleted file mode 100644
index b058f548e..000000000
--- a/src/renderer/Footer/DynamicSettings.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-// import { useState } from 'react';
-
-// import electron from '../electronGlobal';
-import MenuDrawer from './MenuDrawer';
-import DynamicNodeConfig from './DynamicNodeConfig';
-import { useAppSelector } from '../state/hooks';
-import { selectSelectedNode } from '../state/node';
-import RemoveNodeButton from '../AddNode/RemoveNodeButton';
-
-type Props = {
-  isOpen: boolean | undefined;
-  onClickCloseButton: () => void;
-};
-
-const DynamicSettings = ({ isOpen, onClickCloseButton }: Props) => {
-  const selectedNode = useAppSelector(selectSelectedNode);
-  // const [sDeleteNodeStorageResult, setDeleteNodeStorageResult] =
-  //   useState<boolean>();
-
-  let title = 'Settings';
-  if (selectedNode) {
-    title = `${selectedNode.spec.displayName} settings`;
-  }
-  return (
-    <MenuDrawer
-      title={title}
-      isSelected={!!isOpen}
-      onClickCloseButton={onClickCloseButton}
-    >
-      <DynamicNodeConfig />
-      &nbsp;
-      {selectedNode && (
-        <>
-          <h2 style={{ marginBlockEnd: 0 }}>Remove node from NiceNode</h2>
-          <p> (optionally delete node storage in confirmation dialog)</p>
-          <div style={{ padding: 20 }}>
-            <RemoveNodeButton node={selectedNode} />
-          </div>
-        </>
-      )}
-      {/* todo fix: This deletes the entire node.runtime.dataDir.. hmm */}
-      {/* <h2>Storage</h2>
-      <div>
-        <h3>Delete node data</h3>
-        <p>
-          Your node requires this data to run and will require time and internet
-          data to recover if deleted. Only delete node data if you do not intend
-          to run this node.
-        </p>
-        <button
-          type="button"
-          disabled={selectedNode === undefined}
-          onClick={async () => {
-            console.log('Deleting node storage...');
-            // clear result while waiting for delete to return
-            setDeleteNodeStorageResult(undefined);
-            if (selectedNode?.id) {
-              setDeleteNodeStorageResult(
-                await electron.deleteNodeStorage(selectedNode?.id)
-              );
-            } else {
-              console.error('Unable to delete storage. No selected node.');
-            }
-          }}
-          style={{ marginLeft: 10, backgroundColor: 'red', color: 'white' }}
-        >
-          <span>Delete</span>
-        </button>
-        {sDeleteNodeStorageResult !== undefined && (
-          <>
-            {sDeleteNodeStorageResult ? (
-              <span>Delete successful</span>
-            ) : (
-              <span>Delete failed</span>
-            )}
-          </>
-        )}
-      </div> */}
-    </MenuDrawer>
-  );
-};
-export default DynamicSettings;
diff --git a/src/renderer/Footer/Footer.tsx b/src/renderer/Footer/Footer.tsx
index 680a7f9b0..7f494f36d 100644
--- a/src/renderer/Footer/Footer.tsx
+++ b/src/renderer/Footer/Footer.tsx
@@ -1,6 +1,5 @@
 import { VscDebugConsole } from 'react-icons/vsc';
 import { AiOutlineAreaChart } from 'react-icons/ai';
-import { MdSettings } from 'react-icons/md';
 import { FaDocker } from 'react-icons/fa';
 import { useEffect, useState } from 'react';
 
@@ -8,9 +7,7 @@ import IconButton from '../IconButton';
 import Monitoring from './Monitoring';
 import Debugging from './Debugging';
 import electron from '../electronGlobal';
-import DynamicSettings from './DynamicSettings';
 import Docker from './Docker';
-import LanguageSelect from '../LanguageSelect';
 import { useGetIsDockerInstalledQuery } from '../state/settingsService';
 
 export const FOOTER_HEIGHT = 64;
@@ -51,21 +48,6 @@ const Footer = () => {
         paddingRight: 10,
       }}
     >
-      <IconButton
-        type="button"
-        onClick={() => {
-          setSelectedMenuDrawer(
-            sSelectedMenuDrawer === 'settings' ? undefined : 'settings'
-          );
-        }}
-        style={{
-          borderBottom:
-            sSelectedMenuDrawer === 'settings' ? '2px solid' : 'none',
-          borderTop: sSelectedMenuDrawer === 'settings' ? '2px solid' : 'none',
-        }}
-      >
-        <MdSettings />
-      </IconButton>
       <IconButton
         type="button"
         onClick={() => {
@@ -121,10 +103,6 @@ const Footer = () => {
         isOpen={sSelectedMenuDrawer === 'debugging'}
         onClickCloseButton={onCloseDrawer}
       />
-      <DynamicSettings
-        isOpen={sSelectedMenuDrawer === 'settings'}
-        onClickCloseButton={onCloseDrawer}
-      />
       <Monitoring
         isOpen={sSelectedMenuDrawer === 'monitoring'}
         onClickCloseButton={onCloseDrawer}
@@ -135,8 +113,6 @@ const Footer = () => {
           onClickCloseButton={onCloseDrawer}
         />
       )}
-      &nbsp; &nbsp;
-      <LanguageSelect />
     </div>
   );
 };
diff --git a/src/renderer/Generics/redesign/DynamicSettings/DynamicSettings.tsx b/src/renderer/Generics/redesign/DynamicSettings/DynamicSettings.tsx
index 34c28c0b5..44d02ab58 100644
--- a/src/renderer/Generics/redesign/DynamicSettings/DynamicSettings.tsx
+++ b/src/renderer/Generics/redesign/DynamicSettings/DynamicSettings.tsx
@@ -1,8 +1,11 @@
+import { useEffect, useState } from 'react';
 import {
-  ConfigValue,
   ConfigTranslationMap,
+  ConfigValuesMap,
 } from '../../../../common/nodeConfig';
-// eslint-disable-next-line import/no-cycle
+import { SettingChangeHandler } from '../../../Presentational/NodeSettingsModal/NodeSettingsWrapper';
+import LineLabelSettings from '../LabelSetting/LabelSettings';
+import { LabelSettingsSectionProps } from '../LabelSetting/LabelValuesSection';
 import convertConfigToLabelSettings from './convertConfigToLabelSettings';
 
 export type CategoryConfig = {
@@ -11,9 +14,9 @@ export type CategoryConfig = {
 };
 export type DynamicSettingsProps = {
   categoryConfigs?: CategoryConfig[];
-  configValuesMap?: unknown;
+  configValuesMap?: ConfigValuesMap;
   isDisabled?: boolean;
-  onChange?: (configKey: string, newValue: ConfigValue) => void;
+  onChange?: SettingChangeHandler;
 };
 const DynamicSettings = ({
   categoryConfigs,
@@ -21,28 +24,28 @@ const DynamicSettings = ({
   isDisabled,
   onChange,
 }: DynamicSettingsProps) => {
+  const [sSections, setSections] = useState<LabelSettingsSectionProps>({
+    items: [],
+  });
+
+  useEffect(() => {
+    setSections(
+      convertConfigToLabelSettings({
+        categoryConfigs: categoryConfigs ?? [],
+        configValuesMap: configValuesMap ?? {},
+        isDisabled,
+        onChange,
+      })
+    );
+  }, [categoryConfigs, configValuesMap, isDisabled, onChange]);
+
   if (!categoryConfigs) {
-    return <>No config</>;
+    return <>No node settings found.</>;
   }
 
-  const onNodeConfigChange = async (
-    configKey: string,
-    newValue: ConfigValue
-  ) => {
-    // updateNode
-    console.log('updating node with newValue: ', newValue);
-    if (onChange) {
-      onChange(configKey, newValue);
-    }
-  };
-
   return (
     <>
-      {convertConfigToLabelSettings({
-        categoryConfigs: categoryConfigs ?? [],
-        configValuesMap,
-        isDisabled,
-      })}
+      <LineLabelSettings items={[sSections]} />
     </>
   );
 };
diff --git a/src/renderer/Generics/redesign/DynamicSettings/Setting.tsx b/src/renderer/Generics/redesign/DynamicSettings/Setting.tsx
index 86da606e0..ebbeb1676 100644
--- a/src/renderer/Generics/redesign/DynamicSettings/Setting.tsx
+++ b/src/renderer/Generics/redesign/DynamicSettings/Setting.tsx
@@ -1,6 +1,6 @@
+import { useCallback } from 'react';
 import {
   ConfigValue,
-  ConfigTranslationMap,
   ConfigTranslation,
   ConfigTranslationControl,
   ConfigKey,
@@ -9,19 +9,14 @@ import FolderInput from '../Input/FolderInput';
 import Input from '../Input/Input';
 import Select from '../Select/Select';
 import MultiSelect from '../Select/MultiSelect';
-// import Warning from '../Warning';
+import { SettingChangeHandler } from '../../../Presentational/NodeSettingsModal/NodeSettingsWrapper';
 
-type CategoryConfig = {
-  category: string;
-  configTranslationMap: ConfigTranslationMap;
-};
-// isDisabled? selectedNodeId (for dialog)
 export type SettingProps = {
   configTranslation: ConfigTranslation;
   configKey: ConfigKey;
   currentValue: string | string[];
   isDisabled?: boolean;
-  onChange?: (configKey: string, newValue: ConfigValue) => void;
+  onChange?: SettingChangeHandler;
 };
 const Setting = ({
   configTranslation,
@@ -30,47 +25,30 @@ const Setting = ({
   isDisabled,
   onChange,
 }: SettingProps) => {
-  const onNodeConfigChange = async (newValue: ConfigValue) => {
-    // todo: updateNode
-    console.log('updating node with newValue: ', newValue);
-    if (onChange) {
-      onChange(configKey, newValue);
-    }
-  };
+  const onNodeConfigChange = useCallback(
+    (newValue?: ConfigValue) => {
+      const asyncUpdate = async () => {
+        console.log('Setting value changed to newValue: ', newValue);
+        if (onChange) {
+          onChange(configKey, newValue);
+        }
+      };
+      asyncUpdate();
+    },
+    [configKey, onChange]
+  );
 
   const configTranslationControl: ConfigTranslationControl =
     configTranslation.uiControl;
 
-  // configKey (ex. "http")
-  // configTranslation
-  // currentValue (Str)
   return (
     <div key={configKey}>
       {configTranslationControl?.type === 'filePath' && (
         <FolderInput
           placeholder={currentValue as string}
           disabled={isDisabled}
-          onClickChange={() => {
-            console.log('onclick dir');
-            // todo: fix
-            // electron.openDialogForNodeDataDir('test')}/>
-          }}
+          onClickChange={onNodeConfigChange}
         />
-        // <>
-        //   {`Current folder: ${currentValue}`}
-        //   <button
-        //     type="button"
-        //     onClick={
-        //       () => console.log('onclick dir')
-        //       // todo: fix
-        //       // electron.openDialogForNodeDataDir('test')
-        //     }
-        //     disabled={false}
-        //     // disabled={sIsConfigDisabled}
-        //   >
-        //     Select folder
-        //   </button>
-        // </>
       )}
       {configTranslationControl?.type === 'text' && (
         <Input
@@ -82,7 +60,6 @@ const Setting = ({
       {configTranslationControl?.type === 'select/single' && (
         <Select
           value={currentValue as string}
-          // defaultValue={configTranslation.defaultValue}
           onChange={(newValue) => onNodeConfigChange(newValue?.value)}
           options={configTranslationControl.controlTranslations.map(
             ({ value }) => {
@@ -95,7 +72,6 @@ const Setting = ({
       {configTranslationControl?.type === 'select/multiple' && (
         <MultiSelect
           value={currentValue}
-          // defaultValue={configTranslation.defaultValue}
           onChange={(newValue) => onNodeConfigChange(newValue)}
           options={configTranslationControl.controlTranslations.map(
             ({ value }) => {
diff --git a/src/renderer/Generics/redesign/DynamicSettings/convertConfigToLabelSettings.tsx b/src/renderer/Generics/redesign/DynamicSettings/convertConfigToLabelSettings.tsx
index 7e983b3b6..f9f7e1f3e 100644
--- a/src/renderer/Generics/redesign/DynamicSettings/convertConfigToLabelSettings.tsx
+++ b/src/renderer/Generics/redesign/DynamicSettings/convertConfigToLabelSettings.tsx
@@ -1,54 +1,67 @@
-import { ConfigTranslation } from '../../../../common/nodeConfig';
-import LineLabelSettings from '../LabelSetting/LabelSettings';
+import {
+  ConfigTranslation,
+  ConfigValuesMap,
+} from '../../../../common/nodeConfig';
+import { SettingChangeHandler } from '../../../Presentational/NodeSettingsModal/NodeSettingsWrapper';
 import {
   LabelSettingsItem,
   LabelSettingsSectionProps,
 } from '../LabelSetting/LabelValuesSection';
-// eslint-disable-next-line import/no-cycle
 import { CategoryConfig } from './DynamicSettings';
 import Setting from './Setting';
 
+const getConfigValue = (
+  configTranslation: ConfigTranslation,
+  configKey: string,
+  configValuesMap: ConfigValuesMap
+) => {
+  let currentValue: string | string[] = configValuesMap?.[configKey];
+  if (currentValue === undefined) {
+    if (configTranslation.niceNodeDefaultValue !== undefined) {
+      currentValue = configTranslation.niceNodeDefaultValue;
+    } else if (configTranslation.defaultValue !== undefined) {
+      currentValue = configTranslation.defaultValue;
+    }
+  }
+  return currentValue;
+};
+
 const convertConfigToLabelSettings = ({
   categoryConfigs,
   configValuesMap,
   isDisabled,
+  onChange,
 }: {
   categoryConfigs: CategoryConfig[];
-  configValuesMap: any;
+  configValuesMap: ConfigValuesMap;
   isDisabled?: boolean;
-}): React.ReactNode => {
-  // let lineLabelSettingsProps: LineLabelSettingsProps = {
-  //   items: [],
-  // };
-  console.log(
-    'settings categoryConfigs, configValuesMap: ',
-    categoryConfigs,
-    configValuesMap
-  );
-
+  onChange?: SettingChangeHandler;
+}): LabelSettingsSectionProps => {
   // no separate settings sections (Only one for now)
   const section: LabelSettingsSectionProps = {
-    // sectionTitle: category
     items: [],
   };
-  const configItems = categoryConfigs.map((categoryConfig) => {
-    const { configTranslationMap, category } = categoryConfig;
 
-    if (configTranslationMap) {
-      const categoryItems = Object.keys(configTranslationMap).map(
-        (configKey) => {
+  // We're parsing the settings obj to form a categories array
+  // which contains the settings for each category
+  const configSettingsItems: LabelSettingsItem[][] = categoryConfigs.map(
+    (categoryConfig) => {
+      const { configTranslationMap } = categoryConfig;
+
+      if (configTranslationMap) {
+        // categorySettingsArr: An array of all the Settings in this category
+        const categorySettingsArr: LabelSettingsItem[] = Object.keys(
+          configTranslationMap
+        ).map((configKey) => {
           const configTranslation: ConfigTranslation =
             configTranslationMap[configKey];
 
-          let currentValue: string | string[] = configValuesMap?.[configKey];
-          if (currentValue === undefined) {
-            if (configTranslation.niceNodeDefaultValue !== undefined) {
-              currentValue = configTranslation.niceNodeDefaultValue;
-            } else if (configTranslation.defaultValue !== undefined) {
-              currentValue = configTranslation.defaultValue;
-            }
-            // todo for mutli select?
-          }
+          const currentValue: string | string[] = getConfigValue(
+            configTranslation,
+            configKey,
+            configValuesMap
+          );
+
           const settingItem: LabelSettingsItem = {
             label: configTranslation.displayName,
             value: (
@@ -58,6 +71,7 @@ const convertConfigToLabelSettings = ({
                 configTranslation={configTranslation}
                 currentValue={currentValue}
                 isDisabled={isDisabled}
+                onChange={onChange}
               />
             ),
           };
@@ -67,16 +81,25 @@ const convertConfigToLabelSettings = ({
           if (configTranslation.documentation) {
             settingItem.learnMoreLink = configTranslation.documentation;
           }
-          console.log('settings settingItem: ', settingItem);
           return settingItem;
-        }
+        });
+        return categorySettingsArr;
+      }
+      // config with translation? todo: error
+      console.error(
+        'category config does not have a configTranslation',
+        categoryConfig
       );
-      section.items = section.items.concat(categoryItems);
+      return [];
     }
-
-    console.log('settings section: ', section);
-    return section;
-  });
-  return <LineLabelSettings items={[section]} />;
+  );
+  // End of parsing category settings
+  // Now flatten them into one category or "section"
+  if (configSettingsItems) {
+    configSettingsItems.forEach((categorySettingsArr) => {
+      section.items = section.items.concat(categorySettingsArr);
+    });
+  }
+  return section;
 };
 export default convertConfigToLabelSettings;
diff --git a/src/renderer/Generics/redesign/Header/Header.tsx b/src/renderer/Generics/redesign/Header/Header.tsx
index a69e00168..ebb3b5951 100644
--- a/src/renderer/Generics/redesign/Header/Header.tsx
+++ b/src/renderer/Generics/redesign/Header/Header.tsx
@@ -18,6 +18,7 @@ import {
   popupContainer,
   menuButtonContainer,
 } from './header.css';
+import NodeSettingsWrapper from '../../../Presentational/NodeSettingsModal/NodeSettingsWrapper';
 
 /**
  * Primary UI component for user interaction
@@ -28,6 +29,8 @@ export const Header = (props: NodeOverviewProps) => {
   const [isCalloutDisplayed, setIsCalloutDisplayed] = useState<boolean>(false);
   const [isSettingsDisplayed, setIsSettingsDisplayed] =
     useState<boolean>(false);
+  const [sIsSettingsModalOpen, setIsSettingsModalOpen] =
+    useState<boolean>(false);
 
   const startStopButtonProps: ButtonProps = {
     label: '',
@@ -126,6 +129,7 @@ export const Header = (props: NodeOverviewProps) => {
             variant="icon"
             size="small"
             onClick={() => {
+              setIsSettingsModalOpen(true);
               if (type === 'client') {
                 if (onAction) onAction('settings');
                 // setIsSettingsDisplayed(!isSettingsDisplayed);
@@ -171,6 +175,11 @@ export const Header = (props: NodeOverviewProps) => {
           )}
         </div>
       </div>
+
+      <NodeSettingsWrapper
+        isOpen={sIsSettingsModalOpen}
+        onClickClose={() => setIsSettingsModalOpen(false)}
+      />
     </div>
   );
 };
diff --git a/src/renderer/Generics/redesign/HeaderMetrics/HeaderMetrics.tsx b/src/renderer/Generics/redesign/HeaderMetrics/HeaderMetrics.tsx
index 64e21cefe..61ba8cc0e 100644
--- a/src/renderer/Generics/redesign/HeaderMetrics/HeaderMetrics.tsx
+++ b/src/renderer/Generics/redesign/HeaderMetrics/HeaderMetrics.tsx
@@ -1,12 +1,10 @@
+import React from 'react';
 import { MetricStats, MetricTypes } from '../MetricTypes/MetricTypes';
 import { container } from './headerMetrics.css';
 import VerticalLine from '../VerticalLine/VerticalLine';
 import { getSyncStatus } from '../utils';
 import { NodeOverviewProps } from '../consts';
 
-/**
- * Primary UI component for user interaction
- */
 export const HeaderMetrics = (props: NodeOverviewProps) => {
   const { type, status, stats } = props;
   const getSlotOrBlockMetricType = stats.currentSlot
@@ -33,13 +31,13 @@ export const HeaderMetrics = (props: NodeOverviewProps) => {
         }
         // const statsValue = index === 0 ? getSyncStatus(status) : stats[metric];
         return (
-          <>
+          <React.Fragment key={metric}>
             <MetricTypes
               statsValue={statsValue}
               statsType={assignedMetric[index]}
             />
             {index !== 3 && <VerticalLine />}
-          </>
+          </React.Fragment>
         );
       })}
     </div>
diff --git a/src/renderer/Generics/redesign/Input/Input.tsx b/src/renderer/Generics/redesign/Input/Input.tsx
index ff21a34e6..a3a0ff841 100644
--- a/src/renderer/Generics/redesign/Input/Input.tsx
+++ b/src/renderer/Generics/redesign/Input/Input.tsx
@@ -34,7 +34,11 @@ const Input = ({
         className: [container].join(' '),
         placeholder,
         value,
-        onchange: onChange,
+        onChange: (event) => {
+          if (onChange) {
+            onChange(event.target.value);
+          }
+        },
         ...(disabled && { disabled }),
         ...(required && { required }),
       }}
diff --git a/src/renderer/Generics/redesign/LabelSetting/LabelSettings.tsx b/src/renderer/Generics/redesign/LabelSetting/LabelSettings.tsx
index 7e4c10ff5..5bd7606f2 100644
--- a/src/renderer/Generics/redesign/LabelSetting/LabelSettings.tsx
+++ b/src/renderer/Generics/redesign/LabelSetting/LabelSettings.tsx
@@ -41,8 +41,10 @@ const LineLabelSettings = ({
       {title && <div className={titleFont}>{title}</div>}
       <div className={columnContainer}>
         {items &&
-          items.map((item) => (
-            <div className={columnDiv} key={item.sectionTitle}>
+          items.map((item, index) => (
+            // Settings section ordering does not change during view of modal
+            // eslint-disable-next-line react/no-array-index-key
+            <div className={columnDiv} key={index}>
               <LineLabelSettingsItem {...item} />
             </div>
           ))}
diff --git a/src/renderer/Generics/redesign/LabelSetting/LabelValuesSection.tsx b/src/renderer/Generics/redesign/LabelSetting/LabelValuesSection.tsx
index 2e15797b3..358e6cabd 100644
--- a/src/renderer/Generics/redesign/LabelSetting/LabelValuesSection.tsx
+++ b/src/renderer/Generics/redesign/LabelSetting/LabelValuesSection.tsx
@@ -44,7 +44,7 @@ const LabelSettingsSection = ({
       )}
       {items &&
         items.map((item) => (
-          <React.Fragment key={item.label + item.value}>
+          <React.Fragment key={item.label}>
             <div className={lineContainer}>
               <div className={labelAndDescriptionContainer}>
                 <div className={lineKeyText}>{item.label}</div>
diff --git a/src/renderer/Generics/redesign/Modal/Modal.tsx b/src/renderer/Generics/redesign/Modal/Modal.tsx
index 300914f62..adf78b5ed 100644
--- a/src/renderer/Generics/redesign/Modal/Modal.tsx
+++ b/src/renderer/Generics/redesign/Modal/Modal.tsx
@@ -1,5 +1,11 @@
+import { useCallback, useEffect } from 'react';
 import Button from '../Button/Button';
-import { modalBackdropStyle, modalContentStyle, titleFont } from './modal.css';
+import {
+  modalBackdropStyle,
+  modalChildrenContainer,
+  modalContentStyle,
+  titleFont,
+} from './modal.css';
 
 type Props = {
   children: React.ReactNode;
@@ -16,23 +22,38 @@ export const Modal = ({
   title,
   isFullScreen,
 }: Props) => {
+  const escFunction = useCallback(
+    (event) => {
+      if (event.key === 'Escape') {
+        // Do whatever when esc is pressed
+        onClickCloseButton();
+      }
+    },
+    [onClickCloseButton]
+  );
+
+  useEffect(() => {
+    document.addEventListener('keydown', escFunction, false);
+
+    return () => {
+      document.removeEventListener('keydown', escFunction, false);
+    };
+  }, [escFunction]);
+
   return (
     <div
       style={{
         display: isOpen ? 'flex' : 'none',
-        // paddingTop: 35 leaves room for the drag bar on mac
-        paddingTop: isFullScreen ? 35 : '',
+        // paddingTop: 30 leaves room for the drag bar on mac
+        paddingTop: 30,
       }}
       className={modalBackdropStyle}
     >
       <div
         className={modalContentStyle}
         style={{
-          display: 'flex',
-          flexDirection: 'column',
           height: isFullScreen ? '95vh' : '',
           width: isFullScreen ? '95vw' : '',
-          minHeight: 100,
         }}
       >
         <div style={{ display: 'flex', flexDirection: 'column' }}>
@@ -50,7 +71,7 @@ export const Modal = ({
             {title}
           </span>
         </div>
-        <div style={{ flex: 1, overflow: 'auto' }}>{children}</div>
+        <div className={modalChildrenContainer}>{children}</div>
       </div>
     </div>
   );
diff --git a/src/renderer/Generics/redesign/Modal/modal.css.ts b/src/renderer/Generics/redesign/Modal/modal.css.ts
index d727d1c4b..68eb6e125 100644
--- a/src/renderer/Generics/redesign/Modal/modal.css.ts
+++ b/src/renderer/Generics/redesign/Modal/modal.css.ts
@@ -2,6 +2,7 @@ import { style } from '@vanilla-extract/css';
 import { vars } from '../theme.css';
 
 export const modalBackdropStyle = style({
+  boxSizing: 'border-box',
   display: 'none',
   position: 'fixed',
   zIndex: 1,
@@ -9,6 +10,8 @@ export const modalBackdropStyle = style({
   justifyContent: 'center',
   left: '0',
   top: '0',
+  paddingTop: 30,
+  paddingBottom: 30,
   width: '100%',
   height: '100%',
   overflow: 'auto',
@@ -16,9 +19,13 @@ export const modalBackdropStyle = style({
 });
 
 export const modalContentStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: 150,
+  boxSizing: 'border-box',
   filter:
     'drop-shadow(0px 32px 64px rgba(0, 0, 0, 0.1876)) drop-shadow(0px 2px 21px rgba(0, 0, 0, 0.1474))',
-  maxHeight: '95vh',
+  maxHeight: '90vh',
   backgroundColor: vars.color.background,
   padding: '32px',
   paddingTop: '0px',
@@ -36,3 +43,10 @@ export const titleFont = style({
   fontWeight: 590,
   paddingBottom: 16,
 });
+
+export const modalChildrenContainer = style({
+  flex: 1,
+  overflow: 'auto',
+  // extra padding from scrollbar
+  paddingRight: 10,
+});
diff --git a/src/renderer/Presentational/NodeSettingsModal/NodeSettings.tsx b/src/renderer/Presentational/NodeSettingsModal/NodeSettings.tsx
index 145b6ccf2..8ec269023 100644
--- a/src/renderer/Presentational/NodeSettingsModal/NodeSettings.tsx
+++ b/src/renderer/Presentational/NodeSettingsModal/NodeSettings.tsx
@@ -6,21 +6,22 @@ import DynamicSettings, {
 } from '../../Generics/redesign/DynamicSettings/DynamicSettings';
 import { ConfigValuesMap } from '../../../common/nodeConfig';
 import { Message } from '../../Generics/redesign/Message/Message';
+import { SettingChangeHandler } from './NodeSettingsWrapper';
 
 export type ThemeSetting = 'light' | 'dark' | 'auto';
 export type Preference = 'theme' | 'isOpenOnStartup';
 export interface NodeSettingsProps {
   isOpen: boolean;
-  onClose: () => void;
+  onClickClose: () => void;
   categoryConfigs?: CategoryConfig[];
   configValuesMap?: ConfigValuesMap;
   isDisabled?: boolean;
-  onChange?: () => void;
+  onChange?: SettingChangeHandler;
 }
 
 const NodeSettings = ({
   isOpen,
-  onClose,
+  onClickClose,
   categoryConfigs,
   configValuesMap,
   isDisabled,
@@ -28,17 +29,11 @@ const NodeSettings = ({
 }: NodeSettingsProps) => {
   const { t } = useTranslation('genericComponents');
 
-  const onChangeSetting = () => {
-    if (onChange) {
-      onChange();
-    }
-  };
-
   return (
     <Modal
       isOpen={isOpen}
       title={t('Node settings')}
-      onClickCloseButton={onClose}
+      onClickCloseButton={onClickClose}
     >
       {isDisabled && (
         <Message
@@ -51,6 +46,7 @@ const NodeSettings = ({
         categoryConfigs={categoryConfigs}
         configValuesMap={configValuesMap}
         isDisabled={isDisabled}
+        onChange={onChange}
       />
     </Modal>
   );
diff --git a/src/renderer/Presentational/NodeSettingsModal/NodeSettingsWrapper.tsx b/src/renderer/Presentational/NodeSettingsModal/NodeSettingsWrapper.tsx
index f016e43c3..d3c3448a2 100644
--- a/src/renderer/Presentational/NodeSettingsModal/NodeSettingsWrapper.tsx
+++ b/src/renderer/Presentational/NodeSettingsModal/NodeSettingsWrapper.tsx
@@ -2,18 +2,28 @@ import { useEffect, useState } from 'react';
 import {
   ConfigTranslation,
   ConfigTranslationMap,
+  ConfigValue,
+  FilePathControlType,
 } from '../../../common/nodeConfig';
+import electron from '../../electronGlobal';
 import { CategoryConfig } from '../../Generics/redesign/DynamicSettings/DynamicSettings';
 import { useAppSelector } from '../../state/hooks';
 import { selectSelectedNode } from '../../state/node';
 import NodeSettings from './NodeSettings';
 
-export interface PreferencesWrapperProps {
+export type SettingChangeHandler = (
+  configKey: string,
+  newValue: ConfigValue
+) => void;
+export interface NodeSettingsWrapperProps {
   isOpen: boolean;
-  onClose: () => void;
+  onClickClose: () => void;
 }
 
-const PreferencesWrapper = ({ isOpen, onClose }: PreferencesWrapperProps) => {
+const NodeSettingsWrapper = ({
+  isOpen,
+  onClickClose,
+}: NodeSettingsWrapperProps) => {
   const [sIsConfigDisabled, setIsConfigDisabled] = useState<boolean>(true);
   const [sConfigTranslationMap, setConfigTranslationMap] =
     useState<ConfigTranslationMap>();
@@ -26,16 +36,10 @@ const PreferencesWrapper = ({ isOpen, onClose }: PreferencesWrapperProps) => {
     let configTranslationMap;
     console.log(selectedNode);
     if (selectedNode) {
-      isDisabled = selectedNode.status === 'running';
+      isDisabled = ['running', 'starting'].includes(selectedNode.status);
       configTranslationMap = selectedNode.spec.configTranslation;
     }
-    console.log('NodeConfig isDisabled? ', isDisabled);
     setIsConfigDisabled(isDisabled);
-    console.log(
-      'DynamicSettings configValuesMap',
-      selectedNode?.config.configValuesMap
-    );
-    console.log('DynamicSettings configTranslationMap', configTranslationMap);
     setConfigTranslationMap(configTranslationMap);
   }, [selectedNode]);
   // configTranslationMap = selectedNode.spec.configTranslation;
@@ -75,19 +79,62 @@ const PreferencesWrapper = ({ isOpen, onClose }: PreferencesWrapperProps) => {
     setCategoryConfigs(arr);
   }, [sConfigTranslationMap]);
 
+  /**
+   * Sent from the individual setting input component
+   * @param configKey
+   * @param newValue
+   */
+  const onNodeConfigChange: SettingChangeHandler = async (
+    configKey: string,
+    newValue: ConfigValue
+  ) => {
+    // updateNode
+    console.log('updating node with newValue: ', newValue);
+    if (selectedNode?.config) {
+      // If the configChange is for a folder location, open electron
+      const { configValuesMap } = selectedNode.config;
+      const currentValue = configValuesMap[configKey];
+      const { configTranslation } = selectedNode.spec;
+      if (
+        configTranslation &&
+        configTranslation[configKey]?.uiControl.type === FilePathControlType
+      ) {
+        const openDialogForNodeDataDir =
+          await electron.openDialogForNodeDataDir(selectedNode.id);
+        console.log(
+          'openDialogForNodeDataDir before, and res:',
+          currentValue,
+          openDialogForNodeDataDir
+        );
+      } else {
+        const newConfig = {
+          ...selectedNode.config,
+          configValuesMap: {
+            ...configValuesMap,
+            [configKey]: newValue,
+          },
+        };
+        console.log('updating node with newConfig: ', newConfig);
+        await electron.updateNode(selectedNode.id, {
+          config: newConfig,
+        });
+      }
+      // todo: show the user it was successful or not
+    } else {
+      console.error('No selectedNode detected. Unable to change settings');
+    }
+  };
+
   return (
     <NodeSettings
       isOpen={isOpen}
-      onClose={onClose}
+      onClickClose={onClickClose}
       categoryConfigs={sCategoryConfigs}
       configValuesMap={selectedNode?.config.configValuesMap}
       isDisabled={sIsConfigDisabled}
-      // themeSetting={sThemeSetting}
-      // isOpenOnStartup={sIsOpenOnStartup}
-      // version={sNiceNodeVersion}
-      // onChange={onChangePreference}
+      onChange={onNodeConfigChange}
     />
   );
 };
 
-export default PreferencesWrapper;
+export default NodeSettingsWrapper;
diff --git a/src/stories/Generic/DynamicSettings.stories.tsx b/src/stories/Generic/DynamicSettings.stories.tsx
index 40a1efed1..8bb6765bd 100644
--- a/src/stories/Generic/DynamicSettings.stories.tsx
+++ b/src/stories/Generic/DynamicSettings.stories.tsx
@@ -1,7 +1,7 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { ConfigTranslationMap, ConfigValuesMap } from '../../common/nodeConfig';
+import { ConfigValuesMap } from '../../common/nodeConfig';
 
-import DynamicSettings from '../../renderer/Generics/redesign/DynamicSettings/DynamicSettings';
+import DynamicSettings, { CategoryConfig } from '../../renderer/Generics/redesign/DynamicSettings/DynamicSettings';
 
 export default {
   title: 'Generic/DynamicSettings',
@@ -23,199 +23,219 @@ const configValuesMap: ConfigValuesMap = {
   webSockets: 'Disabled',
 };
 
-const configTranslationMap: ConfigTranslationMap = {
-  dataDir: {
-    displayName: 'Data location',
-    category: 'Storage',
-    cliConfigPrefix: '--data-path=',
-    uiControl: {
-      type: 'filePath',
-    },
+const categoryConfigs: CategoryConfig[] = [
+  {
+    category: "Storage",
+    configTranslationMap: {
+      dataDir: {
+        displayName: 'Data location',
+        category: 'Storage',
+        cliConfigPrefix: '--data-path=',
+        uiControl: {
+          type: 'filePath',
+        },
+      },
+      dataStorageFormat: {
+        displayName: "Besu's data storage format",
+        category: 'Storage',
+        cliConfigPrefix: '--data-storage-format=',
+        uiControl: {
+          type: 'select/single',
+          controlTranslations: [
+            {
+              value: 'FOREST',
+              config: 'FOREST',
+            },
+            {
+              value: 'BONSAI',
+              config: 'BONSAI',
+            },
+          ],
+        },
+        defaultValue: 'FOREST',
+        documentation:
+          'https://besu.hyperledger.org/en/stable/Reference/CLI/CLI-Syntax/#data-storage-format',
+      },
+    }
   },
-  syncMode: {
-    displayName: 'Sync mode',
-    category: 'Syncronization',
-    cliConfigPrefix: '--sync-mode=',
-    uiControl: {
-      type: 'select/single',
-      controlTranslations: [
-        {
-          value: 'FAST',
-          config: 'FAST',
-        },
-        {
-          value: 'FULL',
-          config: 'FULL',
-        },
-      ],
-    },
-    defaultValue: 'FAST',
-  },
-  http: {
-    displayName: 'RPC http connections',
-    category: 'RPC APIs',
-    uiControl: {
-      type: 'select/single',
-      controlTranslations: [
-        {
-          value: 'Enabled',
-          config: '--rpc-http-enabled',
-        },
-        {
-          value: 'Disabled',
-        },
-      ],
-    },
-    defaultValue: 'Disabled',
-  },
-  webSockets: {
-    displayName: 'RPC websocket connections',
-    uiControl: {
-      type: 'select/single',
-      controlTranslations: [
-        {
-          value: 'Enabled',
-          config: '--rpc-ws-enabled=true',
-        },
-        {
-          value: 'Disabled',
-        },
-      ],
-    },
-    defaultValue: 'Disabled',
-  },
-  webSocketsPort: {
-    displayName: 'WebSockets RPC listening port',
-    cliConfigPrefix: '--rpc-ws-port=',
-    defaultValue: '8546',
-    uiControl: {
-      type: 'text',
-    },
-  },
-  httpApis: {
-    displayName: "Enabled HTTP API's",
-    category: 'RPC APIs',
-    cliConfigPrefix: '--rpc-http-api=',
-    valuesJoinStr: ',',
-    uiControl: {
-      type: 'select/multiple',
-      controlTranslations: [
-        {
-          value: 'ADMIN',
-          config: 'ADMIN',
-        },
-        {
-          value: 'CLIQUE',
-          config: 'CLIQUE',
-        },
-        {
-          value: 'DEBUG',
-          config: 'DEBUG',
-        },
-        {
-          value: 'EEA',
-          config: 'EEA',
-        },
-        {
-          value: 'ETH',
-          config: 'ETH',
-        },
-        {
-          value: 'IBFT',
-          config: 'IBFT',
-        },
-        {
-          value: 'MINER',
-          config: 'MINER',
-        },
-        {
-          value: 'NET',
-          config: 'NET',
-        },
-        {
-          value: 'PERM',
-          config: 'PERM',
-        },
-        {
-          value: 'PLUGINS',
-          config: 'PLUGINS',
-        },
-        {
-          value: 'QBFT',
-          config: 'QBFT',
-        },
-        {
-          value: 'TRACE',
-          config: 'TRACE',
-        },
-        {
-          value: 'TXPOOL',
-          config: 'TXPOOL',
-        },
-        {
-          value: 'WEB3',
-          config: 'WEB3',
-        },
-      ],
-    },
-    defaultValue: ['ETH', 'NET', 'WEB3'],
-  },
-  hostAllowList: {
-    displayName: 'RPC connections accepted by node',
-    category: 'RPC APIs',
-    cliConfigPrefix: '--host-allowlist=',
-    uiControl: {
-      type: 'text',
-    },
-    infoDescription:
-      'A comma-separated list of hostnames to access the JSON-RPC API and pull Besu metrics. By default, Besu accepts requests from localhost and 127.0.0.1. Example value: medomain.com,meotherdomain.com',
-    defaultValue: 'localhost,127.0.0.1',
+  {
+    category: "Syncronization",
+    configTranslationMap: {
+      syncMode: {
+        displayName: 'Sync mode',
+        category: 'Syncronization',
+        cliConfigPrefix: '--sync-mode=',
+        uiControl: {
+          type: 'select/single',
+          controlTranslations: [
+            {
+              value: 'FAST',
+              config: 'FAST',
+            },
+            {
+              value: 'FULL',
+              config: 'FULL',
+            },
+          ],
+        },
+        defaultValue: 'FAST',
+      },
+    }
   },
-  httpCorsDomains: {
-    displayName: 'Allowed virtual hostnames for inbound requests',
-    cliConfigPrefix: '--rpc-http-cors-origins=',
-    valuesJoinStr: ',',
-    uiControl: {
-      type: 'text',
-    },
-    documentation:
-      'https://besu.hyperledger.org/en/stable/public-networks/reference/cli/options/#rpc-http-cors-origins',
-    infoDescription:
-      'Change where the node accepts http connections (use comma separated urls wrapped in double quotes). If using a browser wallet, the extension url is required to be input here.',
+  {
+    category: "RPC APIs",
+    configTranslationMap: {
+      http: {
+        displayName: 'RPC http connections',
+        category: 'RPC APIs',
+        uiControl: {
+          type: 'select/single',
+          controlTranslations: [
+            {
+              value: 'Enabled',
+              config: '--rpc-http-enabled',
+            },
+            {
+              value: 'Disabled',
+            },
+          ],
+        },
+        defaultValue: 'Disabled',
+      },
+      webSockets: {
+        displayName: 'RPC websocket connections',
+        uiControl: {
+          type: 'select/single',
+          controlTranslations: [
+            {
+              value: 'Enabled',
+              config: '--rpc-ws-enabled=true',
+            },
+            {
+              value: 'Disabled',
+            },
+          ],
+        },
+        defaultValue: 'Disabled',
+      },
+      webSocketsPort: {
+        displayName: 'WebSockets RPC listening port',
+        cliConfigPrefix: '--rpc-ws-port=',
+        defaultValue: '8546',
+        uiControl: {
+          type: 'text',
+        },
+      },
+      httpApis: {
+        displayName: "Enabled HTTP API's",
+        category: 'RPC APIs',
+        cliConfigPrefix: '--rpc-http-api=',
+        valuesJoinStr: ',',
+        uiControl: {
+          type: 'select/multiple',
+          controlTranslations: [
+            {
+              value: 'ADMIN',
+              config: 'ADMIN',
+            },
+            {
+              value: 'CLIQUE',
+              config: 'CLIQUE',
+            },
+            {
+              value: 'DEBUG',
+              config: 'DEBUG',
+            },
+            {
+              value: 'EEA',
+              config: 'EEA',
+            },
+            {
+              value: 'ETH',
+              config: 'ETH',
+            },
+            {
+              value: 'IBFT',
+              config: 'IBFT',
+            },
+            {
+              value: 'MINER',
+              config: 'MINER',
+            },
+            {
+              value: 'NET',
+              config: 'NET',
+            },
+            {
+              value: 'PERM',
+              config: 'PERM',
+            },
+            {
+              value: 'PLUGINS',
+              config: 'PLUGINS',
+            },
+            {
+              value: 'QBFT',
+              config: 'QBFT',
+            },
+            {
+              value: 'TRACE',
+              config: 'TRACE',
+            },
+            {
+              value: 'TXPOOL',
+              config: 'TXPOOL',
+            },
+            {
+              value: 'WEB3',
+              config: 'WEB3',
+            },
+          ],
+        },
+        defaultValue: ['ETH', 'NET', 'WEB3'],
+      },
+      hostAllowList: {
+        displayName: 'RPC connections accepted by node',
+        category: 'RPC APIs',
+        cliConfigPrefix: '--host-allowlist=',
+        uiControl: {
+          type: 'text',
+        },
+        infoDescription:
+          'A comma-separated list of hostnames to access the JSON-RPC API and pull Besu metrics. By default, Besu accepts requests from localhost and 127.0.0.1. Example value: medomain.com,meotherdomain.com',
+        defaultValue: 'localhost,127.0.0.1',
+      },
+    }
   },
-  dataStorageFormat: {
-    displayName: "Besu's data storage format",
-    category: 'Storage',
-    cliConfigPrefix: '--data-storage-format=',
-    uiControl: {
-      type: 'select/single',
-      controlTranslations: [
-        {
-          value: 'FOREST',
-          config: 'FOREST',
-        },
-        {
-          value: 'BONSAI',
-          config: 'BONSAI',
-        },
-      ],
-    },
-    defaultValue: 'FOREST',
-    documentation:
-      'https://besu.hyperledger.org/en/stable/Reference/CLI/CLI-Syntax/#data-storage-format',
-  },
-  maxPeerCount: {
-    displayName: 'Max Peer Count (set to low number to use less bandwidth)',
-    cliConfigPrefix: '--max-peers=',
-    defaultValue: '25',
-    uiControl: {
-      type: 'text',
-    },
-  },
-};
+  {
+    category: "Other",
+    configTranslationMap: {
+      httpCorsDomains: {
+        displayName: 'Allowed virtual hostnames for inbound requests',
+        cliConfigPrefix: '--rpc-http-cors-origins=',
+        valuesJoinStr: ',',
+        uiControl: {
+          type: 'text',
+        },
+        documentation:
+          'https://besu.hyperledger.org/en/stable/public-networks/reference/cli/options/#rpc-http-cors-origins',
+        infoDescription:
+          'Change where the node accepts http connections (use comma separated urls wrapped in double quotes). If using a browser wallet, the extension url is required to be input here.',
+      },
+      maxPeerCount: {
+        displayName: 'Max Peer Count (set to low number to use less bandwidth)',
+        cliConfigPrefix: '--max-peers=',
+        defaultValue: '25',
+        uiControl: {
+          type: 'text',
+        },
+      },
+    }
+  }
+]
 
 export const Primary = Template.bind({});
 Primary.args = {
-  configTranslationMap,
+  categoryConfigs,
   configValuesMap,
 };
diff --git a/src/stories/Presentational/NodeSettings.stories.tsx b/src/stories/Presentational/NodeSettings.stories.tsx
index e8614651e..9f4e13adb 100644
--- a/src/stories/Presentational/NodeSettings.stories.tsx
+++ b/src/stories/Presentational/NodeSettings.stories.tsx
@@ -26,7 +26,7 @@ const configValuesMap: ConfigValuesMap = {
 export const Primary = Template.bind({});
 Primary.args = {
   isOpen: true,
-  onClose: () => alert('close'),
+  onClickClose: () => alert('close clicked'),
   configValuesMap,
   categoryConfigs: [
     {
diff --git a/tsconfig.json b/tsconfig.json
index 66374d686..7d41e1e7c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,5 +23,5 @@
     // skip because github's macos-latest was checking lib types
     "skipLibCheck": true
   },
-  "exclude": ["test", "release/build", "release/app/dist", ".erb/dll"]
+  "exclude": ["test", "release/build", "release/app/dist", ".erb/dll", "storybook-static"]
 }

From 93234673565a31f1e6eeff4187496b41d9231daf Mon Sep 17 00:00:00 2001
From: jgresham <johnsgresham@gmail.com>
Date: Fri, 11 Nov 2022 22:28:32 -0600
Subject: [PATCH 6/6] chore: storybook darkmode button and lang select updated
 and themed

---
 .../Generics/redesign/RedesignContainer.tsx   | 31 ++++++++++++-------
 .../StorybookLanguageSelect.tsx               |  9 +++---
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/renderer/Generics/redesign/RedesignContainer.tsx b/src/renderer/Generics/redesign/RedesignContainer.tsx
index 332d0332f..56b743a73 100644
--- a/src/renderer/Generics/redesign/RedesignContainer.tsx
+++ b/src/renderer/Generics/redesign/RedesignContainer.tsx
@@ -5,31 +5,40 @@ import { store } from '../../state/store';
 
 import StorybookLanguageSelect from '../../Presentational/StorybookLanguageSelect';
 import { darkTheme, lightTheme } from './theme.css';
+import Button from './Button/Button';
 
 const RedesignContainerStoryBook: React.FC = ({ children }) => {
   const [isDarkTheme, setIsDarkTheme] = useState(false);
 
   return (
     <Provider store={store}>
-      <div style={{ display: 'flex', flexDirection: 'column', height: '90vh' }}>
-        <div style={{ display: 'flex', flexDirection: 'row' }}>
+      <div
+        id="onBoarding"
+        className={isDarkTheme ? darkTheme : lightTheme}
+        style={{ display: 'flex', flexDirection: 'column', height: '90vh' }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-end',
+            gap: 20,
+          }}
+        >
           <div>
             <p>Toggle dark mode</p>
-            <button
-              style={{ width: 150 }}
-              type="button"
+            <Button
+              label={`Switch to ${isDarkTheme ? 'light' : 'dark'} theme`}
               onClick={() =>
                 setIsDarkTheme((currentValue: boolean) => !currentValue)
               }
-            >
-              Switch to {isDarkTheme ? 'light' : 'dark'} theme
-            </button>
+            />
+          </div>
+          <div style={{ minWidth: 150 }}>
+            <StorybookLanguageSelect />
           </div>
-          <StorybookLanguageSelect />
         </div>
         <div
-          id="onBoarding"
-          className={isDarkTheme ? darkTheme : lightTheme}
           style={{
             marginTop: '1em',
             border: '1px dashed #E3E3E3',
diff --git a/src/renderer/Presentational/StorybookLanguageSelect.tsx b/src/renderer/Presentational/StorybookLanguageSelect.tsx
index ba985210d..f2b6202b2 100644
--- a/src/renderer/Presentational/StorybookLanguageSelect.tsx
+++ b/src/renderer/Presentational/StorybookLanguageSelect.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { useState } from 'react';
-import Select from '../DynamicControls/Select';
+import Select from '../Generics/redesign/Select/Select';
 
 const StorybookLanguageSelect = () => {
   const { i18n } = useTranslation();
@@ -8,16 +8,15 @@ const StorybookLanguageSelect = () => {
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const onChangeLanguage = async (newLang: any) => {
-    console.log('language selected: ', newLang);
-    setLang(newLang);
-    i18n.changeLanguage(newLang);
+    console.log('language selected: ', newLang.value);
+    setLang(newLang.value);
+    i18n.changeLanguage(newLang.value);
   };
 
   return (
     <Select
       isDisabled={false}
       value={sLang}
-      isMulti={false}
       options={[
         { label: 'English', value: 'en' },
         { label: 'Chinese', value: 'cn' },