@keycloakify/keycloak-account-ui 25.0.1-rc.0

package/src/resources/PermissionRequest.tsx

@@ -0,0 +1,129 @@
+import {
+  Badge,
+  Button,
+  Chip,
+  Icon,
+  Modal,
+  ModalVariant,
+  Text,
+} from "@patternfly/react-core";
+import { UserCheckIcon } from "@patternfly/react-icons";
+import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useAlerts, useEnvironment } from "@keycloakify/keycloak-account-ui/ui-shared";
+import { fetchPermission, updateRequest } from "@keycloakify/keycloak-account-ui/api";
+import { Permission, Resource } from "@keycloakify/keycloak-account-ui/api/representations";
+
+type PermissionRequestProps = {
+  resource: Resource;
+  refresh: () => void;
+};
+
+export const PermissionRequest = ({
+  resource,
+  refresh,
+}: PermissionRequestProps) => {
+  const { t } = useTranslation();
+  const context = useEnvironment();
+  const { addAlert, addError } = useAlerts();
+
+  const [open, setOpen] = useState(false);
+
+  const toggle = () => setOpen(!open);
+
+  const approveDeny = async (
+    shareRequest: Permission,
+    approve: boolean = false,
+  ) => {
+    try {
+      const permissions = await fetchPermission({ context }, resource._id);
+      const { scopes, username } = permissions.find(
+        (p) => p.username === shareRequest.username,
+      ) || { scopes: [], username: shareRequest.username };
+
+      await updateRequest(
+        context,
+        resource._id,
+        username,
+        approve
+          ? [...(scopes as string[]), ...(shareRequest.scopes as string[])]
+          : scopes,
+      );
+      addAlert(t("shareSuccess"));
+      toggle();
+      refresh();
+    } catch (error) {
+      addError(t("shareError", { error }).toString());
+    }
+  };
+
+  return (
+    <>
+      <Button variant="link" onClick={toggle}>
+        <Icon size="lg">
+          <UserCheckIcon />
+        </Icon>
+        <Badge>{resource.shareRequests?.length}</Badge>
+      </Button>
+      <Modal
+        title={t("permissionRequest", { name: resource.name })}
+        variant={ModalVariant.large}
+        isOpen={open}
+        onClose={toggle}
+        actions={[
+          <Button key="close" variant="link" onClick={toggle}>
+            {t("close")}
+          </Button>,
+        ]}
+      >
+        <Table aria-label={t("resources")}>
+          <Thead>
+            <Tr>
+              <Th>{t("requestor")}</Th>
+              <Th>{t("permissionRequests")}</Th>
+              <Th aria-hidden="true"></Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {resource.shareRequests?.map((shareRequest) => (
+              <Tr key={shareRequest.username}>
+                <Td>
+                  {shareRequest.firstName} {shareRequest.lastName}{" "}
+                  {shareRequest.lastName ? "" : shareRequest.username}
+                  <br />
+                  <Text component="small">{shareRequest.email}</Text>
+                </Td>
+                <Td>
+                  {shareRequest.scopes.map((scope) => (
+                    <Chip key={scope.toString()} isReadOnly>
+                      {scope as string}
+                    </Chip>
+                  ))}
+                </Td>
+                <Td>
+                  <Button
+                    onClick={() => {
+                      approveDeny(shareRequest, true);
+                    }}
+                  >
+                    {t("accept")}
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      approveDeny(shareRequest);
+                    }}
+                    className="pf-v5-u-ml-sm"
+                    variant="danger"
+                  >
+                    {t("deny")}
+                  </Button>
+                </Td>
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </Modal>
+    </>
+  );
+};

package/src/resources/ResourceToolbar.tsx

@@ -0,0 +1,87 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Pagination,
+  SearchInput,
+  PaginationToggleTemplateProps,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+} from "@patternfly/react-core";
+
+type ResourceToolbarProps = {
+  onFilter: (nameFilter: string) => void;
+  count: number;
+  first: number;
+  max: number;
+  onNextClick: (page: number) => void;
+  onPreviousClick: (page: number) => void;
+  onPerPageSelect: (max: number, first: number) => void;
+  hasNext: boolean;
+};
+
+export const ResourceToolbar = ({
+  count,
+  first,
+  max,
+  onNextClick,
+  onPreviousClick,
+  onPerPageSelect,
+  onFilter,
+  hasNext,
+}: ResourceToolbarProps) => {
+  const { t } = useTranslation();
+  const [nameFilter, setNameFilter] = useState("");
+
+  const page = Math.round(first / max) + 1;
+  return (
+    <Toolbar>
+      <ToolbarContent>
+        <ToolbarItem>
+          <SearchInput
+            placeholder={t("filterByName")}
+            aria-label={t("filterByName")}
+            value={nameFilter}
+            onChange={(_, value) => {
+              setNameFilter(value);
+            }}
+            onSearch={() => onFilter(nameFilter)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                onFilter(nameFilter);
+              }
+            }}
+            onClear={() => {
+              setNameFilter("");
+              onFilter("");
+            }}
+          />
+        </ToolbarItem>
+        <ToolbarItem variant="pagination">
+          <Pagination
+            isCompact
+            perPageOptions={[
+              { title: "5", value: 5 },
+              { title: "10", value: 10 },
+              { title: "20", value: 20 },
+            ]}
+            toggleTemplate={({
+              firstIndex,
+              lastIndex,
+            }: PaginationToggleTemplateProps) => (
+              <b>
+                {firstIndex} - {lastIndex}
+              </b>
+            )}
+            itemCount={count + (page - 1) * max + (hasNext ? 1 : 0)}
+            page={page}
+            perPage={max}
+            onNextClick={(_, p) => onNextClick((p - 1) * max)}
+            onPreviousClick={(_, p) => onPreviousClick((p - 1) * max)}
+            onPerPageSelect={(_, m, f) => onPerPageSelect(f - 1, m)}
+          />
+        </ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+};

package/src/resources/Resources.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Tab, Tabs, TabTitleText } from "@patternfly/react-core";
+
+import { ResourcesTab } from "@keycloakify/keycloak-account-ui/resources/ResourcesTab";
+import { Page } from "@keycloakify/keycloak-account-ui/components/page/Page";
+
+export const Resources = () => {
+  const { t } = useTranslation();
+  const [activeTabKey, setActiveTabKey] = useState(0);
+
+  return (
+    <Page title={t("resources")} description={t("resourceIntroMessage")}>
+      <Tabs
+        activeKey={activeTabKey}
+        onSelect={(_, key) => setActiveTabKey(key as number)}
+        mountOnEnter
+        unmountOnExit
+      >
+        <Tab
+          data-testid="myResources"
+          eventKey={0}
+          title={<TabTitleText>{t("myResources")}</TabTitleText>}
+        >
+          <ResourcesTab />
+        </Tab>
+        <Tab
+          data-testid="sharedWithMe"
+          eventKey={1}
+          title={<TabTitleText>{t("sharedWithMe")}</TabTitleText>}
+        >
+          <ResourcesTab isShared />
+        </Tab>
+      </Tabs>
+    </Page>
+  );
+};
+
+export default Resources;

package/src/resources/ResourcesTab.tsx

@@ -0,0 +1,410 @@
+import {
+  Button,
+  Chip,
+  ChipGroup,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  OverflowMenu,
+  OverflowMenuContent,
+  OverflowMenuControl,
+  OverflowMenuDropdownItem,
+  OverflowMenuGroup,
+  OverflowMenuItem,
+  Spinner,
+} from "@patternfly/react-core";
+import {
+  EditAltIcon,
+  EllipsisVIcon,
+  ExternalLinkAltIcon,
+  Remove2Icon,
+  ShareAltIcon,
+} from "@patternfly/react-icons";
+import {
+  ExpandableRowContent,
+  Table,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+} from "@patternfly/react-table";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ContinueCancelModal,
+  useAlerts,
+  useEnvironment,
+} from "@keycloakify/keycloak-account-ui/ui-shared";
+import { fetchPermission, fetchResources, updatePermissions } from "@keycloakify/keycloak-account-ui/api";
+import { getPermissionRequests } from "@keycloakify/keycloak-account-ui/api/methods";
+import { Links } from "@keycloakify/keycloak-account-ui/api/parse-links";
+import { Permission, Resource } from "@keycloakify/keycloak-account-ui/api/representations";
+import { usePromise } from "@keycloakify/keycloak-account-ui/utils/usePromise";
+import { EditTheResource } from "@keycloakify/keycloak-account-ui/resources/EditTheResource";
+import { PermissionRequest } from "@keycloakify/keycloak-account-ui/resources/PermissionRequest";
+import { ResourceToolbar } from "@keycloakify/keycloak-account-ui/resources/ResourceToolbar";
+import { ShareTheResource } from "@keycloakify/keycloak-account-ui/resources/ShareTheResource";
+import { SharedWith } from "@keycloakify/keycloak-account-ui/resources/SharedWith";
+
+type PermissionDetail = {
+  contextOpen?: boolean;
+  rowOpen?: boolean;
+  shareDialogOpen?: boolean;
+  editDialogOpen?: boolean;
+  permissions?: Permission[];
+};
+
+type ResourcesTabProps = {
+  isShared?: boolean;
+};
+
+export const ResourcesTab = ({ isShared = false }: ResourcesTabProps) => {
+  const { t } = useTranslation();
+  const context = useEnvironment();
+  const { addAlert, addError } = useAlerts();
+
+  const [params, setParams] = useState<Record<string, string>>({
+    first: "0",
+    max: "5",
+  });
+  const [links, setLinks] = useState<Links | undefined>();
+  const [resources, setResources] = useState<Resource[]>();
+  const [details, setDetails] = useState<
+    Record<string, PermissionDetail | undefined>
+  >({});
+  const [key, setKey] = useState(1);
+  const refresh = () => setKey(key + 1);
+
+  usePromise(
+    async (signal) => {
+      const result = await fetchResources(
+        { signal, context },
+        params,
+        isShared,
+      );
+      if (!isShared)
+        await Promise.all(
+          result.data.map(
+            async (r) =>
+              (r.shareRequests = await getPermissionRequests(r._id, {
+                signal,
+                context,
+              })),
+          ),
+        );
+      return result;
+    },
+    ({ data, links }) => {
+      setResources(data);
+      setLinks(links);
+    },
+    [params, key],
+  );
+
+  if (!resources) {
+    return <Spinner />;
+  }
+
+  const fetchPermissions = async (id: string) => {
+    let permissions = details[id]?.permissions || [];
+    if (!details[id]) {
+      permissions = await fetchPermission({ context }, id);
+    }
+    return permissions;
+  };
+
+  const removeShare = async (resource: Resource) => {
+    try {
+      const permissions = (await fetchPermissions(resource._id)).map(
+        ({ username }) =>
+          ({
+            username,
+            scopes: [],
+          }) as Permission,
+      )!;
+      await updatePermissions(context, resource._id, permissions);
+      setDetails({});
+      addAlert(t("unShareSuccess"));
+    } catch (error) {
+      addError(t("unShareError", { error }).toString());
+    }
+  };
+
+  const toggleOpen = async (
+    id: string,
+    field: keyof PermissionDetail,
+    open: boolean,
+  ) => {
+    const permissions = await fetchPermissions(id);
+
+    setDetails({
+      ...details,
+      [id]: { ...details[id], [field]: open, permissions },
+    });
+  };
+
+  return (
+    <>
+      <ResourceToolbar
+        onFilter={(name) => setParams({ ...params, name })}
+        count={resources.length}
+        first={parseInt(params["first"])}
+        max={parseInt(params["max"])}
+        onNextClick={() => setParams(links?.next || {})}
+        onPreviousClick={() => setParams(links?.prev || {})}
+        onPerPageSelect={(first, max) =>
+          setParams({ first: `${first}`, max: `${max}` })
+        }
+        hasNext={!!links?.next}
+      />
+      <Table aria-label={t("resources")}>
+        <Thead>
+          <Tr>
+            <Th aria-hidden="true" />
+            <Th>{t("resourceName")}</Th>
+            <Th>{t("application")}</Th>
+            <Th aria-hidden={isShared}>
+              {!isShared ? t("permissionRequests") : ""}
+            </Th>
+          </Tr>
+        </Thead>
+        {resources.map((resource, index) => (
+          <Tbody
+            key={resource.name}
+            isExpanded={details[resource._id]?.rowOpen}
+          >
+            <Tr>
+              <Td
+                data-testid={`expand-${resource.name}`}
+                expand={
+                  !isShared
+                    ? {
+                        isExpanded: details[resource._id]?.rowOpen || false,
+                        rowIndex: index,
+                        onToggle: () =>
+                          toggleOpen(
+                            resource._id,
+                            "rowOpen",
+                            !details[resource._id]?.rowOpen,
+                          ),
+                      }
+                    : undefined
+                }
+              />
+              <Td
+                dataLabel={t("resourceName")}
+                data-testid={`row[${index}].name`}
+              >
+                {resource.name}
+              </Td>
+              <Td dataLabel={t("application")}>
+                <a href={resource.client.baseUrl}>
+                  {resource.client.name || resource.client.clientId}{" "}
+                  <ExternalLinkAltIcon />
+                </a>
+              </Td>
+              <Td dataLabel={t("permissionRequests")}>
+                {resource.shareRequests &&
+                  resource.shareRequests.length > 0 && (
+                    <PermissionRequest
+                      resource={resource}
+                      refresh={() => refresh()}
+                    />
+                  )}
+                <ShareTheResource
+                  resource={resource}
+                  permissions={details[resource._id]?.permissions}
+                  open={details[resource._id]?.shareDialogOpen || false}
+                  onClose={() => setDetails({})}
+                />
+                {details[resource._id]?.editDialogOpen && (
+                  <EditTheResource
+                    resource={resource}
+                    permissions={details[resource._id]?.permissions}
+                    onClose={() => setDetails({})}
+                  />
+                )}
+              </Td>
+              {isShared ? (
+                <Td>
+                  {resource.scopes.length > 0 && (
+                    <ChipGroup categoryName={t("permissions")}>
+                      {resource.scopes.map((scope) => (
+                        <Chip key={scope.name} isReadOnly>
+                          {scope.displayName || scope.name}
+                        </Chip>
+                      ))}
+                    </ChipGroup>
+                  )}
+                </Td>
+              ) : (
+                <Td isActionCell>
+                  <OverflowMenu breakpoint="lg">
+                    <OverflowMenuContent>
+                      <OverflowMenuGroup groupType="button">
+                        <OverflowMenuItem>
+                          <Button
+                            data-testid={`share-${resource.name}`}
+                            variant="link"
+                            onClick={() =>
+                              toggleOpen(resource._id, "shareDialogOpen", true)
+                            }
+                          >
+                            <ShareAltIcon /> {t("share")}
+                          </Button>
+                        </OverflowMenuItem>
+                        <OverflowMenuItem>
+                          <Dropdown
+                            popperProps={{
+                              position: "right",
+                            }}
+                            onOpenChange={(isOpen) =>
+                              toggleOpen(resource._id, "contextOpen", isOpen)
+                            }
+                            toggle={(ref) => (
+                              <MenuToggle
+                                variant="plain"
+                                ref={ref}
+                                onClick={() =>
+                                  toggleOpen(
+                                    resource._id,
+                                    "contextOpen",
+                                    !details[resource._id]?.contextOpen,
+                                  )
+                                }
+                                isExpanded={details[resource._id]?.contextOpen}
+                              >
+                                <EllipsisVIcon />
+                              </MenuToggle>
+                            )}
+                            isOpen={!!details[resource._id]?.contextOpen}
+                          >
+                            <DropdownList>
+                              <DropdownItem
+                                isDisabled={
+                                  details[resource._id]?.permissions?.length ===
+                                  0
+                                }
+                                onClick={() =>
+                                  toggleOpen(
+                                    resource._id,
+                                    "editDialogOpen",
+                                    true,
+                                  )
+                                }
+                              >
+                                <EditAltIcon /> {t("edit")}
+                              </DropdownItem>
+                              <ContinueCancelModal
+                                buttonTitle={
+                                  <>
+                                    <Remove2Icon /> {t("unShare")}
+                                  </>
+                                }
+                                modalTitle={t("unShare")}
+                                continueLabel={t("confirm")}
+                                cancelLabel={t("cancel")}
+                                component={DropdownItem}
+                                onContinue={() => removeShare(resource)}
+                                isDisabled={
+                                  details[resource._id]?.permissions?.length ===
+                                  0
+                                }
+                              >
+                                {t("unShareAllConfirm")}
+                              </ContinueCancelModal>
+                            </DropdownList>
+                          </Dropdown>
+                        </OverflowMenuItem>
+                      </OverflowMenuGroup>
+                    </OverflowMenuContent>
+                    <OverflowMenuControl>
+                      <Dropdown
+                        popperProps={{
+                          position: "right",
+                        }}
+                        onOpenChange={(isOpen) =>
+                          toggleOpen(resource._id, "contextOpen", isOpen)
+                        }
+                        toggle={(ref) => (
+                          <MenuToggle
+                            variant="plain"
+                            ref={ref}
+                            isExpanded={details[resource._id]?.contextOpen}
+                            onClick={() =>
+                              toggleOpen(
+                                resource._id,
+                                "contextOpen",
+                                !details[resource._id]?.contextOpen,
+                              )
+                            }
+                          >
+                            <EllipsisVIcon />
+                          </MenuToggle>
+                        )}
+                        isOpen={!!details[resource._id]?.contextOpen}
+                      >
+                        <DropdownList>
+                          <OverflowMenuDropdownItem
+                            key="share"
+                            isShared
+                            onClick={() =>
+                              toggleOpen(resource._id, "shareDialogOpen", true)
+                            }
+                          >
+                            <ShareAltIcon /> {t("share")}
+                          </OverflowMenuDropdownItem>
+                          <OverflowMenuDropdownItem
+                            key="edit"
+                            isShared
+                            onClick={() =>
+                              toggleOpen(resource._id, "editDialogOpen", true)
+                            }
+                            isDisabled={
+                              details[resource._id]?.permissions?.length === 0
+                            }
+                          >
+                            <EditAltIcon /> {t("edit")}
+                          </OverflowMenuDropdownItem>
+                          <ContinueCancelModal
+                            key="unShare"
+                            buttonTitle={
+                              <>
+                                <Remove2Icon /> {t("unShare")}
+                              </>
+                            }
+                            modalTitle={t("unShare")}
+                            continueLabel={t("confirm")}
+                            cancelLabel={t("cancel")}
+                            component={OverflowMenuDropdownItem}
+                            onContinue={() => removeShare(resource)}
+                            isDisabled={
+                              details[resource._id]?.permissions?.length === 0
+                            }
+                          >
+                            {t("unShareAllConfirm")}
+                          </ContinueCancelModal>
+                        </DropdownList>
+                      </Dropdown>
+                    </OverflowMenuControl>
+                  </OverflowMenu>
+                </Td>
+              )}
+            </Tr>
+            <Tr isExpanded={details[resource._id]?.rowOpen || false}>
+              <Td colSpan={4} textCenter>
+                <ExpandableRowContent>
+                  <SharedWith
+                    permissions={details[resource._id]?.permissions}
+                  />
+                </ExpandableRowContent>
+              </Td>
+            </Tr>
+          </Tbody>
+        ))}
+      </Table>
+    </>
+  );
+};