Skip to content

Commit

Permalink
feat(platform): View secrets (#313)
Browse files Browse the repository at this point in the history
  • Loading branch information
kriptonian1 authored and rajdip-b committed Jul 11, 2024
1 parent e66fcd2 commit 97c4541
Show file tree
Hide file tree
Showing 18 changed files with 9,093 additions and 10,690 deletions.
3 changes: 3 additions & 0 deletions apps/platform/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"lint": "next lint --fix"
},
"dependencies": {
"@radix-ui/react-accordion": "^1.2.0",
"@radix-ui/react-avatar": "^1.0.4",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-context-menu": "^2.1.5",
Expand All @@ -23,11 +24,13 @@
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-switch": "^1.0.3",
"@radix-ui/react-tooltip": "^1.1.2",
"@tanstack/react-table": "^8.16.0",
"avvvatars-react": "^0.4.2",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"cmdk": "^1.0.0",
"dayjs": "^1.11.11",
"framer-motion": "^11.1.7",
"geist": "^1.2.2",
"input-otp": "^1.2.4",
Expand Down
4 changes: 4 additions & 0 deletions apps/platform/public/svg/secret/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import SecretLogoSVG from './secretLogo.svg'
import NoteIconSVG from './noteIcon.svg'

export { SecretLogoSVG, NoteIconSVG }
7 changes: 7 additions & 0 deletions apps/platform/public/svg/secret/noteIcon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions apps/platform/public/svg/secret/secretLogo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions apps/platform/src/app/(main)/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ export default function AppLayout({
children: React.ReactNode
}): React.JSX.Element {
return (
<main className="flex h-dvh md:h-[90vh] 2xl:h-[93vh]">
<main className="flex ">
<Sidebar />
<div className="m-8 h-full overflow-clip rounded-[1.125rem] bg-[#161819] md:w-[90vw]">
<div className="m-8 h-dvh overflow-clip rounded-[1.125rem] bg-[#161819] md:h-[90vh] md:w-[90vw] 2xl:h-[93vh]">
<Navbar />
<div className="p-4">{children}</div>
</div>
Expand Down
43 changes: 4 additions & 39 deletions apps/platform/src/app/(main)/page.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
'use client'
import { useEffect, useState } from 'react'
import { z } from 'zod'
import { toast } from 'sonner'
import { useRouter } from 'next/navigation'
import { AddSVG } from '@public/svg/shared'
Expand All @@ -19,49 +18,15 @@ import { Button } from '@/components/ui/button'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { Switch } from '@/components/ui/switch'
import { apiClient } from '@/lib/api-client'
import type { NewProject, ProjectWithoutKeys, Workspace } from '@/types'
import { zProjectWithoutKeys } from '@/types'
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTrigger
} from '@/components/ui/dialog'

async function getProjects(
currentWorkspaceID: string
): Promise<ProjectWithoutKeys[] | [] | undefined> {
try {
const projectData = await apiClient.get<ProjectWithoutKeys[] | []>(
`/project/all/${currentWorkspaceID}`
)
const zProjectWithoutKeysArray = z.array(zProjectWithoutKeys)
const { success, data } = zProjectWithoutKeysArray.safeParse(projectData)
if (!success) {
throw new Error('Invalid data')
}
return data
} catch (error) {
// eslint-disable-next-line no-console -- we need to log the error
console.error(error)
}
}

async function createProject(
newProjectData: NewProject,
currentWorkspaceID: string
): Promise<void> {
try {
await apiClient.post<NewProject>(`/project/${currentWorkspaceID}`, {
newProjectData
})
} catch (error) {
// eslint-disable-next-line no-console -- we need to log the error
console.error(error)
}
}
import { Projects } from '@/lib/api-functions/projects'

export default function Index(): JSX.Element {
const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false)
Expand Down Expand Up @@ -96,7 +61,7 @@ export default function Index(): JSX.Element {
) as Workspace

useEffect(() => {
getProjects(currentWorkspace.id)
Projects.getProjectsbyWorkspaceID(currentWorkspace.id)
.then((data: ProjectWithoutKeys[] | [] | undefined) => {
if (data) {
setProjects(data)
Expand Down Expand Up @@ -169,7 +134,7 @@ export default function Index(): JSX.Element {
<div className="flex w-full justify-end">
<Button
onClick={() => {
createProject(newProjectData, currentWorkspace.id)
Projects.createProject(newProjectData, currentWorkspace.id)
.then(() => {
toast.success('New project added successfully')
router.refresh()
Expand All @@ -195,7 +160,7 @@ export default function Index(): JSX.Element {
config={10}
description={project.description ?? ''}
environment={2}
idForImage={project.id}
id={project.id}
key={project.id}
secret={5}
setIsSheetOpen={setIsSheetOpen}
Expand Down
123 changes: 123 additions & 0 deletions apps/platform/src/app/(main)/project/[project]/@secret/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
'use client'
import React, { useEffect, useState } from 'react'
// import { SecretLogoSVG } from '@public/svg/secret'
import { usePathname } from 'next/navigation'
import dayjs, { extend } from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import { NoteIconSVG } from '@public/svg/secret'
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger
} from '@/components/ui/accordion'
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow
} from '@/components/ui/table'
import { Secrets } from '@/lib/api-functions/secrets'
import type { Secret } from '@/types'
import { ScrollArea } from '@/components/ui/scroll-area'
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger
} from '@/components/ui/tooltip'

extend(relativeTime)

function SecretPage(): React.JSX.Element {
const [allSecrets, setAllSecrets] = useState<Secret[]>()
const pathname = usePathname()

useEffect(() => {
Secrets.getAllSecretbyProjectId(pathname.split('/')[2])
.then((data) => {
setAllSecrets(data)
})
.catch((error) => {
// eslint-disable-next-line no-console -- we need to log the error
console.error(error)
})
}, [pathname])

return (
<ScrollArea className=" mb-4 h-[50rem]">
<Accordion
className="flex h-[50rem] flex-col gap-4"
collapsible
type="single"
>
{allSecrets?.map((secret) => {
return (
<AccordionItem
className="rounded-xl bg-white/5 px-5"
key={secret.secret.id}
value={secret.secret.id}
>
<AccordionTrigger
className="hover:no-underline"
rightChildren={
<div className="text-xs text-white/50">
{dayjs(secret.secret.updatedAt).toNow(true)} ago by{' '}
<span className="text-white">
{secret.secret.lastUpdatedBy.name}
</span>
</div>
}
>
<div className="flex gap-x-5">
<div className="flex items-center gap-x-4">
{/* <SecretLogoSVG /> */}
{secret.secret.name}
</div>
{secret.secret.note ? (
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<NoteIconSVG className="w-7" />
</TooltipTrigger>
<TooltipContent className="border-white/20 bg-white/10 text-white backdrop-blur-xl">
<p>{secret.secret.note}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
) : null}
</div>
</AccordionTrigger>
<AccordionContent>
<Table>
<TableHeader>
<TableRow>
<TableHead>Environment</TableHead>
<TableHead>Secret</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{secret.values.map((value) => {
return (
<TableRow key={value.environment.id}>
<TableCell>{value.environment.name}</TableCell>
<TableCell className="max-w-40 overflow-auto">
{value.value}
</TableCell>
</TableRow>
)
})}
</TableBody>
</Table>
</AccordionContent>
</AccordionItem>
)
})}
</Accordion>
</ScrollArea>
)
}

export default SecretPage
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import React from 'react'

function VariablePage(): React.JSX.Element {
return <div>VariablePage</div>
}

export default VariablePage
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
'use client'
import { useState } from 'react'
import { useEffect, useState } from 'react'
import { useSearchParams } from 'next/navigation'
import { AddSVG } from '@public/svg/shared'
import { Button } from '@/components/ui/button'
import {
Dialog,
Expand All @@ -11,25 +13,45 @@ import {
} from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { AddSVG } from '@public/svg/shared'
import type { Project } from '@/types'
import { Projects } from '@/lib/api-functions/projects'

interface DetailedProjectPageProps {
params: { project: string }
secret: React.ReactNode
variable: React.ReactNode
}

function DetailedProjectPage({
params
params,
secret,
variable
}: DetailedProjectPageProps): JSX.Element {
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- will be used later
const [key, setKey] = useState<string>('')
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- will be used later
const [value, setValue] = useState<string>('')

// eslint-disable-next-line no-console -- //! TODO: remove
console.log(`Key: ${key} Value: ${value}`)
const [currentProject, setCurrentProject] = useState<Project>()

const searchParams = useSearchParams()
const tab = searchParams.get('tab') ?? 'rollup-details'

useEffect(() => {
Projects.getProjectbyID(params.project)
.then((project) => {
setCurrentProject(project)
})
.catch((error) => {
// eslint-disable-next-line no-console -- we need to log the error
console.error(error)
})
}, [params.project])

return (
<div>
<div className="flex justify-between">
<div className="text-3xl">{params.project}</div>
<main className="flex flex-col gap-4">
<div className="flex justify-between ">
<div className="text-3xl">{currentProject?.name}</div>
<Dialog>
<DialogTrigger>
<Button>
Expand Down Expand Up @@ -81,7 +103,11 @@ function DetailedProjectPage({
</DialogContent>
</Dialog>
</div>
</div>
<div>
{tab === 'secret' && secret}
{tab === 'variable' && variable}
</div>
</main>
)
}

Expand Down
8 changes: 4 additions & 4 deletions apps/platform/src/components/dashboard/projectCard/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import {
// } from '@/components/ui/menubar'

interface ProjectCardProps {
idForImage: string
id: string
key: number | string
title: string
description: string
Expand All @@ -34,7 +34,7 @@ interface ProjectCardProps {
}

function ProjectCard({
idForImage,
id,
key,
title,
description,
Expand Down Expand Up @@ -80,12 +80,12 @@ function ProjectCard({
<ContextMenuTrigger className="flex h-[7rem]">
<Link
className="flex h-[7rem] max-w-[30.25rem] justify-between rounded-xl bg-white/5 px-5 py-4 shadow-lg hover:bg-white/10"
href={`/project/${title}`}
href={`/project/${id}?tab=Secret`}
key={key}
>
<div className="flex items-center gap-x-5">
{/* <div className="aspect-square h-14 w-14 rounded-full bg-white/35" /> */}
<Avvvatars size={56} style="shape" value={idForImage} />
<Avvvatars size={56} style="shape" value={id} />
<div>
<div className="font-semibold">{title}</div>
<span className="text-xs font-semibold text-white/60">
Expand Down
Loading

0 comments on commit 97c4541

Please sign in to comment.