-
-
Notifications
You must be signed in to change notification settings - Fork 126
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(platform): Show all the existing variables inside a project (#591)
Co-authored-by: kriptonian1 <[email protected]> Co-authored-by: Rajdip Bhattacharya <[email protected]>
- Loading branch information
3 people
authored
Jan 4, 2025
1 parent
18cf765
commit 5276bb8
Showing
12 changed files
with
540 additions
and
735 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
170 changes: 167 additions & 3 deletions
170
apps/platform/src/app/(main)/project/[project]/@variable/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
Oops, something went wrong.