improvements: fix doc endpoint and minor ui adjustments/permission check

docs/api-reference/endpoints/project-identities/get-by-id.mdx

@@ -1,4 +1,4 @@
 ---
-title: "Get Identity By Id"
+title: "Get Identity by ID"
 openapi: "GET /api/v1/projects/{projectId}/identities/{identityId}"
 ---

docs/api-reference/endpoints/project-identities/list-identity.mdx

@@ -1,4 +1,4 @@
 ---
-title: "List Identity"
+title: "List Identities"
-openapi: "POST /api/v1/projects/{projectId}/identities"
+openapi: "GET /api/v1/projects/{projectId}/identities"
 ---

frontend/src/components/v2/Alert/Alert.tsx

@@ -9,7 +9,7 @@ import { cva, type VariantProps } from "cva";
 import { twMerge } from "tailwind-merge";
 
 const alertVariants = cva(
-  "w-full bg-mineshaft-800 rounded-lg border border-bunker-400 px-4 py-3 text-sm flex items-center gap-x-4",
+  "w-full bg-mineshaft-800 rounded-lg border border-bunker-400 px-4 py-3 text-sm flex items-center gap-x-3",
   {
     variants: {
       variant: {
@@ -28,6 +28,7 @@ type AlertProps = {
   title?: string;
   hideTitle?: boolean;
   icon?: React.ReactNode;
+  iconClassName?: string;
 };
 
 const variantTitleMap = {
@@ -45,36 +46,41 @@ const variantIconMap = {
 const Alert = forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants> & AlertProps
->(({ className, variant, title, icon, hideTitle = false, children, ...props }, ref) => {
+>(
-  const defaultTitle = title ?? variantTitleMap[variant ?? "default"];
+  (
-  return (
+    { className, variant, title, icon, hideTitle = false, children, iconClassName, ...props },
-    <div
+    ref
-      ref={ref}
+  ) => {
-      role="alert"
+    const defaultTitle = title ?? variantTitleMap[variant ?? "default"];
-      className={twMerge(alertVariants({ variant }), className)}
+    return (
-      {...props}
+      <div
-    >
+        ref={ref}
-      <div>
+        role="alert"
-        {typeof icon !== "undefined" ? (
+        className={twMerge(alertVariants({ variant }), className)}
-          <>{icon} </>
+        {...props}
-        ) : (
+      >
-          <FontAwesomeIcon
+        <div>
-            className="text-lg text-primary"
+          {typeof icon !== "undefined" ? (
-            icon={variantIconMap[variant ?? "default"]}
+            <>{icon} </>
-          />
+          ) : (
-        )}
+            <FontAwesomeIcon
+              className={twMerge("text-lg text-primary", iconClassName)}
+              icon={variantIconMap[variant ?? "default"]}
+            />
+          )}
+        </div>
+        <div className="flex flex-col gap-y-1">
+          {hideTitle ? null : (
+            <h5 className="leading-6 font-medium tracking-tight" {...props}>
+              {defaultTitle}
+            </h5>
+          )}
+          {children}
+        </div>
       </div>
-      <div className="flex flex-col gap-y-1">
+    );
-        {hideTitle ? null : (
+  }
-          <h5 className="leading-6 font-medium tracking-tight" {...props}>
+);
-            {defaultTitle}
-          </h5>
-        )}
-        {children}
-      </div>
-    </div>
-  );
-});
 Alert.displayName = "Alert";
 
 const AlertDescription = forwardRef<

frontend/src/pages/project/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx

@@ -8,7 +8,7 @@ import { Link, useNavigate, useParams } from "@tanstack/react-router";
 import { formatRelative } from "date-fns";
 
 import { createNotification } from "@app/components/notifications";
-import { ProjectPermissionCan } from "@app/components/permissions";
+import { OrgPermissionCan, ProjectPermissionCan } from "@app/components/permissions";
 import {
   Alert,
   AlertDescription,
@@ -20,6 +20,8 @@ import {
   Spinner
 } from "@app/components/v2";
 import {
+  OrgPermissionIdentityActions,
+  OrgPermissionSubjects,
   ProjectPermissionActions,
   ProjectPermissionIdentityActions,
   ProjectPermissionSub,
@@ -211,19 +213,28 @@ const Page = () => {
             </div>
           </PageHeader>
           {!isProjectIdentity && (
-            <Alert hideTitle className="mb-4 border-primary/50 bg-primary/10">
+            <Alert hideTitle iconClassName="text-info" className="mb-4 border-info/50 bg-info/10">
               <AlertDescription>
                 This identity is managed by your organization.{" "}
-                <Link
+                <OrgPermissionCan
-                  to="/organization/identities/$identityId"
+                  I={OrgPermissionIdentityActions.Read}
-                  params={{
+                  an={OrgPermissionSubjects.Identity}
-                    identityId
-                  }}
                 >
-                  <span className="cursor-pointer text-primary underline underline-offset-2">
+                  {(isAllowed) =>
-                    Click here to retrieve credentials.
+                    isAllowed ? (
-                  </span>
+                      <Link
-                </Link>
+                        to="/organization/identities/$identityId"
+                        params={{
+                          identityId
+                        }}
+                      >
+                        <span className="cursor-pointer text-info underline underline-offset-2">
+                          Click here to manage identity.
+                        </span>
+                      </Link>
+                    ) : null
+                  }
+                </OrgPermissionCan>
               </AlertDescription>
             </Alert>
           )}