synapse-react-client/dist/components/dataaccess/AccessRequirementDashboard.js

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

import { jsxs as s, jsx as t } from "react/jsx-runtime";
import { InputSizedButton as j } from "../styled/InputSizedButton.js";
import { SYNAPSE_ENTITY_ID_REGEX as x } from "../../utils/functions/RegularExpressions.js";
import { SearchOutlined as b } from "@mui/icons-material";
import { Grid as c, TextField as A, InputAdornment as F, Typography as O } from "@mui/material";
import { useDebouncedState as h } from "@react-hookz/web";
import { EntityType as M } from "@sage-bionetworks/synapse-client";
import { omitBy as U } from "lodash-es";
import { useMemo as R, useState as I, useEffect as Y, useCallback as q } from "react";
import { useLocation as L, useNavigate as B } from "react-router";
import { EntityFinderModal as H } from "../EntityFinder/EntityFinderModal.js";
import { FinderScope as G } from "../EntityFinder/tree/EntityTree.js";
import z from "../UserSearchBox/UserSearchBox.js";
import { AccessRequirementTable as K } from "./AccessRequirementTable.js";
const S = "nameOrID", C = "relatedProjectId", y = "reviewerId", D = "type";
function se(N) {
  const { onCreateNewAccessRequirementClicked: P } = N, o = L(), i = R(
    () => new URLSearchParams(o.search),
    [o.search]
  ), E = B(), [l, g] = h(
    i.get(S) ?? "",
    500
  ), [r, m] = h(
    i.get(C) ?? void 0,
    500
  ), [n, p] = h(
    i.get(y) ?? void 0,
    500
  ), [d, v] = I(
    i.get(D) ?? void 0
  ), f = R(
    () => !!(r && !x.exec(r)),
    [r]
  ), [T, u] = I(!1);
  Y(() => {
    const e = U(
      {
        // Sync the search params state with the debounced props
        [S]: l,
        [C]: r,
        [y]: n,
        [D]: d
        // typeFilter state is not debounced
      },
      (_) => _ === void 0 || _ === ""
    ), a = new URLSearchParams(e);
    E(
      {
        pathname: o.pathname,
        search: a.toString()
      },
      { replace: !0 }
    );
  }, [
    l,
    r,
    n,
    d,
    E,
    o.pathname
  ]);
  const w = q(
    (e) => {
      p(e || void 0);
    },
    [p]
  );
  return /* @__PURE__ */ s("div", { className: "AccessRequirementDashboard", children: [
    /* @__PURE__ */ t(
      H,
      {
        configuration: {
          initialScope: G.ALL_PROJECTS,
          initialContainer: null,
          selectMultiple: !1,
          selectableTypes: [M.project],
          treeOnly: !0
        },
        show: T,
        onCancel: () => {
          u(!1);
        },
        title: "Select Project to Filter Access Requirements",
        promptCopy: "Select a project to find Access Requirements that are associated with that project. Access Requirements will be found if the Access Requirement is applied to the project, or if it is applied to any item inside the project.",
        onConfirm: (e) => {
          m(e[0].targetId), u(!1);
        },
        confirmButtonCopy: "Select"
      }
    ),
    /* @__PURE__ */ s(c, { component: "form", container: !0, spacing: 2, className: "InputPanel", children: [
      /* @__PURE__ */ t(c, { size: { xs: 12, md: 4 }, children: /* @__PURE__ */ t(
        A,
        {
          label: "Filter by Access Requirement Name or ID",
          id: "ar-name-filter",
          type: "text",
          fullWidth: !0,
          placeholder: "Search for an Access Requirement Name or ID",
          onChange: (e) => {
            g(e.target.value);
          },
          slotProps: {
            input: {
              endAdornment: /* @__PURE__ */ t(F, { position: "end", children: /* @__PURE__ */ t(b, {}) })
            }
          }
        }
      ) }),
      /* @__PURE__ */ s(
        c,
        {
          size: { xs: 12, md: 4 },
          sx: {
            display: "flex",
            gap: "5px",
            alignItems: "stretch"
          },
          children: [
            /* @__PURE__ */ t(
              A,
              {
                label: "Filter by Project",
                id: "project-id-filter",
                type: "text",
                fullWidth: !0,
                placeholder: "Enter a project SynID",
                error: f,
                helperText: f ? 'Value must be a Synapse ID, e.g. "syn1234"' : void 0,
                onChange: (e) => {
                  const a = e.target.value;
                  m(a === "" ? void 0 : a);
                }
              }
            ),
            /* @__PURE__ */ t(
              j,
              {
                variant: "outlined",
                color: "primary",
                onClick: () => {
                  u(!0);
                },
                children: "Browse"
              }
            )
          ]
        }
      ),
      /* @__PURE__ */ s(c, { size: { xs: 12, md: 4 }, children: [
        /* @__PURE__ */ t(
          O,
          {
            component: "label",
            variant: "smallText2",
            htmlFor: "reviewer-filter",
            children: "Filter by Reviewer"
          }
        ),
        /* @__PURE__ */ t(
          z,
          {
            inputId: "reviewer-filter",
            placeholder: "Search for a username or team name",
            defaultValue: n,
            onChange: w
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ t(
      K,
      {
        nameOrID: l,
        relatedProjectId: r,
        reviewerId: n,
        onCreateNewAccessRequirementClicked: P,
        typeFilter: d,
        onTypeFilterChange: v
      }
    )
  ] });
}
export {
  S as AR_NAME_OR_ID_SEARCH_PARAM_KEY,
  D as AR_TYPE_SEARCH_PARAM_KEY,
  se as AccessRequirementDashboard,
  C as RELATED_PROJECT_ID_SEARCH_PARAM_KEY,
  y as REVIEWER_ID_SEARCH_PARAM_KEY,
  se as default
};
//# sourceMappingURL=AccessRequirementDashboard.js.map