Update package-lock.json

2026-09-22 13:39:35 +00:00 · 2023-04-17 11:11:18 +03:00
parent df83e8ceb9 8f08c4955f
commit 338d287d35
22 changed files with 1920 additions and 889 deletions
--- a/.env.example
+++ b/.env.example
@@ -31,12 +31,12 @@ MONGO_PASSWORD=example
 SITE_URL=http://localhost:8080

 # Mail/SMTP
-SMTP_HOST= # required
-SMTP_USERNAME= # required
-SMTP_PASSWORD= # required
+SMTP_HOST= 
+SMTP_USERNAME= 
+SMTP_PASSWORD= 
 SMTP_PORT=587
 SMTP_SECURE=false
-SMTP_FROM_ADDRESS= # required
+SMTP_FROM_ADDRESS= 
 SMTP_FROM_NAME=Infisical

 # Integration
@@ -66,4 +66,4 @@ STRIPE_WEBHOOK_SECRET=
 STRIPE_PRODUCT_STARTER=
 STRIPE_PRODUCT_TEAM=
 STRIPE_PRODUCT_PRO=
-NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
--- a/README.md
+++ b/README.md
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
--- a/backend/package.json
+++ b/backend/package.json
@@ -1,15 +1,16 @@
 {
  "dependencies": {
-    "@aws-sdk/client-secrets-manager": "^3.287.0",
+    "@aws-sdk/client-secrets-manager": "^3.294.0",
    "@godaddy/terminus": "^4.11.2",
    "@octokit/rest": "^19.0.5",
+    "@sentry/tracing": "^7.41.0",
    "@sentry/node": "^7.40.0",
-    "@sentry/tracing": "^7.39.0",
+    "@sentry/node": "^7.41.0",
    "@types/crypto-js": "^4.1.1",
    "@types/libsodium-wrappers": "^0.7.10",
    "argon2": "^0.30.3",
    "await-to-js": "^3.0.0",
-    "aws-sdk": "^2.1331.0",
+    "aws-sdk": "^2.1338.0",
    "axios": "^1.1.3",
    "axios-retry": "^3.4.0",
    "bcrypt": "^5.1.0",
@@ -32,7 +33,7 @@
    "lodash": "^4.17.21",
    "mongoose": "^6.10.3",
    "nodemailer": "^6.8.0",
-    "posthog-node": "^2.5.4",
+    "posthog-node": "^2.6.0",
    "query-string": "^7.1.3",
    "request-ip": "^3.3.0",
    "rimraf": "^3.0.2",
--- a/backend/src/controllers/v2/serviceTokenDataController.ts
+++ b/backend/src/controllers/v2/serviceTokenDataController.ts
@@ -75,8 +75,11 @@ export const createServiceTokenData = async (req: Request, res: Response) => {
    const secret = crypto.randomBytes(16).toString('hex');
    const secretHash = await bcrypt.hash(secret, getSaltRounds());

-    const expiresAt = new Date();
-    expiresAt.setSeconds(expiresAt.getSeconds() + expiresIn);
+    let expiresAt; 
+    if (expiresIn) {
+        expiresAt = new Date()
+        expiresAt.setSeconds(expiresAt.getSeconds() + expiresIn);
+    }

    let user, serviceAccount;
    
--- a/frontend/src/components/analytics/posthog.ts
+++ b/frontend/src/components/analytics/posthog.ts
@@ -6,7 +6,7 @@ import { ENV, POSTHOG_API_KEY, POSTHOG_HOST } from '../utilities/config';

 export const initPostHog = () => {
  // @ts-ignore
-  console.log("Init Infisical")
+  console.log("Hi there 👋")
  try {
    if (typeof window !== 'undefined') {
      // @ts-ignore
--- a/frontend/src/components/dashboard/DeleteActionButton.tsx
+++ b/frontend/src/components/dashboard/DeleteActionButton.tsx
@@ -1,10 +1,9 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next';
 import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

 import Button from '../basic/buttons/Button';
-import { DeleteEnvVar } from '../basic/dialog/DeleteEnvVar';

 type Props = {
  onSubmit: () => void;
@@ -13,7 +12,6 @@ type Props = {

 export const DeleteActionButton = ({ onSubmit, isPlain }: Props) => {
  const { t } = useTranslation();
-  const [open, setOpen] = useState(false)

  return (
    <div className={`${
@@ -25,25 +23,17 @@ export const DeleteActionButton = ({ onSubmit, isPlain }: Props) => {
        onKeyDown={() => null}
        role="button"
        tabIndex={0}
-        onClick={() => setOpen(true)}
+        onClick={onSubmit}
        className="invisible group-hover:visible"
      >
        <FontAwesomeIcon className="text-bunker-300 hover:text-red pl-2 pr-6 text-lg mt-0.5" icon={faXmark} />
      </div>
      : <Button
        text={String(t("Delete"))}
-        // onButtonPressed={onSubmit}
        color="red"
        size="md"
-        onButtonPressed={() => setOpen(true)}
+        onButtonPressed={onSubmit}
      />}
-      <DeleteEnvVar 
-        isOpen={open}
-        onClose={() => {
-          setOpen(false)
-        }}
-        onSubmit={onSubmit}
-      />
    </div>
  )
 }
--- a/frontend/src/components/navigation/NavHeader.tsx
+++ b/frontend/src/components/navigation/NavHeader.tsx
@@ -1,52 +1,89 @@
+import { useRouter } from 'next/router';
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

 import { useOrganization, useWorkspace } from '@app/context';

+import { Select, SelectItem, Tooltip } from '../v2';
+
 // TODO: make links clickable and clean up

 /**
 * This is the component at the top of almost every page.
 * It shows how to navigate to a certain page.
 * It future these links should also be clickable and hoverable
- * @param obj
- * @param obj.pageName - Name of the page
- * @param obj.isProjectRelated - whether or not this page is related to project (determine if it's 2 or 3 navigation steps)
- * @param obj.isOrganizationRelated - whether or not this page is related to organization (determine if it's 2 or 3 navigation steps)
+ * @param {object} obj
+ * @param {string} obj.pageName - Name of the page
+ * @param {boolean} obj.isProjectRelated - whether or not this page is related to project (determine if it's 2 or 3 navigation steps)
+ * @param {boolean} obj.isOrganizationRelated - whether or not this page is related to organization (determine if it's 2 or 3 navigation steps)
+ * @param {string} obj.currentEnv - current environment inside a project
+ * @param {string} obj.userAvailableEnvs - environments that are available to a user in this project (used for the dropdown)
+ * @param {string} obj.onEnvChange - the action that happens when an env is changed
 * @returns
 */
 export default function NavHeader({
  pageName,
  isProjectRelated,
-  isOrganizationRelated
+  isOrganizationRelated,
+  currentEnv,
+  userAvailableEnvs,
+  onEnvChange
 }: {
  pageName: string;
  isProjectRelated?: boolean;
  isOrganizationRelated?: boolean;
+  currentEnv?: string;
+  userAvailableEnvs?: any[];
+  onEnvChange?: (slug: string) => void;
 }): JSX.Element {
  const { currentWorkspace } = useWorkspace();
  const { currentOrg } = useOrganization();
+  const router = useRouter()

  return (
    <div className="ml-6 flex flex-row items-center pt-8">
      <div className="mr-2 flex h-6 w-6 items-center justify-center rounded-md bg-primary-900 text-mineshaft-100">
        {currentOrg?.name?.charAt(0)}
      </div>
-      <div className="text-sm font-semibold text-primary">{currentOrg?.name}</div>
+      <div className="text-sm font-semibold text-bunker-300">{currentOrg?.name}</div>
      {isProjectRelated && (
        <>
-          <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />
-          <div className="text-sm font-semibold text-primary">{currentWorkspace?.name}</div>
+          <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-xs text-gray-400" />
+          <div className="text-sm font-semibold text-bunker-300">{currentWorkspace?.name}</div>
        </>
      )}
      {isOrganizationRelated && (
        <>
-          <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />
-          <div className="text-sm font-semibold text-primary">Organization Settings</div>
+          <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-xs text-gray-400" />
+          <div className="text-sm font-semibold text-bunker-300">Organization Settings</div>
        </>
      )}
      <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />
-      <div className="text-sm text-gray-400">{pageName}</div>
+      {pageName === 'Secrets'
+      ? <a className="text-sm font-semibold text-primary/80 hover:text-primary" href={`${router.asPath.split("?")[0]}`}>{pageName}</a>
+      : <div className="text-sm text-gray-400">{pageName}</div>}
+      {currentEnv &&
+      <>
+        <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-xs text-gray-400" />
+        <div className='pl-3 rounded-md hover:bg-bunker-100/10'>
+          <Tooltip content="Select environment">
+            <Select
+              value={userAvailableEnvs?.filter(uae => uae.name === currentEnv)[0]?.slug}
+              onValueChange={(value) => {
+                if (value && onEnvChange) onEnvChange(value);
+              }}
+              className="text-sm pl-0 font-medium text-primary/80 hover:text-primary bg-transparent"
+              dropdownContainerClassName="text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 drop-shadow-2xl"
+            >
+              {userAvailableEnvs?.map(({ name, slug }) => (
+                <SelectItem value={slug} key={slug}>
+                  {name}
+                </SelectItem>
+              ))}
+            </Select>
+          </Tooltip>
+        </div>
+      </>}
    </div>
  );
 }
--- a/frontend/src/components/v2/Button/Button.tsx
+++ b/frontend/src/components/v2/Button/Button.tsx
@@ -34,6 +34,7 @@ const buttonVariants = cva(
        outline: ['bg-transparent', 'border-2', 'border-solid'],
        plain: '',
        selected: '',
+        outline_bg: '',
        // a constant color not in use on hover or click goes colorSchema color
        star: 'text-bunker-200 bg-mineshaft-500'
      },
@@ -67,6 +68,11 @@ const buttonVariants = cva(
        variant: 'selected',
        className: 'bg-primary/10 border border-primary/50 text-bunker-200'
      },
+      {
+        colorSchema: 'primary',
+        variant: 'outline_bg',
+        className: 'bg-mineshaft-800 border border-mineshaft-600 hover:bg-primary/[0.15] hover:border-primary/60 text-bunker-200'
+      },
      {
        colorSchema: 'secondary',
        variant: 'star',
--- a/frontend/src/components/v2/Select/Select.tsx
+++ b/frontend/src/components/v2/Select/Select.tsx
@@ -1,6 +1,6 @@
 import { forwardRef, ReactNode } from 'react';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { faCheck, faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import { faCaretDown, faCheck, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { twMerge } from 'tailwind-merge';
@@ -49,7 +49,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
          </SelectPrimitive.Value>
          {!isDisabled && (
            <SelectPrimitive.Icon className="ml-3">
-              <FontAwesomeIcon icon={faChevronDown} size="sm" />
+              <FontAwesomeIcon icon={faCaretDown} size="sm" />
            </SelectPrimitive.Icon>
          )}
        </SelectPrimitive.Trigger>
@@ -76,7 +76,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
              )}
            </SelectPrimitive.Viewport>
            <SelectPrimitive.ScrollDownButton>
-              <FontAwesomeIcon icon={faChevronDown} size="sm" />
+              <FontAwesomeIcon icon={faCaretDown} size="xs" />
            </SelectPrimitive.ScrollDownButton>
          </SelectPrimitive.Content>
        </SelectPrimitive.Portal>
--- a/frontend/src/ee/components/SecretVersionList.tsx
+++ b/frontend/src/ee/components/SecretVersionList.tsx
@@ -76,7 +76,7 @@ const SecretVersionList = ({ secretId }: { secretId: string }) => {
  }, [secretId]);

  return (
-    <div className="w-full min-w-40 h-[12.4rem] px-4 mt-4 text-sm text-bunker-300 overflow-x-none">
+    <div className="w-full min-w-40 h-[12.4rem] px-4 mt-4 text-sm text-bunker-300 overflow-x-none dark">
      <p className="">{t('dashboard:sidebar.version-history')}</p>
      <div className="pl-1 py-0.5 rounded-md bg-bunker-800 border border-mineshaft-500 overflow-x-none h-full">
        {isLoading ? (
@@ -102,7 +102,7 @@ const SecretVersionList = ({ secretId }: { secretId: string }) => {
                      <div className="w-0 h-full border-l border-bunker-300 mt-1" />
                    </div>
                    <div className="flex flex-col w-full max-w-[calc(100%-2.3rem)]">
-                      <div className="pr-2 pt-1 text-bunker-300/90">
+                      <div className="pr-2 text-bunker-300/90">
                        {new Date(version.createdAt).toLocaleDateString('en-US', {
                          year: 'numeric',
                          month: '2-digit',
--- a/frontend/src/hooks/api/secrets/queries.tsx
+++ b/frontend/src/hooks/api/secrets/queries.tsx
@@ -19,18 +19,42 @@ import {

 export const secretKeys = {
  // this is also used in secretSnapshot part
-  getProjectSecret: (workspaceId: string, env: string) => [{ workspaceId, env }, 'secrets'],
+  getProjectSecret: (workspaceId: string, env: string | string[]) => [{ workspaceId, env }, 'secrets'],
  getSecretVersion: (secretId: string) => [{ secretId }, 'secret-versions']
 };

-const fetchProjectEncryptedSecrets = async (workspaceId: string, env: string) => {
-  const { data } = await apiRequest.get<{ secrets: EncryptedSecret[] }>('/api/v2/secrets', {
-    params: {
-      environment: env,
-      workspaceId
+const fetchProjectEncryptedSecrets = async (workspaceId: string, env: string | string[]) => {
+  if (typeof env === 'string') {
+    const { data } = await apiRequest.get<{ secrets: EncryptedSecret[] }>('/api/v2/secrets', {
+      params: {
+        environment: env,
+        workspaceId
+      }
+    });
+    return data.secrets;
+  }  
+  
+  if (typeof env === 'object') {
+    let allEnvData: any = [];
+    
+    // eslint-disable-next-line no-restricted-syntax
+    for (const envPoint of env) {
+      // eslint-disable-next-line no-await-in-loop
+      const { data } = await apiRequest.get<{ secrets: EncryptedSecret[] }>('/api/v2/secrets', {
+        params: {
+          environment: envPoint,
+          workspaceId
+        }
+      });
+      allEnvData = allEnvData.concat(data.secrets);
    }
-  });
-  return data.secrets;
+    
+    return allEnvData;
+  // eslint-disable-next-line no-else-return
+  } else {
+    return null;
+  }
+
 };

 export const useGetProjectSecrets = ({
@@ -59,7 +83,7 @@ export const useGetProjectSecrets = ({
      // this used for add-only mode in dashboard
      // type won't be there thus only one key is shown
      const duplicateSecretKey: Record<string, boolean> = {};
-      data.forEach((encSecret) => {
+      data.forEach((encSecret: EncryptedSecret) => {
        const secretKey = decryptSymmetric({
          ciphertext: encSecret.secretKeyCiphertext,
          iv: encSecret.secretKeyIV,
@@ -93,12 +117,12 @@ export const useGetProjectSecrets = ({
        };

        if (encSecret.type === 'personal') {
-          personalSecrets[decryptedSecret.key] = { id: encSecret._id, value: secretValue };
+          personalSecrets[`${decryptedSecret.key}-${decryptedSecret.env}`] = { id: encSecret._id, value: secretValue };
        } else {
-          if (!duplicateSecretKey?.[decryptedSecret.key]) {
+          if (!duplicateSecretKey?.[`${decryptedSecret.key}-${decryptedSecret.env}`]) {
            sharedSecrets.push(decryptedSecret);
          }
-          duplicateSecretKey[decryptedSecret.key] = true;
+          duplicateSecretKey[`${decryptedSecret.key}-${decryptedSecret.env}`] = true;
        }
      });
      sharedSecrets.forEach((val) => {
--- a/frontend/src/hooks/api/secrets/types.ts
+++ b/frontend/src/hooks/api/secrets/types.ts
@@ -90,7 +90,7 @@ export type BatchSecretDTO = {

 export type GetProjectSecretsDTO = {
  workspaceId: string;
-  env: string;
+  env: string | string[];
  decryptFileKey: UserWsKeyPair;
  isPaused?: boolean;
  onSuccess?: (data: DecryptedSecret[]) => void;
--- a/frontend/src/layouts/AppLayout/AppLayout.tsx
+++ b/frontend/src/layouts/AppLayout/AppLayout.tsx
@@ -20,6 +20,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { yupResolver } from '@hookform/resolvers/yup';
+import queryString from 'query-string';
 import * as yup from 'yup';

 import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
@@ -158,7 +159,10 @@ export const AppLayout = ({ children }: LayoutProps) => {
            .map((workspace: { _id: string }) => workspace._id)
            .includes(intendedWorkspaceId)
        ) {
-          router.push(`/dashboard/${userWorkspaces[0]._id}`);
+          const { env } = queryString.parse(router.asPath.split('?')[1]);
+          if (!env) {
+            router.push(`/dashboard/${userWorkspaces[0]._id}`);
+          }
        } else {
          setWorkspaceMapping(
            Object.fromEntries(
@@ -271,11 +275,12 @@ export const AppLayout = ({ children }: LayoutProps) => {
                          {name}
                        </SelectItem>
                      ))}
-                      <hr className="mt-1 mb-1 h-px border-0 bg-gray-700" />
+                      {/* <hr className="mt-1 mb-1 h-px border-0 bg-gray-700" /> */}
                      <div className="w-full">
                        <Button
-                          className="w-full py-2 text-bunker-200 bg-mineshaft-500 hover:bg-primary/90 hover:text-black"
-                          color="mineshaft"
+                          className="w-full py-2 text-bunker-200 bg-mineshaft-700"
+                          colorSchema="primary"
+                          variant="outline_bg"
                          size="sm"
                          onClick={() => handlePopUpOpen('addNewWs')}
                          leftIcon={<FontAwesomeIcon icon={faPlus} />}
--- a/frontend/src/pages/dashboard/[id].tsx
+++ b/frontend/src/pages/dashboard/[id].tsx
@@ -19,9 +19,9 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tag } from 'public/data/frequentInterfaces';
+import queryString from 'query-string';

 import Button from '@app/components/basic/buttons/Button';
-import ListBox from '@app/components/basic/Listbox';
 import BottonRightPopup from '@app/components/basic/popups/BottomRightPopup';
 import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
 import ConfirmEnvOverwriteModal from '@app/components/dashboard/ConfirmEnvOverwriteModal';
@@ -41,6 +41,8 @@ import getProjectSercetSnapshotsCount from '@app/ee/api/secrets/GetProjectSercet
 import performSecretRollback from '@app/ee/api/secrets/PerformSecretRollback';
 import PITRecoverySidebar from '@app/ee/components/PITRecoverySidebar';
 import { useLeaveConfirm } from '@app/hooks';
+// import { DashboardPage } from  '@app/views/DashboardPage';
+import { DashboardEnvOverview } from '@app/views/DashboardPage/DashboardEnvOverview';

 // import addSecrets from '../api/files/AddSecrets';
 // import deleteSecrets from '../api/files/DeleteSecrets';
@@ -147,7 +149,6 @@ function findDuplicates(arr: any[]) {
 export default function Dashboard() {
  const [data, setData] = useState<SecretDataProps[] | null>();
  const [initialData, setInitialData] = useState<SecretDataProps[] | null | undefined>([]);
-  const router = useRouter();
  const [blurred, setBlurred] = useState(true);
  const [isKeyAvailable, setIsKeyAvailable] = useState(true);
  const [isNew, setIsNew] = useState(false);
@@ -169,7 +170,10 @@ export default function Dashboard() {

  const { hasUnsavedChanges, setHasUnsavedChanges } = useLeaveConfirm({ initialValue: false });
  const { t } = useTranslation();
+  
  const { createNotification } = useNotificationContext();
+  const router = useRouter();
+  const envInURL = queryString.parse(router.asPath.split('?')[1])?.env;

  const workspaceId = router.query.id as string;
  const [workspaceEnvs, setWorkspaceEnvs] = useState<WorkspaceEnv[]>([]);
@@ -783,13 +787,13 @@ export default function Dashboard() {
    deleteRow({ ids, secretName });
  };

-  const handleOnEnvironmentChange = (envName: string) => {
+  const handleOnEnvironmentChange = (envSlug: string) => {
    if (hasUnsavedChanges) {
      if (!window.confirm(leaveConfirmDefaultMessage)) return;
    }

    const selectedWorkspaceEnv = workspaceEnvs.find(
-      ({ name }: { name: string }) => envName === name
+      ({ slug }: { slug: string }) => envSlug === slug
    ) || {
      name: 'unknown',
      slug: 'unknown',
@@ -797,6 +801,8 @@ export default function Dashboard() {
      isReadDenied: false
    };

+    console.log(124, envSlug, selectedWorkspaceEnv)
+
    if (selectedWorkspaceEnv) {
      if (snapshotData) setSelectedSnapshotEnv(selectedWorkspaceEnv);
      else setSelectedEnv(selectedWorkspaceEnv);
@@ -809,7 +815,10 @@ export default function Dashboard() {
    })
  };

-  return data ? (
+  return <div>
+    {!envInURL 
+    ? <DashboardEnvOverview />
+    : (data ? (
    <div className="bg-bunker-800 max-h-screen h-full relative flex flex-col justify-between text-white dark">
      <Head>
        <title>{t('common:head-title', { title: t('dashboard:title') })}</title>
@@ -835,7 +844,13 @@ export default function Dashboard() {
          }
        />
        <div className="w-full max-h-96 pb-2 dark:[color-scheme:dark]">
-          <NavHeader pageName={t('dashboard:title')} isProjectRelated />
+          <NavHeader 
+            pageName={t('dashboard:title')} 
+            currentEnv={workspaceEnvs?.filter(envir => envir.slug === envInURL)[0].name || ''} 
+            isProjectRelated 
+            userAvailableEnvs={workspaceEnvs}
+            onEnvChange={handleOnEnvironmentChange}
+          />
          {checkDocsPopUpVisible && (
            <BottonRightPopup
              buttonText={t('dashboard:check-docs.button')}
@@ -851,7 +866,7 @@ export default function Dashboard() {
            {snapshotData && (
              <div className="flex justify-start max-w-sm mt-1 mr-2">
                <Button
-                  text={String(t('Go back to current'))}
+                  text={String(t('To Current'))}
                  onButtonPressed={() => setSnapshotData(undefined)}
                  color="mineshaft"
                  size="md"
@@ -863,7 +878,7 @@ export default function Dashboard() {
              <div className="font-semibold mr-4 mt-1 flex flex-row items-center">
                <p>{snapshotData ? 'Secret Snapshot' : t('dashboard:title')}</p>
                {snapshotData && (
-                  <span className="bg-primary-800 text-sm ml-4 mt-1 px-1.5 rounded-md">
+                  <span className="bg-primary-800 text-xs ml-4 mt-1 px-1.5 rounded-md w-min">
                    {new Date(snapshotData.createdAt).toLocaleString()}
                  </span>
                )}
@@ -873,13 +888,6 @@ export default function Dashboard() {
                  </span>
                )}
              </div>
-              {!snapshotData && data?.length === 0 && selectedEnv && (
-                <ListBox
-                  isSelected={selectedEnv.name}
-                  data={workspaceEnvs.map(({ name }) => name)}
-                  onChange={handleOnEnvironmentChange}
-                />
-              )}
            </div>
            <div className="flex flex-row">
              <div className="flex justify-start max-w-sm mt-1 mr-2">
@@ -960,20 +968,7 @@ export default function Dashboard() {
              <div className="w-full flex flex-row items-start">
                {(snapshotData || data?.length !== 0) && selectedEnv && (
                  <>
-                    {!snapshotData ? (
-                      <ListBox
-                        isSelected={selectedEnv.name}
-                        data={workspaceEnvs.map(({ name }) => name)}
-                        onChange={handleOnEnvironmentChange}
-                      />
-                    ) : (
-                      <ListBox
-                        isSelected={selectedSnapshotEnv?.name || ''}
-                        data={workspaceEnvs.map(({ name }) => name)}
-                        onChange={handleOnEnvironmentChange}
-                      />
-                    )}
-                    <div className="h-10 w-full bg-mineshaft-700 hover:bg-white/10 ml-2 rounded-md flex flex-row items-center">
+                    <div className="h-10 w-full bg-mineshaft-700 hover:bg-white/10 rounded-md flex flex-row items-center">
                      <FontAwesomeIcon
                        className="bg-transparent rounded-l-md py-[0.7rem] pl-4 pr-2 text-bunker-300 text-sm"
                        icon={faMagnifyingGlass}
@@ -1023,7 +1018,7 @@ export default function Dashboard() {
              <div className="flex items-center justify-center h-full my-48">
                <Image
                  src="/images/loading/loading.gif"
-                  height={60}
+                  height={600}
                  width={100}
                  alt="infisical loading indicator"
                />
@@ -1223,10 +1218,10 @@ export default function Dashboard() {
      </div>
    </div>
  ) : (
-    <div className="relative z-10 w-10/12 mr-auto h-full ml-2 bg-bunker-800 flex flex-col items-center justify-center">
+    <div className="relative z-10 w-10/12 mr-auto h-screen ml-2 bg-bunker-800 flex flex-col items-center justify-center">
      <Image src="/images/loading/loading.gif" height={70} width={120} alt="loading animation" />
    </div>
-  );
+  ))}</div>
 }

 Dashboard.requireAuth = true;
--- a/frontend/src/views/DashboardPage/DashboardEnvOverview.tsx
+++ b/frontend/src/views/DashboardPage/DashboardEnvOverview.tsx
@@ -0,0 +1,275 @@
+import { useEffect, useState } from 'react';
+import { FormProvider, useForm, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useRouter } from 'next/router';
+import { yupResolver } from '@hookform/resolvers/yup';
+
+import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
+import NavHeader from '@app/components/navigation/NavHeader';
+import {
+  Button,
+  Modal,
+  ModalContent,
+  TableContainer,
+  Tooltip
+} from '@app/components/v2';
+import { useWorkspace } from '@app/context';
+import { usePopUp } from '@app/hooks';
+import {
+  useCreateWsTag,
+  useGetProjectSecrets,
+  useGetUserWsEnvironments,
+  useGetUserWsKey,
+} from '@app/hooks/api';
+import { WorkspaceEnv } from '@app/hooks/api/types';
+
+import { CreateTagModal } from './components/CreateTagModal';
+import { EnvComparisonRow } from './components/EnvComparisonRow';
+import {
+  FormData,
+  schema
+} from './DashboardPage.utils';
+
+
+export const DashboardEnvOverview = () => {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const { createNotification } = useNotificationContext();
+
+  const { popUp
+    // , handlePopUpOpen
+    , handlePopUpToggle, handlePopUpClose } = usePopUp([
+    'secretDetails',
+    'addTag',
+    'secretSnapshots',
+    'uploadedSecOpts',
+    'compareSecrets'
+  ] as const);
+  const [selectedEnv, setSelectedEnv] = useState<WorkspaceEnv | null>(null);
+
+  const { currentWorkspace, isLoading } = useWorkspace();
+  const workspaceId = currentWorkspace?._id as string;
+  const { data: latestFileKey } = useGetUserWsKey(workspaceId);
+
+  useEffect(() => {
+    if (!isLoading && !workspaceId && router.isReady) {
+      router.push('/noprojects');
+    }
+  }, [isLoading, workspaceId, router.isReady]);
+
+  const { data: wsEnv, isLoading: isEnvListLoading } = useGetUserWsEnvironments({
+    workspaceId,
+    onSuccess: (data) => {
+      // get an env with one of the access available
+      const env = data.find(({ isReadDenied }) => !isReadDenied);
+      if (env) {
+        setSelectedEnv(env);
+      }
+    }
+  });
+
+  const userAvailableEnvs = wsEnv?.filter(
+    ({ isReadDenied }) => !isReadDenied
+  );
+  
+  const { data: secrets, isLoading: isSecretsLoading } = useGetProjectSecrets({
+    workspaceId,
+    env: userAvailableEnvs?.map(env => env.slug) ?? [],
+    decryptFileKey: latestFileKey!,
+    isPaused: false
+  });
+
+  // mutation calls
+  const { mutateAsync: createWsTag } = useCreateWsTag();
+
+  const method = useForm<FormData>({
+    // why any: well yup inferred ts expects other keys to defined as undefined
+    defaultValues: secrets as any,
+    values: secrets as any,
+    mode: 'onBlur',
+    resolver: yupResolver(schema)
+  });
+
+  const {
+    control,
+    // handleSubmit,
+    // getValues,
+    // setValue,
+    // formState: { isSubmitting, dirtyFields },
+    // reset
+  } = method;
+  const formSecrets = useWatch({ control, name: 'secrets' });
+
+  const isReadOnly = selectedEnv?.isWriteDenied;
+
+  const onCreateWsTag = async (tagName: string) => {
+    try {
+      await createWsTag({
+        workspaceID: workspaceId,
+        tagName,
+        tagSlug: tagName.replace(' ', '_')
+      });
+      handlePopUpClose('addTag');
+      createNotification({
+        text: 'Successfully created a tag',
+        type: 'success'
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: 'Failed to create a tag',
+        type: 'error'
+      });
+    }
+  };
+
+  if (isSecretsLoading || isEnvListLoading) {
+    return (
+      <div className="container mx-auto flex h-full w-full items-center justify-center px-8 text-mineshaft-50 dark:[color-scheme:dark]">
+        <img src="/images/loading/loading.gif" height={70} width={120} alt="loading animation" />
+      </div>
+    );
+  }
+
+  // when secrets is not loading and secrets list is empty
+  const isDashboardSecretEmpty = !isSecretsLoading && !formSecrets?.length;
+
+  const numSecretsMissingPerEnv = userAvailableEnvs?.map(envir => ({[envir.slug]: [... new Set(secrets?.secrets.map((secret: any) => secret.key))].length - [... new Set(secrets?.secrets.filter(s => s.env === envir.slug).map((secret: any) => secret.key))].length})).reduce((acc, cur) => ({ ...acc, ...cur }), {})
+
+  return (
+    <div className="container mx-auto max-w-full px-6 text-mineshaft-50 dark:[color-scheme:dark]">
+      <FormProvider {...method}>
+        <form autoComplete="off">
+          {/* breadcrumb row */}
+          <div className="relative right-5">
+            <NavHeader pageName={t('dashboard:title')} isProjectRelated />
+          </div>
+          <div className="mt-6 ml-1">
+            <p className="text-3xl font-semibold text-bunker-100">Secrets Overview</p>
+            <p className="text-md text-bunker-300">Inject your secrets using 
+              <a 
+                className="text-primary/80 hover:text-primary mx-1" 
+                href="https://infisical.com/docs/cli/overview" 
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Infisical CLI
+              </a> 
+              or 
+              <a 
+                className="text-primary/80 hover:text-primary mx-1" 
+                href="https://infisical.com/docs/sdks/overview" 
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Infisical SDKs
+              </a> </p>
+          </div>
+          <div className="overflow-y-auto">
+            <div className="sticky top-0 absolute flex flex-row h-10 bg-mineshaft-800 border border-mineshaft-600 rounded-md mt-8 min-w-[60.3rem]">
+              <div className="sticky top-0 w-10 px-4 flex items-center justify-center border-none">
+                <div className='text-center w-10 text-xs text-transparent'>{0}</div>
+              </div>
+              <div className="sticky top-0 border-none">
+                <div className="min-w-[200px] lg:min-w-[220px] xl:min-w-[250px] relative flex items-center justify-start h-full w-full">
+                  <div className="text-sm font-medium ">Secret</div>
+                </div>
+              </div>
+              {numSecretsMissingPerEnv && userAvailableEnvs?.map(env => {
+                return <div key={`header-${env.slug}`} className="flex flex-row w-full bg-mineshaft-800 rounded-md items-center border-none min-w-[11rem]">
+                  <div className="text-sm font-medium w-full text-center text-bunker-200/[.99] flex flex-row justify-center">
+                    {env.name}
+                    {numSecretsMissingPerEnv[env.slug] > 0 && <div className="bg-red rounded-sm h-[1.1rem] w-[1.1rem] mt-0.5 text-bunker-100 ml-2.5 text-xs border border-red-400 flex items-center justify-center cursor-default">
+                      <Tooltip content={`${numSecretsMissingPerEnv[env.slug]} secrets missing compared to other environments`}><span className="text-bunker-100">{numSecretsMissingPerEnv[env.slug]}</span></Tooltip>
+                    </div>}
+                  </div>
+                </div>
+              })}
+            </div>
+            <div className={`${isDashboardSecretEmpty ? "" : ""} flex flex-row items-start justify-center mt-3 h-full max-h-[calc(100vh-370px)] min-w-[60.3rem] flex-grow w-full overflow-x-hidden no-scrollbar no-scrollbar::-webkit-scrollbar`}>
+              {!isDashboardSecretEmpty && (
+                <TableContainer className='border-none'>
+                  <table className="relative secret-table w-full relative bg-bunker-800">
+                    <tbody className="overflow-y-auto max-h-screen">
+                      {[... new Set(secrets?.secrets.map((secret: any) => secret.key))].map((key, index) => (
+                        <EnvComparisonRow
+                          key={`row-${key}`}
+                          secrets={secrets?.secrets.filter(secret => secret.key === key)}
+                          isReadOnly={isReadOnly}
+                          index={index}
+                          isSecretValueHidden
+                          userAvailableEnvs={userAvailableEnvs}
+                        />
+                      ))}
+                    </tbody>
+                  </table>
+                </TableContainer>
+              )}
+              {isDashboardSecretEmpty &&
+                <div className='flex flex-row h-40 rounded-md mt-1 w-full'>
+                  <div className="sticky top-0 w-10 px-4 flex items-center justify-center border-none">
+                    <div className='text-center w-10 text-xs text-transparent'>{0}</div>
+                  </div>
+                  <div className="sticky top-0 border-none">
+                    <div className="min-w-[200px] lg:min-w-[220px] xl:min-w-[250px] relative flex items-center justify-start h-full w-full">
+                      <div className="text-sm font-medium text-transparent">Secret</div>
+                    </div>
+                  </div>
+                  <div className="flex flex-col w-full bg-mineshaft-800 text-bunker-300 rounded-md items-center justify-center border-none mx-2 min-w-[11rem]">
+                    <span className="mb-1">No secrets are available in this project yet.</span>
+                    <span>You can go into any environment to add secrets there.</span>
+                  </div>
+                </div>}
+                {/* In future, we should add an option to add environments here
+                <div className="ml-10 h-full flex items-start justify-center">
+                  <Button
+                    leftIcon={<FontAwesomeIcon icon={faPlus}/>}
+                    onClick={() => prepend(DEFAULT_SECRET_VALUE, { shouldFocus: false })}
+                    variant="outline_bg"
+                    colorSchema="primary"
+                    isFullWidth
+                    className="h-10"
+                  >
+                    Add Environment
+                  </Button>
+                </div> */}
+            </div>
+            <div className="group min-w-full flex flex-row items-center mt-4">
+              <div className="w-10 h-10 px-4 flex items-center justify-center border-none"><div className='text-center w-10 text-xs text-transparent'>0</div></div>
+              <div className="flex flex-row justify-between items-center min-w-[200px] lg:min-w-[220px] xl:min-w-[250px]">
+                <span className="text-transparent">0</span>
+                <button type="button" className='mr-2 text-transparent'>1</button>
+              </div>
+              {userAvailableEnvs?.map(env => {
+                return <div key={`button-${env.slug}`} className="flex flex-row w-full justify-center h-10 items-center border-none mb-1 mx-2 min-w-[10rem]">
+                    <Button
+                      onClick={() => router.push(`${router.asPath  }?env=${env.slug}`)}
+                      variant="outline_bg"
+                      colorSchema="primary"
+                      isFullWidth
+                      className="h-10"
+                    >
+                      Explore {env.name}
+                    </Button>
+                  </div>
+              })}
+            </div>  
+          </div>
+        </form>
+        <Modal
+          isOpen={popUp?.addTag?.isOpen}
+          onOpenChange={(open) => {
+            handlePopUpToggle('addTag', open);
+          }}
+        >
+          <ModalContent
+            title="Create tag"
+            subTitle="Specify your tag name, and the slug will be created automatically."
+          >
+            <CreateTagModal onCreateTag={onCreateWsTag} />
+          </ModalContent>
+        </Modal>
+      </FormProvider>
+    </div>
+  );
+};
--- a/frontend/src/views/DashboardPage/DashboardPage.tsx
+++ b/frontend/src/views/DashboardPage/DashboardPage.tsx
@@ -28,8 +28,6 @@ import {
  Popover,
  PopoverContent,
  PopoverTrigger,
-  Select,
-  SelectItem,
  TableContainer,
  Tag,
  Tooltip
@@ -86,7 +84,7 @@ const USER_ACTION_PUSH = 'first_time_secrets_pushed';
 * Instead when user delete we raise a flag so if user decides to go back to toggle personal before saving
 * They will get it back
 */
-export const DashboardPage = () => {
+export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
  const { t } = useTranslation();
  const router = useRouter();
  const { createNotification } = useNotificationContext();
@@ -126,8 +124,8 @@ export const DashboardPage = () => {
    onSuccess: (data) => {
      // get an env with one of the access available
      const env = data.find(({ isReadDenied, isWriteDenied }) => !isWriteDenied || !isReadDenied);
-      if (env) {
-        setSelectedEnv(env);
+      if (env && data?.map(wsenv => wsenv.slug).includes(envFromTop)) {
+        setSelectedEnv(data?.filter(dp => dp.slug === envFromTop)[0]);
      }
    }
  });
@@ -357,6 +355,7 @@ export const DashboardPage = () => {
    }
    const env = wsEnv?.find((el) => el.slug === slug);
    if (env) setSelectedEnv(env);
+    router.push(`${router.asPath.split("?")[0]}?env=${slug}`)
  };

  // record all deleted ids
@@ -417,7 +416,13 @@ export const DashboardPage = () => {
        <form autoComplete="off">
          {/* breadcrumb row */}
          <div className="relative right-5">
-            <NavHeader pageName={t('dashboard:title')} isProjectRelated />
+            <NavHeader 
+              pageName={t('dashboard:title')} 
+              currentEnv={userAvailableEnvs?.filter(envir => envir.slug === envFromTop)[0].name || ''} 
+              isProjectRelated 
+              userAvailableEnvs={userAvailableEnvs}
+              onEnvChange={onEnvChange}
+            />
          </div>
          {/* Secrets, commit and save button section */}
          <div className="mt-6 flex items-center justify-between">
@@ -468,23 +473,6 @@ export const DashboardPage = () => {
          </div>
          {/* Environment, search and other action row */}
          <div className="mt-4 flex items-center space-x-2">
-            <div>
-              <Tooltip content="Select environment">
-                <Select
-                  value={selectedEnv?.slug}
-                  onValueChange={onEnvChange}
-                  position="popper"
-                  className="min-w-[180px] bg-mineshaft-600 h-10 font-medium"
-                  dropdownContainerClassName="text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 drop-shadow-2xl"
-                >
-                  {userAvailableEnvs?.map(({ name, slug }) => (
-                    <SelectItem value={slug} key={slug}>
-                      {name}
-                    </SelectItem>
-                  ))}
-                </Select>
-              </Tooltip>
-            </div>
            <div className="flex-grow">
              <Input
                className="bg-mineshaft-600 h-[2.3rem] placeholder-mineshaft-50"
--- a/frontend/src/views/DashboardPage/components/EnvComparisonRow/EnvComparisonRow.tsx
+++ b/frontend/src/views/DashboardPage/components/EnvComparisonRow/EnvComparisonRow.tsx
@@ -0,0 +1,131 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+import { SyntheticEvent, useRef, useState } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { faCircle, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import guidGenerator from '@app/components/utilities/randomId';
+
+import { FormData } from '../../DashboardPage.utils';
+
+type Props = {
+  index: number;
+  secrets: any[] | undefined;
+  // permission and external state's that decided to hide or show
+  isReadOnly?: boolean;
+  isSecretValueHidden: boolean;
+  userAvailableEnvs?: any[];
+};
+
+const REGEX = /([$]{.*?})/g;
+
+const DashboardInput = ({ isOverridden, isSecretValueHidden, isReadOnly, secret, index }: { isOverridden: boolean, isSecretValueHidden: boolean, isReadOnly?: boolean, secret: any, index: number } ): JSX.Element => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const syncScroll = (e: SyntheticEvent<HTMLDivElement>) => {
+    if (ref.current === null) return;
+
+    ref.current.scrollTop = e.currentTarget.scrollTop;
+    ref.current.scrollLeft = e.currentTarget.scrollLeft;
+  };
+
+  return <td key={`row-${secret?.key || ''}--`} className={`flex flex-row w-full min-w-[11rem] justify-center h-10 items-center ${!(secret?.value || secret?.value === '') ? "bg-red-400/10" : "bg-mineshaft-900/30"}`}>
+    <div className="group relative whitespace-pre	flex flex-col justify-center w-full">
+      <input
+        // {...register(`secrets.${index}.valueOverride`)}
+        defaultValue={(isOverridden ? secret.valueOverride : secret?.value || '')}
+        onScroll={syncScroll}
+        readOnly={isReadOnly}
+        className={`${
+          isSecretValueHidden
+            ? 'text-transparent focus:text-transparent active:text-transparent'
+            : ''
+        } z-10 peer font-mono ph-no-capture bg-transparent caret-transparent text-transparent text-sm px-2 py-2 w-full outline-none duration-200 no-scrollbar no-scrollbar::-webkit-scrollbar`}
+        spellCheck="false"
+      />
+      <div
+        ref={ref}
+        className={`${
+          isSecretValueHidden && !isOverridden && secret?.value
+            ? 'text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-100 peer-active:text-gray-400 duration-200'
+            : ''
+        } ${!secret?.value && "text-bunker-400 justify-center"}
+        absolute flex flex-row whitespace-pre font-mono z-0 ${isSecretValueHidden && secret?.value ? 'invisible' : 'visible'} peer-focus:visible mt-0.5 ph-no-capture overflow-x-scroll bg-transparent h-10 text-sm px-2 py-2 w-full min-w-16 outline-none duration-100 no-scrollbar no-scrollbar::-webkit-scrollbar`}
+      >
+        {(secret?.value || secret?.value === '') && (isOverridden ? secret.valueOverride : secret?.value)?.split('').length === 0 && <span className='text-bunker-400/80 font-sans w-full'>EMPTY</span>}
+        {(secret?.value || secret?.value === '') && (isOverridden ? secret.valueOverride : secret?.value)?.split(REGEX).map((word: string) => {
+          if (word.match(REGEX) !== null) {
+            return (
+              <span className="ph-no-capture text-yellow" key={word}>
+                {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) === '}' ? (
+                  <span className="ph-no-capture text-yellow">
+                    {word.slice(word.length - 1, word.length)}
+                  </span>
+                ) : (
+                  <span className="ph-no-capture text-yellow-400">
+                    {word.slice(word.length - 1, word.length)}
+                  </span>
+                )}
+              </span>
+            );
+          }
+          return (
+            <span key={`${word}_${index + 1}`} className="ph-no-capture">
+              {word}
+            </span>
+          );
+        })}
+        {!(secret?.value || secret?.value === '') && <span className='text-red-500/80 font-sans text-xs italic'>missing</span>}
+      </div>
+      {(isSecretValueHidden && secret?.value) && (
+        <div className='absolute flex flex-row justify-between items-center z-0 peer pr-2 peer-active:hidden peer-focus:hidden group-hover:bg-white/[0.00] duration-100 h-10 w-full text-bunker-400 text-clip'>
+          <div className="px-2 flex flex-row items-center overflow-x-scroll no-scrollbar no-scrollbar::-webkit-scrollbar">
+            {(isOverridden ? secret.valueOverride : secret?.value || '')?.split('').map(() => (
+              <FontAwesomeIcon
+                key={guidGenerator()}
+                className="text-xxs mr-0.5"
+                icon={faCircle}
+              />
+            ))}
+            {(isOverridden ? secret.valueOverride : secret?.value || '')?.split('').length === 0 && <span className='text-bunker-400/80 text-sm'>EMPTY</span>}
+          </div>
+        </div>
+      )}
+    </div>
+  </td>
+}
+
+export const EnvComparisonRow = ({
+  index,
+  secrets,
+  isSecretValueHidden,
+  isReadOnly,
+  userAvailableEnvs
+}: Props): JSX.Element => {
+  const { 
+    // register, setValue, 
+    control } = useFormContext<FormData>();
+
+  // to get details on a secret
+  const secret = useWatch({ name: `secrets.${index}`, control });
+
+  const [areValuesHiddenThisRow, setAreValuesHiddenThisRow] = useState(true);
+
+  return (
+    <tr className="group min-w-full flex flex-row items-center hover:bg-bunker-700">
+      <td className="w-10 h-10 px-4 flex items-center justify-center border-none"><div className='text-center w-10 text-xs text-bunker-400'>{index + 1}</div></td>
+      <td className="flex flex-row justify-between items-center h-full min-w-[200px] lg:min-w-[220px] xl:min-w-[250px]">
+        <div className="flex flex-row items-center h-8">{secret?.key || ''}</div>
+        <button type="button" className='mr-2 text-bunker-400 hover:text-bunker-300 invisible group-hover:visible' onClick={() => setAreValuesHiddenThisRow(!areValuesHiddenThisRow)}>
+          <FontAwesomeIcon icon={areValuesHiddenThisRow ? faEye : faEyeSlash} />
+        </button>
+      </td>
+      {userAvailableEnvs?.map(env => {
+        return <DashboardInput key={`row-${secret?.key || ''}-${env.slug}`} isOverridden={false} isSecretValueHidden={areValuesHiddenThisRow && isSecretValueHidden} isReadOnly={isReadOnly} secret={secrets?.filter(sec => sec.env === env.slug)[0]} index={index} />
+      })}
+    </tr>
+  );
+};
--- a/frontend/src/views/DashboardPage/components/EnvComparisonRow/index.tsx
+++ b/frontend/src/views/DashboardPage/components/EnvComparisonRow/index.tsx
@@ -0,0 +1 @@
+export { EnvComparisonRow } from './EnvComparisonRow';
--- a/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
+++ b/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
@@ -156,7 +156,7 @@ export const SecretInputRow = ({
  }

  return (
-    <tr className="group min-w-full flex flex-row items-center">
+    <tr className="group min-w-full flex flex-row items-center" key={index}>
      <td className="w-10 h-10 px-4 flex items-center justify-center"><div className='text-center w-10 text-xs text-bunker-400'>{index + 1}</div></td>
      <Controller
        control={control}
@@ -279,7 +279,7 @@ export const SecretInputRow = ({
            {(isOverridden ? secret.valueOverride : secret.value)?.split(REGEX).map((word) => {
              if (word.match(REGEX) !== null) {
                return (
-                  <span className="ph-no-capture text-yellow" key={index}>
+                  <span className="ph-no-capture text-yellow" key={guidGenerator()}>
                    {word.slice(0, 2)}
                    <span className="ph-no-capture text-yellow-200/80">
                      {word.slice(2, word.length - 1)}
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsSection.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsSection.tsx
@@ -64,7 +64,6 @@ export const SecretTagsSection = ({
  });

  const onFormSubmit = async (data: CreateWsTag) => {
-    console.log(19191, data);
    await onCreateTag(data);
    handlePopUpClose('CreateSecretTag');
  };
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/ServiceTokenSection.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/ServiceTokenSection.tsx
@@ -37,13 +37,14 @@ const apiTokenExpiry = [
  { label: '7 Days', value: 604800 },
  { label: '1 Month', value: 2592000 },
  { label: '6 months', value: 15552000 },
-  { label: '12 months', value: 31104000 }
+  { label: '12 months', value: 31104000 },
+  { label: 'Never', value: null },
 ];

 const createServiceTokenSchema = yup.object({
  name: yup.string().required().label('Service Token Name'),
  environment: yup.string().required().label('Environment'),
-  expiresIn: yup.string().required().label('Service Token Expiration'),
+  expiresIn: yup.string().optional().label('Service Token Expiration'),
  permissions: yup.object().shape({
    read: yup.boolean().required(),
    write: yup.boolean().required()
@@ -213,7 +214,7 @@ export const ServiceTokenSection = ({
                          className="w-full"
                        >
                          {apiTokenExpiry.map(({ label, value }) => (
-                            <SelectItem value={String(value)} key={label}>
+                            <SelectItem value={String(value || '')} key={label}>
                              {label}
                            </SelectItem>
                          ))}
@@ -332,7 +333,7 @@ export const ServiceTokenSection = ({
                <Tr key={row._id}>
                  <Td>{row.name}</Td>
                  <Td>{row.environment}</Td>
-                  <Td>{new Date(row.expiresAt).toUTCString()}</Td>
+                  <Td>{row.expiresAt && new Date(row.expiresAt).toUTCString()}</Td>
                  <Td className="flex items-center justify-end">
                    <IconButton
                      onClick={() =>
				`@@ -0,0 +1 @@`
				`export { EnvComparisonRow } from './EnvComparisonRow';`