Merge branch 'main' into org-name-constraint

2026-10-14 15:40:47 +00:00 · 2025-03-12 17:07:12 -07:00
parent abc2ffca57 7a1c08a7f2
commit 7415bb93b8
258 changed files with 9274 additions and 3566 deletions
@@ -1,93 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { faWarning } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { useToggle } from "@app/hooks";
-import { generateUserBackupKey } from "@app/lib/crypto";
-
-import { createNotification } from "../notifications";
-import { generateBackupPDFAsync } from "../utilities/generateBackupPDF";
-import { Button } from "../v2";
-
-interface DownloadBackupPDFStepProps {
-  incrementStep: () => void;
-  email: string;
-  password: string;
-  name: string;
-}
-
-/**
- * This is the step of the signup flow where the user downloads the backup pdf
- * @param {object} obj
- * @param {function} obj.incrementStep - function that moves the user on to the next stage of signup
- * @param {string} obj.email - user's email
- * @param {string} obj.password - user's password
- * @param {string} obj.name - user's name
- * @returns
- */
-export default function DonwloadBackupPDFStep({
-  incrementStep,
-  email,
-  password,
-  name
-}: DownloadBackupPDFStepProps): JSX.Element {
-  const { t } = useTranslation();
-
-  const [isLoading, setIsLoading] = useToggle();
-
-  const handleBackupKeyGenerate = async () => {
-    try {
-      setIsLoading.on();
-      const generatedKey = await generateUserBackupKey(email, password);
-      await generateBackupPDFAsync({
-        generatedKey,
-        personalEmail: email,
-        personalName: name
-      });
-      incrementStep();
-    } catch (err) {
-      console.log(err);
-      createNotification({
-        type: "error",
-        text: "Failed to generate backup key"
-      });
-    } finally {
-      setIsLoading.off();
-    }
-  };
-
-  return (
-    <div className="mx-auto mb-36 flex h-full w-full flex-col items-center md:mb-16 md:px-6">
-      <p className="flex flex-col items-center justify-center bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
-        <FontAwesomeIcon
-          icon={faWarning}
-          className="mb-6 ml-2 mr-3 pt-1 text-6xl text-bunker-200"
-        />
-        {t("signup.step4-message")}
-      </p>
-      <div className="text-md mt-8 flex w-full max-w-md flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 pb-2 text-center text-bunker-300 md:min-w-[24rem] lg:w-1/6">
-        <div className="m-2 mx-auto mt-4 flex w-full flex-row items-center rounded-md px-3 text-center text-bunker-300 md:mt-8 md:min-w-[23rem] lg:w-1/6">
-          <span className="mb-2">
-            {t("signup.step4-description1")} {t("signup.step4-description3")}
-          </span>
-        </div>
-        <div className="mx-auto mb-2 mt-2 flex w-full flex-col items-center justify-center px-3 text-center text-sm md:mb-4 md:mt-4 md:min-w-[20rem] md:max-w-md md:text-left lg:w-1/6">
-          <div className="text-l w-full py-1 text-lg">
-            <Button
-              onClick={handleBackupKeyGenerate}
-              size="sm"
-              isFullWidth
-              isLoading={isLoading}
-              isDisabled={isLoading}
-              className="h-12"
-              colorSchema="primary"
-              variant="outline_bg"
-            >
-              Download PDF
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
@@ -0,0 +1,211 @@
+import { useCallback, useEffect } from "react";
+import { MongoAbility, MongoQuery } from "@casl/ability";
+import {
+  faArrowUpRightFromSquare,
+  faUpRightAndDownLeftFromCenter,
+  faWindowRestore
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  Background,
+  BackgroundVariant,
+  ConnectionLineType,
+  Controls,
+  Node,
+  NodeMouseHandler,
+  Panel,
+  ReactFlow,
+  ReactFlowProvider,
+  useReactFlow
+} from "@xyflow/react";
+import { twMerge } from "tailwind-merge";
+
+import { Button, IconButton, Spinner, Tooltip } from "@app/components/v2";
+import { ProjectPermissionSet } from "@app/context/ProjectPermissionContext";
+
+import { AccessTreeErrorBoundary, AccessTreeProvider, PermissionSimulation } from "./components";
+import { BasePermissionEdge } from "./edges";
+import { useAccessTree } from "./hooks";
+import { FolderNode, RoleNode } from "./nodes";
+import { ViewMode } from "./types";
+
+export type AccessTreeProps = {
+  permissions: MongoAbility<ProjectPermissionSet, MongoQuery>;
+};
+
+const EdgeTypes = { base: BasePermissionEdge };
+
+const NodeTypes = { role: RoleNode, folder: FolderNode };
+
+const AccessTreeContent = ({ permissions }: AccessTreeProps) => {
+  const accessTreeData = useAccessTree(permissions);
+  const { edges, nodes, isLoading, viewMode, setViewMode } = accessTreeData;
+
+  const { fitView, getViewport, setCenter } = useReactFlow();
+
+  const onNodeClick: NodeMouseHandler<Node> = useCallback(
+    (_, node) => {
+      setCenter(
+        node.position.x + (node.width ? node.width / 2 : 0),
+        node.position.y + (node.height ? node.height / 2 + 50 : 50),
+        { duration: 1000, zoom: 1 }
+      );
+    },
+    [setCenter]
+  );
+
+  useEffect(() => {
+    setTimeout(() => {
+      fitView({
+        padding: 0.2,
+        duration: 1000,
+        maxZoom: 1
+      });
+    }, 1);
+  }, [fitView, nodes, edges, getViewport()]);
+
+  const handleToggleModalView = () =>
+    setViewMode((prev) => (prev === ViewMode.Modal ? ViewMode.Docked : ViewMode.Modal));
+
+  const handleToggleUndockedView = () =>
+    setViewMode((prev) => (prev === ViewMode.Undocked ? ViewMode.Docked : ViewMode.Undocked));
+
+  const undockButtonLabel = `${viewMode === ViewMode.Undocked ? "Dock" : "Undock"} View`;
+  const windowButtonLabel = `${viewMode === ViewMode.Modal ? "Dock" : "Expand"} View`;
+
+  return (
+    <div
+      className={twMerge(
+        "w-full",
+        viewMode === ViewMode.Modal && "fixed inset-0 z-50 p-10",
+        viewMode === ViewMode.Undocked &&
+          "fixed bottom-4 left-20 z-50 h-[40%] w-[38%] min-w-[32rem] lg:w-[34%]"
+      )}
+    >
+      <div
+        className={twMerge(
+          "mb-4 h-full w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 transition-transform duration-500",
+          viewMode === ViewMode.Docked ? "relative p-4" : "relative p-0"
+        )}
+      >
+        {viewMode === ViewMode.Docked && (
+          <div className="mb-4 flex items-start justify-between border-b border-mineshaft-400 pb-4">
+            <div>
+              <h3 className="text-lg font-semibold text-mineshaft-100">Access Tree</h3>
+              <p className="text-sm leading-3 text-mineshaft-400">
+                Visual access policies for the configured role.
+              </p>
+            </div>
+            <div className="whitespace-nowrap">
+              <Button
+                variant="outline_bg"
+                colorSchema="secondary"
+                type="submit"
+                className="h-10 rounded-r-none bg-mineshaft-700"
+                leftIcon={<FontAwesomeIcon icon={faWindowRestore} />}
+                onClick={handleToggleUndockedView}
+              >
+                Undock
+              </Button>
+              <Button
+                variant="outline_bg"
+                colorSchema="secondary"
+                type="submit"
+                className="h-10 rounded-l-none bg-mineshaft-600"
+                leftIcon={<FontAwesomeIcon icon={faUpRightAndDownLeftFromCenter} />}
+                onClick={handleToggleModalView}
+              >
+                Expand
+              </Button>
+            </div>
+          </div>
+        )}
+        <div
+          className={twMerge(
+            "flex items-center space-x-4",
+            viewMode === ViewMode.Docked ? "h-96" : "h-full"
+          )}
+        >
+          <div className="h-full w-full">
+            <ReactFlow
+              className="rounded-md border border-mineshaft"
+              nodes={nodes}
+              edges={edges}
+              edgeTypes={EdgeTypes}
+              nodeTypes={NodeTypes}
+              fitView
+              onNodeClick={onNodeClick}
+              colorMode="dark"
+              nodesDraggable={false}
+              edgesReconnectable={false}
+              nodesConnectable={false}
+              connectionLineType={ConnectionLineType.SmoothStep}
+              proOptions={{
+                hideAttribution: false // we need pro license if we want to hide
+              }}
+            >
+              {isLoading && (
+                <Panel className="flex h-full w-full items-center justify-center">
+                  <Spinner />
+                </Panel>
+              )}
+              {viewMode !== ViewMode.Docked && (
+                <Panel position="top-right" className="flex gap-1.5">
+                  <Tooltip position="bottom" align="center" content={undockButtonLabel}>
+                    <IconButton
+                      className="mr-1 rounded"
+                      colorSchema="secondary"
+                      variant="plain"
+                      onClick={handleToggleUndockedView}
+                      ariaLabel={undockButtonLabel}
+                    >
+                      <FontAwesomeIcon
+                        icon={
+                          viewMode === ViewMode.Undocked
+                            ? faArrowUpRightFromSquare
+                            : faWindowRestore
+                        }
+                      />
+                    </IconButton>
+                  </Tooltip>
+                  <Tooltip align="end" position="bottom" content={windowButtonLabel}>
+                    <IconButton
+                      className="rounded"
+                      colorSchema="secondary"
+                      variant="plain"
+                      onClick={handleToggleModalView}
+                      ariaLabel={windowButtonLabel}
+                    >
+                      <FontAwesomeIcon
+                        icon={
+                          viewMode === ViewMode.Modal
+                            ? faArrowUpRightFromSquare
+                            : faUpRightAndDownLeftFromCenter
+                        }
+                      />
+                    </IconButton>
+                  </Tooltip>
+                </Panel>
+              )}
+              <PermissionSimulation {...accessTreeData} />
+              <Background color="#5d5f64" bgColor="#111419" variant={BackgroundVariant.Dots} />
+              <Controls position="bottom-left" />
+            </ReactFlow>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const AccessTree = (props: AccessTreeProps) => {
+  return (
+    <AccessTreeErrorBoundary {...props}>
+      <AccessTreeProvider>
+        <ReactFlowProvider>
+          <AccessTreeContent {...props} />
+        </ReactFlowProvider>
+      </AccessTreeProvider>
+    </AccessTreeErrorBoundary>
+  );
+};
@@ -0,0 +1,51 @@
+import React, {
+  createContext,
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useContext,
+  useMemo,
+  useState
+} from "react";
+
+import { ViewMode } from "../types";
+
+export interface AccessTreeContextProps {
+  secretName: string;
+  setSecretName: Dispatch<SetStateAction<string>>;
+  viewMode: ViewMode;
+  setViewMode: Dispatch<SetStateAction<ViewMode>>;
+}
+
+const AccessTreeContext = createContext<AccessTreeContextProps | undefined>(undefined);
+
+interface AccessTreeProviderProps {
+  children: ReactNode;
+}
+
+export const AccessTreeProvider: React.FC<AccessTreeProviderProps> = ({ children }) => {
+  const [secretName, setSecretName] = useState("");
+  const [viewMode, setViewMode] = useState(ViewMode.Docked);
+
+  const value = useMemo(
+    () => ({
+      secretName,
+      setSecretName,
+      viewMode,
+      setViewMode
+    }),
+    [secretName, setSecretName, viewMode, setViewMode]
+  );
+
+  return <AccessTreeContext.Provider value={value}>{children}</AccessTreeContext.Provider>;
+};
+
+export const useAccessTreeContext = (): AccessTreeContextProps => {
+  const context = useContext(AccessTreeContext);
+
+  if (!context) {
+    throw new Error("useAccessTreeContext must be used within a AccessTreeProvider");
+  }
+
+  return context;
+};
@@ -0,0 +1,105 @@
+import React, { ErrorInfo, ReactNode } from "react";
+import { MongoAbility, MongoQuery } from "@casl/ability";
+import { faCheck, faCopy, faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { IconButton } from "@app/components/v2";
+import { SessionStorageKeys } from "@app/const";
+import { ProjectPermissionSet } from "@app/context/ProjectPermissionContext";
+import { useTimedReset } from "@app/hooks";
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  permissions: MongoAbility<ProjectPermissionSet, MongoQuery>;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+const ErrorDisplay = ({
+  error,
+  permissions
+}: {
+  error: Error | null;
+  permissions: MongoAbility<ProjectPermissionSet, MongoQuery>;
+}) => {
+  const display = JSON.stringify({ errorMessage: error?.message, permissions }, null, 2);
+
+  const [isCopied, , setIsCopied] = useTimedReset<boolean>({
+    initialState: false
+  });
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(display);
+    setIsCopied(true);
+    sessionStorage.removeItem(SessionStorageKeys.CLI_TERMINAL_TOKEN);
+  };
+
+  return (
+    <div className="flex h-full w-full flex-col gap-2">
+      <div className="flex items-center gap-2 text-mineshaft-100">
+        <FontAwesomeIcon icon={faExclamationTriangle} className="text-red" />
+        <p>
+          Error displaying access tree. Please contact{" "}
+          <a
+            className="inline cursor-pointer text-mineshaft-200 underline decoration-primary-500 underline-offset-4 duration-200 hover:text-mineshaft-100"
+            target="_blank"
+            rel="noopener noreferrer"
+            href="mailto:[email protected]"
+          >
+            support@infisical.com
+          </a>{" "}
+          with the following information.
+        </p>
+      </div>
+      <div className="relative flex flex-1 flex-col overflow-hidden">
+        <pre className="thin-scrollbar w-full flex-1 overflow-y-auto whitespace-pre-wrap rounded bg-mineshaft-700 p-2 text-xs text-mineshaft-100">
+          {display}
+        </pre>
+        <IconButton
+          variant="plain"
+          colorSchema="secondary"
+          className="absolute right-4 top-2"
+          ariaLabel="Copy secret value"
+          onClick={copyToClipboard}
+        >
+          <FontAwesomeIcon icon={isCopied ? faCheck : faCopy} />
+        </IconButton>
+      </div>
+    </div>
+  );
+};
+
+class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    console.error("Error caught by ErrorBoundary:", error, errorInfo, this.props);
+  }
+
+  render(): ReactNode {
+    const { hasError, error } = this.state;
+    const { children, permissions } = this.props;
+
+    if (hasError) {
+      return <ErrorDisplay error={error} permissions={permissions} />;
+    }
+    return children;
+  }
+}
+
+export const AccessTreeErrorBoundary = ({ children, permissions }: ErrorBoundaryProps) => {
+  return <ErrorBoundary permissions={permissions}>{children}</ErrorBoundary>;
+};
@@ -0,0 +1,141 @@
+import { Dispatch, SetStateAction, useState } from "react";
+import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Panel } from "@xyflow/react";
+
+import { Button, FormLabel, IconButton, Input, Select, SelectItem } from "@app/components/v2";
+import { ProjectPermissionSub } from "@app/context";
+
+import { ViewMode } from "../types";
+
+type TProps = {
+  secretName: string;
+  setSecretName: Dispatch<SetStateAction<string>>;
+  viewMode: ViewMode;
+  setViewMode: Dispatch<SetStateAction<ViewMode>>;
+  setEnvironment: Dispatch<SetStateAction<string>>;
+  environment: string;
+  subject: ProjectPermissionSub;
+  setSubject: Dispatch<SetStateAction<ProjectPermissionSub>>;
+  environments: { name: string; slug: string }[];
+};
+
+export const PermissionSimulation = ({
+  setEnvironment,
+  environment,
+  subject,
+  setSubject,
+  environments,
+  setViewMode,
+  viewMode,
+  secretName,
+  setSecretName
+}: TProps) => {
+  const [expand, setExpand] = useState(false);
+
+  const handlePermissionSimulation = () => {
+    setExpand(true);
+    setViewMode(ViewMode.Modal);
+  };
+
+  if (viewMode !== ViewMode.Modal)
+    return (
+      <Panel position="top-left">
+        <Button
+          size="xs"
+          className="mr-1 rounded"
+          colorSchema="secondary"
+          onClick={handlePermissionSimulation}
+        >
+          Permission Simulation
+        </Button>
+      </Panel>
+    );
+
+  return (
+    <Panel
+      onClick={handlePermissionSimulation}
+      position="top-left"
+      className={`group flex flex-col gap-2 pb-4 pr-4 ${expand ? "" : "cursor-pointer"}`}
+    >
+      <div className="flex w-[20rem] flex-col gap-1.5 rounded border border-mineshaft-600 bg-mineshaft-800 p-2 font-inter text-gray-200">
+        <div>
+          <div className="flex w-full items-center justify-between">
+            <span className="text-sm">Permission Simulation</span>
+            <IconButton
+              variant="plain"
+              ariaLabel={expand ? "Collapse" : "Expand"}
+              onClick={(e) => {
+                e.stopPropagation();
+                setExpand((prev) => !prev);
+              }}
+            >
+              <FontAwesomeIcon icon={expand ? faChevronUp : faChevronDown} />
+            </IconButton>
+          </div>
+          {expand && (
+            <p className="mb-2 mt-1 text-xs text-mineshaft-400">
+              Evaluate conditional policies to see what permissions will be granted given a secret
+              name or tags
+            </p>
+          )}
+        </div>
+        {expand && (
+          <>
+            <div>
+              <FormLabel label="Subject" />
+              <Select
+                value={subject}
+                onValueChange={(value) => setSubject(value as ProjectPermissionSub)}
+                className="w-full border border-mineshaft-500 capitalize"
+                position="popper"
+                dropdownContainerClassName="max-w-none"
+              >
+                {[
+                  ProjectPermissionSub.Secrets,
+                  ProjectPermissionSub.SecretFolders,
+                  ProjectPermissionSub.DynamicSecrets,
+                  ProjectPermissionSub.SecretImports
+                ].map((sub) => {
+                  return (
+                    <SelectItem className="capitalize" value={sub} key={sub}>
+                      {sub.replace("-", " ")}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </div>
+            <div>
+              <FormLabel label="Environment" />
+              <Select
+                value={environment}
+                onValueChange={setEnvironment}
+                className="w-full border border-mineshaft-500 capitalize"
+                position="popper"
+                dropdownContainerClassName="max-w-[19rem]"
+              >
+                {environments.map(({ name, slug }) => {
+                  return (
+                    <SelectItem value={slug} key={slug}>
+                      {name}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </div>
+            {subject === ProjectPermissionSub.Secrets && (
+              <div>
+                <FormLabel label="Secret Name" />
+                <Input
+                  placeholder="*"
+                  value={secretName}
+                  onChange={(e) => setSecretName(e.target.value)}
+                />
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </Panel>
+  );
+};
@@ -0,0 +1,3 @@
+export * from "./AccessTreeContext";
+export * from "./AccessTreeErrorBoundary";
+export * from "./PermissionSimulation";
@@ -0,0 +1,34 @@
+import { BaseEdge, BaseEdgeProps, EdgeProps, getSmoothStepPath } from "@xyflow/react";
+
+export const BasePermissionEdge = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  markerStart,
+  markerEnd,
+  style
+}: Omit<BaseEdgeProps, "path"> & EdgeProps) => {
+  const [edgePath] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY
+  });
+
+  return (
+    <BaseEdge
+      id={id}
+      markerStart={markerStart}
+      markerEnd={markerEnd}
+      style={{
+        strokeDasharray: "5",
+        strokeWidth: 1,
+        stroke: "#707174",
+        ...style
+      }}
+      path={edgePath}
+    />
+  );
+};
@@ -0,0 +1 @@
+export * from "./BasePermissionEdge";
@@ -0,0 +1,91 @@
+import { useEffect, useState } from "react";
+import { MongoAbility, MongoQuery } from "@casl/ability";
+import { Edge, Node, useEdgesState, useNodesState } from "@xyflow/react";
+
+import { ProjectPermissionSub, useWorkspace } from "@app/context";
+import { ProjectPermissionSet } from "@app/context/ProjectPermissionContext";
+import { useListProjectEnvironmentsFolders } from "@app/hooks/api/secretFolders/queries";
+
+import { useAccessTreeContext } from "../components";
+import { PermissionAccess } from "../types";
+import {
+  createBaseEdge,
+  createFolderNode,
+  createRoleNode,
+  getSubjectActionRuleMap,
+  positionElements
+} from "../utils";
+
+export const useAccessTree = (permissions: MongoAbility<ProjectPermissionSet, MongoQuery>) => {
+  const { currentWorkspace } = useWorkspace();
+  const { secretName, setSecretName, setViewMode, viewMode } = useAccessTreeContext();
+  const [nodes, setNodes] = useNodesState<Node>([]);
+  const [edges, setEdges] = useEdgesState<Edge>([]);
+  const [subject, setSubject] = useState(ProjectPermissionSub.Secrets);
+  const [environment, setEnvironment] = useState(currentWorkspace.environments[0]?.slug ?? "");
+  const { data: environmentsFolders, isPending } = useListProjectEnvironmentsFolders(
+    currentWorkspace.id
+  );
+
+  useEffect(() => {
+    if (!environmentsFolders || !permissions || !environmentsFolders[environment]) return;
+
+    const { folders, name } = environmentsFolders[environment];
+
+    const roleNode = createRoleNode({
+      subject,
+      environment: name
+    });
+
+    const actionRuleMap = getSubjectActionRuleMap(subject, permissions);
+
+    const folderNodes = folders.map((folder) =>
+      createFolderNode({
+        folder,
+        permissions,
+        environment,
+        subject,
+        secretName,
+        actionRuleMap
+      })
+    );
+
+    const folderEdges = folderNodes.map(({ data: folder }) => {
+      const actions = Object.values(folder.actions);
+
+      let access: PermissionAccess;
+      if (Object.values(actions).some((action) => action === PermissionAccess.Full)) {
+        access = PermissionAccess.Full;
+      } else if (Object.values(actions).some((action) => action === PermissionAccess.Partial)) {
+        access = PermissionAccess.Partial;
+      } else {
+        access = PermissionAccess.None;
+      }
+
+      return createBaseEdge({
+        source: folder.parentId ?? roleNode.id,
+        target: folder.id,
+        access
+      });
+    });
+
+    const init = positionElements([roleNode, ...folderNodes], [...folderEdges]);
+    setNodes(init.nodes);
+    setEdges(init.edges);
+  }, [permissions, environmentsFolders, environment, subject, secretName, setNodes, setEdges]);
+
+  return {
+    nodes,
+    edges,
+    subject,
+    environment,
+    setEnvironment,
+    setSubject,
+    isLoading: isPending,
+    environments: currentWorkspace.environments,
+    secretName,
+    setSecretName,
+    viewMode,
+    setViewMode
+  };
+};
@@ -0,0 +1 @@
+export * from "./AccessTree";
@@ -0,0 +1,78 @@
+import {
+  faCheckCircle,
+  faCircleMinus,
+  faCircleXmark,
+  faFolder
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Handle, NodeProps, Position } from "@xyflow/react";
+
+import { Tooltip } from "@app/components/v2";
+
+import { PermissionAccess } from "../../types";
+import { createFolderNode, formatActionName } from "../../utils";
+import { FolderNodeTooltipContent } from "./components";
+
+const AccessMap = {
+  [PermissionAccess.Full]: { className: "text-green", icon: faCheckCircle },
+  [PermissionAccess.Partial]: { className: "text-yellow", icon: faCircleMinus },
+  [PermissionAccess.None]: { className: "text-red", icon: faCircleXmark }
+};
+
+export const FolderNode = ({
+  data
+}: NodeProps & { data: ReturnType<typeof createFolderNode>["data"] }) => {
+  const { name, actions, actionRuleMap, parentId, subject } = data;
+
+  const hasMinimalAccess = Object.values(actions).some(
+    (action) => action === PermissionAccess.Full || action === PermissionAccess.Partial
+  );
+
+  return (
+    <>
+      <Handle
+        type="target"
+        className="pointer-events-none !cursor-pointer opacity-0"
+        position={Position.Top}
+      />
+      <div
+        className={`flex ${hasMinimalAccess ? "" : "opacity-40"} h-full w-full flex-col items-center justify-center rounded-md border border-mineshaft bg-mineshaft-800 px-2 py-3 font-inter shadow-lg transition-opacity duration-500`}
+      >
+        <div className="flex items-center space-x-2 text-xs text-mineshaft-100">
+          <FontAwesomeIcon className="mb-0.5 font-medium text-yellow" icon={faFolder} />
+          <span>{parentId ? `/${name}` : "/"}</span>
+        </div>
+        <div className="mt-1.5 flex w-full flex-wrap items-center justify-center gap-x-2 gap-y-1 rounded bg-mineshaft-600 px-2 py-1 text-xs">
+          {Object.entries(actions).map(([action, access]) => {
+            const { className, icon } = AccessMap[access];
+
+            return (
+              <Tooltip
+                key={action}
+                className="hidden" // just using the tooltip to trigger node toolbar
+                content={
+                  <FolderNodeTooltipContent
+                    action={action}
+                    access={access}
+                    subject={subject}
+                    actionRuleMap={actionRuleMap}
+                  />
+                }
+              >
+                <div className="flex items-center gap-1">
+                  <FontAwesomeIcon icon={icon} className={className} size="xs" />
+                  <span className="capitalize">{formatActionName(action)}</span>
+                </div>
+              </Tooltip>
+            );
+          })}
+        </div>
+      </div>
+      <Handle
+        type="source"
+        className="pointer-events-none !cursor-pointer opacity-0"
+        position={Position.Bottom}
+      />
+    </>
+  );
+};
@@ -0,0 +1,131 @@
+import { ReactElement } from "react";
+import { faCheckCircle, faCircleMinus, faCircleXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { NodeToolbar, Position } from "@xyflow/react";
+
+import {
+  formatedConditionsOperatorNames,
+  PermissionConditionOperators
+} from "@app/context/ProjectPermissionContext/types";
+import { camelCaseToSpaces } from "@app/lib/fn/string";
+
+import { PermissionAccess } from "../../../types";
+import { createFolderNode, formatActionName } from "../../../utils";
+
+type Props = {
+  action: string;
+  access: PermissionAccess;
+} & Pick<ReturnType<typeof createFolderNode>["data"], "actionRuleMap" | "subject">;
+
+export const FolderNodeTooltipContent = ({ action, access, actionRuleMap, subject }: Props) => {
+  let component: ReactElement;
+
+  switch (access) {
+    case PermissionAccess.Full:
+      component = (
+        <>
+          <div className="flex items-center gap-1.5 capitalize text-green">
+            <FontAwesomeIcon icon={faCheckCircle} size="xs" />
+            <span>Full {formatActionName(action)} Permissions</span>
+          </div>
+          <p className="text-mineshaft-200">
+            Policy grants unconditional{" "}
+            <span className="font-medium text-mineshaft-100">
+              {formatActionName(action).toLowerCase()}
+            </span>{" "}
+            permission for {subject.replaceAll("-", " ")} in this folder.
+          </p>
+        </>
+      );
+      break;
+    case PermissionAccess.Partial:
+      component = (
+        <>
+          <div className="flex items-center gap-1.5 capitalize text-yellow">
+            <FontAwesomeIcon icon={faCircleMinus} className="text-yellow" size="xs" />
+            <span>Conditional {formatActionName(action)} Permissions</span>
+          </div>
+          <p className="mb-1 text-mineshaft-200">
+            Policy conditionally allows{" "}
+            <span className="font-medium text-mineshaft-100">
+              {formatActionName(action).toLowerCase()}
+            </span>{" "}
+            permission for {subject.replaceAll("-", " ")} in this folder.
+          </p>
+          <ul className="flex list-disc flex-col gap-2 pl-4">
+            {actionRuleMap.map((ruleMap, index) => {
+              const rule = ruleMap[action];
+
+              if (
+                !rule ||
+                !rule.conditions ||
+                (!rule.conditions.secretName && !rule.conditions.secretTags)
+              )
+                return null;
+
+              return (
+                <li key={`${action}_${index + 1}`}>
+                  <span className={`italic ${rule.inverted ? "text-red" : "text-green"} `}>
+                    {rule.inverted ? "Forbids" : "Allows"}
+                  </span>
+                  <span> when:</span>
+                  {Object.entries(rule.conditions).map(([key, condition]) => (
+                    <ul key={`${action}_${index + 1}_${key}`} className="list-[square] pl-4">
+                      {Object.entries(condition as object).map(([operator, value]) => (
+                        <li key={`${action}_${index + 1}_${key}_${operator}`}>
+                          <span className="font-medium capitalize text-mineshaft-100">
+                            {camelCaseToSpaces(key)}
+                          </span>{" "}
+                          <span className="text-mineshaft-200">
+                            {
+                              formatedConditionsOperatorNames[
+                                operator as PermissionConditionOperators
+                              ]
+                            }
+                          </span>{" "}
+                          <span className={rule.inverted ? "text-red" : "text-green"}>
+                            {typeof value === "string" ? value : value.join(", ")}
+                          </span>
+                          .
+                        </li>
+                      ))}
+                    </ul>
+                  ))}
+                </li>
+              );
+            })}
+          </ul>
+        </>
+      );
+      break;
+    case PermissionAccess.None:
+      component = (
+        <>
+          <div className="flex items-center gap-1.5 capitalize text-red">
+            <FontAwesomeIcon icon={faCircleXmark} size="xs" />
+            <span>No {formatActionName(action)} Permissions</span>
+          </div>
+          <p className="text-mineshaft-200">
+            Policy always forbids{" "}
+            <span className="font-medium text-mineshaft-100">
+              {formatActionName(action).toLowerCase()}
+            </span>{" "}
+            permission for {subject.replaceAll("-", " ")} in this folder.
+          </p>
+        </>
+      );
+      break;
+    default:
+      throw new Error(`Unhandled access type: ${access}`);
+  }
+
+  return (
+    <NodeToolbar
+      className="rounded-md border border-mineshaft-600 bg-mineshaft-800 px-4 py-2 text-sm font-light text-bunker-100"
+      isVisible
+      position={Position.Bottom}
+    >
+      {component}
+    </NodeToolbar>
+  );
+};
@@ -0,0 +1 @@
+export * from "./FolderNodeTooltipContent";
@@ -0,0 +1 @@
+export * from "./FolderNode";
@@ -0,0 +1,30 @@
+import { Handle, NodeProps, Position } from "@xyflow/react";
+
+import { createRoleNode } from "../utils";
+
+export const RoleNode = ({
+  data: { subject, environment }
+}: NodeProps & { data: ReturnType<typeof createRoleNode>["data"] }) => {
+  return (
+    <>
+      <Handle
+        type="target"
+        className="pointer-events-none !cursor-pointer opacity-0"
+        position={Position.Top}
+      />
+      <div className="flex h-full w-full flex-col items-center justify-center rounded-md border border-mineshaft bg-mineshaft-800 px-3 py-2 font-inter shadow-lg">
+        <div className="flex max-w-[14rem] flex-col items-center text-xs text-mineshaft-200">
+          <span className="capitalize">{subject.replace("-", " ")} Access</span>
+          <div className="max-w-[14rem] whitespace-nowrap text-xs text-mineshaft-300">
+            <p className="truncate capitalize">{environment}</p>
+          </div>
+        </div>
+      </div>
+      <Handle
+        type="source"
+        className="pointer-events-none !cursor-pointer opacity-0"
+        position={Position.Bottom}
+      />
+    </>
+  );
+};
@@ -0,0 +1,2 @@
+export * from "./FolderNode/FolderNode";
+export * from "./RoleNode";
@@ -0,0 +1,21 @@
+export enum PermissionAccess {
+  Full = "full",
+  Partial = "partial",
+  None = "None"
+}
+
+export enum PermissionNode {
+  Role = "role",
+  Folder = "folder",
+  Environment = "environment"
+}
+
+export enum PermissionEdge {
+  Base = "base"
+}
+
+export enum ViewMode {
+  Docked = "docked",
+  Modal = "modal",
+  Undocked = "undocked"
+}
@@ -0,0 +1,26 @@
+import { MarkerType } from "@xyflow/react";
+
+import { PermissionAccess, PermissionEdge } from "../types";
+
+export const createBaseEdge = ({
+  source,
+  target,
+  access
+}: {
+  source: string;
+  target: string;
+  access: PermissionAccess;
+}) => {
+  const color = access === PermissionAccess.None ? "#707174" : "#ccccce";
+  return {
+    id: `e-${source}-${target}`,
+    source,
+    target,
+    type: PermissionEdge.Base,
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color
+    },
+    style: { stroke: color }
+  };
+};
@@ -0,0 +1,180 @@
+import { MongoAbility, MongoQuery, subject as abilitySubject } from "@casl/ability";
+import picomatch from "picomatch";
+
+import {
+  ProjectPermissionActions,
+  ProjectPermissionDynamicSecretActions,
+  ProjectPermissionSet,
+  ProjectPermissionSub
+} from "@app/context/ProjectPermissionContext";
+import {
+  PermissionConditionOperators,
+  ProjectPermissionSecretActions
+} from "@app/context/ProjectPermissionContext/types";
+import { TSecretFolderWithPath } from "@app/hooks/api/secretFolders/types";
+import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
+
+import { PermissionAccess, PermissionNode } from "../types";
+import { TActionRuleMap } from "./getActionRuleMap";
+
+const ACTION_MAP: Record<string, string[] | undefined> = {
+  [ProjectPermissionSub.Secrets]: [
+    ProjectPermissionSecretActions.DescribeSecret,
+    ProjectPermissionSecretActions.ReadValue,
+    ProjectPermissionSecretActions.Create,
+    ProjectPermissionSecretActions.Edit,
+    ProjectPermissionSecretActions.Delete
+  ],
+  [ProjectPermissionSub.DynamicSecrets]: Object.values(ProjectPermissionDynamicSecretActions),
+  [ProjectPermissionSub.SecretFolders]: [
+    ProjectPermissionSecretActions.Create,
+    ProjectPermissionSecretActions.Edit,
+    ProjectPermissionSecretActions.Delete
+  ]
+};
+
+const evaluateCondition = (
+  value: string,
+  operator: PermissionConditionOperators,
+  comparison: string | string[]
+) => {
+  switch (operator) {
+    case PermissionConditionOperators.$EQ:
+      return value === comparison;
+    case PermissionConditionOperators.$NEQ:
+      return value !== comparison;
+    case PermissionConditionOperators.$GLOB:
+      return picomatch.isMatch(value, comparison);
+    case PermissionConditionOperators.$IN:
+      return (comparison as string[]).map((v: string) => v.trim()).includes(value);
+    default:
+      throw new Error(`Unhandled operator: ${operator}`);
+  }
+};
+
+export const createFolderNode = ({
+  folder,
+  permissions,
+  environment,
+  subject,
+  secretName,
+  actionRuleMap
+}: {
+  folder: TSecretFolderWithPath;
+  permissions: MongoAbility<ProjectPermissionSet, MongoQuery>;
+  environment: string;
+  subject: ProjectPermissionSub;
+  secretName: string;
+  actionRuleMap: TActionRuleMap;
+}) => {
+  const actions = Object.fromEntries(
+    Object.values(ACTION_MAP[subject] ?? Object.values(ProjectPermissionActions)).map((action) => {
+      let access: PermissionAccess;
+
+      // wrapped in try because while editing certain conditions, if their values are empty it throws an error
+      try {
+        let hasPermission: boolean;
+
+        const subjectFields = {
+          secretPath: folder.path,
+          environment,
+          secretName: secretName || "*",
+          secretTags: ["*"]
+        };
+
+        if (
+          subject === ProjectPermissionSub.Secrets &&
+          (action === ProjectPermissionSecretActions.ReadValue ||
+            action === ProjectPermissionSecretActions.DescribeSecret)
+        ) {
+          hasPermission = hasSecretReadValueOrDescribePermission(
+            permissions,
+            action,
+            subjectFields
+          );
+        } else {
+          hasPermission = permissions.can(
+            // @ts-expect-error we are not specifying which so can't resolve if valid
+            action,
+            abilitySubject(subject, subjectFields)
+          );
+        }
+
+        if (hasPermission) {
+          // we want to show yellow/conditional access if user hasn't specified secret name to fully resolve access
+          if (
+            !secretName &&
+            actionRuleMap.some((el) => {
+              // we only show conditional if secretName/secretTags are present - environment and path can be directly determined
+              if (!el[action]?.conditions?.secretName && !el[action]?.conditions?.secretTags)
+                return false;
+
+              // make sure condition applies to env
+              if (el[action]?.conditions?.environment) {
+                if (
+                  !Object.entries(el[action]?.conditions?.environment).every(([operator, value]) =>
+                    evaluateCondition(environment, operator as PermissionConditionOperators, value)
+                  )
+                ) {
+                  return false;
+                }
+              }
+
+              // and applies to path
+              if (el[action]?.conditions?.secretPath) {
+                if (
+                  !Object.entries(el[action]?.conditions?.secretPath).every(([operator, value]) =>
+                    evaluateCondition(folder.path, operator as PermissionConditionOperators, value)
+                  )
+                ) {
+                  return false;
+                }
+              }
+
+              return true;
+            })
+          ) {
+            access = PermissionAccess.Partial;
+          } else {
+            access = PermissionAccess.Full;
+          }
+        } else {
+          access = PermissionAccess.None;
+        }
+      } catch (e) {
+        console.error(e);
+        access = PermissionAccess.None;
+      }
+
+      return [action, access];
+    })
+  );
+
+  let height: number;
+
+  switch (subject) {
+    case ProjectPermissionSub.DynamicSecrets:
+      height = 130;
+      break;
+    case ProjectPermissionSub.Secrets:
+      height = 85;
+      break;
+    default:
+      height = 64;
+  }
+
+  return {
+    type: PermissionNode.Folder,
+    id: folder.id,
+    data: {
+      ...folder,
+      actions,
+      environment,
+      actionRuleMap,
+      subject
+    },
+    position: { x: 0, y: 0 },
+    width: 264,
+    height
+  };
+};
@@ -0,0 +1,19 @@
+import { PermissionNode } from "../types";
+
+export const createRoleNode = ({
+  subject,
+  environment
+}: {
+  subject: string;
+  environment: string;
+}) => ({
+  id: `role-${subject}-${environment}`,
+  position: { x: 0, y: 0 },
+  data: {
+    subject,
+    environment
+  },
+  type: PermissionNode.Role,
+  height: 48,
+  width: 264
+});
@@ -0,0 +1,3 @@
+import { camelCaseToSpaces } from "@app/lib/fn/string";
+
+export const formatActionName = (action: string) => camelCaseToSpaces(action.replaceAll("-", " "));
@@ -0,0 +1,27 @@
+import { MongoAbility, MongoQuery } from "@casl/ability";
+
+import { ProjectPermissionSet, ProjectPermissionSub } from "@app/context/ProjectPermissionContext";
+
+export type TActionRuleMap = ReturnType<typeof getSubjectActionRuleMap>;
+
+export const getSubjectActionRuleMap = (
+  subject: ProjectPermissionSub,
+  permissions: MongoAbility<ProjectPermissionSet, MongoQuery>
+) => {
+  const rules = permissions.rules.filter((rule) => {
+    const ruleSubject = typeof rule.subject === "string" ? rule.subject : rule.subject[0];
+
+    return ruleSubject === subject;
+  });
+
+  const actionRuleMap: Record<string, (typeof rules)[number]>[] = [];
+  rules.forEach((rule) => {
+    if (typeof rule.action === "string") {
+      actionRuleMap.push({ [rule.action]: rule });
+    } else {
+      actionRuleMap.push(Object.fromEntries(rule.action.map((action) => [action, rule])));
+    }
+  });
+
+  return actionRuleMap;
+};
@@ -0,0 +1,6 @@
+export * from "./createBaseEdge";
+export * from "./createFolderNode";
+export * from "./createRoleNode";
+export * from "./formatActionName";
+export * from "./getActionRuleMap";
+export * from "./positionElements";
@@ -0,0 +1,28 @@
+import Dagre from "@dagrejs/dagre";
+import { Edge, Node } from "@xyflow/react";
+
+export const positionElements = (nodes: Node[], edges: Edge[]) => {
+  const dagre = new Dagre.graphlib.Graph({ directed: true })
+    .setDefaultEdgeLabel(() => ({}))
+    .setGraph({ rankdir: "TB" });
+
+  edges.forEach((edge) => dagre.setEdge(edge.source, edge.target));
+  nodes.forEach((node) => dagre.setNode(node.id, node));
+
+  Dagre.layout(dagre, {});
+
+  return {
+    nodes: nodes.map((node) => {
+      const { x, y } = dagre.node(node.id);
+
+      return {
+        ...node,
+        position: {
+          x: x - (node.width ? node.width / 2 : 0),
+          y: y - (node.height ? node.height / 2 : 0)
+        }
+      };
+    }),
+    edges
+  };
+};
@@ -1,3 +1,4 @@
+export * from "./AccessTree";
 export { GlobPermissionInfo } from "./GlobPermissionInfo";
 export { OrgPermissionCan } from "./OrgPermissionCan";
 export { PermissionDeniedBanner } from "./PermissionDeniedBanner";
@@ -0,0 +1,236 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, FormControl, Input, TextArea } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useUpdateProject } from "@app/hooks/api";
+
+const baseFormSchema = z.object({
+  name: z.string().min(1, "Required").max(64, "Too long, maximum length is 64 characters"),
+  description: z
+    .string()
+    .trim()
+    .max(256, "Description too long, max length is 256 characters")
+    .optional()
+});
+
+const formSchemaWithSlug = baseFormSchema.extend({
+  slug: z
+    .string()
+    .min(1, "Required")
+    .max(64, "Too long, maximum length is 64 characters")
+    .regex(
+      /^[a-z0-9]+(?:[_-][a-z0-9]+)*$/,
+      "Project slug can only contain lowercase letters and numbers, with optional single hyphens (-) or underscores (_) between words. Cannot start or end with a hyphen or underscore."
+    )
+});
+
+type BaseFormData = z.infer<typeof baseFormSchema>;
+type FormDataWithSlug = z.infer<typeof formSchemaWithSlug>;
+
+type Props = {
+  showSlugField?: boolean;
+};
+
+export const ProjectOverviewChangeSection = ({ showSlugField = false }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const { mutateAsync, isPending } = useUpdateProject();
+  const { handleSubmit, control, reset, watch } = useForm<BaseFormData | FormDataWithSlug>({
+    resolver: zodResolver(showSlugField ? formSchemaWithSlug : baseFormSchema)
+  });
+
+  const currentSlug = showSlugField ? watch("slug") : currentWorkspace?.slug;
+
+  useEffect(() => {
+    if (currentWorkspace) {
+      reset({
+        name: currentWorkspace.name,
+        description: currentWorkspace.description ?? "",
+        ...(showSlugField && { slug: currentWorkspace.slug })
+      });
+    }
+  }, [currentWorkspace, showSlugField]);
+
+  const onFormSubmit = async (data: BaseFormData | FormDataWithSlug) => {
+    try {
+      if (!currentWorkspace?.id) return;
+
+      await mutateAsync({
+        projectID: currentWorkspace.id,
+        newProjectName: data.name,
+        newProjectDescription: data.description,
+        ...(showSlugField &&
+          "slug" in data && {
+            newSlug: data.slug !== currentWorkspace.slug ? data.slug : undefined
+          })
+      });
+
+      createNotification({
+        text: "Successfully updated project overview",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to update project overview",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="justify-betweens flex">
+        <h2 className="mb-8 flex-1 text-xl font-semibold text-mineshaft-100">Project Overview</h2>
+        <div className="space-x-2">
+          <Button
+            variant="outline_bg"
+            size="sm"
+            onClick={() => {
+              navigator.clipboard.writeText(currentSlug || "");
+              createNotification({
+                text: "Copied project slug to clipboard",
+                type: "success"
+              });
+            }}
+            title="Click to copy project slug"
+          >
+            Copy Project Slug
+          </Button>
+          <Button
+            variant="outline_bg"
+            size="sm"
+            onClick={() => {
+              navigator.clipboard.writeText(currentWorkspace?.id || "");
+              createNotification({
+                text: "Copied project ID to clipboard",
+                type: "success"
+              });
+            }}
+            title="Click to copy project ID"
+          >
+            Copy Project ID
+          </Button>
+        </div>
+      </div>
+      <div>
+        <form onSubmit={handleSubmit(onFormSubmit)} className="flex w-full flex-col gap-0">
+          <div className="flex w-full flex-row items-end gap-4">
+            <div className="w-full max-w-md">
+              <ProjectPermissionCan
+                I={ProjectPermissionActions.Edit}
+                a={ProjectPermissionSub.Project}
+              >
+                {(isAllowed) => (
+                  <Controller
+                    defaultValue=""
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                        label="Project name"
+                      >
+                        <Input
+                          placeholder="Project name"
+                          {...field}
+                          className="bg-mineshaft-800"
+                          isDisabled={!isAllowed}
+                        />
+                      </FormControl>
+                    )}
+                    control={control}
+                    name="name"
+                  />
+                )}
+              </ProjectPermissionCan>
+            </div>
+          </div>
+          {showSlugField && (
+            <div className="flex w-full flex-row items-end gap-4">
+              <div className="w-full max-w-md">
+                <ProjectPermissionCan
+                  I={ProjectPermissionActions.Edit}
+                  a={ProjectPermissionSub.Project}
+                >
+                  {(isAllowed) => (
+                    <Controller
+                      defaultValue=""
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          isError={Boolean(error)}
+                          errorText={error?.message}
+                          label="Project slug"
+                        >
+                          <Input
+                            placeholder="Project slug"
+                            {...field}
+                            className="bg-mineshaft-800"
+                            isDisabled={!isAllowed}
+                          />
+                        </FormControl>
+                      )}
+                      control={control}
+                      name="slug"
+                    />
+                  )}
+                </ProjectPermissionCan>
+              </div>
+            </div>
+          )}
+          <div className="flex w-full flex-row items-end gap-4">
+            <div className="w-full max-w-md">
+              <ProjectPermissionCan
+                I={ProjectPermissionActions.Edit}
+                a={ProjectPermissionSub.Project}
+              >
+                {(isAllowed) => (
+                  <Controller
+                    defaultValue=""
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                        label="Project description"
+                      >
+                        <TextArea
+                          placeholder="Project description"
+                          {...field}
+                          rows={3}
+                          className="thin-scrollbar max-w-md !resize-none bg-mineshaft-800"
+                          isDisabled={!isAllowed}
+                        />
+                      </FormControl>
+                    )}
+                    control={control}
+                    name="description"
+                  />
+                )}
+              </ProjectPermissionCan>
+            </div>
+          </div>
+          <div>
+            <ProjectPermissionCan
+              I={ProjectPermissionActions.Edit}
+              a={ProjectPermissionSub.Project}
+            >
+              {(isAllowed) => (
+                <Button
+                  colorSchema="secondary"
+                  type="submit"
+                  isLoading={isPending}
+                  isDisabled={isPending || !isAllowed}
+                >
+                  Save
+                </Button>
+              )}
+            </ProjectPermissionCan>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
@@ -14,7 +14,6 @@ import {
  AccordionItem,
  AccordionTrigger,
  Button,
-  Checkbox,
  FormControl,
  Input,
  Modal,
@@ -33,13 +32,7 @@ import {
  useUser
 } from "@app/context";
 import { getProjectHomePage } from "@app/helpers/project";
-import {
-  fetchOrgUsers,
-  useAddUserToWsNonE2EE,
-  useCreateWorkspace,
-  useGetExternalKmsList,
-  useGetUserWorkspaces
-} from "@app/hooks/api";
+import { useCreateWorkspace, useGetExternalKmsList, useGetUserWorkspaces } from "@app/hooks/api";
 import { INTERNAL_KMS_KEY_ID } from "@app/hooks/api/kms/types";
 import { InfisicalProjectTemplate, useListProjectTemplates } from "@app/hooks/api/projectTemplates";
 import { ProjectType } from "@app/hooks/api/workspace/types";
@@ -51,7 +44,6 @@ const formSchema = z.object({
    .trim()
    .max(256, "Description too long, max length is 256 characters")
    .optional(),
-  addMembers: z.boolean(),
  kmsKeyId: z.string(),
  template: z.string()
 });
@@ -73,7 +65,6 @@ const NewProjectForm = ({ onOpenChange, projectType }: NewProjectFormProps) => {
  const { user } = useUser();
  const createWs = useCreateWorkspace();
  const { refetch: refetchWorkspaces } = useGetUserWorkspaces();
-  const addUsersToProject = useAddUserToWsNonE2EE();
  const { subscription } = useSubscription();

  const canReadProjectTemplates = permission.can(
@@ -111,7 +102,6 @@ const NewProjectForm = ({ onOpenChange, projectType }: NewProjectFormProps) => {
  const onCreateProject = async ({
    name,
    description,
-    addMembers,
    kmsKeyId,
    template
  }: TAddProjectFormData) => {
@@ -128,21 +118,6 @@ const NewProjectForm = ({ onOpenChange, projectType }: NewProjectFormProps) => {
        template,
        type: projectType
      });
-      const { id: newProjectId } = project;
-
-      if (addMembers) {
-        const orgUsers = await fetchOrgUsers(currentOrg.id);
-        await addUsersToProject.mutateAsync({
-          usernames: orgUsers
-            .filter(
-              (member) => member.user.username !== user.username && member.status === "accepted"
-            )
-            .map((member) => member.user.username),
-          projectId: newProjectId,
-          orgId: currentOrg.id
-        });
-      }
-
      await refetchWorkspaces();

      createNotification({ text: "Project created", type: "success" });
@@ -246,31 +221,7 @@ const NewProjectForm = ({ onOpenChange, projectType }: NewProjectFormProps) => {
          )}
        />
      </div>
-      <div className="mt-4 pl-1">
-        <Controller
-          control={control}
-          name="addMembers"
-          defaultValue={false}
-          render={({ field: { onBlur, value, onChange } }) => (
-            <OrgPermissionCan I={OrgPermissionActions.Read} a={OrgPermissionSubjects.Member}>
-              {(isAllowed) => (
-                <div>
-                  <Checkbox
-                    id="add-project-layout"
-                    isChecked={value}
-                    onCheckedChange={onChange}
-                    isDisabled={!isAllowed}
-                    onBlur={onBlur}
-                  >
-                    Add all members of my organization to this project
-                  </Checkbox>
-                </div>
-              )}
-            </OrgPermissionCan>
-          )}
-        />
-      </div>
-      <div className="mt-14 flex">
+      <div className="mt-4 flex">
        <Accordion type="single" collapsible className="w-full">
          <AccordionItem value="advance-settings" className="data-[state=open]:border-none">
            <AccordionTrigger className="h-fit flex-none pl-1 text-sm">
@@ -40,6 +40,8 @@ export const DatabricksSyncFields = () => {
            isError={Boolean(error)}
            errorText={error?.message}
            label="Secret Scope"
+            tooltipClassName="max-w-md"
+            tooltipText="Infisical recommends creating a designated Databricks secret scope for your sync to prevent removal of secrets not managed by Infisical."
            helperText={
              <Tooltip
                className="max-w-md"
@@ -1,13 +1,21 @@
-import { useState } from "react";
-import { faChevronRight, faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+/* eslint-disable no-nested-ternary */
+import { useEffect, useState } from "react";
+import {
+  faChevronRight,
+  faExclamationTriangle,
+  faEye,
+  faEyeSlash
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Collapsible from "@radix-ui/react-collapsible";
+import { AxiosError } from "axios";
 import { twMerge } from "tailwind-merge";

+import { createNotification } from "@app/components/notifications";
 import { FormControl, FormLabel, SecretInput, Spinner, Tooltip } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { useGetSecretReferenceTree } from "@app/hooks/api";
-import { TSecretReferenceTraceNode } from "@app/hooks/api/types";
+import { ApiErrorTypes, TApiErrors, TSecretReferenceTraceNode } from "@app/hooks/api/types";

 import style from "./SecretReferenceDetails.module.css";

@@ -84,7 +92,7 @@ export const SecretReferenceTree = ({ secretPath, environment, secretKey }: Prop
  const { currentWorkspace } = useWorkspace();
  const projectId = currentWorkspace?.id || "";

-  const { data, isPending } = useGetSecretReferenceTree({
+  const { data, isPending, isError, error } = useGetSecretReferenceTree({
    secretPath,
    environmentSlug: environment,
    projectId,
@@ -94,6 +102,26 @@ export const SecretReferenceTree = ({ secretPath, environment, secretKey }: Prop
  const tree = data?.tree;
  const secretValue = data?.value;

+  useEffect(() => {
+    if (error instanceof AxiosError) {
+      const err = error?.response?.data as TApiErrors;
+
+      if (err?.error === ApiErrorTypes.CustomForbiddenError) {
+        createNotification({
+          title: "You don't have permission to view reference tree",
+          text: "You don't have permission to view one or more of the referenced secrets.",
+          type: "error"
+        });
+        return;
+      }
+      createNotification({
+        title: "Error fetching secret reference tree",
+        text: "Please try again later.",
+        type: "error"
+      });
+    }
+  }, [error]);
+
  if (isPending) {
    return (
      <div className="flex items-center justify-center py-4">
@@ -114,11 +142,16 @@ export const SecretReferenceTree = ({ secretPath, environment, secretKey }: Prop
      </FormControl>
      <FormLabel className="mb-2" label="Reference Tree" />
      <div className="thin-scrollbar relative max-h-96 overflow-auto rounded-md border border-mineshaft-600 bg-bunker-700 py-6 text-sm text-mineshaft-200">
-        {tree && (
+        {isError ? (
+          <div className="flex items-center justify-center py-4">
+            <FontAwesomeIcon icon={faExclamationTriangle} className="mr-2 text-red-500" />
+            <p className="text-red-500">Error fetching secret reference tree</p>
+          </div>
+        ) : tree ? (
          <ul className={style.tree}>
            <SecretReferenceNode node={tree} isRoot secretKey={secretKey} />
          </ul>
-        )}
+        ) : null}
      </div>
      <div className="mt-2 text-sm text-mineshaft-400">
        Click a secret key to view its sub-references.
@@ -34,12 +34,12 @@ const passwordCheck = async ({
  const tests = [
    {
      name: "tooShort",
-      validator: (pwd: string) => pwd.length >= 14,
+      validator: (pwd: string) => pwd?.length >= 14,
      setError: setPasswordErrorTooShort
    },
    {
      name: "tooLong",
-      validator: (pwd: string) => pwd.length < 101,
+      validator: (pwd: string) => pwd?.length < 101,
      setError: setPasswordErrorTooLong
    },
    {
@@ -0,0 +1,22 @@
+import { twMerge } from "tailwind-merge";
+
+import { Tooltip } from "../Tooltip/Tooltip";
+
+interface IProps {
+  className?: string;
+  tooltipText?: string;
+}
+
+export const Blur = ({ className, tooltipText }: IProps) => {
+  return (
+    <Tooltip content={tooltipText} isDisabled={!tooltipText}>
+      <div
+        className={twMerge("flex w-80 flex-grow items-center py-1 pl-4 pr-2", className)}
+        tabIndex={0}
+        role="button"
+      >
+        <span className="blur">********</span>
+      </div>
+    </Tooltip>
+  );
+};
@@ -0,0 +1 @@
+export { Blur } from "./Blur";
@@ -120,6 +120,7 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(

    const isPopupOpen = Boolean(suggestionSource.isOpen) && isFocused;
    const { data: secrets } = useGetProjectSecrets({
+      viewSecretValue: false,
      environment: suggestionSource.environment || "",
      secretPath: suggestionSource.secretPath || "",
      workspaceId,
@@ -50,7 +50,9 @@ export const PopoverContent = ({
          </IconButton>
        </PopoverPrimitive.Close>
      )}
-      <PopoverPrimitive.Arrow className={twMerge("fill-inherit", arrowClassName)} />
+      <div className="pointer-events-none">
+        <PopoverPrimitive.Arrow className={twMerge("fill-inherit", arrowClassName)} />
+      </div>
    </PopoverPrimitive.Content>
  </PopoverPrimitive.Portal>
 );
@@ -59,7 +59,9 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
          >
            <div className="flex items-center space-x-2 overflow-hidden text-ellipsis whitespace-nowrap">
              {props.icon && <FontAwesomeIcon icon={props.icon} />}
-              <SelectPrimitive.Value placeholder={placeholder} />
+              <div className="flex-1 truncate">
+                <SelectPrimitive.Value placeholder={placeholder} />
+              </div>
            </div>

            <SelectPrimitive.Icon className="ml-3">
@@ -122,7 +124,7 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
      <SelectPrimitive.Item
        {...props}
        className={twMerge(
-          "relative mb-0.5 flex cursor-pointer select-none items-center overflow-hidden text-ellipsis whitespace-nowrap rounded-md py-2 pl-10 pr-4 text-sm outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-700/80",
+          "relative mb-0.5 cursor-pointer select-none items-center overflow-hidden truncate rounded-md py-2 pl-10 pr-4 text-sm outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-700/80",
          isSelected && "bg-primary",
          isDisabled && "cursor-not-allowed text-gray-600 opacity-80 hover:!bg-transparent",
          className
				`@@ -0,0 +1 @@`
				`export * from "./FolderNodeTooltipContent";`