chore: requested changes

frontend/src/hooks/api/dashboard/queries.tsx

@@ -68,7 +68,11 @@ export const dashboardKeys = {
     environment,
     filterByAction
   }: TGetAccessibleSecretsDTO) =>
-    [...dashboardKeys.all(), { projectId, secretPath, environment, filterByAction }] as const
+    [
+      ...dashboardKeys.all(),
+      "accessible-secrets",
+      { projectId, secretPath, environment, filterByAction }
+    ] as const
 };
 
 export const fetchProjectSecretsOverview = async ({

frontend/src/hooks/api/reactQuery.tsx

@@ -10,18 +10,14 @@ import {
   formatedConditionsOperatorNames,
   PermissionConditionOperators
 } from "@app/context/ProjectPermissionContext/types";
+import { camelCaseToSpaces } from "@app/lib/fn/string";
 
 import { ApiErrorTypes, TApiErrors } from "./types";
-
 // this is saved in react-query cache
 export const SIGNUP_TEMP_TOKEN_CACHE_KEY = ["infisical__signup-temp-token"];
 export const MFA_TEMP_TOKEN_CACHE_KEY = ["infisical__mfa-temp-token"];
 export const AUTH_TOKEN_CACHE_KEY = ["infisical__auth-token"];
 
-const camelCaseToSpaces = (input: string) => {
-  return input.replace(/([a-z])([A-Z])/g, "$1 $2");
-};
-
 export const queryClient = new QueryClient({
   mutationCache: new MutationCache({
     onError: (error) => {

frontend/src/lib/fn/string.ts

@@ -7,3 +7,7 @@ export const formatReservedPaths = (secretPath: string) => {
   }
   return secretPath;
 };
+
+export const camelCaseToSpaces = (input: string) => {
+  return input.replace(/([a-z])([A-Z])/g, "$1 $2");
+};

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx

@@ -61,6 +61,7 @@ import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
 
 import { CreateReminderForm } from "./CreateReminderForm";
 import { formSchema, SecretActionType, TFormSchema } from "./SecretListView.utils";
+import { camelCaseToSpaces } from "@app/lib/fn/string";
 
 type Props = {
   isOpen?: boolean;
@@ -729,8 +730,8 @@ export const SecretDetailSidebar = ({
                 <div className="thin-scrollbar flex h-48 flex-col space-y-2 overflow-y-auto overflow-x-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 p-4 dark:[color-scheme:dark]">
                   {secretVersion?.map(
                     ({ createdAt, secretValue, secretValueHidden, version, id, actor }) => (
-                      <div className="flex flex-row">
+                      <div className="flex flex-row" key={id}>
-                        <div key={id} className="flex w-full flex-col space-y-1">
+                        <div className="flex w-full flex-col space-y-1">
                           <div className="flex items-center">
                             <div className="w-10">
                               <div className="w-fit rounded-md border border-mineshaft-600 bg-mineshaft-700 px-1 text-sm text-mineshaft-300">
@@ -936,12 +937,9 @@ export const SecretDetailSidebar = ({
                             <div className="rounded-md bg-bunker-500">
                               <Tooltip
                                 content={user.allowedActions
-                                  .map(
+                                  .map((action) => camelCaseToSpaces(action))
-                                    (action) =>
-                                      action.charAt(0).toUpperCase() + action.slice(1).toLowerCase()
-                                  )
                                   .join(", ")}
-                                className="z-[100]"
+                                className="z-[100] capitalize"
                               >
                                 <Link
                                   to={