From 345c924e0f48ac19e37eb8765a8d6fd2a0630360 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Tue, 4 May 2021 15:25:36 -0400 Subject: [PATCH] add providers and search functionality --- .../table-toolbar/KeycloakDataTable.tsx | 56 +--- src/realm-settings/KeysProvidersTab.tsx | 256 ++++++++---------- src/realm-settings/RealmSettingsSection.css | 27 +- src/realm-settings/messages.json | 7 +- 4 files changed, 157 insertions(+), 189 deletions(-) diff --git a/src/components/table-toolbar/KeycloakDataTable.tsx b/src/components/table-toolbar/KeycloakDataTable.tsx index d7cc3b4e68..991ba01636 100644 --- a/src/components/table-toolbar/KeycloakDataTable.tsx +++ b/src/components/table-toolbar/KeycloakDataTable.tsx @@ -11,15 +11,7 @@ import { TableHeader, TableVariant, } from "@patternfly/react-table"; -import { - DataList, - DataListAction, - DataListCell, - DataListItem, - DataListItemCells, - DataListItemRow, - Spinner, -} from "@patternfly/react-core"; +import { Spinner } from "@patternfly/react-core"; import _ from "lodash"; import { PaginatingTableToolbar } from "./PaginatingTableToolbar"; @@ -55,6 +47,7 @@ type DataTableProps = { onSelect?: (isSelected: boolean, rowIndex: number) => void; onCollapse?: (isOpen: boolean, rowIndex: number) => void; canSelectAll: boolean; + isNotCompact?: boolean; }; function DataTable({ @@ -66,13 +59,14 @@ function DataTable({ onSelect, onCollapse, canSelectAll, + isNotCompact, ...props }: DataTableProps) { const { t } = useTranslation(); return ( onSelect(isSelected, rowIndex) @@ -132,6 +126,7 @@ export type DataListProps = { toolbarItem?: ReactNode; emptyState?: ReactNode; icon?: React.ComponentClass; + isNotCompact?: boolean; }; /** @@ -163,6 +158,7 @@ export function KeycloakDataTable({ isPaginated = false, onSelect, canSelectAll = false, + isNotCompact, detailColumns, isRowDisabled, loader, @@ -391,47 +387,9 @@ export function KeycloakDataTable({ actionResolver={actionResolver} rows={filteredData || rows} columns={columns} + isNotCompact={isNotCompact} ariaLabelKey={ariaLabelKey} /> - // { - // // setGroupId(value); - // // }} - // aria-label={t("groups")} - // isCompact - // itemOrder={itemOrder} - // > - // {(rows!).map((component) => ( - // { - // // if ((e.target as HTMLInputElement).type !== "checkbox") { - // // setGroupId(group.id); - // // } - // // }} - // > - // - - // - // <>{Math.random()} - // , - // ]} - // /> - // - // - // - // - // ))} - // )} {!loading && rows.length === 0 && diff --git a/src/realm-settings/KeysProvidersTab.tsx b/src/realm-settings/KeysProvidersTab.tsx index 6ea9a4727e..1bc63dd242 100644 --- a/src/realm-settings/KeysProvidersTab.tsx +++ b/src/realm-settings/KeysProvidersTab.tsx @@ -1,37 +1,30 @@ -import React, { Component, useState, useEffect } from "react"; -import { useHistory, useRouteMatch } from "react-router-dom"; +import React, { useState, useEffect } from "react"; import { useTranslation } from "react-i18next"; import { Button, ButtonVariant, DataList, - DataListAction, DataListCell, DataListControl, DataListDragButton, DataListItem, DataListItemCells, DataListItemRow, + Dropdown, + DropdownToggle, + InputGroup, PageSection, + TextInput, + Toolbar, + ToolbarGroup, + ToolbarItem, } from "@patternfly/react-core"; import { KeyMetadataRepresentation } from "keycloak-admin/lib/defs/keyMetadataRepresentation"; -import { ListEmptyState } from "../components/list-empty-state/ListEmptyState"; -import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable"; -import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog"; -import { emptyFormatter } from "../util"; import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation"; import "./RealmSettingsSection.css"; -import { - cellWidth, - Table, - TableBody, - TableHeader, - TableVariant, -} from "@patternfly/react-table"; import ComponentTypeRepresentation from "keycloak-admin/lib/defs/componentTypeRepresentation"; -import { asyncStateFetch } from "../context/auth/AdminClient"; -import { useErrorHandler } from "react-error-boundary"; +import { SearchIcon } from "@patternfly/react-icons"; type ComponentData = KeyMetadataRepresentation & { providerDescription?: string; @@ -44,163 +37,158 @@ type KeysTabInnerProps = { keyProviderComponentTypes: ComponentTypeRepresentation[]; }; -export const KeysTabInner = ({ - components, - keyProviderComponentTypes, -}: KeysTabInnerProps) => { +export const KeysTabInner = ({ components }: KeysTabInnerProps) => { const { t } = useTranslation("roles"); - const history = useHistory(); - const { url } = useRouteMatch(); - const [key, setKey] = useState(0); - const refresh = () => setKey(new Date().getTime()); - const errorHandler = useErrorHandler(); - const [itemOrder, setItemOrder] = useState(["data1", "data2", "data3"]); const [id, setId] = useState(""); + const [searchVal, setSearchVal] = useState(""); + const [filteredComponents, setFilteredComponents] = useState( + [] + ); - const loader = async () => { - return components; - }; + const itemIds = components.map((item, idx) => "data" + idx); - // useEffect( - // () => - // asyncStateFetch( - // async () => { - // return components; - // }, - // async () => { + const [itemOrder, setItemOrder] = useState([]); - // setFetchedComponents(components) - // }, - // errorHandler - // ), - // [] - // ); + console.log("itemord", itemOrder); - React.useEffect(() => { - refresh(); - }, [components]); + const [liveText, setLiveText] = useState(""); - const goToCreate = () => history.push(`${url}/add-role`); - - console.log("componentsss", components); + useEffect(() => { + setItemOrder(["data", ...itemIds]); + }, [components, searchVal]); const onDragStart = (id: string) => { - console.log(itemOrder); + setLiveText(t("onDragStart", { id })); setId(id); }; - const onDragMove = (oldIndex, newIndex) => { - console.log(`Dragging item ${id}.`); + const onDragMove = () => { + setLiveText(t("onDragMove", { id })); }; - const columns = [ - t("realm-settings:name"), - t("realm-settings:provider"), - t("realm-settings:providerDescription"), - ]; + const onDragCancel = () => { + setLiveText(t("onDragCancel")); + }; - // const onDragCancel = () => { - // this.setState({ - // liveText: `Dragging cancelled. List is unchanged.` - // }); - // }; + const onDragFinish = (itemOrder: string[]) => { + setItemOrder(["data", ...itemOrder.filter((i) => i !== "data")]); + setLiveText(t("onDragCancel")); + }; - const onDragFinish = (itemOrder) => { - setItemOrder(itemOrder); + const onSearch = () => { + if (searchVal !== "") { + setSearchVal(searchVal); + const x = components.filter((v) => { + return v.name?.includes(searchVal) || v.providerId?.includes(searchVal); + }); + setFilteredComponents(x); + } else { + setSearchVal(""); + setFilteredComponents(components); + } + }; + + const handleKeyDown = (e: any) => { + if (e.key === "Enter") { + onSearch(); + } + }; + + const handleInputChange = (value: string) => { + setSearchVal(value); }; return ( <> - {/* - */} - {/* - } - /> */} -
- - -
+ + <> + + + + + + + + + {}} + toggle={ + + {t("realm-settings:addProvider")} + + } + /> + + + + + { - // setGroupId(value); - // }} aria-label={t("groups")} onDragFinish={onDragFinish} onDragStart={onDragStart} onDragMove={onDragMove} - // onDragCancel={this.onDragCancel} + onDragCancel={onDragCancel} itemOrder={itemOrder} isCompact > - {/* - - + + + + <>{t("realm-settings:name")} , - + <>{t("realm-settings:provider")} , - + <>{t("realm-settings:providerDescription")} - + , ]} /> - */} - {components.map((component, idx) => ( + + {(filteredComponents.length === 0 + ? components + : filteredComponents + ).map((component, idx) => ( ))} +
+ {liveText} +
); @@ -242,10 +233,6 @@ export const KeysProviderTab = ({ keyProviderComponentTypes, ...props }: KeysProps) => { - // console.log("components", components) - // console.log("keyz", keys) - // console.log("keyz", keyProviderComponentTypes) - return ( { @@ -256,13 +243,6 @@ export const KeysProviderTab = ({ return { ...component, providerDescription: provider?.helpText }; })} keyProviderComponentTypes={keyProviderComponentTypes} - // keyProviderComponentTypes={keyProviderComponentTypes?.map((key) => { - // const provider = keyProviderComponentTypes.find( - // (key: key) => - // component.id === key.providerId - // ); - // return { ...key, provider: provider?.providerId }; - // })} {...props} /> ); diff --git a/src/realm-settings/RealmSettingsSection.css b/src/realm-settings/RealmSettingsSection.css index a6bd54b633..939a08979f 100644 --- a/src/realm-settings/RealmSettingsSection.css +++ b/src/realm-settings/RealmSettingsSection.css @@ -23,4 +23,29 @@ button#kc-certificate.pf-c-button.pf-m-secondary { .pf-c-data-list__item-row.test { font-weight: bold; -} \ No newline at end of file +} + +.pf-c-data-list__item-content.test2 { + margin-left: var(--pf-global--spacer--xl); +} + +button.pf-c-data-list__item-draggable-button.pf-m-disabled.header-drag-button { + /* --pf-c-data-list__item-draggable-button-icon--Color: white; */ + display: none; +} + +button.pf-c-data-list__item-draggable-button.row-drag-button { + padding-top: var(--pf-global--spacer--md); +} + +.pf-c-data-list__item-control { + margin-right: 0px; +} + +button.pf-c-button.pf-m-link.add-provider { + padding: 0px; +} + +.pf-c-toolbar__group.providers-toolbar { + padding-left: var(--pf-c-toolbar__content--PaddingLeft); +} diff --git a/src/realm-settings/messages.json b/src/realm-settings/messages.json index c36888fc59..dd791355f3 100644 --- a/src/realm-settings/messages.json +++ b/src/realm-settings/messages.json @@ -40,6 +40,7 @@ "kid": "Kid", "provider": "Provider", "providerDescription": "Provider description", + "addProvider": "Add provider", "publicKeys": "Public keys", "certificate": "Certificate", "userRegistration": "User registration", @@ -104,5 +105,9 @@ "partial-import": { "partialImportHeaderText": "Partial import allows you to import users, clients, and resources from a previously exported json file.", "import": "Import" - } + }, + "onDragStart": "Dragging started for item {{id}}", + "onDragMove": "Dragging item {{id}}", + "onDragCancel": "Dragging cancelled. List is unchanged.", + "onDragFinish": "Dragging finished {{list}}" }