wip key providers

src/components/table-toolbar/KeycloakDataTable.tsx

@@ -11,7 +11,15 @@ import {
   TableHeader,
   TableVariant,
 } from "@patternfly/react-table";
-import { Spinner } from "@patternfly/react-core";
+import {
+  DataList,
+  DataListAction,
+  DataListCell,
+  DataListItem,
+  DataListItemCells,
+  DataListItemRow,
+  Spinner,
+} from "@patternfly/react-core";
 import _ from "lodash";
 
 import { PaginatingTableToolbar } from "./PaginatingTableToolbar";
@@ -385,6 +393,45 @@ export function KeycloakDataTable<T>({
               columns={columns}
               ariaLabelKey={ariaLabelKey}
             />
+            //       <DataList
+            //   // onSelectDataListItem={(value) => {
+            //   //   setGroupId(value);
+            //   // }}
+            //   aria-label={t("groups")}
+            //   isCompact
+            //   itemOrder={itemOrder}
+            // >
+            //   {(rows!).map((component) => (
+            //     <DataListItem draggable
+            //       aria-labelledby={"aria"}
+            //       key={"key"}
+            //       id={"id"}
+            //       // onClick={(e) => {
+            //       //   if ((e.target as HTMLInputElement).type !== "checkbox") {
+            //       //     setGroupId(group.id);
+            //       //   }
+            //       // }}
+            //     >
+            //       <DataListItemRow data-testid={"group.name"}>
+
+            //         <DataListItemCells
+            //           dataListCells={[
+            //             <DataListCell key={`name}`}>
+            //               <>{Math.random()}</>
+            //             </DataListCell>,
+            //           ]}
+            //         />
+            //         <DataListAction
+            //           aria-labelledby={`select`}
+            //           id={`select`}
+            //           aria-label={t("groupName")}
+            //           isPlainButtonAction
+            //         >
+            //         </DataListAction>
+            //       </DataListItemRow>
+            //     </DataListItem>
+            //   ))}
+            // </DataList>
           )}
           {!loading &&
             rows.length === 0 &&

src/realm-settings/GeneralTab.tsx

@@ -43,34 +43,6 @@ export const RealmSettingsGeneralTab = ({
 
   const requireSslTypes = ["all", "external", "none"];
 
-<<<<<<< HEAD
-=======
-  useEffect(() => {
-    return asyncStateFetch(
-      () => adminClient.realms.findOne({ realm: realmName }),
-      (realm) => {
-        setRealm(realm);
-        setupForm(realm);
-      },
-      handleError
-    );
-  }, []);
-
-  const setupForm = (realm: RealmRepresentation) => {
-    Object.entries(realm).map((entry) => setValue(entry[0], entry[1]));
-  };
-
-  const save = async (realm: RealmRepresentation) => {
-    try {
-      await adminClient.realms.update({ realm: realmName }, realm);
-      setRealm(realm);
-      addAlert(t("saveSuccess"), AlertVariant.success);
-    } catch (error) {
-      addAlert(t("saveError", { error }), AlertVariant.danger);
-    }
-  };
-
->>>>>>> wip keys
   return (
     <>
       <PageSection variant="light">

src/realm-settings/KeysProvidersTab.tsx

@@ -1,7 +1,19 @@
 import React, { Component, useState, useEffect } from "react";
 import { useHistory, useRouteMatch } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { Button, ButtonVariant, DataList, DataListAction, DataListCell, DataListItem, DataListItemCells, DataListItemRow, PageSection } from "@patternfly/react-core";
+import {
+  Button,
+  ButtonVariant,
+  DataList,
+  DataListAction,
+  DataListCell,
+  DataListControl,
+  DataListDragButton,
+  DataListItem,
+  DataListItemCells,
+  DataListItemRow,
+  PageSection,
+} 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";
@@ -10,23 +22,32 @@ import { emptyFormatter } from "../util";
 import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
 
 import "./RealmSettingsSection.css";
-import { cellWidth } from "@patternfly/react-table";
+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";
 
 type ComponentData = KeyMetadataRepresentation & {
   providerDescription?: string;
+  name?: string;
 };
 
 type KeysTabInnerProps = {
   components: ComponentData[];
   realmComponents: ComponentRepresentation[];
   keyProviderComponentTypes: ComponentTypeRepresentation[];
-
 };
 
-export const KeysTabInner = ({ components, keyProviderComponentTypes }: KeysTabInnerProps) => {
+export const KeysTabInner = ({
+  components,
+  keyProviderComponentTypes,
+}: KeysTabInnerProps) => {
   const { t } = useTranslation("roles");
   const history = useHistory();
   const { url } = useRouteMatch();
@@ -34,41 +55,59 @@ export const KeysTabInner = ({ components, keyProviderComponentTypes }: KeysTabI
   const refresh = () => setKey(new Date().getTime());
   const errorHandler = useErrorHandler();
 
-
-  const [publicKey, setPublicKey] = useState("");
-  const [certificate, setCertificate] = useState("");
-  const [fetchedComponents, setFetchedComponents] = useState<ComponentRepresentation[]>([]);
+  const [itemOrder, setItemOrder] = useState(["data1", "data2", "data3"]);
+  const [id, setId] = useState("");
 
   const loader = async () => {
     return components;
   };
 
-//   useEffect(
-//     () =>
-//       asyncStateFetch(
-//         async () => {
-//             return components;
-//         },
-//         async () => {
+  //   useEffect(
+  //     () =>
+  //       asyncStateFetch(
+  //         async () => {
+  //             return components;
+  //         },
+  //         async () => {
 
-//             setFetchedComponents(components)
-//         },
-//         errorHandler
-//       ),
-//     []
-//   );
+  //             setFetchedComponents(components)
+  //         },
+  //         errorHandler
+  //       ),
+  //     []
+  //   );
 
   React.useEffect(() => {
     refresh();
   }, [components]);
 
-
   const goToCreate = () => history.push(`${url}/add-role`);
 
-  const ProviderDescriptionRenderer = ({ providerDescription }: ComponentData) => {
+  console.log("componentsss", components);
 
+  const onDragStart = (id: string) => {
+    console.log(itemOrder);
+    setId(id);
+  };
 
-    return <>{providerDescription}</>;
+  const onDragMove = (oldIndex, newIndex) => {
+    console.log(`Dragging item ${id}.`);
+  };
+
+  const columns = [
+    t("realm-settings:name"),
+    t("realm-settings:provider"),
+    t("realm-settings:providerDescription"),
+  ];
+
+  //   const onDragCancel = () => {
+  //     this.setState({
+  //       liveText: `Dragging cancelled. List is unchanged.`
+  //     });
+  //   };
+
+  const onDragFinish = (itemOrder) => {
+    setItemOrder(itemOrder);
   };
 
   return (
@@ -76,7 +115,7 @@ export const KeysTabInner = ({ components, keyProviderComponentTypes }: KeysTabI
       <PageSection variant="light" padding={{ default: "noPadding" }}>
         {/* <PublicKeyDialog />
         <CertificateDialog /> */}
-        <KeycloakDataTable
+        {/* <KeycloakDataTable
           key={key}
           loader={loader}
           ariaLabelKey="realm-settings:keysList"
@@ -87,6 +126,7 @@ export const KeysTabInner = ({ components, keyProviderComponentTypes }: KeysTabI
               name: "providerId",
               displayKey: "realm-settings:name",
               cellFormatters: [emptyFormatter()],
+            //   cellRenderer: DataCellRendererTest,
               transforms: [cellWidth(15)],
             },
             {
@@ -98,9 +138,9 @@ export const KeysTabInner = ({ components, keyProviderComponentTypes }: KeysTabI
             {
               name: "providerDescription",
               displayKey: "realm-settings:providerDescription",
-              cellRenderer: ProviderDescriptionRenderer,
+            //   cellRenderer: ProviderDescriptionRenderer,
               cellFormatters: [emptyFormatter()],
-            }
+            },
           ]}
           emptyState={
             <ListEmptyState
@@ -111,45 +151,81 @@ export const KeysTabInner = ({ components, keyProviderComponentTypes }: KeysTabI
               onPrimaryAction={goToCreate}
             />
           }
-        />
-        {/* <DataList
-        // onSelectDataListItem={(value) => {
-        //   setGroupId(value);
-        // }}
-        aria-label={t("groups")}
-        isCompact
-      >
-        {(keyProviderComponentTypes).map((component) => (
-          <DataListItem draggable
-            aria-labelledby={"aria"}
-            key={"key"}
-            id={"id"}
-            // onClick={(e) => {
-            //   if ((e.target as HTMLInputElement).type !== "checkbox") {
-            //     setGroupId(group.id);
-            //   }
-            // }}
-          >
-            <DataListItemRow data-testid={"group.name"}>
-
-              <DataListItemCells
+        /> */}
+        <Table
+          aria-label="Simple Table"
+          //   variant={TableVariant}
+          //   borders={choice !== 'compactBorderless'}
+          cells={columns}
+          //   rows={rows}
+        >
+          <TableHeader />
+          <TableBody />
+        </Table>
+        <DataList
+          // onSelectDataListItem={(value) => {
+          //   setGroupId(value);
+          // }}
+          aria-label={t("groups")}
+          onDragFinish={onDragFinish}
+          onDragStart={onDragStart}
+          onDragMove={onDragMove}
+          //   onDragCancel={this.onDragCancel}
+          itemOrder={itemOrder}
+          isCompact
+        >
+          {/* <DataListItem aria-labelledby={"aria"} id="data1" key="1">
+            <DataListItemRow className="test" data-testid={"group.name"}>
+              <DataListItemCells className="test2"
                 dataListCells={[
-                  <DataListCell key={`name}`}>
-                    <>{"group.name"}</>
+                  <DataListCell key={"1"}>
+                    <>{t("realm-settings:name")}</>
                   </DataListCell>,
+                  <DataListCell key={"2"}>
+                    <>{t("realm-settings:provider")}</>
+                  </DataListCell>,
+                  <DataListCell key={"3"}>
+                    <>{t("realm-settings:providerDescription")}</>
+                  </DataListCell>
                 ]}
               />
-              <DataListAction
-                aria-labelledby={`select`}
-                id={`select`}
-                aria-label={t("groupName")}
-                isPlainButtonAction
-              >
-              </DataListAction>
             </DataListItemRow>
-          </DataListItem>
-        ))}
-      </DataList> */}
+          </DataListItem> */}
+          {components.map((component, idx) => (
+            <DataListItem
+              draggable
+              aria-labelledby={"aria"}
+              key={`key-${idx + 1}`}
+              id={`data${idx + 1}`}
+            >
+              <DataListItemRow data-testid={"data-list-row"}>
+                <DataListControl>
+                  <DataListDragButton
+                    aria-label="Reorder"
+                    aria-labelledby="simple-item2"
+                    aria-describedby="Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation."
+                    aria-pressed="false"
+                  />
+                </DataListControl>
+                <DataListItemCells
+                  dataListCells={[
+                    <DataListCell key={"4"}>
+                      <>
+                        <Button variant="link">{component.providerId}</Button>
+                      </>
+                    </DataListCell>,
+                    <DataListCell key={"5"}>
+                      <>{component.name}</>
+                    </DataListCell>,
+                    <DataListCell key={"6"}>
+                      <>{component.providerDescription}</>
+                    </DataListCell>,
+                  ]}
+                />
+              </DataListItemRow>
+            </DataListItem>
+          ))}
+        </DataList>
       </PageSection>
     </>
   );
@@ -159,32 +235,34 @@ type KeysProps = {
   components: ComponentRepresentation[];
   realmComponents: ComponentRepresentation[];
   keyProviderComponentTypes: ComponentTypeRepresentation[];
-
 };
 
-
-export const KeysProviderTab = ({ components, keyProviderComponentTypes, ...props }: KeysProps) => {
-    console.log("components", components)
-    // console.log("keyz", keys)
-    // console.log("keyz", keyProviderComponentTypes)
+export const KeysProviderTab = ({
+  components,
+  keyProviderComponentTypes,
+  ...props
+}: KeysProps) => {
+  // console.log("components", components)
+  // console.log("keyz", keys)
+  // console.log("keyz", keyProviderComponentTypes)
 
   return (
     <KeysTabInner
-      components={components?.map((key) => {
+      components={components?.map((component) => {
         const provider = keyProviderComponentTypes.find(
-          (component: ComponentTypeRepresentation) =>
-            component.id === key.providerId
+          (componentType: ComponentTypeRepresentation) =>
+            component.providerId === componentType.id
         );
-        return { ...key, providerDescription: provider?.helpText };
+        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 };
-    //   })}
+      //   keyProviderComponentTypes={keyProviderComponentTypes?.map((key) => {
+      //     const provider = keyProviderComponentTypes.find(
+      //       (key: key) =>
+      //         component.id === key.providerId
+      //     );
+      //     return { ...key, provider: provider?.providerId };
+      //   })}
       {...props}
     />
   );

src/realm-settings/LoginTab.tsx

@@ -6,30 +6,10 @@ import { HelpItem } from "../components/help-enabler/HelpItem";
 import { FormPanel } from "../components/scroll-form/FormPanel";
 import type RealmRepresentation from "keycloak-admin/lib/defs/realmRepresentation";
 
-<<<<<<< HEAD
 type RealmSettingsLoginTabProps = {
   save: (realm: RealmRepresentation) => void;
   realm: RealmRepresentation;
 };
-=======
-export const RealmSettingsLoginTab = () => {
-  const { t } = useTranslation("realm-settings");
-  const [realm, setRealm] = useState<RealmRepresentation>();
-  const handleError = useErrorHandler();
-  const adminClient = useAdminClient();
-  const { realm: realmName } = useRealm();
-  const { addAlert } = useAlerts();
-
-  useEffect(() => {
-    return asyncStateFetch(
-      () => adminClient.realms.findOne({ realm: realmName }),
-      (realm) => {
-        setRealm(realm);
-      },
-      handleError
-    );
-  }, []);
->>>>>>> wip keys
 
 export const RealmSettingsLoginTab = ({
   save,

src/realm-settings/RealmSettingsSection.css

@@ -20,3 +20,7 @@ div.pf-c-card__body.kc-form-panel__body {
 button#kc-certificate.pf-c-button.pf-m-secondary {
   margin-left: var(--pf-global--spacer--md);
 }
+
+.pf-c-data-list__item-row.test {
+  font-weight: bold;
+}

src/realm-settings/RealmSettingsSection.tsx

@@ -30,6 +30,7 @@ import { KeysListTab } from "./KeysListTab";
 import { KeyMetadataRepresentation } from "keycloak-admin/lib/defs/keyMetadataRepresentation";
 import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
 import { KeysProviderTab } from "./KeysProvidersTab";
+import { useServerInfo } from "../context/server-info/ServerInfoProvider";
 
 type RealmSettingsHeaderProps = {
   onChange: (value: boolean) => void;
@@ -135,6 +136,10 @@ export const RealmSettingsSection = () => {
     ComponentRepresentation[]
   >([]);
 
+  const kpComponentTypes = useServerInfo().componentTypes![
+    "org.keycloak.keys.KeyProvider"
+  ];
+
   useFetch(
     () => adminClient.realms.findOne({ realm: realmName }),
     (realm) => {
@@ -249,7 +254,11 @@ export const RealmSettingsSection = () => {
                   eventKey={1}
                   title={<TabTitleText>{t("providers")}</TabTitleText>}
                 >
-                  {/* <KeysProviderTab /> */}
+                  <KeysProviderTab
+                    components={realmComponents}
+                    realmComponents={realmComponents}
+                    keyProviderComponentTypes={kpComponentTypes}
+                  />
                 </Tab>
               </Tabs>
             </Tab>

src/realm-settings/messages.json

@@ -36,8 +36,10 @@
     "providers": "Providers",
     "algorithm": "Algorithm",
     "type": "Type",
+    "name": "Name",
     "kid": "Kid",
     "provider": "Provider",
+    "providerDescription": "Provider description",
     "publicKeys": "Public keys",
     "certificate": "Certificate",
     "userRegistration": "User registration",