add and remove dependencies

gimlet-io · Sep 27, 2024 · 81fd58d · 81fd58d
1 parent 3b5f38d
commit 81fd58d
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 22 deletions.
diff --git a/web/src/app.css b/web/src/app.css
@@ -42,6 +42,10 @@
     @apply bg-red-600 dark:bg-red-700 hover:bg-red-500 dark:hover:bg-red-800 focus:outline-none focus:border-red-700 active:bg-red-700 items-center px-4 py-1 border border-transparent text-base leading-6 font-medium rounded-md text-white transition ease-in-out duration-150
 }
 
+.destructiveButtonSecondary {
+    @apply border-red-500 dark:border-red-700 text-red-500 dark:text-red-700 border hover:border-red-400 dark:hover:border-red-800 hover:text-red-400 dark:hover:text-red-800 inline-flex items-center px-6 py-2 text-base leading-6 font-medium rounded-md transition ease-in-out duration-150
+}
+
 .badge {
     @apply inline-flex items-center px-2 py-0.5 rounded-md font-medium bg-teal-100 dark:bg-teal-700 text-teal-800 dark:text-teal-400
 }

diff --git a/web/src/views/envConfig/databasesTab.jsx b/web/src/views/envConfig/databasesTab.jsx
@@ -3,19 +3,15 @@ import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOption
 import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid'
 import {InfraComponent} from '../environment/category';
 import {produce} from 'immer';
+import { v4 as uuidv4 } from 'uuid';
 
 export function DatabasesTab(props) {
   const { gimletClient, store } = props;
   const { environment } = props;
   const { databaseConfig, setDatabaseValues } = props
   const { plainModules } = props;
   const [ selectedModule, setSelectedModule ] = useState()
-  const [ dependencies, setDependencies ] = useState({
-    "xxx": {
-      url: "https://github.com/gimlet-io/plain-modules.git?path=postgresql",
-      values: {}
-    }
-  })
+  const [ dependencies, setDependencies ] = useState({})
 
   const validationCallback = (id, validationErrors) => {
     if(validationErrors) {
@@ -31,6 +27,21 @@ export function DatabasesTab(props) {
     }))
   }
 
+  const addDependency = () => {
+    setDependencies(produce(dependencies, draft => {
+      draft[uuidv4()] = {
+        url: selectedModule.url,
+        values: {}
+      }
+    }))
+  }
+
+  const deleteDependency = (id) => {
+    setDependencies(produce(dependencies, draft => {
+      delete draft[id]
+    }))
+  }
+
   useEffect(() => {
     console.log(dependencies)
   }, [dependencies]);
@@ -45,27 +56,27 @@ export function DatabasesTab(props) {
         <div className='flex-grow'>
           <ModuleSelector modules={plainModules} setSelectedModule={setSelectedModule} />
         </div>
-        <button
-              onClick={() => navigate("/import-repositories")}
-              className="primaryButton px-8">
-              Add
-        </button>
+        <button onClick={addDependency} className="primaryButton px-8">Add</button>
       </div>
       {Object.keys(dependencies).map((id) => {
         const dependency = dependencies[id]
         const module = plainModules.find(m => m.url == dependency.url)
 
-        return <InfraComponent
-            key={id}
-            componentDefinition={module}
-            config={dependency.values}
-            setValues={(variable, values, nonDefaultValues) => setDependencyValues(id, values, nonDefaultValues)}
-            validationCallback={(variable, validationErrors) => validationCallback(id, validationErrors)}
-            gimletClient={gimletClient}
-            store={store}
-            environment={{name: environment}}
-          />
-        })
+        return (
+          <div className='relative'>
+            <button onClick={() => deleteDependency(id)} className="destructiveButtonSecondary absolute top-6 right-6">Delete</button>
+            <InfraComponent
+              key={id}
+              componentDefinition={module}
+              config={dependency.values}
+              setValues={(variable, values, nonDefaultValues) => setDependencyValues(id, values, nonDefaultValues)}
+              validationCallback={(variable, validationErrors) => validationCallback(id, validationErrors)}
+              gimletClient={gimletClient}
+              store={store}
+              environment={{name: environment}}
+            />
+          </div>
+        )})
       }
     </div>
   )