Merge branch 'main' into snyk-upgrade-ba8f3acf185100a451cbbadcbe68f789

2026-10-14 10:29:52 +00:00 · 2024-03-09 11:05:36 -05:00
parent c2fe6eb90c de86705e64
commit b75289f074
76 changed files with 1955 additions and 617 deletions
@@ -1,5 +1,5 @@
 {
-  "name": "npm-proj-1709284350861-0.8379672465905885Iibrej",
+  "name": "frontend",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
@@ -30,7 +30,7 @@ export const Checkbox = ({
    <div className="flex items-center font-inter text-bunker-300">
      <CheckboxPrimitive.Root
        className={twMerge(
-          "flex items-center justify-center w-4 h-4 transition-all rounded shadow border border-mineshaft-400 hover:bg-mineshaft-500 bg-mineshaft-600",
+          "flex items-center flex-shrink-0 justify-center w-4 h-4 transition-all rounded shadow border border-mineshaft-400 hover:bg-mineshaft-500 bg-mineshaft-600",
          isDisabled && "bg-bunker-400 hover:bg-bunker-400",
          isChecked && "bg-primary hover:bg-primary",
          Boolean(children) && "mr-3",
@@ -46,7 +46,7 @@ export const Checkbox = ({
          <FontAwesomeIcon icon={faCheck} size="sm" />
        </CheckboxPrimitive.Indicator>
      </CheckboxPrimitive.Root>
-      <label className="text-sm whitespace-nowrap" htmlFor={id}>
+      <label className="text-sm whitespace-nowrap truncate" htmlFor={id}>
        {children}
        {isRequired && <span className="pl-1 text-red">*</span>}
      </label>
@@ -42,27 +42,27 @@ export const MenuItem = <T extends ElementType = "button">({
  const iconRef = useRef();

  return (
-    <a onMouseEnter={() => iconRef.current?.play()} onMouseLeave={() => iconRef.current?.stop()}>
+    <div onMouseEnter={() => iconRef.current?.play()} onMouseLeave={() => iconRef.current?.stop()}>
      <li
        className={twMerge(
-          "group px-1 py-2 mt-0.5 font-inter flex flex-col text-sm text-bunker-100 transition-all rounded cursor-pointer hover:bg-mineshaft-700 duration-50",
+          "duration-50 group mt-0.5 flex cursor-pointer flex-col rounded px-1 py-2 font-inter text-sm text-bunker-100 transition-all hover:bg-mineshaft-700",
          isSelected && "bg-mineshaft-600 hover:bg-mineshaft-600",
-          isDisabled && "hover:bg-transparent cursor-not-allowed",
+          isDisabled && "cursor-not-allowed hover:bg-transparent",
          className
        )}
      >
-        <motion.span className="w-full flex flex-row items-center justify-start rounded-sm">
+        <motion.span className="flex w-full flex-row items-center justify-start rounded-sm">
          <Item
            type="button"
            role="menuitem"
-            className="flex items-center relative"
+            className="relative flex items-center"
            ref={inputRef}
            {...props}
          >
            <div
              className={`${
                isSelected ? "visisble" : "invisible"
-              } -left-[0.28rem] absolute w-[0.07rem] rounded-md h-5 bg-primary`}
+              } absolute -left-[0.28rem] h-5 w-[0.07rem] rounded-md bg-primary`}
            />
            {/* {icon && <span className="mr-3 ml-4 w-5 block group-hover:hidden">{icon}</span>} */}
            {icon && (
@@ -81,7 +81,7 @@ export const MenuItem = <T extends ElementType = "button">({
          {description && <span className="mt-2 text-xs">{description}</span>}
        </motion.span>
      </li>
-    </a>
+    </div>
  );
 };

@@ -103,16 +103,16 @@ export const SubMenuItem = <T extends ElementType = "button">({
    <a onMouseEnter={() => iconRef.current?.play()} onMouseLeave={() => iconRef.current?.stop()}>
      <li
        className={twMerge(
-          "group px-1 py-1 mt-0.5 font-inter flex flex-col text-sm text-mineshaft-300 hover:text-mineshaft-100 transition-all rounded cursor-pointer hover:bg-mineshaft-700 duration-50",
-          isDisabled && "hover:bg-transparent cursor-not-allowed",
+          "duration-50 group mt-0.5 flex cursor-pointer flex-col rounded px-1 py-1 font-inter text-sm text-mineshaft-300 transition-all hover:bg-mineshaft-700 hover:text-mineshaft-100",
+          isDisabled && "cursor-not-allowed hover:bg-transparent",
          className
        )}
      >
-        <motion.span className="w-full flex flex-row items-center justify-start rounded-sm pl-6">
+        <motion.span className="flex w-full flex-row items-center justify-start rounded-sm pl-6">
          <Item
            type="button"
            role="menuitem"
-            className="flex items-center relative"
+            className="relative flex items-center"
            ref={inputRef}
            {...props}
          >
@@ -103,7 +103,7 @@ export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.
              Upgrade your project version to continue receiving the latest improvements and
              patches.
            </p>
-            <Link href="/docs/documentation/platform/project-upgrade">
+            <Link href="https://infisical.com/docs/documentation/platform/project-upgrade">
              <a target="_blank" className="text-primary-400">
                Learn more
              </a>
@@ -117,7 +117,7 @@ export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.
              Upgrading the project version is required to continue receiving the latest
              improvements and patches.
            </p>
-            <Link href="/docs/documentation/platform/project-upgrade">
+            <Link href="https://infisical.com/docs/documentation/platform/project-upgrade">
              <a target="_blank" className="text-primary-400">
                Learn more
              </a>
@@ -74,16 +74,6 @@ export default function RailwayCreateIntegrationPage() {
    }
  }, [targetEnvironments]);

-  useEffect(() => {
-    if (targetServices) {
-      if (targetServices.length > 0) {
-        setTargetServiceId(targetServices[0].serviceId);
-      } else {
-        setTargetServiceId("none");
-      }
-    }
-  }, [targetServices]);
-
  const handleButtonClick = async () => {
    try {
      setIsLoading(true);
@@ -124,11 +114,14 @@ export default function RailwayCreateIntegrationPage() {
    }
  };

+  const filteredTargetServices = targetServices ? [ { name: "", serviceId: "none" }, ...targetServices ] : [ { name: "", serviceId: "none" } ];
+
  return workspace &&
    selectedSourceEnvironment &&
    integrationAuthApps &&
    targetEnvironments &&
-    targetServices ? (
+    targetServices &&
+    filteredTargetServices ? (
    <div className="flex h-full w-full items-center justify-center">
      <Card className="max-w-md rounded-md p-8">
        <CardTitle className="text-center">Railway Integration</CardTitle>
@@ -208,20 +201,14 @@ export default function RailwayCreateIntegrationPage() {
            className="w-full border border-mineshaft-500"
            isDisabled={targetServices.length === 0}
          >
-            {targetServices.length > 0 ? (
-              targetServices.map((targetService) => (
+              {filteredTargetServices.map((targetService) => (
                <SelectItem
                  value={targetService.serviceId as string}
                  key={`target-service-${targetService.serviceId as string}`}
                >
                  {targetService.name}
                </SelectItem>
-              ))
-            ) : (
-              <SelectItem value="none" key="target-service-none">
-                No services found
-              </SelectItem>
-            )}
+              ))}
          </Select>
        </FormControl>
        <Button
@@ -81,7 +81,7 @@ export const CreateSecretImportForm = ({
      });
    } catch (err) {
      console.error(err);
-      const axiosError = err as AxiosError
+      const axiosError = err as AxiosError;
      if (axiosError?.response?.status === 401) {
        createNotification({
          text: "You do not have access to the selected environment/path",
@@ -1,24 +1,4 @@
 /* eslint-disable simple-import-sort/imports */
-import { memo, useEffect } from "react";
-import { Controller, useFieldArray, useForm } from "react-hook-form";
-import { subject } from "@casl/ability";
-import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
-import {
-  faCheck,
-  faClock,
-  faClose,
-  faCodeBranch,
-  faComment,
-  faCopy,
-  faEllipsis,
-  faKey,
-  faTag,
-  faTags
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { AnimatePresence, motion } from "framer-motion";
-import { twMerge } from "tailwind-merge";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
  Button,
@@ -48,9 +28,29 @@ import {
 import { useToggle } from "@app/hooks";
 import { DecryptedSecret } from "@app/hooks/api/secrets/types";
 import { WsTag } from "@app/hooks/api/types";
+import { subject } from "@casl/ability";
+import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
+import {
+  faCheck,
+  faClock,
+  faClose,
+  faCodeBranch,
+  faComment,
+  faCopy,
+  faEllipsis,
+  faKey,
+  faTag,
+  faTags
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AnimatePresence, motion } from "framer-motion";
+import { memo, useEffect } from "react";
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { twMerge } from "tailwind-merge";

-import { formSchema, SecretActionType, TFormSchema } from "./SecretListView.utils";
 import { CreateReminderForm } from "./CreateReminderForm";
+import { formSchema, SecretActionType, TFormSchema } from "./SecretListView.utils";

 type Props = {
  secret: DecryptedSecret;
@@ -104,7 +104,8 @@ export const SecretItem = memo(
      setValue,
      reset,
      getValues,
-      formState: { isDirty, isSubmitting }
+      trigger,
+      formState: { isDirty, isSubmitting, errors }
    } = useForm<TFormSchema>({
      defaultValues: secret,
      values: secret,
@@ -235,15 +236,18 @@ export const SecretItem = memo(
                <Controller
                  name="key"
                  control={control}
-                  render={({ field }) => (
+                  render={({ field, fieldState: { error } }) => (
                    <Input
                      autoComplete="off"
                      isReadOnly={isReadOnly}
                      autoCapitalization={currentWorkspace?.autoCapitalization}
                      variant="plain"
                      isDisabled={isOverriden}
+                      placeholder={error?.message}
+                      isError={Boolean(error)}
+                      onKeyUp={() => trigger("key")}
                      {...field}
-                      className="w-full px-0 focus:text-bunker-100 focus:ring-transparent"
+                      className="w-full px-0 placeholder:text-red-500 focus:text-bunker-100 focus:ring-transparent"
                    />
                  )}
                />
@@ -497,7 +501,7 @@ export const SecretItem = memo(
                    animate={{ x: 0, opacity: 1 }}
                    exit={{ x: -10, opacity: 0 }}
                  >
-                    <Tooltip content="Save">
+                    <Tooltip content={errors.key ? errors.key?.message : "Save"}>
                      <IconButton
                        ariaLabel="more"
                        variant="plain"
@@ -507,12 +511,16 @@ export const SecretItem = memo(
                          "p-0 text-primary opacity-0 group-hover:opacity-100",
                          isDirty && "opacity-100"
                        )}
-                        isDisabled={isSubmitting}
+                        isDisabled={isSubmitting || Boolean(errors.key)}
                      >
                        {isSubmitting ? (
                          <Spinner className="m-0 h-4 w-4 p-0" />
                        ) : (
-                          <FontAwesomeIcon icon={faCheck} size="lg" className="text-primary" />
+                          <FontAwesomeIcon
+                            icon={faCheck}
+                            size="lg"
+                            className={twMerge("text-primary", errors.key && "text-mineshaft-300")}
+                          />
                        )}
                      </IconButton>
                    </Tooltip>
@@ -206,7 +206,7 @@ export const SecretListView = ({
        reminderRepeatDays,
        reminderNote
      } = modSecret;
-      const hasKeyChanged = oldKey !== key;
+      const hasKeyChanged = oldKey !== key && key;

      const tagIds = tags?.map(({ id }) => id);
      const oldTagIds = (orgSecret?.tags || []).map(({ id }) => id);
@@ -8,7 +8,7 @@ export enum SecretActionType {
 }

 export const formSchema = z.object({
-  key: z.string().trim(),
+  key: z.string().trim().min(1, { message: "Secret key is required" }),
  value: z.string().transform((val) => (val.at(-1) === "\n" ? `${val.trim()}\n` : val.trim())),
  idOverride: z.string().trim().optional(),
  valueOverride: z
@@ -2,22 +2,31 @@ import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { subject } from "@casl/ability";
 import {
+  faAngleDown,
  faArrowDown,
  faArrowUp,
  faFolderBlank,
-  faMagnifyingGlass
+  faFolderPlus,
+  faMagnifyingGlass,
+  faPlus
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import NavHeader from "@app/components/navigation/NavHeader";
-import { PermissionDeniedBanner } from "@app/components/permissions";
+import { PermissionDeniedBanner, ProjectPermissionCan } from "@app/components/permissions";
 import {
  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
  EmptyState,
  IconButton,
  Input,
+  Modal,
+  ModalContent,
  Table,
  TableContainer,
  TableSkeleton,
@@ -30,7 +39,13 @@ import {
  Tr
 } from "@app/components/v2";
 import { UpgradeProjectAlert } from "@app/components/v2/UpgradeProjectAlert";
-import { useOrganization, useWorkspace } from "@app/context";
+import {
+  ProjectPermissionActions,
+  ProjectPermissionSub,
+  useOrganization,
+  useWorkspace
+} from "@app/context";
+import { usePopUp } from "@app/hooks";
 import {
  useCreateFolder,
  useCreateSecretV3,
@@ -42,6 +57,8 @@ import {
 } from "@app/hooks/api";
 import { ProjectVersion } from "@app/hooks/api/workspace/types";

+import { FolderForm } from "../SecretMainPage/components/ActionBar/FolderForm";
+import { CreateSecretForm } from "./components/CreateSecretForm";
 import { FolderBreadCrumbs } from "./components/FolderBreadCrumbs";
 import { ProjectIndexSecretsSection } from "./components/ProjectIndexSecretsSection";
 import { SecretOverviewFolderRow } from "./components/SecretOverviewFolderRow";
@@ -110,6 +127,40 @@ export const SecretOverviewPage = () => {
  const { mutateAsync: deleteSecretV3 } = useDeleteSecretV3();
  const { mutateAsync: createFolder } = useCreateFolder();

+  const { handlePopUpOpen, handlePopUpToggle, handlePopUpClose, popUp } = usePopUp([
+    "addSecretsInAllEnvs",
+    "addFolder",
+    "misc"
+  ] as const);
+
+  const handleFolderCreate = async (folderName: string) => {
+    const promises = userAvailableEnvs.map((env) => {
+      const environment = env.slug;
+      return createFolder({
+        name: folderName,
+        path: secretPath,
+        environment,
+        projectId: workspaceId
+      });
+    });
+
+    const results = await Promise.allSettled(promises);
+    const isFoldersAdded = results.some((result) => result.status === "fulfilled");
+
+    if (isFoldersAdded) {
+      handlePopUpClose("addFolder");
+      createNotification({
+        type: "success",
+        text: "Successfully created folder"
+      });
+    } else {
+      createNotification({
+        type: "error",
+        text: "Failed to create folder"
+      });
+    }
+  };
+
  const handleSecretCreate = async (env: string, key: string, value: string) => {
    try {
      // create folder if not existing
@@ -269,210 +320,286 @@ export const SecretOverviewPage = () => {
    filteredFolderNames?.length === 0;

  return (
-    <div className="container mx-auto px-6 text-mineshaft-50 dark:[color-scheme:dark]">
-      <ProjectIndexSecretsSection decryptFileKey={latestFileKey!} />
-      <div className="relative right-5 ml-4">
-        <NavHeader pageName={t("dashboard.title")} isProjectRelated />
-      </div>
-      <div className="space-y-8">
-        <div className="mt-6">
-          <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="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
-              href="https://infisical.com/docs/cli/overview"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Infisical CLI
-            </a>
-            ,
-            <a
-              className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
-              href="https://infisical.com/docs/documentation/getting-started/api"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Infisical API
-            </a>
-            ,
-            <a
-              className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
-              href="https://infisical.com/docs/sdks/overview"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Infisical SDKs
-            </a>
-            , and
-            <a
-              className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
-              href="https://infisical.com/docs/documentation/getting-started/introduction"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              more
-            </a>
-            .
-          </p>
+    <>
+      <div className="container mx-auto px-6 text-mineshaft-50 dark:[color-scheme:dark]">
+        <ProjectIndexSecretsSection decryptFileKey={latestFileKey!} />
+        <div className="relative right-5 ml-4">
+          <NavHeader pageName={t("dashboard.title")} isProjectRelated />
        </div>
+        <div className="space-y-8">
+          <div className="mt-6">
+            <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="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+                href="https://infisical.com/docs/cli/overview"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Infisical CLI
+              </a>
+              ,
+              <a
+                className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+                href="https://infisical.com/docs/documentation/getting-started/api"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Infisical API
+              </a>
+              ,
+              <a
+                className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+                href="https://infisical.com/docs/sdks/overview"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Infisical SDKs
+              </a>
+              , and
+              <a
+                className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+                href="https://infisical.com/docs/documentation/getting-started/introduction"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                more
+              </a>
+              .
+            </p>
+          </div>

-        {currentWorkspace?.version === ProjectVersion.V1 && (
-          <UpgradeProjectAlert project={currentWorkspace} />
-        )}
+          {currentWorkspace?.version === ProjectVersion.V1 && (
+            <UpgradeProjectAlert project={currentWorkspace} />
+          )}

-        <div className="flex items-center justify-between">
-          <FolderBreadCrumbs secretPath={secretPath} onResetSearch={handleResetSearch} />
-          <div className="w-80">
-            <Input
-              className="h-[2.3rem] bg-mineshaft-800 placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
-              placeholder="Search by secret/folder name..."
-              value={searchFilter}
-              onChange={(e) => setSearchFilter(e.target.value)}
-              leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-            />
+          <div className="flex items-center justify-between">
+            <FolderBreadCrumbs secretPath={secretPath} onResetSearch={handleResetSearch} />
+            <div className="flex flex-row items-center justify-center space-x-2">
+              <div className="w-80">
+                <Input
+                  className="h-[2.3rem] bg-mineshaft-800 placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
+                  placeholder="Search by secret/folder name..."
+                  value={searchFilter}
+                  onChange={(e) => setSearchFilter(e.target.value)}
+                  leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+                />
+              </div>
+              <div>
+                <ProjectPermissionCan
+                  I={ProjectPermissionActions.Create}
+                  a={subject(ProjectPermissionSub.Secrets, { secretPath })}
+                >
+                  {(isAllowed) => (
+                    <Button
+                      variant="outline_bg"
+                      leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                      onClick={() => handlePopUpOpen("addSecretsInAllEnvs")}
+                      className="h-10 rounded-r-none"
+                      isDisabled={!isAllowed}
+                    >
+                      Add Secret
+                    </Button>
+                  )}
+                </ProjectPermissionCan>
+                <DropdownMenu
+                  open={popUp.misc.isOpen}
+                  onOpenChange={(isOpen) => handlePopUpToggle("misc", isOpen)}
+                >
+                  <DropdownMenuTrigger asChild>
+                    <IconButton
+                      ariaLabel="add-folder-or-import"
+                      variant="outline_bg"
+                      className="rounded-l-none bg-mineshaft-600 p-3"
+                    >
+                      <FontAwesomeIcon icon={faAngleDown} />
+                    </IconButton>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <div className="flex flex-col space-y-1 p-1.5">
+                      <ProjectPermissionCan
+                        I={ProjectPermissionActions.Create}
+                        a={subject(ProjectPermissionSub.Secrets, { secretPath })}
+                      >
+                        {(isAllowed) => (
+                          <Button
+                            leftIcon={<FontAwesomeIcon icon={faFolderPlus} />}
+                            onClick={() => {
+                              handlePopUpOpen("addFolder");
+                              handlePopUpClose("misc");
+                            }}
+                            isDisabled={!isAllowed}
+                            variant="outline_bg"
+                            className="h-10"
+                            isFullWidth
+                          >
+                            Add Folder
+                          </Button>
+                        )}
+                      </ProjectPermissionCan>
+                    </div>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </div>
          </div>
        </div>
-      </div>
-      <div className="thin-scrollbar mt-4" ref={parentTableRef}>
-        <TableContainer className="max-h-[calc(100vh-250px)] overflow-y-auto">
-          <Table>
-            <THead>
-              <Tr className="sticky top-0 z-20 border-0">
-                <Th className="sticky left-0 z-20 min-w-[20rem] border-b-0 p-0">
-                  <div className="flex items-center border-b border-r border-mineshaft-600 px-5 pt-3.5 pb-3">
-                    Name
-                    <IconButton
-                      variant="plain"
-                      className="ml-2"
-                      ariaLabel="sort"
-                      onClick={() => setSortDir((prev) => (prev === "asc" ? "desc" : "asc"))}
-                    >
-                      <FontAwesomeIcon icon={sortDir === "asc" ? faArrowDown : faArrowUp} />
-                    </IconButton>
-                  </div>
-                </Th>
-                {userAvailableEnvs?.map(({ name, slug }, index) => {
-                  const envSecKeyCount = getEnvSecretKeyCount(slug);
-                  const missingKeyCount = secKeys.length - envSecKeyCount;
-                  return (
-                    <Th
-                      className="min-table-row min-w-[11rem] border-b-0 p-0 text-center"
-                      key={`secret-overview-${name}-${index + 1}`}
-                    >
-                      <div className="flex items-center justify-center border-b border-mineshaft-600 px-5 pt-3.5 pb-[0.83rem]">
-                        <button
-                          type="button"
-                          className="text-sm font-medium duration-100 hover:text-mineshaft-100"
+        <div className="thin-scrollbar mt-4" ref={parentTableRef}>
+          <TableContainer className="max-h-[calc(100vh-250px)] overflow-y-auto">
+            <Table>
+              <THead>
+                <Tr className="sticky top-0 z-20 border-0">
+                  <Th className="sticky left-0 z-20 min-w-[20rem] border-b-0 p-0">
+                    <div className="flex items-center border-b border-r border-mineshaft-600 px-5 pt-3.5 pb-3">
+                      Name
+                      <IconButton
+                        variant="plain"
+                        className="ml-2"
+                        ariaLabel="sort"
+                        onClick={() => setSortDir((prev) => (prev === "asc" ? "desc" : "asc"))}
+                      >
+                        <FontAwesomeIcon icon={sortDir === "asc" ? faArrowDown : faArrowUp} />
+                      </IconButton>
+                    </div>
+                  </Th>
+                  {userAvailableEnvs?.map(({ name, slug }, index) => {
+                    const envSecKeyCount = getEnvSecretKeyCount(slug);
+                    const missingKeyCount = secKeys.length - envSecKeyCount;
+                    return (
+                      <Th
+                        className="min-table-row min-w-[11rem] border-b-0 p-0 text-center"
+                        key={`secret-overview-${name}-${index + 1}`}
+                      >
+                        <div className="flex items-center justify-center border-b border-mineshaft-600 px-5 pt-3.5 pb-[0.83rem]">
+                          <button
+                            type="button"
+                            className="text-sm font-medium duration-100 hover:text-mineshaft-100"
+                            onClick={() => handleExploreEnvClick(slug)}
+                          >
+                            {name}
+                          </button>
+                          {missingKeyCount > 0 && (
+                            <Tooltip
+                              className="max-w-none lowercase"
+                              content={`${missingKeyCount} secrets missing\n compared to other environments`}
+                            >
+                              <div className="ml-2 flex h-[1.1rem] cursor-default items-center justify-center rounded-sm border border-red-400 bg-red-600 p-1 text-xs font-medium text-bunker-100">
+                                <span className="text-bunker-100">{missingKeyCount}</span>
+                              </div>
+                            </Tooltip>
+                          )}
+                        </div>
+                      </Th>
+                    );
+                  })}
+                </Tr>
+              </THead>
+              <TBody>
+                {canViewOverviewPage && isTableLoading && (
+                  <TableSkeleton
+                    columns={userAvailableEnvs.length + 1}
+                    innerKey="secret-overview-loading"
+                    rows={5}
+                    className="bg-mineshaft-700"
+                  />
+                )}
+                {isTableEmpty && !isTableLoading && (
+                  <Tr>
+                    <Td colSpan={userAvailableEnvs.length + 1}>
+                      <EmptyState title="Let's add some secrets" icon={faFolderBlank} iconSize="3x">
+                        <Link
+                          href={{
+                            pathname: "/project/[id]/secrets/[env]",
+                            query: { id: workspaceId, env: userAvailableEnvs?.[0]?.slug }
+                          }}
+                        >
+                          <Button
+                            className="mt-4"
+                            variant="outline_bg"
+                            colorSchema="primary"
+                            size="md"
+                          >
+                            Go to {userAvailableEnvs?.[0]?.name}
+                          </Button>
+                        </Link>
+                      </EmptyState>
+                    </Td>
+                  </Tr>
+                )}
+                {!isTableLoading &&
+                  filteredFolderNames.map((folderName, index) => (
+                    <SecretOverviewFolderRow
+                      folderName={folderName}
+                      isFolderPresentInEnv={isFolderPresentInEnv}
+                      environments={userAvailableEnvs}
+                      key={`overview-${folderName}-${index + 1}`}
+                      onClick={handleFolderClick}
+                    />
+                  ))}
+                {!isTableLoading &&
+                  (userAvailableEnvs?.length > 0 ? (
+                    filteredSecretNames.map((key, index) => (
+                      <SecretOverviewTableRow
+                        secretPath={secretPath}
+                        onSecretCreate={handleSecretCreate}
+                        onSecretDelete={handleSecretDelete}
+                        onSecretUpdate={handleSecretUpdate}
+                        key={`overview-${key}-${index + 1}`}
+                        environments={userAvailableEnvs}
+                        secretKey={key}
+                        getSecretByKey={getSecretByKey}
+                        expandableColWidth={expandableTableWidth}
+                      />
+                    ))
+                  ) : (
+                    <PermissionDeniedBanner />
+                  ))}
+              </TBody>
+              <TFoot>
+                <Tr className="sticky bottom-0 z-10 border-0 bg-mineshaft-800">
+                  <Td className="sticky left-0 z-10 border-0 bg-mineshaft-800 p-0">
+                    <div
+                      className="w-full border-t border-r border-mineshaft-600"
+                      style={{ height: "45px" }}
+                    />
+                  </Td>
+                  {userAvailableEnvs.map(({ name, slug }) => (
+                    <Td key={`explore-${name}-btn`} className="border-0 border-mineshaft-600 p-0">
+                      <div className="flex w-full items-center justify-center border-r border-t border-mineshaft-600 px-5 py-2">
+                        <Button
+                          size="xs"
+                          variant="outline_bg"
+                          isFullWidth
                          onClick={() => handleExploreEnvClick(slug)}
                        >
-                          {name}
-                        </button>
-                        {missingKeyCount > 0 && (
-                          <Tooltip
-                            className="max-w-none lowercase"
-                            content={`${missingKeyCount} secrets missing\n compared to other environments`}
-                          >
-                            <div className="ml-2 flex h-[1.1rem] cursor-default items-center justify-center rounded-sm border border-red-400 bg-red-600 p-1 text-xs font-medium text-bunker-100">
-                              <span className="text-bunker-100">{missingKeyCount}</span>
-                            </div>
-                          </Tooltip>
-                        )}
-                      </div>
-                    </Th>
-                  );
-                })}
-              </Tr>
-            </THead>
-            <TBody>
-              {canViewOverviewPage && isTableLoading && (
-                <TableSkeleton
-                  columns={userAvailableEnvs.length + 1}
-                  innerKey="secret-overview-loading"
-                  rows={5}
-                  className="bg-mineshaft-700"
-                />
-              )}
-              {isTableEmpty && !isTableLoading && (
-                <Tr>
-                  <Td colSpan={userAvailableEnvs.length + 1}>
-                    <EmptyState title="Let's add some secrets" icon={faFolderBlank} iconSize="3x">
-                      <Link
-                        href={{
-                          pathname: "/project/[id]/secrets/[env]",
-                          query: { id: workspaceId, env: userAvailableEnvs?.[0]?.slug }
-                        }}
-                      >
-                        <Button
-                          className="mt-4"
-                          variant="outline_bg"
-                          colorSchema="primary"
-                          size="md"
-                        >
-                          Go to {userAvailableEnvs?.[0]?.name}
+                          Explore
                        </Button>
-                      </Link>
-                    </EmptyState>
-                  </Td>
+                      </div>
+                    </Td>
+                  ))}
                </Tr>
-              )}
-              {!isTableLoading &&
-                filteredFolderNames.map((folderName, index) => (
-                  <SecretOverviewFolderRow
-                    folderName={folderName}
-                    isFolderPresentInEnv={isFolderPresentInEnv}
-                    environments={userAvailableEnvs}
-                    key={`overview-${folderName}-${index + 1}`}
-                    onClick={handleFolderClick}
-                  />
-                ))}
-              {!isTableLoading &&
-                (userAvailableEnvs?.length > 0 ? (
-                  filteredSecretNames.map((key, index) => (
-                    <SecretOverviewTableRow
-                      secretPath={secretPath}
-                      onSecretCreate={handleSecretCreate}
-                      onSecretDelete={handleSecretDelete}
-                      onSecretUpdate={handleSecretUpdate}
-                      key={`overview-${key}-${index + 1}`}
-                      environments={userAvailableEnvs}
-                      secretKey={key}
-                      getSecretByKey={getSecretByKey}
-                      expandableColWidth={expandableTableWidth}
-                    />
-                  ))
-                ) : (
-                  <PermissionDeniedBanner />
-                ))}
-            </TBody>
-            <TFoot>
-              <Tr className="sticky bottom-0 z-10 border-0 bg-mineshaft-800">
-                <Td className="sticky left-0 z-10 border-0 bg-mineshaft-800 p-0">
-                  <div
-                    className="w-full border-t border-r border-mineshaft-600"
-                    style={{ height: "45px" }}
-                  />
-                </Td>
-                {userAvailableEnvs.map(({ name, slug }) => (
-                  <Td key={`explore-${name}-btn`} className="border-0 border-mineshaft-600 p-0">
-                    <div className="flex w-full items-center justify-center border-r border-t border-mineshaft-600 px-5 py-2">
-                      <Button
-                        size="xs"
-                        variant="outline_bg"
-                        isFullWidth
-                        onClick={() => handleExploreEnvClick(slug)}
-                      >
-                        Explore
-                      </Button>
-                    </div>
-                  </Td>
-                ))}
-              </Tr>
-            </TFoot>
-          </Table>
-        </TableContainer>
+              </TFoot>
+            </Table>
+          </TableContainer>
+        </div>
      </div>
-    </div>
+      <CreateSecretForm
+        secretPath={secretPath}
+        isOpen={popUp.addSecretsInAllEnvs.isOpen}
+        getSecretByKey={getSecretByKey}
+        onTogglePopUp={(isOpen) => handlePopUpToggle("addSecretsInAllEnvs", isOpen)}
+        onClose={() => handlePopUpClose("addSecretsInAllEnvs")}
+        decryptFileKey={latestFileKey!}
+      />
+      <Modal
+        isOpen={popUp.addFolder.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("addFolder", isOpen)}
+      >
+        <ModalContent title="Create Folder">
+          <FolderForm onCreateFolder={handleFolderCreate} />
+        </ModalContent>
+      </Modal>
+    </>
  );
 };
@@ -0,0 +1,222 @@
+import { Controller, useForm } from "react-hook-form";
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+  Button,
+  Checkbox,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalContent,
+  SecretInput,
+  Tooltip
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useCreateFolder, useCreateSecretV3, useUpdateSecretV3 } from "@app/hooks/api";
+import { DecryptedSecret, UserWsKeyPair } from "@app/hooks/api/types";
+
+const typeSchema = z
+  .object({
+    key: z.string().min(1, "Key is required"),
+    value: z.string().optional(),
+    environments: z.record(z.boolean().optional())
+  })
+  .refine((data) => data.key !== undefined, {
+    message: "Please enter secret name"
+  });
+
+type TFormSchema = z.infer<typeof typeSchema>;
+
+type Props = {
+  secretPath?: string;
+  decryptFileKey: UserWsKeyPair;
+  getSecretByKey: (slug: string, key: string) => DecryptedSecret | undefined;
+  // modal props
+  isOpen?: boolean;
+  onClose: () => void;
+  onTogglePopUp: (isOpen: boolean) => void;
+};
+
+export const CreateSecretForm = ({
+  secretPath = "/",
+  decryptFileKey,
+  isOpen,
+  getSecretByKey,
+  onClose,
+  onTogglePopUp
+}: Props) => {
+  const {
+    register,
+    handleSubmit,
+    control,
+    reset,
+    watch,
+    formState: { isSubmitting, errors }
+  } = useForm<TFormSchema>({ resolver: zodResolver(typeSchema) });
+  const newSecretKey = watch("key");
+
+  const { currentWorkspace } = useWorkspace();
+  const workspaceId = currentWorkspace?.id || "";
+  const environments = currentWorkspace?.environments || [];
+
+  const { createNotification } = useNotificationContext();
+
+  const { mutateAsync: createSecretV3 } = useCreateSecretV3();
+  const { mutateAsync: updateSecretV3 } = useUpdateSecretV3();
+  const { mutateAsync: createFolder } = useCreateFolder();
+
+  const handleFormSubmit = async ({ key, value, environments: selectedEnv }: TFormSchema) => {
+    const environmentsSelected = environments.filter(({ slug }) => selectedEnv[slug]);
+    const isEnvironmentsSelected = environmentsSelected.length;
+
+    if (!isEnvironmentsSelected) {
+      createNotification({ type: "error", text: "Select at least one environment" });
+      return;
+    }
+
+    const promises = environmentsSelected.map(async (env) => {
+      const environment = env.slug;
+      // create folder if not existing
+      if (secretPath !== "/") {
+        // /hello/world -> [hello","world"]
+        const pathSegment = secretPath.split("/").filter(Boolean);
+        const parentPath = `/${pathSegment.slice(0, -1).join("/")}`;
+        const folderName = pathSegment.at(-1);
+        if (folderName && parentPath) {
+          await createFolder({
+            projectId: workspaceId,
+            path: parentPath,
+            environment,
+            name: folderName
+          });
+        }
+      }
+
+      const isEdit = getSecretByKey(environment, key) !== undefined;
+      if (isEdit) {
+        return updateSecretV3({
+          environment,
+          workspaceId,
+          secretPath,
+          secretName: key,
+          secretValue: value || "",
+          type: "shared",
+          latestFileKey: decryptFileKey
+        });
+      }
+
+      return createSecretV3({
+        environment,
+        workspaceId,
+        secretPath,
+        secretName: key,
+        secretValue: value || "",
+        secretComment: "",
+        type: "shared",
+        latestFileKey: decryptFileKey
+      });
+    });
+
+    const results = await Promise.allSettled(promises);
+    const isSecretsAdded = results.some((result) => result.status === "fulfilled");
+
+    if (isSecretsAdded) {
+      createNotification({
+        type: "success",
+        text: "Secrets created successfully"
+      });
+      onClose();
+      reset();
+    } else {
+      createNotification({
+        type: "error",
+        text: "Failed to create secrets"
+      });
+    }
+  };
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onTogglePopUp}>
+      <ModalContent
+        className="max-h-[80vh] overflow-y-auto"
+        title="Bulk Create & Update"
+        subTitle="Create & update a secret across many environments"
+      >
+        <form onSubmit={handleSubmit(handleFormSubmit)}>
+          <FormControl label="Key" isError={Boolean(errors?.key)} errorText={errors?.key?.message}>
+            <Input
+              {...register("key")}
+              placeholder="Type your secret name"
+              autoCapitalization={currentWorkspace?.autoCapitalization}
+            />
+          </FormControl>
+          <Controller
+            control={control}
+            name="value"
+            render={({ field }) => (
+              <FormControl
+                label="Value"
+                isError={Boolean(errors?.value)}
+                errorText={errors?.value?.message}
+              >
+                <SecretInput
+                  {...field}
+                  containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
+                />
+              </FormControl>
+            )}
+          />
+          <FormLabel label="Environments" className="mb-2" />
+          <div className="thin-scrollbar grid max-h-64 grid-cols-3 gap-4 overflow-auto ">
+            {environments.map((env) => {
+              return (
+                <Controller
+                  name={`environments.${env.slug}`}
+                  key={`secret-input-${env.slug}`}
+                  control={control}
+                  render={({ field }) => (
+                    <Checkbox
+                      isChecked={field.value}
+                      onCheckedChange={field.onChange}
+                      id={`secret-input-${env.slug}`}
+                    >
+                      {env.name}
+                      {getSecretByKey(env.slug, newSecretKey) && (
+                        <Tooltip content="Secret exists. Will be overwritten">
+                          <FontAwesomeIcon icon={faWarning} className="ml-1 text-yellow-400" />
+                        </Tooltip>
+                      )}
+                    </Checkbox>
+                  )}
+                />
+              );
+            })}
+          </div>
+          <div className="mt-7 flex items-center">
+            <Button
+              isDisabled={isSubmitting}
+              isLoading={isSubmitting}
+              key="layout-create-project-submit"
+              className="mr-4"
+              type="submit"
+            >
+              Create Secret
+            </Button>
+            <Button
+              key="layout-cancel-create-project"
+              onClick={onClose}
+              variant="plain"
+              colorSchema="secondary"
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};
@@ -0,0 +1 @@
+export { CreateSecretForm } from "./CreateSecretForm"
@@ -15,6 +15,7 @@ import { useToggle } from "@app/hooks";
 import { DecryptedSecret } from "@app/hooks/api/secrets/types";

 import { SecretEditRow } from "./SecretEditRow";
+import SecretRenameRow from "./SecretRenameRow";

 type Props = {
  secretKey: string;
@@ -105,6 +106,13 @@ export const SecretOverviewTableRow = ({
                width: `calc(${expandableColWidth}px - 1rem)`
              }}
            >
+              <SecretRenameRow
+                secretKey={secretKey}
+                environments={environments}
+                secretPath={secretPath}
+                getSecretByKey={getSecretByKey}
+              />
+
              <TableContainer>
                <table className="secret-table">
                  <thead>
@@ -0,0 +1,258 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { subject } from "@casl/ability";
+import { faCheck, faClose, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AnimatePresence, motion } from "framer-motion";
+import { twMerge } from "tailwind-merge";
+import { z } from "zod";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { IconButton, Input, Spinner, Tooltip } from "@app/components/v2";
+import {
+  ProjectPermissionActions,
+  ProjectPermissionSub,
+  useProjectPermission,
+  useWorkspace
+} from "@app/context";
+import { useToggle } from "@app/hooks";
+import { useGetUserWsKey, useUpdateSecretV3 } from "@app/hooks/api";
+import { DecryptedSecret } from "@app/hooks/api/types";
+import { SecretActionType } from "@app/views/SecretMainPage/components/SecretListView/SecretListView.utils";
+
+type Props = {
+  secretKey: string;
+  secretPath: string;
+  environments: { name: string; slug: string }[];
+  getSecretByKey: (slug: string, key: string) => DecryptedSecret | undefined;
+};
+
+export const formSchema = z.object({
+  key: z.string().trim().min(1, { message: "Secret key is required" })
+});
+
+type TFormSchema = z.infer<typeof formSchema>;
+
+function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }: Props) {
+  const { currentWorkspace } = useWorkspace();
+  const { permission } = useProjectPermission();
+  const { createNotification } = useNotificationContext();
+
+  const secrets = environments.map((env) => getSecretByKey(env.slug, secretKey));
+
+  const isReadOnly = environments.some((env) => {
+    const environment = env.slug;
+    const isSecretInEnvReadOnly =
+      permission.can(
+        ProjectPermissionActions.Read,
+        subject(ProjectPermissionSub.Secrets, { environment, secretPath })
+      ) &&
+      permission.cannot(
+        ProjectPermissionActions.Edit,
+        subject(ProjectPermissionSub.Secrets, { environment, secretPath })
+      );
+    if (isSecretInEnvReadOnly) {
+      return true;
+    }
+    return false;
+  });
+
+  const isOverriden = secrets.some(
+    (secret) =>
+      secret?.overrideAction === SecretActionType.Created ||
+      secret?.overrideAction === SecretActionType.Modified
+  );
+  const workspaceId = currentWorkspace?.id || "";
+
+  const { data: decryptFileKey } = useGetUserWsKey(workspaceId);
+
+  const [isSecNameCopied, setIsSecNameCopied] = useToggle(false);
+
+  const { mutateAsync: updateSecretV3 } = useUpdateSecretV3();
+
+  const {
+    handleSubmit,
+    control,
+    reset,
+    trigger,
+    getValues,
+    formState: { isDirty, isSubmitting, errors }
+  } = useForm<TFormSchema>({
+    defaultValues: { key: secretKey },
+    values: { key: secretKey },
+    resolver: zodResolver(formSchema)
+  });
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (isSecNameCopied) {
+      timer = setTimeout(() => setIsSecNameCopied.off(), 2000);
+    }
+    return () => clearTimeout(timer);
+  }, [isSecNameCopied]);
+
+  const handleFormSubmit = async (data: TFormSchema) => {
+    if (!data.key) {
+      createNotification({
+        type: "error",
+        text: "Secret name cannot be empty"
+      });
+      return;
+    }
+
+    const promises = secrets
+      .filter((secret) => !!secret)
+      .map((secret) => {
+        if (!secret) return null;
+
+        return updateSecretV3({
+          environment: secret?.env,
+          workspaceId,
+          secretPath,
+          secretName: secret.key,
+          secretId: secret.id,
+          secretValue: secret.value || "",
+          type: "shared",
+          latestFileKey: decryptFileKey!,
+          tags: secret.tags.map((tag) => tag.id),
+          secretComment: secret.comment,
+          secretReminderRepeatDays: secret.reminderRepeatDays,
+          secretReminderNote: secret.reminderNote,
+          skipMultilineEncoding: secret.skipMultilineEncoding,
+          newSecretName: data.key
+        });
+      });
+
+    await Promise.all(promises)
+      .then(() => {
+        createNotification({
+          type: "success",
+          text: "Successfully renamed the secret"
+        });
+      })
+      .catch(() => {
+        createNotification({
+          type: "error",
+          text: "Error renaming the secret"
+        });
+      });
+  };
+
+  const copyTokenToClipboard = () => {
+    const [key] = getValues(["key"]);
+    navigator.clipboard.writeText(key as string);
+    setIsSecNameCopied.on();
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(handleFormSubmit)}
+      className="secret-table relative mb-2 flex w-full flex-row items-center justify-between overflow-hidden rounded-lg border border-solid border-mineshaft-700 bg-mineshaft-800 font-inter"
+    >
+      <div className="flex h-11 flex-1 flex-shrink-0 items-center">
+        <span className="flex h-full min-w-[11rem] items-center justify-start border-r-2 border-mineshaft-600 px-4">
+          Key
+        </span>
+
+        <Controller
+          name="key"
+          control={control}
+          render={({ field, fieldState: { error } }) => (
+            <Input
+              autoComplete="off"
+              isReadOnly={isReadOnly}
+              autoCapitalization={currentWorkspace?.autoCapitalization}
+              variant="plain"
+              isDisabled={isOverriden}
+              placeholder={error?.message}
+              onKeyUp={() => trigger("key")}
+              isError={Boolean(error)}
+              {...field}
+              className="w-full px-2 placeholder:text-red-500 focus:text-bunker-100 focus:ring-transparent"
+            />
+          )}
+        />
+      </div>
+
+      {isReadOnly || isOverriden ? (
+        <span className="mr-5 rounded-md bg-mineshaft-500 px-2">Read Only</span>
+      ) : (
+        <div className="group flex w-20 items-center justify-center border-l border-mineshaft-500 py-1">
+          <AnimatePresence exitBeforeEnter>
+            {!isDirty ? (
+              <motion.div
+                key="options"
+                className="flex flex-shrink-0 items-center space-x-4 px-3"
+                initial={{ x: 0, opacity: 0 }}
+                animate={{ x: 0, opacity: 1 }}
+                exit={{ x: 10, opacity: 0 }}
+              >
+                <Tooltip content="Copy secret">
+                  <IconButton
+                    ariaLabel="copy-value"
+                    variant="plain"
+                    size="sm"
+                    className="p-0 opacity-0 group-hover:opacity-100"
+                    onClick={copyTokenToClipboard}
+                  >
+                    <FontAwesomeIcon icon={isSecNameCopied ? faCheck : faCopy} />
+                  </IconButton>
+                </Tooltip>
+              </motion.div>
+            ) : (
+              <motion.div
+                key="options-save"
+                className="flex flex-shrink-0 items-center space-x-4 px-3"
+                initial={{ x: -10, opacity: 0 }}
+                animate={{ x: 0, opacity: 1 }}
+                exit={{ x: -10, opacity: 0 }}
+              >
+                <Tooltip content={errors.key ? errors.key.message : "Save"}>
+                  <IconButton
+                    ariaLabel="more"
+                    variant="plain"
+                    type="submit"
+                    size="md"
+                    className={twMerge(
+                      "p-0 text-primary opacity-0 group-hover:opacity-100",
+                      isDirty && "opacity-100"
+                    )}
+                    isDisabled={isSubmitting || Boolean(errors.key)}
+                  >
+                    {isSubmitting ? (
+                      <Spinner className="m-0 h-4 w-4 p-0" />
+                    ) : (
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        size="lg"
+                        className={twMerge("text-primary", errors.key && "text-mineshaft-400")}
+                      />
+                    )}
+                  </IconButton>
+                </Tooltip>
+                <Tooltip content="Cancel">
+                  <IconButton
+                    ariaLabel="more"
+                    variant="plain"
+                    size="md"
+                    className={twMerge(
+                      "p-0 opacity-0 group-hover:opacity-100",
+                      isDirty && "opacity-100"
+                    )}
+                    onClick={() => reset()}
+                    isDisabled={isSubmitting}
+                  >
+                    <FontAwesomeIcon icon={faClose} size="lg" />
+                  </IconButton>
+                </Tooltip>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      )}
+    </form>
+  );
+}
+
+export default SecretRenameRow;
@@ -19,7 +19,8 @@ import { SSOModal } from "./SSOModal";
 const ssoAuthProviderMap: { [key: string]: string } = {
  "okta-saml": "Okta SAML",
  "azure-saml": "Azure SAML",
-  "jumpcloud-saml": "JumpCloud SAML"
+  "jumpcloud-saml": "JumpCloud SAML",
+  "google-saml": "Google SAML"
 };

 export const OrgSSOSection = (): JSX.Element => {
@@ -21,13 +21,15 @@ import { UsePopUpState } from "@app/hooks/usePopUp";
 enum AuthProvider {
  OKTA_SAML = "okta-saml",
  AZURE_SAML = "azure-saml",
-  JUMPCLOUD_SAML = "jumpcloud-saml"
+  JUMPCLOUD_SAML = "jumpcloud-saml",
+  GOOGLE_SAML = "google-saml"
 }

 const ssoAuthProviders = [
  { label: "Okta SAML", value: AuthProvider.OKTA_SAML },
  { label: "Azure SAML", value: AuthProvider.AZURE_SAML },
-  { label: "JumpCloud SAML", value: AuthProvider.JUMPCLOUD_SAML }
+  { label: "JumpCloud SAML", value: AuthProvider.JUMPCLOUD_SAML },
+  { label: "Google SAML", value: AuthProvider.GOOGLE_SAML }
 ];

 const schema = yup
@@ -140,7 +142,15 @@ export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
          issuer: "IdP Entity ID",
          issuerPlaceholder: "xxx"
        };
-
+      case AuthProvider.GOOGLE_SAML:
+        return {
+          acsUrl: "ACS URL",
+          entityId: "SP Entity ID",
+          entryPoint: "SSO URL",
+          entryPointPlaceholder: "https://accounts.google.com/o/saml2/idp?idpid=xxx",
+          issuer: "IdP Entity ID",
+          issuerPlaceholder: "https://accounts.google.com/o/saml2/idp?idpid=xxx"
+        };
      default:
        return {
          acsUrl: "ACS URL",
@@ -0,0 +1,52 @@
+import { useCallback } from "react";
+import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { Button } from "@app/components/v2";
+import { useToggle } from "@app/hooks";
+
+type Props = {
+  value: string;
+  hoverText: string;
+  notificationText: string;
+  children: React.ReactNode;
+};
+
+export const CopyButton = ({ value, children, hoverText, notificationText }: Props) => {
+  const [isProjectIdCopied, setIsProjectIdCopied] = useToggle(false);
+  const { createNotification } = useNotificationContext();
+
+  const copyToClipboard = useCallback(() => {
+    if (isProjectIdCopied) {
+      return;
+    }
+
+    setIsProjectIdCopied.on();
+    navigator.clipboard.writeText(value);
+
+    createNotification({
+      text: notificationText,
+      type: "success"
+    });
+
+    const timer = setTimeout(() => setIsProjectIdCopied.off(), 2000);
+
+    // eslint-disable-next-line consistent-return
+    return () => clearTimeout(timer);
+  }, [isProjectIdCopied]);
+
+  return (
+    <Button
+      colorSchema="secondary"
+      className="group relative"
+      leftIcon={<FontAwesomeIcon icon={isProjectIdCopied ? faCheck : faCopy} />}
+      onClick={copyToClipboard}
+    >
+      {children}
+      <span className="absolute -left-8 -top-20 hidden translate-y-full justify-center rounded-md bg-bunker-800 py-2 px-3 text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+        {hoverText}
+      </span>
+    </Button>
+  );
+};
@@ -1,7 +1,5 @@
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";

@@ -9,9 +7,10 @@ import { useNotificationContext } from "@app/components/context/Notifications/No
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, FormControl, Input } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
-import { useToggle } from "@app/hooks";
 import { useRenameWorkspace } from "@app/hooks/api";

+import { CopyButton } from "./CopyButton";
+
 const formSchema = yup.object({
  name: yup.string().required().label("Project Name")
 });
@@ -22,7 +21,6 @@ export const ProjectNameChangeSection = () => {
  const { createNotification } = useNotificationContext();
  const { currentWorkspace } = useWorkspace();
  const { mutateAsync, isLoading } = useRenameWorkspace();
-  const [isProjectIdCopied, setIsProjectIdCopied] = useToggle(false);

  const { handleSubmit, control, reset } = useForm<FormData>({ resolver: yupResolver(formSchema) });

@@ -34,16 +32,6 @@ export const ProjectNameChangeSection = () => {
    }
  }, [currentWorkspace]);

-  useEffect(() => {
-    let timer: NodeJS.Timeout;
-
-    if (isProjectIdCopied) {
-      timer = setTimeout(() => setIsProjectIdCopied.off(), 2000);
-    }
-
-    return () => clearTimeout(timer);
-}, [setIsProjectIdCopied]);
-
  const onFormSubmit = async ({ name }: FormData) => {
    try {
      if (!currentWorkspace?.id) return;
@@ -66,35 +54,28 @@ export const ProjectNameChangeSection = () => {
    }
  };

-  const copyProjectIdToClipboard = () => {
-    navigator.clipboard.writeText(currentWorkspace?.id || "");
-    setIsProjectIdCopied.on();
-
-    createNotification({
-      text: "Copied Project ID to clipboard",
-      type: "success"
-    });
-  }
-
  return (
    <form
      onSubmit={handleSubmit(onFormSubmit)}
      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
    >
-      <div className="flex justify-betweens">
-        <h2 className="text-xl font-semibold flex-1 text-mineshaft-100 mb-8">Project Name</h2>
-        <div>
-          <Button
-            colorSchema="secondary"
-            className="group relative"
-            leftIcon={<FontAwesomeIcon icon={isProjectIdCopied ? faCheck : faCopy} />}
-            onClick={copyProjectIdToClipboard}
+      <div className="justify-betweens flex">
+        <h2 className="mb-8 flex-1 text-xl font-semibold text-mineshaft-100">Project Name</h2>
+        <div className="space-x-2">
+          <CopyButton
+            value={currentWorkspace?.slug || ""}
+            hoverText="Click to project slug"
+            notificationText="Copied project slug to clipboard"
+          >
+            Copy Project Slug
+          </CopyButton>
+          <CopyButton
+            value={currentWorkspace?.id || ""}
+            hoverText="Click to project ID"
+            notificationText="Copied project ID to clipboard"
          >
            Copy Project ID
-            <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
-              Click to copy
-            </span>
-          </Button>
+          </CopyButton>
        </div>
      </div>
				`@@ -0,0 +1 @@`
				`export { CreateSecretForm } from "./CreateSecretForm"`