From 83f8622d15d9a3559ee6d99a4c57033190a5392d Mon Sep 17 00:00:00 2001 From: Erik Jan de Wit Date: Thu, 25 Jul 2024 07:16:23 +0200 Subject: [PATCH] Fixed feedback discussions (#31409) see: #24805 Signed-off-by: Erik Jan de Wit --- .../bread-crumb/PageBreadCrumbs.tsx | 2 +- js/apps/admin-ui/src/page/Page.tsx | 18 ++++++++-- js/apps/admin-ui/src/page/PageHandler.tsx | 2 +- js/apps/admin-ui/src/page/PageList.tsx | 34 +++++++++++++------ js/apps/admin-ui/src/page/routes.tsx | 25 +++++++++++--- 5 files changed, 62 insertions(+), 19 deletions(-) diff --git a/js/apps/admin-ui/src/components/bread-crumb/PageBreadCrumbs.tsx b/js/apps/admin-ui/src/components/bread-crumb/PageBreadCrumbs.tsx index 8317cca0d9..35ec89c4ef 100644 --- a/js/apps/admin-ui/src/components/bread-crumb/PageBreadCrumbs.tsx +++ b/js/apps/admin-ui/src/components/bread-crumb/PageBreadCrumbs.tsx @@ -25,7 +25,7 @@ export const PageBreadCrumbs = () => { const crumbs = uniqBy( useBreadcrumbs(routesWithCrumbs, { disableDefaults: true, - excludePaths: ["/", `/${realm}`], + excludePaths: ["/", `/${realm}`, `/${realm}/page-section`], }), elementText, ); diff --git a/js/apps/admin-ui/src/page/Page.tsx b/js/apps/admin-ui/src/page/Page.tsx index 6bfbdced32..a7970b18dc 100644 --- a/js/apps/admin-ui/src/page/Page.tsx +++ b/js/apps/admin-ui/src/page/Page.tsx @@ -1,8 +1,9 @@ +import { useAlerts } from "@keycloak/keycloak-ui-shared"; import { ButtonVariant, DropdownItem } from "@patternfly/react-core"; +import { get } from "lodash-es"; import { useTranslation } from "react-i18next"; import { useNavigate, useParams } from "react-router-dom"; import { useAdminClient } from "../admin-client"; -import { useAlerts } from "@keycloak/keycloak-ui-shared"; import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog"; import { ViewHeader } from "../components/view-header/ViewHeader"; import { useRealm } from "../context/realm-context/RealmContext"; @@ -10,6 +11,9 @@ import { useServerInfo } from "../context/server-info/ServerInfoProvider"; import { PageHandler } from "./PageHandler"; import { PAGE_PROVIDER } from "./PageList"; import { PageParams, toPage } from "./routes"; +import { useFetch } from "../utils/useFetch"; +import ComponentRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentRepresentation"; +import { useState } from "react"; export default function Page() { const { adminClient } = useAdminClient(); @@ -21,12 +25,19 @@ export default function Page() { const navigate = useNavigate(); const { id, providerId } = useParams(); const { addAlert, addError } = useAlerts(); + const [pageData, setPageData] = useState(); const page = pages?.find((p) => p.id === providerId); if (!page) { throw new Error(t("notFound")); } + useFetch( + async () => adminClient.components.findOne({ id: id! }), + setPageData, + [id], + ); + const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({ titleKey: "itemDeleteConfirmTitle", messageKey: "itemDeleteConfirm", @@ -48,7 +59,10 @@ export default function Page() { <> { +type DetailLinkProps = { + obj: ComponentRepresentation; + field: string; +}; + +const DetailLink = ({ obj, field }: DetailLinkProps) => { const { realm } = useRealm(); + const value = get(obj, field); return ( - {obj.id} + {value} ); }; @@ -89,7 +96,7 @@ export default function PageList() { component={(props) => ( )} > @@ -109,10 +116,15 @@ export default function PageList() { searchPlaceholderKey="searchItem" loader={loader} columns={[ - { name: "id", cellRenderer: DetailLink }, - ...page.properties.slice(0, 3).map((p) => ({ - name: `config.${p.name}[0]`, - displayKey: p.label, + ...page.metadata.displayFields.map((name: string, index: number) => ({ + name: `config.${name}[0]`, + displayKey: page.properties.find((p) => p.name === name)!.label, + cellRenderer: + index === 0 + ? (obj: ComponentRepresentation) => ( + + ) + : undefined, })), ]} ariaLabelKey="list" @@ -123,7 +135,7 @@ export default function PageList() { instructions={t("noItemsInstructions")} primaryActionText={t("createItem")} onPrimaryAction={() => - navigate(toDetailPage({ realm: realmName, providerId: page.id })) + navigate(addDetailPage({ realm: realmName, providerId: page.id })) } /> } diff --git a/js/apps/admin-ui/src/page/routes.tsx b/js/apps/admin-ui/src/page/routes.tsx index 0ffb86e383..87883fde35 100644 --- a/js/apps/admin-ui/src/page/routes.tsx +++ b/js/apps/admin-ui/src/page/routes.tsx @@ -3,7 +3,7 @@ import type { AppRouteObject } from "../routes"; import { lazy } from "react"; export type PageListParams = { realm?: string; providerId: string }; -export type PageParams = { realm: string; providerId: string; id?: string }; +export type PageParams = { realm: string; providerId: string; id: string }; const PageList = lazy(() => import("./PageList")); const Page = lazy(() => import("./Page")); @@ -18,15 +18,28 @@ const PageListRoute: AppRouteObject = { }; const PageDetailRoute: AppRouteObject = { - path: "/:realm/page/:providerId/:id?", + path: "/:realm/page-section/:providerId/:id", element: , - breadcrumb: (t) => t("page"), + breadcrumb: (t) => t("details"), handle: { access: "view-realm", }, }; -const routes: AppRouteObject[] = [PageListRoute, PageDetailRoute]; +const AddPageDetailRoute: AppRouteObject = { + path: "/:realm/page-section/:providerId/add", + element: , + breadcrumb: (t) => t("add"), + handle: { + access: "view-realm", + }, +}; + +const routes: AppRouteObject[] = [ + PageDetailRoute, + AddPageDetailRoute, + PageListRoute, +]; export const toPage = (params: PageListParams): Partial => ({ pathname: generatePath(PageListRoute.path, params), @@ -36,4 +49,8 @@ export const toDetailPage = (params: PageParams): Partial => ({ pathname: generatePath(PageDetailRoute.path, params), }); +export const addDetailPage = (params: Partial): Partial => ({ + pathname: generatePath(AddPageDetailRoute.path, params), +}); + export default routes;