unifyedx-storybook-new 0.1.41 → 0.1.43

package/dist/unifyedx-storybook-new.css

@@ -624,6 +624,10 @@
     height: calc(var(--spacing) * 12);
   }
 
+  .h-64 {
+    height: calc(var(--spacing) * 64);
+  }
+
   .h-\[72px\] {
     height: 72px;
   }
@@ -1351,18 +1355,10 @@
     color: #1c274c;
   }
 
-  .text-\[\#6b7280\] {
-    color: #6b7280;
-  }
-
   .text-\[\#101112\] {
     color: #101112;
   }
 
-  .text-\[\#252525\] {
-    color: #252525;
-  }
-
   .text-\[\#767676\] {
     color: #767676;
   }
@@ -1451,10 +1447,6 @@
     opacity: .7;
   }
 
-  .opacity-90 {
-    opacity: .9;
-  }
-
   .opacity-100 {
     opacity: 1;
   }
@@ -1628,10 +1620,6 @@
       }
     }
 
-    .hover\:text-\[\#1f6ed4\]:hover {
-      color: #1f6ed4;
-    }
-
     .hover\:text-blue-800:hover {
       color: var(--color-blue-800);
     }

package/dist/unifyedx-storybook-new.es.js

@@ -75156,7 +75156,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
     }
   }, [section.key, data, updateHandler]);
   return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       "h2",
       {
         style: {
@@ -75164,11 +75164,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
           fontWeight: "bold",
           marginBottom: "10px"
         },
-        children: [
-          section.title,
-          " - ",
-          section.type
-        ]
+        children: section.title
       }
     ),
     /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", marginBottom: "10px" }, children: section.description }),
@@ -75287,9 +75283,6 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             onChange: (value) => {
               const newData = { ...data, [field.key]: value };
               setData(newData);
-              if (updateHandler) {
-                updateHandler(section.key, newData);
-              }
             },
             options: field.options || [],
             placeholder: field.placeholder || `Select ${field.label}`,
@@ -75393,7 +75386,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
         /* @__PURE__ */ jsx(
           ToggleSwitch,
           {
-            checked: Boolean(data[field.key] || field.default),
+            checked: typeof data[field.key] === "boolean" ? data[field.key] : field.default,
             onChange: (isOn) => {
               console.log("Toggle changed:", field.key, isOn);
               const newData = { ...data, [field.key]: isOn };
@@ -76164,11 +76157,13 @@ function Mt(t){if(typeof document=="undefined")return;let o=document.head||docum
 function DynamicConfig({
   appid,
   configdata = null,
-  disableApi = false
+  disableApi = false,
+  onCancel
 }) {
   const [config, setConfig] = React__default.useState(configdata);
   const [data, setData] = React__default.useState(null);
   const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
   const [validationErrors, setValidationErrors] = useState({});
   const configEndPoint = `${gatewayBase()}/unifyedxappmodulemanagement/api/v1/appmanager/${appid}/configuration`;
   const updateEndPoint = configEndPoint;
@@ -76407,7 +76402,7 @@ function DynamicConfig({
     }
     const saveData = async () => {
       try {
-        setLoading(true);
+        setSaving(true);
         const transformedPayload = {};
         if (data) {
           Object.keys(data).forEach((key) => {
@@ -76481,12 +76476,16 @@ function DynamicConfig({
           draggable: true
         });
       } finally {
-        setLoading(false);
+        setSaving(false);
       }
     };
     saveData();
   };
   const handleCancel = () => {
+    if (onCancel) {
+      onCancel();
+      return;
+    }
     const hasUnsavedChanges = validationErrors && Object.keys(validationErrors).length > 0;
     if (hasUnsavedChanges) {
       const confirmed = window.confirm(
@@ -76530,8 +76529,9 @@ function DynamicConfig({
   const configurationSections = configdata?.configuration || config?.configuration;
   useEffect(() => {
     if (disableApi && configdata) {
-      const transformedData = transformApiResponse(configdata);
-      setData(transformedData);
+      if (!data || Object.keys(data).length === 0) {
+        initializeEmptyData();
+      }
     } else if (disableApi && !configdata) {
       initializeEmptyData();
     }
@@ -76543,8 +76543,8 @@ function DynamicConfig({
         className: "dynamic-config bg-white w-full h-[calc(100vh-350px)] overflow-y-auto",
         style: { padding: "0px 20px 0px 0px" },
         children: [
-          loading && /* @__PURE__ */ jsx(Spinner, { size: "small" }),
-          configurationSections?.map((section, index) => {
+          loading && /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center h-64", children: /* @__PURE__ */ jsx(Spinner, { size: "large" }) }),
+          !loading && configurationSections?.map((section, index) => {
             const C = getComponentForType(section.type);
             if (C && C !== "UnknownType") {
               return /* @__PURE__ */ jsx(
@@ -76562,14 +76562,14 @@ function DynamicConfig({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "w-full gap-5 bg-white flex justify-end py-3 px-7 rounded-t-md rounded-b-2xl border border-gray-300", style: "box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.20); margin-top: 20px;", children: [
+    /* @__PURE__ */ jsxs("div", { className: "w-full gap-5 bg-white flex justify-end py-3 px-7 rounded-t-md rounded-b-2xl border border-gray-300", style: { boxShadow: "0 -2px 10px 0 rgba(0, 0, 0, 0.20)", marginTop: "20px" }, children: [
       /* @__PURE__ */ jsx(
         UnifyedCoreButton,
         {
           category: "secondary",
           onClick: handleCancel,
           label: "Cancel",
-          disabled: loading
+          disabled: saving
         }
       ),
       /* @__PURE__ */ jsx(
@@ -76577,8 +76577,8 @@ function DynamicConfig({
         {
           category: "primary",
           onClick: handleSave,
-          disabled: loading,
-          label: loading ? "Saving..." : "Apply",
+          disabled: saving,
+          label: saving ? "Saving..." : "Apply",
           type: "submit"
         }
       )
@@ -76620,6 +76620,7 @@ const FullConfigPage = ({
   disableApi = false
 }) => {
   const [activeTab, setActiveTab] = useState(0);
+  const [showCancelModal, setShowCancelModal] = useState(false);
   const {
     pageHeader = {},
     appletHeader = {},
@@ -76631,8 +76632,26 @@ const FullConfigPage = ({
     heading: "App Details",
     subHeading: "View app details and customize configurations to align with institutional requirements.",
     isLeftArrow: true,
+    onBackClick: () => window.history.back(),
     ...pageHeader
   };
+  const breadcrumbItems = breadcrumb.map((item) => ({
+    label: item.text,
+    href: item.href || "#"
+  }));
+  const handleCancelRequest = useCallback(() => {
+    console.log("handleCancelRequest called - showing modal");
+    setShowCancelModal(true);
+  }, []);
+  const handleCancelConfirm = useCallback((result) => {
+    setShowCancelModal(false);
+    if (result.primary) {
+      console.log("User confirmed cancel - navigating back");
+      window.history.back();
+    } else {
+      console.log("User cancelled the cancel action - modal closed, data preserved");
+    }
+  }, []);
   const defaultAppletHeader = {
     heading: "Application",
     subHeading: "Application configuration and details",
@@ -76660,7 +76679,7 @@ const FullConfigPage = ({
   };
   const tabs = [
     { label: "Overview", content: renderOverview(defaultOverview) },
-    { label: "Configuration", content: /* @__PURE__ */ jsx(DynamicConfig, { appid, configdata: { configuration }, disableApi }) }
+    { label: "Configuration", content: /* @__PURE__ */ jsx(DynamicConfig, { appid, configdata: { configuration }, disableApi, onCancel: handleCancelRequest }) }
   ];
   function renderIcon(icon) {
     if (!icon) {
@@ -76714,25 +76733,16 @@ const FullConfigPage = ({
     ] });
   }
   return /* @__PURE__ */ jsxs("div", { className: "full-config-page", children: [
-    /* @__PURE__ */ jsxs("div", { className: "py-3 flex items-center gap-4", children: [
-      defaultPageHeader.isLeftArrow && /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: "cursor-pointer flex-shrink-0 mt-1",
-          "aria-label": "Go back",
-          onClick: () => window.history.back(),
-          children: /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M19 12H5M12 19l-7-7 7-7", stroke: "#6b7280", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
-        /* @__PURE__ */ jsx("h1", { className: "text-[18px] font-semibold leading-tight truncate m-0", children: defaultPageHeader.heading }),
-        /* @__PURE__ */ jsx("p", { className: "text-[13px] font-normal text-[#6b7280] opacity-90 mt-1 truncate mb-0", children: defaultPageHeader.subHeading })
-      ] })
-    ] }),
-    breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx("nav", { className: "flex gap-2 items-center text-[13px] text-[#6b7280] mb-4", "aria-label": "Breadcrumb", children: breadcrumb.map((item, index) => /* @__PURE__ */ jsxs("span", { className: "flex items-center", children: [
-      index > 0 && /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", style: { margin: "0 2px" }, children: /* @__PURE__ */ jsx("path", { d: "M9 18L15 12L9 6", stroke: "#6b7280", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
-      item.isCurrent ? /* @__PURE__ */ jsx("span", { className: "font-semibold text-[#252525]", children: item.text }) : /* @__PURE__ */ jsx("a", { href: item.href, className: "hover:text-[#1f6ed4] cursor-pointer", style: { textDecoration: "none" }, children: item.text })
-    ] }, index)) }),
+    /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        heading: defaultPageHeader.heading,
+        subHeading: breadcrumbItems.length > 0 ? void 0 : defaultPageHeader.subHeading,
+        breadcrumbItems,
+        isLeftArrow: defaultPageHeader.isLeftArrow,
+        onBackClick: defaultPageHeader.onBackClick
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { className: "bg-[#ffffff] border border-[#eef2f6] rounded-[12px] px-6 py-5 flex gap-4 items-start mb-4 shadow-sm", children: [
       /* @__PURE__ */ jsx("div", { className: "icon w-[72px] h-[72px] rounded-full flex items-center justify-center bg-[#F5F5F6] text-[#1C274C] font-bold text-[18px]", children: renderIcon(defaultAppletHeader.icon) }),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
@@ -76759,7 +76769,19 @@ const FullConfigPage = ({
         index
       )) }) }),
       /* @__PURE__ */ jsx("div", { className: "p-8 h-full overflow-y-auto", children: tabs[activeTab].content })
-    ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        isOpen: showCancelModal,
+        onClose: handleCancelConfirm,
+        variant: "warning",
+        title: "Are you sure you want to cancel?",
+        primaryButtonText: "Proceed",
+        secondaryButtonText: "Cancel",
+        children: "Your unsaved changes will be lost if you proceed."
+      }
+    )
   ] });
 };