feat: renamed old frontend and fixed some minor bugs

2026-10-18 19:39:25 +00:00 · 2025-01-06 14:56:49 +05:30
parent 8c902d7699
commit 54377a44d3
2577 changed files with 35240 additions and 35116 deletions
@@ -0,0 +1,118 @@
+import { faCheck, faCopy, faKey, faPencil } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { OrgPermissionCan } from "@app/components/permissions";
+import { IconButton, Tag, Tooltip } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { useTimedReset } from "@app/hooks";
+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?: object
+  ) => void;
+};
+
+export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) => {
+  const [copyTextId, isCopyingId, setCopyTextId] = useTimedReset<string>({
+    initialState: "Copy ID to clipboard"
+  });
+
+  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">Identity 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,
+                      metadata: data.metadata
+                    });
+                  }}
+                >
+                  <FontAwesomeIcon icon={faPencil} />
+                </IconButton>
+              </Tooltip>
+            );
+          }}
+        </OrgPermissionCan>
+      </div>
+      <div className="pt-4">
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Identity ID</p>
+          <div className="group flex align-top">
+            <p className="text-sm text-mineshaft-300">{data.identity.id}</p>
+            <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+              <Tooltip content={copyTextId}>
+                <IconButton
+                  ariaLabel="copy icon"
+                  variant="plain"
+                  className="group relative ml-2"
+                  onClick={() => {
+                    navigator.clipboard.writeText(data.identity.id);
+                    setCopyTextId("Copied");
+                  }}
+                >
+                  <FontAwesomeIcon icon={isCopyingId ? faCheck : faCopy} />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
+        </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 className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Organization Role</p>
+          <p className="text-sm text-mineshaft-300">{data.role}</p>
+        </div>
+        <div>
+          <p className="text-sm font-semibold text-mineshaft-300">Metadata</p>
+          {data?.metadata?.length ? (
+            <div className="mt-1 flex flex-wrap gap-2 text-sm text-mineshaft-300">
+              {data.metadata?.map((el) => (
+                <div key={el.id} className="flex items-center">
+                  <Tag
+                    size="xs"
+                    className="mr-0 flex items-center rounded-r-none border border-mineshaft-500"
+                  >
+                    <FontAwesomeIcon icon={faKey} size="xs" className="mr-1" />
+                    <div>{el.key}</div>
+                  </Tag>
+                  <Tag
+                    size="xs"
+                    className="flex items-center rounded-l-none border border-mineshaft-500 bg-mineshaft-900 pl-1"
+                  >
+                    <div className="max-w-[150px] overflow-hidden text-ellipsis whitespace-nowrap">
+                      {el.value}
+                    </div>
+                  </Tag>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p className="text-sm text-mineshaft-300">-</p>
+          )}
+        </div>
+      </div>
+    </div>
+  ) : (
+    <div />
+  );
+};