feat(platform): Edit existing variables in a project (#602)

Co-authored-by: kriptonian1 <[email protected]> Co-authored-by: rajdip-b <[email protected]>
keyshade-xyz · Jan 11, 2025 · bb48f6c · bb48f6c
1 parent c3a08cc
commit bb48f6c
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 41 deletions.
diff --git a/apps/platform/package.json b/apps/platform/package.json
@@ -13,6 +13,7 @@
     "@radix-ui/react-alert-dialog": "^1.1.4",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.1.2",
     "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-direction": "^1.0.1",

diff --git a/apps/platform/src/app/(main)/page.tsx b/apps/platform/src/app/(main)/page.tsx
@@ -153,7 +153,6 @@ export default function Index(): JSX.Element {
           <DialogTrigger>
             {isProjectEmpty ? null : (
               <Button onClick={toggleDialog}>
-                {' '}
                 <AddSVG /> Create a new Project
               </Button>
             )}

diff --git a/apps/platform/src/app/(main)/project/[project]/@variable/page.tsx b/apps/platform/src/app/(main)/project/[project]/@variable/page.tsx
@@ -159,30 +159,30 @@ function VariablePage({
         <div
           className={`flex h-full w-full flex-col items-center justify-start gap-y-8 p-3 text-white ${isDeleteDialogOpen ? 'inert' : ''} `}
         >
-          {allVariables.map((variable) => (
-            <ContextMenu key={variable.variable.id}>
+          {allVariables.map(({ variable, values }) => (
+            <ContextMenu key={variable.id}>
               <ContextMenuTrigger className="w-full">
                 <Collapsible
                   className="w-full"
-                  key={variable.variable.id}
-                  onOpenChange={() => toggleSection(variable.variable.id)}
-                  open={openSections.has(variable.variable.id)}
+                  key={variable.id}
+                  onOpenChange={() => toggleSection(variable.id)}
+                  open={openSections.has(variable.id)}
                 >
                   <CollapsibleTrigger
-                    className={`flex h-[6.75rem] w-full items-center justify-between gap-24 ${openSections.has(variable.variable.id) ? 'rounded-t-xl' : 'rounded-xl'} bg-[#232424] px-4 py-2 text-left`}
+                    className={`flex h-[6.75rem] w-full items-center justify-between gap-24 ${openSections.has(variable.id) ? 'rounded-t-xl' : 'rounded-xl'} bg-[#232424] px-4 py-2 text-left`}
                   >
                     <div className="flex h-[2.375rem] items-center justify-center gap-4">
                       <span className="h-[2.375rem] text-2xl font-normal text-zinc-100">
-                        {variable.variable.name}
+                        {variable.name}
                       </span>
-                      {variable.variable.note ? (
+                      {variable.note ? (
                         <TooltipProvider>
                           <Tooltip>
                             <TooltipTrigger>
                               <MessageSVG height="40" width="40" />
                             </TooltipTrigger>
                             <TooltipContent className="border-white/20 bg-white/10 text-white backdrop-blur-xl">
-                              <p>{variable.variable.note}</p>
+                              <p>{variable.note}</p>
                             </TooltipContent>
                           </Tooltip>
                         </TooltipProvider>
@@ -195,9 +195,7 @@ function VariablePage({
                             const days = Math.ceil(
                               Math.abs(
                                 new Date().getTime() -
-                                  new Date(
-                                    variable.variable.createdAt
-                                  ).getTime()
+                                  new Date(variable.createdAt).getTime()
                               ) /
                                 (1000 * 60 * 60 * 24)
                             )
@@ -206,23 +204,23 @@ function VariablePage({
                         </div>
                         <div className="flex h-[2.063rem] w-[5.375rem] items-center justify-center gap-x-[0.375rem]">
                           <div className="flex h-[2.063rem] w-[3.5rem] items-center justify-center text-base font-medium text-white">
-                            {variable.variable.lastUpdatedBy.name.split(' ')[0]}
+                            {variable.lastUpdatedBy.name.split(' ')[0]}
                           </div>
                           <Avatar className="h-6 w-6">
                             <AvatarImage />
                             <AvatarFallback>
-                              {variable.variable.lastUpdatedBy.name
+                              {variable.lastUpdatedBy.name
                                 .charAt(0)
                                 .toUpperCase() +
-                                variable.variable.lastUpdatedBy.name
+                                variable.lastUpdatedBy.name
                                   .slice(1, 2)
                                   .toLowerCase()}
                             </AvatarFallback>
                           </Avatar>
                         </div>
                       </div>
                       <ChevronDown
-                        className={`h-[1.5rem] w-[1.5rem] text-zinc-400 transition-transform ${openSections.has(variable.variable.id) ? 'rotate-180' : ''}`}
+                        className={`h-[1.5rem] w-[1.5rem] text-zinc-400 transition-transform ${openSections.has(variable.id) ? 'rotate-180' : ''}`}
                       />
                     </div>
                   </CollapsibleTrigger>
@@ -239,7 +237,7 @@ function VariablePage({
                         </TableRow>
                       </TableHeader>
                       <TableBody>
-                        {variable.values.map((env) => (
+                        {values.map((env) => (
                           <TableRow
                             className="h-[3.125rem] w-full hover:cursor-pointer hover:bg-[#232424]"
                             key={env.environment.id}
@@ -265,17 +263,17 @@ function VariablePage({
                   className="h-[33%] w-[15.938rem] text-xs font-semibold tracking-wide"
                   onSelect={() =>
                     toggleEditDialog(
-                      variable.variable.slug,
-                      variable.variable.name,
-                      variable.variable.note
+                      variable.slug,
+                      variable.name,
+                      variable.note
                     )
                   }
                 >
                   Edit
                 </ContextMenuItem>
                 <ContextMenuItem
                   className="h-[33%] w-[15.938rem] text-xs font-semibold tracking-wide"
-                  onSelect={() => toggleDeleteDialog(variable.variable.slug)}
+                  onSelect={() => toggleDeleteDialog(variable.slug)}
                 >
                   Delete
                 </ContextMenuItem>

diff --git a/apps/platform/src/components/ui/collapsible.tsx b/apps/platform/src/components/ui/collapsible.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import * as React from 'react'
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
 
 const Collapsible = CollapsiblePrimitive.Root

diff --git a/apps/platform/src/components/ui/confirm-delete.tsx b/apps/platform/src/components/ui/confirm-delete.tsx
@@ -1,6 +1,8 @@
 'use client'
 
 import React, { useCallback, useEffect } from 'react'
+import { TrashSVG } from '@public/svg/shared'
+import { toast } from 'sonner'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -11,9 +13,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle
 } from '@/components/ui/alert-dialog'
-import { TrashSVG } from '@public/svg/shared'
 import ControllerInstance from '@/lib/controller-instance'
-import { toast } from 'sonner'
 
 function ConfirmDelete({
   isOpen,
@@ -31,21 +31,21 @@ function ConfirmDelete({
 
     const { success, error } =
       await ControllerInstance.getInstance().variableController.deleteVariable(
-        { variableSlug: variableSlug },
+        { variableSlug },
         {}
       )
 
     if (success) {
       toast.success('Variable deleted successfully', {
-        // eslint-disable-next-line react/no-unstable-nested-components -- we need to nest the description
-        description: () => (
+        description: (
           <p className="text-xs text-emerald-300">
             The variable has been deleted.
           </p>
         )
       })
     }
     if (error) {
+      // eslint-disable-next-line no-console -- we need to log the error
       console.error(error)
     }
 
@@ -59,14 +59,14 @@ function ConfirmDelete({
   }, [])
 
   useEffect(() => {
-    if (!open) {
+    if (!isOpen) {
       cleanup()
     }
     return () => cleanup()
-  }, [open, cleanup])
+  }, [isOpen, cleanup])
 
   return (
-    <AlertDialog open={isOpen} onOpenChange={onClose} aria-hidden={!isOpen}>
+    <AlertDialog aria-hidden={!isOpen} onOpenChange={onClose} open={isOpen}>
       <AlertDialogContent className="rounded-lg border border-white/25 bg-[#18181B] ">
         <AlertDialogHeader>
           <div className="flex items-center gap-x-3">

diff --git a/apps/platform/src/components/ui/edit-variable-dialog.tsx b/apps/platform/src/components/ui/edit-variable-dialog.tsx
@@ -1,6 +1,8 @@
 'use client'
 
 import { useState } from 'react'
+import { toast } from 'sonner'
+import type { UpdateVariableRequest } from '@keyshade/schema'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
@@ -12,9 +14,7 @@ import {
   DialogTitle,
   DialogDescription
 } from '@/components/ui/dialog'
-import { UpdateVariableRequest } from '@keyshade/schema'
 import ControllerInstance from '@/lib/controller-instance'
-import { toast } from 'sonner'
 
 function EditVariableDialog({
   isOpen,
@@ -52,8 +52,7 @@ function EditVariableDialog({
 
     if (success) {
       toast.success('Variable edited successfully', {
-        // eslint-disable-next-line react/no-unstable-nested-components -- we need to nest the description
-        description: () => (
+        description: (
           <p className="text-xs text-emerald-300">
             You successfully edited the variable
           </p>
@@ -70,7 +69,7 @@ function EditVariableDialog({
 
   return (
     <div className="p-4">
-      <Dialog open={isOpen} onOpenChange={onClose}>
+      <Dialog onOpenChange={onClose} open={isOpen}>
         <DialogContent className="bg-[#18181B] p-6 text-white sm:max-w-[506px]">
           <DialogHeader>
             <DialogTitle className="text-base font-bold text-white">
@@ -89,10 +88,10 @@ function EditVariableDialog({
                 Variable Name
               </Label>
               <Input
+                className="w-[20rem] bg-[#262626] text-base font-normal text-white"
                 id="variable-name"
-                value={newVariableName}
                 onChange={(e) => setNewVariableName(e.target.value)}
-                className="w-[20rem] bg-[#262626] text-base font-normal text-white"
+                value={newVariableName}
               />
             </div>
             <div className="flex w-full items-center justify-between gap-6">
@@ -103,17 +102,17 @@ function EditVariableDialog({
                 Extra Note
               </Label>
               <Textarea
+                className="w-[20rem] bg-[#262626] text-base font-normal text-white"
                 id="extra-note"
-                value={extraNote}
                 onChange={(e) => setExtraNote(e.target.value)}
-                className="w-[20rem] bg-[#262626] text-base font-normal text-white"
+                value={extraNote}
               />
             </div>
             <div className="flex justify-end">
               <Button
+                className="rounded-lg border-white/10 bg-[#E0E0E0] text-xs font-semibold text-black hover:bg-gray-200"
                 onClick={updateVariable}
                 variant="secondary"
-                className="rounded-lg border-white/10 bg-[#E0E0E0] text-xs font-semibold text-black hover:bg-gray-200"
               >
                 Save Variable
               </Button>

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml