Finish new identity page

2026-10-16 21:37:59 +00:00 · 2024-07-08 17:12:49 +07:00
parent b5166f1d39
commit b81f7d8350
42 changed files with 2691 additions and 671 deletions
@@ -10,9 +10,9 @@ import { Button, FormControl, IconButton, Input } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
  useAddIdentityAwsAuth,
+  useDeleteIdentityAwsAuth,
  useGetIdentityAwsAuth,
-  useUpdateIdentityAwsAuth
-} from "@app/hooks/api";
+  useUpdateIdentityAwsAuth} from "@app/hooks/api";
 import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -63,6 +63,7 @@ export const IdentityAwsAuthForm = ({

  const { mutateAsync: addMutateAsync } = useAddIdentityAwsAuth();
  const { mutateAsync: updateMutateAsync } = useUpdateIdentityAwsAuth();
+  const { mutateAsync: deleteMutateAsync } = useDeleteIdentityAwsAuth();

  const { data } = useGetIdentityAwsAuth(identityAuthMethodData?.identityId ?? "");

@@ -329,23 +330,43 @@ export const IdentityAwsAuthForm = ({
          Add IP Address
        </Button>
      </div>
-      <div className="flex items-center">
-        <Button
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
-        </Button>
-        <Button
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-        >
-          {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
-        </Button>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+          </Button>
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
+          </Button>
+        </div>
+        {identityAuthMethodData?.authMethod && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={async () => {
+              await deleteMutateAsync({
+                identityId: identityAuthMethodData.identityId,
+                organizationId: orgId
+              });
+
+              handlePopUpToggle("identityAuthMethod", false);
+            }}
+          >
+            Remove Auth Method
+          </Button>
+        )}
      </div>
    </form>
  );
@@ -10,9 +10,9 @@ import { Button, FormControl, IconButton, Input } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
  useAddIdentityAzureAuth,
+  useDeleteIdentityAzureAuth,
  useGetIdentityAzureAuth,
-  useUpdateIdentityAzureAuth
-} from "@app/hooks/api";
+  useUpdateIdentityAzureAuth} from "@app/hooks/api";
 import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -61,6 +61,7 @@ export const IdentityAzureAuthForm = ({

  const { mutateAsync: addMutateAsync } = useAddIdentityAzureAuth();
  const { mutateAsync: updateMutateAsync } = useUpdateIdentityAzureAuth();
+  const { mutateAsync: deleteMutateAsync } = useDeleteIdentityAzureAuth();

  const { data } = useGetIdentityAzureAuth(identityAuthMethodData?.identityId ?? "");

@@ -327,23 +328,43 @@ export const IdentityAzureAuthForm = ({
          Add IP Address
        </Button>
      </div>
-      <div className="flex items-center">
-        <Button
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
-        </Button>
-        <Button
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-        >
-          {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
-        </Button>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+          </Button>
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
+          </Button>
+        </div>
+        {identityAuthMethodData?.authMethod && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={async () => {
+              await deleteMutateAsync({
+                identityId: identityAuthMethodData.identityId,
+                organizationId: orgId
+              });
+
+              handlePopUpToggle("identityAuthMethod", false);
+            }}
+          >
+            Remove Auth Method
+          </Button>
+        )}
      </div>
    </form>
  );
@@ -10,9 +10,9 @@ import { Button, FormControl, IconButton, Input, Select, SelectItem } from "@app
 import { useOrganization, useSubscription } from "@app/context";
 import {
  useAddIdentityGcpAuth,
+  useDeleteIdentityGcpAuth,
  useGetIdentityGcpAuth,
-  useUpdateIdentityGcpAuth
-} from "@app/hooks/api";
+  useUpdateIdentityGcpAuth} from "@app/hooks/api";
 import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -62,6 +62,7 @@ export const IdentityGcpAuthForm = ({

  const { mutateAsync: addMutateAsync } = useAddIdentityGcpAuth();
  const { mutateAsync: updateMutateAsync } = useUpdateIdentityGcpAuth();
+  const { mutateAsync: deleteMutateAsync } = useDeleteIdentityGcpAuth();

  const { data } = useGetIdentityGcpAuth(identityAuthMethodData?.identityId ?? "");

@@ -361,23 +362,43 @@ export const IdentityGcpAuthForm = ({
          Add IP Address
        </Button>
      </div>
-      <div className="flex items-center">
-        <Button
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
-        </Button>
-        <Button
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-        >
-          {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
-        </Button>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+          </Button>
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
+          </Button>
+        </div>
+        {identityAuthMethodData?.authMethod && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={async () => {
+              await deleteMutateAsync({
+                identityId: identityAuthMethodData.identityId,
+                organizationId: orgId
+              });
+
+              handlePopUpToggle("identityAuthMethod", false);
+            }}
+          >
+            Remove Auth Method
+          </Button>
+        )}
      </div>
    </form>
  );
@@ -10,9 +10,9 @@ import { Button, FormControl, IconButton, Input, TextArea } from "@app/component
 import { useOrganization, useSubscription } from "@app/context";
 import {
  useAddIdentityKubernetesAuth,
+  useDeleteIdentityKubernetesAuth,
  useGetIdentityKubernetesAuth,
-  useUpdateIdentityKubernetesAuth
-} from "@app/hooks/api";
+  useUpdateIdentityKubernetesAuth} from "@app/hooks/api";
 import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -64,6 +64,7 @@ export const IdentityKubernetesAuthForm = ({

  const { mutateAsync: addMutateAsync } = useAddIdentityKubernetesAuth();
  const { mutateAsync: updateMutateAsync } = useUpdateIdentityKubernetesAuth();
+  const { mutateAsync: deleteMutateAsync } = useDeleteIdentityKubernetesAuth();

  const { data } = useGetIdentityKubernetesAuth(identityAuthMethodData?.identityId ?? "");

@@ -382,23 +383,43 @@ export const IdentityKubernetesAuthForm = ({
          Add IP Address
        </Button>
      </div>
-      <div className="flex items-center">
-        <Button
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
-        </Button>
-        <Button
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-        >
-          {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
-        </Button>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+          </Button>
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
+          </Button>
+        </div>
+        {identityAuthMethodData?.authMethod && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={async () => {
+              await deleteMutateAsync({
+                identityId: identityAuthMethodData.identityId,
+                organizationId: orgId
+              });
+
+              handlePopUpToggle("identityAuthMethod", false);
+            }}
+          >
+            Remove Auth Method
+          </Button>
+        )}
      </div>
    </form>
  );
@@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
+import { useRouter } from "next/router";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";

@@ -16,8 +17,8 @@ import {
 import { useOrganization } from "@app/context";
 import { useCreateIdentity, useGetOrgRoles, useUpdateIdentity } from "@app/hooks/api";
 import {
-  IdentityAuthMethod
-  // useAddIdentityUniversalAuth
+  // IdentityAuthMethod,
+  useAddIdentityUniversalAuth
 } from "@app/hooks/api/identities";
 import { UsePopUpState } from "@app/hooks/usePopUp";

@@ -32,18 +33,19 @@ export type FormData = yup.InferType<typeof schema>;

 type Props = {
  popUp: UsePopUpState<["identity"]>;
-  handlePopUpOpen: (
-    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
-    data: {
-      identityId: string;
-      name: string;
-      authMethod?: IdentityAuthMethod;
-    }
-  ) => void;
+  // handlePopUpOpen: (
+  //   popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
+  //   data: {
+  //     identityId: string;
+  //     name: string;
+  //     authMethod?: IdentityAuthMethod;
+  //   }
+  // ) => void;
  handlePopUpToggle: (popUpName: keyof UsePopUpState<["identity"]>, state?: boolean) => void;
 };

-export const IdentityModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Props) => {
+export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const router = useRouter();
  const { currentOrg } = useOrganization();
  const orgId = currentOrg?.id || "";

@@ -51,7 +53,7 @@ export const IdentityModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Pro

  const { mutateAsync: createMutateAsync } = useCreateIdentity();
  const { mutateAsync: updateMutateAsync } = useUpdateIdentity();
-  // const { mutateAsync: addMutateAsync } = useAddIdentityUniversalAuth();
+  const { mutateAsync: addMutateAsync } = useAddIdentityUniversalAuth();

  const {
    control,
@@ -113,32 +115,30 @@ export const IdentityModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Pro
      } else {
        // create

-        const {
-          id: createdId,
-          name: createdName,
-          authMethod
-        } = await createMutateAsync({
+        const { id: createdId } = await createMutateAsync({
          name,
          role: role || undefined,
          organizationId: orgId
        });

-        // await addMutateAsync({
-        //   organizationId: orgId,
-        //   identityId: createdId,
-        //   clientSecretTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
-        //   accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
-        //   accessTokenTTL: 2592000,
-        //   accessTokenMaxTTL: 2592000,
-        //   accessTokenNumUsesLimit: 0
-        // });
+        await addMutateAsync({
+          organizationId: orgId,
+          identityId: createdId,
+          clientSecretTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
+          accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
+          accessTokenTTL: 2592000,
+          accessTokenMaxTTL: 2592000,
+          accessTokenNumUsesLimit: 0
+        });

        handlePopUpToggle("identity", false);
-        handlePopUpOpen("identityAuthMethod", {
-          identityId: createdId,
-          name: createdName,
-          authMethod
-        });
+        router.push(`/org/${orgId}/identities/${createdId}`);
+
+        // handlePopUpOpen("identityAuthMethod", {
+        //   identityId: createdId,
+        //   name: createdName,
+        //   authMethod
+        // });
      }

      createNotification({
@@ -1,193 +0,0 @@
-import { Controller, useForm } from "react-hook-form";
-import { faKey } from "@fortawesome/free-solid-svg-icons";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-
-import {
-  Button,
-  EmptyState,
-  FormControl,
-  Input,
-  Modal,
-  ModalContent,
-  Tab,
-  Table,
-  TableContainer,
-  TabList,
-  TabPanel,
-  Tabs,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tr} from "@app/components/v2";
-import { IdentityAuthMethod } from "@app/hooks/api/identities";
-import { UsePopUpState } from "@app/hooks/usePopUp";
-
-type Props = {
-  popUp: UsePopUpState<["identityModalV2", "upgradePlan"]>;
-  handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
-  handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<["identityModalV2", "upgradePlan"]>,
-    state?: boolean
-  ) => void;
-};
-
-enum TabSections {
-  AccessTokens = "access-tokens",
-  AuthMethod = "auth-method"
-}
-
-const schema = z.object({
-  name: z.string(),
-  role: z.string()
-});
-
-type FormData = z.infer<typeof schema>;
-
-export const IdentityModalV2 = ({ popUp, handlePopUpToggle }: Props) => {
-  const {
-    control,
-    formState: { isSubmitting }
-  } = useForm<FormData>({
-    resolver: zodResolver(schema),
-    defaultValues: {
-      name: "",
-      role: ""
-    }
-  });
-
-  const identityData = popUp?.identityModalV2?.data as {
-    identityId: string;
-    name: string;
-    authMethod?: IdentityAuthMethod;
-  };
-
-  return (
-    <Modal
-      isOpen={popUp?.identityModalV2?.isOpen}
-      onOpenChange={(isOpen) => {
-        handlePopUpToggle("identityModalV2", isOpen);
-      }}
-    >
-      <ModalContent
-        className="max-w-screen-lg"
-        title={`Manage Service Account: ${identityData?.name ?? ""}`}
-      >
-        <div className="flex">
-          <div className="w-72 border-r-2 border-mineshaft-600 pr-8">
-            <div className="flex h-full flex-col justify-between">
-              <div>
-                <div className="mb-4 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-                  <p className="whitespace-pre-wrap break-all">Some ID</p>
-                </div>
-                <Controller
-                  control={control}
-                  defaultValue=""
-                  name="name"
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl label="Name" isError={Boolean(error)} errorText={error?.message}>
-                      <Input {...field} placeholder="Machine 1" />
-                    </FormControl>
-                  )}
-                />
-                <Controller
-                  control={control}
-                  defaultValue=""
-                  name="role"
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      label="Organization Role"
-                      isError={Boolean(error)}
-                      errorText={error?.message}
-                    >
-                      <Input {...field} placeholder="Admin" />
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <Button size="sm" type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
-                Edit
-              </Button>
-            </div>
-          </div>
-          <div className="flex-2 pl-8">
-            <Tabs defaultValue={TabSections.AccessTokens}>
-              <TabList>
-                <Tab value={TabSections.AccessTokens}>Access Tokens</Tab>
-                <Tab value={TabSections.AuthMethod}>Auth Method</Tab>
-              </TabList>
-              <TabPanel value={TabSections.AccessTokens}>
-                <div className="mb-8">
-                  <div className="mb-2 flex items-center justify-between">
-                    <h2 className="text-md text-mineshaft-100">Access Token</h2>
-                    <Button
-                      onClick={() => console.log("manage")}
-                      colorSchema="secondary"
-                      // isDisabled={!isAllowed}
-                    >
-                      Create Token
-                    </Button>
-                  </div>
-                  <p className="text-sm text-mineshaft-300">
-                    Create an access token to authenticate with the API
-                  </p>
-                </div>
-                <TableContainer>
-                  <Table>
-                    <THead>
-                      <Tr>
-                        <Th>Token</Th>
-                        <Th>Expires</Th>
-                        <Th />
-                      </Tr>
-                    </THead>
-                    <TBody>
-                      <Tr>
-                        <Td colSpan={4}>
-                          <EmptyState
-                            title="No access tokens have been created for this service account"
-                            icon={faKey}
-                          />
-                        </Td>
-                      </Tr>
-                    </TBody>
-                  </Table>
-                </TableContainer>
-              </TabPanel>
-              <TabPanel value={TabSections.AuthMethod}>Amx</TabPanel>
-            </Tabs>
-          </div>
-        </div>
-        {/* <Controller
-          control={control}
-          name="authMethod"
-          defaultValue={IdentityAuthMethod.UNIVERSAL_AUTH}
-          render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-            <FormControl label="Auth Method" errorText={error?.message} isError={Boolean(error)}>
-              <Select
-                defaultValue={field.value}
-                {...field}
-                onValueChange={(e) => onChange(e)}
-                className="w-full"
-                isDisabled={!!identityData?.authMethod}
-              >
-                {identityAuthMethods.map(({ label, value }) => (
-                  <SelectItem value={String(value || "")} key={label}>
-                    {label}
-                  </SelectItem>
-                ))}
-              </Select>
-            </FormControl>
-          )}
-        /> */}
-        {/* {renderIdentityAuthForm()} */}
-        {/* <UpgradePlanModal
-          isOpen={popUp?.upgradePlan?.isOpen}
-          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-          text="You can use IP allowlisting if you switch to Infisical's Pro plan."
-        /> */}
-      </ModalContent>
-    </Modal>
-  );
-};
@@ -17,11 +17,9 @@ import { usePopUp } from "@app/hooks/usePopUp";

 import { IdentityAuthMethodModal } from "./IdentityAuthMethodModal";
 import { IdentityModal } from "./IdentityModal";
-// new
-import { IdentityModalV2 } from "./IdentityModalV2";
 import { IdentityTable } from "./IdentityTable";
 import { IdentityTokenAuthTokenModal } from "./IdentityTokenAuthTokenModal";
-import { IdentityUniversalAuthClientSecretModal } from "./IdentityUniversalAuthClientSecretModal";
+// import { IdentityUniversalAuthClientSecretModal } from "./IdentityUniversalAuthClientSecretModal";

 export const IdentitySection = withPermission(
  () => {
@@ -32,7 +30,6 @@ export const IdentitySection = withPermission(
    const { mutateAsync: deleteMutateAsync } = useDeleteIdentity();
    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
      "identity",
-      "identityModalV2", // TODO: update
      "identityAuthMethod",
      "deleteIdentity",
      "universalAuthClientSecret",
@@ -111,27 +108,18 @@ export const IdentitySection = withPermission(
            )}
          </OrgPermissionCan>
        </div>
-        <IdentityTable handlePopUpOpen={handlePopUpOpen} />
-        <IdentityModal
-          popUp={popUp}
-          handlePopUpOpen={handlePopUpOpen}
-          handlePopUpToggle={handlePopUpToggle}
-        />
-        <IdentityModalV2
-          popUp={popUp}
-          handlePopUpOpen={handlePopUpOpen}
-          handlePopUpToggle={handlePopUpToggle}
-        />
+        <IdentityTable />
+        <IdentityModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
        <IdentityAuthMethodModal
          popUp={popUp}
          handlePopUpOpen={handlePopUpOpen}
          handlePopUpToggle={handlePopUpToggle}
        />
-        <IdentityUniversalAuthClientSecretModal
+        {/* <IdentityUniversalAuthClientSecretModal
          popUp={popUp}
          handlePopUpOpen={handlePopUpOpen}
          handlePopUpToggle={handlePopUpToggle}
-        />
+        /> */}
        <IdentityTokenAuthTokenModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
        <DeleteActionModal
          isOpen={popUp.deleteIdentity.isOpen}
@@ -1,23 +1,11 @@
-import {
-  faCopy,
-  faEllipsis,
-  faKey,
-  faLock,
-  faPencil,
-  faServer,
-  faXmark
-} from "@fortawesome/free-solid-svg-icons";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { faEllipsis, faServer } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { twMerge } from "tailwind-merge";

 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
  EmptyState,
  IconButton,
  Select,
@@ -29,50 +17,17 @@ import {
  Td,
  Th,
  THead,
-  Tooltip,
-  Tr} from "@app/components/v2";
+  Tr
+} from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
-import {
-  useCreateTokenIdentityTokenAuth,
-  useGetIdentityMembershipOrgs,
-  useGetOrgRoles,
-  useUpdateIdentity
-} from "@app/hooks/api";
-import { IdentityAuthMethod, identityAuthToNameMap } from "@app/hooks/api/identities";
-import { UsePopUpState } from "@app/hooks/usePopUp";
+import { useGetIdentityMembershipOrgs, useGetOrgRoles, useUpdateIdentity } from "@app/hooks/api";

-type Props = {
-  handlePopUpOpen: (
-    popUpName: keyof UsePopUpState<
-      [
-        "deleteIdentity",
-        "identity",
-        "identityModalV2",
-        "universalAuthClientSecret",
-        "identityAuthMethod",
-        "tokenAuthToken"
-      ]
-    >,
-    data?: {
-      identityId?: string;
-      name?: string;
-      authMethod?: string;
-      role?: string;
-      customRole?: {
-        name: string;
-        slug: string;
-      };
-      accessToken?: string;
-    }
-  ) => void;
-};
-
-export const IdentityTable = ({ handlePopUpOpen }: Props) => {
+export const IdentityTable = () => {
+  const router = useRouter();
  const { currentOrg } = useOrganization();
  const orgId = currentOrg?.id || "";

  const { mutateAsync: updateMutateAsync } = useUpdateIdentity();
-  const { mutateAsync: createToken } = useCreateTokenIdentityTokenAuth();
  const { data, isLoading } = useGetIdentityMembershipOrgs(orgId);

  const { data: roles } = useGetOrgRoles(orgId);
@@ -108,7 +63,6 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
          <Tr>
            <Th>Name</Th>
            <Th>Role</Th>
-            <Th>Auth Method</Th>
            <Th className="w-5" />
          </Tr>
        </THead>
@@ -117,22 +71,11 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
          {!isLoading &&
            data &&
            data.length > 0 &&
-            data.map(({ identity: { id, name, authMethod }, role, customRole }) => {
+            data.map(({ identity: { id, name }, role, customRole }) => {
              return (
                <Tr className="h-10" key={`identity-${id}`}>
                  <Td>
-                    <Button
-                      variant="link"
-                      onClick={() => {
-                        handlePopUpOpen("identityModalV2", {
-                          identityId: id,
-                          name,
-                          authMethod
-                        });
-                      }}
-                    >
-                      {name}
-                    </Button>
+                    <Link href={`/org/${orgId}/identities/${id}`}>{name}</Link>
                  </Td>
                  <Td>
                    <OrgPermissionCan
@@ -163,146 +106,16 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                      }}
                    </OrgPermissionCan>
                  </Td>
-                  <Td>{authMethod ? identityAuthToNameMap[authMethod] : "Not configured"}</Td>
                  <Td>
                    <div className="flex items-center justify-end space-x-4">
-                      {authMethod === IdentityAuthMethod.TOKEN_AUTH && (
-                        <Tooltip content="Create access token">
-                          <IconButton
-                            onClick={async () => {
-                              const newTokenData = await createToken({
-                                identityId: id,
-                                organizationId: orgId
-                              });
-
-                              handlePopUpOpen("tokenAuthToken", {
-                                accessToken: newTokenData.accessToken
-                              });
-                            }}
-                            size="lg"
-                            colorSchema="primary"
-                            variant="plain"
-                            ariaLabel="update"
-                          >
-                            <FontAwesomeIcon icon={faKey} />
-                          </IconButton>
-                        </Tooltip>
-                      )}
-                      {authMethod === IdentityAuthMethod.UNIVERSAL_AUTH && (
-                        <Tooltip content="Manage client ID/secrets">
-                          <IconButton
-                            onClick={async () => {
-                              handlePopUpOpen("universalAuthClientSecret", {
-                                identityId: id,
-                                name
-                              });
-                            }}
-                            size="lg"
-                            colorSchema="primary"
-                            variant="plain"
-                            ariaLabel="update"
-                          >
-                            <FontAwesomeIcon icon={faKey} />
-                          </IconButton>
-                        </Tooltip>
-                      )}
-                      <OrgPermissionCan
-                        I={OrgPermissionActions.Edit}
-                        a={OrgPermissionSubjects.Identity}
+                      <IconButton
+                        ariaLabel="copy icon"
+                        variant="plain"
+                        className="group relative"
+                        onClick={() => router.push(`/org/${orgId}/identities/${id}`)}
                      >
-                        {(isAllowed) => (
-                          <Tooltip content="Manage auth method">
-                            <IconButton
-                              onClick={async () => {
-                                handlePopUpOpen("identityAuthMethod", {
-                                  identityId: id,
-                                  name,
-                                  authMethod
-                                });
-                              }}
-                              size="lg"
-                              colorSchema="primary"
-                              variant="plain"
-                              ariaLabel="update"
-                              isDisabled={!isAllowed}
-                            >
-                              <FontAwesomeIcon icon={faLock} />
-                            </IconButton>
-                          </Tooltip>
-                        )}
-                      </OrgPermissionCan>
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild className="rounded-lg">
-                          <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
-                            <Tooltip content="More options">
-                              <FontAwesomeIcon size="lg" icon={faEllipsis} />
-                            </Tooltip>
-                          </div>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="start" className="p-1">
-                          <OrgPermissionCan
-                            I={OrgPermissionActions.Edit}
-                            a={OrgPermissionSubjects.Identity}
-                          >
-                            {(isAllowed) => (
-                              <DropdownMenuItem
-                                className={twMerge(
-                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                                )}
-                                onClick={async () => {
-                                  if (!isAllowed) return;
-                                  handlePopUpOpen("identity", {
-                                    identityId: id,
-                                    name,
-                                    role,
-                                    customRole
-                                  });
-                                }}
-                                disabled={!isAllowed}
-                                icon={<FontAwesomeIcon icon={faPencil} />}
-                              >
-                                Update identity
-                              </DropdownMenuItem>
-                            )}
-                          </OrgPermissionCan>
-                          <OrgPermissionCan
-                            I={OrgPermissionActions.Delete}
-                            a={OrgPermissionSubjects.Identity}
-                          >
-                            {(isAllowed) => (
-                              <DropdownMenuItem
-                                className={twMerge(
-                                  isAllowed
-                                    ? "hover:!bg-red-500 hover:!text-white"
-                                    : "pointer-events-none cursor-not-allowed opacity-50"
-                                )}
-                                onClick={() => {
-                                  if (!isAllowed) return;
-                                  handlePopUpOpen("deleteIdentity", {
-                                    identityId: id,
-                                    name
-                                  });
-                                }}
-                                icon={<FontAwesomeIcon icon={faXmark} />}
-                              >
-                                Delete identity
-                              </DropdownMenuItem>
-                            )}
-                          </OrgPermissionCan>
-                          <DropdownMenuItem
-                            onClick={() => {
-                              navigator.clipboard.writeText(id);
-                              createNotification({
-                                text: "Copied identity internal ID to clipboard",
-                                type: "success"
-                              });
-                            }}
-                            icon={<FontAwesomeIcon icon={faCopy} />}
-                          >
-                            Copy Identity ID
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
+                        <FontAwesomeIcon icon={faEllipsis} />
+                      </IconButton>
                    </div>
                  </Td>
                </Tr>
@@ -9,9 +9,9 @@ import { Button, FormControl, IconButton, Input } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
  useAddIdentityTokenAuth,
+  useDeleteIdentityTokenAuth,
  useGetIdentityTokenAuth,
-  useUpdateIdentityTokenAuth
-} from "@app/hooks/api";
+  useUpdateIdentityTokenAuth} from "@app/hooks/api";
 import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { UsePopUpState } from "@app/hooks/usePopUp";

@@ -56,6 +56,7 @@ export const IdentityTokenAuthForm = ({

  const { mutateAsync: addMutateAsync } = useAddIdentityTokenAuth();
  const { mutateAsync: updateMutateAsync } = useUpdateIdentityTokenAuth();
+  const { mutateAsync: deleteMutateAsync } = useDeleteIdentityTokenAuth();

  const { data } = useGetIdentityTokenAuth(identityAuthMethodData?.identityId ?? "");

@@ -239,23 +240,43 @@ export const IdentityTokenAuthForm = ({
          Add IP Address
        </Button>
      </div>
-      <div className="flex items-center">
-        <Button
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
-        </Button>
-        <Button
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-        >
-          {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
-        </Button>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+          </Button>
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
+          </Button>
+        </div>
+        {identityAuthMethodData?.authMethod && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={async () => {
+              await deleteMutateAsync({
+                identityId: identityAuthMethodData.identityId,
+                organizationId: orgId
+              });
+
+              handlePopUpToggle("identityAuthMethod", false);
+            }}
+          >
+            Remove Auth Method
+          </Button>
+        )}
      </div>
    </form>
  );
@@ -10,7 +10,7 @@ import * as yup from "yup";
 import { createNotification } from "@app/components/notifications";
 import {
  Button,
-  DeleteActionModal,
+  // DeleteActionModal,
  EmptyState,
  FormControl,
  IconButton,
@@ -30,8 +30,7 @@ import { useToggle } from "@app/hooks";
 import {
  useCreateIdentityUniversalAuthClientSecret,
  useGetIdentityUniversalAuth,
-  useGetIdentityUniversalAuthClientSecrets,
-  useRevokeIdentityUniversalAuthClientSecret
+  useGetIdentityUniversalAuthClientSecrets
 } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";

@@ -44,18 +43,16 @@ const schema = yup.object({
 export type FormData = yup.InferType<typeof schema>;

 type Props = {
-  popUp: UsePopUpState<["universalAuthClientSecret", "deleteUniversalAuthClientSecret"]>;
+  popUp: UsePopUpState<["universalAuthClientSecret", "revokeClientSecret"]>;
  handlePopUpOpen: (
-    popUpName: keyof UsePopUpState<["deleteUniversalAuthClientSecret"]>,
+    popUpName: keyof UsePopUpState<["revokeClientSecret"]>,
    data?: {
      clientSecretPrefix: string;
      clientSecretId: string;
    }
  ) => void;
  handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<
-      ["universalAuthClientSecret", "deleteUniversalAuthClientSecret"]
-    >,
+    popUpName: keyof UsePopUpState<["universalAuthClientSecret", "revokeClientSecret"]>,
    state?: boolean
  ) => void;
 };
@@ -66,7 +63,7 @@ export const IdentityUniversalAuthClientSecretModal = ({
  handlePopUpToggle
 }: Props) => {
  const { t } = useTranslation();
-  
+
  const [token, setToken] = useState("");
  const [isClientSecretCopied, setIsClientSecretCopied] = useToggle(false);
  const [isClientIdCopied, setIsClientIdCopied] = useToggle(false);
@@ -81,8 +78,6 @@ export const IdentityUniversalAuthClientSecretModal = ({

  const { mutateAsync: createClientSecretMutateAsync } =
    useCreateIdentityUniversalAuthClientSecret();
-  const { mutateAsync: revokeClientSecretMutateAsync } =
-    useRevokeIdentityUniversalAuthClientSecret();

  const {
    control,
@@ -142,41 +137,6 @@ export const IdentityUniversalAuthClientSecretModal = ({
    }
  };

-  const onDeleteClientSecretSubmit = async ({
-    clientSecretId,
-    clientSecretPrefix
-  }: {
-    clientSecretId: string;
-    clientSecretPrefix: string;
-  }) => {
-    try {
-      if (!popUpData?.identityId) return;
-
-      await revokeClientSecretMutateAsync({
-        identityId: popUpData.identityId,
-        clientSecretId
-      });
-
-      if (token.startsWith(clientSecretPrefix)) {
-        reset();
-        setToken("");
-      }
-
-      handlePopUpToggle("deleteUniversalAuthClientSecret", false);
-
-      createNotification({
-        text: "Successfully deleted client secret",
-        type: "success"
-      });
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: "Failed to delete client secret",
-        type: "error"
-      });
-    }
-  };
-
  const hasToken = Boolean(token);

  return (
@@ -346,7 +306,7 @@ export const IdentityUniversalAuthClientSecretModal = ({
                        <Td>
                          <IconButton
                            onClick={() => {
-                              handlePopUpOpen("deleteUniversalAuthClientSecret", {
+                              handlePopUpOpen("revokeClientSecret", {
                                clientSecretPrefix,
                                clientSecretId: id
                              });
@@ -376,26 +336,6 @@ export const IdentityUniversalAuthClientSecretModal = ({
            </TBody>
          </Table>
        </TableContainer>
-        <DeleteActionModal
-          isOpen={popUp.deleteUniversalAuthClientSecret.isOpen}
-          title={`Are you sure want to delete the client secret ${
-            (popUp?.deleteUniversalAuthClientSecret?.data as { clientSecretPrefix: string })
-              ?.clientSecretPrefix || ""
-          }************?`}
-          onChange={(isOpen) => handlePopUpToggle("deleteUniversalAuthClientSecret", isOpen)}
-          deleteKey="confirm"
-          onDeleteApproved={() => {
-            const deleteClientSecretData = popUp?.deleteUniversalAuthClientSecret?.data as {
-              clientSecretId: string;
-              clientSecretPrefix: string;
-            };
-
-            return onDeleteClientSecretSubmit({
-              clientSecretId: deleteClientSecretData.clientSecretId,
-              clientSecretPrefix: deleteClientSecretData.clientSecretPrefix
-            });
-          }}
-        />
      </ModalContent>
    </Modal>
  );
@@ -10,9 +10,9 @@ import { Button, FormControl, IconButton, Input } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
  useAddIdentityUniversalAuth,
+  useDeleteIdentityUniversalAuth,
  useGetIdentityUniversalAuth,
-  useUpdateIdentityUniversalAuth
-} from "@app/hooks/api";
+  useUpdateIdentityUniversalAuth} from "@app/hooks/api";
 import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -68,6 +68,7 @@ export const IdentityUniversalAuthForm = ({
  const { subscription } = useSubscription();
  const { mutateAsync: addMutateAsync } = useAddIdentityUniversalAuth();
  const { mutateAsync: updateMutateAsync } = useUpdateIdentityUniversalAuth();
+  const { mutateAsync: deleteMutateAsync } = useDeleteIdentityUniversalAuth();
  const { data } = useGetIdentityUniversalAuth(identityAuthMethodData?.identityId ?? "");

  const {
@@ -368,23 +369,43 @@ export const IdentityUniversalAuthForm = ({
          Add IP Address
        </Button>
      </div>
-      <div className="flex items-center">
-        <Button
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
-        </Button>
-        <Button
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-        >
-          {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
-        </Button>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+          </Button>
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
+          </Button>
+        </div>
+        {identityAuthMethodData?.authMethod && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={async () => {
+              await deleteMutateAsync({
+                identityId: identityAuthMethodData.identityId,
+                organizationId: orgId
+              });
+
+              handlePopUpToggle("identityAuthMethod", false);
+            }}
+          >
+            Remove Auth Method
+          </Button>
+        )}
      </div>
    </form>
  );