#259 - Add variable management components for collections and environments

Author: giemic8

src/main/main.ts

@@ -28,6 +28,7 @@ const createWindow = async () => {
       preload: path.join(__dirname, 'preload.js'),
     },
   });
+  mainWindow.setFullScreen(true);
 
   // Open links in default browser
   mainWindow.webContents.setWindowOpenHandler(({ url }) => {

src/renderer/components/shared/settings/SettingsModal.tsx

@@ -7,32 +7,48 @@ import {
   DialogTrigger,
 } from '@/components/ui/dialog';
 import { FiSettings } from 'react-icons/fi';
-import {
-  variableArrayToMap,
-  VariableEditor,
-  variableMapToArray,
-} from '@/components/shared/settings/VariableTab/VariableEditor';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 import { Button } from '@/components/ui/button';
 import * as React from 'react';
 import { useState } from 'react';
-import { selectVariables, useVariableActions, useVariableStore } from '@/state/variableStore';
+import {
+  selectCollectionVariables,
+  selectEnvironmentVariables,
+  useVariableActions,
+  useVariableStore,
+} from '@/state/variableStore';
+import { CollectionVariableTab } from '@/components/shared/settings/variableTabs/CollectionVariableTab';
+import {
+  variableArrayToMap,
+  variableMapToArray,
+} from '@/components/shared/settings/variableTabs/helper/EditVariableHelper';
+import { EnvironmentVariableTab } from '@/components/shared/settings/variableTabs/EnvironmentVariableTab';
 
 export const SettingsModal = () => {
-  const { setVariables } = useVariableActions();
-  const variables = useVariableStore((state) => selectVariables(state));
-  const [editorVariables, setEditorVariables] = useState(variableMapToArray(variables));
+  const actions = useVariableActions();
+  const collectionStoreVariables = useVariableStore((state) => selectCollectionVariables(state));
+  const environmentStoreVariables = useVariableStore((state) => selectEnvironmentVariables(state));
+
+  const [collectionVariables, setCollectionVariables] = useState(
+    variableMapToArray(collectionStoreVariables)
+  );
+  const [environmentVariables, setEnvironmentVariables] = useState(environmentStoreVariables);
   const [isValid, setValid] = useState(false);
-  const [isOpen, setOpen] = useState(false);
+  const [isOpen, setOpen] = useState(true);
 
   const save = async () => {
-    console.info('Saving variables:', editorVariables);
-    await setVariables(variableArrayToMap(editorVariables));
+    await actions.setCollectionVariables(variableArrayToMap(collectionVariables));
+    await setEnvironmentVariables(environmentVariables);
     setOpen(false);
   };
 
+  const apply = async () => {
+    await actions.setCollectionVariables(variableArrayToMap(v));
+    await setEnvironmentVariables(environmentVariables);
+  };
+
   const cancel = () => {
-    setEditorVariables(variableMapToArray(variables));
+    setCollectionVariables(variableMapToArray(collectionStoreVariables));
     setOpen(false);
   };
 
@@ -45,15 +61,23 @@ export const SettingsModal = () => {
         <DialogHeader className="mt-auto">
           <DialogTitle>Settings</DialogTitle>
         </DialogHeader>
-        <Tabs defaultValue="variables" className="h-[calc(50vh)]">
+        <Tabs defaultValue="collectionVariables" className="h-[calc(50vh)]">
           <TabsList>
-            <TabsTrigger value="variables">Variables</TabsTrigger>
+            <TabsTrigger value="collectionVariables">CollectionVariables</TabsTrigger>
+            <TabsTrigger value="environmentVariables">EnvironmentVariables</TabsTrigger>
           </TabsList>
-          <TabsContent value="variables" className="max-h-[50vh] overflow-y-auto">
-            <VariableEditor
-              variables={editorVariables}
+          <TabsContent value="collectionVariables" className="max-h-[50vh] overflow-y-auto">
+            <CollectionVariableTab
+              variables={collectionVariables}
+              onValidChange={setValid}
+              onVariablesChange={setCollectionVariables}
+            />
+          </TabsContent>
+          <TabsContent value="environmentVariables" className="max-h-[50vh] overflow-y-auto">
+            <EnvironmentVariableTab
+              environments={environmentVariables}
               onValidChange={setValid}
-              onVariablesChange={setEditorVariables}
+              onVariablesChange={setCollectionVariables} // TODO is wrong
             />
           </TabsContent>
         </Tabs>
@@ -66,6 +90,14 @@ export const SettingsModal = () => {
           >
             <span className="leading-4 font-bold">Save</span>
           </Button>
+          <Button
+            className="mt-0 ml-0 mr-0 mb-0"
+            onClick={apply}
+            disabled={!isValid}
+            variant={isValid ? 'secondary' : 'secondaryDisable'}
+          >
+            <span className="leading-4 font-bold">Apply</span>
+          </Button>
           <Button className="mt-0 mr-2 mb-0" onClick={cancel} variant="destructive">
             <span className="leading-4 font-bold">Cancel</span>
           </Button>

src/renderer/components/shared/settings/VariableTab/VariableEditor.tsx

@@ -0,0 +1,23 @@
+import { VariableEditor } from '@/components/shared/settings/variableTabs/table/VariableEditor';
+import { VariableObjectWithKey } from 'shim/objects/variables';
+
+export interface CollectionVariableTabProps {
+  variables: VariableObjectWithKey[];
+  onValidChange?: (valid: boolean) => void;
+  onVariablesChange?: (variables: VariableObjectWithKey[]) => void;
+}
+
+export const CollectionVariableTab = ({
+  variables,
+  onValidChange,
+  onVariablesChange,
+}: CollectionVariableTabProps) => {
+  return (
+    <VariableEditor
+      className="p-4 relative"
+      variables={variables}
+      onValidChange={onValidChange}
+      onVariablesChange={onVariablesChange}
+    ></VariableEditor>
+  );
+};

src/renderer/components/shared/settings/variableTabs/CollectionVariableTab.tsx

@@ -0,0 +1,65 @@
+import { VariableObjectWithKey } from 'shim/objects/variables';
+import { useEffect, useState } from 'react';
+import {
+  Sidebar,
+  SidebarHeader,
+  SidebarMenuButton,
+  SidebarProvider,
+} from '@/components/ui/sidebar';
+import { EnvironmentMap } from 'shim/objects/environment';
+import { variableMapToArray } from '@/components/shared/settings/variableTabs/helper/EditVariableHelper';
+import { VariableEditor } from '@/components/shared/settings/variableTabs/table/VariableEditor';
+
+export interface EnvironmentVariableEditorProps {
+  environments: EnvironmentMap;
+  onValidChange?: (valid: boolean) => void;
+  onVariablesChange?: (variables: VariableObjectWithKey[]) => void;
+}
+
+/** A component that allows adding, editing and removing variables */
+export const EnvironmentVariableTab = ({
+  environments,
+  onVariablesChange,
+  onValidChange,
+}: EnvironmentVariableEditorProps) => {
+  const environmentList = Object.keys(environments);
+  const firstEnvironmentKey = environmentList[0] as keyof EnvironmentMap;
+  const firstEnvironment = environments[firstEnvironmentKey] ?? {};
+  const [editorEnvironmentVariables, setEditorEnvironmentVariables] = useState(
+    variableMapToArray(firstEnvironment)
+  );
+  const [selectedEnvironment, setSelectedEnvironment] = useState(environmentList[0]);
+
+  useEffect(() => {
+    const selectedEnvironmentKey = selectedEnvironment as keyof EnvironmentMap;
+    const selectedEnvironmentVariables = environments[selectedEnvironmentKey] ?? {};
+    setEditorEnvironmentVariables(variableMapToArray(selectedEnvironmentVariables));
+  }, [selectedEnvironment, environments]);
+
+  return (
+    <div className="p-4 flex">
+      <SidebarProvider>
+        <Sidebar collapsible={'none'}>
+          <SidebarHeader>Environments</SidebarHeader>
+          {environmentList.map((environment) => (
+            <SidebarMenuButton
+              isActive={environment === selectedEnvironment}
+              onClick={() => setSelectedEnvironment(environment)}
+              className="mr-4"
+              key={environment}
+            >
+              {environment}
+            </SidebarMenuButton>
+          ))}
+          <SidebarMenuButton> + Add Environment</SidebarMenuButton>
+        </Sidebar>
+        <VariableEditor
+          className={'p-4 m-1 flex-1'}
+          variables={editorEnvironmentVariables}
+          onVariablesChange={onVariablesChange}
+          onValidChange={onValidChange}
+        />
+      </SidebarProvider>
+    </div>
+  );
+};

src/renderer/components/shared/settings/variableTabs/EnvironmentVariableTab.tsx

@@ -0,0 +1,30 @@
+import {
+  VARIABLE_NAME_REGEX,
+  VariableMap,
+  VariableObject,
+  VariableObjectWithKey,
+} from 'shim/objects/variables';
+
+export function variableMapToArray(map: VariableMap) {
+  return Object.entries(map).map<VariableObjectWithKey>(([key, variable]) => ({
+    key,
+    ...variable,
+  }));
+}
+
+export function variableArrayToMap(array: VariableObjectWithKey[]) {
+  return Object.fromEntries<VariableObject>(array.map(({ key, ...variable }) => [key, variable]));
+}
+
+export function getInvalidVariableKeys(variables: VariableObjectWithKey[]) {
+  const allKeys = new Set<string>();
+  const invalidKeys = new Set<string>();
+  for (const { key } of variables) {
+    if (key === '' || key.length > 255 || allKeys.has(key) || !VARIABLE_NAME_REGEX.test(key)) {
+      invalidKeys.add(key);
+    }
+    allKeys.add(key);
+  }
+
+  return invalidKeys;
+}