feat(platform): Show all the existing variables inside a project

apps/platform/public/svg/shared/index.ts

@@ -7,6 +7,9 @@ import SettingsSVG from './settings.svg'
 import ThreeDotOptionSVG from './3dotOption.svg'
 import AddSVG from './add.svg'
 import LoadingSVG from './loading.svg'
+import MessageSVG from './message.svg'
+import VectorSVG from './vector.svg'
+import ErrorSVG from './Error.svg'
 
 export {
   DropdownSVG,
@@ -17,5 +20,8 @@ export {
   SettingsSVG,
   ThreeDotOptionSVG,
   AddSVG,
-  LoadingSVG
+  LoadingSVG,
+  MessageSVG,
+  VectorSVG,
+  ErrorSVG
 }

apps/platform/src/app/(main)/page.tsx

@@ -38,6 +38,7 @@ import {
   DialogTrigger
 } from '@/components/ui/dialog'
 import ControllerInstance from '@/lib/controller-instance'
+import { Textarea } from '@/components/ui/textarea'
 
 export default function Index(): JSX.Element {
   const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false)
@@ -144,10 +145,12 @@ export default function Index(): JSX.Element {
 
         <Dialog onOpenChange={setIsDialogOpen} open={isDialogOpen}>
           <DialogTrigger>
-            <Button onClick={toggleDialog}>
-              {' '}
-              <AddSVG /> Create a new Project
-            </Button>
+            {isProjectEmpty ? null : (
+              <Button onClick={toggleDialog}>
+                {' '}
+                <AddSVG /> Create a new Project
+              </Button>
+            )}
           </DialogTrigger>
           <DialogContent className="h-[39.5rem] w-[28.625rem] rounded-[12px] border bg-[#1E1E1F] ">
             <div className="flex h-[3.125rem] w-[25.625rem] flex-col items-start justify-center">
@@ -190,8 +193,8 @@ export default function Index(): JSX.Element {
                   >
                     Description
                   </Label>
-                  <Input
-                    className="col-span-3 h-[5.625rem] w-[20rem] gap-[0.25rem]"
+                  <Textarea
+                    className="col-span-3 h-[5.625rem] w-[20rem] resize-none gap-[0.25rem]"
                     id="name"
                     onChange={(e) => {
                       setNewProjectData((prev) => ({
@@ -217,7 +220,10 @@ export default function Index(): JSX.Element {
                     onChange={(e) => {
                       setNewProjectData((prev) => ({
                         ...prev,
-                        envName: e.target.value
+                        environments: (prev.environments || []).map(
+                          (env, index) =>
+                            index === 0 ? { ...env, name: e.target.value } : env
+                        )
                       }))
                     }}
                     placeholder="Your project default environment name"
@@ -232,13 +238,18 @@ export default function Index(): JSX.Element {
                   >
                     Env. Description
                   </Label>
-                  <Input
-                    className="col-span-3 h-[4.875rem] w-[20rem] "
+                  <Textarea
+                    className="col-span-3 h-[4.875rem] w-[20rem] resize-none"
                     id="envDescription"
                     onChange={(e) => {
                       setNewProjectData((prev) => ({
                         ...prev,
-                        envDescription: e.target.value
+                        environments: (prev.environments || []).map(
+                          (env, index) =>
+                            index === 0
+                              ? { ...env, description: e.target.value }
+                              : env
+                        )
                       }))
                     }}
                     placeholder="Detailed description about your environment"
@@ -265,7 +276,7 @@ export default function Index(): JSX.Element {
                       }))
                     }}
                   >
-                    <SelectTrigger className=" h-[2.25rem] w-[20rem] rounded-[0.375rem] border-[0.013rem] border-white/10 focus:border-[#3b82f6]">
+                    <SelectTrigger className=" h-[2.25rem] w-[20rem] rounded-[0.375rem] border-[0.013rem] border-white/10 bg-white/5 focus:border-[#3b82f6]">
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent className="border-[0.013rem] border-white/10 bg-neutral-800 text-white ">
@@ -334,7 +345,9 @@ export default function Index(): JSX.Element {
           <div>
             Create a file and start setting up your environment and secret keys
           </div>
-          <Button variant="secondary">Create project</Button>
+          <Button onClick={toggleDialog} variant="secondary">
+            Create project
+          </Button>
         </div>
       )}
 

apps/platform/src/app/(main)/project/[project]/@variable/page.tsx

@@ -1,7 +1,171 @@
-import React from 'react'
+'use client'
 
-function VariablePage(): React.JSX.Element {
-  return <div>VariablePage</div>
+import { useEffect, useState } from 'react'
+import { Button } from '@/components/ui/button'
+import {
+  ClientResponse,
+  GetAllVariablesOfProjectResponse,
+  Project,
+} from '@keyshade/schema'
+import { FolderSVG } from '@public/svg/dashboard'
+import { MessageSVG } from '@public/svg/shared'
+import { ChevronDown } from 'lucide-react'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@/components/ui/table'
+import ControllerInstance from '@/lib/controller-instance'
+
+interface VariablePageProps {
+  currentProject: Project | undefined
+}
+
+
+function VariablePage({
+  currentProject
+}: VariablePageProps): React.JSX.Element {
+
+  const [allVariables, setAllVariables] = useState<GetAllVariablesOfProjectResponse['items']>([])
+  // Holds the currently open section ID
+  const [openSections, setOpenSections] = useState<Set<string>>(new Set())
+
+  //Environments table toggle logic
+  const toggleSection = (id: string) => {
+    setOpenSections((prev) => {
+      const newSet = new Set(prev)
+      if (newSet.has(id)) {
+        newSet.delete(id)
+      } else {
+        newSet.add(id)
+      }
+      return newSet
+    })
+  }
+
+  useEffect(() => {
+
+    const getAllVariables = async () => {
+
+      if (!currentProject) {
+        return
+      }
+
+      const { success, error, data }: ClientResponse<GetAllVariablesOfProjectResponse> = 
+      await ControllerInstance.getInstance().variableController.getAllVariablesOfProject(
+          { projectSlug: currentProject.slug },
+          {}
+        )
+
+      if (success && data) {
+        setAllVariables(data.items)
+      } else {
+        // eslint-disable-next-line no-console -- we need to log the error
+        console.error(error)
+      }
+    }
+
+    getAllVariables()
+  }, [currentProject])
+
+  return (
+    <div className="flex h-full w-full justify-center  ">
+
+      {/* Showing this when there are no variables present */}
+      {allVariables.length === 0 ? (
+        <div className="flex h-[23.75rem] w-[30.25rem] flex-col items-center justify-center gap-y-8">
+          <FolderSVG width="150" />
+
+          <div className="flex h-[5rem] w-[30.25rem] flex-col items-center justify-center gap-4">
+            <p className="h-[2.5rem] w-[30.25rem] text-center text-[32px] font-[400]">
+              Declare your first variable
+            </p>
+            <p className="h-[1.5rem] w-[30.25rem] text-center text-[16px] font-[500]">
+              Declare and store a variable against different environments
+            </p>
+          </div>
+
+          <Button className="h-[2.25rem] w-[8rem] rounded-md bg-white text-black hover:bg-gray-300">
+            Create variable
+          </Button>
+        </div>
+      ) : (
+        // Showing this when variables are present
+        <div className="flex h-full w-full flex-col items-center justify-start gap-y-8 text-white p-3">
+          {allVariables.map((variable) => (
+            <Collapsible
+              key={variable.variable.id}
+              open={openSections.has(variable.variable.id)}
+              onOpenChange={() => toggleSection(variable.variable.id)}
+              className="w-full"
+            >
+              <CollapsibleTrigger className={`h-[6.75rem] w-full gap-24 flex items-center justify-between ${openSections.has(variable.variable.id) ? 'rounded-t-xl' : 'rounded-xl'} bg-[#232424] px-4 py-2 text-left`}>
+                <div className="h-[2.375rem] flex justify-center items-center gap-4">
+                  <span className="h-[2.375rem] text-2xl font-normal text-zinc-100">
+                    {variable.variable.name} 
+                  </span>
+                  <MessageSVG height="40" width="40" />
+                </div>
+                <div className="h-[6.5rem] w-[18.188rem] flex justify-center items-center gap-x-[3.125rem]">
+                  <div className="h-[2.063rem] w-[13.563rem] flex justify-center items-center gap-x-3">
+                    <div className="flex justify-center items-center h-[2.063rem] w-[7.438rem] text-base font-normal text-white text-opacity-50">
+                      {(() => {
+                        const days = Math.ceil(Math.abs(new Date().getTime() - new Date(variable.variable.createdAt).getTime()) / (1000 * 60 * 60 * 24));
+                        return `${days} ${days === 1 ? 'day' : 'days'} ago by`;
+                      })()}
+                    </div>
+                    <div className="flex justify-center items-center h-[2.063rem] w-[5.375rem] gap-x-[0.375rem]">
+                      <div className="flex justify-center items-center h-[2.063rem] w-[3.5rem] text-base text-white font-medium">
+                        {variable.variable.lastUpdatedBy.name.split(' ')[0]}
+                      </div>
+                      <Avatar className="h-6 w-6">
+                        <AvatarImage />
+                        <AvatarFallback>
+                          {variable.variable.lastUpdatedBy.name.charAt(0).toUpperCase() + variable.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' : ''}`} />
+                </div>
+              </CollapsibleTrigger>
+              <CollapsibleContent className="gap-y-24 h-full w-full rounded-b-lg bg-[#232424] p-4">
+                {variable.values ? (
+                  <Table className="h-full w-full">
+                    <TableHeader className="h-[3.125rem] w-full">
+                      <TableRow className="h-[3.125rem] w-full hover:bg-[#232424]">
+                        <TableHead className="h-full w-[10.25rem] border-2 border-white/30 text-white text-base font-bold">Environment</TableHead>
+                        <TableHead className="h-full border-2 border-white/30 text-white text-base font-normal">Value</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {variable.values.map((env) => (
+                        <TableRow key={env.environment.id} className="h-[3.125rem] w-full hover:bg-[#232424] hover:cursor-pointer">
+                          <TableCell className="h-full w-[10.25rem] border-2 border-white/30 text-white text-base font-bold">
+                            {env.environment.name}
+                          </TableCell>
+                          <TableCell className="h-full border-2 border-white/30 text-white text-base font-normal">
+                            {env.value}
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                ) : (
+                  <></>
+                )}
+              </CollapsibleContent>
+            </Collapsible>
+          ))}
+        </div>
+      )}
+    </div>
+  )
 }
 
 export default VariablePage