minor improvements

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

@@ -541,8 +541,8 @@ export const expandSecretReferencesFactory = ({
     secretPath: string;
     environment: string;
   }) => {
-    const { stackTrace } = await recursivelyExpandSecret({ ...inputSecret, shouldStackTrace: true });
-    return stackTrace;
+    const { stackTrace, expandedValue } = await recursivelyExpandSecret({ ...inputSecret, shouldStackTrace: true });
+    return { stackTrace, expandedValue };
   };
 
   return { expandSecretReferences: expandSecret, getExpandedSecretStackTrace };

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

@@ -1976,7 +1976,7 @@ export const secretV2BridgeServiceFactory = ({
       ? secretManagerDecryptor({ cipherTextBlob: secret.encryptedValue }).toString()
       : "";
 
-    const { getExpandedSecretStackTrace, expandSecretReferences } = expandSecretReferencesFactory({
+    const { getExpandedSecretStackTrace } = expandSecretReferencesFactory({
       projectId,
       folderDAL,
       secretDAL,
@@ -1988,17 +1988,13 @@ export const secretV2BridgeServiceFactory = ({
         )
     });
 
-    const tree = await getExpandedSecretStackTrace({
+    const { expandedValue, stackTrace } = await getExpandedSecretStackTrace({
       environment,
       secretPath,
       value: secretValue
     });
-    const value = await expandSecretReferences({
-      environment,
-      secretPath,
-      value: secretValue
-    });
-    return { tree, value };
+
+    return { tree: stackTrace, value: expandedValue };
   };
 
   return {

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

@@ -65,6 +65,8 @@ type Props = {
   handleSecretShare: (value: string) => void;
 };
 
+const INTERPOLATION_SYNTAX_REG = /\${([^}]+)}/g;
+
 export const SecretDetailSidebar = ({
   isOpen,
   onToggle,
@@ -174,6 +176,8 @@ export const SecretDetailSidebar = ({
   const secretReminderRepeatDays = watch("reminderRepeatDays");
   const secretReminderNote = watch("reminderNote");
 
+  const hasReferences = secret?.value?.match(INTERPOLATION_SYNTAX_REG);
+
   return (
     <>
       <CreateReminderForm
@@ -460,16 +464,21 @@ export const SecretDetailSidebar = ({
                 >
                   {(isAllowed) => (
                     <Modal>
-                      <ModalTrigger asChild>
-                        <Button
-                          variant="outline_bg"
-                          className="w-full px-2 py-1"
-                          leftIcon={<FontAwesomeIcon icon={faProjectDiagram} />}
-                          isDisabled={!isAllowed}
-                        >
-                          Reference Tree
-                        </Button>
-                      </ModalTrigger>
+                      <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."

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

@@ -29,10 +29,10 @@ export const SecretReferenceNode = ({
         />
       </FormControl>
     ) : (
-      <div className="py-2 text-sm">
+      <div className="bg-bunker-700 py-2 text-sm">
         <div>
           {node.key}
-          <Tooltip content={node.value}>
+          <Tooltip className="break-words" content={node.value}>
             <span
               className={twMerge(
                 "ml-2 rounded border border-gray-400 px-1 text-xs text-gray-400",
@@ -79,11 +79,11 @@ export const SecretReferenceNode = ({
             </div>
           </div>
         </div>
-        <div className="w-full border-b border-gray-800 py-1" />
+        <div className="w-full border-b border-mineshaft-500 py-1" />
       </div>
     )}
     {node.children.length > 0 && (
-      <div className="border-l border-gray-600 pl-6 transition-all hover:border-primary-600">
+      <div className="border-l border-gray-600 bg-bunker-700 pl-6 transition-all hover:border-gray-400">
         {node.children.map((el, index) => (
           <SecretReferenceNode node={el} key={`node-${node.key}-${index + 1}`} />
         ))}
@@ -124,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-96 overflow-auto">
+      <div className="max-h-96 overflow-auto rounded">
         {tree && <SecretReferenceNode node={tree} isRoot />}
       </div>
     </div>