@apicurio/common-ui-components 1.0.2 → 1.0.3

package/dist/common/UrlUpload.d.ts

@@ -0,0 +1,16 @@
+import { FunctionComponent } from "react";
+/**
+ * Properties
+ */
+export type UrlUploadProps = {
+    id: string | "url-upload";
+    urlPlaceholder: string | "";
+    testId?: string;
+    onUrlFetch: (url: string) => Promise<string>;
+    onChange: (value: string | undefined, url: string | undefined) => void;
+};
+/**
+ * A control similar to the FileUpload control from patternfly that allows uploading from
+ * a URL instead of a file.
+ */
+export declare const UrlUpload: FunctionComponent<UrlUploadProps>;

package/dist/common/index.d.ts

@@ -4,3 +4,4 @@ export * from "./IfNotLoading";
 export * from "./ListWithToolbar";
 export * from "./ObjectDropdown";
 export * from "./ObjectSelect";
+export * from "./UrlUpload";

package/dist/main.js

@@ -1,53 +1,53 @@
-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." })
+import { jsx as t, jsxs as g } from "react/jsx-runtime";
+import f, { useState as u, useEffect as E } from "react";
+import { EmptyState as k, EmptyStateVariant as U, EmptyStateHeader as j, EmptyStateBody as B, Spinner as S, Alert as M, Dropdown as R, MenuToggle as N, DropdownList as V, Divider as O, DropdownItem as $, Select as H, SelectOption as W, TextInput as _, Button as w, TextArea as z, AboutModal as K, TextContent as G, Text as x, TextVariants as y, TextList as C, TextListItem as r, Modal as p, Progress as q } from "@patternfly/react-core";
+import { EllipsisVIcon as J } from "@patternfly/react-icons";
+const v = ({ condition: e, children: n }) => (() => typeof e == "boolean" ? e : e())() ? /* @__PURE__ */ t(f.Fragment, { children: n }) : /* @__PURE__ */ t(f.Fragment, {}), te = ({ collection: e, emptyState: n, emptyStateTitle: a, emptyStateMessage: i, children: c }) => {
+  const d = () => !e || e.length === 0, s = n || /* @__PURE__ */ g(k, { variant: U.xs, children: [
+    /* @__PURE__ */ t(j, { titleText: a || "None found", headingLevel: "h4" }),
+    /* @__PURE__ */ t(B, { children: i || "No items found." })
   ] });
-  return c() ? /* @__PURE__ */ t(g.Fragment, { children: s }) : /* @__PURE__ */ t(g.Fragment, { children: r });
+  return d() ? /* @__PURE__ */ t(f.Fragment, { children: s }) : /* @__PURE__ */ t(f.Fragment, { children: c });
 }, 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 })
+  const i = () => typeof e == "boolean" ? e : e(), c = n || /* @__PURE__ */ t(S, {});
+  return i() ? /* @__PURE__ */ t(f.Fragment, { children: c }) : /* @__PURE__ */ t(f.Fragment, { children: a });
+}, ne = ({ toolbar: e, alwaysShowToolbar: n, emptyState: a, filteredEmptyState: i, isLoading: c, isError: d, loadingComponent: s, errorComponent: m, isEmpty: l, isFiltered: o, children: h }) => {
+  const I = n || !l || o || d;
+  return m || (m = /* @__PURE__ */ t("div", { style: { padding: "15px", backgroundColor: "white" }, children: /* @__PURE__ */ t(M, { 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__ */ g(f.Fragment, { children: [
+    /* @__PURE__ */ t(v, { condition: I, children: e }),
+    /* @__PURE__ */ g(T, { isLoading: c, loadingComponent: s, children: [
+      /* @__PURE__ */ t(v, { condition: !l && !d, children: h }),
+      /* @__PURE__ */ t(v, { condition: l && o && !d, children: i }),
+      /* @__PURE__ */ t(v, { condition: l && !o && !d, children: a }),
+      /* @__PURE__ */ t(v, { condition: d, children: m })
     ] })
   ] });
-}, G = (e) => {
-  const [n, a] = I(!1), i = (o, l) => {
+}, le = (e) => {
+  const [n, a] = u(!1), i = (l, o) => {
     a(!1);
-    const h = l;
+    const h = o;
     h !== void 0 && h >= 0 ? e.onSelect(e.items[h]) : e.onSelect(void 0);
-  }, r = () => {
+  }, c = () => {
     a(!n);
-  }, c = (o) => {
-    let l;
-    return e.itemToTestId !== void 0 && (l = e.itemToTestId(o)), l;
+  }, d = (l) => {
+    let o;
+    return e.itemToTestId !== void 0 && (o = e.itemToTestId(l)), o;
   }, 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,
+  let m = /* @__PURE__ */ t(J, { title: e.label });
+  return e.isKebab || (m = /* @__PURE__ */ t(f.Fragment, { children: e.label })), /* @__PURE__ */ t(
+    R,
     {
       isOpen: n,
       onSelect: i,
-      onOpenChange: (o) => a(o),
-      toggle: (o) => /* @__PURE__ */ t(
-        w,
+      onOpenChange: (l) => a(l),
+      toggle: (l) => /* @__PURE__ */ t(
+        N,
         {
           "data-testid": e.testId,
-          ref: o,
-          onClick: r,
+          ref: l,
+          onClick: c,
           isExpanded: n,
           variant: e.isKebab ? "plain" : "default",
           children: m
@@ -56,36 +56,36 @@ const f = ({ condition: e, children: n }) => (() => typeof e == "boolean" ? e :
       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,
+      children: /* @__PURE__ */ t(V, { children: e.items.map((l, o) => e.itemIsDivider && e.itemIsDivider(l) ? /* @__PURE__ */ t(O, { component: "li" }, `divider-${o}`) : /* @__PURE__ */ t(
+        $,
         {
-          value: l,
-          component: (h) => /* @__PURE__ */ t("button", { ...h, "data-testid": c(o) }),
-          children: e.itemToString(o)
+          value: o,
+          component: (h) => /* @__PURE__ */ t("button", { ...h, "data-testid": d(l) }),
+          children: e.itemToString(l)
         },
-        `action-${l}`
+        `action-${o}`
       )) })
     }
   );
-}, J = (e) => {
+}, ie = (e) => {
   var m;
-  const [n, a] = I(!1), i = (o, l) => {
-    a(!1), e.onSelect(e.items[l]);
-  }, r = () => {
+  const [n, a] = u(!1), i = (l, o) => {
+    a(!1), e.onSelect(e.items[o]);
+  }, c = () => {
     a(!n);
-  }, c = (o) => {
-    let l;
-    return e.itemToTestId !== void 0 && (l = e.itemToTestId(o)), l;
+  }, d = (l) => {
+    let o;
+    return e.itemToTestId !== void 0 && (o = e.itemToTestId(l)), o;
   };
   return /* @__PURE__ */ t(
-    V,
+    H,
     {
-      toggle: (o) => /* @__PURE__ */ t(
-        w,
+      toggle: (l) => /* @__PURE__ */ t(
+        N,
         {
-          ref: o,
+          ref: l,
           className: e.toggleClassname || "menu-toggle",
-          onClick: r,
+          onClick: c,
           "data-testid": e.testId,
           isExpanded: n,
           children: e.value ? e.itemToString(e.value) : e.noSelectionLabel
@@ -95,24 +95,84 @@ const f = ({ condition: e, children: n }) => (() => typeof e == "boolean" ? e :
       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,
+      children: (m = e.items) == null ? void 0 : m.map((l, o) => e.itemIsDivider && e.itemIsDivider(l) ? /* @__PURE__ */ t(O, {}, o) : /* @__PURE__ */ t(
+        W,
         {
-          isSelected: o === e.value,
-          component: (h) => /* @__PURE__ */ t("button", { ...h, "data-testid": c(o) }),
-          value: l,
-          children: e.itemToString(o)
+          isSelected: l === e.value,
+          component: (h) => /* @__PURE__ */ t("button", { ...h, "data-testid": d(l) }),
+          value: o,
+          children: e.itemToString(l)
         },
-        l
+        o
       ))
     }
   );
-}, 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));
+}, D = {
+  padding: "5px",
+  minHeight: "128px",
+  borderRight: 0,
+  borderLeft: 0,
+  borderBottom: "1px solid #666",
+  backgroundColor: "rgb(240, 240, 240)"
+}, Q = {
+  ...D,
+  color: "red",
+  overflow: "auto"
+}, oe = (e) => {
+  const [n, a] = u(""), [i, c] = u(""), [d, s] = u(!1), [m, l] = u(), o = (b, P) => {
+    a(P);
+  }, h = () => n != null && n.trim().length > 0, I = () => m != null && m.trim().length > 0, L = () => {
+    s(!0), e.onUrlFetch(n).then((b) => {
+      l(void 0), c(b), s(!1), e.onChange(b, n);
+    }).catch((b) => {
+      l(b.message), s(!1);
+    });
+  }, F = () => {
+    a(""), c(""), e.onChange(void 0, void 0);
+  }, A = /* @__PURE__ */ g("div", { className: "url-upload-loading", style: D, children: [
+    /* @__PURE__ */ t(S, { size: "md", className: "spinner", style: { marginRight: "5px" } }),
+    /* @__PURE__ */ t("span", { className: "spinner-message", children: "Loading URL content" })
+  ] });
+  return /* @__PURE__ */ g("div", { className: "url-upload", "data-testid": e.testId, children: [
+    /* @__PURE__ */ g("div", { className: "url-upload-flex", style: { display: "flex" }, children: [
+      /* @__PURE__ */ t("div", { className: "url-upload-url", style: { flexGrow: 1 }, children: /* @__PURE__ */ t(
+        _,
+        {
+          "data-testid": `${e.testId}-input`,
+          value: n,
+          type: "text",
+          placeholder: e.urlPlaceholder,
+          id: e.id,
+          onChange: o,
+          "aria-label": "url input"
+        }
+      ) }),
+      /* @__PURE__ */ t("div", { className: "url-fetch-button", children: /* @__PURE__ */ t(w, { "data-testid": `${e.testId}-fetch`, variant: "control", isDisabled: !h(), onClick: L, children: "Fetch" }) }),
+      /* @__PURE__ */ t("div", { className: "url-clear-button", children: /* @__PURE__ */ t(w, { "data-testid": `${e.testId}-clear`, variant: "control", isDisabled: !h(), onClick: F, children: "Clear" }) })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "url-upload-preview", children: /* @__PURE__ */ g(T, { isLoading: d, loadingComponent: A, children: [
+      /* @__PURE__ */ t(v, { condition: I, children: /* @__PURE__ */ g("div", { className: "url-upload-error", style: Q, children: [
+        /* @__PURE__ */ t("div", { children: "Error getting content from URL." }),
+        /* @__PURE__ */ t("div", { children: m })
+      ] }) }),
+      /* @__PURE__ */ t(v, { condition: !I(), children: /* @__PURE__ */ t(
+        z,
+        {
+          "data-testid": `${e.testId}-preview`,
+          "aria-label": "url-content",
+          value: i,
+          readOnly: !0,
+          style: { minHeight: "128px" }
+        }
+      ) })
+    ] }) })
+  ] });
+}, ae = (e) => {
+  const [n, a] = u(), [i, c] = u(), d = (s) => typeof s == "string" ? s : s === void 0 ? "" : s.toDateString();
+  return E(() => {
+    e.isOpen && (typeof e.frontendInfo == "function" ? e.frontendInfo().then(a) : a(e.frontendInfo), typeof e.backendInfo == "function" ? e.backendInfo().then(c) : c(e.backendInfo));
   }, [e.isOpen]), /* @__PURE__ */ t(
-    B,
+    K,
     {
       className: "app-about-modal",
       isOpen: e.isOpen,
@@ -121,34 +181,34 @@ const f = ({ condition: e, children: n }) => (() => typeof e == "boolean" ? e :
       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 })
+      children: /* @__PURE__ */ g(G, { className: "app-about-modal-content", style: { marginTop: "-25px" }, children: [
+        /* @__PURE__ */ t(x, { component: y.h2, children: "Web console info" }),
+        /* @__PURE__ */ t(T, { isLoading: n === void 0, children: /* @__PURE__ */ g(C, { component: "dl", children: [
+          /* @__PURE__ */ t(r, { component: "dt", children: "Project" }),
+          /* @__PURE__ */ t(r, { component: "dd", children: /* @__PURE__ */ t("a", { href: n == null ? void 0 : n.url, target: "_blank", children: n == null ? void 0 : n.name }) }),
+          /* @__PURE__ */ t(r, { component: "dt", children: "Version" }),
+          /* @__PURE__ */ t(r, { component: "dd", children: n == null ? void 0 : n.version }),
+          /* @__PURE__ */ t(r, { component: "dt", children: "Built on" }),
+          /* @__PURE__ */ t(r, { component: "dd", children: d(n == null ? void 0 : n.builtOn) }),
+          /* @__PURE__ */ t(r, { component: "dt", children: "Digest" }),
+          /* @__PURE__ */ t(r, { 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) })
+        /* @__PURE__ */ t(x, { style: { marginTop: "40px" }, component: y.h2, children: e.backendLabel }),
+        /* @__PURE__ */ t(T, { isLoading: i === void 0, children: /* @__PURE__ */ g(C, { component: "dl", children: [
+          /* @__PURE__ */ t(r, { component: "dt", children: "Name" }),
+          /* @__PURE__ */ t(r, { component: "dd", children: (i == null ? void 0 : i.name) || "" }),
+          /* @__PURE__ */ t(r, { component: "dt", children: "Description" }),
+          /* @__PURE__ */ t(r, { component: "dd", children: (i == null ? void 0 : i.description) || "" }),
+          /* @__PURE__ */ t(r, { component: "dt", children: "Version" }),
+          /* @__PURE__ */ t(r, { component: "dd", children: (i == null ? void 0 : i.version) || "" }),
+          /* @__PURE__ */ t(r, { component: "dt", children: "Built on" }),
+          /* @__PURE__ */ t(r, { component: "dd", children: d(i == null ? void 0 : i.builtOn) })
         ] }) })
       ] })
     }
   );
-}, U = (e) => /* @__PURE__ */ u(
-  x,
+}, de = (e) => /* @__PURE__ */ g(
+  p,
   {
     title: "Please Wait",
     variant: "small",
@@ -159,12 +219,12 @@ const f = ({ condition: e, children: n }) => (() => typeof e == "boolean" ? e :
     "aria-label": "please-wait-modal",
     style: { marginTop: "-15px" },
     children: [
-      /* @__PURE__ */ t(O, { size: "md", className: "spinner" }),
+      /* @__PURE__ */ t(S, { size: "md", className: "spinner" }),
       /* @__PURE__ */ t("span", { className: "message", style: { fontSize: "15px", color: "#333", marginLeft: "10px" }, children: e.message })
     ]
   }
-), X = (e) => /* @__PURE__ */ t(
-  x,
+), re = (e) => /* @__PURE__ */ t(
+  p,
   {
     title: e.title,
     variant: "small",
@@ -173,17 +233,18 @@ const f = ({ condition: e, children: n }) => (() => typeof e == "boolean" ? e :
     onClose: e.onClose,
     className: "progress pf-m-redhat-font",
     "aria-label": "progress-modal",
-    children: /* @__PURE__ */ t(W, { title: e.message, value: e.progress })
+    children: /* @__PURE__ */ t(q, { title: e.message, value: e.progress })
   }
 );
 export {
-  Q as AppAboutModal,
-  f as If,
-  $ as IfNotEmpty,
+  ae as AppAboutModal,
+  v as If,
+  te as IfNotEmpty,
   T as IfNotLoading,
-  q as ListWithToolbar,
-  G as ObjectDropdown,
-  J as ObjectSelect,
-  U as PleaseWaitModal,
-  X as ProgressModal
+  ne as ListWithToolbar,
+  le as ObjectDropdown,
+  ie as ObjectSelect,
+  de as PleaseWaitModal,
+  re as ProgressModal,
+  oe as UrlUpload
 };

package/package.json

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