@apicurio/common-ui-components 1.0.0 → 1.0.2

package/dist/common/IfNotEmpty.d.ts

@@ -0,0 +1,17 @@
+import React, { FunctionComponent } from "react";
+/**
+ * Properties
+ */
+export interface IfNotEmptyProps {
+    collection?: any[] | undefined;
+    emptyState?: React.ReactNode;
+    emptyStateTitle?: string;
+    emptyStateMessage?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Wrapper around a set of arbitrary child elements and displays them only if the
+ * provided collection is not empty.  If the provided collection is empty, then
+ * an empty state control is displayed instead.
+ */
+export declare const IfNotEmpty: FunctionComponent<IfNotEmptyProps>;

package/dist/common/IfNotLoading.d.ts

@@ -0,0 +1,15 @@
+import React, { FunctionComponent } from "react";
+/**
+ * Properties
+ */
+export type IfNotLoadingProps = {
+    isLoading: boolean | (() => boolean);
+    loadingComponent?: React.ReactNode;
+    children?: React.ReactNode;
+};
+/**
+ * Displays a Spinner control while the condition property is true.  When false, the provided children
+ * are displayed.  Useful when displaying content from the results of an async operation such as a REST
+ * call.
+ */
+export declare const IfNotLoading: FunctionComponent<IfNotLoadingProps>;

package/dist/common/ListWithToolbar.d.ts

@@ -0,0 +1,22 @@
+import React, { FunctionComponent } from "react";
+/**
+ * Properties
+ */
+export type ListWithToolbarProps = {
+    toolbar: React.ReactNode;
+    alwaysShowToolbar?: boolean;
+    emptyState: React.ReactNode;
+    filteredEmptyState: React.ReactNode;
+    isLoading: boolean;
+    loadingComponent?: React.ReactNode;
+    isError: boolean;
+    errorComponent?: React.ReactNode;
+    isFiltered: boolean;
+    isEmpty: boolean;
+    children?: React.ReactNode;
+};
+/**
+ * Wrapper around a set of arbitrary child elements and displays them only if the
+ * indicated condition is true.
+ */
+export declare const ListWithToolbar: FunctionComponent<ListWithToolbarProps>;

package/dist/common/ObjectDropdown.d.ts

@@ -0,0 +1,22 @@
+import { FunctionComponent } from "react";
+import { DropdownPopperProps } from "@patternfly/react-core";
+/**
+ * Properties
+ */
+export type ObjectDropdownProps = {
+    label: string;
+    items: any[];
+    onSelect: (value: any | undefined) => void;
+    itemToString: (value: any) => string;
+    itemIsDivider?: (value: any) => boolean;
+    itemToTestId?: (value: any) => string;
+    noSelectionLabel?: string;
+    menuAppendTo?: HTMLElement | (() => HTMLElement) | "inline";
+    isKebab?: boolean;
+    testId?: string;
+    popperProps?: DropdownPopperProps;
+};
+/**
+ * A generic control that makes it easier to create a <Select> from an array of objects.
+ */
+export declare const ObjectDropdown: FunctionComponent<ObjectDropdownProps>;

package/dist/common/ObjectSelect.d.ts

@@ -0,0 +1,20 @@
+import { FunctionComponent } from "react";
+/**
+ * Properties
+ */
+export type ObjectSelectProps = {
+    value: any;
+    items: any[];
+    onSelect: (value: any) => void;
+    itemToString: (value: any) => string;
+    itemIsDivider?: (value: any) => boolean;
+    itemToTestId?: (value: any) => string;
+    noSelectionLabel?: string;
+    toggleId?: string;
+    toggleClassname?: string;
+    testId?: string;
+};
+/**
+ * A generic control that makes it easier to create a <Select> from an array of objects.
+ */
+export declare const ObjectSelect: FunctionComponent<ObjectSelectProps>;

package/dist/common/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./If";
+export * from "./IfNotEmpty";
+export * from "./IfNotLoading";
+export * from "./ListWithToolbar";
+export * from "./ObjectDropdown";
+export * from "./ObjectSelect";

package/dist/main.d.ts

@@ -1 +1,2 @@
-export * from "./common/If.tsx";
+export * from "./common";
+export * from "./modals";

package/dist/main.js

@@ -1,6 +1,189 @@
-import { jsx as r } from "react/jsx-runtime";
-import t from "react";
-const c = ({ condition: e, children: a }) => (() => typeof e == "boolean" ? e : e())() ? /* @__PURE__ */ r(t.Fragment, { children: a }) : /* @__PURE__ */ r(t.Fragment, {});
+import { jsx as t, jsxs as u } from "react/jsx-runtime";
+import g, { useState as I, useEffect as C } from "react";
+import { EmptyState as N, EmptyStateVariant as p, EmptyStateHeader as L, EmptyStateBody as A, Spinner as O, Alert as F, Dropdown as P, MenuToggle as w, DropdownList as j, Divider as y, DropdownItem as M, Select as V, SelectOption as k, AboutModal as B, TextContent as E, Text as b, TextVariants as v, TextList as S, TextListItem as d, Modal as x, Progress as W } from "@patternfly/react-core";
+import { EllipsisVIcon as _ } from "@patternfly/react-icons";
+const f = ({ condition: e, children: n }) => (() => typeof e == "boolean" ? e : e())() ? /* @__PURE__ */ t(g.Fragment, { children: n }) : /* @__PURE__ */ t(g.Fragment, {}), $ = ({ collection: e, emptyState: n, emptyStateTitle: a, emptyStateMessage: i, children: r }) => {
+  const c = () => !e || e.length === 0, s = n || /* @__PURE__ */ u(N, { variant: p.xs, children: [
+    /* @__PURE__ */ t(L, { titleText: a || "None found", headingLevel: "h4" }),
+    /* @__PURE__ */ t(A, { children: i || "No items found." })
+  ] });
+  return c() ? /* @__PURE__ */ t(g.Fragment, { children: s }) : /* @__PURE__ */ t(g.Fragment, { children: r });
+}, T = ({ isLoading: e, loadingComponent: n, children: a }) => {
+  const i = () => typeof e == "boolean" ? e : e(), r = n || /* @__PURE__ */ t(O, {});
+  return i() ? /* @__PURE__ */ t(g.Fragment, { children: r }) : /* @__PURE__ */ t(g.Fragment, { children: a });
+}, q = ({ toolbar: e, alwaysShowToolbar: n, emptyState: a, filteredEmptyState: i, isLoading: r, isError: c, loadingComponent: s, errorComponent: m, isEmpty: o, isFiltered: l, children: h }) => {
+  const D = n || !o || l || c;
+  return m || (m = /* @__PURE__ */ t("div", { style: { padding: "15px", backgroundColor: "white" }, children: /* @__PURE__ */ t(F, { isInline: !0, variant: "danger", title: "Error: Something went wrong!", children: /* @__PURE__ */ t("p", { children: "Something went wrong with the action you attempted, but we're not sure what it was. Try reloading the page and hopef for a better result, or contact your admin to report the error." }) }) })), /* @__PURE__ */ u(g.Fragment, { children: [
+    /* @__PURE__ */ t(f, { condition: D, children: e }),
+    /* @__PURE__ */ u(T, { isLoading: r, loadingComponent: s, children: [
+      /* @__PURE__ */ t(f, { condition: !o && !c, children: h }),
+      /* @__PURE__ */ t(f, { condition: o && l && !c, children: i }),
+      /* @__PURE__ */ t(f, { condition: o && !l && !c, children: a }),
+      /* @__PURE__ */ t(f, { condition: c, children: m })
+    ] })
+  ] });
+}, G = (e) => {
+  const [n, a] = I(!1), i = (o, l) => {
+    a(!1);
+    const h = l;
+    h !== void 0 && h >= 0 ? e.onSelect(e.items[h]) : e.onSelect(void 0);
+  }, r = () => {
+    a(!n);
+  }, c = (o) => {
+    let l;
+    return e.itemToTestId !== void 0 && (l = e.itemToTestId(o)), l;
+  }, s = e.popperProps || {
+    appendTo: e.menuAppendTo
+  };
+  let m = /* @__PURE__ */ t(_, { title: e.label });
+  return e.isKebab || (m = /* @__PURE__ */ t(g.Fragment, { children: e.label })), /* @__PURE__ */ t(
+    P,
+    {
+      isOpen: n,
+      onSelect: i,
+      onOpenChange: (o) => a(o),
+      toggle: (o) => /* @__PURE__ */ t(
+        w,
+        {
+          "data-testid": e.testId,
+          ref: o,
+          onClick: r,
+          isExpanded: n,
+          variant: e.isKebab ? "plain" : "default",
+          children: m
+        }
+      ),
+      ouiaId: "ObjectDropdown",
+      popperProps: s,
+      shouldFocusToggleOnSelect: !0,
+      children: /* @__PURE__ */ t(j, { children: e.items.map((o, l) => e.itemIsDivider && e.itemIsDivider(o) ? /* @__PURE__ */ t(y, { component: "li" }, `divider-${l}`) : /* @__PURE__ */ t(
+        M,
+        {
+          value: l,
+          component: (h) => /* @__PURE__ */ t("button", { ...h, "data-testid": c(o) }),
+          children: e.itemToString(o)
+        },
+        `action-${l}`
+      )) })
+    }
+  );
+}, J = (e) => {
+  var m;
+  const [n, a] = I(!1), i = (o, l) => {
+    a(!1), e.onSelect(e.items[l]);
+  }, r = () => {
+    a(!n);
+  }, c = (o) => {
+    let l;
+    return e.itemToTestId !== void 0 && (l = e.itemToTestId(o)), l;
+  };
+  return /* @__PURE__ */ t(
+    V,
+    {
+      toggle: (o) => /* @__PURE__ */ t(
+        w,
+        {
+          ref: o,
+          className: e.toggleClassname || "menu-toggle",
+          onClick: r,
+          "data-testid": e.testId,
+          isExpanded: n,
+          children: e.value ? e.itemToString(e.value) : e.noSelectionLabel
+        }
+      ),
+      id: e.toggleId,
+      onSelect: i,
+      onOpenChange: a,
+      isOpen: n,
+      children: (m = e.items) == null ? void 0 : m.map((o, l) => e.itemIsDivider && e.itemIsDivider(o) ? /* @__PURE__ */ t(y, {}, l) : /* @__PURE__ */ t(
+        k,
+        {
+          isSelected: o === e.value,
+          component: (h) => /* @__PURE__ */ t("button", { ...h, "data-testid": c(o) }),
+          value: l,
+          children: e.itemToString(o)
+        },
+        l
+      ))
+    }
+  );
+}, Q = (e) => {
+  const [n, a] = I(), [i, r] = I(), c = (s) => typeof s == "string" ? s : s === void 0 ? "" : s.toDateString();
+  return C(() => {
+    e.isOpen && (typeof e.frontendInfo == "function" ? e.frontendInfo().then(a) : a(e.frontendInfo), typeof e.backendInfo == "function" ? e.backendInfo().then(r) : r(e.backendInfo));
+  }, [e.isOpen]), /* @__PURE__ */ t(
+    B,
+    {
+      className: "app-about-modal",
+      isOpen: e.isOpen,
+      onClose: e.onClose,
+      trademark: "© 2024 Red Hat",
+      brandImageSrc: e.brandImageSrc,
+      brandImageAlt: e.brandImageAlt,
+      "aria-label": e.brandImageAlt,
+      children: /* @__PURE__ */ u(E, { className: "app-about-modal-content", style: { marginTop: "-25px" }, children: [
+        /* @__PURE__ */ t(b, { component: v.h2, children: "Web console info" }),
+        /* @__PURE__ */ t(T, { isLoading: n === void 0, children: /* @__PURE__ */ u(S, { component: "dl", children: [
+          /* @__PURE__ */ t(d, { component: "dt", children: "Project" }),
+          /* @__PURE__ */ t(d, { component: "dd", children: /* @__PURE__ */ t("a", { href: n == null ? void 0 : n.url, target: "_blank", children: n == null ? void 0 : n.name }) }),
+          /* @__PURE__ */ t(d, { component: "dt", children: "Version" }),
+          /* @__PURE__ */ t(d, { component: "dd", children: n == null ? void 0 : n.version }),
+          /* @__PURE__ */ t(d, { component: "dt", children: "Built on" }),
+          /* @__PURE__ */ t(d, { component: "dd", children: c(n == null ? void 0 : n.builtOn) }),
+          /* @__PURE__ */ t(d, { component: "dt", children: "Digest" }),
+          /* @__PURE__ */ t(d, { component: "dd", children: n == null ? void 0 : n.digest })
+        ] }) }),
+        /* @__PURE__ */ t(b, { style: { marginTop: "40px" }, component: v.h2, children: e.backendLabel }),
+        /* @__PURE__ */ t(T, { isLoading: i === void 0, children: /* @__PURE__ */ u(S, { component: "dl", children: [
+          /* @__PURE__ */ t(d, { component: "dt", children: "Name" }),
+          /* @__PURE__ */ t(d, { component: "dd", children: (i == null ? void 0 : i.name) || "" }),
+          /* @__PURE__ */ t(d, { component: "dt", children: "Description" }),
+          /* @__PURE__ */ t(d, { component: "dd", children: (i == null ? void 0 : i.description) || "" }),
+          /* @__PURE__ */ t(d, { component: "dt", children: "Version" }),
+          /* @__PURE__ */ t(d, { component: "dd", children: (i == null ? void 0 : i.version) || "" }),
+          /* @__PURE__ */ t(d, { component: "dt", children: "Built on" }),
+          /* @__PURE__ */ t(d, { component: "dd", children: c(i == null ? void 0 : i.builtOn) })
+        ] }) })
+      ] })
+    }
+  );
+}, U = (e) => /* @__PURE__ */ u(
+  x,
+  {
+    title: "Please Wait",
+    variant: "small",
+    isOpen: e.isOpen,
+    header: /* @__PURE__ */ t("a", { href: "#" }),
+    showClose: !1,
+    className: "please-wait pf-m-redhat-font",
+    "aria-label": "please-wait-modal",
+    style: { marginTop: "-15px" },
+    children: [
+      /* @__PURE__ */ t(O, { size: "md", className: "spinner" }),
+      /* @__PURE__ */ t("span", { className: "message", style: { fontSize: "15px", color: "#333", marginLeft: "10px" }, children: e.message })
+    ]
+  }
+), X = (e) => /* @__PURE__ */ t(
+  x,
+  {
+    title: e.title,
+    variant: "small",
+    isOpen: e.isOpen,
+    showClose: e.isCloseable,
+    onClose: e.onClose,
+    className: "progress pf-m-redhat-font",
+    "aria-label": "progress-modal",
+    children: /* @__PURE__ */ t(W, { title: e.message, value: e.progress })
+  }
+);
 export {
-  c as If
+  Q as AppAboutModal,
+  f as If,
+  $ as IfNotEmpty,
+  T as IfNotLoading,
+  q as ListWithToolbar,
+  G as ObjectDropdown,
+  J as ObjectSelect,
+  U as PleaseWaitModal,
+  X as ProgressModal
 };

package/dist/modals/AppAboutModal.d.ts

@@ -0,0 +1,25 @@
+import { FunctionComponent } from "react";
+export type FrontendInfo = {
+    name: string;
+    url: string;
+    version: string;
+    builtOn: Date | string;
+    digest: string;
+};
+export type BackendInfo = {
+    name: string;
+    description: string;
+    version: string;
+    builtOn: Date | string;
+    digest: string;
+};
+export type AppAboutModalProps = {
+    isOpen: boolean;
+    frontendInfo: FrontendInfo | (() => Promise<FrontendInfo>);
+    backendInfo: BackendInfo | (() => Promise<BackendInfo>);
+    backendLabel: string;
+    brandImageSrc: string;
+    brandImageAlt: string;
+    onClose: () => void;
+};
+export declare const AppAboutModal: FunctionComponent<AppAboutModalProps>;

package/dist/modals/PleaseWaitModal.d.ts

@@ -0,0 +1,12 @@
+import { FunctionComponent } from "react";
+/**
+ * Properties
+ */
+export type PleaseWaitModalProps = {
+    message: string;
+    isOpen: boolean;
+};
+/**
+ * Models the "please wait" modal.  This is shown when the user performs an asynchronous operation.
+ */
+export declare const PleaseWaitModal: FunctionComponent<PleaseWaitModalProps>;

package/dist/modals/ProgressModal.d.ts

@@ -0,0 +1,17 @@
+import { FunctionComponent } from "react";
+/**
+ * Properties
+ */
+export type ProgressModalProps = {
+    title: string;
+    isCloseable: boolean;
+    message: string;
+    isOpen: boolean;
+    progress: number | undefined;
+    onClose: () => void;
+};
+/**
+ * Models the "progress" modal.  This is shown when the user performs an asynchronous operation
+ * with trackable progress (by percentage).
+ */
+export declare const ProgressModal: FunctionComponent<ProgressModalProps>;

package/dist/modals/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./AppAboutModal";
+export * from "./PleaseWaitModal";
+export * from "./ProgressModal";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@apicurio/common-ui-components",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",