synapse-react-client/dist/components/OAuthClientManagement/OAuthManagement.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { jsxs as n, jsx as e, Fragment as I } from "react/jsx-runtime";
import G from "../layout/InfiniteTableLayout.js";
import * as Y from "../../synapse-client/SynapseClient.js";
import "@sage-bionetworks/synapse-client/generated/models/ErrorResponseCode";
import "@sage-bionetworks/synapse-client/generated/models/TwoFactorAuthErrorResponse";
import "@sage-bionetworks/synapse-client/util/SynapseClientError";
import "@sage-bionetworks/synapse-types";
import "../../utils/functions/EntityTypeUtils.js";
import "../../utils/SynapseConstants.js";
import "lodash-es";
import "@sage-bionetworks/synapse-client/util/synapseClientFetch";
import "@tanstack/react-query";
import "../../utils/PermissionLevelToAccessType.js";
import { useState as i, useMemo as T } from "react";
import { useSynapseContext as q } from "../../utils/context/SynapseContext.js";
import "use-deep-compare-effect";
import { Box as $, Button as E, Link as J, IconButton as K, Menu as Q, MenuItem as w } from "@mui/material";
import "../../utils/hooks/useCookiePreferences.js";
import "../../utils/hooks/useSourceAppConfigs.js";
import "universal-cookie";
import "../../utils/AppUtils/session/ApplicationSessionContext.js";
import "../../utils/context/FullContextProvider.js";
import "../../utils/context/DocumentMetadataContext.js";
import '../../style/components/_spinner.css';/* empty css                                   */
import "@tanstack/query-core";
import "lodash-es/isEmpty";
import "lodash-es/isEqual";
import "lodash-es/xorWith";
import "react-router";
import "@sage-bionetworks/synapse-client";
import "../../utils/types/IsType.js";
import { useGetOAuthClientInfinite as U } from "../../synapse-queries/oauth/useOAuthClient.js";
import { AddCircleTwoTone as X, MoreVert as Z } from "@mui/icons-material";
import { formatDate as O } from "../../utils/functions/DateFormatter.js";
import { useReactTable as ee, getCoreRowModel as te, createColumnHelper as ie } from "@tanstack/react-table";
import V from "dayjs";
import { CopyToClipboardInput as oe } from "../CopyToClipboardInput/CopyToClipboardInput.js";
import { DialogBase as B } from "../DialogBase.js";
import { WarningDialog as ne } from "../SynapseForm/WarningDialog.js";
import h from "../TanStackTable/ColumnHeader.js";
import re from "../TanStackTable/StyledTanStackTable.js";
import { displayToast as ae } from "../ToastMessage/ToastMessage.js";
import { CreateOAuthModal as le } from "./CreateOAuthClient.js";
import se from "../OAuthClientAclEditor/OAuthAclEditorModal.js";
const p = ie();
function ce(o) {
  const {
    setIsShowingVerification: a,
    setSelectedClient: c,
    setIsShowingSecretWarning: u,
    setIsEdit: r,
    setIsShowingCreateClientModal: d,
    setIsShowingSharingSettings: l
  } = o;
  return [
    p.accessor("createdOn", {
      header: (t) => /* @__PURE__ */ e(h, { ...t, title: "Created" }),
      cell: (t) => O(V(t.getValue()))
    }),
    p.accessor("modifiedOn", {
      header: (t) => /* @__PURE__ */ e(h, { ...t, title: "Modified" }),
      cell: (t) => O(V(t.getValue()))
    }),
    p.accessor("client_id", {
      header: (t) => /* @__PURE__ */ e(h, { ...t, title: "ID" })
    }),
    p.accessor("client_name", {
      header: (t) => /* @__PURE__ */ e(h, { ...t, title: "Client" })
    }),
    p.accessor("verified", {
      header: (t) => /* @__PURE__ */ e(h, { ...t, title: "Verified" }),
      cell: ({ getValue: t }) => t() ? "Yes" : /* @__PURE__ */ e(
        E,
        {
          variant: "outlined",
          size: "small",
          onClick: () => a(!0),
          children: "Submit Verification"
        }
      )
    }),
    p.display({
      id: "actions",
      header: (t) => /* @__PURE__ */ e(h, { ...t, title: "Actions" }),
      cell: ({ row: t }) => /* @__PURE__ */ e(
        de,
        {
          row: t,
          setSelectedClient: c,
          setIsEdit: r,
          setIsShowingCreateClientModal: d,
          setIsShowingSecretWarning: u,
          setIsShowingSharingSettings: l
        }
      )
    })
  ];
}
function de({
  row: o,
  setSelectedClient: a,
  setIsEdit: c,
  setIsShowingCreateClientModal: u,
  setIsShowingSecretWarning: r,
  setIsShowingSharingSettings: d
}) {
  const [l, t] = i(null), f = !!l, g = (C) => {
    t(C.currentTarget);
  }, m = () => {
    t(null);
  };
  return /* @__PURE__ */ n(I, { children: [
    /* @__PURE__ */ e(
      K,
      {
        "aria-label": "more",
        "aria-controls": `actions-menu-${o.id}`,
        "aria-haspopup": "true",
        onClick: g,
        size: "small",
        children: /* @__PURE__ */ e(Z, {})
      }
    ),
    /* @__PURE__ */ n(
      Q,
      {
        id: `actions-menu-${o.id}`,
        anchorEl: l,
        open: f,
        onClose: m,
        anchorOrigin: {
          vertical: "bottom",
          horizontal: "right"
        },
        transformOrigin: {
          vertical: "top",
          horizontal: "right"
        },
        children: [
          /* @__PURE__ */ e(
            w,
            {
              onClick: () => {
                a(o.original), c(!0), u(!0), m();
              },
              children: "Edit"
            }
          ),
          /* @__PURE__ */ e(
            w,
            {
              onClick: () => {
                a(o.original), r(!0), m();
              },
              children: "Generate Secret"
            }
          ),
          /* @__PURE__ */ e(
            w,
            {
              onClick: () => {
                a(o.original), d(!0), m();
              },
              children: "Sharing Settings"
            }
          )
        ]
      }
    )
  ] });
}
function et() {
  const { accessToken: o } = q(), [a, c] = i(!1), [u, r] = i(!1), [d, l] = i(!1), [t, f] = i(), [g, m] = i(!1), [C, S] = i(!1), [R, b] = i(!1), [y, M] = i(), [_, v] = i(!1), { data: x, isLoading: k, hasNextPage: D, fetchNextPage: j, isFetchingNextPage: z } = U(), L = T(
    () => x?.pages.flatMap((s) => s.results || []) || [],
    [x]
  ), N = "Are you absolutely sure?", P = "If you have an existing secret, generating a new secret will make your application invalid after generation. This action cannot be undone.", W = async () => {
    S(!1);
    try {
      const s = await Y.createOAuthClientSecret(
        o,
        t?.client_id
      );
      f(void 0), b(!0), M(s.client_secret);
    } catch (s) {
      ae(s.reason, "danger");
    }
  }, H = T(
    () => ce({
      setIsShowingVerification: v,
      setSelectedClient: f,
      setIsShowingSecretWarning: S,
      setIsEdit: l,
      setIsShowingCreateClientModal: r,
      setIsShowingSharingSettings: c
    }),
    []
  ), A = ee({
    data: L,
    columns: H,
    getRowId: (s) => s.client_id,
    enableRowSelection: !0,
    enableSorting: !1,
    getCoreRowModel: te(),
    columnResizeMode: "onChange"
  }), F = !k && A.getRowModel().rows.length === 0;
  return /* @__PURE__ */ n("div", { children: [
    /* @__PURE__ */ e(
      $,
      {
        sx: {
          display: "flex",
          width: "100%",
          justifyContent: "flex-end",
          mb: 2
        },
        children: /* @__PURE__ */ e(
          E,
          {
            variant: "contained",
            color: "primary",
            onClick: () => {
              r(!0), l(!1);
            },
            sx: { float: "right" },
            startIcon: /* @__PURE__ */ e(X, {}),
            children: "Create New Client"
          }
        )
      }
    ),
    /* @__PURE__ */ e(
      G,
      {
        table: /* @__PURE__ */ e(re, { table: A }),
        isLoading: k,
        isEmpty: F,
        hasNextPage: D,
        onFetchNextPageClicked: () => {
          j();
        },
        isFetchingNextPage: z
      }
    ),
    /* @__PURE__ */ e(
      le,
      {
        onClose: () => {
          r(!1);
        },
        isShowingModal: u,
        client: d ? t : void 0,
        isEdit: d,
        setIsShowingConfirmModal: m,
        isShowingConfirmModal: g,
        setIsShowingModal: r
      }
    ),
    /* @__PURE__ */ e(
      B,
      {
        open: _,
        onCancel: () => v(!1),
        title: "Submit Verification",
        content: /* @__PURE__ */ n(I, { children: [
          /* @__PURE__ */ n("p", { children: [
            "In order to verify an OAuth client please submit a request to the",
            " ",
            /* @__PURE__ */ e(
              J,
              {
                target: "_blank",
                rel: "noopener noreferrer",
                href: "https://sagebionetworks.jira.com/servicedesk/customer/portal/9",
                children: "Synapse Service Desk."
              }
            )
          ] }),
          /* @__PURE__ */ e("b", { children: "Please list the following items in your request:" }),
          /* @__PURE__ */ n("ul", { children: [
            /* @__PURE__ */ e("li", { children: "Your name" }),
            /* @__PURE__ */ n("li", { children: [
              "The ID of the client to be verified ",
              /* @__PURE__ */ e("br", {})
            ] }),
            /* @__PURE__ */ e("li", { children: "A description of your application" })
          ] })
        ] })
      }
    ),
    /* @__PURE__ */ e(
      se,
      {
        clientId: t?.client_id,
        open: a,
        onClose: () => c(!1)
      }
    ),
    /* @__PURE__ */ e(
      ne,
      {
        open: C,
        title: N,
        content: P,
        onCancel: () => {
          S(!1), f(void 0);
        },
        onConfirm: W,
        confirmButtonColor: "error",
        confirmButtonText: "Yes, Continue"
      }
    ),
    y && /* @__PURE__ */ e(
      B,
      {
        open: R,
        title: "App Secret",
        onCancel: () => {
          b(!1), M(void 0);
        },
        content: /* @__PURE__ */ n(I, { children: [
          /* @__PURE__ */ n("p", { children: [
            /* @__PURE__ */ e("b", { children: "This secret will not be able to be retrieved again." }),
            " If needed, in order to generate a new secret select Generate from the Client List."
          ] }),
          /* @__PURE__ */ e(oe, { value: y, inputWidth: "400px" })
        ] })
      }
    )
  ] });
}
export {
  et as OAuthManagement,
  et as default
};
//# sourceMappingURL=OAuthManagement.js.map