@wso2/am-core-ui 0.0.13 → 0.0.15

package/dist/index-DJABKRWO.js

@@ -0,0 +1,263 @@
+import { jsx as i, jsxs as N } from "react/jsx-runtime";
+import { useCallback as V, useMemo as A, useEffect as z, useState as B } from "react";
+import { Alert as G, Box as L, Collapse as D, Button as T, Form as b, TextField as F, Stack as M, CircularProgress as O, Typography as C, Select as H, MenuItem as k } from "@wso2/oxygen-ui";
+import { useParams as $, useNavigate as J, generatePath as R } from "react-router-dom";
+import { o as K, s as w, y as Q, M as U, j as X, A as Y, f as Z, N as _, O as ee, g as I, P as te } from "./index-CCmLfbLS.js";
+import { c as W } from "react/compiler-runtime";
+import "@tanstack/react-query";
+import { Link as ne, PackagePlus as ie, FolderPlus as ae } from "@wso2/oxygen-ui-icons-react";
+const re = K({
+  displayName: w().trim().min(1, "Display name is required").min(3, "Display name must be at least 3 characters").max(100, "Display name must be at most 100 characters"),
+  name: w().trim().max(50, "Name must be at most 50 characters"),
+  description: w().trim().optional(),
+  deploymentPipeline: w().trim().min(1, "Deployment pipeline is required")
+}), oe = (a) => {
+  const e = W(22), {
+    lastSubmittedValidationErrors: t,
+    isPending: d,
+    onCancel: c,
+    onSubmit: s,
+    mode: l,
+    isNameEmpty: o
+  } = a, p = l === void 0 ? "deploy" : l, E = o === void 0 ? !1 : o, P = p === "connect";
+  let y;
+  e[0] !== t ? (y = Object.values(t), e[0] = t, e[1] = y) : y = e[1];
+  const u = y, v = u.length > 0;
+  let g;
+  e[2] !== u ? (g = /* @__PURE__ */ i(G, { severity: "error", children: u.map(le) }), e[2] = u, e[3] = g) : g = e[3];
+  let h;
+  e[4] !== v || e[5] !== g ? (h = /* @__PURE__ */ i(D, { in: v, timeout: "auto", unmountOnExit: !0, children: g }), e[4] = v, e[5] = g, e[6] = h) : h = e[6];
+  let n;
+  e[7] !== c ? (n = /* @__PURE__ */ i(T, { variant: "outlined", color: "primary", size: "medium", onClick: c, children: "Cancel" }), e[7] = c, e[8] = n) : n = e[8];
+  let r;
+  e[9] !== P ? (r = P ? /* @__PURE__ */ i(ne, { size: 16 }) : /* @__PURE__ */ i(ie, { size: 16 }), e[9] = P, e[10] = r) : r = e[10];
+  const m = d || E, f = P ? "Register" : "Create";
+  let j;
+  e[11] !== s || e[12] !== r || e[13] !== m || e[14] !== f ? (j = /* @__PURE__ */ i(T, { variant: "contained", color: "primary", size: "medium", startIcon: r, onClick: s, disabled: m, children: f }), e[11] = s, e[12] = r, e[13] = m, e[14] = f, e[15] = j) : j = e[15];
+  let x;
+  e[16] !== j || e[17] !== n ? (x = /* @__PURE__ */ N(L, { display: "flex", flexDirection: "row", gap: 1, alignItems: "center", children: [
+    n,
+    j
+  ] }), e[16] = j, e[17] = n, e[18] = x) : x = e[18];
+  let S;
+  return e[19] !== x || e[20] !== h ? (S = /* @__PURE__ */ N(L, { display: "flex", flexDirection: "column", gap: 3, children: [
+    h,
+    x
+  ] }), e[19] = x, e[20] = h, e[21] = S) : S = e[21], S;
+};
+function le(a, e) {
+  return /* @__PURE__ */ i(L, { children: a }, e);
+}
+function q(a, e) {
+  return a.promotionPaths.length === 0 ? null : [...a.promotionPaths.map((d) => d.sourceEnvironmentRef), a.promotionPaths[a.promotionPaths.length - 1]?.targetEnvironmentRefs[0]?.name].filter(Boolean).map((d) => e.get(d) ?? d).join(" → ");
+}
+function se(a) {
+  const e = W(10), {
+    pipeline: t,
+    envDisplayNameMap: d
+  } = a;
+  let c;
+  e[0] !== d || e[1] !== t ? (c = q(t, d), e[0] = d, e[1] = t, e[2] = c) : c = e[2];
+  const s = c;
+  let l;
+  e[3] !== t.displayName ? (l = /* @__PURE__ */ i(C, { variant: "body2", children: t.displayName }), e[3] = t.displayName, e[4] = l) : l = e[4];
+  let o;
+  e[5] !== s ? (o = s && /* @__PURE__ */ i(C, { variant: "caption", color: "text.disabled", children: s }), e[5] = s, e[6] = o) : o = e[6];
+  let p;
+  return e[7] !== l || e[8] !== o ? (p = /* @__PURE__ */ N(M, { direction: "row", alignItems: "center", spacing: 1, children: [
+    l,
+    o
+  ] }), e[7] = l, e[8] = o, e[9] = p) : p = e[9], p;
+}
+function ce(a) {
+  const e = W(10), {
+    pipeline: t,
+    envDisplayNameMap: d
+  } = a;
+  let c;
+  e[0] !== d || e[1] !== t ? (c = q(t, d), e[0] = d, e[1] = t, e[2] = c) : c = e[2];
+  const s = c;
+  let l;
+  e[3] !== t.displayName ? (l = /* @__PURE__ */ i(C, { variant: "body2", children: t.displayName }), e[3] = t.displayName, e[4] = l) : l = e[4];
+  let o;
+  e[5] !== s ? (o = s && /* @__PURE__ */ i(C, { variant: "caption", color: "text.disbaled", children: s }), e[5] = s, e[6] = o) : o = e[6];
+  let p;
+  return e[7] !== l || e[8] !== o ? (p = /* @__PURE__ */ N(M, { children: [
+    l,
+    o
+  ] }), e[7] = l, e[8] = o, e[9] = p) : p = e[9], p;
+}
+const de = ({
+  formData: a,
+  setFormData: e,
+  errors: t,
+  validateField: d,
+  setFieldError: c,
+  checkDirty: s
+}) => {
+  const {
+    orgId: l
+  } = $(), o = V((n, r) => {
+    const m = {
+      ...a,
+      [n]: r
+    };
+    e(m), s(m);
+    const f = d(n, r);
+    c(n, f);
+  }, [a, e, s, d, c]), {
+    mutate: p,
+    isPending: E
+  } = Q({
+    orgName: l
+  }), {
+    data: P,
+    isLoading: y
+  } = U({
+    orgName: l
+  }), u = P?.deploymentPipelines ?? [], {
+    data: v
+  } = X({
+    orgName: l
+  }), g = A(() => {
+    const n = /* @__PURE__ */ new Map();
+    return (v ?? []).forEach((r) => n.set(r.name, r.displayName ?? r.name)), n;
+  }, [v]);
+  z(() => {
+    if (!a.deploymentPipeline && u.length > 0) {
+      const n = u[0].name;
+      e((r) => {
+        const m = {
+          ...r,
+          deploymentPipeline: n
+        };
+        return s(m), m;
+      });
+    }
+  }, [u, a.deploymentPipeline, e, s]);
+  const h = A(
+    () => Y.debounce((n) => {
+      if (n.length < 3) {
+        o("name", "");
+        return;
+      }
+      p({
+        displayName: n,
+        resourceType: "project"
+      }, {
+        onSuccess: (r) => {
+          e((m) => {
+            const f = {
+              ...m,
+              name: r.name
+            };
+            return s(f), f;
+          });
+        },
+        onError: (r) => {
+          console.error("Failed to generate name:", r);
+        }
+      });
+    }, 500),
+    // 500ms delay
+    [p, e, s]
+  );
+  return z(() => () => {
+    h.cancel();
+  }, [h]), z(() => {
+    a.displayName && a.displayName.length >= 3 ? h(a.displayName) : (h.cancel(), e((n) => ({
+      ...n,
+      name: ""
+    })));
+  }, [a.displayName, e, h]), /* @__PURE__ */ i(b.Stack, { spacing: 3, children: /* @__PURE__ */ N(b.Section, { children: [
+    /* @__PURE__ */ i(b.Subheader, { children: "Project Details" }),
+    /* @__PURE__ */ N(b.Stack, { spacing: 2, children: [
+      /* @__PURE__ */ i(b.ElementWrapper, { label: "Name", name: "displayName", children: /* @__PURE__ */ i(F, { id: "displayName", value: a.displayName, onChange: (n) => o("displayName", n.target.value), placeholder: "e.g., Customer Support Platform", error: !!t.displayName, helperText: E ? /* @__PURE__ */ N(M, { direction: "row", alignItems: "center", gap: 1, children: [
+        /* @__PURE__ */ i(O, { size: 12 }),
+        /* @__PURE__ */ i(C, { variant: "caption", children: "Validating name..." })
+      ] }) : t.displayName, fullWidth: !0 }) }),
+      /* @__PURE__ */ i(b.ElementWrapper, { label: "Description (optional)", name: "description", children: /* @__PURE__ */ i(F, { id: "description", value: a.description, onChange: (n) => o("description", n.target.value), placeholder: "Short description of this project", multiline: !0, minRows: 2, maxRows: 6, error: !!t.description, helperText: t.description, fullWidth: !0 }) }),
+      /* @__PURE__ */ i(b.ElementWrapper, { label: "Deployment Pipeline", name: "deploymentPipeline", children: /* @__PURE__ */ N(H, { id: "deploymentPipeline", value: a.deploymentPipeline, onChange: (n) => o("deploymentPipeline", n.target.value), error: !!t.deploymentPipeline, disabled: y, displayEmpty: !0, renderValue: (n) => {
+        const r = u.find((m) => m.name === n);
+        return r ? /* @__PURE__ */ i(se, { pipeline: r, envDisplayNameMap: g }) : n;
+      }, fullWidth: !0, children: [
+        y && /* @__PURE__ */ i(k, { value: "", disabled: !0, children: /* @__PURE__ */ N(M, { direction: "row", alignItems: "center", gap: 1, children: [
+          /* @__PURE__ */ i(O, { size: 12 }),
+          /* @__PURE__ */ i(C, { variant: "caption", children: "Loading pipelines..." })
+        ] }) }),
+        !y && u.length === 0 && /* @__PURE__ */ i(k, { value: "", disabled: !0, children: "No deployment pipelines available" }),
+        u.map((n) => /* @__PURE__ */ i(k, { value: n.name, children: /* @__PURE__ */ i(ce, { pipeline: n, envDisplayNameMap: g }) }, n.name))
+      ] }) })
+    ] })
+  ] }) });
+}, pe = () => {
+  const a = J(), {
+    orgId: e
+  } = $(), [t, d] = B({
+    name: "",
+    displayName: "",
+    description: "",
+    deploymentPipeline: "default"
+  }), {
+    errors: c,
+    validateField: s,
+    validateForm: l,
+    clearErrors: o,
+    setFieldError: p
+  } = Z(re), {
+    checkDirty: E,
+    resetDirty: P
+  } = _(t), y = A(() => ({
+    orgName: e ?? "default"
+  }), [e]), {
+    mutate: u,
+    isPending: v,
+    error: g
+  } = ee(y), h = V(() => {
+    a(R(I.children.org.path, {
+      orgId: e ?? ""
+    }));
+  }, [a, e]), [n, r] = B({}), m = V(() => {
+    if (l(t))
+      r({});
+    else {
+      r(c);
+      return;
+    }
+    u({
+      name: t.name,
+      displayName: t.displayName,
+      description: t.description?.trim() || void 0,
+      deploymentPipeline: t.deploymentPipeline
+    }, {
+      onSuccess: () => {
+        P(), o(), a(R(I.children.org.children.projects.path, {
+          orgId: y.orgName ?? "",
+          projectId: t.name
+        }));
+      },
+      onError: (f) => {
+        console.error("Failed to create project:", f);
+      }
+    });
+  }, [t, l, u, a, y.orgName, P, o, c]);
+  return /* @__PURE__ */ i(te, { title: "Create a New Project", description: "Create a new project to organize and manage your agents.", disableIcon: !0, backHref: R(I.children.org.path, {
+    orgId: e ?? ""
+  }), backLabel: "Back to Organization", children: /* @__PURE__ */ N(L, { display: "flex", flexDirection: "column", gap: 2, children: [
+    /* @__PURE__ */ i(de, { formData: t, setFormData: d, errors: c, validateField: s, setFieldError: p, checkDirty: E }),
+    !!g && /* @__PURE__ */ i(G, { severity: "error", sx: {
+      mt: 2
+    }, children: g instanceof Error ? g.message : "Failed to create project" }),
+    /* @__PURE__ */ i(oe, { lastSubmittedValidationErrors: n, isPending: v, onCancel: h, onSubmit: m, isNameEmpty: !t.name.trim(), mode: "deploy" })
+  ] }) });
+}, ve = {
+  title: "Add New Project",
+  description: "A page component for Add New Project",
+  icon: ae,
+  path: I.children.org.children.newProject.path,
+  component: pe
+};
+export {
+  pe as AddNewProject,
+  ve as metaData
+};