From 15fb01089b4eb43509d45831947ebe0819ffd1b0 Mon Sep 17 00:00:00 2001
From: = <akhilmhdh@gmail.com>
Date: Wed, 7 Aug 2024 13:15:53 +0530
Subject: [PATCH] feat: name removal in tag respective changes in frontend

---
 .../tags/CreateTagModal/CreateTagModal.tsx    | 22 +++++++++------
 frontend/src/hooks/api/tags/queries.tsx       |  3 +--
 frontend/src/hooks/api/tags/types.ts          |  2 --
 .../SecretApprovalRequestChangeItem.tsx       | 12 ++++-----
 .../components/ActionBar/ActionBar.tsx        |  4 +--
 .../SecretListView/SecretDetaiSidebar.tsx     |  8 +++---
 .../components/SecretListView/SecretItem.tsx  |  4 +--
 .../SecretListView/SecretListView.utils.ts    |  1 -
 .../components/SnapshotView/SecretItem.tsx    |  8 +++---
 .../SecretTagsSection/AddSecretTagModal.tsx   | 27 ++++++++++---------
 .../SecretTagsSection/SecretTagsTable.tsx     |  8 +++---
 11 files changed, 50 insertions(+), 49 deletions(-)

diff --git a/frontend/src/components/tags/CreateTagModal/CreateTagModal.tsx b/frontend/src/components/tags/CreateTagModal/CreateTagModal.tsx
index c65229a86..5eabb093d 100644
--- a/frontend/src/components/tags/CreateTagModal/CreateTagModal.tsx
+++ b/frontend/src/components/tags/CreateTagModal/CreateTagModal.tsx
@@ -3,6 +3,7 @@ import { Controller, useForm } from "react-hook-form";
 import { faCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
+import slugify from "@sindresorhus/slugify";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
@@ -87,7 +88,13 @@ type Props = {
 };
 
 const createTagSchema = z.object({
-  name: z.string().trim(),
+  slug: z
+    .string()
+    .trim()
+    .toLowerCase()
+    .refine((v) => slugify(v) === v, {
+      message: "Invalid slug. Should contain only characters, numbers and hyphen."
+    }),
   color: z.string().trim()
 });
 
@@ -110,7 +117,7 @@ export const CreateTagModal = ({ isOpen, onToggle }: Props): JSX.Element => {
   } = useForm<FormData>({
     resolver: zodResolver(createTagSchema)
   });
-  
+
   const { currentWorkspace } = useWorkspace();
   const workspaceId = currentWorkspace?.id || "";
 
@@ -123,13 +130,12 @@ export const CreateTagModal = ({ isOpen, onToggle }: Props): JSX.Element => {
     if (!isOpen) reset();
   }, [isOpen]);
 
-  const onFormSubmit = async ({ name, color }: FormData) => {
+  const onFormSubmit = async ({ slug, color }: FormData) => {
     try {
       await createWsTag({
         workspaceID: workspaceId,
-        tagName: name,
         tagColor: color,
-        tagSlug: name.replace(" ", "_")
+        tagSlug: slug
       });
       onToggle(false);
       reset();
@@ -155,11 +161,11 @@ export const CreateTagModal = ({ isOpen, onToggle }: Props): JSX.Element => {
         <form onSubmit={handleSubmit(onFormSubmit)}>
           <Controller
             control={control}
-            name="name"
+            name="slug"
             defaultValue=""
             render={({ field, fieldState: { error } }) => (
-              <FormControl label="Tag Name" isError={Boolean(error)} errorText={error?.message}>
-                <Input {...field} placeholder="Type your tag name" />
+              <FormControl label="Tag Slug" isError={Boolean(error)} errorText={error?.message}>
+                <Input {...field} placeholder="Type your tag slug" />
               </FormControl>
             )}
           />
diff --git a/frontend/src/hooks/api/tags/queries.tsx b/frontend/src/hooks/api/tags/queries.tsx
index 311ed0941..d1c4b533d 100644
--- a/frontend/src/hooks/api/tags/queries.tsx
+++ b/frontend/src/hooks/api/tags/queries.tsx
@@ -28,11 +28,10 @@ export const useCreateWsTag = () => {
   const queryClient = useQueryClient();
 
   return useMutation<WsTag, {}, CreateTagDTO>({
-    mutationFn: async ({ workspaceID, tagName, tagColor, tagSlug }) => {
+    mutationFn: async ({ workspaceID, tagColor, tagSlug }) => {
       const { data } = await apiRequest.post<{ workspaceTag: WsTag }>(
         `/api/v1/workspace/${workspaceID}/tags`,
         {
-          name: tagName,
           color: tagColor || "",
           slug: tagSlug
         }
diff --git a/frontend/src/hooks/api/tags/types.ts b/frontend/src/hooks/api/tags/types.ts
index 9b4f70587..72d710cfa 100644
--- a/frontend/src/hooks/api/tags/types.ts
+++ b/frontend/src/hooks/api/tags/types.ts
@@ -2,7 +2,6 @@ export type UserWsTags = WsTag[];
 
 export type WsTag = {
   id: string;
-  name: string;
   slug: string;
   color?: string;
   projectId: string;
@@ -16,7 +15,6 @@ export type WorkspaceTag = { id: string; name: string; slug: string };
 export type CreateTagDTO = {
   workspaceID: string;
   tagSlug: string;
-  tagName: string;
   tagColor: string;
 };
 
diff --git a/frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx b/frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx
index 3fbe4357b..6adf591e7 100644
--- a/frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx
+++ b/frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx
@@ -97,7 +97,7 @@ export const SecretApprovalRequestChangeItem = ({
                 </Td>
                 <Td>{secretVersion?.secretComment}</Td>
                 <Td>
-                  {secretVersion?.tags?.map(({ name, id: tagId, color }) => (
+                  {secretVersion?.tags?.map(({ slug, id: tagId, color }) => (
                     <Tag
                       className="flex w-min items-center space-x-2"
                       key={`${secretVersion.id}-${tagId}`}
@@ -106,7 +106,7 @@ export const SecretApprovalRequestChangeItem = ({
                         className="h-3 w-3 rounded-full"
                         style={{ backgroundColor: color || "#bec2c8" }}
                       />
-                      <div className="text-sm">{name}</div>
+                      <div className="text-sm">{slug}</div>
                     </Tag>
                   ))}
                 </Td>
@@ -119,7 +119,7 @@ export const SecretApprovalRequestChangeItem = ({
                 </Td>
                 <Td>{newVersion?.secretComment}</Td>
                 <Td>
-                  {newVersion?.tags?.map(({ name, id: tagId, color }) => (
+                  {newVersion?.tags?.map(({ slug, id: tagId, color }) => (
                     <Tag
                       className="flex w-min items-center space-x-2"
                       key={`${newVersion.id}-${tagId}`}
@@ -128,7 +128,7 @@ export const SecretApprovalRequestChangeItem = ({
                         className="h-3 w-3 rounded-full"
                         style={{ backgroundColor: color || "#bec2c8" }}
                       />
-                      <div className="text-sm">{name}</div>
+                      <div className="text-sm">{slug}</div>
                     </Tag>
                   ))}
                 </Td>
@@ -157,7 +157,7 @@ export const SecretApprovalRequestChangeItem = ({
                 </Td>
                 <Td>
                   {(op === CommitType.CREATE ? newVersion?.tags : secretVersion?.tags)?.map(
-                    ({ name, id: tagId, color }) => (
+                    ({ slug, id: tagId, color }) => (
                       <Tag
                         className="flex w-min items-center space-x-2"
                         key={`${
@@ -168,7 +168,7 @@ export const SecretApprovalRequestChangeItem = ({
                           className="h-3 w-3 rounded-full"
                           style={{ backgroundColor: color || "#bec2c8" }}
                         />
-                        <div className="text-sm">{name}</div>
+                        <div className="text-sm">{slug}</div>
                       </Tag>
                     )
                   )}
diff --git a/frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx b/frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx
index 705234f63..65cb0389f 100644
--- a/frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx
+++ b/frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx
@@ -327,7 +327,7 @@ export const ActionBar = ({
                 </DropdownSubMenuTrigger>
                 <DropdownSubMenuContent className="rounded-l-none">
                   <DropdownMenuLabel>Apply tags to filter secrets</DropdownMenuLabel>
-                  {tags.map(({ id, name, color }) => (
+                  {tags.map(({ id, slug, color }) => (
                     <DropdownMenuItem
                       onClick={(evt) => {
                         evt.preventDefault();
@@ -342,7 +342,7 @@ export const ActionBar = ({
                           className="mr-2 h-2 w-2 rounded-full"
                           style={{ background: color || "#bec2c8" }}
                         />
-                        {name}
+                        {slug}
                       </div>
                     </DropdownMenuItem>
                   ))}
diff --git a/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx b/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx
index 2e983bda6..e2a1c3b87 100644
--- a/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx
+++ b/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx
@@ -254,7 +254,7 @@ export const SecretDetailSidebar = ({
               )}
               <FormControl label="Tags" className="">
                 <div className="grid auto-cols-min grid-flow-col gap-2 overflow-hidden pt-2">
-                  {fields.map(({ tagColor, id: formId, name, id }) => (
+                  {fields.map(({ tagColor, id: formId, slug, id }) => (
                     <Tag
                       className="flex w-min items-center space-x-2"
                       key={formId}
@@ -271,7 +271,7 @@ export const SecretDetailSidebar = ({
                         className="h-3 w-3 rounded-full"
                         style={{ backgroundColor: tagColor || "#bec2c8" }}
                       />
-                      <div className="text-sm">{name}</div>
+                      <div className="text-sm">{slug}</div>
                     </Tag>
                   ))}
                   <DropdownMenu>
@@ -296,7 +296,7 @@ export const SecretDetailSidebar = ({
                     <DropdownMenuContent align="end" className="z-[100]">
                       <DropdownMenuLabel>Add tags to this secret</DropdownMenuLabel>
                       {tags.map((tag) => {
-                        const { id: tagId, name, color } = tag;
+                        const { id: tagId, slug, color } = tag;
 
                         const isSelected = selectedTagsGroupById?.[tagId];
                         return (
@@ -311,7 +311,7 @@ export const SecretDetailSidebar = ({
                                 className="mr-2 h-2 w-2 rounded-full"
                                 style={{ background: color || "#bec2c8" }}
                               />
-                              {name}
+                              {slug}
                             </div>
                           </DropdownMenuItem>
                         );
diff --git a/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx b/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx
index 22207cb90..5b62dd526 100644
--- a/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx
+++ b/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx
@@ -336,7 +336,7 @@ export const SecretItem = memo(
                     <DropdownMenuContent align="end">
                       <DropdownMenuLabel>Add tags to this secret</DropdownMenuLabel>
                       {tags.map((tag) => {
-                        const { id: tagId, name, color } = tag;
+                        const { id: tagId, slug, color } = tag;
 
                         const isTagSelected = selectedTagsGroupById?.[tagId];
                         return (
@@ -358,7 +358,7 @@ export const SecretItem = memo(
                                 className="mr-2 h-2 w-2 rounded-full"
                                 style={{ background: color || "#bec2c8" }}
                               />
-                              {name}
+                              {slug}
                             </div>
                           </DropdownMenuItem>
                         );
diff --git a/frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.utils.ts b/frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.utils.ts
index a3040b43c..eb9e4d195 100644
--- a/frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.utils.ts
+++ b/frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.utils.ts
@@ -49,7 +49,6 @@ export const formSchema = z.object({
   tags: z
     .object({
       id: z.string(),
-      name: z.string(),
       slug: z.string(),
       tagColor: z.string().optional()
     })
diff --git a/frontend/src/views/SecretMainPage/components/SnapshotView/SecretItem.tsx b/frontend/src/views/SecretMainPage/components/SnapshotView/SecretItem.tsx
index 2a7397ec9..d6680bcef 100644
--- a/frontend/src/views/SecretMainPage/components/SnapshotView/SecretItem.tsx
+++ b/frontend/src/views/SecretMainPage/components/SnapshotView/SecretItem.tsx
@@ -151,7 +151,7 @@ export const SecretItem = ({ mode, preSecret, postSecret }: Props) => {
                   <Td className="border-r border-mineshaft-600">Tags</Td>
                   {isModified && (
                     <Td className="border-r border-mineshaft-600">
-                      {preSecret?.tags?.map(({ name, id: tagId, color }) => (
+                      {preSecret?.tags?.map(({ slug, id: tagId, color }) => (
                         <Tag
                           className="flex w-min items-center space-x-2"
                           key={`${preSecret.id}-${tagId}`}
@@ -160,13 +160,13 @@ export const SecretItem = ({ mode, preSecret, postSecret }: Props) => {
                             className="h-3 w-3 rounded-full"
                             style={{ backgroundColor: color || "#bec2c8" }}
                           />
-                          <div className="text-sm">{name}</div>
+                          <div className="text-sm">{slug}</div>
                         </Tag>
                       ))}
                     </Td>
                   )}
                   <Td>
-                    {postSecret?.tags?.map(({ name, id: tagId, color }) => (
+                    {postSecret?.tags?.map(({ slug, id: tagId, color }) => (
                       <Tag
                         className="flex w-min items-center space-x-2"
                         key={`${postSecret.id}-${tagId}`}
@@ -175,7 +175,7 @@ export const SecretItem = ({ mode, preSecret, postSecret }: Props) => {
                           className="h-3 w-3 rounded-full"
                           style={{ backgroundColor: color || "#bec2c8" }}
                         />
-                        <div className="text-sm">{name}</div>
+                        <div className="text-sm">{slug}</div>
                       </Tag>
                     ))}
                   </Td>
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/AddSecretTagModal.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/AddSecretTagModal.tsx
index 7cc1a926e..0a2c4856e 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/AddSecretTagModal.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/AddSecretTagModal.tsx
@@ -1,6 +1,7 @@
 import { Controller, useForm } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
-import * as yup from "yup";
+import { zodResolver } from "@hookform/resolvers/zod";
+import slugify from "@sindresorhus/slugify";
+import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Input, Modal, ModalClose, ModalContent } from "@app/components/v2";
@@ -8,11 +9,13 @@ import { useWorkspace } from "@app/context";
 import { useCreateWsTag } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
-const schema = yup.object({
-  name: yup.string().required().label("Tag Name")
+const schema = z.object({
+  slug: z.string().refine((v) => slugify(v) === v, {
+    message: "Invalid slug. Should contain only characters, numbers and hyphen."
+  })
 });
 
-export type FormData = yup.InferType<typeof schema>;
+export type FormData = z.infer<typeof schema>;
 
 type Props = {
   popUp: UsePopUpState<["CreateSecretTag", "deleteTagConfirmation"]>;
@@ -26,7 +29,6 @@ type Props = {
 };
 
 export const AddSecretTagModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) => {
-  
   const { currentWorkspace } = useWorkspace();
   const createWsTag = useCreateWsTag();
   const {
@@ -35,17 +37,16 @@ export const AddSecretTagModal = ({ popUp, handlePopUpClose, handlePopUpToggle }
     handleSubmit,
     formState: { isSubmitting }
   } = useForm<FormData>({
-    resolver: yupResolver(schema)
+    resolver: zodResolver(schema)
   });
 
-  const onFormSubmit = async ({ name }: FormData) => {
+  const onFormSubmit = async ({ slug }: FormData) => {
     try {
       if (!currentWorkspace?.id) return;
 
       await createWsTag.mutateAsync({
         workspaceID: currentWorkspace?.id,
-        tagName: name,
-        tagSlug: name.replace(/\s+/g, " ").replace(" ", "_"),
+        tagSlug: slug,
         tagColor: ""
       });
 
@@ -80,11 +81,11 @@ export const AddSecretTagModal = ({ popUp, handlePopUpClose, handlePopUpToggle }
         <form onSubmit={handleSubmit(onFormSubmit)}>
           <Controller
             control={control}
-            name="name"
+            name="slug"
             defaultValue=""
             render={({ field, fieldState: { error } }) => (
-              <FormControl label="Tag Name" isError={Boolean(error)} errorText={error?.message}>
-                <Input {...field} placeholder="Type your tag name" />
+              <FormControl label="Tag Slug" isError={Boolean(error)} errorText={error?.message}>
+                <Input {...field} placeholder="Type your tag slug" />
               </FormControl>
             )}
           />
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsTable.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsTable.tsx
index d0655f984..cc68b0700 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsTable.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsTable.tsx
@@ -40,7 +40,6 @@ export const SecretTagsTable = ({ handlePopUpOpen }: Props) => {
       <Table>
         <THead>
           <Tr>
-            <Th>Tag</Th>
             <Th>Slug</Th>
             <Th aria-label="button" />
           </Tr>
@@ -49,9 +48,8 @@ export const SecretTagsTable = ({ handlePopUpOpen }: Props) => {
           {isLoading && <TableSkeleton columns={3} innerKey="secret-tags" />}
           {!isLoading &&
             data &&
-            data.map(({ id, name, slug }) => (
-              <Tr key={name}>
-                <Td>{name}</Td>
+            data.map(({ id, slug }) => (
+              <Tr key={id}>
                 <Td>{slug}</Td>
                 <Td className="flex items-center justify-end">
                   <ProjectPermissionCan
@@ -62,7 +60,7 @@ export const SecretTagsTable = ({ handlePopUpOpen }: Props) => {
                       <IconButton
                         onClick={() =>
                           handlePopUpOpen("deleteTagConfirmation", {
-                            name,
+                            name: slug,
                             id
                           })
                         }