feat(folders): implemented ui for folders in dashboard

frontend/src/views/DashboardPage/components/FolderSection/FolderForm.tsx

@@ -0,0 +1,75 @@
+import { Controller, useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+
+import { Button, FormControl, Input, ModalClose } from '@app/components/v2';
+
+type Props = {
+  onCreateFolder: (folderName: string) => Promise<void>;
+  onUpdateFolder: (folderName: string) => Promise<void>;
+  isEdit?: boolean;
+  defaultFolderName?: string;
+};
+
+const formSchema = yup.object({
+  name: yup
+    .string()
+    .required()
+    .trim()
+    .matches(/^[a-zA-Z0-9-_]+$/, 'Folder name cannot contain spaces. Only underscore and dashes')
+    .label('Tag Name')
+});
+type TFormData = yup.InferType<typeof formSchema>;
+
+export const FolderForm = ({
+  isEdit,
+  onCreateFolder,
+  defaultFolderName,
+  onUpdateFolder
+}: Props): JSX.Element => {
+  const {
+    control,
+    reset,
+    formState: { isSubmitting },
+    handleSubmit
+  } = useForm<TFormData>({
+    resolver: yupResolver(formSchema),
+    defaultValues: {
+      name: defaultFolderName
+    }
+  });
+
+  const onSubmit = async ({ name }: TFormData) => {
+    if (isEdit) {
+      await onUpdateFolder(name);
+    } else {
+      await onCreateFolder(name);
+    }
+    reset();
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        control={control}
+        name="name"
+        defaultValue=""
+        render={({ field, fieldState: { error } }) => (
+          <FormControl label="Folder Name" isError={Boolean(error)} errorText={error?.message}>
+            <Input {...field} placeholder="Type your folder name" />
+          </FormControl>
+        )}
+      />
+      <div className="mt-8 flex items-center">
+        <Button className="mr-4" type="submit" isDisabled={isSubmitting} isLoading={isSubmitting}>
+          {isEdit ? 'Save' : 'Create'}
+        </Button>
+        <ModalClose asChild>
+          <Button variant="plain" colorSchema="secondary">
+            Cancel
+          </Button>
+        </ModalClose>
+      </div>
+    </form>
+  );
+};

frontend/src/views/DashboardPage/components/FolderSection/FolderSection.tsx

@@ -0,0 +1,77 @@
+import { faEdit, faFolder, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import { IconButton, Tooltip } from '@app/components/v2';
+
+type Props = {
+  folders?: Array<{ id: string; name: string }>;
+  search?: string;
+  onFolderUpdate: (folderId: string, name: string) => void;
+  onFolderDelete: (folderId: string, name: string) => void;
+  onFolderOpen: (folderId: string) => void;
+};
+
+export const FolderSection = ({
+  onFolderUpdate: handleFolderUpdate,
+  onFolderDelete: handleFolderDelete,
+  onFolderOpen: handleFolderOpen,
+  search = '',
+  folders = []
+}: Props) => {
+  return (
+    <>
+      {folders
+        .filter(({ name }) => name.toLowerCase().includes(search.toLowerCase()))
+        .map(({ id, name }) => (
+          <tr key={id} className="group flex flex-row items-center">
+            <td className="flex h-10 w-10 items-center justify-center border-none px-4">
+              <FontAwesomeIcon icon={faFolder} className="text-primary-700" />
+            </td>
+            <td
+              colSpan={2}
+              className="relative flex w-full min-w-[220px] items-center justify-between overflow-hidden text-ellipsis uppercase lg:min-w-[240px] xl:min-w-[280px]"
+              style={{ paddingTop: '0', paddingBottom: '0' }}
+            >
+              <div
+                className="flex-grow cursor-pointer p-2 pl-3"
+                onKeyDown={() => null}
+                tabIndex={0}
+                role="button"
+                onClick={() => handleFolderOpen(id)}
+              >
+                {name}
+              </div>
+              <div className="duration-0 flex h-10 w-16 items-center justify-end space-x-2.5 overflow-hidden border-l border-mineshaft-600 transition-all">
+                <div className="opacity-0 group-hover:opacity-100">
+                  <Tooltip content="Settings">
+                    <IconButton
+                      size="lg"
+                      colorSchema="primary"
+                      variant="plain"
+                      onClick={() => handleFolderUpdate(id, name)}
+                      ariaLabel="expand"
+                    >
+                      <FontAwesomeIcon icon={faEdit} />
+                    </IconButton>
+                  </Tooltip>
+                </div>
+                <div className="opacity-0 group-hover:opacity-100">
+                  <Tooltip content="Delete">
+                    <IconButton
+                      size="md"
+                      variant="plain"
+                      colorSchema="danger"
+                      ariaLabel="delete"
+                      onClick={() => handleFolderDelete(id, name)}
+                    >
+                      <FontAwesomeIcon icon={faTrash} />
+                    </IconButton>
+                  </Tooltip>
+                </div>
+              </div>
+            </td>
+          </tr>
+        ))}
+    </>
+  );
+};

frontend/src/views/DashboardPage/components/FolderSection/index.tsx

@@ -0,0 +1,3 @@
+export { FolderForm } from './FolderForm';
+export { FolderSection } from './FolderSection';
+export * from './types';

frontend/src/views/DashboardPage/components/FolderSection/types.ts

@@ -0,0 +1,2 @@
+export type TEditFolderForm = { id: string; name: string };
+export type TDeleteFolderForm = { id: string; name: string };

frontend/src/views/DashboardPage/components/SecretInputRow/MaskedInput.tsx

@@ -24,9 +24,9 @@ export const MaskedInput = ({ isReadOnly, isSecretValueHidden, index, isOverridd
 
   const syntaxHighlight = useCallback((val: string) => {
     if (val?.length === 0) return <span className="font-sans text-bunker-400/80">EMPTY</span>;
-    return val?.split(REGEX).map((word) =>
+    return val?.split(REGEX).map((word, i) =>
       word.match(REGEX) !== null ? (
-        <span className="ph-no-capture text-yellow" key={`${val}-${index + 1}`}>
+        <span className="ph-no-capture text-yellow" key={`${val}-${i + 1}`}>
           {word.slice(0, 2)}
           <span className="ph-no-capture text-yellow-200/80">{word.slice(2, word.length - 1)}</span>
           {word.slice(word.length - 1, word.length) === '}' ? (
@@ -40,7 +40,7 @@ export const MaskedInput = ({ isReadOnly, isSecretValueHidden, index, isOverridd
           )}
         </span>
       ) : (
-        <span key={`${word}_${index + 1}`} className="ph-no-capture">
+        <span key={`${word}_${i + 1}`} className="ph-no-capture">
           {word}
         </span>
       )

frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx

@@ -6,7 +6,6 @@ import {
   faComment,
   faEllipsis,
   faInfoCircle,
-  faKey,
   faPlus,
   faTags,
   faXmark
@@ -159,9 +158,8 @@ export const SecretInputRow = memo(
 
     return (
       <tr className="group flex flex-row items-center" key={index}>
-        <td className="flex h-10 w-10 items-center justify-center px-4 border-none">
-          {/* <div className="w-10 text-center text-xs text-bunker-400">{index + 1}</div> */}
-          <div className="w-10 text-center text-xs text-bunker-400"><FontAwesomeIcon icon={faKey} className="w-4 h-4 text-bunker-400/60 pl-2.5 pt-0.5" /></div>
+        <td className="flex h-10 w-10 items-center justify-center border-none px-4">
+          <div className="w-10 text-center text-xs text-bunker-400">{index + 1}</div>
         </td>
         <Controller
           control={control}
@@ -200,7 +198,7 @@ export const SecretInputRow = memo(
             </HoverCard>
           )}
         />
-        <td className="flex h-10 border-none w-full flex-grow flex-row items-center justify-center border-r border-red">
+        <td className="flex h-10 w-full flex-grow flex-row items-center justify-center border-r border-none border-red">
           <MaskedInput
             isReadOnly={
               isReadOnly || isRollbackMode || (isOverridden ? isAddOnly : shouldBeBlockedInAddOnly)
@@ -226,10 +224,10 @@ export const SecretInputRow = memo(
               </Tag>
             ))}
             {!(isReadOnly || isAddOnly || isRollbackMode) && (
-              <div className="overflow-hidden duration-0 ml-1">
+              <div className="duration-0 ml-1 overflow-hidden">
                 <Popover>
                   <PopoverTrigger asChild>
-                    <div className="w-0 data-[state=open]:w-6 group-hover:w-6">
+                    <div className="w-0 group-hover:w-6 data-[state=open]:w-6">
                       <Tooltip content="Add tags">
                         <IconButton
                           variant="plain"
@@ -291,7 +289,7 @@ export const SecretInputRow = memo(
               </div>
             )}
           </div>
-          <div className="flex flex-row items-center h-full pr-2">
+          <div className="flex h-full flex-row items-center pr-2">
             {!isAddOnly && (
               <div>
                 <Tooltip content="Override with a personal value">
@@ -314,16 +312,14 @@ export const SecretInputRow = memo(
               </div>
             )}
             <Tooltip content="Comment">
-              <div
-                className={`mt-0.5 overflow-hidden `}
-              >
+              <div className={`mt-0.5 overflow-hidden `}>
                 <Popover>
                   <PopoverTrigger asChild>
                     <IconButton
                       className={twMerge(
-                        'overflow-hidden p-0 w-7',
-                        'data-[state=open]:w-7 group-hover:w-7 w-0',
-                        hasComment ? 'text-primary w-7' : 'group-hover:w-7'
+                        'w-7 overflow-hidden p-0',
+                        'w-0 group-hover:w-7 data-[state=open]:w-7',
+                        hasComment ? 'w-7 text-primary' : 'group-hover:w-7'
                       )}
                       variant="plain"
                       size="md"
@@ -332,12 +328,13 @@ export const SecretInputRow = memo(
                       <FontAwesomeIcon icon={faComment} />
                     </IconButton>
                   </PopoverTrigger>
-                  <PopoverContent className="w-auto border border-mineshaft-600 bg-mineshaft-800 p-2 drop-shadow-2xl" sticky="always">
+                  <PopoverContent
+                    className="w-auto border border-mineshaft-600 bg-mineshaft-800 p-2 drop-shadow-2xl"
+                    sticky="always"
+                  >
                     <FormControl label="Comment" className="mb-0">
                       <TextArea
-                        isDisabled={
-                          isReadOnly || isRollbackMode || shouldBeBlockedInAddOnly
-                        }
+                        isDisabled={isReadOnly || isRollbackMode || shouldBeBlockedInAddOnly}
                         className="border border-mineshaft-600 text-sm"
                         {...register(`secrets.${index}.comment`)}
                         rows={8}
@@ -349,7 +346,7 @@ export const SecretInputRow = memo(
               </div>
             </Tooltip>
           </div>
-          <div className="duration-0 w-0 flex items-center justify-end space-x-2.5 overflow-hidden transition-all w-16 border-l border-mineshaft-600 h-10">
+          <div className="duration-0 flex h-10 w-16 items-center justify-end space-x-2.5 overflow-hidden border-l border-mineshaft-600 transition-all">
             {!isAddOnly && (
               <div className="opacity-0 group-hover:opacity-100">
                 <Tooltip content="Settings">

frontend/src/views/DashboardPage/components/SecretTableHeader/SecretTableHeader.tsx

@@ -11,7 +11,7 @@ type Props = {
 export const SecretTableHeader = ({ sortDir, onSort }: Props): JSX.Element => (
   <thead className="sticky top-0 z-50 bg-mineshaft-800">
     <tr className="top-0 flex flex-row">
-      <td className="flex w-10 items-center justify-center px-4 border-none">
+      <td className="flex w-10 items-center justify-center border-none px-4">
         <div className="w-10 text-center text-xs text-transparent">{0}</div>
       </td>
       <td className="flex items-center">