Skip to content

Commit

Permalink
added tooltip and modified the edit dialog component to show the curr…
Browse files Browse the repository at this point in the history 
…ent value of variable name and note
  • Loading branch information
@poswalsameer
poswalsameer committed Jan 3, 2025
1 parent e16e169 commit 9903c8d
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 70 deletions.
49 changes: 35 additions & 14 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 @@ -33,11 +33,17 @@ import {
ContextMenuTrigger
} from '@/components/ui/context-menu'
import EditVariableDialog from '@/components/ui/edit-variable-dialog'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'

interface VariablePageProps {
currentProject: Project | undefined
}

interface EditVariableDetails {
variableName: string;
variableNote: string;
}

function VariablePage({
currentProject
}: VariablePageProps): React.JSX.Element {
Expand All @@ -49,6 +55,10 @@ function VariablePage({
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState<boolean>(false)
const [isEditDialogOpen, setIsEditDialogOpen] = useState<boolean>(false)
const [selectedVariableSlug, setSelectedVariableSlug] = useState<string | null>(null)
const [editVariableDetails, setEditVariableDetails] = useState<EditVariableDetails>({
variableName: '',
variableNote: '',
})

//Environments table toggle logic
const toggleSection = (id: string) => {
Expand All @@ -65,25 +75,24 @@ function VariablePage({

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

const toggleEditDialog = (variableSlug: string) => {
const toggleEditDialog = (variableSlug: string, variableName: string, variableNote: string | null) => {
setIsEditDialogOpen(!isEditDialogOpen)
if( selectedVariableSlug === null ){
if (selectedVariableSlug === null) {
setSelectedVariableSlug(variableSlug)
}
else{
setEditVariableDetails({ variableName, variableNote: variableNote ?? '' })
} else {
setSelectedVariableSlug(null)
setEditVariableDetails({variableName: '', variableNote: ''})
}
}


useEffect(() => {
const getAllVariables = async () => {
if (!currentProject) {
Expand Down Expand Up @@ -154,7 +163,18 @@ function VariablePage({
<span className="h-[2.375rem] text-2xl font-normal text-zinc-100">
{variable.variable.name}
</span>
<MessageSVG height="40" width="40" />
{variable.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.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">
Expand Down Expand Up @@ -237,7 +257,7 @@ function VariablePage({
Show Version History
</ContextMenuItem>
<ContextMenuItem
onSelect={() => toggleEditDialog(variable.variable.slug)}
onSelect={() => toggleEditDialog(variable.variable.slug, variable.variable.name, variable.variable.note)}
className="h-[33%] w-[15.938rem] text-xs font-semibold tracking-wide"
>
Edit
Expand All @@ -264,14 +284,15 @@ function VariablePage({

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

</div>
)}
</div>
Expand Down
119 changes: 63 additions & 56 deletions apps/platform/src/components/ui/edit-variable-dialog.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,113 +1,120 @@
'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 { 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"
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,
onClose,
variableSlug,
variableName,
variableNote,
}: {
isOpen: boolean
onClose: () => void
variableSlug: string | null
isOpen: boolean
onClose: () => void
variableSlug: string | null
variableName: string
variableNote: string
}) {

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

const updateVariable = async () => {

if( variableSlug === null ){
return
if (variableSlug === null) {
return
}

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

const { success, error } = await ControllerInstance.getInstance().variableController.updateVariable(
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 (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)
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">
<DialogContent className="bg-[#18181B] p-6 text-white sm:max-w-[506px]">
<DialogHeader>
<DialogTitle className='text-base font-bold text-white'>Edit this variable</DialogTitle>
<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">
<div className="flex w-full items-center justify-between gap-6">
<Label
className="w-[7.125rem] text-base font-semibold text-white"
htmlFor="variable-name"
>
Variable Name
</Label>
<Input
<Input
id="variable-name"
value={variableName}
onChange={(e) => setVariableName(e.target.value)}
value={newVariableName}
onChange={(e) => setNewVariableName(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">
<div className="flex w-full items-center justify-between gap-6">
<Label
className="w-[7.125rem] text-base font-semibold text-white"
htmlFor="extra-note"
>
Extra Note
</Label>
<Textarea
<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">
<Button
onClick={updateVariable}
variant="secondary"
className="rounded-lg border-white/10 bg-[#E0E0E0] text-xs font-semibold text-black hover:bg-gray-200"
>
Save Variable
</Button>
</div>
Expand All @@ -118,4 +125,4 @@ function EditVariableDialog({
)
}

export default EditVariableDialog
export default EditVariableDialog

0 comments on commit 9903c8d

Please sign in to comment.