feat: review nits and changes in loading

backend/src/lib/api-docs/constants.ts

@@ -671,10 +671,10 @@ export const RAW_SECRETS = {
     workspaceId: "The ID of the project where the secret is located."
   },
   GET_REFERENCE_TREE: {
-    secretName: "The name of the secret to get.",
-    workspaceId: "The ID of the project to get the secret from.",
-    environment: "The slug of the environment to get the secret from.",
-    secretPath: "The path of the secret to get."
+    secretName: "The name of the secret to get the reference tree for.'.",
+    workspaceId: "The ID of the project where the secret is located.",
+    environment: "The slug of the environment where the the secret is located.",
+    secretPath: "The folder path where the secret is located."
   }
 } as const;
 

backend/src/services/secret-v2-bridge/secret-v2-bridge-fns.ts

@@ -446,10 +446,10 @@ export const expandSecretReferencesFactory = ({
           // eslint-disable-next-line no-continue
           if (!entities.length) continue;
 
-          let referredSecretPath = "";
-          let referredSecretKey = "";
-          let referredSecretEnvironmentSlug = "";
-          let referredSecretValue = "";
+          let referrencedSecretPath = "";
+          let referencedSecretKey = "";
+          let referencedSecretEnvironmentSlug = "";
+          let referencedSecretValue = "";
 
           if (entities.length === 1) {
             const [secretKey] = entities;
@@ -464,10 +464,10 @@ export const expandSecretReferencesFactory = ({
             const cacheKey = getCacheUniqueKey(environment, secretPath);
             secretCache[cacheKey][secretKey] = referredValue;
 
-            referredSecretValue = referredValue.value;
-            referredSecretKey = secretKey;
-            referredSecretPath = secretPath;
-            referredSecretEnvironmentSlug = environment;
+            referencedSecretValue = referredValue.value;
+            referencedSecretKey = secretKey;
+            referrencedSecretPath = secretPath;
+            referencedSecretEnvironmentSlug = environment;
           } else {
             const secretReferenceEnvironment = entities[0];
             const secretReferencePath = path.join("/", ...entities.slice(1, entities.length - 1));
@@ -483,23 +483,23 @@ export const expandSecretReferencesFactory = ({
             const cacheKey = getCacheUniqueKey(secretReferenceEnvironment, secretReferencePath);
             secretCache[cacheKey][secretReferenceKey] = referedValue;
 
-            referredSecretValue = referedValue.value;
-            referredSecretKey = secretReferenceKey;
-            referredSecretPath = secretReferencePath;
-            referredSecretEnvironmentSlug = secretReferenceEnvironment;
+            referencedSecretValue = referedValue.value;
+            referencedSecretKey = secretReferenceKey;
+            referrencedSecretPath = secretReferencePath;
+            referencedSecretEnvironmentSlug = secretReferenceEnvironment;
           }
 
           const node = {
-            value: referredSecretValue,
-            secretPath: referredSecretPath,
-            environment: referredSecretEnvironmentSlug,
+            value: referencedSecretValue,
+            secretPath: referrencedSecretPath,
+            environment: referencedSecretEnvironmentSlug,
             depth: depth + 1,
             trace
           };
 
-          const shouldExpandMore = INTERPOLATION_SYNTAX_REG.test(referredSecretValue);
+          const shouldExpandMore = INTERPOLATION_SYNTAX_REG.test(referencedSecretValue);
           if (dto.shouldStackTrace) {
-            const stackTraceNode = { ...node, children: [], key: referredSecretKey, trace: null };
+            const stackTraceNode = { ...node, children: [], key: referencedSecretKey, trace: null };
             trace?.children.push(stackTraceNode);
             // if stack trace this would be child node
             if (shouldExpandMore) {
@@ -510,8 +510,8 @@ export const expandSecretReferencesFactory = ({
             stack.push(node);
           }
 
-          if (referredSecretValue) {
-            expandedValue = expandedValue.replaceAll(interpolationSyntax, referredSecretValue);
+          if (referencedSecretValue) {
+            expandedValue = expandedValue.replaceAll(interpolationSyntax, referencedSecretValue);
           }
         }
       }

backend/src/services/secret/secret-service.ts

@@ -1105,7 +1105,7 @@ export const secretServiceFactory = ({
 
     if (!shouldUseSecretV2Bridge)
       throw new BadRequestError({
-        message: "Project version doesn't not support secret reference tree",
+        message: "Project version does not support secret reference tree",
         name: "SecretReferenceTreeNotSupported"
       });
 

frontend/src/views/SecretMainPage/components/SecretListView/SecretDetailSidebar.tsx

@@ -7,7 +7,7 @@ import {
   faCircleDot,
   faClock,
   faPlus,
-  faRoad,
+  faProjectDiagram,
   faShare,
   faTag
 } from "@fortawesome/free-solid-svg-icons";
@@ -464,15 +464,15 @@ export const SecretDetailSidebar = ({
                         <Button
                           variant="outline_bg"
                           className="w-full px-2 py-1"
-                          leftIcon={<FontAwesomeIcon icon={faRoad} />}
+                          leftIcon={<FontAwesomeIcon icon={faProjectDiagram} />}
                           isDisabled={!isAllowed}
                         >
-                          Reference tree
+                          Reference Tree
                         </Button>
                       </ModalTrigger>
                       <ModalContent
                         title="Secret Reference Tree"
-                        subTitle="Shows the actual value and reference tree"
+                        subTitle="Visual breakdown of secrets referenced by this secret."
                       >
                         <SecretReferenceTree
                           secretPath={secretPath}

frontend/src/views/SecretMainPage/components/SecretListView/SecretReferenceDetails.tsx

@@ -1,6 +1,6 @@
 import { twMerge } from "tailwind-merge";
 
-import { FormControl, SecretInput, Tag, Tooltip } from "@app/components/v2";
+import { FormControl, SecretInput, Spinner, Tag, Tooltip } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { useGetSecretReferenceTree } from "@app/hooks/api";
 import { SecretV3RawSanitized, TSecretReferenceTraceNode } from "@app/hooks/api/types";
@@ -39,7 +39,7 @@ export const SecretReferenceNode = ({
                 !node.value && "border-red-400 text-red-400"
               )}
             >
-              {node.value ? "value" : "empty"}
+              {node.value ? "Reveal Value" : "Empty"}
             </span>
           </Tooltip>
         </div>
@@ -96,7 +96,7 @@ export const SecretReferenceTree = ({ secretPath, environment, secret }: Props)
   const { currentWorkspace } = useWorkspace();
   const projectId = currentWorkspace?.id || "";
 
-  const { data } = useGetSecretReferenceTree({
+  const { data, isLoading } = useGetSecretReferenceTree({
     secretPath,
     environmentSlug: environment,
     projectId,
@@ -106,6 +106,14 @@ export const SecretReferenceTree = ({ secretPath, environment, secret }: Props)
   const tree = data?.tree;
   const secretValue = data?.value;
 
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-4">
+        <Spinner size="xs" />
+      </div>
+    );
+  }
+
   return (
     <div>
       <FormControl label="Expanded value">
@@ -116,7 +124,7 @@ export const SecretReferenceTree = ({ secretPath, environment, secret }: Props)
           containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-bunker-800  px-2 py-1.5"
         />
       </FormControl>
-      <div className="max-h-80 overflow-auto">
+      <div className="max-h-96 overflow-auto">
         {tree && <SecretReferenceNode node={tree} isRoot />}
       </div>
     </div>