Skip to content

Commit

Permalink
feat(platform): Update table ui and change variable to accordion (#676)
Browse files Browse the repository at this point in the history 
Co-authored-by: Rajdip Bhattacharya <[email protected]>
  • Loading branch information
@kriptonian1 @rajdip-b
kriptonian1 and rajdip-b authored Jan 30, 2025
1 parent c2398a6 commit 71e9ae9
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 117 deletions.
22 changes: 14 additions & 8 deletions apps/platform/src/app/(main)/project/[project]/@variable/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import ConfirmDeleteVariable from '@/components/dashboard/variable/confirmDelete
import EditVariableDialog from '@/components/dashboard/variable/editVariableDialogue'
import ControllerInstance from '@/lib/controller-instance'
import { Button } from '@/components/ui/button'
import { Accordion } from '@/components/ui/accordion'

function VariablePage(): React.JSX.Element {
const setIsCreateVariableOpen = useSetAtom(createVariableOpenAtom)
Expand Down Expand Up @@ -102,14 +103,19 @@ function VariablePage(): React.JSX.Element {
<div
className={`flex h-full w-full flex-col items-center justify-start gap-y-8 p-3 text-white ${isDeleteVariableOpen ? 'inert' : ''} `}
>
{variables.map(({ variable, values }) => (
<VariableCard
key={variable.id}
values={values}
variable={variable}
/>
))}

<Accordion
className="flex h-fit w-full flex-col gap-4"
collapsible
type="single"
>
{variables.map(({ variable, values }) => (
<VariableCard
key={variable.id}
values={values}
variable={variable}
/>
))}
</Accordion>
{/* Delete variable alert dialog */}
{isDeleteVariableOpen && selectedVariable ? (
<ConfirmDeleteVariable />
Expand Down
20 changes: 13 additions & 7 deletions apps/platform/src/components/dashboard/secret/secretCard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,31 +68,37 @@ export default function SecretCard({
</AccordionTrigger>
<AccordionContent>
<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-base font-bold text-white">
<TableHeader className="h-[3.125rem] w-full ">
<TableRow className="h-full w-full bg-white/10 ">
<TableHead className="h-full w-[10.25rem] rounded-tl-xl text-base font-bold text-white/50">
Environment
</TableHead>
<TableHead className="h-full border-2 border-white/30 text-base font-normal text-white">
<TableHead className="h-full text-base font-normal text-white/50">
Value
</TableHead>
<TableHead className="h-full rounded-tr-xl text-base font-normal text-white/50">
Version
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{values.map((value) => {
return (
<TableRow
className="h-[3.125rem] w-full hover:cursor-pointer hover:bg-[#232424]"
className="h-[3.125rem] w-full hover:bg-white/5"
key={value.environment.id}
>
<TableCell className="h-full w-[10.25rem] border-2 border-white/30 text-base font-bold text-white">
<TableCell className="h-full w-[10.25rem] text-base">
{value.environment.name}
</TableCell>
<TableCell className="h-full border-2 border-white/30 text-base font-normal text-white">
<TableCell className="h-full text-base">
{isDecrypted
? value.value
: value.value.replace(/./g, '*').substring(0, 20)}
</TableCell>
<TableCell className="h-full px-8 py-4 text-base">
{value.version}
</TableCell>
</TableRow>
)
})}
Expand Down
171 changes: 69 additions & 102 deletions apps/platform/src/components/dashboard/variable/variableCard/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,7 @@
import type { GetAllVariablesOfProjectResponse } from '@keyshade/schema'
import { MessageSVG } from '@public/svg/shared'
import { ChevronDown } from 'lucide-react'
import { useState } from 'react'
import { useSetAtom } from 'jotai'
import dayjs from 'dayjs'
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger
} from '@/components/ui/collapsible'
import { NoteIconSVG } from '@public/svg/secret'
import {
Table,
TableBody,
Expand All @@ -20,21 +13,24 @@ import {
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuTrigger
ContextMenuItem
} from '@/components/ui/context-menu'
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger
} from '@/components/ui/tooltip'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import {
deleteVariableOpenAtom,
editVariableOpenAtom,
selectedVariableAtom
} from '@/store'
import {
AccordionContent,
AccordionItem,
AccordionTrigger
} from '@/components/ui/accordion'

export default function VariableCard(
variableData: GetAllVariablesOfProjectResponse['items'][number]
Expand All @@ -55,105 +51,76 @@ export default function VariableCard(
setIsDeleteVariableOpen(true)
}

// 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
})
}

return (
<ContextMenu key={variable.id}>
<ContextMenuTrigger className="w-full">
<Collapsible
className="w-full"
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.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.name}
</span>
{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.note}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
) : null}
</div>
<div className="flex h-[6.5rem] w-[18.188rem] items-center justify-center gap-x-[3.125rem]">
<div className="flex h-[2.063rem] w-[13.563rem] items-center justify-center gap-x-3">
<div className="flex h-[2.063rem] w-[7.438rem] items-center justify-center text-base font-normal text-white text-opacity-50">
{dayjs(variable.updatedAt).toNow(true)} ago by{' '}
</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.lastUpdatedBy.name.split(' ')[0]}
</div>
<Avatar className="h-6 w-6">
<AvatarImage />
<AvatarFallback>
{variable.lastUpdatedBy.name.charAt(0).toUpperCase() +
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.id) ? 'rotate-180' : ''}`}
/>
<AccordionItem
className="rounded-xl bg-white/5 px-5"
key={variable.id}
value={variable.id}
>
<AccordionTrigger
className="hover:no-underline"
rightChildren={
<div className="text-xs text-white/50">
{dayjs(variable.updatedAt).toNow(true)} ago by{' '}
<span className="text-white">{variable.lastUpdatedBy.name}</span>
</div>
</CollapsibleTrigger>
<CollapsibleContent className="h-full w-full gap-y-24 rounded-b-lg bg-[#232424] p-4">
<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-base font-bold text-white">
Environment
</TableHead>
<TableHead className="h-full border-2 border-white/30 text-base font-normal text-white">
Value
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{values.map((env) => (
}
>
<div className="flex gap-x-5">
<div className="flex items-center gap-x-4">{variable.name}</div>
{variable.note ? (
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<NoteIconSVG className="w-7" />
</TooltipTrigger>
<TooltipContent className="border-white/20 bg-white/10 text-white backdrop-blur-xl">
<p>{variable.note}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
) : null}
</div>
</AccordionTrigger>
<AccordionContent>
<Table className="h-full w-full">
<TableHeader className="h-[3.125rem] w-full ">
<TableRow className="h-full w-full bg-white/10 ">
<TableHead className="h-full w-[10.25rem] rounded-tl-xl text-base font-bold text-white/50">
Environment
</TableHead>
<TableHead className="h-full text-base font-normal text-white/50">
Value
</TableHead>
<TableHead className="h-full rounded-tr-xl text-base font-normal text-white/50">
Version
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{values.map((value) => {
return (
<TableRow
className="h-[3.125rem] w-full hover:cursor-pointer hover:bg-[#232424]"
key={env.environment.id}
className="h-[3.125rem] w-full hover:bg-white/5"
key={value.environment.id}
>
<TableCell className="h-full w-[10.25rem] border-2 border-white/30 text-base font-bold text-white">
{env.environment.name}
<TableCell className="h-full w-[10.25rem] text-base">
{value.environment.name}
</TableCell>
<TableCell className="h-full text-base">
{value.value}
</TableCell>
<TableCell className="h-full border-2 border-white/30 text-base font-normal text-white">
{env.value}
<TableCell className="h-full px-8 py-4 text-base">
{value.version}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</CollapsibleContent>
</Collapsible>
</ContextMenuTrigger>
)
})}
</TableBody>
</Table>
</AccordionContent>
</AccordionItem>
<ContextMenuContent className="flex h-[6.375rem] w-[15.938rem] flex-col items-center justify-center rounded-lg bg-[#3F3F46]">
<ContextMenuItem className="h-[33%] w-[15.938rem] border-b-[0.025rem] border-white/65 text-xs font-semibold tracking-wide">
Show Version History
Expand Down

0 comments on commit 71e9ae9

Please sign in to comment.