@keycloakify/keycloak-account-ui 25.0.4-rc.7 → 26.0.0-rc.1

package/src/ui-shared/controls/OrganizationTable.tsx

@@ -0,0 +1,122 @@
+import OrganizationRepresentation from "@keycloak/keycloak-admin-client/lib/defs/organizationRepresentation";
+import { Badge, Chip, ChipGroup } from "@patternfly/react-core";
+import { TableText } from "@patternfly/react-table";
+import { FunctionComponent, PropsWithChildren, ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { KeycloakDataTable, LoaderFunction } from "@keycloakify/keycloak-account-ui/ui-shared/controls/table/KeycloakDataTable";
+
+type OrgDetailLinkProps = {
+  link: FunctionComponent<
+    PropsWithChildren<{ organization: OrganizationRepresentation }>
+  >;
+  organization: OrganizationRepresentation;
+};
+
+const OrgDetailLink = ({ link, organization }: OrgDetailLinkProps) => {
+  const { t } = useTranslation();
+  const Component = link;
+  return (
+    <TableText wrapModifier="truncate">
+      <Component organization={organization}>
+        {organization.name}
+        {!organization.enabled && (
+          <Badge
+            key={`${organization.id}-disabled`}
+            isRead
+            className="pf-v5-u-ml-sm"
+          >
+            {t("disabled")}
+          </Badge>
+        )}
+      </Component>
+    </TableText>
+  );
+};
+
+const Domains = (org: OrganizationRepresentation) => {
+  const { t } = useTranslation();
+  return (
+    <ChipGroup
+      numChips={2}
+      expandedText={t("hide")}
+      collapsedText={t("showRemaining")}
+    >
+      {org.domains?.map((dn) => {
+        const name = typeof dn === "string" ? dn : dn.name;
+        return (
+          <Chip key={name} isReadOnly>
+            {name}
+          </Chip>
+        );
+      })}
+    </ChipGroup>
+  );
+};
+
+type OrganizationTableProps = PropsWithChildren & {
+  loader:
+    | LoaderFunction<OrganizationRepresentation>
+    | OrganizationRepresentation[];
+  link: FunctionComponent<
+    PropsWithChildren<{ organization: OrganizationRepresentation }>
+  >;
+  toolbarItem?: ReactNode;
+  isPaginated?: boolean;
+  onSelect?: (orgs: OrganizationRepresentation[]) => void;
+  onDelete?: (org: OrganizationRepresentation) => void;
+  deleteLabel?: string;
+};
+
+export const OrganizationTable = ({
+  loader,
+  toolbarItem,
+  isPaginated = false,
+  onSelect,
+  onDelete,
+  deleteLabel = "delete",
+  link,
+  children,
+}: OrganizationTableProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <KeycloakDataTable
+      loader={loader}
+      isPaginated={isPaginated}
+      ariaLabelKey="organizationList"
+      searchPlaceholderKey="searchOrganization"
+      toolbarItem={toolbarItem}
+      onSelect={onSelect}
+      canSelectAll={onSelect !== undefined}
+      actions={
+        onDelete
+          ? [
+              {
+                title: t(deleteLabel),
+                onRowClick: onDelete,
+              },
+            ]
+          : undefined
+      }
+      columns={[
+        {
+          name: "name",
+          displayKey: "name",
+          cellRenderer: (row) => (
+            <OrgDetailLink link={link} organization={row} />
+          ),
+        },
+        {
+          name: "domains",
+          displayKey: "domains",
+          cellRenderer: Domains,
+        },
+        {
+          name: "description",
+          displayKey: "description",
+        },
+      ]}
+      emptyState={children}
+    />
+  );
+};

package/src/ui-shared/controls/select-control/SingleSelectControl.tsx

@@ -13,6 +13,7 @@ import {
   FieldValues,
   useFormContext,
 } from "react-hook-form";
+import { getRuleValue } from "@keycloakify/keycloak-account-ui/ui-shared/utils/getRuleValue";
 import { FormLabel } from "@keycloakify/keycloak-account-ui/ui-shared/controls/FormLabel";
 import {
   SelectControlProps,
@@ -38,12 +39,13 @@ export const SingleSelectControl = <
     formState: { errors },
   } = useFormContext();
   const [open, setOpen] = useState(false);
+  const required = getRuleValue(controller.rules?.required) === true;
 
   return (
     <FormLabel
       name={name}
       label={label}
-      isRequired={!!controller.rules?.required}
+      isRequired={required}
       error={get(errors, name)}
       labelIcon={labelIcon}
     >

package/src/ui-shared/controls/select-control/TypeaheadSelectControl.tsx

@@ -21,6 +21,7 @@ import {
   FieldValues,
   useFormContext,
 } from "react-hook-form";
+import { getRuleValue } from "@keycloakify/keycloak-account-ui/ui-shared/utils/getRuleValue";
 import { FormLabel } from "@keycloakify/keycloak-account-ui/ui-shared/controls/FormLabel";
 import {
   SelectControlOption,
@@ -57,6 +58,7 @@ export const TypeaheadSelectControl = <
   const [filterValue, setFilterValue] = useState("");
   const [focusedItemIndex, setFocusedItemIndex] = useState<number>(0);
   const textInputRef = useRef<HTMLInputElement>();
+  const required = getRuleValue(controller.rules?.required) === true;
 
   const filteredOptions = options.filter((option) =>
     getValue(option).toLowerCase().startsWith(filterValue.toLowerCase()),
@@ -147,7 +149,7 @@ export const TypeaheadSelectControl = <
     <FormLabel
       name={name}
       label={label}
-      isRequired={!!controller.rules?.required}
+      isRequired={required}
       error={get(errors, name)}
       labelIcon={labelIcon}
     >
@@ -236,12 +238,12 @@ export const TypeaheadSelectControl = <
                       )}
                   </TextInputGroupMain>
                   <TextInputGroupUtilities>
-                    {!!filterValue && (
+                    {(!!filterValue || field.value) && (
                       <Button
                         variant="plain"
                         onClick={() => {
-                          field.onChange(undefined);
                           setFilterValue("");
+                          field.onChange("");
                           textInputRef?.current?.focus();
                         }}
                         aria-label="Clear input value"