@datatechsolutions/ui 3.15.0 → 3.15.1

package/dist/platform/pages/index.mjs

@@ -4166,7 +4166,7 @@ var CATEGORY_COLOR = {
   keyvalue: "red",
   search: "amber"
 };
-var TOTAL_STEPS2 = 4;
+var TOTAL_STEPS2 = 5;
 function DatasourceNewWizardPageView({
   labels,
   initialStep,
@@ -4178,6 +4178,11 @@ function DatasourceNewWizardPageView({
   const clampedInitial = Math.min(TOTAL_STEPS2, Math.max(1, initialStep ?? 1));
   const [step, setStep] = useState(clampedInitial);
   const [dialect, setDialect] = useState("");
+  const [categoryId, setCategoryId] = useState(() => {
+    if (!dialect) return "";
+    const found = DIALECT_CATEGORIES.find((c) => c.dialects.some((d) => d.value === dialect));
+    return found?.id ?? "";
+  });
   const [name, setName] = useState("");
   const [host, setHost] = useState("");
   const [port, setPort] = useState("");
@@ -4237,8 +4242,9 @@ function DatasourceNewWizardPageView({
     onStepChange?.(clamped);
   }, [onStepChange]);
   function canAdvance(from) {
-    if (from === 1) return Boolean(dialect);
-    if (from === 2) return name.trim().length > 0;
+    if (from === 1) return Boolean(categoryId);
+    if (from === 2) return Boolean(dialect);
+    if (from === 3) return name.trim().length > 0;
     return true;
   }
   const goNext = useCallback(() => {
@@ -4326,12 +4332,14 @@ function DatasourceNewWizardPageView({
     return () => window.removeEventListener("keydown", onKey);
   }, [step, dialect, name, touched]);
   const stepTitles = [
-    labels.wizardStep1Title,
+    `${labels.wizardStep1Title} \xB7 1/2`,
+    `${labels.wizardStep1Title} \xB7 2/2`,
     labels.wizardStep2Title,
     labels.wizardStep3Title,
     labels.wizardStep4Title
   ];
   const stepSubtitles = [
+    labels.wizardStep1Subtitle,
     labels.wizardStep1Subtitle,
     labels.wizardStep2Subtitle,
     labels.wizardStep3Subtitle,
@@ -4370,44 +4378,77 @@ function DatasourceNewWizardPageView({
       )
     }
   );
+  function renderStepCategory() {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "radiogroup",
+        "aria-label": labels.wizardStep1Title,
+        className: "grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4",
+        children: DIALECT_CATEGORIES.map((cat) => {
+          const color = CATEGORY_COLOR[cat.id] ?? "slate";
+          const categoryLabel = labels[cat.labelKey] ?? cat.id;
+          const selected = cat.id === categoryId;
+          return /* @__PURE__ */ jsx(
+            FilterTileButton,
+            {
+              isActive: selected,
+              color,
+              icon: /* @__PURE__ */ jsx(cat.icon, { className: "h-5 w-5" }),
+              label: categoryLabel,
+              count: `${cat.dialects.length}`,
+              onClick: () => {
+                setCategoryId(cat.id);
+                if (dialect && !cat.dialects.some((d) => d.value === dialect)) {
+                  setDialect("");
+                }
+                markTouched();
+              }
+            },
+            cat.id
+          );
+        })
+      }
+    );
+  }
   function renderStep1() {
-    return /* @__PURE__ */ jsx("div", { className: "space-y-5", children: DIALECT_CATEGORIES.map((cat) => {
-      const color = CATEGORY_COLOR[cat.id] ?? "slate";
-      const categoryLabel = labels[cat.labelKey] ?? cat.id;
-      return /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-400", children: [
-          /* @__PURE__ */ jsx(cat.icon, { className: "h-3.5 w-3.5" }),
-          categoryLabel
-        ] }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            role: "radiogroup",
-            "aria-label": categoryLabel,
-            className: "grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4",
-            children: cat.dialects.map((opt) => {
-              const selected = opt.value === dialect;
-              const logoSrc = DIALECT_LOGO_SRC[opt.value.toLowerCase()];
-              return /* @__PURE__ */ jsx(
-                FilterTileButton,
-                {
-                  isActive: selected,
-                  color,
-                  icon: logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: opt.label, className: "h-5 w-5 object-contain" }) : /* @__PURE__ */ jsx(CircleStackIcon, { className: "h-5 w-5" }),
-                  label: opt.label,
-                  count: opt.formType.replace("-", " "),
-                  onClick: () => {
-                    setDialect(opt.value);
-                    markTouched();
-                  }
-                },
-                opt.value
-              );
-            })
-          }
-        )
-      ] }, cat.id);
-    }) });
+    const cat = DIALECT_CATEGORIES.find((c) => c.id === categoryId);
+    if (!cat) return null;
+    const color = CATEGORY_COLOR[cat.id] ?? "slate";
+    const categoryLabel = labels[cat.labelKey] ?? cat.id;
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-400", children: [
+        /* @__PURE__ */ jsx(cat.icon, { className: "h-3.5 w-3.5" }),
+        categoryLabel
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "radiogroup",
+          "aria-label": categoryLabel,
+          className: "grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4",
+          children: cat.dialects.map((opt) => {
+            const selected = opt.value === dialect;
+            const logoSrc = DIALECT_LOGO_SRC[opt.value.toLowerCase()];
+            return /* @__PURE__ */ jsx(
+              FilterTileButton,
+              {
+                isActive: selected,
+                color,
+                icon: logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: opt.label, className: "h-5 w-5 object-contain" }) : /* @__PURE__ */ jsx(CircleStackIcon, { className: "h-5 w-5" }),
+                label: opt.label,
+                count: opt.formType.replace("-", " "),
+                onClick: () => {
+                  setDialect(opt.value);
+                  markTouched();
+                }
+              },
+              opt.value
+            );
+          })
+        }
+      )
+    ] });
   }
   function renderConnectionFields() {
     if (!dialectOption) return null;
@@ -4938,10 +4979,19 @@ function DatasourceNewWizardPageView({
       )
     ] });
   }
-  const stepBody = step === 1 ? renderStep1() : step === 2 ? renderStep2() : step === 3 ? renderStep3() : renderStep4();
+  const stepBody = step === 1 ? renderStepCategory() : step === 2 ? renderStep1() : (
+    // dialect picker — original step 1
+    step === 3 ? renderStep2() : (
+      // connection — original step 2
+      step === 4 ? renderStep3() : (
+        // governance — original step 3
+        renderStep4()
+      )
+    )
+  );
   const advanceDisabled = !canAdvance(step);
   const isLast = step === TOTAL_STEPS2;
-  const scrollableStep = step === 1 || step === 4;
+  const scrollableStep = step === TOTAL_STEPS2;
   const bodyClass = scrollableStep ? "p-5 pt-5 sm:p-8 sm:pt-8 max-h-[60vh] overflow-y-auto" : "p-5 pt-5 sm:p-8 sm:pt-8";
   const footer = /* @__PURE__ */ jsxs("div", { className: "liquid-divider flex items-center justify-between border-t pt-4", children: [
     /* @__PURE__ */ jsx(Button, { type: "button", outline: true, onClick: step === 1 ? cancelWithConfirm : goBack, disabled: submitting, children: step === 1 ? labels.wizardCancel : labels.wizardBack }),