feat(secret-approval): added auto naming policy and minor ux enhancements

frontend/src/components/navigation/NavHeader.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { faAngleRight, faShield } from "@fortawesome/free-solid-svg-icons";
+import { faAngleRight, faLock } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useOrganization, useWorkspace } from "@app/context";
@@ -17,6 +17,7 @@ type Props = {
   secretPath?: string;
   isFolderMode?: boolean;
   isProtectedBranch?: boolean;
+  protectionPolicyName?: string;
 };
 
 // TODO: make links clickable and clean up
@@ -44,7 +45,8 @@ export default function NavHeader({
   onEnvChange,
   isFolderMode,
   secretPath = "/",
-  isProtectedBranch = false
+  isProtectedBranch = false,
+  protectionPolicyName
 }: Props): JSX.Element {
   const { currentWorkspace } = useWorkspace();
   const { currentOrg } = useOrganization();
@@ -153,7 +155,11 @@ export default function NavHeader({
             </div>
           );
         })}
-      {isProtectedBranch && <FontAwesomeIcon icon={faShield} className="text-primary" />}
+      {isProtectedBranch && (
+        <Tooltip content={`Protected by policy ${protectionPolicyName}`}>
+          <FontAwesomeIcon icon={faLock} className="text-primary ml-2" />
+        </Tooltip>
+      )}
     </div>
   );
 }