Merge pull request #255 from edewit/rename-datalist

renamed data list and documented

src/client-scopes/ClientScopesSection.tsx

@@ -6,7 +6,7 @@ import ClientScopeRepresentation from "keycloak-admin/lib/defs/clientScopeRepres
 
 import { useAdminClient } from "../context/auth/AdminClient";
 import { ViewHeader } from "../components/view-header/ViewHeader";
-import { DataList } from "../components/table-toolbar/DataList";
+import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
 
 export const ClientScopesSection = () => {
   const { t } = useTranslation("client-scopes");
@@ -30,7 +30,7 @@ export const ClientScopesSection = () => {
         subKey="client-scopes:clientScopeExplain"
       />
       <PageSection variant="light">
-        <DataList
+        <KeycloakDataTable
           loader={loader}
           ariaLabelKey="client-scopes:clientScopeList"
           searchPlaceholderKey="client-scopes:searchFor"

src/clients/ClientsSection.tsx

@@ -10,7 +10,7 @@ import {
 
 import { ViewHeader } from "../components/view-header/ViewHeader";
 import { useAdminClient } from "../context/auth/AdminClient";
-import { DataList } from "../components/table-toolbar/DataList";
+import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
 import { IFormatter, IFormatterValueType } from "@patternfly/react-table";
 import { exportClient } from "../util";
 import { useAlerts } from "../components/alert/Alerts";
@@ -64,7 +64,7 @@ export const ClientsSection = () => {
         subKey="clients:clientsExplain"
       />
       <PageSection variant="light">
-        <DataList
+        <KeycloakDataTable
           loader={loader}
           isPaginated
           ariaLabelKey="clients:clientList"

src/components/table-toolbar/KeycloakDataTable.tsx

@@ -71,7 +71,28 @@ export type DataListProps<T> = {
   emptyState?: ReactNode;
 };
 
-export function DataList<T>({
+/**
+ * A generic component that can be used to show the initial list most sections have. Takes care of the loading of the date and filtering.
+ * All you have to define is how the columns are displayed.
+ * @example
+ *   <KeycloakDataTable columns={[
+ *     {
+ *        name: "clientId", //name of the field from the array of object the loader returns to display in this column
+ *        displayKey: "clients:clientID", //i18n key to use to lookup the name of the column header
+ *        cellRenderer: ClientDetailLink, //optionally you can use a component to render the column when you don't want just the content of the field, the whole row / entire object is passed in.
+ *     }
+ *   ]}
+ * @param {Object} props - The properties.
+ * @param {string} props.ariaLabelKey - The aria label key i18n key to lookup the label
+ * @param {string} props.searchPlaceholderKey - The i18n key to lookup the placeholder for the search box
+ * @param {boolean} props.isPaginated - if true the the loader will be called with first, max and search and a pager will be added in the header
+ * @param {(first?: number, max?: number, search?: string) => Promise<T[]>} props.loader - loader function that will fetch the data to display first, max and search are only applicable when isPaginated = true
+ * @param {Field<T>} props.columns - definition of the columns
+ * @param {Action[]} props.actions - the actions that appear on the row
+ * @param {ReactNode} props.toolbarItem - Toolbar items that appear on the top of the table @see ToolbarItem
+ * @param {ReactNode} props.emptyState - ReactNode show when the list is empty could be any component but best to use @see ListEmptyState
+ */
+export function KeycloakDataTable<T>({
   ariaLabelKey,
   searchPlaceholderKey,
   isPaginated = false,

src/realm-roles/RealmRolesSection.tsx

@@ -13,7 +13,7 @@ import { useAdminClient } from "../context/auth/AdminClient";
 import { ViewHeader } from "../components/view-header/ViewHeader";
 import RoleRepresentation from "keycloak-admin/lib/defs/roleRepresentation";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
-import { DataList } from "../components/table-toolbar/DataList";
+import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
 import { ExternalLink } from "../components/external-link/ExternalLink";
 import { useAlerts } from "../components/alert/Alerts";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
@@ -87,7 +87,7 @@ export const RealmRolesSection = () => {
       <ViewHeader titleKey="roles:title" subKey="roles:roleExplain" />
       <PageSection variant="light">
         <DeleteConfirm />
-        <DataList
+        <KeycloakDataTable
           key={selectedRole ? selectedRole.id : "roleList"}
           loader={loader}
           ariaLabelKey="roles:roleList"

src/stories/KeycloakDataTable.stories.tsx

@@ -4,17 +4,22 @@ import { Meta, Story } from "@storybook/react";
 
 import clients from "../clients/__tests__/mock-clients.json";
 
-import { DataList, DataListProps } from "../components/table-toolbar/DataList";
+import {
+  KeycloakDataTable,
+  DataListProps,
+} from "../components/table-toolbar/KeycloakDataTable";
 
 export default {
-  title: "Data list",
+  title: "Keycloak Data Table",
-  component: DataList,
+  component: KeycloakDataTable,
 } as Meta;
 
 const wait = (ms: number, value: any) =>
   new Promise((resolve) => setTimeout(resolve, ms, value));
 
-const Template: Story<DataListProps<any>> = (args) => <DataList {...args} />;
+const Template: Story<DataListProps<any>> = (args) => (
+  <KeycloakDataTable {...args} />
+);
 
 export const SimpleList = Template.bind({});
 SimpleList.args = {

src/user/UsersSection.tsx

@@ -13,7 +13,7 @@ import UserRepresentation from "keycloak-admin/lib/defs/userRepresentation";
 
 import { useAdminClient } from "../context/auth/AdminClient";
 import { ViewHeader } from "../components/view-header/ViewHeader";
-import { DataList } from "../components/table-toolbar/DataList";
+import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
 import { useAlerts } from "../components/alert/Alerts";
 
 export const UsersSection = () => {
@@ -60,7 +60,7 @@ export const UsersSection = () => {
     <>
       <ViewHeader titleKey="users:title" subKey="users:userExplain" />
       <PageSection variant="light">
-        <DataList
+        <KeycloakDataTable
           key={key}
           loader={loader}
           isPaginated