Refactor secret permission validation in InfisicalSecretInput and improve tooltip styling in CreateSecretForm components

frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx

@@ -389,30 +389,26 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
 
         const secretPath = segment === environmentSlug ? "/" : folderPath;
 
-        const canReadSecretValue = hasSecretReadValueOrDescribePermission(
+        // Only validate secret permission, users can always view environments and folders
-          permission,
+        if (segment === secretName) {
-          ProjectPermissionSecretActions.ReadValue,
+          const canReadSecretValue = hasSecretReadValueOrDescribePermission(
-          {
+            permission,
-            environment: environmentSlug,
+            ProjectPermissionSecretActions.ReadValue,
-            secretPath,
+            {
-            secretName: secretName ?? "*",
+              environment: environmentSlug,
-            secretTags: ["*"]
+              secretPath,
+              secretName: secretName ?? "*",
+              secretTags: ["*"]
+            }
+          );
+
+          if (!canReadSecretValue) {
+            createNotification({
+              text: "You do not have permission to access this secret",
+              type: "error"
+            });
+            return;
           }
-        );
-
-        let resourceName = "secret";
-        if (segment === environmentSlug) {
-          resourceName = "environment";
-        } else if (segment !== secretName && folderPath.includes(segment)) {
-          resourceName = "folder";
-        }
-
-        if (!canReadSecretValue) {
-          createNotification({
-            text: `You do not have permission to access this ${resourceName}`,
-            type: "error"
-          });
-          return;
         }
 
         navigate({

frontend/src/pages/secret-manager/OverviewPage/components/CreateSecretForm/CreateSecretForm.tsx

@@ -252,15 +252,15 @@ export const CreateSecretForm = ({ secretPath = "/", onClose }: Props) => {
             tooltipText={
               <div>
                 You can add references to other secrets using the format{" "}
-                <code>
+                <code className="rounded-sm bg-mineshaft-600 px-1 py-0.5">
                   &#36;{"{"}secret_name{"}"}
                 </code>
                 <br />
                 <br />
                 You can go to the referenced secret by holding the{" "}
-                <code className="rounded-sm bg-mineshaft-600 p-0.5">Cmd</code> (Mac) or{" "}
+                <code className="rounded-sm bg-mineshaft-600 px-1 py-0.5">Cmd</code> (Mac) or{" "}
-                <code className="rounded-sm bg-mineshaft-600 p-0.5">Ctrl</code> (Windows/Linux) key
+                <code className="rounded-sm bg-mineshaft-600 px-1 py-0.5">Ctrl</code>{" "}
-                and clicking on the secret name.
+                (Windows/Linux) key and clicking on the secret name.
               </div>
             }
             tooltipClassName="max-w-md"

frontend/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx

@@ -219,17 +219,19 @@ const Page = () => {
     ProjectPermissionSub.Commits
   );
 
+  const defaultIncludeFilters = {
+    [RowType.Folder]: routerQueryParams.filterBy?.includes(RowType.Folder) || false,
+    [RowType.Import]: routerQueryParams.filterBy?.includes(RowType.Import) || false,
+    [RowType.DynamicSecret]: routerQueryParams.filterBy?.includes(RowType.DynamicSecret) || false,
+    [RowType.Secret]: routerQueryParams.filterBy?.includes(RowType.Secret) || false,
+    [RowType.SecretRotation]: routerQueryParams.filterBy?.includes(RowType.SecretRotation) || false
+  };
+
   const defaultFilterState = {
     tags: {},
     searchFilter: (routerQueryParams.search as string) || "",
     // these should always be on by default for the UI, they will be disabled for the query below based off permissions
-    include: {
+    include: defaultIncludeFilters
-      [RowType.Folder]: false,
-      [RowType.Import]: false,
-      [RowType.DynamicSecret]: false,
-      [RowType.Secret]: false,
-      [RowType.SecretRotation]: false
-    }
   };
 
   const [filter, setFilter] = useState<Filter>(defaultFilterState);
@@ -529,6 +531,19 @@ const Page = () => {
     [navigate]
   );
 
+  const handleClearFilters = useCallback(() => {
+    setFilter(defaultFilterState);
+    setDebouncedSearchFilter("");
+    navigate({
+      search: (prev) => ({
+        ...prev,
+        search: "",
+        tags: "",
+        filterBy: ""
+      })
+    });
+  }, [navigate]);
+
   const handleSearchChange = useCallback(
     (searchFilter: string) => {
       setFilter((state) => ({ ...state, searchFilter }));
@@ -882,19 +897,7 @@ const Page = () => {
             isPITEnabled={isPITEnabled}
             hasPathPolicies={hasPathPolicies}
             onRequestAccess={(params) => handlePopUpOpen("requestAccess", params)}
-            onClearFilters={() =>
+            onClearFilters={handleClearFilters}
-              setFilter((prev) => ({
-                ...prev,
-                tags: {},
-                include: {
-                  secret: false,
-                  import: false,
-                  dynamic: false,
-                  rotation: false,
-                  folder: false
-                }
-              }))
-            }
           />
           <div
             ref={tableRef}

frontend/src/pages/secret-manager/SecretDashboardPage/components/CreateSecretForm/CreateSecretForm.tsx

@@ -200,15 +200,15 @@ export const CreateSecretForm = ({
             tooltipText={
               <div>
                 You can add references to other secrets using the format{" "}
-                <code>
+                <code className="rounded-sm bg-mineshaft-600 px-1 py-0.5">
                   &#36;{"{"}secret_name{"}"}
                 </code>
                 <br />
                 <br />
                 You can go to the referenced secret by holding the{" "}
-                <code className="rounded-sm bg-mineshaft-600 p-0.5">Cmd</code> (Mac) or{" "}
+                <code className="rounded-sm bg-mineshaft-600 px-1 py-0.5">Cmd</code> (Mac) or{" "}
-                <code className="rounded-sm bg-mineshaft-600 p-0.5">Ctrl</code> (Windows/Linux) key
+                <code className="rounded-sm bg-mineshaft-600 px-1 py-0.5">Ctrl</code>{" "}
-                and clicking on the secret name.
+                (Windows/Linux) key and clicking on the secret name.
               </div>
             }
             tooltipClassName="max-w-md"