Finish new identity page

2026-10-17 06:34:57 +00:00 · 2024-07-08 17:12:49 +07:00
parent b5166f1d39
commit b81f7d8350
42 changed files with 2691 additions and 671 deletions
@@ -0,0 +1,67 @@
+import { faPencil } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { OrgPermissionCan } from "@app/components/permissions";
+import { IconButton,Tooltip } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { useGetIdentityById } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  identityId: string;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["identity", "identityAuthMethod", "token", "clientSecret"]>,
+    data?: {}
+  ) => void;
+};
+
+export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) => {
+  const { data } = useGetIdentityById(identityId);
+  return data ? (
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">Details</h3>
+        <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
+          {(isAllowed) => {
+            return (
+              <Tooltip content="Edit Identity">
+                <IconButton
+                  isDisabled={!isAllowed}
+                  ariaLabel="copy icon"
+                  variant="plain"
+                  className="group relative"
+                  onClick={() => {
+                    handlePopUpOpen("identity", {
+                      identityId,
+                      name: data.identity.name,
+                      role: data.role,
+                      customRole: data.customRole
+                    });
+                  }}
+                >
+                  <FontAwesomeIcon icon={faPencil} />
+                </IconButton>
+              </Tooltip>
+            );
+          }}
+        </OrgPermissionCan>
+      </div>
+      <div className="pt-4">
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">ID</p>
+          <p className="text-sm text-mineshaft-300">{data.identity.id}</p>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Name</p>
+          <p className="text-sm text-mineshaft-300">{data.identity.name}</p>
+        </div>
+        <div>
+          <p className="text-sm font-semibold text-mineshaft-300">Organization Role</p>
+          <p className="text-sm text-mineshaft-300">{data.role}</p>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <div />
+  );
+};