Added tags to secrets in the dashboard

2026-09-22 13:39:35 +00:00 · 2023-02-07 16:29:15 -08:00
parent 56da34d343
commit 7892624709
31 changed files with 695 additions and 102 deletions
--- a/backend/src/controllers/v2/secretsController.ts
+++ b/backend/src/controllers/v2/secretsController.ts
@@ -103,6 +103,9 @@ export const createSecrets = async (req: Request, res: Response) => {
        secretValueCiphertext: string;
        secretValueIV: string;
        secretValueTag: string;
+        secretCommentCiphertext: string;
+        secretCommentIV: string;
+        secretCommentTag: string;
        tags: string[]
    }

@@ -115,6 +118,9 @@ export const createSecrets = async (req: Request, res: Response) => {
            secretValueCiphertext,
            secretValueIV,
            secretValueTag,
+            secretCommentCiphertext,
+            secretCommentIV,
+            secretCommentTag,
            tags
        }: secretsToCreateType) => {
            return ({
@@ -129,6 +135,9 @@ export const createSecrets = async (req: Request, res: Response) => {
                secretValueCiphertext,
                secretValueIV,
                secretValueTag,
+                secretCommentCiphertext,
+                secretCommentIV,
+                secretCommentTag,
                tags
            });
        })
@@ -160,6 +169,9 @@ export const createSecrets = async (req: Request, res: Response) => {
            secretValueIV,
            secretValueTag,
            secretValueHash,
+            secretCommentCiphertext,
+            secretCommentIV,
+            secretCommentTag,
            tags
        }) => ({
            _id: new Types.ObjectId(),
@@ -178,6 +190,9 @@ export const createSecrets = async (req: Request, res: Response) => {
            secretValueIV,
            secretValueTag,
            secretValueHash,
+            secretCommentCiphertext,
+            secretCommentIV,
+            secretCommentTag,
            tags
        }))
    });
--- a/backend/src/controllers/v2/tagController.ts
+++ b/backend/src/controllers/v2/tagController.ts
@@ -52,9 +52,9 @@ export const deleteWorkspaceTag = async (req: Request, res: Response) => {
 		UnauthorizedRequestError({ message: 'Failed to validate membership' });
 	}

-	await Tag.findByIdAndDelete(tagId)
+	const result = await Tag.findByIdAndDelete(tagId);

-	res.sendStatus(200)
+	res.json(result);
 }

 export const getWorkspaceTags = async (req: Request, res: Response) => {
--- a/backend/src/ee/controllers/v1/secretSnapshotController.ts
+++ b/backend/src/ee/controllers/v1/secretSnapshotController.ts
@@ -15,7 +15,13 @@ export const getSecretSnapshot = async (req: Request, res: Response) => {

        secretSnapshot = await SecretSnapshot
            .findById(secretSnapshotId)
-            .populate('secretVersions');
+            .populate({
+                path: 'secretVersions',
+                populate: {
+                    path: 'tags',
+                    model: 'Tag',
+                }
+            });
        
        if (!secretSnapshot) throw new Error('Failed to find secret snapshot');
        
--- a/frontend/public/data/frequentInterfaces.ts
+++ b/frontend/public/data/frequentInterfaces.ts
@@ -1,3 +1,12 @@
+export interface Tag {
+  _id: string; 
+  name: string;
+  slug: string;
+  user: string;
+  workspace: string;
+  createdAt: string;
+}
+
 export interface SecretDataProps {
  pos: number;
  key: string;
@@ -5,4 +14,5 @@ export interface SecretDataProps {
  valueOverride: string | undefined;
  id: string;
  comment: string;
+  tags: Tag[];
 }
--- a/frontend/src/components/basic/dialog/AddWorkspaceDialog.tsx
+++ b/frontend/src/components/basic/dialog/AddWorkspaceDialog.tsx
@@ -36,7 +36,7 @@ const AddWorkspaceDialog = ({
  return (
    <div>
      <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-20" onClose={closeModal}>
+        <Dialog as="div" className="relative z-[100]" onClose={closeModal}>
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
@@ -49,7 +49,7 @@ const AddWorkspaceDialog = ({
            <div className="fixed inset-0 bg-black bg-opacity-70" />
          </Transition.Child>

-          <div className="fixed inset-0 overflow-y-auto z-50">
+          <div className="fixed inset-0 overflow-y-auto">
            <div className="flex min-h-full items-center justify-center p-4 text-center">
              <Transition.Child
                as={Fragment}
@@ -60,7 +60,7 @@ const AddWorkspaceDialog = ({
                leaveFrom="opacity-100 scale-100"
                leaveTo="opacity-0 scale-95"
              >
-                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
+                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
                  <Dialog.Title
                    as="h3"
                    className="text-lg font-medium leading-6 text-gray-400"
@@ -69,7 +69,7 @@ const AddWorkspaceDialog = ({
                  </Dialog.Title>
                  <div className="mt-2">
                    <p className="text-sm text-gray-500">
-                      This project will contain your environmental variables.
+                      This project will contain your secrets and configs.
                    </p>
                  </div>
                  <div className="max-h-28 mt-4">
--- a/frontend/src/components/basic/table/EnvironmentsTable.tsx
+++ b/frontend/src/components/basic/table/EnvironmentsTable.tsx
@@ -83,7 +83,7 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
        </div>
        <div className="w-48">
          <Button
-            text="Add New Env"
+            text="Add New Environment"
            onButtonPressed={() => {
              if (plan !== plans.starter || host !== 'https://app.infisical.com') {
                handlePopUpOpen('createUpdateEnv');
--- a/frontend/src/components/dashboard/AddTagsMenu.tsx
+++ b/frontend/src/components/dashboard/AddTagsMenu.tsx
@@ -0,0 +1,61 @@
+import { Fragment } from 'react';
+import { useRouter } from 'next/router';
+import { faCheckSquare, faPlus, faSquare } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Menu, Transition } from '@headlessui/react';
+import { Tag } from 'public/data/frequentInterfaces';
+
+/**
+ * This is the menu that is used to download secrets as .env ad .yml files (in future we may have more options)
+ * @param {object} obj
+ * @param {SecretDataProps[]} obj.data - 
+ * 
+ */
+const AddTagsMenu = ({ allTags, currentTags, modifyTags, position }: { allTags: Tag[]; currentTags: Tag[]; modifyTags: (value: Tag[], position: number) => void; position: number; }) => {
+  const router = useRouter();
+  return (
+    <Menu as="div" className="ml-2 relative inline-block text-left">
+      <Menu.Button
+        as="div"
+        className="flex justify-center items-center font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
+      >
+        <div className='bg-mineshaft/30 cursor-pointer rounded-sm text-sm text-mineshaft-200/50 hover:bg-mineshaft/70 duration-200 flex items-center'>
+          <FontAwesomeIcon icon={faPlus} className="p-[0.28rem]"/>
+          {currentTags.length > 2 && <span className='pr-2'>{currentTags.length - 2}</span>}
+        </div>
+      </Menu.Button>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute z-[90] text-sm drop-shadow-xl right-0 mt-0.5 w-[12rem] origin-top-right rounded-md bg-mineshaft-600 border border-mineshaft-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none p-1 space-y-1">
+          {allTags?.map((tag) => { return (
+            <Menu.Item key={tag._id}>
+              <button
+                type="button"
+                className={`${currentTags.map(currentTag => currentTag.name).includes(tag.name) ? "opacity-30 cursor-default" : "hover:bg-mineshaft-700"} w-full text-left bg-mineshaft-800 px-2 py-0.5 text-bunker-200 rounded-sm flex items-center`}
+                onClick={() => {if (!currentTags.map(currentTag => currentTag.name).includes(tag.name)) {modifyTags(currentTags.concat([tag]), position)}}}
+              >
+                {currentTags.map(currentTag => currentTag.name).includes(tag.name) ? <FontAwesomeIcon icon={faCheckSquare} className="text-xs mr-2 text-primary"/> : <FontAwesomeIcon icon={faSquare} className="text-xs mr-2"/>} {tag.name}
+              </button>
+            </Menu.Item>
+          )})}
+          <button
+            type="button"
+            className='w-full text-left bg-mineshaft-800 hover:bg-primary hover:text-black duration-200 px-2 py-0.5 text-bunker-200 rounded-sm'
+            onClick={() => router.push(`/settings/project/${String(router.query.id)}`)}
+          >
+            <FontAwesomeIcon icon={faPlus} className="mr-2 text-xs" />Add more tags
+          </button>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+};
+
+export default AddTagsMenu;
--- a/frontend/src/components/dashboard/DashboardInputField.tsx
+++ b/frontend/src/components/dashboard/DashboardInputField.tsx
@@ -3,7 +3,6 @@ import { faCircle, faExclamationCircle, faEye, faLayerGroup } from '@fortawesome
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

 import guidGenerator from '../utilities/randomId';
-import { Button } from '../v2';
 import { HoverObject } from '../v2/HoverCard';

 const REGEX = /([$]{.*?})/g;
@@ -99,8 +98,8 @@ const DashboardInputField = ({
        )}
        {!error && <div className={`absolute right-0 top-0 text-red z-50 ${
          overrideEnabled ? 'visible group-hover:bg-mineshaft-700' : 'invisible group-hover:visible bg-mineshaft-700'
-        } cursor-pointer duration-0`}>
-          <Button variant="plain" onClick={() => {
+        } cursor-pointer duration-0 h-10 flex items-center px-2`}>
+          <button type="button" onClick={() => {
            if (modifyValueOverride) {
              if (overrideEnabled === false) {
                modifyValueOverride('', position);
@@ -114,7 +113,7 @@ const DashboardInputField = ({
              icon={faLayerGroup}
              color={overrideEnabled ? 'primary' : 'bunker-400'}
            />
-          </Button>
+          </button>
        </div>}
      </div>
    );
--- a/frontend/src/components/dashboard/DeleteActionButton.tsx
+++ b/frontend/src/components/dashboard/DeleteActionButton.tsx
@@ -19,7 +19,7 @@ export const DeleteActionButton = ({ onSubmit, isPlain }: Props) => {
    <div className={`${
      !isPlain 
      ? 'bg-[#9B3535] opacity-70 hover:opacity-100 w-[4.5rem] h-[2.5rem] rounded-md duration-200 ml-2'
-      : 'cursor-pointer w-[2.35rem] h-[2.35rem] flex items-center justfy-center'}`}>
+      : 'cursor-pointer w-[1.5rem] h-[2.35rem] mr-2 flex items-center justfy-center'}`}>
      {isPlain 
      ? <div
        onKeyDown={() => null}
--- a/frontend/src/components/dashboard/DropZone.tsx
+++ b/frontend/src/components/dashboard/DropZone.tsx
@@ -64,7 +64,8 @@ const DropZone = ({
          key,
          value: keyPairs[key as keyof typeof keyPairs].value,
          comment: keyPairs[key as keyof typeof keyPairs].comments.join('\n'),
-          type: 'shared'
+          type: 'shared',
+          tags: []
        }));
        break;
      }
@@ -86,7 +87,8 @@ const DropZone = ({
            key,
            value: keyPairs[key as keyof typeof keyPairs]?.toString() ?? '',
            comment,
-            type: 'shared'
+            type: 'shared',
+            tags: []
          };
        });
        break;
--- a/frontend/src/components/dashboard/KeyPair.tsx
+++ b/frontend/src/components/dashboard/KeyPair.tsx
@@ -1,7 +1,8 @@
-import { faEllipsis } from '@fortawesome/free-solid-svg-icons';
+import { faEllipsis, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { SecretDataProps } from 'public/data/frequentInterfaces';
+import { SecretDataProps, Tag } from 'public/data/frequentInterfaces';

+import AddTagsMenu from './AddTagsMenu';
 import DashboardInputField from './DashboardInputField';
 import { DeleteActionButton } from './DeleteActionButton';

@@ -11,12 +12,15 @@ interface KeyPairProps {
  modifyValue: (value: string, position: number) => void;
  modifyValueOverride: (value: string | undefined, position: number) => void;
  modifyComment: (value: string, position: number) => void;
+  modifyTags: (value: Tag[], position: number) => void;
  isBlurred: boolean;
  isDuplicate: boolean;
  toggleSidebar: (id: string) => void;
  sidebarSecretId: string;
  isSnapshot: boolean;
  deleteRow?: (props: DeleteRowFunctionProps) => void;
+  tags: Tag[];
+  togglePITSidebar?: (value: boolean) => void;
 }

 export interface DeleteRowFunctionProps {
@@ -24,6 +28,23 @@ export interface DeleteRowFunctionProps {
  secretName: string;
 }

+const colors = [
+  'bg-[#f1c40f]/40',
+  'bg-[#cb1c8d]/40',
+  'bg-[#badc58]/40',
+  'bg-[#ff5400]/40',
+  'bg-[#00bbf9]/40'
+]
+
+
+const colorsText = [
+  'text-[#fcf0c3]/70',
+  'text-[#f2c6e3]/70',
+  'text-[#eef6d5]/70',
+  'text-[#ffddcc]/70',
+  'text-[#f0fffd]/70'
+]
+
 /**
 * This component represent a single row for an environemnt variable on the dashboard
 * @param {object} obj
@@ -32,12 +53,15 @@ export interface DeleteRowFunctionProps {
 * @param {function} obj.modifyValue - modify the value of a certain environment variable
 * @param {function} obj.modifyValueOverride - modify the value of a certain environment variable if it is overriden
 * @param {function} obj.modifyComment - modify the comment of a certain environment variable
+ * @param {function} obj.modifyTags - modify the tags of a certain environment variable
 * @param {boolean} obj.isBlurred - if the blurring setting is turned on
 * @param {boolean} obj.isDuplicate - list of all the duplicates secret names on the dashboard
 * @param {function} obj.toggleSidebar - open/close/switch sidebar
 * @param {string} obj.sidebarSecretId - the id of a secret for the side bar is displayed
 * @param {boolean} obj.isSnapshot - whether this keyPair is in a snapshot. If so, it won't have some features like sidebar
 * @param {function} obj.deleteRow - a function to delete a certain keyPair
+ * @param {function} obj.togglePITSidebar - open or close the Point-in-time recovery sidebar
+ * @param {Tag[]} obj.tags - tags for a certain secret
 * @returns
 */
 const KeyPair = ({
@@ -46,21 +70,31 @@ const KeyPair = ({
  modifyValue,
  modifyValueOverride,
  modifyComment,
+  modifyTags,
  isBlurred,
  isDuplicate,
  toggleSidebar,
  sidebarSecretId,
  isSnapshot, 
-  deleteRow
-}: KeyPairProps) => (
+  deleteRow,
+  togglePITSidebar,
+  tags
+}: KeyPairProps) => {
+  const tagData = (tags.map((tag, index) => {return {
+    ...tag, 
+    color: colors[index%colors.length], 
+    colorText: colorsText[index%colorsText.length]
+  }}));
+
+  return (
  <div
    className={`group flex flex-col items-center border-b border-mineshaft-500 hover:bg-white/[0.03] duration-100 ${isSnapshot && 'pointer-events-none'} ${
      keyPair.id === sidebarSecretId && 'bg-mineshaft-700 duration-200'
    }`}
  >
    <div className="relative flex flex-row justify-between w-full mr-auto max-h-14 items-center">
-      <div className='text-bunker-400 text-xs flex items-center justify-center w-14 h-10 cursor-default'>{keyPair.pos + 1}</div>
-      <div className="w-80 border-r border-mineshaft-600">
+      <div className="w-2/12 border-r border-mineshaft-600 flex flex-row items-center">
+        <div className='text-bunker-400 text-xs flex items-center justify-center w-14 h-10 cursor-default'>{keyPair.pos + 1}</div>
        <div className="flex items-center max-h-16">
          <DashboardInputField
            onChangeHandler={modifyKey}
@@ -74,7 +108,7 @@ const KeyPair = ({
          />
        </div>
      </div>
-      <div className="w-full border-r border-mineshaft-600">
+      <div className="w-5/12 border-r border-mineshaft-600">
        <div
          className='flex items-center rounded-lg mt-4 md:mt-0 max-h-10'
        >
@@ -89,7 +123,7 @@ const KeyPair = ({
          />
        </div>
      </div>
-      <div className="w-96 border-r border-mineshaft-600">
+      <div className="w-2/12 border-r border-mineshaft-600">
        <div className="flex items-center max-h-16">
          <DashboardInputField
            onChangeHandler={modifyComment}
@@ -101,27 +135,42 @@ const KeyPair = ({
          />
        </div>
      </div>
-      {!isSnapshot && (
-        <div
-          onKeyDown={() => null}
-          role="button"
-          tabIndex={0}
-          onClick={() => toggleSidebar(keyPair.id)}
-          className="cursor-pointer w-[2.35rem] h-[2.35rem] px-6 rounded-md invisible group-hover:visible flex flex-row justify-center items-center"
-        >
-          <FontAwesomeIcon className="text-bunker-300 hover:text-primary text-lg" icon={faEllipsis} />
+      <div className="w-2/12 h-10 flex items-center overflow-visible overflow-r-scroll no-scrollbar no-scrollbar::-webkit-scrollbar">
+        <div className="flex items-center max-h-16">
+          {keyPair.tags.map((tag, index) => (
+            index < 2 && <div key={keyPair.pos} className={`ml-2 px-1.5 ${tagData.filter(tagDp => tagDp._id === tag._id)[0]?.color} rounded-sm text-sm ${tagData.filter(tagDp => tagDp._id === tag._id)[0]?.colorText} flex items-center`}>
+              <span className='mb-0.5 cursor-default'>{tag.name}</span>
+              <FontAwesomeIcon icon={faXmark} className="ml-1 cursor-pointer p-1" onClick={() => modifyTags(keyPair.tags.filter(ttag => ttag._id !== tag._id), keyPair.pos)}/>
+            </div>
+          ))}
+          
+          <AddTagsMenu allTags={tags} currentTags={keyPair.tags} modifyTags={modifyTags} position={keyPair.pos} />
        </div>
-      )}
-      {!isSnapshot && (
+      </div>
+      <div
+        onKeyDown={() => null}
+        role="button"
+        tabIndex={0}
+        onClick={() => {
+          if (togglePITSidebar) {
+            togglePITSidebar(false);
+          }
+          toggleSidebar(keyPair.id)
+        }}
+        className={`cursor-pointer w-[1.5rem] h-[2.35rem] ml-auto group-hover:bg-mineshaft-700 z-50 rounded-md invisible group-hover:visible flex flex-row justify-center items-center ${isSnapshot ?? 'invisible'}`}
+      >
+        <FontAwesomeIcon className="text-bunker-300 hover:text-primary text-lg" icon={faEllipsis} />
+      </div>
+      <div className={`group-hover:bg-mineshaft-700 z-50 ${isSnapshot ?? 'invisible'}`}>
        <DeleteActionButton
          onSubmit={() => { if (deleteRow) {
            deleteRow({ ids: [keyPair.id], secretName: keyPair?.key })
          }}}
          isPlain
        />
-      )}
+      </div>
    </div>
  </div>
-);
+)};

 export default KeyPair;
--- a/frontend/src/components/dashboard/SideBar.tsx
+++ b/frontend/src/components/dashboard/SideBar.tsx
@@ -80,7 +80,7 @@ const SideBar = ({
  const { t } = useTranslation();

  return (
-    <div className="absolute border-l border-mineshaft-500 bg-bunker h-full w-96 right-0 z-[70] shadow-xl flex flex-col justify-between">
+    <div className="absolute border-l border-mineshaft-500 bg-bunker h-full w-[28rem] sticky top-0 right-0 z-[70] shadow-xl flex flex-col justify-between">
      {isLoading ? (
        <div className="flex items-center justify-center h-full">
          <Image
--- a/frontend/src/components/utilities/secrets/encryptSecrets.ts
+++ b/frontend/src/components/utilities/secrets/encryptSecrets.ts
@@ -1,6 +1,6 @@
 import crypto from 'crypto';

-import { SecretDataProps } from 'public/data/frequentInterfaces';
+import { SecretDataProps, Tag } from 'public/data/frequentInterfaces';

 import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';

@@ -20,6 +20,7 @@ interface EncryptedSecretProps {
  secretValueIV: string;
  secretValueTag: string;
  type: 'personal' | 'shared';
+  tags: Tag[];
 }

 /**
@@ -105,7 +106,8 @@ const encryptSecrets = async ({
        type:
          secret.valueOverride === undefined || secret?.value !== secret?.valueOverride
            ? 'shared'
-            : 'personal'
+            : 'personal',
+        tags: secret.tags
      };

      return result;
--- a/frontend/src/components/utilities/secrets/getSecretsForProject.ts
+++ b/frontend/src/components/utilities/secrets/getSecretsForProject.ts
@@ -1,3 +1,5 @@
+import { Tag } from 'public/data/frequentInterfaces';
+
 import getSecrets from '@app/pages/api/files/GetSecrets';
 import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';

@@ -17,6 +19,7 @@ interface EncryptedSecretProps {
  secretValueIV: string;
  secretValueTag: string;
  type: 'personal' | 'shared';
+  tags: Tag[];
 }

 interface SecretProps {
@@ -25,6 +28,7 @@ interface SecretProps {
  type: 'personal' | 'shared';
  comment: string;
  id: string;
+  tags: Tag[];
 }

 interface FunctionProps {
@@ -107,7 +111,8 @@ const getSecretsForProject = async ({
          key: plainTextKey,
          value: plainTextValue,
          type: secret.type,
-          comment: plainTextComment
+          comment: plainTextComment,
+          tags: secret.tags
        });
      });
    }
@@ -130,7 +135,10 @@ const getSecretsForProject = async ({
      )[0]?.value,
      comment: tempDecryptedSecrets.filter(
        (secret) => secret.key === key && secret.type === 'shared'
-      )[0]?.comment
+      )[0]?.comment,
+      tags: tempDecryptedSecrets.filter(
+        (secret) => secret.key === key && secret.type === 'shared'
+      )[0]?.tags
    }));

    if (typeof setData === 'function') {
--- a/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
+++ b/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
@@ -52,7 +52,7 @@ export const DeleteActionModal = ({
    >
      <ModalContent
        title={title}
-        subTitle="This action is irreversible!!!"
+        subTitle="This action is irreversible!"
        footerContent={
          <div className="flex items-center">
            <Button
--- a/frontend/src/components/v2/Select/Select.tsx
+++ b/frontend/src/components/v2/Select/Select.tsx
@@ -41,7 +41,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
        <SelectPrimitive.Portal>
          <SelectPrimitive.Content
            className={twMerge(
-              'relative left-4 top-1 overflow-hidden rounded-md bg-bunker-800 font-inter text-bunker-100 shadow-md',
+              'relative left-4 top-1 overflow-hidden rounded-md bg-bunker-800 font-inter text-bunker-100 shadow-md z-[100]',
              dropdownContainerClassName
            )}
          >
--- a/frontend/src/ee/components/PITRecoverySidebar.tsx
+++ b/frontend/src/ee/components/PITRecoverySidebar.tsx
@@ -5,6 +5,7 @@ import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Tag } from 'public/data/frequentInterfaces';

 import Button from '@app/components/basic/buttons/Button';
 import {
@@ -48,6 +49,7 @@ interface EncrypetedSecretVersionListProps {
  secretKeyTag: string;
  environment: string;
  type: 'personal' | 'shared';
+  tags: Tag[];
 }

 /**
@@ -106,6 +108,7 @@ const PITRecoverySidebar = ({ toggleSidebar, setSnapshotData, chosenSnapshot }:
        pos,
        type: encryptedSecretVersion.type,
        environment: encryptedSecretVersion.environment,
+        tags: encryptedSecretVersion.tags,
        key: decryptSymmetric({
          ciphertext: encryptedSecretVersion.secretKeyCiphertext,
          iv: encryptedSecretVersion.secretKeyIV,
@@ -134,6 +137,9 @@ const PITRecoverySidebar = ({ toggleSidebar, setSnapshotData, chosenSnapshot }:
      environment: decryptedSecretVersions.filter(
        (secret: SecretDataProps) => secret.key === key && secret.type === 'shared'
      )[0].environment,
+      tags: decryptedSecretVersions.filter(
+        (secret: SecretDataProps) => secret.key === key && secret.type === 'shared'
+      )[0].tags,
      value: decryptedSecretVersions.filter(
        (secret: SecretDataProps) => secret.key === key && secret.type === 'shared'
      )[0]?.value,
@@ -155,7 +161,7 @@ const PITRecoverySidebar = ({ toggleSidebar, setSnapshotData, chosenSnapshot }:
    <div
      className={`absolute border-l border-mineshaft-500 ${
        isLoading ? 'bg-bunker-800' : 'bg-bunker'
-      } fixed h-full w-96 right-0 z-[70] shadow-xl flex flex-col justify-between`}
+      } fixed h-full w-[28rem] right-0 z-[70] shadow-xl flex flex-col justify-between sticky top-0`}
    >
      {isLoading ? (
        <div className="flex items-center justify-center h-full mb-8">
--- a/frontend/src/hooks/api/index.tsx
+++ b/frontend/src/hooks/api/index.tsx
@@ -2,4 +2,5 @@ export * from './auth';
 export * from './keys';
 export * from './serviceTokens';
 export * from './subscriptions';
+export * from './tags';
 export * from './workspace';
--- a/frontend/src/hooks/api/tags/index.tsx
+++ b/frontend/src/hooks/api/tags/index.tsx
@@ -0,0 +1,3 @@
+export { useGetWsTags } from './queries';
+export { useCreateWsTag } from './queries';
+export { useDeleteWsTag } from './queries';
--- a/frontend/src/hooks/api/tags/queries.tsx
+++ b/frontend/src/hooks/api/tags/queries.tsx
@@ -0,0 +1,62 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { apiRequest } from '@app/config/request';
+
+import {
+  CreateTagDTO,
+  CreateTagRes,
+  DeleteTagDTO,
+  DeleteWsTagRes,
+  UserWsTags
+} from './types';
+
+
+const workspaceTags = {
+  getWsTags: (workspaceID: string) => ['workspace-tags', { workspaceID }] as const
+};
+
+const fetchWsTag = async (workspaceID: string) => {
+  const { data } = await apiRequest.get<{ workspaceTags: UserWsTags }>(
+    `/api/v2/workspace/${workspaceID}/tags`
+  );
+
+  return data.workspaceTags;
+};
+
+export const useGetWsTags = (workspaceID: string) =>
+  useQuery({
+    queryKey: workspaceTags.getWsTags(workspaceID),
+    queryFn: () => fetchWsTag(workspaceID),
+    enabled: Boolean(workspaceID)
+  });
+
+export const useCreateWsTag = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<CreateTagRes, {}, CreateTagDTO>({
+    mutationFn: async ({ workspaceID, tagName, tagSlug }) => {
+      const { data } = await apiRequest.post(`/api/v2/workspace/${workspaceID}/tags`, {
+        name: tagName,
+        slug: tagSlug
+      })
+      return data;
+    },
+    onSuccess: (tagData) => {
+      queryClient.invalidateQueries(workspaceTags.getWsTags(tagData?.workspace));
+    }
+  });
+};
+
+export const useDeleteWsTag = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<DeleteWsTagRes, {}, DeleteTagDTO>({
+    mutationFn: async ({ tagID }) => {
+      const { data } = await apiRequest.delete(`/api/v2/workspace/tags/${tagID}`);
+      return data
+    },
+    onSuccess: (tagData) => {
+      queryClient.invalidateQueries(workspaceTags.getWsTags(tagData?.workspace));
+    }
+  });
+};
--- a/frontend/src/hooks/api/tags/types.ts
+++ b/frontend/src/hooks/api/tags/types.ts
@@ -0,0 +1,39 @@
+export type UserWsTags = WsTag[];
+
+export type WsTag = {
+  _id: string;
+  name: string;
+  slug: string;
+  workspace: string;
+  createdAt: string;
+  updatedAt: string;
+  __v: number;
+}
+
+export type WorkspaceTag = { _id: string; name: string; slug: string };
+
+export type CreateTagDTO = {
+  workspaceID: string;
+  tagSlug: string;
+  tagName: string;
+};
+
+export type CreateTagRes = {
+  name: string;
+  slug: string;
+  workspace: string;
+  createdAt: string;
+  user: string;
+  _id: string;
+};
+
+export type DeleteTagDTO = { tagID: string; };
+
+export type DeleteWsTagRes = {
+  name: string;
+  slug: string;
+  workspace: string;
+  createdAt: string;
+  user: string;
+  _id: string;
+};
--- a/frontend/src/hooks/api/types.ts
+++ b/frontend/src/hooks/api/types.ts
@@ -9,5 +9,6 @@ export type {
  RenameWorkspaceDTO,
  UpdateEnvironmentDTO,
  Workspace,
-  WorkspaceEnv
+  WorkspaceEnv,
+  WorkspaceTag
 } from './workspace/types';
--- a/frontend/src/hooks/api/workspace/index.tsx
+++ b/frontend/src/hooks/api/workspace/index.tsx
@@ -4,5 +4,4 @@ export {
  useDeleteWsEnvironment,
  useGetUserWorkspaces,
  useRenameWorkspace,
-  useUpdateWsEnvironment
-} from './queries';
+  useUpdateWsEnvironment} from './queries';
--- a/frontend/src/hooks/api/workspace/types.ts
+++ b/frontend/src/hooks/api/workspace/types.ts
@@ -7,6 +7,7 @@ export type Workspace = {
 };

 export type WorkspaceEnv = { name: string; slug: string };
+export type WorkspaceTag = { _id: string; name: string; slug: string };

 // mutation dto
 export type RenameWorkspaceDTO = { workspaceID: string; newWorkspaceName: string };
--- a/frontend/src/pages/api/workspace/getWorkspaceTags.ts
+++ b/frontend/src/pages/api/workspace/getWorkspaceTags.ts
@@ -0,0 +1,22 @@
+import SecurityClient from '@app/components/utilities/SecurityClient';
+
+/**
+ * This route lets us get the tags for a certain project
+ * @param {string} workspaceId
+ * @returns
+ */
+const getWorkspaceTags = ({ workspaceId }: { workspaceId: string }) =>
+  SecurityClient.fetchCall(`/api/v2/workspace/${workspaceId}/tags`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  }).then(async (res) => {
+    if (res?.status === 200) {
+      return (await res.json()).workspaceTags;
+    }
+    console.log('Failed to get the tags available in a certain project');
+    return undefined;
+  });
+
+export default getWorkspaceTags;
--- a/frontend/src/pages/dashboard/[id].tsx
+++ b/frontend/src/pages/dashboard/[id].tsx
@@ -14,9 +14,11 @@ import {
  faEyeSlash,
  faFolderOpen,
  faMagnifyingGlass,
-  faPlus
+  faPlus,
+  faXmark
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Tag } from 'public/data/frequentInterfaces';

 import Button from '@app/components/basic/buttons/Button';
 import ListBox from '@app/components/basic/Listbox';
@@ -44,6 +46,7 @@ import checkUserAction from '../api/userActions/checkUserAction';
 import registerUserAction from '../api/userActions/registerUserAction';
 import getWorkspaceEnvironments from '../api/workspace/getWorkspaceEnvironments';
 import getWorkspaces from '../api/workspace/getWorkspaces';
+import getWorkspaceTags from '../api/workspace/getWorkspaceTags';

 type WorkspaceEnv = {
  name: string;
@@ -59,6 +62,7 @@ interface SecretDataProps {
  id: string;
  idOverride: string | undefined;
  comment: string;
+  tags: Tag[];
 }

 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -82,6 +86,7 @@ interface SnapshotProps {
    value: string;
    valueOverride: string;
    comment: string;
+    tags: Tag[];
  }[];
 }

@@ -126,6 +131,7 @@ export default function Dashboard() {
  const [snapshotData, setSnapshotData] = useState<SnapshotProps>();
  const [numSnapshots, setNumSnapshots] = useState<number>();
  const [saveLoading, setSaveLoading] = useState(false);
+  const [projectTags, setProjectTags] = useState<Tag[]>([]);

  const { t } = useTranslation();
  const { createNotification } = useNotificationContext();
@@ -233,6 +239,8 @@ export default function Dashboard() {
          action: 'first_time_secrets_pushed'
        });
        setHasUserEverPushed(!!userAction);
+
+        setProjectTags(await getWorkspaceTags({ workspaceId }));
      } catch (error) {
        console.log('Error', error);
        setData(undefined);
@@ -275,7 +283,8 @@ export default function Dashboard() {
        key: '',
        value: '',
        valueOverride: undefined,
-        comment: ''
+        comment: '',
+        tags: []
      },
      ...data!
    ]);
@@ -295,7 +304,8 @@ export default function Dashboard() {
        key: '',
        value: '',
        valueOverride: undefined,
-        comment: ''
+        comment: '',
+        tags: []
      },
    ]);
  };
@@ -333,6 +343,11 @@ export default function Dashboard() {
    setButtonReady(true);
  };

+  const modifyTags = (tags: Tag[], pos: number) => {
+    setData((oldData) => oldData?.map((e) => (e.pos === pos ? { ...e, tags } : e)));
+    setButtonReady(true);
+  };
+
  // For speed purposes and better perforamance, we are using useCallback
  const listenChangeValue = useCallback((value: string, pos: number) => {
    modifyValue(value, pos);
@@ -350,6 +365,10 @@ export default function Dashboard() {
    modifyComment(value, pos);
  }, []);

+  const listenChangeTags = useCallback((value: Tag[], pos: number) => {
+    modifyTags(value, pos);
+  }, []);
+
  /**
   * Save the changes of environment variables and push them to the database
   */
@@ -422,7 +441,9 @@ export default function Dashboard() {
              newData!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0].key !==
                initDataPoint.key ||
              newData!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0].comment !==
-                initDataPoint.comment)
+                initDataPoint.comment) ||
+              newData!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0].tags !==
+                initDataPoint.tags
        )
        .map((secret) => secret.id)
        .includes(newDataPoint.id)
@@ -456,7 +477,8 @@ export default function Dashboard() {
        valueOverride: override.valueOverride,
        comment: '',
        id: String(override.idOverride),
-        idOverride: String(override.idOverride)
+        idOverride: String(override.idOverride),
+        tags: override.tags
      }));
    console.log('override add', overridesToBeAdded.length);

@@ -471,7 +493,9 @@ export default function Dashboard() {
                newOverrides!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0].key !==
                  initDataPoint.key ||
                newOverrides!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0]
-                  .comment !== initDataPoint.comment)
+                  .comment !== initDataPoint.comment ||
+                newOverrides!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0]
+                  .tags !== initDataPoint.tags)
          )
          .map((secret) => secret.id)
          .includes(newDataPoint.id)
@@ -483,7 +507,8 @@ export default function Dashboard() {
        valueOverride: override.valueOverride,
        comment: '',
        id: String(override.idOverride),
-        idOverride: String(override.idOverride)
+        idOverride: String(override.idOverride),
+        tags: override.tags
      }));
    console.log('override update', overridesToBeUpdated.length);

@@ -544,34 +569,6 @@ export default function Dashboard() {
        <meta name="og:description" content={String(t('dashboard:og-description'))} />
      </Head>
      <div className="flex flex-row h-full dark:[color-scheme:dark]">
-        {sidebarSecretId !== 'None' && (
-          <SideBar
-            toggleSidebar={toggleSidebar}
-            data={data.filter(
-              (row: SecretDataProps) =>
-                row.key === data.filter((r) => r.id === sidebarSecretId)[0]?.key
-            )}
-            modifyKey={listenChangeKey}
-            modifyValue={listenChangeValue}
-            modifyValueOverride={listenChangeValueOverride}
-            modifyComment={listenChangeComment}
-            buttonReady={buttonReady}
-            workspaceEnvs={workspaceEnvs}
-            selectedEnv={selectedEnv!}
-            workspaceId={workspaceId}
-            savePush={savePush}
-            sharedToHide={sharedToHide}
-            setSharedToHide={setSharedToHide}
-            deleteRow={deleteCertainRow}
-          />
-        )}
-        {PITSidebarOpen && (
-          <PITRecoverySidebar
-            toggleSidebar={togglePITSidebar}
-            chosenSnapshot={String(snapshotData?.id ? snapshotData.id : '')}
-            setSnapshotData={setSnapshotData}
-          />
-        )}
        <div className="w-full max-h-96 pb-2 dark:[color-scheme:dark]">
          <NavHeader pageName={t('dashboard:title')} isProjectRelated />
          {checkDocsPopUpVisible && (
@@ -626,7 +623,10 @@ export default function Dashboard() {
              <div className="flex justify-start max-w-sm mt-1 mr-2">
                <Button
                  text={String(`${numSnapshots} ${t('Commits')}`)}
-                  onButtonPressed={() => togglePITSidebar(true)}
+                  onButtonPressed={() => {
+                    toggleSidebar('None');
+                    togglePITSidebar(true)
+                  }}
                  color="mineshaft"
                  size="md"
                  icon={faClockRotateLeft}
@@ -661,7 +661,8 @@ export default function Dashboard() {
                          valueOverride: sv.valueOverride,
                          key: sv.key,
                          value: sv.value,
-                          comment: ''
+                          comment: '',
+                          tags: sv.tags
                        }));
                      setData(rolledBackSecrets);

@@ -779,27 +780,58 @@ export default function Dashboard() {
                  className="mt-1 max-h-[calc(100vh-280px)] overflow-hidden overflow-y-scroll no-scrollbar no-scrollbar::-webkit-scrollbar border border-mineshaft-600 rounded-md"
                >
                  <div ref={secretsTop} />
-                  <div className='bg-mineshaft-800 text-sm rounded-t-md h-10 w-full flex flex-row items-center border-b-2 border-mineshaft-500 sticky top-0 z-[60]'>
-                    <div className='w-14'/>
-                    <div className='text-bunker-300 relative font-semibold h-10 flex items-center w-80 pl-2 border-r border-mineshaft-600'>
-                      <span>Key</span>
-                      {!snapshotData && <IconButton 
-                        ariaLabel="copy icon"
-                        variant="plain"
-                        className="group relative ml-2"
-                        onClick={() => reorderRows(1)}
-                      >
-                          {sortMethod === 'alphabetical' ? <FontAwesomeIcon icon={faArrowUp} /> : <FontAwesomeIcon icon={faArrowDown} />}
-                      </IconButton>}
+                  <div
+                    className='group flex flex-col items-center bg-mineshaft-800 border-b-2 border-mineshaft-500 duration-100 sticky top-0 z-[60]'
+                  >
+                    <div className="relative flex flex-row justify-between w-full mr-auto max-h-14 items-center">
+                      <div className="w-2/12 border-r border-mineshaft-600 flex flex-row items-center">
+                        <div className='text-transparent text-xs flex items-center justify-center w-14 h-10 cursor-default'>0</div>
+                        <span className='px-2 text-bunker-300 font-semibold'>Key</span>
+                        {!snapshotData && <IconButton 
+                          ariaLabel="copy icon"
+                          variant="plain"
+                          className="group relative ml-2"
+                          onClick={() => reorderRows(1)}
+                        >
+                            {sortMethod === 'alphabetical' ? <FontAwesomeIcon icon={faArrowUp} /> : <FontAwesomeIcon icon={faArrowDown} />}
+                        </IconButton>}
+                      </div>
+                      <div className="w-5/12 border-r border-mineshaft-600">
+                        <div
+                          className='flex items-center rounded-lg mt-4 md:mt-0 max-h-10'
+                        >
+                          <div className='text-bunker-300 px-2 font-semibold h-10 flex items-center w-7/12'>Value</div>
+                        </div>
+                      </div>
+                      <div className="w-2/12 border-r border-mineshaft-600">
+                        <div className="flex items-center max-h-16">
+                          <div className='text-bunker-300 px-2 font-semibold h-10 flex items-center w-3/12'>Comment</div>
+                        </div>
+                      </div>
+                      <div className="w-2/12">
+                        <div className="flex items-center max-h-16">
+                          <div className='text-bunker-300 px-2 font-semibold h-10 flex items-center w-3/12'>Tags</div>
+                        </div>
+                      </div>
+                      <div
+                        className="w-[1.5rem] h-[2.35rem] ml-auto rounded-md flex flex-row justify-center items-center"
+                      />
+                      <div className='w-[1.5rem] h-[2.35rem] mr-2 flex items-center justfy-center'>
+                        <div
+                          onKeyDown={() => null}
+                          role="none"
+                          onClick={() => {}}
+                          className="invisible group-hover:visible"
+                        >
+                          <FontAwesomeIcon className="text-bunker-300 hover:text-red pl-2 pr-6 text-lg mt-0.5 invisible" icon={faXmark} />
+                        </div>
+                      </div>
                    </div>
-                    <div className='text-bunker-300 pl-2 font-semibold h-10 flex items-center w-full border-r border-mineshaft-600'>Value</div>
-                    <div className='text-bunker-300 pl-2 font-semibold h-10 flex items-center w-96'>Comment</div>
-                    {!snapshotData && <div className='w-[9.3rem]'/>}
                  </div>
                  <div className="bg-mineshaft-800 rounded-b-md border-bunker-600">
                    {!snapshotData &&
                      data
-                        ?.filter((row) => row.key?.toUpperCase().includes(searchKeys.toUpperCase()))
+                        ?.filter((row) => row.key?.toUpperCase().includes(searchKeys.toUpperCase()) || row.tags?.map(tag => tag.name).join(" ")?.toUpperCase().includes(searchKeys.toUpperCase()))
                        .filter((row) => !sharedToHide.includes(row.id))
                        .map((keyPair) => (
                          <KeyPair
@@ -809,14 +841,17 @@ export default function Dashboard() {
                            modifyValueOverride={listenChangeValueOverride}
                            modifyKey={listenChangeKey}
                            modifyComment={listenChangeComment}
+                            modifyTags={listenChangeTags}
                            isBlurred={blurred}
                            isDuplicate={findDuplicates(data?.map((item) => item.key))?.includes(
                              keyPair.key
                            )}
                            toggleSidebar={toggleSidebar}
+                            togglePITSidebar={togglePITSidebar}
                            sidebarSecretId={sidebarSecretId}
                            isSnapshot={false}
                            deleteRow={deleteCertainRow}
+                            tags={projectTags}
                          />
                        ))}
                    {snapshotData &&
@@ -848,6 +883,7 @@ export default function Dashboard() {
                            modifyValueOverride={listenChangeValueOverride}
                            modifyKey={listenChangeKey}
                            modifyComment={listenChangeComment}
+                            modifyTags={listenChangeTags}
                            isBlurred={blurred}
                            isDuplicate={findDuplicates(data?.map((item) => item.key))?.includes(
                              keyPair.key
@@ -855,6 +891,7 @@ export default function Dashboard() {
                            toggleSidebar={toggleSidebar}
                            sidebarSecretId={sidebarSecretId}
                            isSnapshot
+                            tags={projectTags}
                          />
                        ))}
                    <div className='bg-mineshaft-800 text-sm rounded-t-md hover:bg-mineshaft-700 h-10 w-full flex flex-row items-center border-b-2 border-mineshaft-500 sticky top-0 z-[60]'>
@@ -908,6 +945,34 @@ export default function Dashboard() {
            )}
          </div>
        </div>
+        {sidebarSecretId !== 'None' && (
+          <SideBar
+            toggleSidebar={toggleSidebar}
+            data={data.filter(
+              (row: SecretDataProps) =>
+                row.key === data.filter((r) => r.id === sidebarSecretId)[0]?.key
+            )}
+            modifyKey={listenChangeKey}
+            modifyValue={listenChangeValue}
+            modifyValueOverride={listenChangeValueOverride}
+            modifyComment={listenChangeComment}
+            buttonReady={buttonReady}
+            workspaceEnvs={workspaceEnvs}
+            selectedEnv={selectedEnv!}
+            workspaceId={workspaceId}
+            savePush={savePush}
+            sharedToHide={sharedToHide}
+            setSharedToHide={setSharedToHide}
+            deleteRow={deleteCertainRow}
+          />
+        )}
+        {PITSidebarOpen && (
+          <PITRecoverySidebar
+            toggleSidebar={togglePITSidebar}
+            chosenSnapshot={String(snapshotData?.id ? snapshotData.id : '')}
+            setSnapshotData={setSnapshotData}
+          />
+        )}
      </div>
    </div>
  ) : (
--- a/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
@@ -18,19 +18,24 @@ import { useToggle } from '@app/hooks';
 import {
  useCreateServiceToken,
  useCreateWsEnvironment,
+  useCreateWsTag,
  useDeleteServiceToken,
  useDeleteWorkspace,
  useDeleteWsEnvironment,
+  useDeleteWsTag,
  useGetUserWsKey,
  useGetUserWsServiceTokens,
+  useGetWsTags,
  useRenameWorkspace,
  useUpdateWsEnvironment
 } from '@app/hooks/api';

+import { SecretTagsSection } from './components/SecretTagsSection';
 import {
  CopyProjectIDSection,
  CreateServiceToken,
  CreateUpdateEnvFormData,
+  CreateWsTag,
  EnvironmentSection,
  ProjectNameChangeSection,
  ServiceTokenSection
@@ -61,6 +66,11 @@ export const ProjectSettingsPage = () => {
  const createServiceToken = useCreateServiceToken();
  const deleteServiceToken = useDeleteServiceToken();

+  // tag
+  const { data: wsTags } = useGetWsTags(workspaceID);
+  const createWsTag = useCreateWsTag();
+  const deleteWsTag = useDeleteWsTag();
+
  // get user subscription
  const { subscriptionPlan } = useSubscription();
  const host = window.location.origin;
@@ -207,6 +217,44 @@ export const ProjectSettingsPage = () => {
    return '';
  };

+  const onCreateWsTag = async ({ name }: CreateWsTag) => {
+    try {
+      const res = await createWsTag.mutateAsync({
+        workspaceID,
+        tagName: name,
+        tagSlug: name.replace(" ", "_")
+      });
+      createNotification({
+        text: 'Successfully created a tag',
+        type: 'success'
+      });
+      return res?.data?.name;
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: 'Failed to create a tag',
+        type: 'error'
+      });
+    }
+    return '';
+  };
+
+  const onDeleteTag = async (tagID: string) => {
+    try {
+      await deleteWsTag.mutateAsync({ tagID });
+      createNotification({
+        text: 'Successfully deleted tag',
+        type: 'success'
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: 'Failed to delete the tag',
+        type: 'error'
+      });
+    }
+  };
+
  const onDeleteServiceToken = async (tokenID: string) => {
    try {
      await deleteServiceToken.mutateAsync(tokenID);
@@ -224,7 +272,7 @@ export const ProjectSettingsPage = () => {
  };

  return (
-    <div className="container mx-auto flex flex-col px-8 text-mineshaft-50">
+    <div className="container mx-auto flex flex-col px-8 text-mineshaft-50 dark dark:[color-scheme:dark]">
      {/* TODO(akhilmhdh): Remove this right when layout is refactored  */}
      <div className="relative right-5">
        <NavHeader pageName={t('settings-project:title')} isProjectRelated />
@@ -256,6 +304,12 @@ export const ProjectSettingsPage = () => {
        workspaceName={currentWorkspace?.name || ''}
        onCreateToken={onCreateServiceToken}
      />
+      <SecretTagsSection
+        tags={wsTags || []}
+        onDeleteTag={onDeleteTag}
+        workspaceName={currentWorkspace?.name || ''}
+        onCreateTag={onCreateWsTag}
+      />
      <div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md border-l border-red bg-white/5 px-6 pl-6 pb-4 pt-4">
        <p className="text-xl font-bold text-red">{t('settings-project:danger-zone')}</p>
        <p className="text-md mt-2 text-gray-400">{t('settings-project:danger-zone-note')}</p>
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx
@@ -102,7 +102,7 @@ export const EnvironmentSection = ({
            colorSchema="primary"
            leftIcon={<FontAwesomeIcon icon={faPlus} />}
          >
-            Add New Env
+            Add New Environment
          </Button>
        </div>
      </div>
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsSection.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsSection.tsx
@@ -0,0 +1,186 @@
+import { Controller, useForm } from 'react-hook-form';
+import { faPlus, faTrashCan } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+
+import {
+  Button,
+  DeleteActionModal,
+  FormControl,
+  IconButton,
+  Input,
+  Modal,
+  ModalClose,
+  ModalContent,
+  ModalTrigger,
+  Table,
+  TableContainer,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr,
+} from '@app/components/v2';
+import { usePopUp } from '@app/hooks';
+import { WorkspaceTag } from '@app/hooks/api/types';
+
+const createTagSchema = yup.object({
+  name: yup.string().required().label('Tag Name'),
+});
+
+export type CreateWsTag = yup.InferType<typeof createTagSchema>;
+
+type Props = {
+  tags: WorkspaceTag[];
+  workspaceName: string;
+  onDeleteTag: (tagID: string) => Promise<void>;
+  onCreateTag: (data: CreateWsTag) => Promise<string>;
+};
+
+type DeleteModalData = { name: string; id: string };
+
+export const SecretTagsSection = ({
+  tags = [],
+  onDeleteTag,
+  workspaceName,
+  onCreateTag
+}: Props): JSX.Element => {
+  const { popUp, handlePopUpToggle, handlePopUpClose, handlePopUpOpen } = usePopUp([
+    'CreateSecretTag',
+    'deleteTagConfirmation'
+  ] as const);
+
+  const {
+    control,
+    reset,
+    handleSubmit,
+    formState: { isSubmitting }
+  } = useForm<CreateWsTag>({
+    resolver: yupResolver(createTagSchema)
+  });
+
+  const onFormSubmit = async (data: CreateWsTag) => {
+    console.log(19191, data);
+    await onCreateTag(data);
+    handlePopUpClose('CreateSecretTag');
+  };
+
+  const onDeleteApproved = async () => {
+    await onDeleteTag((popUp?.deleteTagConfirmation?.data as DeleteModalData)?.id);
+    handlePopUpClose('deleteTagConfirmation');
+  };
+
+  return (
+    <div className="mt-4 mb-4 flex w-full flex-col items-start rounded-md bg-white/5 p-6">
+      <div className="flex w-full flex-row justify-between">
+        <div className="flex w-full flex-col">
+          <p className="mb-3 text-xl font-semibold">Secret Tags</p>
+          <p className="text-sm text-gray-400">Every secret can be assigned to one or more tags. Here you can add and remove tags for the current project.</p>
+        </div>
+        <div>
+          <Modal
+            isOpen={popUp?.CreateSecretTag?.isOpen}
+            onOpenChange={(open) => {
+              handlePopUpToggle('CreateSecretTag', open);
+              reset();
+            }}
+          >
+            <ModalTrigger asChild>
+              <Button color="mineshaft" leftIcon={<FontAwesomeIcon icon={faPlus} />}>
+                Add New Tag
+              </Button>
+            </ModalTrigger>
+            <ModalContent
+              title={`Add a tag for ${  workspaceName}`}
+              subTitle='Specify your tag name, and the slug will be created automatically.'
+            >
+              <form onSubmit={handleSubmit(onFormSubmit)}>
+                <Controller
+                  control={control}
+                  name="name"
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label='Tag Name'
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} placeholder="Type your tag name" />
+                    </FormControl>
+                  )}
+                />
+                <div className="mt-8 flex items-center">
+                  <Button
+                    className="mr-4"
+                    type="submit"
+                    isDisabled={isSubmitting}
+                    isLoading={isSubmitting}
+                  >
+                    Create
+                  </Button>
+                  <ModalClose asChild>
+                    <Button variant="plain" colorSchema="secondary">
+                      Cancel
+                    </Button>
+                  </ModalClose>
+                </div>
+              </form>
+            </ModalContent>
+          </Modal>
+        </div>
+      </div>
+      <TableContainer className='mt-4'>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Tag</Th>
+              <Th>Slug</Th>
+              <Th aria-label="button" />
+            </Tr>
+          </THead>
+          <TBody>
+            {tags?.length > 0 ? (
+              tags.map(({ _id, name, slug }) => (
+                <Tr key={name}>
+                  <Td>{name}</Td>
+                  <Td>{slug}</Td>
+                  <Td className="flex items-center justify-end">
+                    <IconButton
+                      onClick={() =>
+                        handlePopUpOpen('deleteTagConfirmation', {
+                          name, 
+                          id: _id
+                        })
+                      }
+                      colorSchema="danger"
+                      ariaLabel="update"
+                    >
+                      <FontAwesomeIcon icon={faTrashCan} />
+                    </IconButton>
+                  </Td>
+                </Tr>
+              ))
+            ) : (
+              <Tr>
+                <Td colSpan={4} className="py-6 text-center text-bunker-400">
+                  No tags found for this project
+                </Td>
+              </Tr>
+            )}
+          </TBody>
+        </Table>
+      </TableContainer>
+      <DeleteActionModal
+        isOpen={popUp.deleteTagConfirmation.isOpen}
+        title={`Delete ${
+          (popUp?.deleteTagConfirmation?.data as DeleteModalData)?.name || ' '
+        } api key?`}
+        onChange={(isOpen) => handlePopUpToggle('deleteTagConfirmation', isOpen)}
+        deleteKey={(popUp?.deleteTagConfirmation?.data as DeleteModalData)?.name}
+        onClose={() => handlePopUpClose('deleteTagConfirmation')}
+        onDeleteApproved={onDeleteApproved}
+      />
+    </div>
+  );
+};
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/index.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/index.tsx
@@ -0,0 +1 @@
+export {SecretTagsSection} from './SecretTagsSection'
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/index.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/index.tsx
@@ -2,5 +2,6 @@ export { CopyProjectIDSection } from './CopyProjectIDSection';
 export { EnvironmentSection } from './EnvironmentSection';
 export type { CreateUpdateEnvFormData } from './EnvironmentSection/EnvironmentSection';
 export { ProjectNameChangeSection } from './ProjectNameChangeSection';
+export type { CreateWsTag } from './SecretTagsSection/SecretTagsSection';
 export { ServiceTokenSection } from './ServiceTokenSection';
 export type { CreateServiceToken } from './ServiceTokenSection/ServiceTokenSection';
				`@@ -0,0 +1 @@`
				`export {SecretTagsSection} from './SecretTagsSection'`