Skip to content

Commit

Permalink
feat: edit existing variables in a project
Browse files Browse the repository at this point in the history
  • Loading branch information
poswalsameer committed Dec 31, 2024
1 parent 31f4084 commit e16e169
Show file tree
Hide file tree
Showing 2 changed files with 163 additions and 13 deletions.
55 changes: 42 additions & 13 deletions apps/platform/src/app/(main)/project/[project]/@variable/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import {
ContextMenuItem,
ContextMenuTrigger
} from '@/components/ui/context-menu'
import EditVariableDialog from '@/components/ui/edit-variable-dialog'

interface VariablePageProps {
currentProject: Project | undefined
Expand All @@ -46,6 +47,7 @@ function VariablePage({
// Holds the currently open section ID
const [openSections, setOpenSections] = useState<Set<string>>(new Set())
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState<boolean>(false)
const [isEditDialogOpen, setIsEditDialogOpen] = useState<boolean>(false)
const [selectedVariableSlug, setSelectedVariableSlug] = useState<string | null>(null)

//Environments table toggle logic
Expand All @@ -61,16 +63,27 @@ function VariablePage({
})
}

const openDeleteDialog = (variableSlug: string) => {
setIsDeleteDialogOpen(true)
setSelectedVariableSlug(variableSlug)
const toggleDeleteDialog = (variableSlug: string) => {
setIsDeleteDialogOpen(!isDeleteDialogOpen)
if( selectedVariableSlug === null ){
setSelectedVariableSlug(variableSlug)
}
else{
setSelectedVariableSlug(null)
}
}

const closeDeleteDialog = () => {
setIsDeleteDialogOpen(false)
setSelectedVariableSlug(null)
const toggleEditDialog = (variableSlug: string) => {
setIsEditDialogOpen(!isEditDialogOpen)
if( selectedVariableSlug === null ){
setSelectedVariableSlug(variableSlug)
}
else{
setSelectedVariableSlug(null)
}
}


useEffect(() => {
const getAllVariables = async () => {
if (!currentProject) {
Expand Down Expand Up @@ -99,7 +112,9 @@ function VariablePage({
}, [currentProject, allVariables])

return (
<div className={` flex h-full w-full justify-center ${isDeleteDialogOpen ? "inert" : "" } `}>
<div
className={` flex h-full w-full justify-center ${isDeleteDialogOpen ? 'inert' : ''} `}
>
{/* 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">
Expand All @@ -120,7 +135,9 @@ function VariablePage({
</div>
) : (
// Showing this when variables are present
<div className={`flex h-full w-full flex-col items-center justify-start gap-y-8 p-3 text-white ${isDeleteDialogOpen ? "inert" : "" } `}>
<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}>
<ContextMenuTrigger className="w-full">
Expand Down Expand Up @@ -220,33 +237,45 @@ function VariablePage({
Show Version History
</ContextMenuItem>
<ContextMenuItem
onSelect={() => console.log('Edit variable')}
onSelect={() => toggleEditDialog(variable.variable.slug)}
className="h-[33%] w-[15.938rem] text-xs font-semibold tracking-wide"
>
Edit
</ContextMenuItem>
<ContextMenuItem
onSelect={() => openDeleteDialog(variable.variable.slug)}
onSelect={() => toggleDeleteDialog(variable.variable.slug)}
className="h-[33%] w-[15.938rem] text-xs font-semibold tracking-wide"
>
Delete
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
))}

{/* Delete variable alert dialog */}
{isDeleteDialogOpen && (
<ConfirmDelete
isOpen={isDeleteDialogOpen}
onClose={closeDeleteDialog}
//Passing an empty string just to bypass the error -- we don't need the variableSlug while closing the dialog
onClose={() => toggleDeleteDialog('')}
variableSlug={selectedVariableSlug}
/>
)}

{/* Edit variable dialog */}
{isEditDialogOpen && (
<EditVariableDialog
isOpen={isEditDialogOpen}
//Passing an empty string just to bypass the error -- we don't need the variableSlug while closing the dialog
onClose={() => toggleEditDialog('')}
variableSlug={selectedVariableSlug}
/>
)}

</div>
)}
</div>
)
}

export default VariablePage
export default VariablePage
121 changes: 121 additions & 0 deletions apps/platform/src/components/ui/edit-variable-dialog.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
'use client'

import { useState } from 'react'
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
} from "@/components/ui/dialog"
import { UpdateVariableRequest } from '@keyshade/schema'
import ControllerInstance from '@/lib/controller-instance'
import { toast } from 'sonner'

function EditVariableDialog({
isOpen,
onClose,
variableSlug
}: {
isOpen: boolean
onClose: () => void
variableSlug: string | null
}) {

const [variableName, setVariableName] = useState<string>("")
const [extraNote, setExtraNote] = useState<string>("")

const updateVariable = async () => {

if( variableSlug === null ){
return
}

const request: UpdateVariableRequest = {
variableSlug,
name: variableName === '' ? undefined : variableName,
note: extraNote === '' ? undefined : extraNote,
entries: undefined,
}

const { success, error } = await ControllerInstance.getInstance().variableController.updateVariable(
request,
{}
)

if( success ){
toast.success('Variable edited successfully', {
// eslint-disable-next-line react/no-unstable-nested-components -- we need to nest the description
description: () => (
<p className="text-xs text-emerald-300">
You successfully edited the variable
</p>
)
})
}
if( error ){
// eslint-disable-next-line no-console -- we need to log the error
console.error("Error while updating variable: ", error)
}

onClose()

}

return (
<div className="p-4">
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="bg-[#18181B] text-white sm:max-w-[506px] p-6">
<DialogHeader>
<DialogTitle className='text-base font-bold text-white'>Edit this variable</DialogTitle>
<DialogDescription className="text-sm font-normal text-white/60">
Edit the variable name or the note
</DialogDescription>
</DialogHeader>
<div className="space-y-6 pt-4">
<div className="w-full flex justify-between items-center gap-6">
<Label
className="text-base font-semibold text-white w-[7.125rem]"
htmlFor="variable-name">
Variable Name
</Label>
<Input
id="variable-name"
value={variableName}
onChange={(e) => setVariableName(e.target.value)}
className="w-[20rem] bg-[#262626] text-base font-normal text-white"
/>
</div>
<div className="w-full flex justify-between items-center gap-6">
<Label
className="text-base font-semibold text-white w-[7.125rem]"
htmlFor="extra-note">
Extra Note
</Label>
<Textarea
id="extra-note"
value={extraNote}
onChange={(e) => setExtraNote(e.target.value)}
className="w-[20rem] bg-[#262626] text-base font-normal text-white"
/>
</div>
<div className="flex justify-end">
<Button
onClick={updateVariable}
variant="secondary"
className="bg-[#E0E0E0] border-white/10 hover:bg-gray-200 rounded-lg text-xs font-semibold text-black">
Save Variable
</Button>
</div>
</div>
</DialogContent>
</Dialog>
</div>
)
}

export default EditVariableDialog

0 comments on commit e16e169

Please sign in to comment.