feat: added reference tree to overview and secret main page, changed …

…to better graph structure
Infisical · Oct 22, 2024 · 4c07716 · 4c07716
1 parent cd67010
commit 4c07716
Show file tree

Hide file tree

Showing 9 changed files with 639 additions and 527 deletions.
diff --git a/backend/src/services/secret-v2-bridge/secret-v2-bridge-fns.ts b/backend/src/services/secret-v2-bridge/secret-v2-bridge-fns.ts
@@ -11,6 +11,8 @@ import { TSecretV2BridgeDALFactory } from "./secret-v2-bridge-dal";
 import { TFnSecretBulkDelete, TFnSecretBulkInsert, TFnSecretBulkUpdate } from "./secret-v2-bridge-types";
 
 const INTERPOLATION_SYNTAX_REG = /\${([^}]+)}/g;
+// akhilmhdh: JS regex with global save state in .test
+const INTERPOLATION_SYNTAX_REG_NON_GLOBAL = /\${([^}]+)}/;
 
 export const shouldUseSecretV2Bridge = (version: number) => version === 3;
 
@@ -502,7 +504,7 @@ export const expandSecretReferencesFactory = ({
             trace
           };
 
-          const shouldExpandMore = INTERPOLATION_SYNTAX_REG.test(referencedSecretValue);
+          const shouldExpandMore = INTERPOLATION_SYNTAX_REG_NON_GLOBAL.test(referencedSecretValue);
           if (dto.shouldStackTrace) {
             const stackTraceNode = { ...node, children: [], key: referencedSecretKey, trace: null };
             trace?.children.push(stackTraceNode);

diff --git a/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetailSidebar.tsx b/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetailSidebar.tsx
@@ -7,7 +7,6 @@ import {
   faCircleDot,
   faClock,
   faPlus,
-  faProjectDiagram,
   faShare,
   faTag
 } from "@fortawesome/free-solid-svg-icons";
@@ -29,9 +28,6 @@ import {
   FormControl,
   IconButton,
   Input,
-  Modal,
-  ModalContent,
-  ModalTrigger,
   Switch,
   Tag,
   TextArea,
@@ -45,7 +41,6 @@ import { SecretV3RawSanitized, WsTag } from "@app/hooks/api/types";
 
 import { CreateReminderForm } from "./CreateReminderForm";
 import { formSchema, SecretActionType, TFormSchema } from "./SecretListView.utils";
-import { SecretReferenceTree } from "./SecretReferenceDetails";
 
 type Props = {
   isOpen?: boolean;
@@ -65,8 +60,6 @@ type Props = {
   handleSecretShare: (value: string) => void;
 };
 
-const INTERPOLATION_SYNTAX_REG = /\${([^}]+)}/g;
-
 export const SecretDetailSidebar = ({
   isOpen,
   onToggle,
@@ -161,8 +154,6 @@ export const SecretDetailSidebar = ({
   const secretReminderRepeatDays = watch("reminderRepeatDays");
   const secretReminderNote = watch("reminderNote");
 
-  const hasReferences = secret?.value?.match(INTERPOLATION_SYNTAX_REG);
-
   return (
     <>
       <CreateReminderForm
@@ -372,7 +363,7 @@ export const SecretDetailSidebar = ({
                 ) : (
                   <div className="mt-2 ml-1 flex items-center space-x-2">
                     <Button
-                      className="px-2 py-1"
+                      className="w-full px-2 py-1"
                       variant="outline_bg"
                       leftIcon={<FontAwesomeIcon icon={faClock} />}
                       onClick={() => setCreateReminderFormOpen.on()}
@@ -422,40 +413,6 @@ export const SecretDetailSidebar = ({
                 />
               </div>
               <div className="ml-1 flex items-center space-x-4">
-                <ProjectPermissionCan
-                  I={ProjectPermissionActions.Edit}
-                  a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
-                >
-                  {(isAllowed) => (
-                    <Modal>
-                      <Tooltip
-                        className="text-center"
-                        content={hasReferences ? "" : "Secret does not contain references"}
-                      >
-                        <ModalTrigger asChild>
-                          <Button
-                            variant="outline_bg"
-                            className="w-full px-2 py-1"
-                            leftIcon={<FontAwesomeIcon icon={faProjectDiagram} />}
-                            isDisabled={!isAllowed || !hasReferences}
-                          >
-                            Reference Tree
-                          </Button>
-                        </ModalTrigger>
-                      </Tooltip>
-                      <ModalContent
-                        title="Secret Reference Tree"
-                        subTitle="Visual breakdown of secrets referenced by this secret."
-                      >
-                        <SecretReferenceTree
-                          secretPath={secretPath}
-                          environment={environment}
-                          secret={secret}
-                        />
-                      </ModalContent>
-                    </Modal>
-                  )}
-                </ProjectPermissionCan>
                 <Button
                   className="w-full px-2 py-1"
                   variant="outline_bg"