#259 - Add editing environment variables

.gitignore

@@ -44,6 +44,7 @@ typings/
 
 # Optional npm cache directory
 .npm
+package-lock.json
 
 # Optional eslint cache
 .eslintcache

src/main/environment/service/environment-service.ts

@@ -7,6 +7,7 @@ import { Collection } from 'shim/objects/collection';
 import { VariableMap } from 'shim/objects/variables';
 import { getSystemVariable, getSystemVariables } from './system-variable';
 import { SettingsService } from 'main/persistence/service/settings-service';
+import { EnvironmentMap } from 'shim/objects/environment';
 
 const persistenceService = PersistenceService.instance;
 const settingsService = SettingsService.instance;
@@ -60,6 +61,10 @@ export class EnvironmentService implements Initializable {
     this.currentCollection.variables = variables;
   }
 
+  public setEnvironmentVariables(environmentVariables: EnvironmentMap) {
+    this.currentCollection.environments = environmentVariables;
+  }
+
   /**
    * Loads the collection at the specified path and sets it as the current collection.
    *

src/main/event/main-event-service.ts

@@ -8,6 +8,7 @@ import { TrufosObject } from 'shim/objects';
 import { EnvironmentService } from 'main/environment/service/environment-service';
 import { VariableMap } from 'shim/objects/variables';
 import { Folder } from 'shim/objects/folder';
+import { EnvironmentMap } from 'shim/objects/environment';
 
 const persistenceService = PersistenceService.instance;
 const environmentService = EnvironmentService.instance;
@@ -113,6 +114,11 @@ export class MainEventService implements IEventService {
     await persistenceService.saveCollection(environmentService.currentCollection);
   }
 
+  async setEnvironmentVariables(environmentVariables: EnvironmentMap) {
+    environmentService.setEnvironmentVariables(environmentVariables);
+    await persistenceService.saveCollection(environmentService.currentCollection);
+  }
+
   async selectEnvironment(key: string) {
     environmentService.currentEnvironmentKey = key;
   }

src/renderer/components/shared/modal/NamingModal.tsx

@@ -0,0 +1,57 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { FormEvent } from 'react';
+
+interface NamingModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  modalTitle: string;
+  onSubmit: () => void;
+  onReset: () => void;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+  valid: boolean;
+}
+
+export const NamingModal = (props: NamingModalProps) => {
+  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    props.onSubmit();
+  };
+
+  return (
+    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{props.modalTitle}</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={onSubmit} onReset={props.onReset}>
+          <div className="p-4">
+            <input
+              type="text"
+              value={props.value}
+              onChange={(e) => props.onChange(e.target.value)}
+              className="w-full bg-transparent outline-none"
+              placeholder={props.placeholder}
+            />
+          </div>
+          <DialogFooter className="bottom-0">
+            <Button disabled={!props.valid} variant={props.valid ? 'default' : 'defaultDisable'}>
+              <span className="leading-4 font-bold">Save</span>
+            </Button>
+            <Button type="reset" variant="destructive">
+              <span className="leading-4 font-bold">Cancel</span>
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -7,32 +7,49 @@ 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 save = async () => {
-    console.info('Saving variables:', editorVariables);
-    await setVariables(variableArrayToMap(editorVariables));
+    apply();
+    await setEnvironmentVariables(environmentVariables);
     setOpen(false);
   };
 
+  const apply = async () => {
+    await actions.setCollectionVariables(variableArrayToMap(collectionVariables));
+    await actions.setEnvironmentVariables(environmentVariables);
+  };
+
   const cancel = () => {
-    setEditorVariables(variableMapToArray(variables));
+    setCollectionVariables(variableMapToArray(collectionStoreVariables));
+    setEnvironmentVariables(environmentStoreVariables);
     setOpen(false);
   };
 
@@ -45,15 +62,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}
+              onEnvironmentChange={setEnvironmentVariables}
             />
           </TabsContent>
         </Tabs>
@@ -66,6 +91,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/variableTabs/CollectionVariableTab.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>
+  );
+};