amp-workflow-ui 0.1.27 → 0.1.28

package/README.md

@@ -1,128 +1,128 @@
-# amp-workflow-ui
-
-Reusable Approval Workflow UI components (DialogOpener, ApprovalWorkflow) for Ampersand portals. Components are decoupled from app internals and accept an injected API client and optional URL builder.
-
-## Install
-
-```bash
-npm install amp-workflow-ui
-# or
-yarn add amp-workflow-ui
-```
-
-Peer dependencies required in host:
-
-- react, react-dom (18.x)
-- @mui/material, @mui/system, @mui/icons-material
-- @emotion/react, @emotion/styled
-- react-hot-toast
-
-## Usage
-
-### 1) Basic React usage
-
-```tsx
-import { DialogOpener } from 'amp-workflow-ui'
-import axios from 'axios'
-
-const api = {
-  get: (p: any) => axios({ method: 'GET', baseURL: 'https://api.example.com', url: p.url }),
-  post: (p: any) => axios({ method: 'POST', baseURL: 'https://api.example.com', url: p.url, data: p.data })
-}
-
-<DialogOpener
-  openDialog={open}
-  handleClose={() => setOpen(false)}
-  userInfoData={userInfo}
-  api={api}
-  // optional
-  urlBuilder={(moduleName, moduleId, ctx, referenceId) => `/${moduleName}/${moduleId}${referenceId ? `?ref=${referenceId}` : ''}`}
-/>
-```
-
-Or render inline:
-
-```tsx
-import { ApprovalWorkflow } from 'amp-workflow-ui'
-
-<ApprovalWorkflow userInfo={userInfo} api={api} />
-```
-
-Props overview:
-- DialogOpener
-  - required: openDialog, userInfoData, api
-  - optional: handleClose, selectedWorkflowsList, urlBuilder, loadingComponent
-- ApprovalWorkflow
-  - required: userInfo, api
-  - optional: selectedWorkflowsList, urlBuilder, loadingComponent
-
-### 2) Next.js usage (recommended)
-
-Next.js may SSR your imports by default. To ensure client-only execution and avoid Node ESM resolver issues, dynamically import the package in a client component:
-
-```tsx
-// app or pages client component
-import React from 'react'
-import dynamic from 'next/dynamic'
-
-export const WorkflowDialog = dynamic(
-  async () => {
-    // Prefer the package root; if your environment errors on ESM resolution,
-    // fall back to the CJS build at /dist/index.cjs.js.
-    try {
-      const mod = await import('amp-workflow-ui')
-      return mod.DialogOpener
-    } catch {
-      const mod = await import('amp-workflow-ui/dist/index.cjs.js')
-      return mod.DialogOpener
-    }
-  },
-  { ssr: false, loading: () => <div>Loading Approval Management...</div> }
-)
-```
-
-If you still see “Directory import '@mui/material/Button' is not supported” during SSR, force the CJS build:
-```tsx
-const WorkflowDialog = dynamic(() => import('amp-workflow-ui/dist/index.cjs.js').then(m => m.DialogOpener), { ssr: false })
-```
-
-## Build (package maintainers)
-
-```bash
-npm run build
-```
-
-## Publish (package maintainers)
-
-```bash
-# 1) Ensure you are logged in and have publish rights
-npm whoami || npm login
-
-# 2) Bump version (semver)
-npm version patch   # or minor | major
-
-# 3) Build
-npm run build
-
-# 4) Publish (public)
-npm publish --access public
-```
-
-Notes:
-- Do not publish pre-releases unless explicitly needed; otherwise npm requires --tag.
-- If your org enforces 2FA for publish, complete the OTP step in your terminal.
-- Keep peerDependencies in sync to avoid duplicate React/MUI bundles in hosts.
-
-## Troubleshooting
-
-- Error: Element type is invalid … got: object
-  - Ensure you are importing the React component (named export) and not the module object. When using dynamic(), return the component (e.g., m.DialogOpener).
-
-- Error: Directory import '@mui/material/Button' is not supported resolving ES modules
-  - This comes from Node’s ESM resolver during SSR. Use dynamic import with ssr: false or import the CJS build: `amp-workflow-ui/dist/index.cjs.js`.
-
-## License
-
-MIT
-
-
+# amp-workflow-ui
+
+Reusable Approval Workflow UI components (DialogOpener, ApprovalWorkflow) for Ampersand portals. Components are decoupled from app internals and accept an injected API client and optional URL builder.
+
+## Install
+
+```bash
+npm install amp-workflow-ui
+# or
+yarn add amp-workflow-ui
+```
+
+Peer dependencies required in host:
+
+- react, react-dom (18.x)
+- @mui/material, @mui/system, @mui/icons-material
+- @emotion/react, @emotion/styled
+- react-hot-toast
+
+## Usage
+
+### 1) Basic React usage
+
+```tsx
+import { DialogOpener } from 'amp-workflow-ui'
+import axios from 'axios'
+
+const api = {
+  get: (p: any) => axios({ method: 'GET', baseURL: 'https://api.example.com', url: p.url }),
+  post: (p: any) => axios({ method: 'POST', baseURL: 'https://api.example.com', url: p.url, data: p.data })
+}
+
+<DialogOpener
+  openDialog={open}
+  handleClose={() => setOpen(false)}
+  userInfoData={userInfo}
+  api={api}
+  // optional
+  urlBuilder={(moduleName, moduleId, ctx, referenceId) => `/${moduleName}/${moduleId}${referenceId ? `?ref=${referenceId}` : ''}`}
+/>
+```
+
+Or render inline:
+
+```tsx
+import { ApprovalWorkflow } from 'amp-workflow-ui'
+
+<ApprovalWorkflow userInfo={userInfo} api={api} />
+```
+
+Props overview:
+- DialogOpener
+  - required: openDialog, userInfoData, api
+  - optional: handleClose, selectedWorkflowsList, urlBuilder, loadingComponent
+- ApprovalWorkflow
+  - required: userInfo, api
+  - optional: selectedWorkflowsList, urlBuilder, loadingComponent
+
+### 2) Next.js usage (recommended)
+
+Next.js may SSR your imports by default. To ensure client-only execution and avoid Node ESM resolver issues, dynamically import the package in a client component:
+
+```tsx
+// app or pages client component
+import React from 'react'
+import dynamic from 'next/dynamic'
+
+export const WorkflowDialog = dynamic(
+  async () => {
+    // Prefer the package root; if your environment errors on ESM resolution,
+    // fall back to the CJS build at /dist/index.cjs.js.
+    try {
+      const mod = await import('amp-workflow-ui')
+      return mod.DialogOpener
+    } catch {
+      const mod = await import('amp-workflow-ui/dist/index.cjs.js')
+      return mod.DialogOpener
+    }
+  },
+  { ssr: false, loading: () => <div>Loading Approval Management...</div> }
+)
+```
+
+If you still see “Directory import '@mui/material/Button' is not supported” during SSR, force the CJS build:
+```tsx
+const WorkflowDialog = dynamic(() => import('amp-workflow-ui/dist/index.cjs.js').then(m => m.DialogOpener), { ssr: false })
+```
+
+## Build (package maintainers)
+
+```bash
+npm run build
+```
+
+## Publish (package maintainers)
+
+```bash
+# 1) Ensure you are logged in and have publish rights
+npm whoami || npm login
+
+# 2) Bump version (semver)
+npm version patch   # or minor | major
+
+# 3) Build
+npm run build
+
+# 4) Publish (public)
+npm publish --access public
+```
+
+Notes:
+- Do not publish pre-releases unless explicitly needed; otherwise npm requires --tag.
+- If your org enforces 2FA for publish, complete the OTP step in your terminal.
+- Keep peerDependencies in sync to avoid duplicate React/MUI bundles in hosts.
+
+## Troubleshooting
+
+- Error: Element type is invalid … got: object
+  - Ensure you are importing the React component (named export) and not the module object. When using dynamic(), return the component (e.g., m.DialogOpener).
+
+- Error: Directory import '@mui/material/Button' is not supported resolving ES modules
+  - This comes from Node’s ESM resolver during SSR. Use dynamic import with ssr: false or import the CJS build: `amp-workflow-ui/dist/index.cjs.js`.
+
+## License
+
+MIT
+
+

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React7 = require('react');
+var React2 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var Dialog = require('@mui/material/Dialog');
 var useMediaQuery = require('@mui/material/useMediaQuery');
@@ -17,7 +17,7 @@ var KeyboardArrowDownIcon = require('@mui/icons-material/KeyboardArrowDown');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React7__default = /*#__PURE__*/_interopDefault(React7);
+var React2__default = /*#__PURE__*/_interopDefault(React2);
 var Dialog__default = /*#__PURE__*/_interopDefault(Dialog);
 var useMediaQuery__default = /*#__PURE__*/_interopDefault(useMediaQuery);
 var DialogActions6__default = /*#__PURE__*/_interopDefault(DialogActions6);
@@ -28,7 +28,7 @@ var CloseIcon__default = /*#__PURE__*/_interopDefault(CloseIcon);
 var KeyboardArrowDownIcon__default = /*#__PURE__*/_interopDefault(KeyboardArrowDownIcon);
 
 // src/context.tsx
-var WorkflowContext = React7.createContext(null);
+var WorkflowContext = React2.createContext(null);
 function WorkflowProvider({
   value,
   children
@@ -36,7 +36,7 @@ function WorkflowProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(WorkflowContext.Provider, { value, children });
 }
 function useWorkflowContext() {
-  const ctx = React7.useContext(WorkflowContext);
+  const ctx = React2.useContext(WorkflowContext);
   if (!ctx) {
     throw new Error("useWorkflowContext must be used within WorkflowProvider");
   }
@@ -437,7 +437,7 @@ function WorkflowRequestCard({
               ] }),
               (_r = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _r.map((_, idx) => {
                 const level = idx + 1;
-                return /* @__PURE__ */ jsxRuntime.jsx(React7__default.default.Fragment, { children: userLevel == "L" + level ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                return /* @__PURE__ */ jsxRuntime.jsx(React2__default.default.Fragment, { children: userLevel == "L" + level ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx(material.Chip, { label: "L" + level, className: "step-chip-current" }),
                   (requestDetails == null ? void 0 : requestDetails.levels.length) !== level && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "step-line step-line-inactive" })
                 ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -653,14 +653,14 @@ function SendBackDialog({
   onSuccess
 }) {
   const { userInfo, api } = useWorkflowContext();
-  const [comment, setComment] = React7.useState("");
-  const [selectedFile, setSelectedFile] = React7.useState(null);
-  const [fileName, setFileName] = React7.useState("");
-  const [error, setError] = React7.useState({});
-  const [loading, setLoading] = React7.useState(false);
-  const [fileLoading, setFileLoading] = React7.useState(false);
-  const fileInputRef = React7.useRef(null);
-  const [snackbar, setSnackbar] = React7.useState({
+  const [comment, setComment] = React2.useState("");
+  const [selectedFile, setSelectedFile] = React2.useState(null);
+  const [fileName, setFileName] = React2.useState("");
+  const [error, setError] = React2.useState({});
+  const [loading, setLoading] = React2.useState(false);
+  const [fileLoading, setFileLoading] = React2.useState(false);
+  const fileInputRef = React2.useRef(null);
+  const [snackbar, setSnackbar] = React2.useState({
     open: false,
     message: "",
     severity: "success"
@@ -909,10 +909,10 @@ function ApproveDialog({
   const { userInfo, api } = useWorkflowContext();
   const theme = styles.useTheme();
   useMediaQuery__default.default(theme.breakpoints.down("lg"));
-  const [comment, setComment] = React7.useState("");
-  const [error, setError] = React7.useState({});
-  const [loading, setLoading] = React7.useState(false);
-  const [snackbar, setSnackbar] = React7.useState({
+  const [comment, setComment] = React2.useState("");
+  const [error, setError] = React2.useState({});
+  const [loading, setLoading] = React2.useState(false);
+  const [snackbar, setSnackbar] = React2.useState({
     open: false,
     message: "",
     severity: "success"
@@ -1089,18 +1089,18 @@ function RejectDialog({
       }
     );
   };
-  const [rejectReasons, setRejectReasons] = React7.useState("");
-  const [comment, setComment] = React7.useState("");
-  const [error, setError] = React7.useState({ reason: "", comment: "" });
-  const [statusApplicableList, setStatusApplicableList] = React7.useState([]);
-  const [loading, setLoading] = React7.useState(false);
-  const [snackbar, setSnackbar] = React7.useState({
+  const [rejectReasons, setRejectReasons] = React2.useState("");
+  const [comment, setComment] = React2.useState("");
+  const [error, setError] = React2.useState({ reason: "", comment: "" });
+  const [statusApplicableList, setStatusApplicableList] = React2.useState([]);
+  const [loading, setLoading] = React2.useState(false);
+  const [snackbar, setSnackbar] = React2.useState({
     open: false,
     message: "",
     severity: "success"
   });
   const handleCloseSnackbar = () => setSnackbar((prev) => ({ ...prev, open: false }));
-  React7.useEffect(() => {
+  React2.useEffect(() => {
     (async () => {
       var _a;
       try {
@@ -1306,10 +1306,10 @@ function OnHoldDialog({
   const { userInfo, api } = useWorkflowContext();
   const theme = styles.useTheme();
   useMediaQuery__default.default(theme.breakpoints.down("lg"));
-  const [comment, setComment] = React7.useState("");
-  const [error, setError] = React7.useState({ comment: "" });
-  const [loading, setLoading] = React7.useState(false);
-  const [snackbar, setSnackbar] = React7.useState({
+  const [comment, setComment] = React2.useState("");
+  const [error, setError] = React2.useState({ comment: "" });
+  const [loading, setLoading] = React2.useState(false);
+  const [snackbar, setSnackbar] = React2.useState({
     open: false,
     message: "",
     severity: "success"
@@ -1458,8 +1458,8 @@ function OnHoldDialog({
 }
 var OnHoldDialog_default = OnHoldDialog;
 var useDebounce = (value, delay) => {
-  const [debouncedValue, setDebouncedValue] = React7.useState(value);
-  React7.useEffect(() => {
+  const [debouncedValue, setDebouncedValue] = React2.useState(value);
+  React2.useEffect(() => {
     const timeoutId = setTimeout(() => {
       setDebouncedValue(value);
     }, delay);
@@ -1553,15 +1553,15 @@ function FilterModal({
   onApply
 }) {
   const { api } = useWorkflowContext();
-  const [approvalType, setApprovalType] = React7.useState(
+  const [approvalType, setApprovalType] = React2.useState(
     (initialFilters == null ? void 0 : initialFilters.approvalType) || ""
   );
-  const [approvalStatus, setApprovalStatus] = React7.useState(
+  const [approvalStatus, setApprovalStatus] = React2.useState(
     (initialFilters == null ? void 0 : initialFilters.approvalStatus) || ""
   );
-  const [sortBy, setSortBy] = React7.useState((initialFilters == null ? void 0 : initialFilters.sortBy) || "");
-  const [approvalTypeOptions, setApprovalTypeOptions] = React7.useState([]);
-  React7.useEffect(() => {
+  const [sortBy, setSortBy] = React2.useState((initialFilters == null ? void 0 : initialFilters.sortBy) || "");
+  const [approvalTypeOptions, setApprovalTypeOptions] = React2.useState([]);
+  React2.useEffect(() => {
     api.get({ url: "/workflow/activities?page=1&size=1000", serviceURL: "api" }).then((res) => {
       var _a;
       console.log("\u{1F680} ~ FilterModal ~ res:", res);
@@ -1570,7 +1570,7 @@ function FilterModal({
       console.error("Failed to fetch approval types:", err);
     });
   }, [api]);
-  React7.useEffect(() => {
+  React2.useEffect(() => {
     if (open) {
       setApprovalType((initialFilters == null ? void 0 : initialFilters.approvalType) || "");
       setApprovalStatus((initialFilters == null ? void 0 : initialFilters.approvalStatus) || "");
@@ -1795,22 +1795,23 @@ function ApprovalWorkflow({
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
   material.useTheme();
   const { api, urlBuilder, loadingComponent, ENV_VARIABLES } = useWorkflowContext();
-  const [selectedOption, setSelectedOption] = React7.useState(
+  const [selectedOption, setSelectedOption] = React2.useState(
     selectedWorkflowsList.length ? "selected" : "Assign To Me"
   );
   console.log("\u{1F680} ~ ApprovalWorkflow ~ selectedOption:", selectedOption);
-  const [expandedId, setExpandedId] = React7.useState(null);
-  const [sendDialog, setSendDialog] = React7__default.default.useState(null);
-  const [approveTarget, setApproveTarget] = React7__default.default.useState(null);
-  const [rejectTarget, setRejectTarget] = React7__default.default.useState(null);
-  const [onHoldTarget, setOnHoldTarget] = React7__default.default.useState(null);
-  const [expandedDetails, setExpandedDetails] = React7.useState([]);
+  const [expandedId, setExpandedId] = React2.useState(null);
+  const [sendDialog, setSendDialog] = React2.useState(null);
+  const [approveTarget, setApproveTarget] = React2.useState(null);
+  const [rejectTarget, setRejectTarget] = React2.useState(null);
+  const [onHoldTarget, setOnHoldTarget] = React2.useState(null);
+  const [expandedDetails, setExpandedDetails] = React2.useState([]);
   console.log("\u{1F680} ~ ApprovalWorkflow ~ expandedDetails:", expandedDetails);
-  const [descriptionView, setDescriptionView] = React7.useState(null);
-  const [urlConfig, setUrlConfig] = React7.useState({});
-  const [viewMoreDetails, setViewMoreDetails] = React7.useState(null);
-  const [isViewMoreOpen, setIsViewMoreOpen] = React7.useState(false);
-  const [isFilterOpen, setIsFilterOpen] = React7.useState(false);
+  const [descriptionView, setDescriptionView] = React2.useState(null);
+  const [urlConfig, setUrlConfig] = React2.useState({});
+  const [viewMoreDetails, setViewMoreDetails] = React2.useState(null);
+  const [isViewMoreOpen, setIsViewMoreOpen] = React2.useState(false);
+  const [isFilterOpen, setIsFilterOpen] = React2.useState(false);
+  console.log("\u{1F680} ~ PIPELINE TEST");
   const handleOpenViewMore = (details) => {
     setViewMoreDetails(details);
     setIsViewMoreOpen(true);
@@ -1819,7 +1820,7 @@ function ApprovalWorkflow({
     setIsViewMoreOpen(false);
     setViewMoreDetails(null);
   };
-  const [tabs, setTabs] = React7.useState({
+  const [tabs, setTabs] = React2.useState({
     "Assign To Me": {
       data: [],
       page: 1,
@@ -1858,13 +1859,13 @@ function ApprovalWorkflow({
     }
   });
   console.log("\u{1F680} ~ ApprovalWorkflow ~ tabs set:", tabs);
-  const [searchText, setSearchText] = React7.useState("");
+  const [searchText, setSearchText] = React2.useState("");
   const debouncedSearchTerm = useDebounce_default(searchText, 500);
-  React7.useEffect(() => {
+  React2.useEffect(() => {
     var _a2;
     setSearchText(((_a2 = tabs[selectedOption]) == null ? void 0 : _a2.search) || "");
   }, [selectedOption]);
-  React7.useEffect(() => {
+  React2.useEffect(() => {
     var _a2, _b2;
     if (debouncedSearchTerm !== tabs[selectedOption].search && ((_a2 = tabs[selectedOption]) == null ? void 0 : _a2.initialized)) {
       setTabs((prev) => ({
@@ -1886,14 +1887,14 @@ function ApprovalWorkflow({
       );
     }
   }, [debouncedSearchTerm]);
-  const handleClearSearch = React7.useCallback(() => {
+  const handleClearSearch = React2.useCallback(() => {
     setSearchText("");
   }, []);
-  const handleSearchChange = React7.useCallback((value) => {
+  const handleSearchChange = React2.useCallback((value) => {
     setSearchText(value);
   }, []);
-  const observer = React7__default.default.useRef(null);
-  const lastCardRef = React7.useCallback(
+  const observer = React2.useRef(null);
+  const lastCardRef = React2.useCallback(
     (node) => {
       const currentTab = tabs[selectedOption];
       if ((currentTab == null ? void 0 : currentTab.loading) || !(currentTab == null ? void 0 : currentTab.hasMore)) return;
@@ -1913,6 +1914,24 @@ function ApprovalWorkflow({
     },
     [tabs, selectedOption]
   );
+  const scrollRef = React2.useRef(null);
+  React2.useEffect(() => {
+    const handleKeyDown = (e) => {
+      var _a2, _b2, _c2, _d2;
+      if (((_a2 = document.activeElement) == null ? void 0 : _a2.tagName) === "INPUT" || ((_b2 = document.activeElement) == null ? void 0 : _b2.tagName) === "TEXTAREA") {
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        (_c2 = scrollRef.current) == null ? void 0 : _c2.scrollBy({ top: -100, behavior: "smooth" });
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        (_d2 = scrollRef.current) == null ? void 0 : _d2.scrollBy({ top: 100, behavior: "smooth" });
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
   const handleSendBack = (workflowLogId) => {
     setSendDialog(workflowLogId);
   };
@@ -1945,7 +1964,7 @@ function ApprovalWorkflow({
       return acc;
     }, {});
   };
-  React7.useEffect(() => {
+  React2.useEffect(() => {
     api.get({
       url: `/workflow/url-config`,
       serviceURL: "api"
@@ -1953,7 +1972,7 @@ function ApprovalWorkflow({
       setUrlConfig(formatDataUrlConfig(res == null ? void 0 : res.data));
     });
   }, []);
-  const fetchData = React7.useCallback(
+  const fetchData = React2.useCallback(
     (tab, page, search, filtersOverride) => {
       var _a2, _b2, _c2;
       console.log("[DEBUG-FETCH-DATA] \u{1F3AF} fetchData called with:", {
@@ -2183,7 +2202,7 @@ function ApprovalWorkflow({
       serviceURL: "api"
     }).then((res) => setExpandedDetails(res == null ? void 0 : res.data));
   };
-  React7.useEffect(() => {
+  React2.useEffect(() => {
     var _a2;
     console.log("[DEBUG-INIT] \u{1F680} Initial useEffect triggered");
     console.log("[DEBUG-INIT] userInfo:", userInfo);
@@ -2207,13 +2226,13 @@ function ApprovalWorkflow({
       console.log("[DEBUG-INIT] \u274C No userInfo.id, skipping initial fetch");
     }
   }, [userInfo]);
-  React7.useEffect(() => {
+  React2.useEffect(() => {
     const tabState = tabs[selectedOption];
     if ((tabState == null ? void 0 : tabState.page) > 1) {
       fetchData(selectedOption, tabState.page, tabState.search);
     }
   }, [(_d = tabs[selectedOption]) == null ? void 0 : _d.page]);
-  React7.useEffect(() => {
+  React2.useEffect(() => {
     var _a2;
     if (Object.keys(urlConfig).length > 0 && userInfo && tabs && tabs["Assign To Me"] && !tabs["Assign To Me"].initialized) {
       fetchData("Assign To Me", 1, ((_a2 = tabs["Assign To Me"]) == null ? void 0 : _a2.search) || "");
@@ -2391,6 +2410,7 @@ function ApprovalWorkflow({
               /* @__PURE__ */ jsxRuntime.jsxs(
                 system.Box,
                 {
+                  ref: scrollRef,
                   className: "fixedModal hide-scrollbar",
                   sx: {
                     overflowY: "auto",
@@ -2620,7 +2640,7 @@ function DialogOpener({
 }) {
   const theme = material.useTheme();
   useMediaQuery__default.default(theme.breakpoints.down("lg"));
-  const [screenWidth, setScreenWidth] = React7.useState(
+  const [screenWidth, setScreenWidth] = React2.useState(
     typeof window !== "undefined" ? window.innerWidth : 0
   );
   console.log("Dialog opener props", {
@@ -2629,7 +2649,7 @@ function DialogOpener({
     userInfoData,
     selectedWorkflowsList
   });
-  React7.useEffect(() => {
+  React2.useEffect(() => {
     const updateScreenWidth = () => setScreenWidth(window.innerWidth);
     window.addEventListener("resize", updateScreenWidth);
     return () => window.removeEventListener("resize", updateScreenWidth);
@@ -2734,7 +2754,7 @@ function ApprovalWorkflow2(props) {
     ENV_VARIABLES,
     ...rest
   } = props;
-  console.log("\u{1F680} ~ ApprovalWorkflow ~ props:", props);
+  console.log("\u{1F680} ~ PIPELINE TEST");
   return /* @__PURE__ */ jsxRuntime.jsx(
     WorkflowProvider,
     {