From 5883ac96a697832ee0a1e5bd057abaf58d5d8fa6 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Fri, 29 Aug 2025 16:17:00 +0530
Subject: [PATCH 001/157] Canvas UI POC

---
 .../src/AppBuilder/AppCanvas/AppCanvas.jsx    |  8 +++++
 .../src/AppBuilder/AppCanvas/Container.jsx    |  4 ---
 .../src/AppBuilder/AppCanvas/Grid/Grid.jsx    | 31 +++++++++++++++++++
 frontend/src/AppBuilder/AppCanvas/Selecto.jsx |  4 +++
 .../src/AppBuilder/AppCanvas/appCanvas.scss   | 12 ++++++-
 .../_stores/slices/rightSideBarSlice.js       |  4 ++-
 6 files changed, 57 insertions(+), 6 deletions(-)

diff --git a/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx b/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx
index 40a8ac16b9..efeee074b3 100644
--- a/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx
@@ -26,6 +26,7 @@ import PagesSidebarNavigation from '../RightSideBar/PageSettingsTab/PageMenu/Pag
 import { DragGhostWidget, ResizeGhostWidget } from './GhostWidgets';
 import AppCanvasBanner from '../../AppBuilder/Header/AppCanvasBanner';
 import { debounce } from 'lodash';
+import { RIGHT_SIDE_BAR_TAB } from '../RightSideBar/rightSidebarConstants';
 
 export const AppCanvas = ({ appId, switchDarkMode, darkMode }) => {
   const { moduleId, isModuleMode, appType } = useModuleContext();
@@ -52,6 +53,7 @@ export const AppCanvas = ({ appId, switchDarkMode, darkMode }) => {
   const editorMarginLeft = useSidebarMargin(canvasContainerRef);
   const getPageId = useStore((state) => state.getCurrentPageId, shallow);
   const isRightSidebarOpen = useStore((state) => state.isRightSidebarOpen, shallow);
+  const draggingComponentId = useStore((state) => state.draggingComponentId, shallow);
   const isSidebarOpen = useStore((state) => state.isSidebarOpen, shallow);
   const currentPageId = useStore((state) => state.modules[moduleId].currentPageId);
   const homePageId = useStore((state) => state.appStore.modules[moduleId].app.homePageId);
@@ -115,6 +117,12 @@ export const AppCanvas = ({ appId, switchDarkMode, darkMode }) => {
     };
   }, [currentLayout, canvasMaxWidth, isViewerSidebarPinned, moduleId, isRightSidebarOpen]);
 
+  useEffect(() => {
+    if (draggingComponentId) {
+      useStore.getState().setActiveRightSideBarTab(RIGHT_SIDE_BAR_TAB.COMPONENTS);
+    }
+  }, [draggingComponentId]);
+
   const canvasContainerStyles = useMemo(() => {
     const canvasBgColor =
       currentMode === 'view'
diff --git a/frontend/src/AppBuilder/AppCanvas/Container.jsx b/frontend/src/AppBuilder/AppCanvas/Container.jsx
index c3dafc657d..9996e250bc 100644
--- a/frontend/src/AppBuilder/AppCanvas/Container.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/Container.jsx
@@ -72,10 +72,6 @@ const Container = React.memo(
 
     const setCurrentDragCanvasId = useGridStore((state) => state.actions.setCurrentDragCanvasId);
 
-    const { handleDrop } = useCanvasDropHandler({
-      appType,
-    });
-
     const [{ isOverCurrent }, drop] = useDrop({
       accept: 'box',
       hover: (item, monitor) => {
diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
index eee4a31f76..4439ef9e5e 100644
--- a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
@@ -32,6 +32,7 @@ import { useGroupedTargetsScrollHandler } from './hooks/useGroupedTargetsScrollH
 import { DROPPABLE_PARENTS, NO_OF_GRIDS, SUBCONTAINER_WIDGETS } from '../appCanvasConstants';
 import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
 import { useElementGuidelines } from './hooks/useElementGuidelines';
+import { RIGHT_SIDE_BAR_TAB } from '../../RightSideBar/rightSidebarConstants';
 
 const CANVAS_BOUNDS = { left: 0, top: 0, right: 0, position: 'css' };
 const RESIZABLE_CONFIG = {
@@ -86,6 +87,7 @@ export default function Grid({ gridWidth, currentLayout }) {
   const currentDragCanvasId = useGridStore((state) => state.currentDragCanvasId, shallow);
   const [isVerticalExpansionRestricted, setIsVerticalExpansionRestricted] = useState(false);
   const groupedTargets = [...findHighestLevelofSelection().map((component) => '.ele-' + component.id)];
+  const setActiveRightSideBarTab = useStore((state) => state.setActiveRightSideBarTab);
 
   const isWidgetResizable = useMemo(() => {
     if (virtualTarget) {
@@ -848,10 +850,12 @@ export default function Grid({ gridWidth, currentLayout }) {
           if (e.target.id === 'moveable-virtual-ghost-element') {
             return true;
           }
+
           // This is to prevent parent component from being dragged and the stop the propagation of the event
           if (getHoveredComponentForGrid() !== e.target.id) {
             return false;
           }
+
           newDragParentId.current = boxList.find((box) => box.id === e.target.id)?.parent;
           e?.moveable?.controlBox?.removeAttribute('data-off-screen');
 
@@ -942,6 +946,10 @@ export default function Grid({ gridWidth, currentLayout }) {
           }
           try {
             if (isDraggingRef.current) {
+              setTimeout(() => {
+                useStore.getState().setRightSidebarOpen(true);
+              }, 100);
+
               useStore.getState().setDraggingComponentId(null);
               isDraggingRef.current = false;
             }
@@ -1007,6 +1015,25 @@ export default function Grid({ gridWidth, currentLayout }) {
           hideGridLines();
           clearActiveTargetClassNamesAfterSnapping(selectedComponents);
           toggleCanvasUpdater();
+          // Move this to common function
+          const canvas = document.querySelector('.canvas-container');
+          const sidebar = document.querySelector('.editor-sidebar');
+          const droppedElem = document.getElementById(e.target.id);
+
+          if (!canvas || !sidebar || !droppedElem) return;
+
+          const droppedRect = droppedElem.getBoundingClientRect();
+          const sidebarRect = sidebar.getBoundingClientRect();
+
+          const isOverlapping = droppedRect.right > sidebarRect.left && droppedRect.left < sidebarRect.right;
+
+          if (isOverlapping) {
+            const overlap = droppedRect.right - sidebarRect.left;
+            canvas.scrollTo({
+              left: canvas.scrollLeft + overlap + 15,
+              behavior: 'smooth',
+            });
+          }
         }}
         onDrag={(e) => {
           if (e.target.id === 'moveable-virtual-ghost-element') {
@@ -1189,6 +1216,10 @@ export default function Grid({ gridWidth, currentLayout }) {
           }
         }}
         snapGridAll={true}
+        onClick={(e) => {
+          useStore.getState().setActiveRightSideBarTab(RIGHT_SIDE_BAR_TAB.CONFIGURATION);
+          useStore.getState().setRightSidebarOpen(true);
+        }}
       />
     </>
   );
diff --git a/frontend/src/AppBuilder/AppCanvas/Selecto.jsx b/frontend/src/AppBuilder/AppCanvas/Selecto.jsx
index 23235fb32a..b380c65f95 100644
--- a/frontend/src/AppBuilder/AppCanvas/Selecto.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/Selecto.jsx
@@ -10,6 +10,7 @@ import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
 export const EditorSelecto = () => {
   const { moduleId } = useModuleContext();
   const setActiveRightSideBarTab = useStore((state) => state.setActiveRightSideBarTab);
+  const setRightSidebarOpen = useStore((state) => state.setRightSidebarOpen);
   const setSelectedComponents = useStore((state) => state.setSelectedComponents);
   const getSelectedComponents = useStore((state) => state.getSelectedComponents, shallow);
   const getComponentDefinition = useStore((state) => state.getComponentDefinition);
@@ -119,6 +120,9 @@ export const EditorSelecto = () => {
           }
         }
       }
+
+      // setActiveRightSideBarTab(RIGHT_SIDE_BAR_TAB.COMPONENTS);
+      // setRightSidebarOpen(true);
       return false;
     },
     [setSelectedComponents, setActiveRightSideBarTab, getSelectedComponents]
diff --git a/frontend/src/AppBuilder/AppCanvas/appCanvas.scss b/frontend/src/AppBuilder/AppCanvas/appCanvas.scss
index fea79195c5..0c9e9c6add 100644
--- a/frontend/src/AppBuilder/AppCanvas/appCanvas.scss
+++ b/frontend/src/AppBuilder/AppCanvas/appCanvas.scss
@@ -71,4 +71,14 @@
 
 *:focus-visible {
     outline: none;  // Rewriting it to replace outline coming from browser styles
-  }
\ No newline at end of file
+  }
+
+//   .canvas-container.is-child-being-dragged::before{
+//     content: '';
+//   position: absolute;
+//   top: 0;
+//   left: 0;
+//   width: 150%;
+//   height: 100%;
+//   overflow: hidden;
+//   }
\ No newline at end of file
diff --git a/frontend/src/AppBuilder/_stores/slices/rightSideBarSlice.js b/frontend/src/AppBuilder/_stores/slices/rightSideBarSlice.js
index 5831041dd8..b2977e66a8 100644
--- a/frontend/src/AppBuilder/_stores/slices/rightSideBarSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/rightSideBarSlice.js
@@ -8,7 +8,9 @@ const initialState = {
 
 export const createRightSideBarSlice = (set, get) => ({
   ...initialState,
-  setActiveRightSideBarTab: (tab) => set(() => ({ activeRightSideBarTab: tab }), false, 'setActiveRightSideBarTab'),
+  setActiveRightSideBarTab: (tab) => {
+    set(() => ({ activeRightSideBarTab: tab }), false, 'setActiveRightSideBarTab');
+  },
   toggleRightSidebar: () =>
     set((state) => ({ isRightSidebarOpen: !state.isRightSidebarOpen }), false, 'toggleRightSidebar'),
   setRightSidebarOpen: (open) => set(() => ({ isRightSidebarOpen: open }), false, 'setRightSidebarOpen'),

From 3178b3491ba350d3390dc7797dc51bfe794037bd Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Mon, 8 Sep 2025 14:47:56 +0530
Subject: [PATCH 002/157] keep right sidebar closed after dragging

---
 frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
index 6c9e9427f1..53895e90a9 100644
--- a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
@@ -949,9 +949,9 @@ export default function Grid({ gridWidth, currentLayout }) {
           }
           try {
             if (isDraggingRef.current) {
-              setTimeout(() => {
-                useStore.getState().setRightSidebarOpen(true);
-              }, 100);
+              // setTimeout(() => {
+              //   useStore.getState().setRightSidebarOpen(true);
+              // }, 100);
 
               useStore.getState().setDraggingComponentId(null);
               isDraggingRef.current = false;

From bb46e8600473c48445bf1870a23495e271eaad08 Mon Sep 17 00:00:00 2001
From: medhansh-alt <medhansh@tooljet.com>
Date: Fri, 3 Oct 2025 10:51:18 +0530
Subject: [PATCH 003/157] updated multi line code editor for test parameters

---
 .../src/AppBuilder/CodeEditor/CodeHinter.jsx  |  2 +-
 .../CodeEditor/MultiLineCodeEditor.jsx        | 33 +++++++++++++------
 .../src/AppBuilder/CodeEditor/styles.scss     | 16 +++++----
 3 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/frontend/src/AppBuilder/CodeEditor/CodeHinter.jsx b/frontend/src/AppBuilder/CodeEditor/CodeHinter.jsx
index be37006f61..bedd48ecd0 100644
--- a/frontend/src/AppBuilder/CodeEditor/CodeHinter.jsx
+++ b/frontend/src/AppBuilder/CodeEditor/CodeHinter.jsx
@@ -98,7 +98,7 @@ const Portal = ({ children, ...restProps }) => {
 const PopupIcon = ({ callback, icon, tip, position, isMultiEditor = false, isQueryManager = false }) => {
   const size = 16;
   const topRef = isNumber(position?.height) ? Math.floor(position?.height) - 30 : 32;
-  let top = isMultiEditor ? 270 : topRef > 32 ? topRef : 0;
+  let top = topRef > 32 ? topRef : 0;
   // for query manager we allow the height of query manager to be dynamic, so we need to render the popup icon at the bottom of code editor
   const renderAtBottom = isQueryManager && (isMultiEditor || topRef > 32);
 
diff --git a/frontend/src/AppBuilder/CodeEditor/MultiLineCodeEditor.jsx b/frontend/src/AppBuilder/CodeEditor/MultiLineCodeEditor.jsx
index 6c99aeb05d..fe6d576fb6 100644
--- a/frontend/src/AppBuilder/CodeEditor/MultiLineCodeEditor.jsx
+++ b/frontend/src/AppBuilder/CodeEditor/MultiLineCodeEditor.jsx
@@ -36,8 +36,8 @@ const langSupport = Object.freeze({
 
 const MultiLineCodeEditor = (props) => {
   const {
-    darkMode,
-    height,
+    darkMode = 'false',
+    height = '300', //default height set to 300px
     initialValue,
     lang,
     className,
@@ -57,7 +57,6 @@ const MultiLineCodeEditor = (props) => {
     onInputChange, // Added this prop to immediately handle value changes
   } = props;
   const editorRef = useRef(null);
-
   const replaceIdsWithName = useStore((state) => state.replaceIdsWithName, shallow);
   const wrapperRef = useRef(null);
   const getSuggestions = useStore((state) => state.getSuggestions, shallow);
@@ -133,7 +132,16 @@ const MultiLineCodeEditor = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   };
 
-  const heightInPx = typeof height === 'string' && height?.includes('px') ? height : `${height}px`;
+  // Convert height to proper format
+  const getHeightValue = () => {
+    if (!height) return '300px'; // Default height
+    if (typeof height === 'string') {
+      return height.includes('px') ? height : `${height}px`;
+    }
+    return `${height}px`;
+  };
+
+  const heightValue = getHeightValue();
 
   const theme = darkMode ? okaidia : githubLight;
   const langExtention = langSupport[lang] ?? null;
@@ -255,6 +263,7 @@ const MultiLineCodeEditor = (props) => {
           tip="Pop out code editor into a new window"
           isMultiEditor={true}
           isQueryManager={isInsideQueryPane}
+          position={{ height: height }}
         />
 
         <CodeHinter.Portal
@@ -264,21 +273,24 @@ const MultiLineCodeEditor = (props) => {
           componentName={componentName}
           key={componentName}
           forceUpdate={forceUpdate}
-          optionalProps={{ styles: { height: 300 }, cls: '' }}
+          optionalProps={{ styles: { height: height ? height : '300' }, cls: '' }}
           darkMode={darkMode}
           selectors={{ className: 'preview-block-portal' }}
           dragResizePortal={true}
           callgpt={null}
         >
           <ErrorBoundary>
-            <div className="codehinter-container w-100 " data-cy={`${cyLabel}-input-field`} style={{ height: '100%' }}>
+            <div
+              className="codehinter-container w-100"
+              data-cy={`${cyLabel}-input-field`}
+              style={{ height: heightValue }}
+            >
               <CodeMirror
                 ref={editorRef}
                 value={initialValueWithReplacedIds}
                 placeholder={placeholder}
-                height={'100%'}
-                minHeight={heightInPx}
-                {...(isInsideQueryPane ? { maxHeight: '100%' } : {})}
+                height={heightValue}
+                maxHeight={heightValue}
                 width="100%"
                 theme={theme}
                 extensions={[
@@ -313,11 +325,12 @@ const MultiLineCodeEditor = (props) => {
                 basicSetup={setupConfig}
                 style={{
                   overflowY: 'auto',
+                  height: heightValue,
                 }}
                 className={`codehinter-multi-line-input ${isInsideQueryPane ? 'code-editor-query-panel' : ''}`}
                 indentWithTab={false}
                 readOnly={readOnly}
-                editable={editable} //for transformations in query manager
+                editable={editable}
                 onCreateEditor={(view) => {
                   setEditorView(view);
                   if (setCodeEditorView) {
diff --git a/frontend/src/AppBuilder/CodeEditor/styles.scss b/frontend/src/AppBuilder/CodeEditor/styles.scss
index 7c0fa0c0fa..02021bef9c 100644
--- a/frontend/src/AppBuilder/CodeEditor/styles.scss
+++ b/frontend/src/AppBuilder/CodeEditor/styles.scss
@@ -299,8 +299,8 @@
     height: 100%;
 
     .cm-editor {
-        min-height: 300px;
-        height: 300px;
+        // min-height: 300px;
+        // height: 300px;
         max-height: fit-content !important;
 
         .cm-gutters {
@@ -362,11 +362,6 @@
     }
 }
 
-
-
-
-
-
 .cm-scroller {
     overflow-y: auto !important;
     overflow-x: hidden !important;
@@ -437,9 +432,16 @@
 }
 
 .editor-container {
+    .codehinter-container{
+        height: 100% !important;
+    }
+    .codehinter-multi-line-input {
+        height: 100% !important;
+    }
     .codehinter-input .cm-editor {
         max-height: auto !important;
         justify-content: center;
+        height: 100% !important ;
     }
 }
 

From a564a845976b8f981f280b3de2d2275e16f2a597 Mon Sep 17 00:00:00 2001
From: Srimanitejas123 <mani@tooljet.com>
Date: Fri, 3 Oct 2025 15:28:16 +0530
Subject: [PATCH 004/157] resolved conflicts

---
 frontend/ee | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/ee b/frontend/ee
index e80a07c169..bd5bded7a7 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit e80a07c169dd03c8aaed56ce4e7bac2013963482
+Subproject commit bd5bded7a722713b0bef583b5315809b2eed1431

From fa18d1b815ae38628e85bcc070e5dee48c1ac544 Mon Sep 17 00:00:00 2001
From: medhansh-alt <medhansh@tooljet.com>
Date: Fri, 3 Oct 2025 15:36:54 +0530
Subject: [PATCH 005/157] updated submodule

---
 frontend/ee | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/ee b/frontend/ee
index e80a07c169..2d736c14bd 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit e80a07c169dd03c8aaed56ce4e7bac2013963482
+Subproject commit 2d736c14bd2286991ed18101639ccc21f6ceb15d

From ed1658300b9a25e8adf883d371963086831ba3c3 Mon Sep 17 00:00:00 2001
From: Srimanitejas123 <mani@tooljet.com>
Date: Fri, 3 Oct 2025 15:56:38 +0530
Subject: [PATCH 006/157] updated spec

---
 .../cypress/constants/texts/workflows.js      |   2 +-
 .../cypress/fixtures/exportedApp.json         | 384 ++++++++++++++++++
 2 files changed, 385 insertions(+), 1 deletion(-)
 create mode 100644 cypress-tests/cypress/fixtures/exportedApp.json

diff --git a/cypress-tests/cypress/constants/texts/workflows.js b/cypress-tests/cypress/constants/texts/workflows.js
index 7db7de9a7e..6c9cd864c5 100644
--- a/cypress-tests/cypress/constants/texts/workflows.js
+++ b/cypress-tests/cypress/constants/texts/workflows.js
@@ -47,7 +47,7 @@ AND table_type = 'BASE TABLE';`,
 
   runjsCodeForWebhooks: 'return "Verifying webhooks response"',
   runjsExpectedValueForWebhooks: "Verifying webhooks response",
-  expectedStatusCodeText: 201,
+  expectedStatusCodeText: 200,
   exportFixturePath: "cypress/fixtures/exportedApp.json",
   workflowLabel: "Workflow",
 };
diff --git a/cypress-tests/cypress/fixtures/exportedApp.json b/cypress-tests/cypress/fixtures/exportedApp.json
new file mode 100644
index 0000000000..a424c6c401
--- /dev/null
+++ b/cypress-tests/cypress/fixtures/exportedApp.json
@@ -0,0 +1,384 @@
+{
+  "app": [
+    {
+      "definition": {
+        "appV2": {
+          "id": "bf731e7e-09d8-4d8f-a058-0dad247c938e",
+          "type": "workflow",
+          "name": "huel",
+          "slug": "bf731e7e-09d8-4d8f-a058-0dad247c938e",
+          "isPublic": null,
+          "isMaintenanceOn": true,
+          "icon": "server",
+          "organizationId": "36d06256-56db-4236-a9cd-c1732000d618",
+          "currentVersionId": null,
+          "userId": "2b52a870-fc7e-4d2d-a4fd-7cd105568e80",
+          "workflowApiToken": "7b029a3b-14a9-414e-95d7-74f9aa5410db",
+          "workflowEnabled": true,
+          "isInitialisedFromPrompt": false,
+          "appGeneratedFromPrompt": false,
+          "appBuilderMode": "visual",
+          "aiGenerationMetadata": null,
+          "createdAt": "2025-10-03T10:22:52.118Z",
+          "creationMode": "DEFAULT",
+          "updatedAt": "2025-10-03T10:23:09.418Z",
+          "__loaded": true,
+          "editingVersion": {
+            "id": "c7acf317-23ea-47ee-9c14-ae96b69400dd",
+            "name": "v1",
+            "definition": {
+              "nodes": [
+                {
+                  "id": "1ce09ce1-2bf8-4b0e-9144-7aabc2cbbc03",
+                  "data": {
+                    "nodeType": "start",
+                    "label": "Start trigger"
+                  },
+                  "position": {
+                    "x": 100,
+                    "y": 250
+                  },
+                  "type": "input",
+                  "sourcePosition": "right",
+                  "deletable": false,
+                  "width": 206,
+                  "height": 41,
+                  "selected": false
+                },
+                {
+                  "id": "5b0155cf-29a5-49e4-873b-de97f61b5968",
+                  "type": "query",
+                  "sourcePosition": "right",
+                  "targetPosition": "left",
+                  "draggable": true,
+                  "data": {
+                    "idOnDefinition": "e7f15471-53c0-49e5-b978-5f1b64fd8ad8",
+                    "kind": "runjs",
+                    "options": {}
+                  },
+                  "position": {
+                    "x": 552.0092353820801,
+                    "y": 252.00923538208008
+                  },
+                  "deletable": false,
+                  "width": 206,
+                  "height": 40,
+                  "selected": false
+                },
+                {
+                  "id": "63003194-3056-4107-aa5c-e5745a026b8d",
+                  "data": {
+                    "nodeType": "response",
+                    "label": "Response",
+                    "code": "return runjs1.data",
+                    "statusCode": {
+                      "fxActive": false,
+                      "value": "200"
+                    },
+                    "nodeName": "response1"
+                  },
+                  "position": {
+                    "x": 752.0092353820801,
+                    "y": 352.0092353820801
+                  },
+                  "type": "output",
+                  "sourcePosition": "right",
+                  "targetPosition": "left",
+                  "deletable": false,
+                  "width": 206,
+                  "height": 40,
+                  "selected": true
+                }
+              ],
+              "edges": [
+                {
+                  "id": "7992c4c0-cd40-4e23-b854-cc7c88a5ebd9",
+                  "source": "1ce09ce1-2bf8-4b0e-9144-7aabc2cbbc03",
+                  "target": "5b0155cf-29a5-49e4-873b-de97f61b5968",
+                  "sourceHandle": null,
+                  "type": "custom"
+                },
+                {
+                  "id": "18175dab-8e00-4d6e-a4d8-5c506b4d6192",
+                  "source": "5b0155cf-29a5-49e4-873b-de97f61b5968",
+                  "target": "63003194-3056-4107-aa5c-e5745a026b8d",
+                  "sourceHandle": "success",
+                  "type": "custom"
+                }
+              ],
+              "queries": [
+                {
+                  "idOnDefinition": "e7f15471-53c0-49e5-b978-5f1b64fd8ad8",
+                  "id": "886943b9-6cbe-4d00-a4fc-d5567529d15c"
+                }
+              ],
+              "webhookParams": [],
+              "defaultParams": "{\"key\":\"your value\"}",
+              "dependencies": {
+                "javascript": {
+                  "dependencies": {}
+                }
+              },
+              "setupScript": {
+                "javascript": "// lodash\n// const _ = require('lodash');\n"
+              }
+            },
+            "globalSettings": {
+              "appInMaintenance": false,
+              "canvasMaxWidth": 100,
+              "canvasMaxWidthType": "%",
+              "canvasMaxHeight": 2400,
+              "canvasBackgroundColor": "var(--cc-appBackground-surface)",
+              "backgroundFxQuery": "",
+              "appMode": "light"
+            },
+            "pageSettings": null,
+            "showViewerNavigation": true,
+            "homePageId": "06ea85f4-80be-4d9e-aefc-862548bade41",
+            "appId": "bf731e7e-09d8-4d8f-a058-0dad247c938e",
+            "currentEnvironmentId": "b21edc90-cd2e-4a3a-9200-d6874615da50",
+            "promotedFrom": null,
+            "createdAt": "2025-10-03T10:22:52.302Z",
+            "updatedAt": "2025-10-03T10:23:06.872Z"
+          },
+          "components": [],
+          "pages": [
+            {
+              "id": "06ea85f4-80be-4d9e-aefc-862548bade41",
+              "name": "Home",
+              "handle": "home",
+              "index": 1,
+              "disabled": null,
+              "hidden": null,
+              "icon": null,
+              "createdAt": "2025-10-03T10:22:52.117Z",
+              "updatedAt": "2025-10-03T10:22:53.408Z",
+              "autoComputeLayout": true,
+              "appVersionId": "c7acf317-23ea-47ee-9c14-ae96b69400dd",
+              "pageGroupIndex": 1,
+              "pageGroupId": null,
+              "isPageGroup": false,
+              "url": null,
+              "openIn": "new_tab",
+              "type": "default",
+              "appId": ""
+            }
+          ],
+          "events": [],
+          "dataQueries": [
+            {
+              "id": "886943b9-6cbe-4d00-a4fc-d5567529d15c",
+              "name": "runjs1",
+              "options": {
+                "code": "return \"Verifying webhooks response\"",
+                "parameters": []
+              },
+              "dataSourceId": "5f5f68b4-64d3-4eae-8269-5362e3ace99d",
+              "appVersionId": "c7acf317-23ea-47ee-9c14-ae96b69400dd",
+              "createdAt": "2025-10-03T10:22:57.626Z",
+              "updatedAt": "2025-10-03T10:23:00.640Z"
+            }
+          ],
+          "dataSources": [
+            {
+              "id": "5f5f68b4-64d3-4eae-8269-5362e3ace99d",
+              "name": "runjsdefault",
+              "kind": "runjs",
+              "type": "static",
+              "pluginId": null,
+              "appVersionId": null,
+              "organizationId": "36d06256-56db-4236-a9cd-c1732000d618",
+              "scope": "global",
+              "createdAt": "2025-10-03T10:02:19.045Z",
+              "updatedAt": "2025-10-03T10:02:19.045Z"
+            }
+          ],
+          "appVersions": [
+            {
+              "id": "c7acf317-23ea-47ee-9c14-ae96b69400dd",
+              "name": "v1",
+              "definition": {
+                "nodes": [
+                  {
+                    "id": "1ce09ce1-2bf8-4b0e-9144-7aabc2cbbc03",
+                    "data": {
+                      "nodeType": "start",
+                      "label": "Start trigger"
+                    },
+                    "position": {
+                      "x": 100,
+                      "y": 250
+                    },
+                    "type": "input",
+                    "sourcePosition": "right",
+                    "deletable": false,
+                    "width": 206,
+                    "height": 41,
+                    "selected": false
+                  },
+                  {
+                    "id": "5b0155cf-29a5-49e4-873b-de97f61b5968",
+                    "type": "query",
+                    "sourcePosition": "right",
+                    "targetPosition": "left",
+                    "draggable": true,
+                    "data": {
+                      "idOnDefinition": "e7f15471-53c0-49e5-b978-5f1b64fd8ad8",
+                      "kind": "runjs",
+                      "options": {}
+                    },
+                    "position": {
+                      "x": 552.0092353820801,
+                      "y": 252.00923538208008
+                    },
+                    "deletable": false,
+                    "width": 206,
+                    "height": 40,
+                    "selected": false
+                  },
+                  {
+                    "id": "63003194-3056-4107-aa5c-e5745a026b8d",
+                    "data": {
+                      "nodeType": "response",
+                      "label": "Response",
+                      "code": "return runjs1.data",
+                      "statusCode": {
+                        "fxActive": false,
+                        "value": "200"
+                      },
+                      "nodeName": "response1"
+                    },
+                    "position": {
+                      "x": 752.0092353820801,
+                      "y": 352.0092353820801
+                    },
+                    "type": "output",
+                    "sourcePosition": "right",
+                    "targetPosition": "left",
+                    "deletable": false,
+                    "width": 206,
+                    "height": 40,
+                    "selected": true
+                  }
+                ],
+                "edges": [
+                  {
+                    "id": "7992c4c0-cd40-4e23-b854-cc7c88a5ebd9",
+                    "source": "1ce09ce1-2bf8-4b0e-9144-7aabc2cbbc03",
+                    "target": "5b0155cf-29a5-49e4-873b-de97f61b5968",
+                    "sourceHandle": null,
+                    "type": "custom"
+                  },
+                  {
+                    "id": "18175dab-8e00-4d6e-a4d8-5c506b4d6192",
+                    "source": "5b0155cf-29a5-49e4-873b-de97f61b5968",
+                    "target": "63003194-3056-4107-aa5c-e5745a026b8d",
+                    "sourceHandle": "success",
+                    "type": "custom"
+                  }
+                ],
+                "queries": [
+                  {
+                    "idOnDefinition": "e7f15471-53c0-49e5-b978-5f1b64fd8ad8",
+                    "id": "886943b9-6cbe-4d00-a4fc-d5567529d15c"
+                  }
+                ],
+                "webhookParams": [],
+                "defaultParams": "{\"key\":\"your value\"}",
+                "dependencies": {
+                  "javascript": {
+                    "dependencies": {}
+                  }
+                },
+                "setupScript": {
+                  "javascript": "// lodash\n// const _ = require('lodash');\n"
+                }
+              },
+              "globalSettings": {
+                "appInMaintenance": false,
+                "canvasMaxWidth": 100,
+                "canvasMaxWidthType": "%",
+                "canvasMaxHeight": 2400,
+                "canvasBackgroundColor": "var(--cc-appBackground-surface)",
+                "backgroundFxQuery": "",
+                "appMode": "light"
+              },
+              "pageSettings": null,
+              "showViewerNavigation": true,
+              "homePageId": "06ea85f4-80be-4d9e-aefc-862548bade41",
+              "appId": "bf731e7e-09d8-4d8f-a058-0dad247c938e",
+              "currentEnvironmentId": "b21edc90-cd2e-4a3a-9200-d6874615da50",
+              "promotedFrom": null,
+              "createdAt": "2025-10-03T10:22:52.302Z",
+              "updatedAt": "2025-10-03T10:23:06.872Z"
+            }
+          ],
+          "appEnvironments": [
+            {
+              "id": "b21edc90-cd2e-4a3a-9200-d6874615da50",
+              "organizationId": "36d06256-56db-4236-a9cd-c1732000d618",
+              "name": "development",
+              "isDefault": false,
+              "priority": 1,
+              "enabled": true,
+              "createdAt": "2025-10-03T10:02:18.821Z",
+              "updatedAt": "2025-10-03T10:02:18.821Z"
+            },
+            {
+              "id": "ef6fc5e8-a95f-412c-8fe3-4e6be00cc6d9",
+              "organizationId": "36d06256-56db-4236-a9cd-c1732000d618",
+              "name": "staging",
+              "isDefault": false,
+              "priority": 2,
+              "enabled": true,
+              "createdAt": "2025-10-03T10:02:18.825Z",
+              "updatedAt": "2025-10-03T10:02:18.825Z"
+            },
+            {
+              "id": "0162baf0-a89d-4ebc-9bb2-1666c3d5ccf5",
+              "organizationId": "36d06256-56db-4236-a9cd-c1732000d618",
+              "name": "production",
+              "isDefault": true,
+              "priority": 3,
+              "enabled": true,
+              "createdAt": "2025-10-03T10:02:18.825Z",
+              "updatedAt": "2025-10-03T10:02:18.825Z"
+            }
+          ],
+          "dataSourceOptions": [
+            {
+              "id": "d8f96951-0e45-4b29-bff0-6cb95a5a82f7",
+              "dataSourceId": "5f5f68b4-64d3-4eae-8269-5362e3ace99d",
+              "environmentId": "b21edc90-cd2e-4a3a-9200-d6874615da50",
+              "options": null,
+              "createdAt": "2025-10-03T10:02:19.046Z",
+              "updatedAt": "2025-10-03T10:02:19.046Z"
+            },
+            {
+              "id": "e2d43cb2-2bb5-4776-9be7-eca3b68ee716",
+              "dataSourceId": "5f5f68b4-64d3-4eae-8269-5362e3ace99d",
+              "environmentId": "ef6fc5e8-a95f-412c-8fe3-4e6be00cc6d9",
+              "options": null,
+              "createdAt": "2025-10-03T10:02:19.046Z",
+              "updatedAt": "2025-10-03T10:02:19.046Z"
+            },
+            {
+              "id": "f560a2d9-cf9d-44c4-bfa0-24e23246e0ac",
+              "dataSourceId": "5f5f68b4-64d3-4eae-8269-5362e3ace99d",
+              "environmentId": "0162baf0-a89d-4ebc-9bb2-1666c3d5ccf5",
+              "options": null,
+              "createdAt": "2025-10-03T10:02:19.046Z",
+              "updatedAt": "2025-10-03T10:02:19.046Z"
+            }
+          ],
+          "schemaDetails": {
+            "multiPages": true,
+            "multiEnv": true,
+            "globalDataSources": true
+          }
+        }
+      }
+    }
+  ],
+  "tooljet_version": "3.20.13-ee-lts"
+}
\ No newline at end of file

From 0f078b358e7b2961bc779aaf6739a14cd57ee19f Mon Sep 17 00:00:00 2001
From: medhansh-alt <medhansh@tooljet.com>
Date: Sat, 4 Oct 2025 18:34:40 +0530
Subject: [PATCH 007/157] Updated submodule ee-frontend

---
 frontend/ee | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/ee b/frontend/ee
index 2d736c14bd..fbb348561c 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit 2d736c14bd2286991ed18101639ccc21f6ceb15d
+Subproject commit fbb348561c7e98e12a215c0de957f2bfc2a73707

From 0694e26f7cb0245a65a7b63237dfa60e3cec35bc Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Thu, 9 Oct 2025 14:33:14 +0530
Subject: [PATCH 008/157] fix: adjust height calculation for group widget
 resizing and update color swatch close event

---
 frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx             | 6 +-----
 .../components/BaseColorSwatches/BaseColorSwatches.jsx      | 1 +
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
index 00a4da2be6..0011d7ee11 100644
--- a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
@@ -775,7 +775,7 @@ export default function Grid({ gridWidth, currentLayout }) {
         onResizeGroup={({ events }) => {
           const parentElm = events[0].target.closest('.real-canvas');
           const parentWidth = parentElm?.clientWidth;
-          const parentHeight = parentElm?.clientHeight;
+          const parentHeight = parentElm?.scrollHeight;
           handleActivateTargets(parentElm?.id?.replace('canvas-', ''));
           const { posRight, posLeft, posTop, posBottom } = getPositionForGroupDrag(events, parentWidth, parentHeight);
           events.forEach((ev) => {
@@ -783,7 +783,6 @@ export default function Grid({ gridWidth, currentLayout }) {
             ev.target.style.height = `${ev.height}px`;
             ev.target.style.transform = ev.drag.transform;
           });
-
           if (!(posLeft < 0 || posTop < 0 || posRight < 0 || posBottom < 0)) {
             groupResizeDataRef.current = events;
           }
@@ -1088,9 +1087,6 @@ export default function Grid({ gridWidth, currentLayout }) {
         onDragGroup={(ev) => {
           const { events } = ev;
           const parentElm = events[0]?.target?.closest('.real-canvas');
-          if (parentElm && !parentElm.classList.contains('show-grid')) {
-            parentElm?.classList?.add('show-grid');
-          }
 
           events.forEach((ev) => {
             const currentWidget = boxList.find(({ id }) => id === ev.target.id);
diff --git a/frontend/src/modules/common/components/BaseColorSwatches/BaseColorSwatches.jsx b/frontend/src/modules/common/components/BaseColorSwatches/BaseColorSwatches.jsx
index 9cea97d7a7..5b9faaa663 100644
--- a/frontend/src/modules/common/components/BaseColorSwatches/BaseColorSwatches.jsx
+++ b/frontend/src/modules/common/components/BaseColorSwatches/BaseColorSwatches.jsx
@@ -182,6 +182,7 @@ const BaseColorSwatches = ({
               fallbackPlacements={['top', 'left']}
               rootClose={true}
               overlay={eventPopover()}
+              rootCloseEvent="mousedown" // close picker when mousedown anywhere on screen
             >
               {ColorPickerInputBox()}
             </OverlayTrigger>

From 2eab0769d744a4134639e835996906f70e8ffe39 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Thu, 9 Oct 2025 15:23:31 +0530
Subject: [PATCH 009/157] fix: adjust width calculation for pasted components
 based on target parent container

---
 frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
index be9d24e8f1..2a06bfae00 100644
--- a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
+++ b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
@@ -612,6 +612,12 @@ export function pasteComponents(targetParentId, copiedComponentObj) {
     // Adjust width if parent changed
     let width = component.layouts[currentLayout].width;
 
+    if (targetParentId !== component.component?.parent) {
+      const containerWidth = useGridStore.getState().subContainerWidths[targetParentId || 'canvas'];
+      const oldContainerWidth = useGridStore.getState().subContainerWidths[component?.component?.parent || 'canvas'];
+      width = Math.round((width * oldContainerWidth) / containerWidth);
+    }
+
     component.layouts[currentLayout] = {
       ...component.layouts[currentLayout],
       width,

From 6b57917c78f12bea17ee65fd055d5c5eaece9254 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Thu, 9 Oct 2025 15:24:01 +0530
Subject: [PATCH 010/157] update submodule

---
 frontend/ee | 2 +-
 server/ee   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/ee b/frontend/ee
index e80a07c169..b4f71af4ae 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit e80a07c169dd03c8aaed56ce4e7bac2013963482
+Subproject commit b4f71af4aefcb7eeb2ca4723542b3a8c140373ff
diff --git a/server/ee b/server/ee
index 60918c7686..c06e4bd1aa 160000
--- a/server/ee
+++ b/server/ee
@@ -1 +1 @@
-Subproject commit 60918c76867e15d2e91d40e6aaade9a343cbdedf
+Subproject commit c06e4bd1aa7e405ce5927a96c9e008a1f319ce6a

From 7b25936cdc4dd0d5dba8b0d22b1e7721b589d835 Mon Sep 17 00:00:00 2001
From: Nishidh Jain <nishidhjain909@gmail.com>
Date: Fri, 10 Oct 2025 15:50:59 +0530
Subject: [PATCH 011/157] feat: Show a delimiter input for CSV file parsing
 type to handle delimiter other then comma and also add parsing support for
 .tsv (tab separated value) file

---
 .../Inspector/Components/FilePicker.jsx       | 13 +++++-
 .../WidgetManager/widgets/filepicker.js       | 10 +++++
 .../FilePicker/helpers/fileProcessing.js      | 45 ++++++++++++++++---
 .../Widgets/FilePicker/hooks/useFilePicker.js | 16 +++++--
 .../apps/services/widget-config/filepicker.js | 10 +++++
 5 files changed, 81 insertions(+), 13 deletions(-)

diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/FilePicker.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/FilePicker.jsx
index bebebfe88b..fe36c4a0e2 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/FilePicker.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/FilePicker.jsx
@@ -82,7 +82,9 @@ const FxSelect = ({
 /** Remove minFileCount and maxFileCount validations if multiple file selection is disabled */
 const getValidations = (componentMeta, component) => {
   const validations = Object.keys(componentMeta.validation || {});
-  const enableMultipleValue = resolveReferences(component.component.definition.properties.enableMultiple?.value ?? false);
+  const enableMultipleValue = resolveReferences(
+    component.component.definition.properties.enableMultiple?.value ?? false
+  );
   const enableMultipleFxActive = component.component.definition.properties.enableMultiple?.fxActive;
 
   if (!enableMultipleValue && !enableMultipleFxActive) {
@@ -110,10 +112,17 @@ const getPropertiesBySection = (propertiesMeta) => {
 
 const getConditionalAccordionItems = (component, renderCustomElement) => {
   const parseContent = resolveReferences(component.component.definition.properties.parseContent?.value ?? false);
+  const parseFileType = resolveReferences(
+    component.component.definition.properties.parseFileType?.value ?? 'auto-detect'
+  );
+
   const options = ['parseContent'];
   let renderOptions = options.map((option) => renderCustomElement(option));
 
-  const conditionalOptions = [{ name: 'parseFileType', condition: parseContent }];
+  const conditionalOptions = [
+    { name: 'parseFileType', condition: parseContent },
+    { name: 'delimiter', condition: parseContent && parseFileType === 'csv' },
+  ];
   conditionalOptions.forEach(({ name, condition }) => {
     if (condition) renderOptions.push(renderCustomElement(name));
   });
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/filepicker.js b/frontend/src/AppBuilder/WidgetManager/widgets/filepicker.js
index 93d0c4a4c8..afb58a04d0 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/filepicker.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/filepicker.js
@@ -102,6 +102,7 @@ export const filepickerConfig = {
       options: [
         { name: 'Autodetect from extension', value: 'auto-detect' },
         { name: 'CSV', value: 'csv' },
+        { name: 'TSV', value: 'tsv' },
         { name: 'Microsoft Excel - xls', value: 'vnd.ms-excel' },
         {
           name: 'Microsoft Excel - xlsx',
@@ -115,6 +116,14 @@ export const filepickerConfig = {
         defaultValue: 'auto-detect',
       },
     },
+    delimiter: {
+      type: 'code',
+      displayName: 'Delimiter',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: ',',
+      },
+    },
     loadingState: {
       type: 'toggle',
       displayName: 'Show loading state',
@@ -310,6 +319,7 @@ export const filepickerConfig = {
       enableMultiple: { value: '{{false}}', fxActive: false },
       parseContent: { value: '{{false}}' },
       parseFileType: { value: 'auto-detect' },
+      delimiter: { value: ',' },
       loadingState: { value: '{{false}}' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
diff --git a/frontend/src/AppBuilder/Widgets/FilePicker/helpers/fileProcessing.js b/frontend/src/AppBuilder/Widgets/FilePicker/helpers/fileProcessing.js
index 6a5e169851..274ea262b3 100644
--- a/frontend/src/AppBuilder/Widgets/FilePicker/helpers/fileProcessing.js
+++ b/frontend/src/AppBuilder/Widgets/FilePicker/helpers/fileProcessing.js
@@ -6,22 +6,35 @@ import JSON5 from 'json5'; // Import JSON5 for more lenient parsing
 // (Consider moving these to a shared constants file if used elsewhere)
 export const PARSE_FILE_TYPES = {
   CSV: 'text/csv',
+  TSV: 'text/tab-separated-values',
+  TXT: 'text/plain',
   XLS: 'application/vnd.ms-excel',
   XLSX: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
   JSON: 'application/json', // Added JSON MIME type
 };
 
+const lineParser = (line, delimiter) => {
+  let lineToFormat = line;
+
+  // if delimiter is tab & if line contains '\\t' instead '\t' then just replace it with '\t'
+  if (delimiter === '\t' && line.includes('\\t')) {
+    lineToFormat = line.replaceAll('\\t', '\t');
+  }
+
+  return lineToFormat.split(delimiter).map((h) => h.trim());
+};
+
 // Helper functions for processing file content
 export const processCSV = (str, delimiter = ',') => {
   try {
     const lines = str.split(/\r?\n/);
     const [headerLine, ...rows] = lines;
     if (!headerLine) return [];
-    const headers = headerLine.split(delimiter).map((h) => h.trim());
+    const headers = lineParser(headerLine, delimiter);
     return rows
       .filter((r) => r.trim().length > 0)
       .map((row) => {
-        const cols = row.split(delimiter);
+        const cols = lineParser(row, delimiter);
         const obj = {};
         headers.forEach((h, i) => {
           obj[h] = cols[i] ?? '';
@@ -66,10 +79,18 @@ export const processJson = (str) => {
   }
 };
 
-export const processFileContent = (fileType, fileContent) => {
+export const processFileContent = (fileType, fileContent, options = {}) => {
+  const { fileParsingDelimiter = ',', fileTypeFromExtension = 'auto-detect' } = options;
+
   switch (fileType) {
     case PARSE_FILE_TYPES.CSV:
-      return processCSV(fileContent.readFileAsText);
+    case PARSE_FILE_TYPES.TXT:
+      return processCSV(
+        fileContent.readFileAsText,
+        fileTypeFromExtension === 'auto-detect' ? ',' : fileParsingDelimiter
+      );
+    case PARSE_FILE_TYPES.TSV:
+      return processCSV(fileContent.readFileAsText, '\t');
     case PARSE_FILE_TYPES.XLS:
     case PARSE_FILE_TYPES.XLSX:
       return processXls(fileContent.readFileAsDataURL); // Assuming this contains base64
@@ -87,10 +108,18 @@ const DEPRECATED_processCSV = (str, delimiter = ',') => processCSV(str, delimite
 
 const DEPRECATED_processXls = (_str) => ({ Sheet1: [] });
 
-export const DEPRECATED_processFileContent = (fileType, fileContent) => {
+export const DEPRECATED_processFileContent = (fileType, fileContent, options = {}) => {
+  const { fileParsingDelimiter = ',', fileTypeFromExtension = 'auto-detect' } = options;
+
   switch (fileType) {
     case 'text/csv':
-      return DEPRECATED_processCSV(fileContent.readFileAsText);
+    case PARSE_FILE_TYPES.TXT:
+      return DEPRECATED_processCSV(
+        fileContent.readFileAsText,
+        fileTypeFromExtension === 'auto-detect' ? ',' : fileParsingDelimiter
+      );
+    case PARSE_FILE_TYPES.TSV:
+      return DEPRECATED_processCSV(fileContent.readFileAsText, '\t');
     case 'application/vnd.ms-excel':
     case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
       return DEPRECATED_processXls(fileContent.readFileAsDataURL);
@@ -113,6 +142,8 @@ export const parseFileContentEnabled = (file, autoDetect = false, parseFileType)
     // Map friendly name (like 'csv') to mime type if necessary
     // Assumes parseFileType is like 'CSV', 'XLS', etc.
     const targetMimeType = PARSE_FILE_TYPES[parseFileType?.toUpperCase()];
-    return targetMimeType ? file.type === targetMimeType : false;
+    return targetMimeType
+      ? file.type === targetMimeType || (parseFileType === 'csv' && file.type === PARSE_FILE_TYPES.TXT)
+      : false;
   }
 };
diff --git a/frontend/src/AppBuilder/Widgets/FilePicker/hooks/useFilePicker.js b/frontend/src/AppBuilder/Widgets/FilePicker/hooks/useFilePicker.js
index 73e77a9018..301efeaa24 100644
--- a/frontend/src/AppBuilder/Widgets/FilePicker/hooks/useFilePicker.js
+++ b/frontend/src/AppBuilder/Widgets/FilePicker/hooks/useFilePicker.js
@@ -27,6 +27,8 @@ export const useFilePicker = ({
   const enableMultiple = properties?.enableMultiple ?? false;
   const parseContent = properties.parseContent ?? false;
   const fileTypeFromExtension = properties.parseFileType ?? 'auto-detect';
+  const fileParsingDelimiter = properties.delimiter ?? ',';
+
   const labelText = properties.label ?? '';
 
   const initialLoading = properties.loadingState ?? false;
@@ -114,8 +116,14 @@ export const useFilePicker = ({
             readFileAsText: readFileAsText,
             readFileAsDataURL: base64Data,
           };
-          parsedValue = processFileContent(file.type, contentForParsing);
-          parsedData = DEPRECATED_processFileContent(file.type, contentForParsing);
+          parsedValue = processFileContent(file.type, contentForParsing, {
+            fileParsingDelimiter,
+            fileTypeFromExtension,
+          });
+          parsedData = DEPRECATED_processFileContent(file.type, contentForParsing, {
+            fileParsingDelimiter,
+            fileTypeFromExtension,
+          });
         }
 
         return {
@@ -129,7 +137,7 @@ export const useFilePicker = ({
           base64Data: base64Data,
           parsedValue: parsedValue,
           parsedData: parsedData,
-          filePath: file.path
+          filePath: file.path,
         };
       } catch (error) {
         console.error(`Error reading file ${file.name}:`, error);
@@ -142,7 +150,7 @@ export const useFilePicker = ({
         throw error; // Re-throw for Promise.allSettled
       }
     },
-    [getFileData, parseContent, fileTypeFromExtension]
+    [getFileData, parseContent, fileTypeFromExtension, fileParsingDelimiter]
   );
 
   // --- Dropzone Setup ---
diff --git a/server/src/modules/apps/services/widget-config/filepicker.js b/server/src/modules/apps/services/widget-config/filepicker.js
index 1977710c29..275bf334a1 100644
--- a/server/src/modules/apps/services/widget-config/filepicker.js
+++ b/server/src/modules/apps/services/widget-config/filepicker.js
@@ -103,6 +103,7 @@ export const filepickerConfig = {
       options: [
         { name: 'Autodetect from extension', value: 'auto-detect' },
         { name: 'CSV', value: 'csv' },
+        { name: 'TSV', value: 'tsv' },
         { name: 'Microsoft Excel - xls', value: 'vnd.ms-excel' },
         {
           name: 'Microsoft Excel - xlsx',
@@ -116,6 +117,14 @@ export const filepickerConfig = {
         defaultValue: 'auto-detect',
       },
     },
+    delimiter: {
+      type: 'code',
+      displayName: 'Delimiter',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: ',',
+      },
+    },
     loadingState: {
       type: 'toggle',
       displayName: 'Show loading state',
@@ -311,6 +320,7 @@ export const filepickerConfig = {
       enableMultiple: { value: '{{false}}', fxActive: false },
       parseContent: { value: '{{false}}' },
       parseFileType: { value: 'auto-detect' },
+      delimiter: { value: ',' },
       loadingState: { value: '{{false}}' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },

From 9eb80da4e8f348f50be0d5c61467b7c163a285ab Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Fri, 10 Oct 2025 16:59:51 +0530
Subject: [PATCH 012/157] feat: enhance RightSidebarToggle to conditionally
 disable properties tab and update tooltip based on component selection

---
 .../src/AppBuilder/RightSideBar/RightSidebarToggle.jsx     | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/AppBuilder/RightSideBar/RightSidebarToggle.jsx b/frontend/src/AppBuilder/RightSideBar/RightSidebarToggle.jsx
index e4be2abb27..038d42fed0 100644
--- a/frontend/src/AppBuilder/RightSideBar/RightSidebarToggle.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/RightSidebarToggle.jsx
@@ -18,6 +18,7 @@ const RightSidebarToggle = ({ darkMode = false }) => {
   const setActiveRightSideBarTab = useStore((state) => state.setActiveRightSideBarTab);
   const activeRightSideBarTab = useStore((state) => state.activeRightSideBarTab);
   const isRightSidebarPinned = useStore((state) => state.isRightSidebarPinned);
+  const isAnyComponentSelected = useStore((state) => state.selectedComponents.length > 0);
   const handleToggle = (item) => {
     setActiveRightSideBarTab(item);
     if (item === activeRightSideBarTab && !isRightSidebarPinned) {
@@ -63,13 +64,15 @@ const RightSidebarToggle = ({ darkMode = false }) => {
         icon="propertiesstyles"
         iconOnly
         iconWidth="14"
-        tip="Component properties"
+        tip={isAnyComponentSelected ? 'Component properties' : 'No component selected'}
+        disabled={!isAnyComponentSelected}
       >
         <PencilRuler
           width="16"
           height="16"
           className={`${
-            activeRightSideBarTab === RIGHT_SIDE_BAR_TAB.CONFIGURATION ? 'tw-text-icon-accent' : 'tw-text-icon-strong'
+            (activeRightSideBarTab === RIGHT_SIDE_BAR_TAB.CONFIGURATION ? 'tw-text-icon-accent' : 'tw-text-icon-strong',
+            !isAnyComponentSelected && 'tw-text-text-disabled')
           }`}
         />
       </SidebarItem>

From 592060d69414169cc0a27cac08b0cae29b09ec0f Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Fri, 10 Oct 2025 18:26:36 +0530
Subject: [PATCH 013/157] fix

---
 frontend/src/AppBuilder/RightSideBar/RightSidebarToggle.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/AppBuilder/RightSideBar/RightSidebarToggle.jsx b/frontend/src/AppBuilder/RightSideBar/RightSidebarToggle.jsx
index 038d42fed0..9588d96c23 100644
--- a/frontend/src/AppBuilder/RightSideBar/RightSidebarToggle.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/RightSidebarToggle.jsx
@@ -71,9 +71,9 @@ const RightSidebarToggle = ({ darkMode = false }) => {
           width="16"
           height="16"
           className={`${
-            (activeRightSideBarTab === RIGHT_SIDE_BAR_TAB.CONFIGURATION ? 'tw-text-icon-accent' : 'tw-text-icon-strong',
-            !isAnyComponentSelected && 'tw-text-text-disabled')
+            activeRightSideBarTab === RIGHT_SIDE_BAR_TAB.CONFIGURATION ? 'tw-text-icon-accent' : 'tw-text-icon-strong'
           }`}
+          style={{ color: !isAnyComponentSelected ? 'var(--text-disabled)' : undefined }}
         />
       </SidebarItem>
       {appType !== 'module' && (

From 968d95bb517ad526dbe78c36875c771681039451 Mon Sep 17 00:00:00 2001
From: Srimanitejas123 <mani@tooljet.com>
Date: Mon, 13 Oct 2025 10:09:32 +0530
Subject: [PATCH 014/157] fixed real events

---
 cypress-tests/cypress/support/e2e.js |    1 +
 package-lock.json                    | 1602 ++++++++++++++++++++++++++
 package.json                         |    3 +-
 3 files changed, 1605 insertions(+), 1 deletion(-)

diff --git a/cypress-tests/cypress/support/e2e.js b/cypress-tests/cypress/support/e2e.js
index c6eeb537c4..c09c1c9ed5 100644
--- a/cypress-tests/cypress/support/e2e.js
+++ b/cypress-tests/cypress/support/e2e.js
@@ -14,6 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
+import "cypress-real-events/support";
 import "../commands/commands";
 import "../commands/apiCommands";
 import '../commands/workflowCommands';
diff --git a/package-lock.json b/package-lock.json
index 7338c9d91f..91f9c98820 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
       },
       "devDependencies": {
         "@tooljet/cli": "^0.0.13",
+        "cypress-real-events": "^1.15.0",
         "eslint": "^9.28.0",
         "eslint-plugin-jest": "^28.13.3",
         "eslint-plugin-prettier": "^5.4.1",
@@ -37,6 +38,60 @@
         "node": ">=12"
       }
     },
+    "node_modules/@cypress/request": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.9.tgz",
+      "integrity": "sha512-I3l7FdGRXluAS44/0NguwWlO83J18p0vlr2FYHrJkWdNYhgVoiYo61IXPqaOsL+vNxU1ZqMACzItGK3/KKDsdw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "aws-sign2": "~0.7.0",
+        "aws4": "^1.8.0",
+        "caseless": "~0.12.0",
+        "combined-stream": "~1.0.6",
+        "extend": "~3.0.2",
+        "forever-agent": "~0.6.1",
+        "form-data": "~4.0.4",
+        "http-signature": "~1.4.0",
+        "is-typedarray": "~1.0.0",
+        "isstream": "~0.1.2",
+        "json-stringify-safe": "~5.0.1",
+        "mime-types": "~2.1.19",
+        "performance-now": "^2.1.0",
+        "qs": "6.14.0",
+        "safe-buffer": "^5.1.2",
+        "tough-cookie": "^5.0.0",
+        "tunnel-agent": "^0.6.0",
+        "uuid": "^8.3.2"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@cypress/xvfb": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@cypress/xvfb/-/xvfb-1.2.4.tgz",
+      "integrity": "sha512-skbBzPggOVYCbnGgV+0dmBdW/s77ZkAOXIC1knS8NagwDjBrNC1LuXtQJeiN6l+m7lzmHtaoUw/ctJKdqkG57Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "debug": "^3.1.0",
+        "lodash.once": "^4.1.1"
+      }
+    },
+    "node_modules/@cypress/xvfb/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.7.0.tgz",
@@ -716,6 +771,22 @@
         "undici-types": "~7.8.0"
       }
     },
+    "node_modules/@types/sinonjs__fake-timers": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz",
+      "integrity": "sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@types/sizzle": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.10.tgz",
+      "integrity": "sha512-TC0dmN0K8YcWEAEfiPi5gJP14eJe30TTGjkvek3iM/1NdHHsdCA/Td6GvNndMOo/iSnIsZ4HuuhrYPDAmbxzww==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/@types/through": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/@types/through/-/through-0.0.33.tgz",
@@ -726,6 +797,26 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/tmp": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/@types/tmp/-/tmp-0.2.6.tgz",
+      "integrity": "sha512-chhaNf2oKHlRkDGt+tiKE2Z5aJ6qalm7Z9rlLdBwmOiAAf09YQvvoLXjWK4HWPF1xU/fqvMgfNfpVoBscA/tKA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@types/yauzl": {
+      "version": "2.10.3",
+      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
+      "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.34.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.34.0.tgz",
@@ -984,6 +1075,32 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/aggregate-error": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
+      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "clean-stack": "^2.0.0",
+        "indent-string": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/aggregate-error/node_modules/clean-stack": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
+      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -1058,6 +1175,28 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/arch": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz",
+      "integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/arg": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
@@ -1085,6 +1224,28 @@
         "node": ">=8"
       }
     },
+    "node_modules/asn1": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
+      "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "safer-buffer": "~2.1.0"
+      }
+    },
+    "node_modules/assert-plus": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+      "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/astral-regex": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
@@ -1102,6 +1263,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -1112,6 +1281,25 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/aws-sign2": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+      "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/aws4": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.13.2.tgz",
+      "integrity": "sha512-lHe62zvbTB5eEABUVi/AwVh0ZKY9rMMDhmm+eeyuuUQbQ3+J+fONVQOZyj+DdrvD4BY33uYniyRJ4UJIaSKAfw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1139,6 +1327,17 @@
       ],
       "license": "MIT"
     },
+    "node_modules/bcrypt-pbkdf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "tweetnacl": "^0.14.3"
+      }
+    },
     "node_modules/bl": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -1151,6 +1350,22 @@
         "readable-stream": "^3.4.0"
       }
     },
+    "node_modules/blob-util": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/blob-util/-/blob-util-2.0.2.tgz",
+      "integrity": "sha512-T7JQa+zsXXEa6/8ZhHcQEW1UFfVM49Ts65uBkFL6fz2QmrElqmbajIDJvuA0tEhRe5eIjpV9ZF+0RfZR9voJFQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true
+    },
+    "node_modules/bluebird": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/brace-expansion": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
@@ -1197,6 +1412,61 @@
         "ieee754": "^1.1.13"
       }
     },
+    "node_modules/buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/cachedir": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/cachedir/-/cachedir-2.4.0.tgz",
+      "integrity": "sha512-9EtFOZR8g22CL7BWjJ9BUx1+A/djkofnyW3aOXZORNW2kxoUpx2h+uN2cOqwPmFhnpVmxg+KW2OjOSgChTEvsQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -1231,6 +1501,14 @@
         "cdl": "bin/cdl.js"
       }
     },
+    "node_modules/caseless": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+      "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -1293,6 +1571,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/ci-info": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.1.tgz",
+      "integrity": "sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/clean-stack": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-3.0.1.tgz",
@@ -1348,6 +1643,23 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/cli-table3": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.1.tgz",
+      "integrity": "sha512-w0q/enDHhPLq44ovMGdQeeDLvwxwavsJX7oQGYt/LrBlYsyaxyDnp6z3QzFut/6kLLKnlcUVJLrpB7KBfgG/RA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "string-width": "^4.2.0"
+      },
+      "engines": {
+        "node": "10.* || >= 12.*"
+      },
+      "optionalDependencies": {
+        "colors": "1.4.0"
+      }
+    },
     "node_modules/cli-truncate": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-4.0.0.tgz",
@@ -1464,6 +1776,32 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/colors": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
+      "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.1.90"
+      }
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "14.0.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-14.0.0.tgz",
@@ -1474,6 +1812,17 @@
         "node": ">=20"
       }
     },
+    "node_modules/common-tags": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz",
+      "integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1501,6 +1850,14 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/create-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
@@ -1522,6 +1879,302 @@
         "node": ">= 8"
       }
     },
+    "node_modules/cypress": {
+      "version": "15.4.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-15.4.0.tgz",
+      "integrity": "sha512-+GC/Y/LXAcaMCzfuM7vRx5okRmonceZbr0ORUAoOrZt/5n2eGK8yh04bok1bWSjZ32wRHrZESqkswQ6biArN5w==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@cypress/request": "^3.0.9",
+        "@cypress/xvfb": "^1.2.4",
+        "@types/sinonjs__fake-timers": "8.1.1",
+        "@types/sizzle": "^2.3.2",
+        "@types/tmp": "^0.2.3",
+        "arch": "^2.2.0",
+        "blob-util": "^2.0.2",
+        "bluebird": "^3.7.2",
+        "buffer": "^5.7.1",
+        "cachedir": "^2.3.0",
+        "chalk": "^4.1.0",
+        "ci-info": "^4.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-table3": "0.6.1",
+        "commander": "^6.2.1",
+        "common-tags": "^1.8.0",
+        "dayjs": "^1.10.4",
+        "debug": "^4.3.4",
+        "enquirer": "^2.3.6",
+        "eventemitter2": "6.4.7",
+        "execa": "4.1.0",
+        "executable": "^4.1.1",
+        "extract-zip": "2.0.1",
+        "figures": "^3.2.0",
+        "fs-extra": "^9.1.0",
+        "hasha": "5.2.2",
+        "is-installed-globally": "~0.4.0",
+        "listr2": "^3.8.3",
+        "lodash": "^4.17.21",
+        "log-symbols": "^4.0.0",
+        "minimist": "^1.2.8",
+        "ospath": "^1.2.2",
+        "pretty-bytes": "^5.6.0",
+        "process": "^0.11.10",
+        "proxy-from-env": "1.0.0",
+        "request-progress": "^3.0.0",
+        "semver": "^7.7.1",
+        "supports-color": "^8.1.1",
+        "systeminformation": "5.27.7",
+        "tmp": "~0.2.4",
+        "tree-kill": "1.2.2",
+        "untildify": "^4.0.0",
+        "yauzl": "^2.10.0"
+      },
+      "bin": {
+        "cypress": "bin/cypress"
+      },
+      "engines": {
+        "node": "^20.1.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/cypress-real-events": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/cypress-real-events/-/cypress-real-events-1.15.0.tgz",
+      "integrity": "sha512-in98xxTnnM9Z7lZBvvVozm99PBT2eEOjXRG5LKWyYvQnj9mGWXMiPNpfw7e7WiraBFh7XlXIxnE9Cu5o+52kQQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "cypress": "^4.x || ^5.x || ^6.x || ^7.x || ^8.x || ^9.x || ^10.x || ^11.x || ^12.x || ^13.x || ^14.x || ^15.x"
+      }
+    },
+    "node_modules/cypress/node_modules/cli-truncate": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz",
+      "integrity": "sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "slice-ansi": "^3.0.0",
+        "string-width": "^4.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cypress/node_modules/commander": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+      "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/cypress/node_modules/execa": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
+      "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "get-stream": "^5.0.0",
+        "human-signals": "^1.1.1",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.0",
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2",
+        "strip-final-newline": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/cypress/node_modules/get-stream": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cypress/node_modules/human-signals": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
+      "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=8.12.0"
+      }
+    },
+    "node_modules/cypress/node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cypress/node_modules/listr2": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-3.14.0.tgz",
+      "integrity": "sha512-TyWI8G99GX9GjE54cJ+RrNMcIFBfwMPxc3XTFiAYGN4s10hWROGtOg7+O6u6LE3mNkyld7RSLE6nrKBvTfcs3g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "cli-truncate": "^2.1.0",
+        "colorette": "^2.0.16",
+        "log-update": "^4.0.0",
+        "p-map": "^4.0.0",
+        "rfdc": "^1.3.0",
+        "rxjs": "^7.5.1",
+        "through": "^2.3.8",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "enquirer": ">= 2.3.0 < 3"
+      },
+      "peerDependenciesMeta": {
+        "enquirer": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cypress/node_modules/log-update": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-4.0.0.tgz",
+      "integrity": "sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansi-escapes": "^4.3.0",
+        "cli-cursor": "^3.1.0",
+        "slice-ansi": "^4.0.0",
+        "wrap-ansi": "^6.2.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cypress/node_modules/log-update/node_modules/slice-ansi": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
+      "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/cypress/node_modules/log-update/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cypress/node_modules/slice-ansi": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz",
+      "integrity": "sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cypress/node_modules/tmp": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.5.tgz",
+      "integrity": "sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/dashdash": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+      "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "assert-plus": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/dayjs": {
+      "version": "1.11.18",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.18.tgz",
+      "integrity": "sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/debug": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
@@ -1571,6 +2224,17 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/diff": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
@@ -1604,6 +2268,34 @@
         "no-case": "^2.2.0"
       }
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ecc-jsbn": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
+      "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
     "node_modules/ejs": {
       "version": "3.1.10",
       "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
@@ -1627,6 +2319,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/end-of-stream": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
     "node_modules/enquirer": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz",
@@ -1664,6 +2367,59 @@
         "is-arrayish": "^0.2.1"
       }
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -1964,6 +2720,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter2": {
+      "version": "6.4.7",
+      "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.7.tgz",
+      "integrity": "sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/eventemitter3": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
@@ -1995,6 +2759,39 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/executable": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/executable/-/executable-4.1.1.tgz",
+      "integrity": "sha512-8iA79xD3uAch729dUG8xaaBBFGaEa0wdD2VkYLFHwlqosEj/jT66AzcreRDSgV7ehnNLBW2WR5jIXwGKjVdTLg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "pify": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/executable/node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/external-editor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
@@ -2010,6 +2807,56 @@
         "node": ">=4"
       }
     },
+    "node_modules/extract-zip": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "dependencies": {
+        "debug": "^4.1.1",
+        "get-stream": "^5.1.0",
+        "yauzl": "^2.10.0"
+      },
+      "bin": {
+        "extract-zip": "cli.js"
+      },
+      "engines": {
+        "node": ">= 10.17.0"
+      },
+      "optionalDependencies": {
+        "@types/yauzl": "^2.9.1"
+      }
+    },
+    "node_modules/extract-zip/node_modules/get-stream": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/extsprintf": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
+      "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==",
+      "dev": true,
+      "engines": [
+        "node >=0.6.0"
+      ],
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2072,6 +2919,17 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "pend": "~1.2.0"
+      }
+    },
     "node_modules/figures": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
@@ -2180,6 +3038,35 @@
       "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
       "license": "ISC"
     },
+    "node_modules/forever-agent": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+      "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/front-matter": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/front-matter/-/front-matter-4.0.2.tgz",
@@ -2213,6 +3100,17 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/get-east-asian-width": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.3.0.tgz",
@@ -2226,6 +3124,32 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/get-package-type": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
@@ -2236,6 +3160,21 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/get-stream": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
@@ -2249,6 +3188,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/getpass": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+      "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "assert-plus": "^1.0.0"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -2307,6 +3257,23 @@
         "node": "*"
       }
     },
+    "node_modules/global-dirs": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.1.tgz",
+      "integrity": "sha512-NBcGGFbBA9s1VzD41QXDG+3++t9Mn5t1FpLdhESY6oKY4gYTFpX4wO3sqGUa0Srjtbfj3szX0RnemmrVRUdULA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ini": "2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/globals": {
       "version": "14.0.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
@@ -2350,6 +3317,20 @@
         "node": ">= 4"
       }
     },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -2372,6 +3353,80 @@
         "node": ">=8"
       }
     },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasha": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/hasha/-/hasha-5.2.2.tgz",
+      "integrity": "sha512-Hrp5vIK/xr5SkeN2onO32H0MgNZ0f17HRNH39WfL0SYUNOTZ5Lz1TJ8Pajo/87dYGEFlLMm7mIc/k/s6Bvz9HQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "is-stream": "^2.0.0",
+        "type-fest": "^0.8.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/hasha/node_modules/type-fest": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/header-case": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/header-case/-/header-case-1.0.1.tgz",
@@ -2401,6 +3456,22 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/http-signature": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.4.0.tgz",
+      "integrity": "sha512-G5akfn7eKbpDN+8nPS/cb57YeA1jLTVxjpCj7tmm3QKPdyDy7T+qSC40e9ptydSWvkwjSXw1VbkpyEm39ukeAg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "assert-plus": "^1.0.0",
+        "jsprim": "^2.0.2",
+        "sshpk": "^1.18.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/human-signals": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
@@ -2629,6 +3700,17 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/ini": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-2.0.0.tgz",
+      "integrity": "sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==",
+      "dev": true,
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/inquirer": {
       "version": "7.3.3",
       "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.3.3.tgz",
@@ -2731,6 +3813,24 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-installed-globally": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
+      "integrity": "sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "global-dirs": "^3.0.0",
+        "is-path-inside": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-interactive": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
@@ -2760,6 +3860,17 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-retry-allowed": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz",
@@ -2783,6 +3894,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/is-unicode-supported": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
@@ -2825,6 +3944,14 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "license": "ISC"
     },
+    "node_modules/isstream": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+      "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/jake": {
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.2.tgz",
@@ -2882,6 +4009,14 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+      "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/json-buffer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
@@ -2895,6 +4030,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-schema": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
+      "dev": true,
+      "license": "(AFL-2.1 OR BSD-3-Clause)",
+      "peer": true
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -2907,6 +4050,14 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "license": "MIT"
     },
+    "node_modules/json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
+      "dev": true,
+      "license": "ISC",
+      "peer": true
+    },
     "node_modules/jsonfile": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
@@ -2920,6 +4071,23 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jsprim": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-2.0.2.tgz",
+      "integrity": "sha512-gqXddjPqQ6G40VdnI6T6yObEC+pDNvyP95wdQhkWkg7crHH3km5qP1FsOXEkzEQwnz6gz5qGTn1c2Y52wP3OyQ==",
+      "dev": true,
+      "engines": [
+        "node >=0.6.0"
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "assert-plus": "1.0.0",
+        "extsprintf": "1.3.0",
+        "json-schema": "0.4.0",
+        "verror": "1.10.0"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -3154,6 +4322,14 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "license": "MIT"
     },
+    "node_modules/lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/log-symbols": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
@@ -3411,6 +4587,17 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -3440,6 +4627,31 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mimic-fn": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
@@ -3478,6 +4690,17 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -3543,6 +4766,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/object-treeify": {
       "version": "1.1.33",
       "resolved": "https://registry.npmjs.org/object-treeify/-/object-treeify-1.1.33.tgz",
@@ -3630,6 +4867,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ospath": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/ospath/-/ospath-1.2.2.tgz",
+      "integrity": "sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -3660,6 +4905,23 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-map": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
+      "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "aggregate-error": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/param-case": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz",
@@ -3766,6 +5028,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
@@ -3840,6 +5118,51 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/pretty-bytes": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
+      "integrity": "sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.0.0.tgz",
+      "integrity": "sha512-F2JHgJQ1iqwnHDcQjVBsq3n/uoaFL+iPW/eAeL7kVxy/2RrWaN4WroKjjvbsoRtv0ftelNyC01bjRhn/bhcf4A==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/pump": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.3.tgz",
+      "integrity": "sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3849,6 +5172,23 @@
         "node": ">=6"
       }
     },
+    "node_modules/qs": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
+      "integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -3894,6 +5234,17 @@
         "esprima": "~4.0.0"
       }
     },
+    "node_modules/request-progress": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/request-progress/-/request-progress-3.0.0.tgz",
+      "integrity": "sha512-MnWzEHHaxHO2iWiQuHrUPBi/1WeBf5PkxQqNyNvLl9VAYSdXkP8tQ3pBSeCPD+yw0v0Aq1zosWLz0BdeXpWwZg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "throttleit": "^1.0.0"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -4066,6 +5417,86 @@
         "node": ">=8"
       }
     },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
@@ -4130,6 +5561,33 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
+    "node_modules/sshpk": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.18.0.tgz",
+      "integrity": "sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "asn1": "~0.2.3",
+        "assert-plus": "^1.0.0",
+        "bcrypt-pbkdf": "^1.0.0",
+        "dashdash": "^1.12.0",
+        "ecc-jsbn": "~0.1.1",
+        "getpass": "^0.1.1",
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.0.2",
+        "tweetnacl": "~0.14.0"
+      },
+      "bin": {
+        "sshpk-conv": "bin/sshpk-conv",
+        "sshpk-sign": "bin/sshpk-sign",
+        "sshpk-verify": "bin/sshpk-verify"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -4290,6 +5748,45 @@
         "url": "https://opencollective.com/synckit"
       }
     },
+    "node_modules/systeminformation": {
+      "version": "5.27.7",
+      "resolved": "https://registry.npmjs.org/systeminformation/-/systeminformation-5.27.7.tgz",
+      "integrity": "sha512-saaqOoVEEFaux4v0K8Q7caiauRwjXC4XbD2eH60dxHXbpKxQ8kH9Rf7Jh+nryKpOUSEFxtCdBlSUx0/lO6rwRg==",
+      "dev": true,
+      "license": "MIT",
+      "os": [
+        "darwin",
+        "linux",
+        "win32",
+        "freebsd",
+        "openbsd",
+        "netbsd",
+        "sunos",
+        "android"
+      ],
+      "peer": true,
+      "bin": {
+        "systeminformation": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "funding": {
+        "type": "Buy me a coffee",
+        "url": "https://www.buymeacoffee.com/systeminfo"
+      }
+    },
+    "node_modules/throttleit": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-1.0.1.tgz",
+      "integrity": "sha512-vDZpf9Chs9mAdfY046mcPt8fg5QSZr37hEH4TXYBnDF+izxgrbRGUAAaBvIk/fJm9aOFCGFd1EsNg5AZCbnQCQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -4308,6 +5805,28 @@
         "upper-case": "^1.0.3"
       }
     },
+    "node_modules/tldts": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.86.tgz",
+      "integrity": "sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "tldts-core": "^6.1.86"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.86.tgz",
+      "integrity": "sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -4333,6 +5852,31 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tough-cookie": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.1.2.tgz",
+      "integrity": "sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "tldts": "^6.1.32"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
@@ -4409,6 +5953,14 @@
         "node": "*"
       }
     },
+    "node_modules/tweetnacl": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+      "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
+      "dev": true,
+      "license": "Unlicense",
+      "peer": true
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -4465,6 +6017,17 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/untildify": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",
+      "integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/upper-case": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz",
@@ -4498,6 +6061,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/v8-compile-cache-lib": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
@@ -4505,6 +6079,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/verror": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+      "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
+      "dev": true,
+      "engines": [
+        "node >=0.6.0"
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "assert-plus": "^1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "^1.2.0"
+      }
+    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
@@ -4622,6 +6212,18 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    },
     "node_modules/yn": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
diff --git a/package.json b/package.json
index 18920d5f2a..2b3308968d 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
   },
   "devDependencies": {
     "@tooljet/cli": "^0.0.13",
+    "cypress-real-events": "^1.15.0",
     "eslint": "^9.28.0",
     "eslint-plugin-jest": "^28.13.3",
     "eslint-plugin-prettier": "^5.4.1",
@@ -68,4 +69,4 @@
     "@typescript-eslint/eslint-plugin": "^8.34.0",
     "eslint-config-prettier": "^10.1.5"
   }
-}
\ No newline at end of file
+}

From 08b57766bcb61f8d2333f45ff4da6836a20548c9 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Mon, 13 Oct 2025 12:00:11 +0530
Subject: [PATCH 015/157] Update disabled state to opacity 0.5

---
 frontend/src/AppBuilder/RightSideBar/RightSidebarToggle.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/AppBuilder/RightSideBar/RightSidebarToggle.jsx b/frontend/src/AppBuilder/RightSideBar/RightSidebarToggle.jsx
index 9588d96c23..49333ad500 100644
--- a/frontend/src/AppBuilder/RightSideBar/RightSidebarToggle.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/RightSidebarToggle.jsx
@@ -73,7 +73,7 @@ const RightSidebarToggle = ({ darkMode = false }) => {
           className={`${
             activeRightSideBarTab === RIGHT_SIDE_BAR_TAB.CONFIGURATION ? 'tw-text-icon-accent' : 'tw-text-icon-strong'
           }`}
-          style={{ color: !isAnyComponentSelected ? 'var(--text-disabled)' : undefined }}
+          style={{ opacity: !isAnyComponentSelected ? '0.5' : undefined }}
         />
       </SidebarItem>
       {appType !== 'module' && (

From e4664f3199ac196c1beb749246857570dd3c897c Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Mon, 13 Oct 2025 12:00:47 +0530
Subject: [PATCH 016/157] update submodule

---
 frontend/ee | 2 +-
 server/ee   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/ee b/frontend/ee
index b4f71af4ae..ac825461cd 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit b4f71af4aefcb7eeb2ca4723542b3a8c140373ff
+Subproject commit ac825461cda3b2ca75aacd882e62d66c7044bd70
diff --git a/server/ee b/server/ee
index c06e4bd1aa..592ee28bfa 160000
--- a/server/ee
+++ b/server/ee
@@ -1 +1 @@
-Subproject commit c06e4bd1aa7e405ce5927a96c9e008a1f319ce6a
+Subproject commit 592ee28bfac6e610c6273c0475e5aef2681316a7

From 68810a0c514e15f67b213cb2eeef41222336f779 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Mon, 13 Oct 2025 12:15:12 +0530
Subject: [PATCH 017/157] update submodules

---
 frontend/ee | 2 +-
 server/ee   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/ee b/frontend/ee
index b4f71af4ae..ac825461cd 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit b4f71af4aefcb7eeb2ca4723542b3a8c140373ff
+Subproject commit ac825461cda3b2ca75aacd882e62d66c7044bd70
diff --git a/server/ee b/server/ee
index c06e4bd1aa..592ee28bfa 160000
--- a/server/ee
+++ b/server/ee
@@ -1 +1 @@
-Subproject commit c06e4bd1aa7e405ce5927a96c9e008a1f319ce6a
+Subproject commit 592ee28bfac6e610c6273c0475e5aef2681316a7

From aa3ff9537ff96ddcb655cab10d7bed38695e1398 Mon Sep 17 00:00:00 2001
From: medhansh-alt <medhansh@tooljet.com>
Date: Mon, 13 Oct 2025 12:40:55 +0530
Subject: [PATCH 018/157] Fix: Code editor popup UI

---
 frontend/src/AppBuilder/CodeEditor/styles.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/frontend/src/AppBuilder/CodeEditor/styles.scss b/frontend/src/AppBuilder/CodeEditor/styles.scss
index 02021bef9c..31b89674fa 100644
--- a/frontend/src/AppBuilder/CodeEditor/styles.scss
+++ b/frontend/src/AppBuilder/CodeEditor/styles.scss
@@ -385,6 +385,13 @@
     }
 }
 
+.codehinter-popup{
+    .cm-editor{
+        border-radius: 0 0 4px 4px !important;
+        //box-shadow: none !important;
+    }
+}
+
 .rest-api-tab-content {
     .fields-container {
         .rest-api-codehinter-key-field {

From 8d3e5a99d07bb10baad18b25b4b992e5fb426629 Mon Sep 17 00:00:00 2001
From: medhansh-alt <medhansh@tooljet.com>
Date: Tue, 14 Oct 2025 03:25:42 +0530
Subject: [PATCH 019/157] fix: updated code editor UI for runjs and loop nodes

---
 frontend/ee                                            |  2 +-
 frontend/src/AppBuilder/CodeEditor/styles.scss         | 10 +++++-----
 .../QueryManager/QueryEditors/Runjs/Runjs.jsx          |  2 +-
 frontend/src/Editor/CodeEditor/styles.scss             |  6 +++---
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/ee b/frontend/ee
index a66e03846e..a5adf37bb2 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit a66e03846e43704dcd80d32642e1a11f5b6bde1d
+Subproject commit a5adf37bb28f5a6e927b12493de0ae0bbc4e5bf1
diff --git a/frontend/src/AppBuilder/CodeEditor/styles.scss b/frontend/src/AppBuilder/CodeEditor/styles.scss
index 31b89674fa..a2b65962b2 100644
--- a/frontend/src/AppBuilder/CodeEditor/styles.scss
+++ b/frontend/src/AppBuilder/CodeEditor/styles.scss
@@ -415,9 +415,9 @@
     }
 }
 
-.runjs-editor .cm-editor {
-    border: none !important;
-}
+//.runjs-editor .cm-editor {
+//    border: none !important;
+//}
 
 .preview-alert-banner {
     height: fit-content;
@@ -506,7 +506,7 @@
     width: 42px !important;
     background-color: var(--interactive-default) !important;
     color: var(--text-disabled) !important;
-    border-right: 1px solid var(--borders-disabled-on-white) !important;
+    border-right: 1px solid var(--slate5) !important;
     align-self: stretch !important;
     height: auto !important;
 }
@@ -516,7 +516,7 @@
     .cm-editor {
         border-bottom-right-radius: 4px !important;
         border-bottom-left-radius: 4px !important;
-        border-color: var(--borders-disabled-on-white);
+        border-color: var(--slate5);
         border-top-right-radius: 0px !important;
         border-top-left-radius: 0px !important;
         justify-content: center;
diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/Runjs/Runjs.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/Runjs/Runjs.jsx
index dc5630a167..dccf1549db 100644
--- a/frontend/src/AppBuilder/QueryManager/QueryEditors/Runjs/Runjs.jsx
+++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/Runjs/Runjs.jsx
@@ -13,7 +13,7 @@ const Runjs = (props) => {
   }, [props.options]);
 
   return (
-    <Card className="runjs-editor mb-3 !tw-mb-0">
+    <Card className="runjs-editor mb-3 !tw-mb-0 ">
       <CodeHinter
         renderCopilot={props.renderCopilot}
         type="multiline"
diff --git a/frontend/src/Editor/CodeEditor/styles.scss b/frontend/src/Editor/CodeEditor/styles.scss
index 6907174252..22aab1b0c4 100644
--- a/frontend/src/Editor/CodeEditor/styles.scss
+++ b/frontend/src/Editor/CodeEditor/styles.scss
@@ -319,9 +319,9 @@
     }
 }
 
-.runjs-editor .cm-editor {
-    border: none !important;
-}
+//.runjs-editor .cm-editor {
+//    border: none !important;
+//}
 
 .preview-alert-banner {
     height: fit-content;

From bf9802daa32e5b5df762556d06917a668b715c42 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Tue, 14 Oct 2025 09:11:30 +0530
Subject: [PATCH 020/157] feat: enhance Label component to conditionally set
 htmlFor based on viewer mode

---
 frontend/src/_ui/Label.jsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/_ui/Label.jsx b/frontend/src/_ui/Label.jsx
index e4a8c7d3f4..8c9a15583e 100644
--- a/frontend/src/_ui/Label.jsx
+++ b/frontend/src/_ui/Label.jsx
@@ -1,4 +1,7 @@
 import React from 'react';
+import useStore from '@/AppBuilder/_stores/store';
+import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
+import { shallow } from 'zustand/shallow';
 function Label({
   label,
   width,
@@ -14,6 +17,8 @@ function Label({
   inputId,
   id,
 }) {
+  const { moduleId } = useModuleContext();
+  const isViewerMode = useStore((state) => state.modeStore.modules[moduleId].currentMode === 'view', shallow);
   return (
     <>
       {label && (width > 0 || auto) && (
@@ -28,7 +33,7 @@ function Label({
             fontSize: '12px',
             height: defaultAlignment === 'top' && '20px',
           }}
-          htmlFor={inputId}
+          htmlFor={isViewerMode ? inputId : undefined} // To avoid focus on label in edit mode which prevents copy/paste
           id={id}
         >
           <p

From fbfa099ebbd6b0eed13cb98eab5f39f3bbd8f673 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Tue, 14 Oct 2025 09:54:00 +0530
Subject: [PATCH 021/157] fix

---
 frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
index 0011d7ee11..a2980d2891 100644
--- a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
@@ -465,7 +465,8 @@ export default function Grid({ gridWidth, currentLayout }) {
   const handleDragGroupEnd = (e) => {
     try {
       hideGridLines();
-      // setIsGroupDragging(false);
+      handleDeactivateTargets();
+      clearActiveTargetClassNamesAfterSnapping(selectedComponents);
       const { events, clientX, clientY } = e;
       const initialParent = events[0].target.closest('.real-canvas');
       // Get potential new parent using same logic as onDragEnd
@@ -1108,8 +1109,6 @@ export default function Grid({ gridWidth, currentLayout }) {
         }}
         onDragGroupEnd={(e) => {
           handleDragGroupEnd(e);
-          handleDeactivateTargets();
-          clearActiveTargetClassNamesAfterSnapping(selectedComponents);
           toggleCanvasUpdater();
         }}
         onClickGroup={(e) => {

From 470f5ae479e95c47416c5143edd0ad64137deb65 Mon Sep 17 00:00:00 2001
From: medhansh-alt <medhansh@tooljet.com>
Date: Tue, 14 Oct 2025 12:31:24 +0530
Subject: [PATCH 022/157] fix: code editor for loop nodes

---
 .../src/AppBuilder/QueryManager/QueryEditors/Runjs/Runjs.jsx  | 4 ++--
 frontend/src/Editor/QueryManager/QueryEditors/Runjs/Runjs.jsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/Runjs/Runjs.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/Runjs/Runjs.jsx
index dccf1549db..419b8c40a5 100644
--- a/frontend/src/AppBuilder/QueryManager/QueryEditors/Runjs/Runjs.jsx
+++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/Runjs/Runjs.jsx
@@ -13,7 +13,7 @@ const Runjs = (props) => {
   }, [props.options]);
 
   return (
-    <Card className="runjs-editor mb-3 !tw-mb-0 ">
+    <div className="runjs-editor mb-3 !tw-mb-0 ">
       <CodeHinter
         renderCopilot={props.renderCopilot}
         type="multiline"
@@ -29,7 +29,7 @@ const Runjs = (props) => {
         cyLabel={`runjs`}
         delayOnChange={false}
       />
-    </Card>
+    </div>
   );
 };
 
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Runjs/Runjs.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Runjs/Runjs.jsx
index 1a38a7cbad..3599287bd7 100644
--- a/frontend/src/Editor/QueryManager/QueryEditors/Runjs/Runjs.jsx
+++ b/frontend/src/Editor/QueryManager/QueryEditors/Runjs/Runjs.jsx
@@ -13,7 +13,7 @@ const Runjs = (props) => {
   }, [props.options]);
 
   return (
-    <Card className="runjs-editor mb-3">
+    <div className="runjs-editor mb-3">
       <CodeHinter
         type="multiline"
         initialValue={props.options.code}
@@ -28,7 +28,7 @@ const Runjs = (props) => {
         cyLabel={`runjs`}
         delayOnChange={false}
       />
-    </Card>
+    </div>
   );
 };
 

From 0c0e3d4b4f84731fd41bee2beff2f65c9be672b4 Mon Sep 17 00:00:00 2001
From: medhansh-alt <medhansh@tooljet.com>
Date: Tue, 14 Oct 2025 12:50:40 +0530
Subject: [PATCH 023/157] merge lts-3.16

---
 .version                                      |  2 +-
 frontend/.version                             |  2 +-
 frontend/ee                                   |  2 +-
 frontend/src/App/App.jsx                      | 13 -------
 frontend/src/HomePage/HomePage.jsx            |  1 +
 frontend/src/_styles/license.scss             |  3 +-
 frontend/src/_styles/theme.scss               |  1 +
 plugins/packages/elasticsearch/lib/index.ts   | 22 ++++++++----
 plugins/packages/minio/lib/operations.ts      | 12 ++++++-
 server/.version                               |  2 +-
 server/src/modules/auth/service.ts            | 36 ++++++++++---------
 .../modules/licensing/configs/LicenseBase.ts  |  2 +-
 .../modules/organization-users/controller.ts  |  2 +-
 .../src/modules/organization-users/service.ts | 32 ++++++++++++++++-
 14 files changed, 86 insertions(+), 46 deletions(-)

diff --git a/.version b/.version
index 268c5b0414..99caa545a4 100644
--- a/.version
+++ b/.version
@@ -1 +1 @@
-3.20.19-lts
+3.20.20-lts
diff --git a/frontend/.version b/frontend/.version
index 268c5b0414..99caa545a4 100644
--- a/frontend/.version
+++ b/frontend/.version
@@ -1 +1 @@
-3.20.19-lts
+3.20.20-lts
diff --git a/frontend/ee b/frontend/ee
index a5adf37bb2..37cb1ce8cc 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit a5adf37bb28f5a6e927b12493de0ae0bbc4e5bf1
+Subproject commit 37cb1ce8cc203e6b0f3ddb6813413600d0d89383
diff --git a/frontend/src/App/App.jsx b/frontend/src/App/App.jsx
index 2900e7b6d6..b721aa4f34 100644
--- a/frontend/src/App/App.jsx
+++ b/frontend/src/App/App.jsx
@@ -132,7 +132,6 @@ class AppComponent extends React.Component {
     }
     setInterval(this.fetchMetadata, 1000 * 60 * 60 * 1);
     this.updateMargin(); // Set initial margin
-    this.updateColorScheme();
     let counter = 0;
     let interval;
 
@@ -169,15 +168,11 @@ class AppComponent extends React.Component {
     // Update margin when showBanner changes
     this.updateMargin();
     // Update color scheme if darkMode changed
-    if (prevProps.darkMode !== this.props.darkMode) {
-      this.updateColorScheme();
-    }
   }
 
   switchDarkMode = (newMode) => {
     this.props.updateIsTJDarkMode(newMode);
     localStorage.setItem('darkMode', newMode);
-    this.updateColorScheme(newMode);
   };
 
   isEditorOrViewerFromPath = () => {
@@ -193,14 +188,6 @@ class AppComponent extends React.Component {
   closeBasicPlanMigrationBanner = () => {
     this.setState({ showBanner: false });
   };
-  updateColorScheme = (darkModeValue) => {
-    const isDark = darkModeValue !== undefined ? darkModeValue : this.props.darkMode;
-    if (isDark) {
-      document.documentElement.style.setProperty('color-scheme', 'dark');
-    } else {
-      document.documentElement.style.removeProperty('color-scheme');
-    }
-  };
   render() {
     const { updateAvailable, isEditorOrViewer, showBanner } = this.state;
     const { darkMode } = this.props;
diff --git a/frontend/src/HomePage/HomePage.jsx b/frontend/src/HomePage/HomePage.jsx
index 2b985becca..5be3db9c9b 100644
--- a/frontend/src/HomePage/HomePage.jsx
+++ b/frontend/src/HomePage/HomePage.jsx
@@ -1475,6 +1475,7 @@ class HomePageComponent extends React.Component {
             handleConfirm={this.importGitApp}
             confirmBtnProps={{
               title: 'Import app',
+              tooltipMessage: '',
               isLoading: importingApp,
               disabled: importingApp || !selectedAppRepo || importingGitAppOperations?.message,
             }}
diff --git a/frontend/src/_styles/license.scss b/frontend/src/_styles/license.scss
index 66993e8f4e..6b5572b793 100644
--- a/frontend/src/_styles/license.scss
+++ b/frontend/src/_styles/license.scss
@@ -1162,6 +1162,7 @@
     gap: 68px;
     align-self: stretch;
     padding: 40px;
+    padding-left: 20px;
 
     .inner-container{
         display: flex;
@@ -1186,7 +1187,7 @@
         font-size: 12px;
         box-shadow: 0 0 1px 0 var(--dropshadow-100700-layer-1, rgba(48, 50, 51, 0.05)), 0 1px 1px 0 var(--dropshadow-100400-layer-2, rgba(48, 50, 51, 0.10));
     }
-    .top-up-button-container.disabled {
+    .top-up-button-container.disabledBtn {
         border-color: var(--disabled-border, #D3D3D3); /* Light gray fallback */
         cursor: not-allowed;
     }
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index a101ce5671..6b7b545401 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -2231,6 +2231,7 @@ tr:focus {
 
 body {
   color: #3e525b;
+  overflow: hidden;
 }
 
 .RichEditor-root {
diff --git a/plugins/packages/elasticsearch/lib/index.ts b/plugins/packages/elasticsearch/lib/index.ts
index d7f9226d74..0cf4fac5e9 100644
--- a/plugins/packages/elasticsearch/lib/index.ts
+++ b/plugins/packages/elasticsearch/lib/index.ts
@@ -79,12 +79,17 @@ export default class ElasticsearchService implements QueryService {
   }
 
   async testConnection(sourceOptions: SourceOptions): Promise<ConnectionTestResult> {
-    const client = await this.getConnection(sourceOptions);
-    await client.info();
-
-    return {
-      status: 'ok',
-    };
+    try {
+      const client = await this.getConnection(sourceOptions);
+      await client.info();
+      return {
+        status: 'ok',
+        message: 'Connection successful',
+      };
+    } catch (err: any) {
+      const errorMessage = err || 'Unknown error';
+      throw new QueryError(errorMessage, err, {});
+    }
   }
 
   determineProtocol(sourceOptions: SourceOptions) {
@@ -116,7 +121,10 @@ export default class ElasticsearchService implements QueryService {
       url = `${protocol}://${host}:${port}`;
     }
 
-    const options: ClientOptions = { node: url };
+    const options: ClientOptions = { 
+      node: url,
+      requestTimeout: 10000,
+    };
 
     if (sslEnabled) {
       if (sslCertificate === 'ca_certificate') {
diff --git a/plugins/packages/minio/lib/operations.ts b/plugins/packages/minio/lib/operations.ts
index 6a5325d1e4..de013d9c1d 100644
--- a/plugins/packages/minio/lib/operations.ts
+++ b/plugins/packages/minio/lib/operations.ts
@@ -45,14 +45,24 @@ export async function getObject(minioClient: MinioClient, queryOptions: object):
 }
 
 export async function uploadObject(minioClient: MinioClient, queryOptions: object): Promise<object> {
+  let data = queryOptions['data'];
+  if(isBase64(data)){
+    data = Buffer.from(data, 'base64');
+  }
+
   return await minioClient.putObject(
     queryOptions['bucket'],
     queryOptions['objectName'],
-    queryOptions['data'],
+    data,
     queryOptions['contentType'] && { contentType: queryOptions['contentType'] }
   );
 }
 
+const isBase64 = (str: string) => {
+  const base64Regex = /^[A-Za-z0-9+/]*={0,2}$/;
+  return str.length % 4 === 0 && base64Regex.test(str);
+}
+
 export async function signedUrlForPut(minioClient: MinioClient, queryOptions: object): Promise<object> {
   const defaultExpiry = +queryOptions['expiresIn'] || 86400;
   const url = await minioClient.presignedPutObject(queryOptions['bucket'], queryOptions['objectName'], defaultExpiry);
diff --git a/server/.version b/server/.version
index 268c5b0414..99caa545a4 100644
--- a/server/.version
+++ b/server/.version
@@ -1 +1 @@
-3.20.19-lts
+3.20.20-lts
diff --git a/server/src/modules/auth/service.ts b/server/src/modules/auth/service.ts
index cd7d7912c6..cfbee23c58 100644
--- a/server/src/modules/auth/service.ts
+++ b/server/src/modules/auth/service.ts
@@ -1,6 +1,5 @@
 import { Injectable, NotFoundException, UnauthorizedException } from '@nestjs/common';
 import { User } from '@entities/user.entity';
-import { decamelizeKeys } from 'humps';
 import { Organization } from 'src/entities/organization.entity';
 import { SSOConfigs } from 'src/entities/sso_config.entity';
 import { EntityManager } from 'typeorm';
@@ -22,6 +21,7 @@ import { IAuthService } from './interfaces/IService';
 import { SetupOrganizationsUtilService } from '@modules/setup-organization/util.service';
 import { RequestContext } from '@modules/request-context/service';
 import { AUDIT_LOGS_REQUEST_CONTEXT_KEY } from '@modules/app/constants';
+import { decamelizeKeysExcept } from 'src/helpers/utils.helper';
 
 @Injectable()
 export class AuthService implements IAuthService {
@@ -144,7 +144,6 @@ export class AuthService implements IAuthService {
     });
   }
 
-  //TODO:this function is not used now
   async authorizeOrganization(user: User) {
     return await dbTransactionWrap(async (manager: EntityManager) => {
       if (user.defaultOrganizationId !== user.organizationId)
@@ -154,22 +153,25 @@ export class AuthService implements IAuthService {
 
       const permissionData = await this.sessionUtilService.getPermissionDataToAuthorize(user, manager);
 
-      return decamelizeKeys({
-        currentOrganizationId: user.organizationId,
-        currentOrganizationSlug: organization.slug,
-        currentOrganizationName: organization.name,
-        currentUser: {
-          id: user.id,
-          email: user.email,
-          firstName: user.firstName,
-          lastName: user.lastName,
-          avatarId: user.avatarId,
-          ssoUserInfo: permissionData.ssoUserInfo,
-          metadata: permissionData.metadata,
-          createdAt: user.createdAt,
+      return decamelizeKeysExcept(
+        {
+          currentOrganizationId: user.organizationId,
+          currentOrganizationSlug: organization.slug,
+          currentOrganizationName: organization.name,
+          currentUser: {
+            id: user.id,
+            email: user.email,
+            firstName: user.firstName,
+            lastName: user.lastName,
+            avatarId: user.avatarId,
+            ssoUserInfo: permissionData.ssoUserInfo,
+            metadata: permissionData.metadata,
+            createdAt: user.createdAt,
+          },
+          ...permissionData,
         },
-        ...permissionData,
-      });
+        ['metadata']
+      );
     });
   }
 
diff --git a/server/src/modules/licensing/configs/LicenseBase.ts b/server/src/modules/licensing/configs/LicenseBase.ts
index 3415039298..65357d3330 100644
--- a/server/src/modules/licensing/configs/LicenseBase.ts
+++ b/server/src/modules/licensing/configs/LicenseBase.ts
@@ -121,7 +121,7 @@ export default class LicenseBase {
     this._isComments = this.getFeatureValue('comments');
     this._isGitSync = this.getFeatureValue('gitSync');
     this._isAi = this.getFeatureValue('ai');
-    this._isExternalApis = this.getFeatureValue('externalApis');
+    this._isExternalApis = this.getFeatureValue('externalApi');
   }
 
   private getFeatureValue(key: string) {
diff --git a/server/src/modules/organization-users/controller.ts b/server/src/modules/organization-users/controller.ts
index 43d6c78af9..1de98ce9e3 100644
--- a/server/src/modules/organization-users/controller.ts
+++ b/server/src/modules/organization-users/controller.ts
@@ -120,6 +120,6 @@ export class OrganizationUsersController implements IOrganizationUsersController
   @Get()
   async getUsers(@User() user, @Query() query) {
     const response = await this.organizationUsersService.getUsers(user, query);
-    return decamelizeKeys(response);
+    return response;
   }
 }
diff --git a/server/src/modules/organization-users/service.ts b/server/src/modules/organization-users/service.ts
index 04c6931b12..a49fdc273c 100644
--- a/server/src/modules/organization-users/service.ts
+++ b/server/src/modules/organization-users/service.ts
@@ -27,6 +27,7 @@ import { UpdateOrgUserDto } from './dto';
 import { RequestContext } from '@modules/request-context/service';
 import { AUDIT_LOGS_REQUEST_CONTEXT_KEY } from '@modules/app/constants';
 import { Organization } from '@entities/organization.entity';
+import { decamelizeKeys } from 'humps';
 @Injectable()
 export class OrganizationUsersService implements IOrganizationUsersService {
   constructor(
@@ -446,6 +447,35 @@ export class OrganizationUsersService implements IOrganizationUsersService {
       current_page: parseInt(page || 1),
     };
 
-    return { meta, users };
+    return this.decamelizeUsersResponse(meta, users);
+  }
+
+  async decamelizeUsersResponse(
+    meta: {
+      total_pages: number;
+      total_count: number;
+      current_page: number;
+    },
+    users: any[]
+  ): Promise<{
+    meta: {
+      total_pages: number;
+      total_count: number;
+      current_page: number;
+    };
+    users: any[];
+  }> {
+    const decamelizedUsers = users.map((user) => {
+      const { userMetadata, ...restUser } = user;
+      return {
+        ...decamelizeKeys(restUser),
+        user_metadata: userMetadata, // keep nested metadata untouched
+      };
+    });
+
+    return {
+      meta,
+      users: decamelizedUsers,
+    };
   }
 }

From c43e5f75fc73d0e05a825405c4ae4d4ddb4d0e7c Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Tue, 14 Oct 2025 15:00:42 +0530
Subject: [PATCH 024/157] update submodules

---
 frontend/ee | 2 +-
 server/ee   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/ee b/frontend/ee
index ac825461cd..3e9d349fc9 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit ac825461cda3b2ca75aacd882e62d66c7044bd70
+Subproject commit 3e9d349fc94d9ab33884fc4a517b04013a7ddfa2
diff --git a/server/ee b/server/ee
index 592ee28bfa..d47298f779 160000
--- a/server/ee
+++ b/server/ee
@@ -1 +1 @@
-Subproject commit 592ee28bfac6e610c6273c0475e5aef2681316a7
+Subproject commit d47298f779d6d848f9be9bc6560a478009b3c3d1

From 724e62340dda29947a04da21c04ebec4b34d8833 Mon Sep 17 00:00:00 2001
From: Srimanitejas123 <mani@tooljet.com>
Date: Tue, 14 Oct 2025 18:09:55 +0530
Subject: [PATCH 025/157] updated spec with banner fixes

---
 cypress-tests/cypress/commands/apiCommands.js | 43 +++++++++++++++++++
 .../cypress/constants/texts/workflows.js      |  4 +-
 .../workflows/eeTestcases/workflowInApp.cy.js | 15 ++++---
 .../eeTestcases/workflowWIthDatasource.cy.js  | 21 ++++++---
 .../workflowWithExportImport.cy.js            | 11 +++--
 .../eeTestcases/workflowWithWebhooks.cy.js    |  4 +-
 .../eeTestcases/workflowfeatures.cy.js        | 14 +++---
 7 files changed, 89 insertions(+), 23 deletions(-)

diff --git a/cypress-tests/cypress/commands/apiCommands.js b/cypress-tests/cypress/commands/apiCommands.js
index 873e6e1d13..2f2348f62e 100644
--- a/cypress-tests/cypress/commands/apiCommands.js
+++ b/cypress-tests/cypress/commands/apiCommands.js
@@ -159,6 +159,49 @@ Cypress.Commands.add("apiDeleteApp", (appId = Cypress.env("appId")) => {
   });
 });
 
+Cypress.Commands.add("apiDeleteWorkflow", (workflowName) => {
+  cy.getCookie("tj_auth_token", { log: false }).then((cookie) => {
+    Cypress.env("authToken", `tj_auth_token=${cookie.value}`);
+    
+    cy.request({
+      method: "GET",
+      url: `${Cypress.env("server_host")}/api/apps?page=1&type=workflow&searchKey=${workflowName}`,
+      headers: {
+        "Tj-Workspace-Id": Cypress.env("workspaceId"),
+        Cookie: Cypress.env("authToken"),
+      },
+    }, { log: false }).then((response) => {
+      const workflow = response.body.apps?.find(
+        app => app.name === workflowName || app.slug === workflowName
+      );
+
+      if (workflow) {
+        cy.request({
+          method: "DELETE",
+          url: `${Cypress.env("server_host")}/api/apps/${workflow.id}`,
+          headers: {
+            "Tj-Workspace-Id": Cypress.env("workspaceId"),
+            Cookie: Cypress.env("authToken"),
+          },
+        }, { log: false }).then((deleteResponse) => {
+          expect(deleteResponse.status).to.equal(200);
+          Cypress.log({
+            name: "Workflow Delete",
+            displayName: "WORKFLOW DELETED",
+            message: `: ${workflowName}`,
+          });
+        });
+      } else {
+        Cypress.log({
+          name: "Workflow Not Found",
+          displayName: "WORKFLOW NOT FOUND",
+          message: `: ${workflowName}`,
+        });
+      }
+    });
+  });
+});
+
 Cypress.Commands.add(
   "openApp",
   (
diff --git a/cypress-tests/cypress/constants/texts/workflows.js b/cypress-tests/cypress/constants/texts/workflows.js
index 6c9cd864c5..17f8dd2b88 100644
--- a/cypress-tests/cypress/constants/texts/workflows.js
+++ b/cypress-tests/cypress/constants/texts/workflows.js
@@ -33,8 +33,8 @@ FROM information_schema.tables
 WHERE table_schema = 'public'
 AND table_type = 'BASE TABLE';`,
   postgresResponseNodeQuery: "return postgresql1.data",
-  postgresExpectedValue: "employees",
-
+  postgresExpectedValue: "server_side_pagination",
+  
   restApiUrl: "http://9.234.17.31:8000/delay/10s",
   restApiResponseNodeQuery: "return restapi1.data",
   restApiExpectedValue: "<!DOCTYPE html>",
diff --git a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowInApp.cy.js b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowInApp.cy.js
index ca014ffb69..9de59541f8 100644
--- a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowInApp.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowInApp.cy.js
@@ -2,15 +2,15 @@ import { fake } from "Fixtures/fake";
 import { commonSelectors } from "Selectors/common";
 import { postgreSqlSelector } from "Selectors/postgreSql";
 import { postgreSqlText } from "Texts/postgreSql";
-import { deleteDatasource } from "Support/utils/dataSource";
+import { deleteDatasource} from "Support/utils/dataSource";
 import { dataSourceSelector } from "Selectors/dataSource";
 import { workflowsText } from "Texts/workflows";
 import { workflowSelector } from "Selectors/workflows";
-
 import {
   enterJsonInputInStartNode,
-  deleteAppandWorkflowAfterExecution,
+  verifyPreviewOutputText,
   verifyTextInResponseOutputLimited,
+  navigateBackToWorkflowsDashboard,
 } from "Support/utils/workFlows";
 
 const data = {};
@@ -61,8 +61,9 @@ describe("Workflows in apps", () => {
     //   commonSelectors.toastMessage,
     //   `Query (${data.dsName}) completed.`
     // );
-
-    deleteAppandWorkflowAfterExecution(data.wfName, data.appName);
+    cy.backToApps();
+    cy.apiDeleteApp();
+    cy.apiDeleteWorkflow(data.wfName);
   });
 
   it("Creating workflows with postgres and validating execution in apps", () => {
@@ -137,7 +138,9 @@ describe("Workflows in apps", () => {
     //   commonSelectors.toastMessage,
     //   `Query (${data.dsName}) completed.`
     // );
-    deleteAppandWorkflowAfterExecution(data.wfName, data.appName);
+    cy.backToApps();
+    cy.apiDeleteApp();
+    cy.apiDeleteWorkflow(data.wfName);
 
     deleteDatasource(`cypress-${data.dataSourceName}-manual-pgsql`);
   });
diff --git a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWIthDatasource.cy.js b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWIthDatasource.cy.js
index 24fe84ebc9..c29df1e079 100644
--- a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWIthDatasource.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWIthDatasource.cy.js
@@ -2,7 +2,7 @@ import { fake } from "Fixtures/fake";
 import { commonSelectors } from "Selectors/common";
 import { postgreSqlSelector } from "Selectors/postgreSql";
 import { postgreSqlText } from "Texts/postgreSql";
-import { deleteWorkflowAndDS } from "Support/utils/dataSource";
+import { deleteWorkflowAndDS, deleteDatasource } from "Support/utils/dataSource";
 import { dataSourceSelector } from "Selectors/dataSource";
 import { harperDbText } from "Texts/harperDb";
 import { workflowsText } from "Texts/workflows";
@@ -14,6 +14,7 @@ import {
 import {
   enterJsonInputInStartNode,
   verifyTextInResponseOutputLimited,
+  navigateBackToWorkflowsDashboard,
 } from "Support/utils/workFlows";
 
 const data = {};
@@ -50,7 +51,8 @@ describe("Workflows with Datasource", () => {
     );
     cy.verifyTextInResponseOutput(workflowsText.responseNodeExpectedValueText);
 
-    cy.deleteWorkflow(data.wfName);
+    navigateBackToWorkflowsDashboard();
+    cy.apiDeleteWorkflow(data.wfName);
   });
 
   it("Postgres workflow - execute and validate", () => {
@@ -112,7 +114,10 @@ describe("Workflows with Datasource", () => {
     );
     verifyTextInResponseOutputLimited(workflowsText.postgresExpectedValue);
 
-    deleteWorkflowAndDS(data.wfName, dsName);
+    navigateBackToWorkflowsDashboard();
+    cy.apiDeleteWorkflow(data.wfName);
+
+    deleteDatasource(dsName);
   });
 
   it("REST API workflow - execute and validate", () => {
@@ -174,7 +179,10 @@ describe("Workflows with Datasource", () => {
     );
     cy.verifyTextInResponseOutput(workflowsText.restApiExpectedValue);
 
-    deleteWorkflowAndDS(data.wfName, dsName);
+    navigateBackToWorkflowsDashboard();
+    cy.apiDeleteWorkflow(data.wfName);
+
+    deleteDatasource(dsName);
   });
 
   it("HarperDB workflow - execute and validate", () => {
@@ -257,6 +265,9 @@ describe("Workflows with Datasource", () => {
     );
     cy.verifyTextInResponseOutput(workflowsText.harperDbExpectedValue);
 
-    deleteWorkflowAndDS(data.wfName, dsName);
+    navigateBackToWorkflowsDashboard();
+    cy.apiDeleteWorkflow(data.wfName);
+
+    deleteDatasource(dsName);
   });
 });
diff --git a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithExportImport.cy.js b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithExportImport.cy.js
index 7294f97c63..edf93b1394 100644
--- a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithExportImport.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithExportImport.cy.js
@@ -2,7 +2,7 @@ import { fake } from "Fixtures/fake";
 import { commonSelectors } from "Selectors/common";
 import { postgreSqlSelector } from "Selectors/postgreSql";
 import { postgreSqlText } from "Texts/postgreSql";
-import { deleteWorkflowAndDS } from "Support/utils/dataSource";
+import { deleteWorkflowAndDS,deleteDatasource } from "Support/utils/dataSource";
 import { dataSourceSelector } from "Selectors/dataSource";
 import { workflowsText } from "Texts/workflows";
 import { workflowSelector } from "Selectors/workflows";
@@ -11,6 +11,7 @@ import {
   enterJsonInputInStartNode,
   importWorkflowApp,
   verifyTextInResponseOutputLimited,
+  navigateBackToWorkflowsDashboard
 } from "Support/utils/workFlows";
 
 const data = {};
@@ -53,8 +54,8 @@ describe("Workflows Export/Import Sanity", () => {
 
     importWorkflowApp(wfName, workflowsText.exportFixturePath);
     cy.verifyTextInResponseOutput(workflowsText.responseNodeExpectedValueText);
-
-    cy.deleteWorkflow(wfName);
+    navigateBackToWorkflowsDashboard();
+    cy.apiDeleteWorkflow(wfName);
     cy.task("deleteFile", workflowsText.exportFixturePath);
   });
 
@@ -124,8 +125,10 @@ describe("Workflows Export/Import Sanity", () => {
 
     importWorkflowApp(wfName, workflowsText.exportFixturePath);
     verifyTextInResponseOutputLimited(workflowsText.postgresExpectedValue);
+    navigateBackToWorkflowsDashboard();
+    cy.apiDeleteWorkflow(wfName);
 
-    deleteWorkflowAndDS(wfName, dsName);
+    deleteDatasource(dsName);
     cy.task("deleteFile", workflowsText.exportFixturePath);
   });
 });
diff --git a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithWebhooks.cy.js b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithWebhooks.cy.js
index d6fda50df5..2c47fc4e16 100644
--- a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithWebhooks.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithWebhooks.cy.js
@@ -5,6 +5,7 @@ import { workflowSelector } from "Selectors/workflows";
 import {
   enterJsonInputInStartNode,
   revealWorkflowToken,
+  navigateBackToWorkflowsDashboard
 } from "Support/utils/workFlows";
 
 const data = {};
@@ -64,6 +65,7 @@ describe("Workflows with Webhooks", () => {
             });
           });
       });
-    cy.deleteWorkflow(data.wfName);
+      navigateBackToWorkflowsDashboard();
+    cy.apiDeleteWorkflow(data.wfName);
   });
 });
diff --git a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowfeatures.cy.js b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowfeatures.cy.js
index 4aba89e079..eb39b438f4 100644
--- a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowfeatures.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowfeatures.cy.js
@@ -45,7 +45,8 @@ describe("Workflows features", () => {
       workflowsText.responseNodeQuery
     );
     cy.verifyTextInResponseOutput(workflowsText.longStringJsonText);
-    cy.deleteWorkflow(data.wfName);
+    navigateBackToWorkflowsDashboard();
+    cy.apiDeleteWorkflow(data.wfName);
   });
 
   it("Creating workflow with Node Preview Validation and execution", () => {
@@ -71,7 +72,8 @@ describe("Workflows features", () => {
       workflowsText.responseNodeQuery
     );
     cy.verifyTextInResponseOutput(workflowsText.jsonValuePlaceholder);
-    cy.deleteWorkflow(data.wfName);
+    navigateBackToWorkflowsDashboard();
+    cy.apiDeleteWorkflow(data.wfName);
   });
 
   // Need to run after bug fixes
@@ -122,8 +124,9 @@ describe("Workflows features", () => {
       workflowsText.workflowResponseNodeQuery
     );
     // cy.verifyTextInResponseOutput(workflowsText.responseNodeExpectedValueText);
-    cy.deleteWorkflow(data.childWFName);
-    cy.deleteWorkflowfromDashboard(data.parentWFName);
+    navigateBackToWorkflowsDashboard();
+    cy.apiDeleteWorkflow(data.childWFName);
+    cy.apiDeleteWorkflow(data.parentWFName);
   });
 
   it("Creating workflow with large datasets and validating execution", () => {
@@ -153,6 +156,7 @@ describe("Workflows features", () => {
       workflowsText.responseNodeExpectedValueTextForLargeDataset
     );
 
-    cy.deleteWorkflow(data.wfName);
+    navigateBackToWorkflowsDashboard();
+    cy.apiDeleteWorkflow(data.wfName);
   });
 });

From ef38815bda626b70b90f19fc8baebd68b79b3bbe Mon Sep 17 00:00:00 2001
From: Srimanitejas123 <mani@tooljet.com>
Date: Wed, 15 Oct 2025 12:11:28 +0530
Subject: [PATCH 026/157] added api commands

---
 cypress-tests/cypress/commands/apiCommands.js | 183 ++++++++++++++----
 .../cypress/commands/workflowCommands.js      |  13 +-
 .../workflows/eeTestcases/workflowInApp.cy.js |   3 +-
 .../eeTestcases/workflowWIthDatasource.cy.js  |   9 +-
 .../workflowWithExportImport.cy.js            |   5 +-
 .../eeTestcases/workflowfeatures.cy.js        |   3 +-
 6 files changed, 162 insertions(+), 54 deletions(-)

diff --git a/cypress-tests/cypress/commands/apiCommands.js b/cypress-tests/cypress/commands/apiCommands.js
index 2f2348f62e..7f26ceb31d 100644
--- a/cypress-tests/cypress/commands/apiCommands.js
+++ b/cypress-tests/cypress/commands/apiCommands.js
@@ -159,49 +159,6 @@ Cypress.Commands.add("apiDeleteApp", (appId = Cypress.env("appId")) => {
   });
 });
 
-Cypress.Commands.add("apiDeleteWorkflow", (workflowName) => {
-  cy.getCookie("tj_auth_token", { log: false }).then((cookie) => {
-    Cypress.env("authToken", `tj_auth_token=${cookie.value}`);
-    
-    cy.request({
-      method: "GET",
-      url: `${Cypress.env("server_host")}/api/apps?page=1&type=workflow&searchKey=${workflowName}`,
-      headers: {
-        "Tj-Workspace-Id": Cypress.env("workspaceId"),
-        Cookie: Cypress.env("authToken"),
-      },
-    }, { log: false }).then((response) => {
-      const workflow = response.body.apps?.find(
-        app => app.name === workflowName || app.slug === workflowName
-      );
-
-      if (workflow) {
-        cy.request({
-          method: "DELETE",
-          url: `${Cypress.env("server_host")}/api/apps/${workflow.id}`,
-          headers: {
-            "Tj-Workspace-Id": Cypress.env("workspaceId"),
-            Cookie: Cypress.env("authToken"),
-          },
-        }, { log: false }).then((deleteResponse) => {
-          expect(deleteResponse.status).to.equal(200);
-          Cypress.log({
-            name: "Workflow Delete",
-            displayName: "WORKFLOW DELETED",
-            message: `: ${workflowName}`,
-          });
-        });
-      } else {
-        Cypress.log({
-          name: "Workflow Not Found",
-          displayName: "WORKFLOW NOT FOUND",
-          message: `: ${workflowName}`,
-        });
-      }
-    });
-  });
-});
-
 Cypress.Commands.add(
   "openApp",
   (
@@ -764,3 +721,143 @@ Cypress.Commands.add(
     });
   }
 );
+
+Cypress.Commands.add("apiCreateWorkflow", (workflowName) => {
+  
+  cy.getCookie("tj_auth_token", { log: false }).then((cookie) => {
+    Cypress.env("authToken", `tj_auth_token=${cookie.value}`);
+
+    cy.request({
+      method: "POST",
+      url: `${Cypress.env("server_host")}/api/apps`,
+      headers: {
+        "Tj-Workspace-Id": Cypress.env("workspaceId"),
+        Cookie: `tj_auth_token=${cookie.value}`,
+      },
+      body: {
+        icon: "sentfast",
+        name: workflowName,
+        type: "workflow", 
+      },
+    }).then((response) => {
+      expect(response.status).to.equal(201);
+
+      const workflowId = response.body?.id || response.allRequestResponses?.[0]?.["Response Body"]?.id;
+      const userId = response.body?.user_id || response.allRequestResponses?.[0]?.["Response Body"]?.user_id;
+
+      Cypress.env("workflowId", workflowId);
+      Cypress.env("user_id", userId);
+
+      Cypress.log({
+        name: "Workflow create",
+        displayName: "WORKFLOW CREATED",
+        message: `: ${response.body.name}`,
+      });
+    });
+  });
+});
+
+Cypress.Commands.add(
+  "openWorkflow",
+  (
+    slug = "",
+    workspaceId = Cypress.env("workspaceId"),
+    workflowId = Cypress.env("workflowId"),
+  ) => {
+    cy.intercept("GET", "/api/apps/*").as("getWorkflowData");
+    cy.window({ log: false }).then((win) => {
+      win.localStorage.setItem("walkthroughCompleted", "true");
+    });
+    cy.visit(`/${workspaceId}/apps/${workflowId}/${slug}`);
+
+    cy.wait("@getWorkflowData").then((interception) => {
+      const responseData = interception.response.body;
+
+      Cypress.env("editingVersionId", responseData.editing_version.id);
+      Cypress.env("environmentId", responseData.editorEnvironment.id);
+      Cypress.env("workflowId", responseData.id);
+    });
+  }
+);
+
+Cypress.Commands.add(
+  "openWorkflowByName",
+  (
+    workflowName,
+    workspaceId = Cypress.env("workspaceId"),
+    componentSelector = "[data-cy='workflow-canvas']"
+  ) => {
+    cy.getCookie("tj_auth_token", { log: false }).then((cookie) => {
+      Cypress.env("authToken", `tj_auth_token=${cookie.value}`);
+      
+      cy.request({
+        method: "GET",
+        url: `${Cypress.env("server_host")}/api/apps?page=1&type=workflow&searchKey=${workflowName}`,
+        headers: {
+          "Tj-Workspace-Id": workspaceId,
+          Cookie: Cypress.env("authToken"),
+        },
+      }, { log: false }).then((response) => {
+        const workflow = response.body.apps?.find(
+          app => app.name === workflowName || app.slug === workflowName
+        );
+
+        if (workflow) {
+          Cypress.env("workflowId", workflow.id);
+          cy.openWorkflow(workflow.slug, workspaceId, workflow.id, componentSelector);
+          
+          Cypress.log({
+            name: "Workflow Open",
+            displayName: "WORKFLOW OPENED",
+            message: `: ${workflowName}`,
+          });
+        } else {
+          throw new Error(`Workflow "${workflowName}" not found`);
+        }
+      });
+    });
+  }
+);
+
+Cypress.Commands.add("apiDeleteWorkflow", (workflowName) => {
+  cy.getCookie("tj_auth_token", { log: false }).then((cookie) => {
+    Cypress.env("authToken", `tj_auth_token=${cookie.value}`);
+    
+    cy.request({
+      method: "GET",
+      url: `${Cypress.env("server_host")}/api/apps?page=1&type=workflow&searchKey=${workflowName}`,
+      headers: {
+        "Tj-Workspace-Id": Cypress.env("workspaceId"),
+        Cookie: Cypress.env("authToken"),
+      },
+    }, { log: false }).then((response) => {
+      const workflow = response.body.apps?.find(
+        app => app.name === workflowName || app.slug === workflowName
+      );
+
+      if (workflow) {
+        cy.request({
+          method: "DELETE",
+          url: `${Cypress.env("server_host")}/api/apps/${workflow.id}`,
+          headers: {
+            "Tj-Workspace-Id": Cypress.env("workspaceId"),
+            Cookie: Cypress.env("authToken"),
+          },
+        }, { log: false }).then((deleteResponse) => {
+          expect(deleteResponse.status).to.equal(200);
+          Cypress.log({
+            name: "Workflow Delete",
+            displayName: "WORKFLOW DELETED",
+            message: `: ${workflowName}`,
+          });
+        });
+      } else {
+        Cypress.log({
+          name: "Workflow Not Found",
+          displayName: "WORKFLOW NOT FOUND",
+          message: `: ${workflowName}`,
+        });
+      }
+    });
+  });
+});
\ No newline at end of file
diff --git a/cypress-tests/cypress/commands/workflowCommands.js b/cypress-tests/cypress/commands/workflowCommands.js
index 592bba9365..7caca0fae1 100644
--- a/cypress-tests/cypress/commands/workflowCommands.js
+++ b/cypress-tests/cypress/commands/workflowCommands.js
@@ -145,10 +145,14 @@ Cypress.Commands.add(
   (wfName, fixtureFile = "cypress/fixtures/exportedApp.json") => {
     navigateBackToWorkflowsDashboard();
 
-    selectAppCardOption(
-      wfName,
-      commonSelectors.appCardOptions(workflowsText.exportWFOption)
-    );
+    cy.get(`[data-cy="${wfName}-card"]`)
+      .trigger('mouseover') 
+      .find('[data-cy="app-card-menu-icon"]')
+      .click({ force: true });
+
+    cy.get(commonSelectors.appCardOptions(workflowsText.exportWFOption))
+      .click();
+
     cy.wait(2000);
 
     cy.exec("ls -t ./cypress/downloads/ | head -1").then((result) => {
@@ -158,6 +162,7 @@ Cypress.Commands.add(
         cy.writeFile(fixtureFile, json);
       });
     });
+    
     cy.deleteWorkflowfromDashboard(wfName);
   }
 );
diff --git a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowInApp.cy.js b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowInApp.cy.js
index 9de59541f8..ff2f92c70b 100644
--- a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowInApp.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowInApp.cy.js
@@ -104,7 +104,8 @@ describe("Workflows in apps", () => {
     }).should("have.text", postgreSqlText.labelConnectionVerified);
     cy.reload();
 
-    cy.createWorkflowApp(data.wfName);
+    cy.apiCreateWorkflow(data.wfName)
+    cy.openWorkflow();
     enterJsonInputInStartNode();
     cy.connectDataSourceNode(dsName);
 
diff --git a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWIthDatasource.cy.js b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWIthDatasource.cy.js
index c29df1e079..e0866f0bf7 100644
--- a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWIthDatasource.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWIthDatasource.cy.js
@@ -93,7 +93,8 @@ describe("Workflows with Datasource", () => {
     }).should("have.text", postgreSqlText.labelConnectionVerified);
     cy.reload();
 
-    cy.createWorkflowApp(data.wfName);
+    cy.apiCreateWorkflow(data.wfName)
+    cy.openWorkflow();
     enterJsonInputInStartNode();
     cy.connectDataSourceNode(dsName);
 
@@ -157,7 +158,8 @@ describe("Workflows with Datasource", () => {
       ]
     );
     cy.reload();
-    cy.createWorkflowApp(data.wfName);
+    cy.apiCreateWorkflow(data.wfName)
+    cy.openWorkflow();
     enterJsonInputInStartNode();
     cy.connectDataSourceNode(dsName);
 
@@ -236,7 +238,8 @@ describe("Workflows with Datasource", () => {
       postgreSqlText.toastDSSaved
     );
 
-    cy.createWorkflowApp(data.wfName);
+    cy.apiCreateWorkflow(data.wfName)
+    cy.openWorkflow();
     enterJsonInputInStartNode();
     cy.connectDataSourceNode(dsName);
 
diff --git a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithExportImport.cy.js b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithExportImport.cy.js
index edf93b1394..7112fc2bdc 100644
--- a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithExportImport.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithExportImport.cy.js
@@ -26,7 +26,7 @@ describe("Workflows Export/Import Sanity", () => {
       .replaceAll("[^A-Za-z]", "");
   });
 
-  it("RunJS workflow - execute, export/import, re-execute", () => {
+  it.only("RunJS workflow - execute, export/import, re-execute", () => {
     const wfName = `${data.wfName}-runjs`;
 
     cy.createWorkflowApp(wfName);
@@ -99,7 +99,8 @@ describe("Workflows Export/Import Sanity", () => {
 
     cy.reload();
 
-    cy.createWorkflowApp(wfName);
+    cy.apiCreateWorkflow(data.wfName)
+    cy.openWorkflow();
     enterJsonInputInStartNode();
     cy.connectDataSourceNode(dsName);
 
diff --git a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowfeatures.cy.js b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowfeatures.cy.js
index eb39b438f4..62ebdb8acf 100644
--- a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowfeatures.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowfeatures.cy.js
@@ -101,7 +101,8 @@ describe("Workflows features", () => {
 
     navigateBackToWorkflowsDashboard();
 
-    cy.createWorkflowApp(data.parentWFName);
+    cy.apiCreateWorkflow(data.wfName)
+    cy.openWorkflow();
     enterJsonInputInStartNode();
     cy.connectDataSourceNode(workflowsText.workflowNodeLabel);
 

From 91b5b3979fc364d5c40da0af38b9d0b57dd4304d Mon Sep 17 00:00:00 2001
From: Srimanitejas123 <mani@tooljet.com>
Date: Wed, 15 Oct 2025 12:15:32 +0530
Subject: [PATCH 027/157] removed imported file

---
 .../cypress/fixtures/exportedApp.json         | 384 ------------------
 1 file changed, 384 deletions(-)
 delete mode 100644 cypress-tests/cypress/fixtures/exportedApp.json

diff --git a/cypress-tests/cypress/fixtures/exportedApp.json b/cypress-tests/cypress/fixtures/exportedApp.json
deleted file mode 100644
index a424c6c401..0000000000
--- a/cypress-tests/cypress/fixtures/exportedApp.json
+++ /dev/null
@@ -1,384 +0,0 @@
-{
-  "app": [
-    {
-      "definition": {
-        "appV2": {
-          "id": "bf731e7e-09d8-4d8f-a058-0dad247c938e",
-          "type": "workflow",
-          "name": "huel",
-          "slug": "bf731e7e-09d8-4d8f-a058-0dad247c938e",
-          "isPublic": null,
-          "isMaintenanceOn": true,
-          "icon": "server",
-          "organizationId": "36d06256-56db-4236-a9cd-c1732000d618",
-          "currentVersionId": null,
-          "userId": "2b52a870-fc7e-4d2d-a4fd-7cd105568e80",
-          "workflowApiToken": "7b029a3b-14a9-414e-95d7-74f9aa5410db",
-          "workflowEnabled": true,
-          "isInitialisedFromPrompt": false,
-          "appGeneratedFromPrompt": false,
-          "appBuilderMode": "visual",
-          "aiGenerationMetadata": null,
-          "createdAt": "2025-10-03T10:22:52.118Z",
-          "creationMode": "DEFAULT",
-          "updatedAt": "2025-10-03T10:23:09.418Z",
-          "__loaded": true,
-          "editingVersion": {
-            "id": "c7acf317-23ea-47ee-9c14-ae96b69400dd",
-            "name": "v1",
-            "definition": {
-              "nodes": [
-                {
-                  "id": "1ce09ce1-2bf8-4b0e-9144-7aabc2cbbc03",
-                  "data": {
-                    "nodeType": "start",
-                    "label": "Start trigger"
-                  },
-                  "position": {
-                    "x": 100,
-                    "y": 250
-                  },
-                  "type": "input",
-                  "sourcePosition": "right",
-                  "deletable": false,
-                  "width": 206,
-                  "height": 41,
-                  "selected": false
-                },
-                {
-                  "id": "5b0155cf-29a5-49e4-873b-de97f61b5968",
-                  "type": "query",
-                  "sourcePosition": "right",
-                  "targetPosition": "left",
-                  "draggable": true,
-                  "data": {
-                    "idOnDefinition": "e7f15471-53c0-49e5-b978-5f1b64fd8ad8",
-                    "kind": "runjs",
-                    "options": {}
-                  },
-                  "position": {
-                    "x": 552.0092353820801,
-                    "y": 252.00923538208008
-                  },
-                  "deletable": false,
-                  "width": 206,
-                  "height": 40,
-                  "selected": false
-                },
-                {
-                  "id": "63003194-3056-4107-aa5c-e5745a026b8d",
-                  "data": {
-                    "nodeType": "response",
-                    "label": "Response",
-                    "code": "return runjs1.data",
-                    "statusCode": {
-                      "fxActive": false,
-                      "value": "200"
-                    },
-                    "nodeName": "response1"
-                  },
-                  "position": {
-                    "x": 752.0092353820801,
-                    "y": 352.0092353820801
-                  },
-                  "type": "output",
-                  "sourcePosition": "right",
-                  "targetPosition": "left",
-                  "deletable": false,
-                  "width": 206,
-                  "height": 40,
-                  "selected": true
-                }
-              ],
-              "edges": [
-                {
-                  "id": "7992c4c0-cd40-4e23-b854-cc7c88a5ebd9",
-                  "source": "1ce09ce1-2bf8-4b0e-9144-7aabc2cbbc03",
-                  "target": "5b0155cf-29a5-49e4-873b-de97f61b5968",
-                  "sourceHandle": null,
-                  "type": "custom"
-                },
-                {
-                  "id": "18175dab-8e00-4d6e-a4d8-5c506b4d6192",
-                  "source": "5b0155cf-29a5-49e4-873b-de97f61b5968",
-                  "target": "63003194-3056-4107-aa5c-e5745a026b8d",
-                  "sourceHandle": "success",
-                  "type": "custom"
-                }
-              ],
-              "queries": [
-                {
-                  "idOnDefinition": "e7f15471-53c0-49e5-b978-5f1b64fd8ad8",
-                  "id": "886943b9-6cbe-4d00-a4fc-d5567529d15c"
-                }
-              ],
-              "webhookParams": [],
-              "defaultParams": "{\"key\":\"your value\"}",
-              "dependencies": {
-                "javascript": {
-                  "dependencies": {}
-                }
-              },
-              "setupScript": {
-                "javascript": "// lodash\n// const _ = require('lodash');\n"
-              }
-            },
-            "globalSettings": {
-              "appInMaintenance": false,
-              "canvasMaxWidth": 100,
-              "canvasMaxWidthType": "%",
-              "canvasMaxHeight": 2400,
-              "canvasBackgroundColor": "var(--cc-appBackground-surface)",
-              "backgroundFxQuery": "",
-              "appMode": "light"
-            },
-            "pageSettings": null,
-            "showViewerNavigation": true,
-            "homePageId": "06ea85f4-80be-4d9e-aefc-862548bade41",
-            "appId": "bf731e7e-09d8-4d8f-a058-0dad247c938e",
-            "currentEnvironmentId": "b21edc90-cd2e-4a3a-9200-d6874615da50",
-            "promotedFrom": null,
-            "createdAt": "2025-10-03T10:22:52.302Z",
-            "updatedAt": "2025-10-03T10:23:06.872Z"
-          },
-          "components": [],
-          "pages": [
-            {
-              "id": "06ea85f4-80be-4d9e-aefc-862548bade41",
-              "name": "Home",
-              "handle": "home",
-              "index": 1,
-              "disabled": null,
-              "hidden": null,
-              "icon": null,
-              "createdAt": "2025-10-03T10:22:52.117Z",
-              "updatedAt": "2025-10-03T10:22:53.408Z",
-              "autoComputeLayout": true,
-              "appVersionId": "c7acf317-23ea-47ee-9c14-ae96b69400dd",
-              "pageGroupIndex": 1,
-              "pageGroupId": null,
-              "isPageGroup": false,
-              "url": null,
-              "openIn": "new_tab",
-              "type": "default",
-              "appId": ""
-            }
-          ],
-          "events": [],
-          "dataQueries": [
-            {
-              "id": "886943b9-6cbe-4d00-a4fc-d5567529d15c",
-              "name": "runjs1",
-              "options": {
-                "code": "return \"Verifying webhooks response\"",
-                "parameters": []
-              },
-              "dataSourceId": "5f5f68b4-64d3-4eae-8269-5362e3ace99d",
-              "appVersionId": "c7acf317-23ea-47ee-9c14-ae96b69400dd",
-              "createdAt": "2025-10-03T10:22:57.626Z",
-              "updatedAt": "2025-10-03T10:23:00.640Z"
-            }
-          ],
-          "dataSources": [
-            {
-              "id": "5f5f68b4-64d3-4eae-8269-5362e3ace99d",
-              "name": "runjsdefault",
-              "kind": "runjs",
-              "type": "static",
-              "pluginId": null,
-              "appVersionId": null,
-              "organizationId": "36d06256-56db-4236-a9cd-c1732000d618",
-              "scope": "global",
-              "createdAt": "2025-10-03T10:02:19.045Z",
-              "updatedAt": "2025-10-03T10:02:19.045Z"
-            }
-          ],
-          "appVersions": [
-            {
-              "id": "c7acf317-23ea-47ee-9c14-ae96b69400dd",
-              "name": "v1",
-              "definition": {
-                "nodes": [
-                  {
-                    "id": "1ce09ce1-2bf8-4b0e-9144-7aabc2cbbc03",
-                    "data": {
-                      "nodeType": "start",
-                      "label": "Start trigger"
-                    },
-                    "position": {
-                      "x": 100,
-                      "y": 250
-                    },
-                    "type": "input",
-                    "sourcePosition": "right",
-                    "deletable": false,
-                    "width": 206,
-                    "height": 41,
-                    "selected": false
-                  },
-                  {
-                    "id": "5b0155cf-29a5-49e4-873b-de97f61b5968",
-                    "type": "query",
-                    "sourcePosition": "right",
-                    "targetPosition": "left",
-                    "draggable": true,
-                    "data": {
-                      "idOnDefinition": "e7f15471-53c0-49e5-b978-5f1b64fd8ad8",
-                      "kind": "runjs",
-                      "options": {}
-                    },
-                    "position": {
-                      "x": 552.0092353820801,
-                      "y": 252.00923538208008
-                    },
-                    "deletable": false,
-                    "width": 206,
-                    "height": 40,
-                    "selected": false
-                  },
-                  {
-                    "id": "63003194-3056-4107-aa5c-e5745a026b8d",
-                    "data": {
-                      "nodeType": "response",
-                      "label": "Response",
-                      "code": "return runjs1.data",
-                      "statusCode": {
-                        "fxActive": false,
-                        "value": "200"
-                      },
-                      "nodeName": "response1"
-                    },
-                    "position": {
-                      "x": 752.0092353820801,
-                      "y": 352.0092353820801
-                    },
-                    "type": "output",
-                    "sourcePosition": "right",
-                    "targetPosition": "left",
-                    "deletable": false,
-                    "width": 206,
-                    "height": 40,
-                    "selected": true
-                  }
-                ],
-                "edges": [
-                  {
-                    "id": "7992c4c0-cd40-4e23-b854-cc7c88a5ebd9",
-                    "source": "1ce09ce1-2bf8-4b0e-9144-7aabc2cbbc03",
-                    "target": "5b0155cf-29a5-49e4-873b-de97f61b5968",
-                    "sourceHandle": null,
-                    "type": "custom"
-                  },
-                  {
-                    "id": "18175dab-8e00-4d6e-a4d8-5c506b4d6192",
-                    "source": "5b0155cf-29a5-49e4-873b-de97f61b5968",
-                    "target": "63003194-3056-4107-aa5c-e5745a026b8d",
-                    "sourceHandle": "success",
-                    "type": "custom"
-                  }
-                ],
-                "queries": [
-                  {
-                    "idOnDefinition": "e7f15471-53c0-49e5-b978-5f1b64fd8ad8",
-                    "id": "886943b9-6cbe-4d00-a4fc-d5567529d15c"
-                  }
-                ],
-                "webhookParams": [],
-                "defaultParams": "{\"key\":\"your value\"}",
-                "dependencies": {
-                  "javascript": {
-                    "dependencies": {}
-                  }
-                },
-                "setupScript": {
-                  "javascript": "// lodash\n// const _ = require('lodash');\n"
-                }
-              },
-              "globalSettings": {
-                "appInMaintenance": false,
-                "canvasMaxWidth": 100,
-                "canvasMaxWidthType": "%",
-                "canvasMaxHeight": 2400,
-                "canvasBackgroundColor": "var(--cc-appBackground-surface)",
-                "backgroundFxQuery": "",
-                "appMode": "light"
-              },
-              "pageSettings": null,
-              "showViewerNavigation": true,
-              "homePageId": "06ea85f4-80be-4d9e-aefc-862548bade41",
-              "appId": "bf731e7e-09d8-4d8f-a058-0dad247c938e",
-              "currentEnvironmentId": "b21edc90-cd2e-4a3a-9200-d6874615da50",
-              "promotedFrom": null,
-              "createdAt": "2025-10-03T10:22:52.302Z",
-              "updatedAt": "2025-10-03T10:23:06.872Z"
-            }
-          ],
-          "appEnvironments": [
-            {
-              "id": "b21edc90-cd2e-4a3a-9200-d6874615da50",
-              "organizationId": "36d06256-56db-4236-a9cd-c1732000d618",
-              "name": "development",
-              "isDefault": false,
-              "priority": 1,
-              "enabled": true,
-              "createdAt": "2025-10-03T10:02:18.821Z",
-              "updatedAt": "2025-10-03T10:02:18.821Z"
-            },
-            {
-              "id": "ef6fc5e8-a95f-412c-8fe3-4e6be00cc6d9",
-              "organizationId": "36d06256-56db-4236-a9cd-c1732000d618",
-              "name": "staging",
-              "isDefault": false,
-              "priority": 2,
-              "enabled": true,
-              "createdAt": "2025-10-03T10:02:18.825Z",
-              "updatedAt": "2025-10-03T10:02:18.825Z"
-            },
-            {
-              "id": "0162baf0-a89d-4ebc-9bb2-1666c3d5ccf5",
-              "organizationId": "36d06256-56db-4236-a9cd-c1732000d618",
-              "name": "production",
-              "isDefault": true,
-              "priority": 3,
-              "enabled": true,
-              "createdAt": "2025-10-03T10:02:18.825Z",
-              "updatedAt": "2025-10-03T10:02:18.825Z"
-            }
-          ],
-          "dataSourceOptions": [
-            {
-              "id": "d8f96951-0e45-4b29-bff0-6cb95a5a82f7",
-              "dataSourceId": "5f5f68b4-64d3-4eae-8269-5362e3ace99d",
-              "environmentId": "b21edc90-cd2e-4a3a-9200-d6874615da50",
-              "options": null,
-              "createdAt": "2025-10-03T10:02:19.046Z",
-              "updatedAt": "2025-10-03T10:02:19.046Z"
-            },
-            {
-              "id": "e2d43cb2-2bb5-4776-9be7-eca3b68ee716",
-              "dataSourceId": "5f5f68b4-64d3-4eae-8269-5362e3ace99d",
-              "environmentId": "ef6fc5e8-a95f-412c-8fe3-4e6be00cc6d9",
-              "options": null,
-              "createdAt": "2025-10-03T10:02:19.046Z",
-              "updatedAt": "2025-10-03T10:02:19.046Z"
-            },
-            {
-              "id": "f560a2d9-cf9d-44c4-bfa0-24e23246e0ac",
-              "dataSourceId": "5f5f68b4-64d3-4eae-8269-5362e3ace99d",
-              "environmentId": "0162baf0-a89d-4ebc-9bb2-1666c3d5ccf5",
-              "options": null,
-              "createdAt": "2025-10-03T10:02:19.046Z",
-              "updatedAt": "2025-10-03T10:02:19.046Z"
-            }
-          ],
-          "schemaDetails": {
-            "multiPages": true,
-            "multiEnv": true,
-            "globalDataSources": true
-          }
-        }
-      }
-    }
-  ],
-  "tooljet_version": "3.20.13-ee-lts"
-}
\ No newline at end of file

From 3f11a03d3b9d7a11f3e1d942978da228d417fac9 Mon Sep 17 00:00:00 2001
From: Srimanitejas123 <mani@tooljet.com>
Date: Wed, 15 Oct 2025 13:15:43 +0530
Subject: [PATCH 028/157] updated spec

---
 .../e2e/happyPath/workflows/eeTestcases/workflowfeatures.cy.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowfeatures.cy.js b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowfeatures.cy.js
index 62ebdb8acf..cfaf5bf85b 100644
--- a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowfeatures.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowfeatures.cy.js
@@ -101,7 +101,7 @@ describe("Workflows features", () => {
 
     navigateBackToWorkflowsDashboard();
 
-    cy.apiCreateWorkflow(data.wfName)
+    cy.apiCreateWorkflow(data.parentWFName)
     cy.openWorkflow();
     enterJsonInputInStartNode();
     cy.connectDataSourceNode(workflowsText.workflowNodeLabel);

From 956f6be885d479c97affe03d1390390c944d3233 Mon Sep 17 00:00:00 2001
From: Srimanitejas123 <mani@tooljet.com>
Date: Wed, 15 Oct 2025 14:33:22 +0530
Subject: [PATCH 029/157] updated spec with review comments

---
 cypress-tests/cypress/commands/apiCommands.js | 146 +-----------------
 cypress-tests/cypress/commands/commands.js    |  25 ++-
 .../cypress/commands/workflowCommands.js      |  26 ++--
 .../cypress/commands/workflowsApiCommands.js  | 102 ++++++++++++
 .../workflows/eeTestcases/workflowInApp.cy.js |  28 ++--
 .../eeTestcases/workflowWIthDatasource.cy.js  |  42 ++---
 .../workflowWithExportImport.cy.js            |  32 ++--
 .../eeTestcases/workflowWithWebhooks.cy.js    |   6 +-
 .../eeTestcases/workflowfeatures.cy.js        |  32 ++--
 cypress-tests/cypress/support/e2e.js          |   1 +
 .../cypress/support/utils/workFlows.js        |   8 +-
 11 files changed, 217 insertions(+), 231 deletions(-)
 create mode 100644 cypress-tests/cypress/commands/workflowsApiCommands.js

diff --git a/cypress-tests/cypress/commands/apiCommands.js b/cypress-tests/cypress/commands/apiCommands.js
index 7f26ceb31d..884d8b6509 100644
--- a/cypress-tests/cypress/commands/apiCommands.js
+++ b/cypress-tests/cypress/commands/apiCommands.js
@@ -233,7 +233,7 @@ Cypress.Commands.add("apiAddQuery", (queryName, query, dataQueryId) => {
 
 Cypress.Commands.add(
   "apiAddQueryToApp",
-  ({ queryName, options, dsName, dsKind }) => {
+  ({ queryName, options, dataSourceName, dsKind }) => {
     cy.getCookie("tj_auth_token", { log: false }).then((cookie) => {
       const authToken = cookie?.value;
       const workspaceId = Cypress.env("workspaceId");
@@ -259,10 +259,10 @@ Cypress.Commands.add(
           headers: commonHeaders,
         }).then((dsResponse) => {
           const dataSource = dsResponse.body.data_sources.find(
-            (ds) => ds.name === dsName
+            (ds) => ds.name === dataSourceName
           );
           const dataSourceID = dataSource.id;
-          Cypress.env(`${dsName}`, dataSourceID);
+          Cypress.env(`${dataSourceName}`, dataSourceID);
 
           cy.request({
             method: "POST",
@@ -721,143 +721,3 @@ Cypress.Commands.add(
     });
   }
 );
-
-Cypress.Commands.add("apiCreateWorkflow", (workflowName) => {
-  
-  cy.getCookie("tj_auth_token", { log: false }).then((cookie) => {
-    Cypress.env("authToken", `tj_auth_token=${cookie.value}`);
-
-    cy.request({
-      method: "POST",
-      url: `${Cypress.env("server_host")}/api/apps`,
-      headers: {
-        "Tj-Workspace-Id": Cypress.env("workspaceId"),
-        Cookie: `tj_auth_token=${cookie.value}`,
-      },
-      body: {
-        icon: "sentfast",
-        name: workflowName,
-        type: "workflow", 
-      },
-    }).then((response) => {
-      expect(response.status).to.equal(201);
-
-      const workflowId = response.body?.id || response.allRequestResponses?.[0]?.["Response Body"]?.id;
-      const userId = response.body?.user_id || response.allRequestResponses?.[0]?.["Response Body"]?.user_id;
-
-      Cypress.env("workflowId", workflowId);
-      Cypress.env("user_id", userId);
-
-      Cypress.log({
-        name: "Workflow create",
-        displayName: "WORKFLOW CREATED",
-        message: `: ${response.body.name}`,
-      });
-    });
-  });
-});
-
-Cypress.Commands.add(
-  "openWorkflow",
-  (
-    slug = "",
-    workspaceId = Cypress.env("workspaceId"),
-    workflowId = Cypress.env("workflowId"),
-  ) => {
-    cy.intercept("GET", "/api/apps/*").as("getWorkflowData");
-    cy.window({ log: false }).then((win) => {
-      win.localStorage.setItem("walkthroughCompleted", "true");
-    });
-    cy.visit(`/${workspaceId}/apps/${workflowId}/${slug}`);
-
-    cy.wait("@getWorkflowData").then((interception) => {
-      const responseData = interception.response.body;
-
-      Cypress.env("editingVersionId", responseData.editing_version.id);
-      Cypress.env("environmentId", responseData.editorEnvironment.id);
-      Cypress.env("workflowId", responseData.id);
-    });
-  }
-);
-
-Cypress.Commands.add(
-  "openWorkflowByName",
-  (
-    workflowName,
-    workspaceId = Cypress.env("workspaceId"),
-    componentSelector = "[data-cy='workflow-canvas']"
-  ) => {
-    cy.getCookie("tj_auth_token", { log: false }).then((cookie) => {
-      Cypress.env("authToken", `tj_auth_token=${cookie.value}`);
-      
-      cy.request({
-        method: "GET",
-        url: `${Cypress.env("server_host")}/api/apps?page=1&type=workflow&searchKey=${workflowName}`,
-        headers: {
-          "Tj-Workspace-Id": workspaceId,
-          Cookie: Cypress.env("authToken"),
-        },
-      }, { log: false }).then((response) => {
-        const workflow = response.body.apps?.find(
-          app => app.name === workflowName || app.slug === workflowName
-        );
-
-        if (workflow) {
-          Cypress.env("workflowId", workflow.id);
-          cy.openWorkflow(workflow.slug, workspaceId, workflow.id, componentSelector);
-          
-          Cypress.log({
-            name: "Workflow Open",
-            displayName: "WORKFLOW OPENED",
-            message: `: ${workflowName}`,
-          });
-        } else {
-          throw new Error(`Workflow "${workflowName}" not found`);
-        }
-      });
-    });
-  }
-);
-
-Cypress.Commands.add("apiDeleteWorkflow", (workflowName) => {
-  cy.getCookie("tj_auth_token", { log: false }).then((cookie) => {
-    Cypress.env("authToken", `tj_auth_token=${cookie.value}`);
-    
-    cy.request({
-      method: "GET",
-      url: `${Cypress.env("server_host")}/api/apps?page=1&type=workflow&searchKey=${workflowName}`,
-      headers: {
-        "Tj-Workspace-Id": Cypress.env("workspaceId"),
-        Cookie: Cypress.env("authToken"),
-      },
-    }, { log: false }).then((response) => {
-      const workflow = response.body.apps?.find(
-        app => app.name === workflowName || app.slug === workflowName
-      );
-
-      if (workflow) {
-        cy.request({
-          method: "DELETE",
-          url: `${Cypress.env("server_host")}/api/apps/${workflow.id}`,
-          headers: {
-            "Tj-Workspace-Id": Cypress.env("workspaceId"),
-            Cookie: Cypress.env("authToken"),
-          },
-        }, { log: false }).then((deleteResponse) => {
-          expect(deleteResponse.status).to.equal(200);
-          Cypress.log({
-            name: "Workflow Delete",
-            displayName: "WORKFLOW DELETED",
-            message: `: ${workflowName}`,
-          });
-        });
-      } else {
-        Cypress.log({
-          name: "Workflow Not Found",
-          displayName: "WORKFLOW NOT FOUND",
-          message: `: ${workflowName}`,
-        });
-      }
-    });
-  });
-});
\ No newline at end of file
diff --git a/cypress-tests/cypress/commands/commands.js b/cypress-tests/cypress/commands/commands.js
index ceeb223f50..9333e7a644 100644
--- a/cypress-tests/cypress/commands/commands.js
+++ b/cypress-tests/cypress/commands/commands.js
@@ -659,4 +659,27 @@ Cypress.Commands.add("runSqlQuery", (query, db = Cypress.env("app_db")) => {
     dbconfig: db,
     sql: query,
   });
-});
\ No newline at end of file
+});
+
+Cypress.Commands.add(
+  "openWorkflow",
+  (
+    slug = "",
+    workspaceId = Cypress.env("workspaceId"),
+    workflowId = Cypress.env("workflowId"),
+  ) => {
+    cy.intercept("GET", "/api/apps/*").as("getWorkflowData");
+    cy.window({ log: false }).then((win) => {
+      win.localStorage.setItem("walkthroughCompleted", "true");
+    });
+    cy.visit(`/${workspaceId}/apps/${workflowId}/${slug}`);
+
+    cy.wait("@getWorkflowData").then((interception) => {
+      const responseData = interception.response.body;
+
+      Cypress.env("editingVersionId", responseData.editing_version.id);
+      Cypress.env("environmentId", responseData.editorEnvironment.id);
+      Cypress.env("workflowId", responseData.id);
+    });
+  }
+);
diff --git a/cypress-tests/cypress/commands/workflowCommands.js b/cypress-tests/cypress/commands/workflowCommands.js
index 7caca0fae1..9288b924f4 100644
--- a/cypress-tests/cypress/commands/workflowCommands.js
+++ b/cypress-tests/cypress/commands/workflowCommands.js
@@ -6,10 +6,10 @@ import { commonText } from "Texts/common";
 import { selectAppCardOption } from "Support/utils/common";
 import { navigateBackToWorkflowsDashboard } from "Support/utils/workFlows";
 
-Cypress.Commands.add("createWorkflowApp", (wfName) => {
+Cypress.Commands.add("createWorkflowApp", (workflowName) => {
   cy.get(workflowSelector.globalWorkFlowsIcon).click();
   cy.get(workflowSelector.workflowsCreateButton).click();
-  cy.get(workflowSelector.workFlowNameInputField).type(wfName);
+  cy.get(workflowSelector.workFlowNameInputField).type(workflowName);
   cy.get(workflowSelector.createWorkFlowsButton).click();
 });
 
@@ -115,10 +115,10 @@ Cypress.Commands.add(
   }
 );
 
-Cypress.Commands.add("deleteWorkflow", (wfName) => {
+Cypress.Commands.add("deleteWorkflow", (workflowName) => {
   cy.intercept("DELETE", "/api/apps/*").as("appDeleted");
   navigateBackToWorkflowsDashboard();
-  cy.get(commonSelectors.appCard(wfName))
+  cy.get(commonSelectors.appCard(workflowName))
     .realHover()
     .find(commonSelectors.appCardOptionsButton)
     .realHover()
@@ -128,9 +128,9 @@ Cypress.Commands.add("deleteWorkflow", (wfName) => {
   cy.wait("@appDeleted");
 });
 
-Cypress.Commands.add("deleteWorkflowfromDashboard", (wfName) => {
+Cypress.Commands.add("deleteWorkflowfromDashboard", (workflowName) => {
   cy.intercept("DELETE", "/api/apps/*").as("appDeleted");
-  cy.get(commonSelectors.appCard(wfName))
+  cy.get(commonSelectors.appCard(workflowName))
     .realHover()
     .find(commonSelectors.appCardOptionsButton)
     .realHover()
@@ -142,10 +142,10 @@ Cypress.Commands.add("deleteWorkflowfromDashboard", (wfName) => {
 
 Cypress.Commands.add(
   "exportWorkflowApp",
-  (wfName, fixtureFile = "cypress/fixtures/exportedApp.json") => {
+  (workflowName, fixtureFile = "cypress/fixtures/exportedApp.json") => {
     navigateBackToWorkflowsDashboard();
 
-    cy.get(`[data-cy="${wfName}-card"]`)
+    cy.get(`[data-cy="${workflowName}-card"]`)
       .trigger('mouseover') 
       .find('[data-cy="app-card-menu-icon"]')
       .click({ force: true });
@@ -163,20 +163,20 @@ Cypress.Commands.add(
       });
     });
     
-    cy.deleteWorkflowfromDashboard(wfName);
+    cy.deleteWorkflowfromDashboard(workflowName);
   }
 );
 
-Cypress.Commands.add("addWorkflowInApp", (wfName) => {
+Cypress.Commands.add("addWorkflowInApp", (workflowName) => {
   cy.get(workflowSelector.showDSPopoverButton).click();
   cy.get(workflowSelector.workflowSearchInput).type(
     workflowsText.workflowLabel
   );
   cy.contains(`[id*="react-select-"]`, workflowsText.workflowLabel).click();
-  cy.get(workflowSelector.queryRenameInput).clear().type(wfName);
+  cy.get(workflowSelector.queryRenameInput).clear().type(workflowName);
   cy.get(workflowSelector.workflowDropdown).parent()
   .find('.react-select__control')
   .click();
-  cy.get(workflowSelector.workflowSelectInput).realType(wfName);
-  cy.get(workflowSelector.workflowSelectOption).contains(wfName).click();
+  cy.get(workflowSelector.workflowSelectInput).realType(workflowName);
+  cy.get(workflowSelector.workflowSelectOption).contains(workflowName).click();
 });
diff --git a/cypress-tests/cypress/commands/workflowsApiCommands.js b/cypress-tests/cypress/commands/workflowsApiCommands.js
new file mode 100644
index 0000000000..5ad11ef171
--- /dev/null
+++ b/cypress-tests/cypress/commands/workflowsApiCommands.js
@@ -0,0 +1,102 @@
+const envVar = Cypress.env("environment");
+
+ Cypress.Commands.add("apiCreateWorkflow", (workflowName, reuseSession = false) => {
+    cy.getAuthHeaders(reuseSession).then((headers) => {
+      cy.request({
+        method: "POST",
+        url: `${Cypress.env("server_host")}/api/apps`,
+        headers: headers,
+        body: {
+          icon: "sentfast",
+          name: workflowName,
+          type: "workflow",
+        },
+      }).then((response) => {
+        expect(response.status).to.equal(201);
+  
+        const workflowId = response.body?.id || response.allRequestResponses?.[0]?.["Response Body"]?.id;
+        const userId = response.body?.user_id || response.allRequestResponses?.[0]?.["Response Body"]?.user_id;
+  
+        Cypress.env("workflowId", workflowId);
+        Cypress.env("user_id", userId);
+  
+        Cypress.log({
+          name: "Workflow create",
+          displayName: "WORKFLOW CREATED",
+          message: `: ${response.body.name}`,
+        });
+      });
+    });
+  });
+  
+ 
+  Cypress.Commands.add(
+    "openWorkflowByName",
+    (
+      workflowName,
+      workspaceId = Cypress.env("workspaceId"),
+      componentSelector = "[data-cy='workflow-canvas']",
+      reuseSession = false
+    ) => {
+      cy.getAuthHeaders(reuseSession).then((headers) => {
+        cy.request({
+          method: "GET",
+          url: `${Cypress.env("server_host")}/api/apps?page=1&type=workflow&searchKey=${workflowName}`,
+          headers: headers,
+        }, { log: false }).then((response) => {
+          const workflow = response.body.apps?.find(
+            app => app.name === workflowName || app.slug === workflowName
+          );
+  
+          if (workflow) {
+            Cypress.env("workflowId", workflow.id);
+            cy.openWorkflow(workflow.slug, workspaceId, workflow.id, componentSelector);
+            
+            Cypress.log({
+              name: "Workflow Open",
+              displayName: "WORKFLOW OPENED",
+              message: `: ${workflowName}`,
+            });
+          } else {
+            throw new Error(`Workflow "${workflowName}" not found`);
+          }
+        });
+      });
+    }
+  );
+  
+  Cypress.Commands.add("apiDeleteWorkflow", (workflowName, reuseSession = false) => {
+    cy.getAuthHeaders(reuseSession).then((headers) => {
+      cy.request({
+        method: "GET",
+        url: `${Cypress.env("server_host")}/api/apps?page=1&type=workflow&searchKey=${workflowName}`,
+        headers: headers,
+      }, { log: false }).then((response) => {
+        const workflow = response.body.apps?.find(
+          app => app.name === workflowName || app.slug === workflowName
+        );
+  
+        if (workflow) {
+          cy.request({
+            method: "DELETE",
+            url: `${Cypress.env("server_host")}/api/apps/${workflow.id}`,
+            headers: headers,
+          }, { log: false }).then((deleteResponse) => {
+            expect(deleteResponse.status).to.equal(200);
+            Cypress.log({
+              name: "Workflow Delete",
+              displayName: "WORKFLOW DELETED",
+              message: `: ${workflowName}`,
+            });
+          });
+        } else {
+          Cypress.log({
+            name: "Workflow Not Found",
+            displayName: "WORKFLOW NOT FOUND",
+            message: `: ${workflowName}`,
+          });
+        }
+      });
+    });
+  });
+
diff --git a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowInApp.cy.js b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowInApp.cy.js
index ff2f92c70b..195161bcac 100644
--- a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowInApp.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowInApp.cy.js
@@ -19,15 +19,15 @@ describe("Workflows in apps", () => {
   beforeEach(() => {
     cy.apiLogin();
     cy.visit("/");
-    data.wfName = fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", "");
-    data.appName = `${data.wfName}-wf-app`;
+    data.workflowName = fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", "");
+    data.appName = `${data.workflowName}-wf-app`;
     data.dataSourceName = fake.lastName
       .toLowerCase()
       .replaceAll("[^A-Za-z]", "");
   });
 
   it("Creating workflows with runjs and validating execution in apps", () => {
-    cy.createWorkflowApp(data.wfName);
+    cy.createWorkflowApp(data.workflowName);
     enterJsonInputInStartNode();
     cy.connectDataSourceNode(workflowsText.runjsNodeLabel);
 
@@ -51,7 +51,7 @@ describe("Workflows in apps", () => {
     cy.apiCreateApp(data.appName);
     cy.openApp();
 
-    cy.addWorkflowInApp(data.wfName);
+    cy.addWorkflowInApp(data.workflowName);
 
     cy.get(dataSourceSelector.queryPreviewButton).click();
 
@@ -59,20 +59,20 @@ describe("Workflows in apps", () => {
 
     // cy.verifyToastMessage(
     //   commonSelectors.toastMessage,
-    //   `Query (${data.dsName}) completed.`
+    //   `Query (${data.dataSourceName}) completed.`
     // );
     cy.backToApps();
     cy.apiDeleteApp();
-    cy.apiDeleteWorkflow(data.wfName);
+    cy.apiDeleteWorkflow(data.workflowName);
   });
 
   it("Creating workflows with postgres and validating execution in apps", () => {
-    const dsName = `cypress-${data.dataSourceName}-manual-pgsql`;
+    const dataSourceName = `cypress-${data.dataSourceName}-manual-pgsql`;
 
     cy.get(commonSelectors.globalDataSourceIcon).click();
     cy.apiCreateGDS(
       `${Cypress.env("server_host")}/api/data-sources`,
-      dsName,
+      dataSourceName,
       "postgresql",
       [
         { key: "connection_type", value: "manual", encrypted: false },
@@ -95,7 +95,7 @@ describe("Workflows in apps", () => {
       ]
     );
 
-    cy.get(dataSourceSelector.dataSourceNameButton(dsName))
+    cy.get(dataSourceSelector.dataSourceNameButton(dataSourceName))
       .should("be.visible")
       .click();
     cy.get(postgreSqlSelector.buttonTestConnection).click();
@@ -104,10 +104,10 @@ describe("Workflows in apps", () => {
     }).should("have.text", postgreSqlText.labelConnectionVerified);
     cy.reload();
 
-    cy.apiCreateWorkflow(data.wfName)
+    cy.apiCreateWorkflow(data.workflowName)
     cy.openWorkflow();
     enterJsonInputInStartNode();
-    cy.connectDataSourceNode(dsName);
+    cy.connectDataSourceNode(dataSourceName);
 
     cy.get(workflowSelector.nodeName(workflowsText.postgresqlNodeName)).click({
       force: true,
@@ -129,7 +129,7 @@ describe("Workflows in apps", () => {
     cy.apiCreateApp(data.appName);
     cy.openApp();
 
-    cy.addWorkflowInApp(data.wfName);
+    cy.addWorkflowInApp(data.workflowName);
 
     cy.get(dataSourceSelector.queryPreviewButton).click();
 
@@ -137,11 +137,11 @@ describe("Workflows in apps", () => {
 
     // cy.verifyToastMessage(
     //   commonSelectors.toastMessage,
-    //   `Query (${data.dsName}) completed.`
+    //   `Query (${data.dataSourceName}) completed.`
     // );
     cy.backToApps();
     cy.apiDeleteApp();
-    cy.apiDeleteWorkflow(data.wfName);
+    cy.apiDeleteWorkflow(data.workflowName);
 
     deleteDatasource(`cypress-${data.dataSourceName}-manual-pgsql`);
   });
diff --git a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWIthDatasource.cy.js b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWIthDatasource.cy.js
index e0866f0bf7..71f1ea1463 100644
--- a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWIthDatasource.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWIthDatasource.cy.js
@@ -23,14 +23,14 @@ describe("Workflows with Datasource", () => {
   beforeEach(() => {
     cy.apiLogin();
     cy.visit("/");
-    data.wfName = fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", "");
+    data.workflowName = fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", "");
     data.dataSourceName = fake.lastName
       .toLowerCase()
       .replaceAll("[^A-Za-z]", "");
   });
 
   it("RunJS workflow - execute and validate", () => {
-    cy.createWorkflowApp(data.wfName);
+    cy.createWorkflowApp(data.workflowName);
     enterJsonInputInStartNode();
     cy.connectDataSourceNode(workflowsText.runjsNodeLabel);
 
@@ -52,16 +52,16 @@ describe("Workflows with Datasource", () => {
     cy.verifyTextInResponseOutput(workflowsText.responseNodeExpectedValueText);
 
     navigateBackToWorkflowsDashboard();
-    cy.apiDeleteWorkflow(data.wfName);
+    cy.apiDeleteWorkflow(data.workflowName);
   });
 
   it("Postgres workflow - execute and validate", () => {
-    const dsName = `cypress-${data.dataSourceName}-manual-pgsql`;
+    const dataSourceName = `cypress-${data.dataSourceName}-manual-pgsql`;
 
     cy.get(commonSelectors.globalDataSourceIcon).click();
     cy.apiCreateGDS(
       `${Cypress.env("server_host")}/api/data-sources`,
-      dsName,
+      dataSourceName,
       "postgresql",
       [
         { key: "connection_type", value: "manual", encrypted: false },
@@ -84,7 +84,7 @@ describe("Workflows with Datasource", () => {
       ]
     );
 
-    cy.get(dataSourceSelector.dataSourceNameButton(dsName))
+    cy.get(dataSourceSelector.dataSourceNameButton(dataSourceName))
       .should("be.visible")
       .click();
     cy.get(postgreSqlSelector.buttonTestConnection).click();
@@ -93,10 +93,10 @@ describe("Workflows with Datasource", () => {
     }).should("have.text", postgreSqlText.labelConnectionVerified);
     cy.reload();
 
-    cy.apiCreateWorkflow(data.wfName)
+    cy.apiCreateWorkflow(data.workflowName)
     cy.openWorkflow();
     enterJsonInputInStartNode();
-    cy.connectDataSourceNode(dsName);
+    cy.connectDataSourceNode(dataSourceName);
 
     cy.get(workflowSelector.nodeName(workflowsText.postgresqlNodeName)).click({
       force: true,
@@ -116,17 +116,17 @@ describe("Workflows with Datasource", () => {
     verifyTextInResponseOutputLimited(workflowsText.postgresExpectedValue);
 
     navigateBackToWorkflowsDashboard();
-    cy.apiDeleteWorkflow(data.wfName);
+    cy.apiDeleteWorkflow(data.workflowName);
 
-    deleteDatasource(dsName);
+    deleteDatasource(dataSourceName);
   });
 
   it("REST API workflow - execute and validate", () => {
-    const dsName = `cypress-${data.dataSourceName}-restapi`;
+    const dataSourceName = `cypress-${data.dataSourceName}-restapi`;
 
     cy.apiCreateGDS(
       `${Cypress.env("server_host")}/api/data-sources`,
-      dsName,
+      dataSourceName,
       "restapi",
       [
         { key: "url", value: "https://jsonplaceholder.typicode.com" },
@@ -158,10 +158,10 @@ describe("Workflows with Datasource", () => {
       ]
     );
     cy.reload();
-    cy.apiCreateWorkflow(data.wfName)
+    cy.apiCreateWorkflow(data.workflowName)
     cy.openWorkflow();
     enterJsonInputInStartNode();
-    cy.connectDataSourceNode(dsName);
+    cy.connectDataSourceNode(dataSourceName);
 
     cy.get(workflowSelector.nodeName(workflowsText.restapiNodeName)).click({
       force: true,
@@ -182,13 +182,13 @@ describe("Workflows with Datasource", () => {
     cy.verifyTextInResponseOutput(workflowsText.restApiExpectedValue);
 
     navigateBackToWorkflowsDashboard();
-    cy.apiDeleteWorkflow(data.wfName);
+    cy.apiDeleteWorkflow(data.workflowName);
 
-    deleteDatasource(dsName);
+    deleteDatasource(dataSourceName);
   });
 
   it("HarperDB workflow - execute and validate", () => {
-    const dsName = `cypress-${data.dataSourceName}-harperdb`;
+    const dataSourceName = `cypress-${data.dataSourceName}-harperdb`;
     const Host = Cypress.env("harperdb_host");
     const Port = Cypress.env("harperdb_port");
     const Username = Cypress.env("harperdb_username");
@@ -238,10 +238,10 @@ describe("Workflows with Datasource", () => {
       postgreSqlText.toastDSSaved
     );
 
-    cy.apiCreateWorkflow(data.wfName)
+    cy.apiCreateWorkflow(data.workflowName)
     cy.openWorkflow();
     enterJsonInputInStartNode();
-    cy.connectDataSourceNode(dsName);
+    cy.connectDataSourceNode(dataSourceName);
 
     cy.get(workflowSelector.nodeName(workflowsText.harperdbNodeName)).click({
       force: true,
@@ -269,8 +269,8 @@ describe("Workflows with Datasource", () => {
     cy.verifyTextInResponseOutput(workflowsText.harperDbExpectedValue);
 
     navigateBackToWorkflowsDashboard();
-    cy.apiDeleteWorkflow(data.wfName);
+    cy.apiDeleteWorkflow(data.workflowName);
 
-    deleteDatasource(dsName);
+    deleteDatasource(dataSourceName);
   });
 });
diff --git a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithExportImport.cy.js b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithExportImport.cy.js
index 7112fc2bdc..934b2b2069 100644
--- a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithExportImport.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithExportImport.cy.js
@@ -20,16 +20,16 @@ describe("Workflows Export/Import Sanity", () => {
   beforeEach(() => {
     cy.apiLogin();
     cy.visit("/");
-    data.wfName = fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", "");
+    data.workflowName = fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", "");
     data.dataSourceName = fake.lastName
       .toLowerCase()
       .replaceAll("[^A-Za-z]", "");
   });
 
   it.only("RunJS workflow - execute, export/import, re-execute", () => {
-    const wfName = `${data.wfName}-runjs`;
+    const workflowName = `${data.workflowName}-runjs`;
 
-    cy.createWorkflowApp(wfName);
+    cy.createWorkflowApp(workflowName);
     enterJsonInputInStartNode();
     cy.connectDataSourceNode(workflowsText.runjsNodeLabel);
 
@@ -50,23 +50,23 @@ describe("Workflows Export/Import Sanity", () => {
     );
     cy.verifyTextInResponseOutput(workflowsText.responseNodeExpectedValueText);
 
-    cy.exportWorkflowApp(wfName);
+    cy.exportWorkflowApp(workflowName);
 
-    importWorkflowApp(wfName, workflowsText.exportFixturePath);
+    importWorkflowApp(workflowName, workflowsText.exportFixturePath);
     cy.verifyTextInResponseOutput(workflowsText.responseNodeExpectedValueText);
     navigateBackToWorkflowsDashboard();
-    cy.apiDeleteWorkflow(wfName);
+    cy.apiDeleteWorkflow(workflowName);
     cy.task("deleteFile", workflowsText.exportFixturePath);
   });
 
   it("Postgres workflow - execute, export/import, re-execute", () => {
-    const wfName = `${data.wfName}-pg`;
-    const dsName = `cypress-${data.dataSourceName}-manual-pgsql`;
+    const workflowName = `${data.workflowName}-pg`;
+    const dataSourceName = `cypress-${data.dataSourceName}-manual-pgsql`;
 
     cy.get(commonSelectors.globalDataSourceIcon).click();
     cy.apiCreateGDS(
       `${Cypress.env("server_host")}/api/data-sources`,
-      dsName,
+      dataSourceName,
       "postgresql",
       [
         { key: "connection_type", value: "manual", encrypted: false },
@@ -88,7 +88,7 @@ describe("Workflows Export/Import Sanity", () => {
       ]
     );
 
-    cy.get(dataSourceSelector.dataSourceNameButton(dsName))
+    cy.get(dataSourceSelector.dataSourceNameButton(dataSourceName))
       .should("be.visible")
       .click();
 
@@ -99,10 +99,10 @@ describe("Workflows Export/Import Sanity", () => {
 
     cy.reload();
 
-    cy.apiCreateWorkflow(data.wfName)
+    cy.apiCreateWorkflow(data.workflowName)
     cy.openWorkflow();
     enterJsonInputInStartNode();
-    cy.connectDataSourceNode(dsName);
+    cy.connectDataSourceNode(dataSourceName);
 
     cy.get(workflowSelector.nodeName(workflowsText.postgresqlNodeName)).click({
       force: true,
@@ -122,14 +122,14 @@ describe("Workflows Export/Import Sanity", () => {
     );
     verifyTextInResponseOutputLimited(workflowsText.postgresExpectedValue);
 
-    cy.exportWorkflowApp(wfName);
+    cy.exportWorkflowApp(workflowName);
 
-    importWorkflowApp(wfName, workflowsText.exportFixturePath);
+    importWorkflowApp(workflowName, workflowsText.exportFixturePath);
     verifyTextInResponseOutputLimited(workflowsText.postgresExpectedValue);
     navigateBackToWorkflowsDashboard();
-    cy.apiDeleteWorkflow(wfName);
+    cy.apiDeleteWorkflow(workflowName);
 
-    deleteDatasource(dsName);
+    deleteDatasource(dataSourceName);
     cy.task("deleteFile", workflowsText.exportFixturePath);
   });
 });
diff --git a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithWebhooks.cy.js b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithWebhooks.cy.js
index 2c47fc4e16..239f73e8ed 100644
--- a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithWebhooks.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithWebhooks.cy.js
@@ -14,14 +14,14 @@ describe("Workflows with Webhooks", () => {
   beforeEach(() => {
     cy.apiLogin();
     cy.visit("/");
-    data.wfName = fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", "");
+    data.workflowName = fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", "");
     data.dataSourceName = fake.lastName
       .toLowerCase()
       .replaceAll("[^A-Za-z]", "");
   });
 
   it("Creating workflows with runjs, triggering via webhook, and validating execution", () => {
-    cy.createWorkflowApp(data.wfName);
+    cy.createWorkflowApp(data.workflowName);
     enterJsonInputInStartNode();
     cy.connectDataSourceNode(workflowsText.runjsNodeLabel);
 
@@ -66,6 +66,6 @@ describe("Workflows with Webhooks", () => {
           });
       });
       navigateBackToWorkflowsDashboard();
-    cy.apiDeleteWorkflow(data.wfName);
+    cy.apiDeleteWorkflow(data.workflowName);
   });
 });
diff --git a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowfeatures.cy.js b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowfeatures.cy.js
index cfaf5bf85b..72cb753b76 100644
--- a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowfeatures.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowfeatures.cy.js
@@ -15,17 +15,17 @@ describe("Workflows features", () => {
   beforeEach(() => {
     cy.apiLogin();
     cy.visit("/");
-    data.wfName = fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", "");
-    data.appName = `${data.wfName}-wf-app`;
-    data.childWFName = fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", "");
-    data.parentWFName = `${data.wfName}-wf-app`;
+    data.workflowName = fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", "");
+    data.appName = `${data.workflowName}-wf-app`;
+    data.childWorkflowName = fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", "");
+    data.parentWorkflowName = `${data.workflowName}-wf-app`;
     data.dataSourceName = fake.lastName
       .toLowerCase()
       .replaceAll("[^A-Za-z]", "");
   });
 
   it("Creating workflow with long string input and validating execution", () => {
-    cy.createWorkflowApp(data.wfName);
+    cy.createWorkflowApp(data.workflowName);
     enterJsonInputInStartNode(workflowsText.longStringJsonText);
     cy.connectDataSourceNode(workflowsText.runjsNodeLabel);
 
@@ -46,11 +46,11 @@ describe("Workflows features", () => {
     );
     cy.verifyTextInResponseOutput(workflowsText.longStringJsonText);
     navigateBackToWorkflowsDashboard();
-    cy.apiDeleteWorkflow(data.wfName);
+    cy.apiDeleteWorkflow(data.workflowName);
   });
 
   it("Creating workflow with Node Preview Validation and execution", () => {
-    cy.createWorkflowApp(data.wfName);
+    cy.createWorkflowApp(data.workflowName);
     enterJsonInputInStartNode();
     cy.connectDataSourceNode(workflowsText.runjsNodeLabel);
 
@@ -73,12 +73,12 @@ describe("Workflows features", () => {
     );
     cy.verifyTextInResponseOutput(workflowsText.jsonValuePlaceholder);
     navigateBackToWorkflowsDashboard();
-    cy.apiDeleteWorkflow(data.wfName);
+    cy.apiDeleteWorkflow(data.workflowName);
   });
 
   // Need to run after bug fixes
   it("Creating workflow inside Workflow and validating execution", () => {
-    cy.createWorkflowApp(data.childWFName);
+    cy.createWorkflowApp(data.childWorkflowName);
     enterJsonInputInStartNode();
     cy.connectDataSourceNode(workflowsText.runjsNodeLabel);
 
@@ -101,7 +101,7 @@ describe("Workflows features", () => {
 
     navigateBackToWorkflowsDashboard();
 
-    cy.apiCreateWorkflow(data.parentWFName)
+    cy.apiCreateWorkflow(data.parentWorkflowName)
     cy.openWorkflow();
     enterJsonInputInStartNode();
     cy.connectDataSourceNode(workflowsText.workflowNodeLabel);
@@ -112,9 +112,9 @@ describe("Workflows features", () => {
 
     cy.get('input[id^="react-select-"]')
       .eq(1)
-      .type(data.childWFName, { force: true });
+      .type(data.childWorkflowName, { force: true });
     cy.get(".react-select__option")
-      .contains(data.childWFName)
+      .contains(data.childWorkflowName)
       .click({ force: true });
 
     cy.get("body").click(50, 50);
@@ -126,12 +126,12 @@ describe("Workflows features", () => {
     );
     // cy.verifyTextInResponseOutput(workflowsText.responseNodeExpectedValueText);
     navigateBackToWorkflowsDashboard();
-    cy.apiDeleteWorkflow(data.childWFName);
-    cy.apiDeleteWorkflow(data.parentWFName);
+    cy.apiDeleteWorkflow(data.childWorkflowName);
+    cy.apiDeleteWorkflow(data.parentWorkflowName);
   });
 
   it("Creating workflow with large datasets and validating execution", () => {
-    cy.createWorkflowApp(data.wfName);
+    cy.createWorkflowApp(data.workflowName);
     enterJsonInputInStartNode();
     cy.connectDataSourceNode(workflowsText.runjsNodeLabel);
 
@@ -158,6 +158,6 @@ describe("Workflows features", () => {
     );
 
     navigateBackToWorkflowsDashboard();
-    cy.apiDeleteWorkflow(data.wfName);
+    cy.apiDeleteWorkflow(data.workflowName);
   });
 });
diff --git a/cypress-tests/cypress/support/e2e.js b/cypress-tests/cypress/support/e2e.js
index 410c60f646..2929869182 100644
--- a/cypress-tests/cypress/support/e2e.js
+++ b/cypress-tests/cypress/support/e2e.js
@@ -17,6 +17,7 @@
 import "cypress-real-events/support";
 import "../commands/commands";
 import "../commands/apiCommands";
+import "../commands/workflowsApiCommands";
 import '../commands/workflowCommands';
 import '../commands/platform/platformApiCommands';
 import "@cypress/code-coverage/support";
diff --git a/cypress-tests/cypress/support/utils/workFlows.js b/cypress-tests/cypress/support/utils/workFlows.js
index e415e48e84..711a19da46 100644
--- a/cypress-tests/cypress/support/utils/workFlows.js
+++ b/cypress-tests/cypress/support/utils/workFlows.js
@@ -40,23 +40,23 @@ export const revealWorkflowToken = (selectors) => {
 };
 
 export const importWorkflowApp = (
-  wfName,
+  workflowName,
   fixturePath = "cypress/fixtures/exportedApp.json"
 ) => {
   cy.get(workflowSelector.importWorkFlowsOption).click();
   cy.get(workflowSelector.importWorkFlowsLabel).click();
   cy.get('input[type="file"]').first().selectFile(fixturePath, { force: true });
   cy.wait(2000);
-  cy.get(workflowSelector.workFlowNameInputField).clear().type(wfName);
+  cy.get(workflowSelector.workFlowNameInputField).clear().type(workflowName);
   cy.get(workflowSelector.importWorkFlowsButton).click();
 };
 
-export const deleteAppandWorkflowAfterExecution = (wfName, appName) => {
+export const deleteAppandWorkflowAfterExecution = (workflowName, appName) => {
   cy.backToApps();
   cy.deleteApp(appName);
   cy.get(workflowSelector.globalWorkFlowsIcon).click();
   cy.intercept("DELETE", "/api/apps/*").as("appDeleted");
-  cy.get(commonSelectors.appCard(wfName))
+  cy.get(commonSelectors.appCard(workflowName))
     .realHover()
     .find(commonSelectors.appCardOptionsButton)
     .realHover()

From 1a9761bc06f46694fb10b50175d62454f0150946 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Wed, 15 Oct 2025 14:59:24 +0530
Subject: [PATCH 030/157] update submodule

---
 frontend/ee | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/ee b/frontend/ee
index 4c9743f485..ea751ada29 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit 4c9743f485d77aa186c29729abd743e708536e79
+Subproject commit ea751ada293469f8fdf5e3cb62b39b60c60071ef

From a3b0a33ce7998287182b713b0ef00a8aa63701ff Mon Sep 17 00:00:00 2001
From: emidhun <midhun752@gmail.com>
Date: Wed, 15 Oct 2025 15:26:34 +0530
Subject: [PATCH 031/157] Fix-import spec

---
 cypress-tests/cypress/commands/apiCommands.js |  89 ++----------
 cypress-tests/cypress/commands/commands.js    |  18 +--
 .../commands/platform/platformApiCommands.js  |  78 ++++++++++
 .../platform/ceTestcases/apps/appImport.cy.js | 133 ++++++++----------
 .../utils/editor/editorHeaderOperations.js    |  38 +++++
 5 files changed, 194 insertions(+), 162 deletions(-)
 create mode 100644 cypress-tests/cypress/support/utils/editor/editorHeaderOperations.js

diff --git a/cypress-tests/cypress/commands/apiCommands.js b/cypress-tests/cypress/commands/apiCommands.js
index 873e6e1d13..bcd0cce5ab 100644
--- a/cypress-tests/cypress/commands/apiCommands.js
+++ b/cypress-tests/cypress/commands/apiCommands.js
@@ -1,35 +1,5 @@
 const envVar = Cypress.env("environment");
 
-Cypress.Commands.add(
-  "apiLogin",
-  (
-    userEmail = "dev@tooljet.io",
-    userPassword = "password",
-    workspaceId = "",
-    redirection = "/"
-  ) => {
-    cy.request({
-      url: `${Cypress.env("server_host")}/api/authenticate/${workspaceId}`,
-      method: "POST",
-      body: {
-        email: userEmail,
-        password: userPassword,
-        redirectTo: redirection,
-      },
-    })
-      .its("body")
-      .then((res) => {
-        Cypress.env("workspaceId", res.current_organization_id);
-
-        Cypress.log({
-          name: "Api login",
-          displayName: "LOGIN: ",
-          message: `: Success`,
-        });
-      });
-  }
-);
-
 Cypress.Commands.add("apiCreateGDS", (url, name, kind, options) => {
   cy.getCookie("tj_auth_token").then((cookie) => {
     cy.request(
@@ -64,7 +34,7 @@ Cypress.Commands.add("apiCreateGDS", (url, name, kind, options) => {
   });
 });
 
-Cypress.Commands.add("apiFetchDataSourcesId", () => {
+Cypress.Commands.add("apiFetchDataSourcesIdFromApp", () => {
   cy.getAuthHeaders().then((headers) => {
     cy.request({
       method: "GET",
@@ -183,23 +153,6 @@ Cypress.Commands.add(
   }
 );
 
-Cypress.Commands.add("apiLogout", () => {
-  cy.getCookie("tj_auth_token").then((cookie) => {
-    cy.request(
-      {
-        method: "GET",
-        url: `${Cypress.env("server_host")}/api/session/logout`,
-        headers: {
-          "Tj-Workspace-Id": Cypress.env("workspaceId"),
-          Cookie: `tj_auth_token=${cookie.value}`,
-        },
-      },
-      { log: false }
-    ).then((response) => {
-      expect(response.status).to.equal(200);
-    });
-  });
-});
 
 Cypress.Commands.add("apiAddQuery", (queryName, query, dataQueryId) => {
   cy.getCookie("tj_auth_token").then((cookie) => {
@@ -378,19 +331,6 @@ Cypress.Commands.add(
   }
 );
 
-Cypress.Commands.add("apiGetEnvironments", () => {
-  cy.getAuthHeaders().then((headers) => {
-    cy.request({
-      method: "GET",
-      url: `${Cypress.env("server_host")}/api/app-environments`,
-      headers: headers,
-    }).then((response) => {
-      expect(response.status).to.equal(200);
-      return response.body.environments;
-    });
-  });
-});
-
 Cypress.Commands.add("apiMakeAppPublic", (appId = Cypress.env("appId")) => {
   cy.getAuthHeaders().then((headers) => {
     cy.request({
@@ -495,30 +435,17 @@ Cypress.Commands.add("apiGetDataSourceIdByName", (dataSourceName) => {
       headers: headers,
     }).then((response) => {
       expect(response.status).to.equal(200);
-      const dataSource = response.body.data_sources.find(
-        (ds) => ds.name === dataSourceName
-      );
-      return dataSource.id;
+      const id = response.body.data_sources.find(ds => ds.name === dataSourceName)?.id;
+      Cypress.log({
+        name: "apiGetDataSourceIdByName",
+        displayName: "Data Source ID",
+        message: `Data source ID for '${dataSourceName}': ${id}`,
+      });
+      return id;
     });
   });
 });
 
-Cypress.Commands.add("getAuthHeaders", (returnCached = false) => {
-  let headers = {};
-  if (returnCached) {
-    return returnCached;
-  } else {
-    cy.getCookie("tj_auth_token").then((cookie) => {
-      headers = {
-        "Tj-Workspace-Id": Cypress.env("workspaceId"),
-        Cookie: `tj_auth_token=${cookie.value}`,
-      };
-      Cypress.env("authHeaders", headers);
-      return headers;
-    });
-  }
-});
-
 Cypress.Commands.add(
   "apiUpdateDataSource",
   (dataSourceName, envName, updateData) => {
diff --git a/cypress-tests/cypress/commands/commands.js b/cypress-tests/cypress/commands/commands.js
index ceeb223f50..fa46f242b1 100644
--- a/cypress-tests/cypress/commands/commands.js
+++ b/cypress-tests/cypress/commands/commands.js
@@ -219,14 +219,14 @@ Cypress.Commands.add("createAppFromTemplate", (appName) => {
   cy.get('[data-cy="app-name-label"]').should("have.text", "App Name");
 });
 
-Cypress.Commands.add("renameApp", (appName) => {
-  cy.get(commonSelectors.appNameInput).type(
-    `{selectAll}{backspace}${appName}`,
-    { force: true }
-  );
-  cy.forceClickOnCanvas();
-  cy.waitForAutoSave();
-});
+// Cypress.Commands.add("renameApp", (appName) => {
+//   cy.get(commonSelectors.appNameInput).type(
+//     `{selectAll}{backspace}${appName}`,
+//     { force: true }
+//   );
+//   cy.forceClickOnCanvas();
+//   cy.waitForAutoSave();
+// });
 
 Cypress.Commands.add(
   "clearCodeMirror",
@@ -557,7 +557,7 @@ Cypress.Commands.add("installMarketplacePlugin", (pluginName) => {
     }
   });
 
-  function installPlugin (pluginName) {
+  function installPlugin(pluginName) {
     cy.get('[data-cy="-list-item"]').eq(1).click();
     cy.wait(1000);
 
diff --git a/cypress-tests/cypress/commands/platform/platformApiCommands.js b/cypress-tests/cypress/commands/platform/platformApiCommands.js
index f17bc6ade0..d2cd90371b 100644
--- a/cypress-tests/cypress/commands/platform/platformApiCommands.js
+++ b/cypress-tests/cypress/commands/platform/platformApiCommands.js
@@ -1,5 +1,66 @@
 const envVar = Cypress.env("environment");
 
+Cypress.Commands.add(
+    "apiLogin",
+    (
+        userEmail = "dev@tooljet.io",
+        userPassword = "password",
+        workspaceId = "",
+        redirection = "/"
+    ) => {
+        cy.request({
+            url: `${Cypress.env("server_host")}/api/authenticate/${workspaceId}`,
+            method: "POST",
+            body: {
+                email: userEmail,
+                password: userPassword,
+                redirectTo: redirection,
+            },
+        })
+            .its("body")
+            .then((res) => {
+                Cypress.env("workspaceId", res.current_organization_id);
+
+                Cypress.log({
+                    name: "Api login",
+                    displayName: "LOGIN: ",
+                    message: `: Success`,
+                });
+            });
+    }
+);
+
+Cypress.Commands.add("apiLogout", () => {
+    cy.getCookie("tj_auth_token").then((cookie) => {
+        cy.request(
+            {
+                method: "GET",
+                url: `${Cypress.env("server_host")}/api/session/logout`,
+                headers: {
+                    "Tj-Workspace-Id": Cypress.env("workspaceId"),
+                    Cookie: `tj_auth_token=${cookie.value}`,
+                },
+            },
+            { log: false }
+        ).then((response) => {
+            expect(response.status).to.equal(200);
+        });
+    });
+});
+
+Cypress.Commands.add("apiGetEnvironments", () => {
+    cy.getAuthHeaders().then((headers) => {
+        cy.request({
+            method: "GET",
+            url: `${Cypress.env("server_host")}/api/app-environments`,
+            headers: headers,
+        }).then((response) => {
+            expect(response.status).to.equal(200);
+            return response.body.environments;
+        });
+    });
+});
+
 Cypress.Commands.add("apiCreateWorkspace", (workspaceName, workspaceSlug) => {
     cy.getCookie("tj_auth_token").then((cookie) => {
         cy.request(
@@ -567,3 +628,20 @@ Cypress.Commands.add(
         });
     }
 );
+
+Cypress.Commands.add("getAuthHeaders", (returnCached = false) => {
+    let headers = {};
+    if (returnCached) {
+        return returnCached;
+    } else {
+        cy.getCookie("tj_auth_token").then((cookie) => {
+            headers = {
+                "Tj-Workspace-Id": Cypress.env("workspaceId"),
+                Cookie: `tj_auth_token=${cookie.value}`,
+            };
+            Cypress.env("authHeaders", headers);
+            Cypress.log({ name: "getAuthHeaders", message: `Auth headers: ${JSON.stringify(headers)}` });
+            return headers;
+        });
+    }
+});
\ No newline at end of file
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appImport.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appImport.cy.js
index cfe0c426d1..5ea812c6b4 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appImport.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appImport.cy.js
@@ -7,8 +7,9 @@ import { buttonText } from "Texts/button";
 import { importText } from "Texts/exportImport";
 import { importAndVerifyApp } from "Support/utils/exportImport";
 import { switchVersionAndVerify } from "Support/utils/version";
+import { renameApp, verifyAppName, verifyCurrentEnvironment, verifyCurrentVersion, addNewVersion, promoteEnv } from 'Support/utils/editor/editorHeaderOperations';
 
-describe("App Import Functionality", () => {
+describe("App Import", () => {
   const TEST_DATA = {
     toolJetImage: "cypress/fixtures/Image/tooljet.png",
     invalidApp: "cypress/fixtures/templates/invalid_app.json",
@@ -32,16 +33,20 @@ describe("App Import Functionality", () => {
     };
 
     cy.apiLogin();
-    cy.apiCreateWorkspace(data.workspaceName, data.workspaceSlug);
-    cy.apiLogout();
+    cy.apiCreateWorkspace(data.workspaceName, data.workspaceSlug).then((workspace) => {
+      Cypress.env("workspaceId", workspace.body.organization_id);
+    });
     cy.skipWalkthrough();
-  });
-
-  it("should verify app import functionality", () => {
-    cy.apiLogin();
     cy.visit(`${data.workspaceSlug}`);
+  });
+  it("should verify invalid import files", () => {
+
+    cy.get(importSelectors.dropDownMenu).should("be.visible").click();
+    cy.get(importSelectors.importOptionLabel).verifyVisibleElement(
+      "have.text",
+      importText.importOption
+    );
 
-    // Test invalid file import
     cy.get(dashboardSelector.importAppButton).click();
     importAndVerifyApp(
       TEST_DATA.toolJetImage,
@@ -55,14 +60,10 @@ describe("App Import Functionality", () => {
       "Could not import: SyntaxError: Expected ',' or '}' after property value in JSON at position 246 (line 11 column 13)"
     );
 
-    cy.wait(500);
 
-    // Test valid app import
-    cy.get(importSelectors.dropDownMenu).should("be.visible").click();
-    cy.get(importSelectors.importOptionLabel).verifyVisibleElement(
-      "have.text",
-      importText.importOption
-    );
+  });
+
+  it("should verify app with multiple version", () => {
 
     cy.intercept("POST", "/api/v2/resources/import").as("importApp");
     cy.get(importSelectors.importOptionInput)
@@ -103,26 +104,19 @@ describe("App Import Functionality", () => {
     // Verify imported app
     cy.get(commonSelectors.toastCloseButton).click();
     cy.wait(500);
-    cy.get(commonSelectors.appNameInput).verifyVisibleElement(
-      "contain.value",
+    cy.get('[data-cy="edit-app-name-button"]').verifyVisibleElement(
+      "have.text",
       "three-versions"
     );
     cy.get(appVersionSelectors.currentVersionField("v3")).should("be.visible");
 
-    // Configure app
-    cy.skipEditorPopover();
-    cy.dragAndDropWidget(buttonText.defaultWidgetText);
-    cy.get(appVersionSelectors.appVersionLabel).should("be.visible");
-    cy.get(commonWidgetSelector.draggableWidget("button1")).should(
-      "be.visible"
-    );
+    //App editing is pending
 
-    cy.renameApp(data.appName);
-    cy.get(commonSelectors.appNameInput).verifyVisibleElement(
-      "contain.value",
+    renameApp(data.appName);
+    cy.get('[data-cy="edit-app-name-button"]').verifyVisibleElement(
+      "have.text",
       data.appName
     );
-    cy.waitForAutoSave();
 
     // Verify initial widget states
 
@@ -152,52 +146,24 @@ describe("App Import Functionality", () => {
     cy.visit(`${data.workspaceSlug}/data-sources`);
     cy.get('[data-cy="postgresql-button"]').should("be.visible");
 
-    cy.ifEnv("Community", () => {
-      cy.apiUpdateDataSource("postgresql", "production", {
-        options: [
-          {
-            key: "password",
-            value: `${Cypress.env("pg_password")}`,
-            encrypted: true,
-          },
-        ],
+    const edition = Cypress.env("environment");
+    if (edition === "Community" || edition === "Enterprise") {
+      const dsEnv = edition === "Community" ? "production" : "development";
+      cy.apiUpdateDataSource("postgresql", dsEnv, {
+        options: [{
+          key: "password",
+          value: Cypress.env("pg_password"),
+          encrypted: true,
+        }],
       });
-    });
-    cy.ifEnv("Enterprise", () => {
-      cy.apiUpdateDataSource("postgresql", "development", {
-        options: [
-          {
-            key: "password",
-            value: `${Cypress.env("pg_password")}`,
-            encrypted: true,
-          },
-        ],
-      });
-    });
-
-    cy.ifEnv("Community", () => {
-      cy.apiCreateWorkspaceConstant(
-        "pageHeader",
-        "Import and Export",
-        ["Global"],
-        ["production"]
-      );
-      cy.apiCreateWorkspaceConstant("db_name", "persons", ["Secret"], ["production"]);
-    });
-
-    cy.ifEnv("Enterprise", () => {
-      cy.apiCreateWorkspaceConstant(
-        "pageHeader",
-        "Import and Export",
-        ["Global"],
-        ["development"]
-      );
-      cy.apiCreateWorkspaceConstant("db_name", "persons", ["Secret"], ["development"]);
-    });
+      cy.apiCreateWorkspaceConstant("pageHeader", "Import and Export", ["Global"], [dsEnv]);
+      cy.apiCreateWorkspaceConstant("db_name", "persons", ["Secret"], [dsEnv]);
+    }
 
     // Verify app after setup
     cy.wait("@importApp").then((interception) => {
       const appId = interception.response.body.imports.app[0].id;
+      cy.log(`Imported app id: ${appId}`);
       cy.openApp(
         "",
         Cypress.env("workspaceId"),
@@ -227,14 +193,37 @@ describe("App Import Functionality", () => {
     cy.backToApps();
 
     // Test single version import
+
+  });
+
+  it("should verify app with single version", () => {
+
     cy.get(importSelectors.dropDownMenu).click();
+    const edition = Cypress.env("environment");
+    let dsEnv
+    if (edition === "Community" || edition === "Enterprise") {
+      dsEnv = edition === "Community" ? "production" : "development";
+      cy.apiCreateWorkspaceConstant("pageHeader", "Import and Export", ["Global"], [dsEnv]);
+      cy.apiCreateWorkspaceConstant("db_name", "persons", ["Secret"], [dsEnv]);
+    }
+
     importAndVerifyApp(TEST_DATA.appFiles.singleVersion);
 
-    // Verify final state
-    cy.get(commonSelectors.appNameInput).verifyVisibleElement(
-      "contain.value",
+    cy.get('[data-cy="edit-app-name-button"]').verifyVisibleElement(
+      "have.text",
       "one_version"
     );
+    cy.apiUpdateDataSource("postgresql", dsEnv, {
+      options: [{
+        key: "password",
+        value: Cypress.env("pg_password"),
+        encrypted: true,
+      }],
+    });
+
+    cy.reload()
+
+
 
     verifyCommonData({
       text2: "Import and Export",
diff --git a/cypress-tests/cypress/support/utils/editor/editorHeaderOperations.js b/cypress-tests/cypress/support/utils/editor/editorHeaderOperations.js
new file mode 100644
index 0000000000..c8ee8fc7f0
--- /dev/null
+++ b/cypress-tests/cypress/support/utils/editor/editorHeaderOperations.js
@@ -0,0 +1,38 @@
+export const renameApp = (name) => {
+    cy.get('[data-cy="edit-app-name-button"]').click();
+    cy.get("[data-cy='app-name-input']").type(`{selectAll}{backspace}${name}`, { force: true });
+    cy.get("[data-cy='rename-app']").click();
+};
+
+export const verifyAppName = (name) => {
+    cy.get('[data-cy="edit-app-name-button"]').should("have.text", name);
+}
+
+export const verifyCurrentEnvironment = (envName) => {
+    cy.get('[data-cy="list-current-env-name"]').should("have.text", envName);
+}
+
+export const verifyCurrentVersion = (version) => {
+    cy.get('[data-cy*="-current-version-text"]').should("have.text", version);
+}
+
+export const addNewVersion = (newVersion, fromVersion) => {
+    cy.get('[data-cy*="-current-version-text"]').click();
+    cy.get('[data-cy="create-new-version-button"]').click();
+    if (fromVersion) {
+        cy.get('[data-cy="create-version-from-input-field"]').click();
+        cy.contains('[id*="react-select"]', fromVersion).click();
+    }
+    cy.get('[data-cy="version-name-input-field"]').type(newVersion, { force: true });
+    cy.get('[data-cy="create-new-version-button"]').click();
+    cy.verifyToastMessage("Version Created");
+};
+
+export const promoteEnv = () => {
+    cy.get('[data-cy="promote-button"]').first().click();
+    cy.get('[data-cy="promote-button"]').last().click();
+}
+
+
+
+// import { renameApp, verifyAppName, verifyCurrentEnvironment, verifyCurrentVersion, addNewVersion, promoteEnv } from 'cypress-tests/cypress/support/utils/editor/editorHeaderOperations';
\ No newline at end of file

From 4359621be8955d196191c54039a3d0c67223ed2e Mon Sep 17 00:00:00 2001
From: emidhun <midhun752@gmail.com>
Date: Wed, 15 Oct 2025 15:45:21 +0530
Subject: [PATCH 032/157] Minor fixes

---
 cypress-tests/cypress.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress-tests/cypress.config.js b/cypress-tests/cypress.config.js
index 4c2e971648..53b86c4c53 100644
--- a/cypress-tests/cypress.config.js
+++ b/cypress-tests/cypress.config.js
@@ -114,7 +114,7 @@ module.exports = defineConfig({
     baseUrl: "http://localhost:8082",
     specPattern: "cypress/e2e/happyPath/**/*.cy.js",
     downloadsFolder: "cypress/downloads",
-    numTestsKeptInMemory: 0,
+    numTestsKeptInMemory: 1,
     redirectionLimit: 5,
     trashAssetsBeforeRuns: true,
     experimentalMemoryManagement: true,

From 70be5e62bb33ae24d03a816c19b869a312f66880 Mon Sep 17 00:00:00 2001
From: emidhun <midhun752@gmail.com>
Date: Wed, 15 Oct 2025 15:47:37 +0530
Subject: [PATCH 033/157] Minor fixes

---
 .../commonTestcases/newSuits/queries/chainingOfQueries.cy.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress-tests/cypress/e2e/happyPath/appbuilder/commonTestcases/newSuits/queries/chainingOfQueries.cy.js b/cypress-tests/cypress/e2e/happyPath/appbuilder/commonTestcases/newSuits/queries/chainingOfQueries.cy.js
index 9d9dad964d..939363cff2 100644
--- a/cypress-tests/cypress/e2e/happyPath/appbuilder/commonTestcases/newSuits/queries/chainingOfQueries.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/appbuilder/commonTestcases/newSuits/queries/chainingOfQueries.cy.js
@@ -14,7 +14,7 @@ describe("Chaining of queries", () => {
     cy.apiLogin();
     cy.apiCreateApp(`${fake.companyName}-chaining-App`);
     cy.openApp();
-    cy.apiFetchDataSourcesId();
+    cy.apiFetchDataSourcesIdFromApp();
     cy.viewport(1800, 1800);
     cy.dragAndDropWidget("Button");
     resizeQueryPanel("80");

From 0fd25e11326a978707cec24ba8786598a3931faa Mon Sep 17 00:00:00 2001
From: emidhun <midhun752@gmail.com>
Date: Wed, 15 Oct 2025 15:48:31 +0530
Subject: [PATCH 034/157] Add data-cy

---
 frontend/src/AppBuilder/Header/EditAppName.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/AppBuilder/Header/EditAppName.jsx b/frontend/src/AppBuilder/Header/EditAppName.jsx
index 8f5477b647..9ba4bcd464 100644
--- a/frontend/src/AppBuilder/Header/EditAppName.jsx
+++ b/frontend/src/AppBuilder/Header/EditAppName.jsx
@@ -45,6 +45,7 @@ function EditAppName() {
           <button
             className="edit-app-name-button tw-h-8 tw-rounded-lg tw-pr-1 tw-w-auto tw-font-medium tw-cursor-pointer tw-outline-none tw-bg-transparent tw-border tw-border-transparent hover:tw-border-border-strong tw-shadow-none tw-group tw-transition-all tw-duration-300 tw-flex tw-items-center tw-relative"
             type="button"
+            data-cy="edit-app-name-button"
             onClick={() => setShowRenameModal(true)}
           >
             <span className="tw-font-title-large tw-truncate tw-w-full tw-block group-hover:tw-w-[calc(100%-24px)]">

From 75ca1931373a256140d17683a1e017fc80658dc6 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Wed, 15 Oct 2025 16:38:02 +0530
Subject: [PATCH 035/157] fix

---
 frontend/ee                                     | 2 +-
 frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx | 6 ------
 frontend/src/AppBuilder/AppCanvas/Selecto.jsx   | 2 --
 3 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/frontend/ee b/frontend/ee
index 4c9743f485..ea751ada29 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit 4c9743f485d77aa186c29729abd743e708536e79
+Subproject commit ea751ada293469f8fdf5e3cb62b39b60c60071ef
diff --git a/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx b/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx
index c3703e7eac..37c7793978 100644
--- a/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx
@@ -118,12 +118,6 @@ export const AppCanvas = ({ appId, switchDarkMode, darkMode }) => {
     };
   }, [currentLayout, canvasMaxWidth, isViewerSidebarPinned, moduleId, isRightSidebarOpen]);
 
-  useEffect(() => {
-    if (draggingComponentId) {
-      useStore.getState().setActiveRightSideBarTab(RIGHT_SIDE_BAR_TAB.COMPONENTS);
-    }
-  }, [draggingComponentId]);
-
   const canvasContainerStyles = useMemo(() => {
     const canvasBgColor =
       currentMode === 'view'
diff --git a/frontend/src/AppBuilder/AppCanvas/Selecto.jsx b/frontend/src/AppBuilder/AppCanvas/Selecto.jsx
index b380c65f95..75dfe97aab 100644
--- a/frontend/src/AppBuilder/AppCanvas/Selecto.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/Selecto.jsx
@@ -121,8 +121,6 @@ export const EditorSelecto = () => {
         }
       }
 
-      // setActiveRightSideBarTab(RIGHT_SIDE_BAR_TAB.COMPONENTS);
-      // setRightSidebarOpen(true);
       return false;
     },
     [setSelectedComponents, setActiveRightSideBarTab, getSelectedComponents]

From 58086d1ec0a04f7b93cf304db4e73efa31c26b7c Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Wed, 15 Oct 2025 16:51:40 +0530
Subject: [PATCH 036/157] fix copy paste on container, drag not happening

---
 frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
index 5cd1446d96..3774b14fc5 100644
--- a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
@@ -339,7 +339,7 @@ export default function Grid({ gridWidth, currentLayout }) {
     if (moveableRef.current) {
       safeUpdateMoveable();
     }
-  }, [temporaryHeight, boxList]);
+  }, [temporaryHeight, boxList, selectedComponents]);
 
   useEffect(() => {
     reloadGrid();

From 3e62458d2579689f9f1d5432ab3400857d4a39c3 Mon Sep 17 00:00:00 2001
From: medhansh-alt <medhansh@tooljet.com>
Date: Wed, 15 Oct 2025 18:14:05 +0530
Subject: [PATCH 037/157] updated multi-line code editor

---
 .../CodeEditor/MultiLineCodeEditor.jsx        | 288 +++++++++---------
 .../src/AppBuilder/CodeEditor/styles.scss     |  13 +-
 2 files changed, 140 insertions(+), 161 deletions(-)

diff --git a/frontend/src/AppBuilder/CodeEditor/MultiLineCodeEditor.jsx b/frontend/src/AppBuilder/CodeEditor/MultiLineCodeEditor.jsx
index fe6d576fb6..6bfafac7aa 100644
--- a/frontend/src/AppBuilder/CodeEditor/MultiLineCodeEditor.jsx
+++ b/frontend/src/AppBuilder/CodeEditor/MultiLineCodeEditor.jsx
@@ -36,8 +36,8 @@ const langSupport = Object.freeze({
 
 const MultiLineCodeEditor = (props) => {
   const {
-    darkMode = 'false',
-    height = '300', //default height set to 300px
+    darkMode,
+    height,
     initialValue,
     lang,
     className,
@@ -57,18 +57,19 @@ const MultiLineCodeEditor = (props) => {
     onInputChange, // Added this prop to immediately handle value changes
   } = props;
   const editorRef = useRef(null);
+
   const replaceIdsWithName = useStore((state) => state.replaceIdsWithName, shallow);
   const wrapperRef = useRef(null);
   const getSuggestions = useStore((state) => state.getSuggestions, shallow);
   const getServerSideGlobalResolveSuggestions = useStore(
-    (state) => state.getServerSideGlobalResolveSuggestions,
-    shallow
+      (state) => state.getServerSideGlobalResolveSuggestions,
+      shallow
   );
 
   const isInsideQueryPane = !!document.querySelector('.code-hinter-wrapper')?.closest('.query-details');
   const isInsideQueryManager = useMemo(
-    () => isInsideParent(wrapperRef?.current, 'query-manager'),
-    [wrapperRef.current]
+      () => isInsideParent(wrapperRef?.current, 'query-manager'),
+      [wrapperRef.current]
   );
 
   const context = useContext(CodeHinterContext);
@@ -92,22 +93,22 @@ const MultiLineCodeEditor = (props) => {
   // Intersection observer to detect when current line goes out of view
   useEffect(() => {
     const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.intersectionRatio < 1) {
-          setShowSuggestions(false);
-          isObserverTriggeredRef.current = true;
-          // Close autocomplete dropdown by dispatching a selection change
-          if (editorView) {
-            editorView.dispatch({
-              selection: editorView.state.selection,
-            });
+        ([entry]) => {
+          if (entry.intersectionRatio < 1) {
+            setShowSuggestions(false);
+            isObserverTriggeredRef.current = true;
+            // Close autocomplete dropdown by dispatching a selection change
+            if (editorView) {
+              editorView.dispatch({
+                selection: editorView.state.selection,
+              });
+            }
+          } else {
+            setShowSuggestions(true);
+            isObserverTriggeredRef.current = false;
           }
-        } else {
-          setShowSuggestions(true);
-          isObserverTriggeredRef.current = false;
-        }
-      },
-      { root: null, threshold: [1] }
+        },
+        { root: null, threshold: [1] }
     );
 
     currentLineObserverRef.current = observer;
@@ -132,16 +133,7 @@ const MultiLineCodeEditor = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   };
 
-  // Convert height to proper format
-  const getHeightValue = () => {
-    if (!height) return '300px'; // Default height
-    if (typeof height === 'string') {
-      return height.includes('px') ? height : `${height}px`;
-    }
-    return `${height}px`;
-  };
-
-  const heightValue = getHeightValue();
+  const heightInPx = typeof height === 'string' && height?.includes('px') ? height : `${height}px`;
 
   const theme = darkMode ? okaidia : githubLight;
   const langExtention = langSupport[lang] ?? null;
@@ -161,7 +153,7 @@ const MultiLineCodeEditor = (props) => {
 
   function autoCompleteExtensionConfig(context) {
     const hasWorkflowSuggestions =
-      workflowSuggestions?.appHints?.length > 0 || workflowSuggestions?.jsHints?.length > 0;
+        workflowSuggestions?.appHints?.length > 0 || workflowSuggestions?.jsHints?.length > 0;
     const hints = hasWorkflowSuggestions ? workflowSuggestions : getSuggestions();
     const serverHints = getServerSideGlobalResolveSuggestions(isInsideQueryManager);
 
@@ -209,8 +201,8 @@ const MultiLineCodeEditor = (props) => {
 
   const initialValueWithReplacedIds = useMemo(() => {
     if (
-      typeof initialValue === 'string' &&
-      (initialValue?.includes('components') || initialValue?.includes('queries'))
+        typeof initialValue === 'string' &&
+        (initialValue?.includes('components') || initialValue?.includes('queries'))
     ) {
       return replaceIdsWithName(initialValue);
     }
@@ -238,127 +230,123 @@ const MultiLineCodeEditor = (props) => {
   };
 
   return (
-    <div
-      className={`code-hinter-wrapper position-relative ${isInsideQueryPane ? 'code-editor-query-panel' : ''}`}
-      style={{ width: '100%' }}
-      ref={wrapperRef}
-    >
-      <div className={`${className} ${darkMode && 'cm-codehinter-dark-themed'}`}>
-        <CodeHinterBtns
-          view={editorView}
-          isPanelOpen={isSearchPanelOpen}
-          renderCopilot={() =>
-            renderCopilot?.({
-              darkMode,
-              language: lang,
-              editorRef,
-              onAiSuggestionAccept,
-            })
-          }
-        />
+      <div
+          className={`code-hinter-wrapper position-relative ${isInsideQueryPane ? 'code-editor-query-panel' : ''}`}
+          style={{ width: '100%' }}
+          ref={wrapperRef}
+      >
+        <div className={`${className} ${darkMode && 'cm-codehinter-dark-themed'}`}>
+          <CodeHinterBtns
+              view={editorView}
+              isPanelOpen={isSearchPanelOpen}
+              renderCopilot={() =>
+                  renderCopilot?.({
+                    darkMode,
+                    language: lang,
+                    editorRef,
+                    onAiSuggestionAccept,
+                  })
+              }
+          />
 
-        <CodeHinter.PopupIcon
-          callback={handleTogglePopupExapand}
-          icon="portal-open"
-          tip="Pop out code editor into a new window"
-          isMultiEditor={true}
-          isQueryManager={isInsideQueryPane}
-          position={{ height: height }}
-        />
+          <CodeHinter.PopupIcon
+              callback={handleTogglePopupExapand}
+              icon="portal-open"
+              tip="Pop out code editor into a new window"
+              isMultiEditor={true}
+              isQueryManager={isInsideQueryPane}
+              position={{height: height}}
+          />
 
-        <CodeHinter.Portal
-          isCopilotEnabled={false}
-          isOpen={isOpen}
-          callback={setIsOpen}
-          componentName={componentName}
-          key={componentName}
-          forceUpdate={forceUpdate}
-          optionalProps={{ styles: { height: height ? height : '300' }, cls: '' }}
-          darkMode={darkMode}
-          selectors={{ className: 'preview-block-portal' }}
-          dragResizePortal={true}
-          callgpt={null}
-        >
-          <ErrorBoundary>
-            <div
-              className="codehinter-container w-100"
-              data-cy={`${cyLabel}-input-field`}
-              style={{ height: heightValue }}
-            >
-              <CodeMirror
-                ref={editorRef}
-                value={initialValueWithReplacedIds}
-                placeholder={placeholder}
-                height={heightValue}
-                maxHeight={heightValue}
-                width="100%"
-                theme={theme}
-                extensions={[
-                  langExtention,
-                  search({
-                    createPanel: handleSearchPanel,
-                  }),
-                  javascriptLanguage.data.of({
-                    autocomplete: overRideFunction,
-                  }),
-                  python().language.data.of({
-                    autocomplete: overRideFunction,
-                  }),
-                  sql().language.data.of({
-                    autocomplete: overRideFunction,
-                  }),
-                  sass().language.data.of({
-                    autocomplete: sassCompletionSource,
-                  }),
-                  autocompletion({
-                    override: [overRideFunction],
-                    activateOnTyping: true,
-                    compareCompletions: (a, b) => {
-                      return a.section.rank - b.section.rank && a.label.localeCompare(b.label);
-                    },
-                  }),
-                  customTabKeymap,
-                  keymap.of([...customKeyMaps]),
-                ]}
-                onChange={handleChange}
-                onBlur={handleOnBlur}
-                basicSetup={setupConfig}
-                style={{
-                  overflowY: 'auto',
-                  height: heightValue,
-                }}
-                className={`codehinter-multi-line-input ${isInsideQueryPane ? 'code-editor-query-panel' : ''}`}
-                indentWithTab={false}
-                readOnly={readOnly}
-                editable={editable}
-                onCreateEditor={(view) => {
-                  setEditorView(view);
-                  if (setCodeEditorView) {
-                    setCodeEditorView(view);
-                  }
-                }}
-                onUpdate={(view) => {
-                  setIsSearchPanelOpen(searchPanelOpen(view.state));
-                  updateCurrentLineObserver(view);
-                }}
-              />
-            </div>
-            {showPreview && (
-              <div className="multiline-previewbox-wrapper">
-                <PreviewBox
-                  currentValue={currentValueRef.current}
-                  validationSchema={null}
-                  setErrorStateActive={() => null}
-                  componentId={null}
-                  setErrorMessage={() => null}
+          <CodeHinter.Portal
+              isCopilotEnabled={false}
+              isOpen={isOpen}
+              callback={setIsOpen}
+              componentName={componentName}
+              key={componentName}
+              forceUpdate={forceUpdate}
+              optionalProps={{ styles: { height: 300 }, cls: '' }}
+              darkMode={darkMode}
+              selectors={{ className: 'preview-block-portal' }}
+              dragResizePortal={true}
+              callgpt={null}
+          >
+            <ErrorBoundary>
+              <div className="codehinter-container w-100 " data-cy={`${cyLabel}-input-field`} style={{ height: '100%' }}>
+                <CodeMirror
+                    ref={editorRef}
+                    value={initialValueWithReplacedIds}
+                    placeholder={placeholder}
+                    height={heightInPx}
+                    minHeight={heightInPx}
+                    {...(isInsideQueryPane ? { maxHeight: '100%' } : {})}
+                    width="100%"
+                    theme={theme}
+                    extensions={[
+                      langExtention,
+                      search({
+                        createPanel: handleSearchPanel,
+                      }),
+                      javascriptLanguage.data.of({
+                        autocomplete: overRideFunction,
+                      }),
+                      python().language.data.of({
+                        autocomplete: overRideFunction,
+                      }),
+                      sql().language.data.of({
+                        autocomplete: overRideFunction,
+                      }),
+                      sass().language.data.of({
+                        autocomplete: sassCompletionSource,
+                      }),
+                      autocompletion({
+                        override: [overRideFunction],
+                        activateOnTyping: true,
+                        compareCompletions: (a, b) => {
+                          return a.section.rank - b.section.rank && a.label.localeCompare(b.label);
+                        },
+                      }),
+                      customTabKeymap,
+                      keymap.of([...customKeyMaps]),
+                    ]}
+                    onChange={handleChange}
+                    onBlur={handleOnBlur}
+                    basicSetup={setupConfig}
+                    style={{
+                      overflowY: 'auto',
+                    }}
+                    className={`codehinter-multi-line-input ${isInsideQueryPane ? 'code-editor-query-panel' : ''}`}
+                    indentWithTab={false}
+                    readOnly={readOnly}
+                    editable={editable} //for transformations in query manager
+                    onCreateEditor={(view) => {
+                      setEditorView(view);
+                      if (setCodeEditorView) {
+                        setCodeEditorView(view);
+                      }
+                    }}
+                    onUpdate={(view) => {
+                      setIsSearchPanelOpen(searchPanelOpen(view.state));
+                      updateCurrentLineObserver(view);
+                    }}
                 />
               </div>
-            )}
-          </ErrorBoundary>
-        </CodeHinter.Portal>
+              {showPreview && (
+                  <div className="multiline-previewbox-wrapper">
+                    <PreviewBox
+                        currentValue={currentValueRef.current}
+                        validationSchema={null}
+                        setErrorStateActive={() => null}
+                        componentId={null}
+                        setErrorMessage={() => null}
+                    />
+                  </div>
+              )}
+            </ErrorBoundary>
+          </CodeHinter.Portal>
+        </div>
       </div>
-    </div>
   );
 };
 
-export default MultiLineCodeEditor;
+export default MultiLineCodeEditor;
\ No newline at end of file
diff --git a/frontend/src/AppBuilder/CodeEditor/styles.scss b/frontend/src/AppBuilder/CodeEditor/styles.scss
index a2b65962b2..892a97cfb7 100644
--- a/frontend/src/AppBuilder/CodeEditor/styles.scss
+++ b/frontend/src/AppBuilder/CodeEditor/styles.scss
@@ -439,16 +439,9 @@
 }
 
 .editor-container {
-    .codehinter-container{
-        height: 100% !important;
-    }
-    .codehinter-multi-line-input {
-        height: 100% !important;
-    }
     .codehinter-input .cm-editor {
         max-height: auto !important;
         justify-content: center;
-        height: 100% !important ;
     }
 }
 
@@ -497,8 +490,6 @@
     .codehinter-input {
         height: 100%;
         border: none !important;
-
-
     }
 }
 
@@ -506,7 +497,7 @@
     width: 42px !important;
     background-color: var(--interactive-default) !important;
     color: var(--text-disabled) !important;
-    border-right: 1px solid var(--slate5) !important;
+    border-right: 1px solid var(--borders-disabled-on-white) !important;
     align-self: stretch !important;
     height: auto !important;
 }
@@ -516,7 +507,7 @@
     .cm-editor {
         border-bottom-right-radius: 4px !important;
         border-bottom-left-radius: 4px !important;
-        border-color: var(--slate5);
+        border-color: var(--borders-disabled-on-white);
         border-top-right-radius: 0px !important;
         border-top-left-radius: 0px !important;
         justify-content: center;

From 7138237b3669689208d7eabbb3f56a1ca1fda6a0 Mon Sep 17 00:00:00 2001
From: medhansh-alt <medhansh@tooljet.com>
Date: Wed, 15 Oct 2025 18:20:15 +0530
Subject: [PATCH 038/157] updated ee-server submodule

---
 server/ee                |  2 +-
 server/package-lock.json | 24 ------------------------
 server/package.json      |  3 +--
 3 files changed, 2 insertions(+), 27 deletions(-)

diff --git a/server/ee b/server/ee
index d47298f779..9be95ce62d 160000
--- a/server/ee
+++ b/server/ee
@@ -1 +1 @@
-Subproject commit d47298f779d6d848f9be9bc6560a478009b3c3d1
+Subproject commit 9be95ce62d520d2c1c4fe410e103236e2cd01684
diff --git a/server/package-lock.json b/server/package-lock.json
index e3653c6087..4954ec2bb3 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -59,7 +59,6 @@
         "compression": "^1.8.0",
         "cookie-parser": "^1.4.7",
         "cron-validator": "^1.3.1",
-        "cross-env": "^10.1.0",
         "dotenv": "^16.5.0",
         "eventsource-parser": "^3.0.3",
         "express-http-proxy": "^2.1.1",
@@ -1874,12 +1873,6 @@
         "tslib": "^2.4.0"
       }
     },
-    "node_modules/@epic-web/invariant": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@epic-web/invariant/-/invariant-1.0.0.tgz",
-      "integrity": "sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==",
-      "license": "MIT"
-    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.23.1",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.23.1.tgz",
@@ -12317,23 +12310,6 @@
       "integrity": "sha512-wGcJ9FCy65iaU6egSH8b5dZYJF7GU/3Jh06wzaT9lsa5dbqExjljmu+0cJ8cpKn+vUyZa/EM4WAxeLR6SypJXw==",
       "license": "MIT"
     },
-    "node_modules/cross-env": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-10.1.0.tgz",
-      "integrity": "sha512-GsYosgnACZTADcmEyJctkJIoqAhHjttw7RsFrVoJNXbsWWqaq6Ym+7kZjq6mS45O0jij6vtiReppKQEtqWy6Dw==",
-      "license": "MIT",
-      "dependencies": {
-        "@epic-web/invariant": "^1.0.0",
-        "cross-spawn": "^7.0.6"
-      },
-      "bin": {
-        "cross-env": "dist/bin/cross-env.js",
-        "cross-env-shell": "dist/bin/cross-env-shell.js"
-      },
-      "engines": {
-        "node": ">=20"
-      }
-    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
diff --git a/server/package.json b/server/package.json
index 452ea90adc..23f46809a7 100644
--- a/server/package.json
+++ b/server/package.json
@@ -11,7 +11,7 @@
     "lint": "eslint .  '**/*.ts'",
     "format": "eslint . --fix '**/*.ts'",
     "start": "nest start",
-    "start:dev": "cross-env NODE_ENV=development nest start --watch",
+    "start:dev": "NODE_ENV=development nest start --watch",
     "start:debug": "nest start --debug --watch",
     "start:prod": "NODE_ENV=production node dist/src/main",
     "test:record": "NODE_ENV=test POLLY_MODE=record jest --config jest.config.ts --detectOpenHandles",
@@ -97,7 +97,6 @@
     "compression": "^1.8.0",
     "cookie-parser": "^1.4.7",
     "cron-validator": "^1.3.1",
-    "cross-env": "^10.1.0",
     "dotenv": "^16.5.0",
     "eventsource-parser": "^3.0.3",
     "express-http-proxy": "^2.1.1",

From 27b7aef69ad52c9978386aa1cde1f4c5a5f88b29 Mon Sep 17 00:00:00 2001
From: Rohan Lahori <64496391+rohanlahori@users.noreply.github.com>
Date: Wed, 15 Oct 2025 21:26:50 +0530
Subject: [PATCH 039/157] Hotfix/Azure OIDC Group sync fixes (#14077)

* azure oidc changes

* chore: update version to 3.20.22-lts across all components

---------

Co-authored-by: gsmithun4 <gsmithun4@gmail.com>
---
 .version                           |  2 +-
 frontend/.version                  |  2 +-
 server/.version                    |  2 +-
 server/src/helpers/utils.helper.ts | 14 ++++++++++++++
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/.version b/.version
index f4e635c035..cd5e02fb32 100644
--- a/.version
+++ b/.version
@@ -1 +1 @@
-3.20.21-lts
+3.20.22-lts
diff --git a/frontend/.version b/frontend/.version
index f4e635c035..cd5e02fb32 100644
--- a/frontend/.version
+++ b/frontend/.version
@@ -1 +1 @@
-3.20.21-lts
+3.20.22-lts
diff --git a/server/.version b/server/.version
index f4e635c035..cd5e02fb32 100644
--- a/server/.version
+++ b/server/.version
@@ -1 +1 @@
-3.20.21-lts
+3.20.22-lts
diff --git a/server/src/helpers/utils.helper.ts b/server/src/helpers/utils.helper.ts
index 2e5ba3b402..3ad755482b 100644
--- a/server/src/helpers/utils.helper.ts
+++ b/server/src/helpers/utils.helper.ts
@@ -511,3 +511,17 @@ export function normalizeEnvSlug(key: string): string {
   // Convert `my-workspace` → `my_workspace`
   return key.replace(/-/g, '_');
 }
+export function isAzureEntraIdIssuer(issuer?: string): boolean {
+  if (!issuer) return false;
+  const microsoftDomains = [
+    '.microsoftonline.com',
+    '.microsoftonline.us',
+    '.chinacloudapi.cn',
+    '.microsoftonline.de',
+    '.b2clogin.com',
+  ];
+  if (issuer.startsWith('https://sts.windows.net/')) {
+    return true;
+  }
+  return microsoftDomains.some((domain) => issuer.includes(domain));
+}

From 274d532c9e00313a156e32b0ec3ad1a68d5b6127 Mon Sep 17 00:00:00 2001
From: Adish M <44204658+adishM98@users.noreply.github.com>
Date: Wed, 15 Oct 2025 21:28:51 +0530
Subject: [PATCH 040/157] =?UTF-8?q?=F0=9F=9A=80=20chore:=20update=20submod?=
 =?UTF-8?q?ules=20to=20latest=20lts-3.16=20after=20auto-merge=20(#14345)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: gsmithun4 <3417097+gsmithun4@users.noreply.github.com>
---
 frontend/ee | 2 +-
 server/ee   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/ee b/frontend/ee
index 4c9743f485..ea751ada29 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit 4c9743f485d77aa186c29729abd743e708536e79
+Subproject commit ea751ada293469f8fdf5e3cb62b39b60c60071ef
diff --git a/server/ee b/server/ee
index 9be95ce62d..1baf0c1f3b 160000
--- a/server/ee
+++ b/server/ee
@@ -1 +1 @@
-Subproject commit 9be95ce62d520d2c1c4fe410e103236e2cd01684
+Subproject commit 1baf0c1f3b340048971548bd0b744e3be143df2b

From d22389396d4da12377e119e134530ee993a0425f Mon Sep 17 00:00:00 2001
From: Manish Kushare <37823141+manishkushare@users.noreply.github.com>
Date: Thu, 16 Oct 2025 11:12:17 +0530
Subject: [PATCH 041/157] Adding scrollbar to canvas (#14347)

---
 .../src/AppBuilder/AppCanvas/AppCanvas.jsx    | 41 +++++++++++--
 .../src/AppBuilder/AppCanvas/appCanvas.scss   | 60 ++++++++++++-------
 2 files changed, 74 insertions(+), 27 deletions(-)

diff --git a/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx b/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx
index 3e6e6ed37b..d96eb44c1a 100644
--- a/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx
@@ -30,6 +30,9 @@ import { debounce } from 'lodash';
 export const AppCanvas = ({ appId, switchDarkMode, darkMode }) => {
   const { moduleId, isModuleMode, appType } = useModuleContext();
   const canvasContainerRef = useRef();
+  const scrollTimeoutRef = useRef(null);
+  const canvasContentRef = useRef(null);
+  const [isScrolling, setIsScrolling] = useState(false);
   const handleCanvasContainerMouseUp = useStore((state) => state.handleCanvasContainerMouseUp, shallow);
   const resolveReferences = useStore((state) => state.resolveReferences);
   const canvasHeight = useStore((state) => state.appStore.modules[moduleId].canvasHeight);
@@ -121,8 +124,8 @@ export const AppCanvas = ({ appId, switchDarkMode, darkMode }) => {
       currentMode === 'view'
         ? computeViewerBackgroundColor(isAppDarkMode, canvasBgColor)
         : !isAppDarkMode
-        ? '#EBEBEF'
-        : '#2F3C4C';
+          ? '#EBEBEF'
+          : '#2F3C4C';
 
     if (isModuleMode) {
       return {
@@ -151,6 +154,34 @@ export const AppCanvas = ({ appId, switchDarkMode, darkMode }) => {
     localStorage.setItem('isPagesSidebarPinned', JSON.stringify(newValue));
   }, [isViewerSidebarPinned]);
 
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolling(true);
+
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+
+      scrollTimeoutRef.current = setTimeout(() => {
+        setIsScrolling(false);
+      }, 600);
+    };
+
+    const canvasContent = canvasContentRef.current;
+    if (canvasContent) {
+      canvasContent.addEventListener('scroll', handleScroll);
+    }
+
+    return () => {
+      if (canvasContent) {
+        canvasContent.removeEventListener('scroll', handleScroll);
+      }
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+    };
+  }, []);
+
   function getMinWidth() {
     if (isModuleMode) return '100%';
 
@@ -227,14 +258,16 @@ export const AppCanvas = ({ appId, switchDarkMode, darkMode }) => {
             />
           )}
           <div
+            ref={canvasContentRef}
             style={{
               minWidth: getMinWidth(),
-              scrollbarWidth: 'none',
               overflow: 'auto',
               width: currentMode === 'view' ? `calc(100% - ${isViewerSidebarPinned ? '0px' : '0px'})` : '100%',
               ...(appType === 'module' && isModuleMode && { height: 'inherit' }),
             }}
-            className={`app-${appId} _tooljet-page-${getPageId()} canvas-content`}
+            className={cx(`app-${appId} _tooljet-page-${getPageId()} canvas-content scrollbar`, {
+              'scrollbar-hidden': !isScrolling,
+            })}
           >
             {currentMode === 'edit' && (
               <AutoComputeMobileLayoutAlert currentLayout={currentLayout} darkMode={isAppDarkMode} />
diff --git a/frontend/src/AppBuilder/AppCanvas/appCanvas.scss b/frontend/src/AppBuilder/AppCanvas/appCanvas.scss
index f6bc774eea..cf3a6155da 100644
--- a/frontend/src/AppBuilder/AppCanvas/appCanvas.scss
+++ b/frontend/src/AppBuilder/AppCanvas/appCanvas.scss
@@ -1,5 +1,5 @@
-.canvas-container{
-    &:focus-visible{
+.canvas-container {
+    &:focus-visible {
         outline: none;
     }
 
@@ -23,12 +23,12 @@
 //     }
 //   }
 
-.empty-box-cont{
+.empty-box-cont {
     display: flex;
     justify-content: center;
     margin: unset !important;
 
-    .dotted-cont{
+    .dotted-cont {
         border: 1px dashed var(--indigo8);
         border-radius: 6px;
         margin: 0 10px 0 10px;
@@ -38,20 +38,20 @@
         margin-bottom: 10px;
     }
 
-    .title-text{
+    .title-text {
         margin-top: 10px;
         font-size: 16px;
         font-weight: 600px;
-        
+
     }
 
-    .title-desc{
+    .title-desc {
         font-size: 14px;
         margin-top: 5px;
         font-weight: 400;
     }
 
-    .box-link{
+    .box-link {
         display: flex;
         margin-top: 10px;
 
@@ -60,8 +60,8 @@
             width: auto;
         }
 
-        .link-but{
-            
+        .link-but {
+
             font-weight: 500;
             font-size: 14px;
             color: #3E63DD;
@@ -70,26 +70,40 @@
 }
 
 *:focus-visible {
-    outline: none;  // Rewriting it to replace outline coming from browser styles
-  }
+    outline: none; // Rewriting it to replace outline coming from browser styles
+}
 
 //[Container-widget]Show scrollbar only on hover
-  .real-canvas:not(.has-no-scroll) {
+.real-canvas:not(.has-no-scroll) {
     overflow: hidden auto;
     scrollbar-width: none;
+
     &:hover {
-      scrollbar-width: auto;
+        scrollbar-width: auto;
     }
-   }
+}
 
 
-   // This is required to maintain the height of the subcontainer when dragging a widget inside it
+// This is required to maintain the height of the subcontainer when dragging a widget inside it
 .real-canvas.is-child-being-dragged:before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 500%;
-  overflow: hidden;
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 500%;
+    overflow: hidden;
+}
+
+
+.scrollbar-hidden {
+    scrollbar-width: none;
+    /* Firefox */
+    -ms-overflow-style: none;
+    /* IE and Edge */
+
+    &::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+    }
 }
\ No newline at end of file

From 46def5ee892c45dd1a0eb10c42b8f68ea62ab7a0 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <133095394+nakulnagargade@users.noreply.github.com>
Date: Thu, 16 Oct 2025 11:13:24 +0530
Subject: [PATCH 042/157] chore: Fix module being empty on editor (#14341)

---
 frontend/ee                                          |  2 +-
 frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx      | 10 +++++++---
 frontend/src/AppBuilder/AppCanvas/HotkeyProvider.jsx |  3 ++-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/ee b/frontend/ee
index 4c9743f485..ea751ada29 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit 4c9743f485d77aa186c29729abd743e708536e79
+Subproject commit ea751ada293469f8fdf5e3cb62b39b60c60071ef
diff --git a/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx b/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx
index d96eb44c1a..15ce53eb60 100644
--- a/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx
@@ -74,7 +74,6 @@ export const AppCanvas = ({ appId, switchDarkMode, darkMode }) => {
     }),
     shallow
   );
-
   const showHeader = !globalSettings?.hideHeader;
   const { definition: { properties = {} } = {} } = pageSettings ?? {};
   const { position, disableMenu, showOnDesktop } = properties ?? {};
@@ -273,9 +272,14 @@ export const AppCanvas = ({ appId, switchDarkMode, darkMode }) => {
               <AutoComputeMobileLayoutAlert currentLayout={currentLayout} darkMode={isAppDarkMode} />
             )}
             <DeleteWidgetConfirmation darkMode={isAppDarkMode} />
-            <HotkeyProvider mode={currentMode} canvasMaxWidth={canvasMaxWidth} currentLayout={currentLayout}>
+            <HotkeyProvider
+              mode={currentMode}
+              canvasMaxWidth={canvasMaxWidth}
+              currentLayout={currentLayout}
+              isModuleMode={isModuleMode}
+            >
               {environmentLoadingState !== 'loading' && (
-                <div>
+                <div className={cx({ 'h-100': isModuleMode })}>
                   <Container
                     id={moduleId}
                     gridWidth={gridWidth}
diff --git a/frontend/src/AppBuilder/AppCanvas/HotkeyProvider.jsx b/frontend/src/AppBuilder/AppCanvas/HotkeyProvider.jsx
index 018383c61f..216de08e21 100644
--- a/frontend/src/AppBuilder/AppCanvas/HotkeyProvider.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/HotkeyProvider.jsx
@@ -6,7 +6,7 @@ import useKeyHooks from '@/_hooks/useKeyHooks';
 import { shallow } from 'zustand/shallow';
 import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
 
-export const HotkeyProvider = ({ children, mode, currentLayout, canvasMaxWidth }) => {
+export const HotkeyProvider = ({ children, mode, currentLayout, canvasMaxWidth, isModuleMode }) => {
   const { isModuleEditor } = useModuleContext();
   const canvasRef = useRef(null);
   const focusedParentId = useStore((state) => state.focusedParentId, shallow);
@@ -138,6 +138,7 @@ export const HotkeyProvider = ({ children, mode, currentLayout, canvasMaxWidth }
         maxWidth: canvasMaxWidth,
         margin: '0 auto',
         transform: 'translateZ(0)',
+        ...(isModuleMode && { height: '100%' }),
       }}
     >
       {children}

From 7e17003703d41ca869e433919fbe5cf91a5f842f Mon Sep 17 00:00:00 2001
From: emidhun <midhun752@gmail.com>
Date: Thu, 16 Oct 2025 11:28:27 +0530
Subject: [PATCH 043/157] Update real events dependency

---
 .../platform/ceTestcases/apps/appExport.cy.js |   9 +-
 cypress-tests/package-lock.json               | 307 +++++-------------
 cypress-tests/package.json                    |   5 +-
 3 files changed, 81 insertions(+), 240 deletions(-)

diff --git a/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appExport.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appExport.cy.js
index 26a80bfb52..2ffe613f72 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appExport.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appExport.cy.js
@@ -38,13 +38,12 @@ describe("App Export", () => {
       dsName: fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", ""),
     };
     cy.exec("mkdir -p ./cypress/downloads/");
-    cy.exec("cd ./cypress/downloads/ && rm -rf *");
+    cy.exec("cd ./cypress/downloads/ && rm -rf *", { failOnNonZeroExit: false });
     cy.exec("mkdir -p ./cypress/downloads/");
     cy.wait(3000);
 
     cy.apiLogin();
     cy.apiCreateWorkspace(data.workspaceName, data.workspaceSlug);
-    cy.apiLogout();
   });
 
   it("Verify the elements of export dialog box", () => {
@@ -60,6 +59,8 @@ describe("App Export", () => {
     cy.get(importSelectors.importAppButton).click();
     cy.wait(3000);
     cy.backToApps();
+    cy.reload()
+    cy.pause()
 
     // Select the app card option to export the app
     selectAppCardOption(
@@ -201,12 +202,12 @@ describe("App Export", () => {
     });
   });
 
-  it.skip("Verify 'Export app' functionality of an application inside app editor", () => {
+  it.only("Verify 'Export app' functionality of an application inside app editor", () => {
     data.appName2 = `${fake.companyName}-App`;
     cy.apiCreateApp(data.appName2);
     cy.openApp(data.appName2);
 
-    cy.dragAndDropWidget("Text Input", 50, 50);
+    cy.dragAndDropWidget("Text Input", 200, 200);
 
     cy.get('[data-cy="left-sidebar-settings-button"]').click();
     cy.get('[data-cy="button-user-status-change"]').click();
diff --git a/cypress-tests/package-lock.json b/cypress-tests/package-lock.json
index e869477d52..2eb3c29240 100644
--- a/cypress-tests/package-lock.json
+++ b/cypress-tests/package-lock.json
@@ -8,6 +8,7 @@
       "name": "cypress-tests",
       "version": "1.0.0",
       "dependencies": {
+        "cypress-real-events": "^1.15.0",
         "moment": "^2.29.4",
         "node-xlsx": "^0.4.0",
         "pdf-parse": "^1.1.1",
@@ -17,7 +18,7 @@
         "@cypress/code-coverage": "^3.12.12",
         "@cypress/webpack-preprocessor": "^5.12.0",
         "@faker-js/faker": "^7.3.0",
-        "cypress": "^15.0.0",
+        "cypress": "^15.4.0",
         "cypress-mailhog": "^2.5.0"
       }
     },
@@ -1591,7 +1592,6 @@
       "version": "3.0.9",
       "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.9.tgz",
       "integrity": "sha512-I3l7FdGRXluAS44/0NguwWlO83J18p0vlr2FYHrJkWdNYhgVoiYo61IXPqaOsL+vNxU1ZqMACzItGK3/KKDsdw==",
-      "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "aws-sign2": "~0.7.0",
@@ -1638,7 +1638,6 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@cypress/xvfb/-/xvfb-1.2.4.tgz",
       "integrity": "sha512-skbBzPggOVYCbnGgV+0dmBdW/s77ZkAOXIC1knS8NagwDjBrNC1LuXtQJeiN6l+m7lzmHtaoUw/ctJKdqkG57Q==",
-      "dev": true,
       "dependencies": {
         "debug": "^3.1.0",
         "lodash.once": "^4.1.1"
@@ -1648,7 +1647,6 @@
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
       "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-      "dev": true,
       "dependencies": {
         "ms": "^2.1.1"
       }
@@ -1844,25 +1842,28 @@
       "version": "16.18.119",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.119.tgz",
       "integrity": "sha512-ia7V9a2FnhUFfetng4/sRPBMTwHZUkPFY736rb1cg9AgG7MZdR97q7/nLR9om+sq5f1la9C857E0l/nrI0RiFQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/sinonjs__fake-timers": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz",
-      "integrity": "sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g==",
-      "dev": true
+      "integrity": "sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g=="
     },
     "node_modules/@types/sizzle": {
       "version": "2.3.9",
       "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.9.tgz",
-      "integrity": "sha512-xzLEyKB50yqCUPUJkIsrVvoWNfFUbIZI+RspLWt8u+tIW/BetMBZtgV2LY/2o+tYH8dRvQ+eoPf3NdhQCcLE2w==",
-      "dev": true
+      "integrity": "sha512-xzLEyKB50yqCUPUJkIsrVvoWNfFUbIZI+RspLWt8u+tIW/BetMBZtgV2LY/2o+tYH8dRvQ+eoPf3NdhQCcLE2w=="
+    },
+    "node_modules/@types/tmp": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/@types/tmp/-/tmp-0.2.6.tgz",
+      "integrity": "sha512-chhaNf2oKHlRkDGt+tiKE2Z5aJ6qalm7Z9rlLdBwmOiAAf09YQvvoLXjWK4HWPF1xU/fqvMgfNfpVoBscA/tKA==",
+      "license": "MIT"
     },
     "node_modules/@types/yauzl": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
       "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "@types/node": "*"
@@ -2060,7 +2061,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
       "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
-      "dev": true,
       "dependencies": {
         "clean-stack": "^2.0.0",
         "indent-string": "^4.0.0"
@@ -2121,7 +2121,6 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
       "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -2130,7 +2129,6 @@
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
       "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
-      "dev": true,
       "dependencies": {
         "type-fest": "^0.21.3"
       },
@@ -2145,7 +2143,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -2154,7 +2151,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -2181,7 +2177,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz",
       "integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -2222,7 +2217,6 @@
       "version": "0.2.6",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
       "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "safer-buffer": "~2.1.0"
@@ -2232,7 +2226,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
       "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.8"
@@ -2242,29 +2235,20 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
       "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/async": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
-      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
-      "dev": true
-    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
       "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
-      "dev": true,
       "engines": {
         "node": ">= 4.0.0"
       }
@@ -2273,7 +2257,6 @@
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
       "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==",
-      "dev": true,
       "license": "Apache-2.0",
       "engines": {
         "node": "*"
@@ -2283,7 +2266,6 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.13.2.tgz",
       "integrity": "sha512-lHe62zvbTB5eEABUVi/AwVh0ZKY9rMMDhmm+eeyuuUQbQ3+J+fONVQOZyj+DdrvD4BY33uYniyRJ4UJIaSKAfw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/babel-loader": {
@@ -2356,7 +2338,6 @@
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
       "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -2376,7 +2357,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
       "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
         "tweetnacl": "^0.14.3"
@@ -2385,8 +2365,7 @@
     "node_modules/blob-util": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/blob-util/-/blob-util-2.0.2.tgz",
-      "integrity": "sha512-T7JQa+zsXXEa6/8ZhHcQEW1UFfVM49Ts65uBkFL6fz2QmrElqmbajIDJvuA0tEhRe5eIjpV9ZF+0RfZR9voJFQ==",
-      "dev": true
+      "integrity": "sha512-T7JQa+zsXXEa6/8ZhHcQEW1UFfVM49Ts65uBkFL6fz2QmrElqmbajIDJvuA0tEhRe5eIjpV9ZF+0RfZR9voJFQ=="
     },
     "node_modules/bluebird": {
       "version": "3.7.1",
@@ -2452,7 +2431,6 @@
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
       "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -2476,7 +2454,6 @@
       "version": "0.2.13",
       "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
       "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
-      "dev": true,
       "engines": {
         "node": "*"
       }
@@ -2492,7 +2469,6 @@
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/cachedir/-/cachedir-2.4.0.tgz",
       "integrity": "sha512-9EtFOZR8g22CL7BWjJ9BUx1+A/djkofnyW3aOXZORNW2kxoUpx2h+uN2cOqwPmFhnpVmxg+KW2OjOSgChTEvsQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -2516,7 +2492,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
       "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -2530,7 +2505,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
       "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.2",
@@ -2576,14 +2550,12 @@
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
       "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
-      "dev": true,
       "license": "Apache-2.0"
     },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -2595,15 +2567,6 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/check-more-types": {
-      "version": "2.24.0",
-      "resolved": "https://registry.npmjs.org/check-more-types/-/check-more-types-2.24.0.tgz",
-      "integrity": "sha512-Pj779qHxV2tuapviy1bSZNEL1maXr13bPYpsvSDB68HlYcYuhlDrmGd63i0JHMCLKzc7rUSNIrpdJlhVlNwrxA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
@@ -2618,7 +2581,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.1.0.tgz",
       "integrity": "sha512-HutrvTNsF48wnxkzERIXOe5/mlcfFcbfCmwcg6CJnizbSue78AbDt+1cgl26zwn61WFxhcPykPfZrbqjGmBb4A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -2633,7 +2595,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
       "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -2642,7 +2603,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
       "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
-      "dev": true,
       "dependencies": {
         "restore-cursor": "^3.1.0"
       },
@@ -2654,7 +2614,6 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.1.tgz",
       "integrity": "sha512-w0q/enDHhPLq44ovMGdQeeDLvwxwavsJX7oQGYt/LrBlYsyaxyDnp6z3QzFut/6kLLKnlcUVJLrpB7KBfgG/RA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "string-width": "^4.2.0"
@@ -2670,7 +2629,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz",
       "integrity": "sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==",
-      "dev": true,
       "dependencies": {
         "slice-ansi": "^3.0.0",
         "string-width": "^4.2.0"
@@ -2711,7 +2669,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -2722,20 +2679,17 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/colorette": {
       "version": "2.0.20",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
-      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
-      "dev": true
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w=="
     },
     "node_modules/colors": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
       "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "engines": {
@@ -2746,7 +2700,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "delayed-stream": "~1.0.0"
@@ -2759,7 +2712,6 @@
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
       "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -2775,7 +2727,6 @@
       "version": "1.8.2",
       "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz",
       "integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==",
-      "dev": true,
       "engines": {
         "node": ">=4.0.0"
       }
@@ -2816,14 +2767,12 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
       "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "dev": true,
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -2834,10 +2783,9 @@
       }
     },
     "node_modules/cypress": {
-      "version": "15.0.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-15.0.0.tgz",
-      "integrity": "sha512-OH5Srk10qTzHYYt3BsP9V1DPYIAzms55s3xQn4mGmYO4k6pi25MCajDyPbiULfNDhNcthNQ2xmYvu1JdeEw1Hw==",
-      "dev": true,
+      "version": "15.4.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-15.4.0.tgz",
+      "integrity": "sha512-+GC/Y/LXAcaMCzfuM7vRx5okRmonceZbr0ORUAoOrZt/5n2eGK8yh04bok1bWSjZ32wRHrZESqkswQ6biArN5w==",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -2845,13 +2793,13 @@
         "@cypress/xvfb": "^1.2.4",
         "@types/sinonjs__fake-timers": "8.1.1",
         "@types/sizzle": "^2.3.2",
+        "@types/tmp": "^0.2.3",
         "arch": "^2.2.0",
         "blob-util": "^2.0.2",
         "bluebird": "^3.7.2",
         "buffer": "^5.7.1",
         "cachedir": "^2.3.0",
         "chalk": "^4.1.0",
-        "check-more-types": "^2.24.0",
         "ci-info": "^4.1.0",
         "cli-cursor": "^3.1.0",
         "cli-table3": "0.6.1",
@@ -2866,10 +2814,8 @@
         "extract-zip": "2.0.1",
         "figures": "^3.2.0",
         "fs-extra": "^9.1.0",
-        "getos": "^3.2.1",
         "hasha": "5.2.2",
         "is-installed-globally": "~0.4.0",
-        "lazy-ass": "^1.6.0",
         "listr2": "^3.8.3",
         "lodash": "^4.17.21",
         "log-symbols": "^4.0.0",
@@ -2881,6 +2827,7 @@
         "request-progress": "^3.0.0",
         "semver": "^7.7.1",
         "supports-color": "^8.1.1",
+        "systeminformation": "5.27.7",
         "tmp": "~0.2.4",
         "tree-kill": "1.2.2",
         "untildify": "^4.0.0",
@@ -2890,7 +2837,7 @@
         "cypress": "bin/cypress"
       },
       "engines": {
-        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+        "node": "^20.1.0 || ^22.0.0 || >=24.0.0"
       }
     },
     "node_modules/cypress-mailhog": {
@@ -2900,17 +2847,24 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cypress-real-events": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/cypress-real-events/-/cypress-real-events-1.15.0.tgz",
+      "integrity": "sha512-in98xxTnnM9Z7lZBvvVozm99PBT2eEOjXRG5LKWyYvQnj9mGWXMiPNpfw7e7WiraBFh7XlXIxnE9Cu5o+52kQQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "cypress": "^4.x || ^5.x || ^6.x || ^7.x || ^8.x || ^9.x || ^10.x || ^11.x || ^12.x || ^13.x || ^14.x || ^15.x"
+      }
+    },
     "node_modules/cypress/node_modules/bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
-      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
-      "dev": true
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
     },
     "node_modules/cypress/node_modules/semver": {
       "version": "7.7.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
       "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
-      "dev": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -2923,7 +2877,6 @@
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
       "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -2938,7 +2891,6 @@
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
       "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "assert-plus": "^1.0.0"
@@ -2950,8 +2902,7 @@
     "node_modules/dayjs": {
       "version": "1.11.13",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
-      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
-      "dev": true
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
     },
     "node_modules/debug": {
       "version": "4.3.7",
@@ -2997,7 +2948,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.4.0"
@@ -3019,7 +2969,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
       "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.1",
@@ -3034,7 +2983,6 @@
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
       "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "jsbn": "~0.1.0",
@@ -3050,14 +2998,12 @@
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "node_modules/end-of-stream": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
       "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
-      "dev": true,
       "dependencies": {
         "once": "^1.4.0"
       }
@@ -3080,7 +3026,6 @@
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz",
       "integrity": "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==",
-      "dev": true,
       "dependencies": {
         "ansi-colors": "^4.1.1",
         "strip-ansi": "^6.0.1"
@@ -3093,7 +3038,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
       "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -3103,7 +3047,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -3120,7 +3063,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
       "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0"
@@ -3133,7 +3075,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
       "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -3164,7 +3105,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -3242,8 +3182,7 @@
     "node_modules/eventemitter2": {
       "version": "6.4.7",
       "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.7.tgz",
-      "integrity": "sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==",
-      "dev": true
+      "integrity": "sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg=="
     },
     "node_modules/events": {
       "version": "3.3.0",
@@ -3259,7 +3198,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
       "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
-      "dev": true,
       "dependencies": {
         "cross-spawn": "^7.0.0",
         "get-stream": "^5.0.0",
@@ -3282,7 +3220,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/executable/-/executable-4.1.1.tgz",
       "integrity": "sha512-8iA79xD3uAch729dUG8xaaBBFGaEa0wdD2VkYLFHwlqosEj/jT66AzcreRDSgV7ehnNLBW2WR5jIXwGKjVdTLg==",
-      "dev": true,
       "dependencies": {
         "pify": "^2.2.0"
       },
@@ -3294,14 +3231,12 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
       "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/extract-zip": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
       "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
-      "dev": true,
       "dependencies": {
         "debug": "^4.1.1",
         "get-stream": "^5.1.0",
@@ -3321,7 +3256,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
       "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==",
-      "dev": true,
       "engines": [
         "node >=0.6.0"
       ],
@@ -3377,7 +3311,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
       "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
-      "dev": true,
       "dependencies": {
         "pend": "~1.2.0"
       }
@@ -3386,7 +3319,6 @@
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
       "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
-      "dev": true,
       "dependencies": {
         "escape-string-regexp": "^1.0.5"
       },
@@ -3456,7 +3388,6 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
       "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
-      "dev": true,
       "license": "Apache-2.0",
       "engines": {
         "node": "*"
@@ -3466,7 +3397,6 @@
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
       "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
@@ -3503,7 +3433,6 @@
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
       "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-      "dev": true,
       "dependencies": {
         "at-least-node": "^1.0.0",
         "graceful-fs": "^4.2.0",
@@ -3524,7 +3453,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -3551,7 +3479,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
       "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.2",
@@ -3585,7 +3512,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
       "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "dunder-proto": "^1.0.1",
@@ -3599,7 +3525,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
       "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
-      "dev": true,
       "dependencies": {
         "pump": "^3.0.0"
       },
@@ -3610,20 +3535,10 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/getos": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/getos/-/getos-3.2.1.tgz",
-      "integrity": "sha512-U56CfOK17OKgTVqozZjUKNdkfEv6jk5WISBJ8SHoagjE6L69zOwl3Z+O8myjY9MEW3i2HPWQBt/LTbCgcC973Q==",
-      "dev": true,
-      "dependencies": {
-        "async": "^3.2.0"
-      }
-    },
     "node_modules/getpass": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
       "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "assert-plus": "^1.0.0"
@@ -3673,7 +3588,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.1.tgz",
       "integrity": "sha512-NBcGGFbBA9s1VzD41QXDG+3++t9Mn5t1FpLdhESY6oKY4gYTFpX4wO3sqGUa0Srjtbfj3szX0RnemmrVRUdULA==",
-      "dev": true,
       "dependencies": {
         "ini": "2.0.0"
       },
@@ -3717,7 +3631,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
       "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -3729,14 +3642,12 @@
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3745,7 +3656,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
       "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -3758,7 +3668,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
       "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-symbols": "^1.0.3"
@@ -3774,7 +3683,6 @@
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/hasha/-/hasha-5.2.2.tgz",
       "integrity": "sha512-Hrp5vIK/xr5SkeN2onO32H0MgNZ0f17HRNH39WfL0SYUNOTZ5Lz1TJ8Pajo/87dYGEFlLMm7mIc/k/s6Bvz9HQ==",
-      "dev": true,
       "dependencies": {
         "is-stream": "^2.0.0",
         "type-fest": "^0.8.0"
@@ -3790,7 +3698,6 @@
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
       "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3799,7 +3706,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -3817,7 +3723,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.4.0.tgz",
       "integrity": "sha512-G5akfn7eKbpDN+8nPS/cb57YeA1jLTVxjpCj7tmm3QKPdyDy7T+qSC40e9ptydSWvkwjSXw1VbkpyEm39ukeAg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "assert-plus": "^1.0.0",
@@ -3832,7 +3737,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
       "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
-      "dev": true,
       "engines": {
         "node": ">=8.12.0"
       }
@@ -3841,7 +3745,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
       "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -3879,7 +3782,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
       "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3905,7 +3807,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ini/-/ini-2.0.0.tgz",
       "integrity": "sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       }
@@ -3939,7 +3840,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3960,7 +3860,6 @@
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
       "integrity": "sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==",
-      "dev": true,
       "dependencies": {
         "global-dirs": "^3.0.0",
         "is-path-inside": "^3.0.2"
@@ -3985,7 +3884,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
       "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3994,7 +3892,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
       "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       },
@@ -4005,14 +3902,12 @@
     "node_modules/is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
-      "dev": true
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
     },
     "node_modules/is-unicode-supported": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
       "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -4032,14 +3927,12 @@
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
     "node_modules/isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
       "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/istanbul-lib-coverage": {
@@ -4228,7 +4121,6 @@
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
       "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/jsesc": {
@@ -4254,7 +4146,6 @@
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
       "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
-      "dev": true,
       "license": "(AFL-2.1 OR BSD-3-Clause)"
     },
     "node_modules/json-schema-traverse": {
@@ -4268,7 +4159,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
       "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/json5": {
@@ -4287,7 +4177,6 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
       "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-      "dev": true,
       "dependencies": {
         "universalify": "^2.0.0"
       },
@@ -4299,7 +4188,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-2.0.2.tgz",
       "integrity": "sha512-gqXddjPqQ6G40VdnI6T6yObEC+pDNvyP95wdQhkWkg7crHH3km5qP1FsOXEkzEQwnz6gz5qGTn1c2Y52wP3OyQ==",
-      "dev": true,
       "engines": [
         "node >=0.6.0"
       ],
@@ -4311,20 +4199,10 @@
         "verror": "1.10.0"
       }
     },
-    "node_modules/lazy-ass": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/lazy-ass/-/lazy-ass-1.6.0.tgz",
-      "integrity": "sha512-cc8oEVoctTvsFZ/Oje/kGnHbpWHYBe8IAJe4C0QNc3t8uM/0Y8+erSz/7Y1ALuXTEZTMvxXwO6YbX1ey3ujiZw==",
-      "dev": true,
-      "engines": {
-        "node": "> 0.8"
-      }
-    },
     "node_modules/listr2": {
       "version": "3.14.0",
       "resolved": "https://registry.npmjs.org/listr2/-/listr2-3.14.0.tgz",
       "integrity": "sha512-TyWI8G99GX9GjE54cJ+RrNMcIFBfwMPxc3XTFiAYGN4s10hWROGtOg7+O6u6LE3mNkyld7RSLE6nrKBvTfcs3g==",
-      "dev": true,
       "dependencies": {
         "cli-truncate": "^2.1.0",
         "colorette": "^2.0.16",
@@ -4372,8 +4250,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
@@ -4391,14 +4268,12 @@
     "node_modules/lodash.once": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
-      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
-      "dev": true
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg=="
     },
     "node_modules/log-symbols": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
       "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
-      "dev": true,
       "dependencies": {
         "chalk": "^4.1.0",
         "is-unicode-supported": "^0.1.0"
@@ -4414,7 +4289,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/log-update/-/log-update-4.0.0.tgz",
       "integrity": "sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==",
-      "dev": true,
       "dependencies": {
         "ansi-escapes": "^4.3.0",
         "cli-cursor": "^3.1.0",
@@ -4432,7 +4306,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
       "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "astral-regex": "^2.0.0",
@@ -4449,7 +4322,6 @@
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
       "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -4487,7 +4359,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
       "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -4496,8 +4367,7 @@
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
     },
     "node_modules/merge2": {
       "version": "1.4.1",
@@ -4525,7 +4395,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -4534,7 +4403,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -4546,7 +4414,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -4567,7 +4434,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
       "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -4639,7 +4505,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
       "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "dev": true,
       "dependencies": {
         "path-key": "^3.0.0"
       },
@@ -4739,7 +4604,6 @@
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
       "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -4752,7 +4616,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
       "dependencies": {
         "wrappy": "1"
       }
@@ -4761,7 +4624,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
       "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-      "dev": true,
       "dependencies": {
         "mimic-fn": "^2.1.0"
       },
@@ -4775,8 +4637,7 @@
     "node_modules/ospath": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/ospath/-/ospath-1.2.2.tgz",
-      "integrity": "sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==",
-      "dev": true
+      "integrity": "sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA=="
     },
     "node_modules/p-limit": {
       "version": "2.3.0",
@@ -4809,7 +4670,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
       "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
-      "dev": true,
       "dependencies": {
         "aggregate-error": "^3.0.0"
       },
@@ -4866,7 +4726,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -4910,14 +4769,12 @@
     "node_modules/pend": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
-      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
-      "dev": true
+      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg=="
     },
     "node_modules/performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
       "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/pg": {
@@ -5023,7 +4880,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5158,7 +5014,6 @@
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
       "integrity": "sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       },
@@ -5170,7 +5025,6 @@
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
       "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6.0"
       }
@@ -5190,14 +5044,12 @@
     "node_modules/proxy-from-env": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.0.0.tgz",
-      "integrity": "sha512-F2JHgJQ1iqwnHDcQjVBsq3n/uoaFL+iPW/eAeL7kVxy/2RrWaN4WroKjjvbsoRtv0ftelNyC01bjRhn/bhcf4A==",
-      "dev": true
+      "integrity": "sha512-F2JHgJQ1iqwnHDcQjVBsq3n/uoaFL+iPW/eAeL7kVxy/2RrWaN4WroKjjvbsoRtv0ftelNyC01bjRhn/bhcf4A=="
     },
     "node_modules/pump": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
       "integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
-      "dev": true,
       "dependencies": {
         "end-of-stream": "^1.1.0",
         "once": "^1.3.1"
@@ -5217,7 +5069,6 @@
       "version": "6.14.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
       "integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
         "side-channel": "^1.1.0"
@@ -5350,7 +5201,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/request-progress/-/request-progress-3.0.0.tgz",
       "integrity": "sha512-MnWzEHHaxHO2iWiQuHrUPBi/1WeBf5PkxQqNyNvLl9VAYSdXkP8tQ3pBSeCPD+yw0v0Aq1zosWLz0BdeXpWwZg==",
-      "dev": true,
       "dependencies": {
         "throttleit": "^1.0.0"
       }
@@ -5411,7 +5261,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
       "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
-      "dev": true,
       "dependencies": {
         "onetime": "^5.1.0",
         "signal-exit": "^3.0.2"
@@ -5433,8 +5282,7 @@
     "node_modules/rfdc": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
-      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
-      "dev": true
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA=="
     },
     "node_modules/rimraf": {
       "version": "3.0.2",
@@ -5479,7 +5327,6 @@
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
       "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
-      "dev": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -5488,7 +5335,6 @@
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -5508,7 +5354,6 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/schema-utils": {
@@ -5560,7 +5405,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -5572,7 +5416,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -5581,7 +5424,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
       "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -5601,7 +5443,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
       "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -5618,7 +5459,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
       "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.2",
@@ -5637,7 +5477,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
       "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.2",
@@ -5656,8 +5495,7 @@
     "node_modules/signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-      "dev": true
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
     },
     "node_modules/slash": {
       "version": "3.0.0",
@@ -5672,7 +5510,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz",
       "integrity": "sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "astral-regex": "^2.0.0",
@@ -5737,7 +5574,6 @@
       "version": "1.18.0",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.18.0.tgz",
       "integrity": "sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "asn1": "~0.2.3",
@@ -5763,7 +5599,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -5777,7 +5612,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -5798,7 +5632,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
       "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -5807,7 +5640,6 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -5828,6 +5660,32 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/systeminformation": {
+      "version": "5.27.7",
+      "resolved": "https://registry.npmjs.org/systeminformation/-/systeminformation-5.27.7.tgz",
+      "integrity": "sha512-saaqOoVEEFaux4v0K8Q7caiauRwjXC4XbD2eH60dxHXbpKxQ8kH9Rf7Jh+nryKpOUSEFxtCdBlSUx0/lO6rwRg==",
+      "license": "MIT",
+      "os": [
+        "darwin",
+        "linux",
+        "win32",
+        "freebsd",
+        "openbsd",
+        "netbsd",
+        "sunos",
+        "android"
+      ],
+      "bin": {
+        "systeminformation": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "funding": {
+        "type": "Buy me a coffee",
+        "url": "https://www.buymeacoffee.com/systeminfo"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -5970,7 +5828,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-1.0.1.tgz",
       "integrity": "sha512-vDZpf9Chs9mAdfY046mcPt8fg5QSZr37hEH4TXYBnDF+izxgrbRGUAAaBvIk/fJm9aOFCGFd1EsNg5AZCbnQCQ==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
@@ -5978,14 +5835,12 @@
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
-      "dev": true
+      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
     },
     "node_modules/tldts": {
       "version": "6.1.86",
       "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.86.tgz",
       "integrity": "sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "tldts-core": "^6.1.86"
@@ -5998,14 +5853,12 @@
       "version": "6.1.86",
       "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.86.tgz",
       "integrity": "sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/tmp": {
       "version": "0.2.5",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.5.tgz",
       "integrity": "sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=14.14"
@@ -6027,7 +5880,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.1.2.tgz",
       "integrity": "sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
         "tldts": "^6.1.32"
@@ -6040,7 +5892,6 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
       "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
-      "dev": true,
       "bin": {
         "tree-kill": "cli.js"
       }
@@ -6048,14 +5899,12 @@
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "dev": true
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
     },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
       "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
-      "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "safe-buffer": "^5.0.1"
@@ -6068,14 +5917,12 @@
       "version": "0.14.5",
       "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
       "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
-      "dev": true,
       "license": "Unlicense"
     },
     "node_modules/type-fest": {
       "version": "0.21.3",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
       "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -6140,7 +5987,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
       "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-      "dev": true,
       "engines": {
         "node": ">= 10.0.0"
       }
@@ -6149,7 +5995,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",
       "integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -6198,7 +6043,6 @@
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "dev": true,
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -6207,7 +6051,6 @@
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
       "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
-      "dev": true,
       "engines": [
         "node >=0.6.0"
       ],
@@ -6346,7 +6189,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -6367,7 +6209,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -6383,8 +6224,7 @@
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
     "node_modules/write-file-atomic": {
       "version": "3.0.3",
@@ -6457,7 +6297,6 @@
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
       "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
-      "dev": true,
       "dependencies": {
         "buffer-crc32": "~0.2.3",
         "fd-slicer": "~1.1.0"
diff --git a/cypress-tests/package.json b/cypress-tests/package.json
index ff8c991918..da92a4f936 100644
--- a/cypress-tests/package.json
+++ b/cypress-tests/package.json
@@ -10,13 +10,14 @@
     "@cypress/code-coverage": "^3.12.12",
     "@cypress/webpack-preprocessor": "^5.12.0",
     "@faker-js/faker": "^7.3.0",
-    "cypress": "^15.0.0",
+    "cypress": "^15.4.0",
     "cypress-mailhog": "^2.5.0"
   },
   "dependencies": {
+    "cypress-real-events": "^1.15.0",
     "moment": "^2.29.4",
     "node-xlsx": "^0.4.0",
     "pdf-parse": "^1.1.1",
     "pg": "^8.8.0"
   }
-}
\ No newline at end of file
+}

From 050dc4f27cf28e19260aaa9676de808beafd6ca2 Mon Sep 17 00:00:00 2001
From: Nishidh Jain <61869195+NishidhJain@users.noreply.github.com>
Date: Thu, 16 Oct 2025 11:48:40 +0530
Subject: [PATCH 044/157] fix: Control component actions not working for table
 action buttons (#14283)

---
 frontend/src/AppBuilder/_stores/slices/eventsSlice.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/AppBuilder/_stores/slices/eventsSlice.js b/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
index a125aef71a..8cbcdb27fc 100644
--- a/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
@@ -826,7 +826,6 @@ export const createEventsSlice = (set, get) => ({
               // let component = Object.values(getCurrentState()?.components ?? {}).filter(
               //   (component) => component.id === event.componentId
               // )[0];
-              const { event } = eventObj;
               if (!event.componentSpecificActionHandle) {
                 throw new Error('No component-specific action handle provided.');
               }

From 47efc50301968446e6a7d17cf14b88c9aa9ece87 Mon Sep 17 00:00:00 2001
From: Nishidh Jain <61869195+NishidhJain@users.noreply.github.com>
Date: Thu, 16 Oct 2025 11:49:14 +0530
Subject: [PATCH 045/157] fix: When row is selected in table & we click on
 action button in table the selected cell exposed variable was not getting
 updated (#14286)

---
 .../NewTable/_components/TableData/_components/TableRow.jsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/_components/TableRow.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/_components/TableRow.jsx
index 59c2486206..1173f53bc7 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/_components/TableRow.jsx
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/_components/TableRow.jsx
@@ -106,10 +106,8 @@ export const TableRow = ({
               if (['rightActions', 'leftActions'].includes(cell.column.id) && allowSelection && row.getIsSelected()) {
                 e.stopPropagation();
                 fireEvent('onRowClicked');
-                return;
-              }
-              // if the cell is editable and the row is selected, don't unselect the row
-              if (isEditable && allowSelection && (!selectRowOnCellEdit || row.getIsSelected())) {
+              } else if (isEditable && allowSelection && (!selectRowOnCellEdit || row.getIsSelected())) {
+                // if the cell is editable and the row is selected, don't unselect the row
                 e.stopPropagation();
                 fireEvent('onRowClicked');
               }

From f3f48bc65a57caa31ef3a4f9765581a5a07ad0e8 Mon Sep 17 00:00:00 2001
From: Nishidh Jain <61869195+NishidhJain@users.noreply.github.com>
Date: Thu, 16 Oct 2025 12:42:38 +0530
Subject: [PATCH 046/157] fix: Page permission tooltip placement issue (#14346)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Hotfix/Azure OIDC Group sync fixes (#14077)

* azure oidc changes

* chore: update version to 3.20.22-lts across all components

---------

Co-authored-by: gsmithun4 <gsmithun4@gmail.com>

* 🚀 chore: update submodules to latest lts-3.16 after auto-merge (#14345)

Co-authored-by: gsmithun4 <3417097+gsmithun4@users.noreply.github.com>

* fix: Page permission tooltip placement issue

---------

Co-authored-by: Rohan Lahori <64496391+rohanlahori@users.noreply.github.com>
Co-authored-by: gsmithun4 <gsmithun4@gmail.com>
Co-authored-by: Adish M <44204658+adishM98@users.noreply.github.com>
Co-authored-by: gsmithun4 <3417097+gsmithun4@users.noreply.github.com>
---
 .version                                           |  2 +-
 frontend/.version                                  |  2 +-
 .../PageSettingsTab/PageMenu/PageMenuItem.jsx      |  3 ++-
 server/.version                                    |  2 +-
 server/ee                                          |  2 +-
 server/src/helpers/utils.helper.ts                 | 14 ++++++++++++++
 6 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/.version b/.version
index f4e635c035..cd5e02fb32 100644
--- a/.version
+++ b/.version
@@ -1 +1 @@
-3.20.21-lts
+3.20.22-lts
diff --git a/frontend/.version b/frontend/.version
index f4e635c035..cd5e02fb32 100644
--- a/frontend/.version
+++ b/frontend/.version
@@ -1 +1 @@
-3.20.21-lts
+3.20.22-lts
diff --git a/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PageMenuItem.jsx b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PageMenuItem.jsx
index 21744e0712..e9d2be17c0 100644
--- a/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PageMenuItem.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PageMenuItem.jsx
@@ -454,8 +454,9 @@ export const PageMenuItem = withRouter(
                               text={
                                 <ToolTip
                                   message={'Page permissions are available only in paid plans'}
-                                  placement="right"
+                                  placement="auto"
                                   show={!licenseValid}
+                                  tooltipClassName="!tw-z-[100000]"
                                 >
                                   <div className="d-flex align-items-center enterprise-feature">
                                     <div>Page permission</div>
diff --git a/server/.version b/server/.version
index f4e635c035..cd5e02fb32 100644
--- a/server/.version
+++ b/server/.version
@@ -1 +1 @@
-3.20.21-lts
+3.20.22-lts
diff --git a/server/ee b/server/ee
index 9be95ce62d..1baf0c1f3b 160000
--- a/server/ee
+++ b/server/ee
@@ -1 +1 @@
-Subproject commit 9be95ce62d520d2c1c4fe410e103236e2cd01684
+Subproject commit 1baf0c1f3b340048971548bd0b744e3be143df2b
diff --git a/server/src/helpers/utils.helper.ts b/server/src/helpers/utils.helper.ts
index 2e5ba3b402..3ad755482b 100644
--- a/server/src/helpers/utils.helper.ts
+++ b/server/src/helpers/utils.helper.ts
@@ -511,3 +511,17 @@ export function normalizeEnvSlug(key: string): string {
   // Convert `my-workspace` → `my_workspace`
   return key.replace(/-/g, '_');
 }
+export function isAzureEntraIdIssuer(issuer?: string): boolean {
+  if (!issuer) return false;
+  const microsoftDomains = [
+    '.microsoftonline.com',
+    '.microsoftonline.us',
+    '.chinacloudapi.cn',
+    '.microsoftonline.de',
+    '.b2clogin.com',
+  ];
+  if (issuer.startsWith('https://sts.windows.net/')) {
+    return true;
+  }
+  return microsoftDomains.some((domain) => issuer.includes(domain));
+}

From 27d3b8933ec421f25778097551d4088a28527e2f Mon Sep 17 00:00:00 2001
From: Srimanitejas123 <mani@tooljet.com>
Date: Thu, 16 Oct 2025 12:47:16 +0530
Subject: [PATCH 047/157] cleaned spec with unwanted functions

---
 .../workflows/eeTestcases/workflowInApp.cy.js |  5 +----
 .../eeTestcases/workflowWIthDatasource.cy.js  | 20 +++++++------------
 .../workflowWithExportImport.cy.js            | 11 +++++-----
 .../eeTestcases/workflowWithWebhooks.cy.js    |  1 -
 .../eeTestcases/workflowfeatures.cy.js        | 18 ++++++++---------
 5 files changed, 21 insertions(+), 34 deletions(-)

diff --git a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowInApp.cy.js b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowInApp.cy.js
index 195161bcac..a573bd0e26 100644
--- a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowInApp.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowInApp.cy.js
@@ -61,7 +61,6 @@ describe("Workflows in apps", () => {
     //   commonSelectors.toastMessage,
     //   `Query (${data.dataSourceName}) completed.`
     // );
-    cy.backToApps();
     cy.apiDeleteApp();
     cy.apiDeleteWorkflow(data.workflowName);
   });
@@ -139,10 +138,8 @@ describe("Workflows in apps", () => {
     //   commonSelectors.toastMessage,
     //   `Query (${data.dataSourceName}) completed.`
     // );
-    cy.backToApps();
     cy.apiDeleteApp();
     cy.apiDeleteWorkflow(data.workflowName);
-
-    deleteDatasource(`cypress-${data.dataSourceName}-manual-pgsql`);
+    cy.apiDeleteGDS(`cypress-${data.dataSourceName}-manual-pgsql`);
   });
 });
diff --git a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWIthDatasource.cy.js b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWIthDatasource.cy.js
index 71f1ea1463..a9a14de1b6 100644
--- a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWIthDatasource.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWIthDatasource.cy.js
@@ -51,7 +51,6 @@ describe("Workflows with Datasource", () => {
     );
     cy.verifyTextInResponseOutput(workflowsText.responseNodeExpectedValueText);
 
-    navigateBackToWorkflowsDashboard();
     cy.apiDeleteWorkflow(data.workflowName);
   });
 
@@ -115,10 +114,9 @@ describe("Workflows with Datasource", () => {
     );
     verifyTextInResponseOutputLimited(workflowsText.postgresExpectedValue);
 
-    navigateBackToWorkflowsDashboard();
     cy.apiDeleteWorkflow(data.workflowName);
 
-    deleteDatasource(dataSourceName);
+    cy.apiDeleteGDS(dataSourceName);
   });
 
   it("REST API workflow - execute and validate", () => {
@@ -181,10 +179,9 @@ describe("Workflows with Datasource", () => {
     );
     cy.verifyTextInResponseOutput(workflowsText.restApiExpectedValue);
 
-    navigateBackToWorkflowsDashboard();
     cy.apiDeleteWorkflow(data.workflowName);
 
-    deleteDatasource(dataSourceName);
+    cy.apiDeleteGDS(dataSourceName);
   });
 
   it("HarperDB workflow - execute and validate", () => {
@@ -195,29 +192,28 @@ describe("Workflows with Datasource", () => {
     const Password = Cypress.env("harperdb_password");
 
     cy.get(commonSelectors.globalDataSourceIcon).click();
-    cy.installMarketplacePlugin(workflowsText.harperDbPluginName);
+    cy.installMarketplacePlugin("HarperDB");
 
-    selectAndAddDataSource(
-      "databases",
-      harperDbText.harperDb,
-      data.dataSourceName
-    );
+    selectAndAddDataSource("databases", harperDbText.harperDb, data.dataSourceName);
 
     fillDataSourceTextField(
       harperDbText.hostLabel,
       harperDbText.hostInputPlaceholder,
       Host
     );
+
     fillDataSourceTextField(
       harperDbText.portLabel,
       harperDbText.portPlaceholder,
       Port
     );
+
     fillDataSourceTextField(
       harperDbText.userNameLabel,
       harperDbText.userNamePlaceholder,
       Username
     );
+
     fillDataSourceTextField(
       harperDbText.passwordlabel,
       harperDbText.passwordPlaceholder,
@@ -267,10 +263,8 @@ describe("Workflows with Datasource", () => {
       workflowsText.harperDbResponseNodeQuery
     );
     cy.verifyTextInResponseOutput(workflowsText.harperDbExpectedValue);
-
     navigateBackToWorkflowsDashboard();
     cy.apiDeleteWorkflow(data.workflowName);
-
     deleteDatasource(dataSourceName);
   });
 });
diff --git a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithExportImport.cy.js b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithExportImport.cy.js
index 934b2b2069..404283a44b 100644
--- a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithExportImport.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithExportImport.cy.js
@@ -26,7 +26,7 @@ describe("Workflows Export/Import Sanity", () => {
       .replaceAll("[^A-Za-z]", "");
   });
 
-  it.only("RunJS workflow - execute, export/import, re-execute", () => {
+  it("RunJS workflow - execute, export/import, re-execute", () => {
     const workflowName = `${data.workflowName}-runjs`;
 
     cy.createWorkflowApp(workflowName);
@@ -51,10 +51,9 @@ describe("Workflows Export/Import Sanity", () => {
     cy.verifyTextInResponseOutput(workflowsText.responseNodeExpectedValueText);
 
     cy.exportWorkflowApp(workflowName);
-
+    cy.apiDeleteWorkflow(workflowName);
     importWorkflowApp(workflowName, workflowsText.exportFixturePath);
     cy.verifyTextInResponseOutput(workflowsText.responseNodeExpectedValueText);
-    navigateBackToWorkflowsDashboard();
     cy.apiDeleteWorkflow(workflowName);
     cy.task("deleteFile", workflowsText.exportFixturePath);
   });
@@ -123,13 +122,13 @@ describe("Workflows Export/Import Sanity", () => {
     verifyTextInResponseOutputLimited(workflowsText.postgresExpectedValue);
 
     cy.exportWorkflowApp(workflowName);
-
+    cy.apiDeleteWorkflow(workflowName);
     importWorkflowApp(workflowName, workflowsText.exportFixturePath);
     verifyTextInResponseOutputLimited(workflowsText.postgresExpectedValue);
-    navigateBackToWorkflowsDashboard();
+    
     cy.apiDeleteWorkflow(workflowName);
 
-    deleteDatasource(dataSourceName);
+    cy.apiDeleteGDS(dataSourceName);
     cy.task("deleteFile", workflowsText.exportFixturePath);
   });
 });
diff --git a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithWebhooks.cy.js b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithWebhooks.cy.js
index 239f73e8ed..82fce2e134 100644
--- a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithWebhooks.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowWithWebhooks.cy.js
@@ -65,7 +65,6 @@ describe("Workflows with Webhooks", () => {
             });
           });
       });
-      navigateBackToWorkflowsDashboard();
     cy.apiDeleteWorkflow(data.workflowName);
   });
 });
diff --git a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowfeatures.cy.js b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowfeatures.cy.js
index 72cb753b76..3bb762db9d 100644
--- a/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowfeatures.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/workflows/eeTestcases/workflowfeatures.cy.js
@@ -45,12 +45,13 @@ describe("Workflows features", () => {
       workflowsText.responseNodeQuery
     );
     cy.verifyTextInResponseOutput(workflowsText.longStringJsonText);
-    navigateBackToWorkflowsDashboard();
     cy.apiDeleteWorkflow(data.workflowName);
   });
 
   it("Creating workflow with Node Preview Validation and execution", () => {
-    cy.createWorkflowApp(data.workflowName);
+    cy.apiCreateWorkflow(data.workflowName)
+    cy.openWorkflow();
+    
     enterJsonInputInStartNode();
     cy.connectDataSourceNode(workflowsText.runjsNodeLabel);
 
@@ -72,13 +73,14 @@ describe("Workflows features", () => {
       workflowsText.responseNodeQuery
     );
     cy.verifyTextInResponseOutput(workflowsText.jsonValuePlaceholder);
-    navigateBackToWorkflowsDashboard();
     cy.apiDeleteWorkflow(data.workflowName);
   });
 
   // Need to run after bug fixes
   it("Creating workflow inside Workflow and validating execution", () => {
-    cy.createWorkflowApp(data.childWorkflowName);
+    cy.apiCreateWorkflow(data.childWorkflowName)
+    cy.openWorkflow();
+    
     enterJsonInputInStartNode();
     cy.connectDataSourceNode(workflowsText.runjsNodeLabel);
 
@@ -99,8 +101,6 @@ describe("Workflows features", () => {
     );
     cy.verifyTextInResponseOutput(workflowsText.responseNodeExpectedValueText);
 
-    navigateBackToWorkflowsDashboard();
-
     cy.apiCreateWorkflow(data.parentWorkflowName)
     cy.openWorkflow();
     enterJsonInputInStartNode();
@@ -125,13 +125,13 @@ describe("Workflows features", () => {
       workflowsText.workflowResponseNodeQuery
     );
     // cy.verifyTextInResponseOutput(workflowsText.responseNodeExpectedValueText);
-    navigateBackToWorkflowsDashboard();
     cy.apiDeleteWorkflow(data.childWorkflowName);
     cy.apiDeleteWorkflow(data.parentWorkflowName);
   });
 
   it("Creating workflow with large datasets and validating execution", () => {
-    cy.createWorkflowApp(data.workflowName);
+    cy.apiCreateWorkflow(data.workflowName)
+    cy.openWorkflow();
     enterJsonInputInStartNode();
     cy.connectDataSourceNode(workflowsText.runjsNodeLabel);
 
@@ -156,8 +156,6 @@ describe("Workflows features", () => {
     verifyTextInResponseOutputLimited(
       workflowsText.responseNodeExpectedValueTextForLargeDataset
     );
-
-    navigateBackToWorkflowsDashboard();
     cy.apiDeleteWorkflow(data.workflowName);
   });
 });

From fa8d02fe2f8df9b9fbd4fde02f28a61216b423c3 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Tue, 16 Sep 2025 01:08:50 +0530
Subject: [PATCH 048/157] Update package dependencies, add new components, and
 enhance login functionality

- Added `shadcn` dependency to package.json and package-lock.json.
- Introduced new `LoginForm` component for user authentication.
- Updated styles and structure in `frontend/components.json` and `frontend/src/styles/globals.css`.
- Enhanced existing UI components and updated Radix UI dependencies.
- Refactored onboarding background wrapper to integrate the new login form.
---
 .cursor/mcp.json                |  11 +++
 frontend/components.json        |  16 +++--
 frontend/package.json           |  10 +--
 frontend/src/styles/globals.css | 123 ++++++++++++++++++++++++++++++++
 package.json                    |   3 +-
 5 files changed, 152 insertions(+), 11 deletions(-)
 create mode 100644 .cursor/mcp.json
 create mode 100644 frontend/src/styles/globals.css

diff --git a/.cursor/mcp.json b/.cursor/mcp.json
new file mode 100644
index 0000000000..bd98b4ff83
--- /dev/null
+++ b/.cursor/mcp.json
@@ -0,0 +1,11 @@
+{
+  "mcpServers": {
+    "shadcn": {
+      "command": "npx",
+      "args": [
+        "shadcn@latest",
+        "mcp"
+      ]
+    }
+  }
+}
diff --git a/frontend/components.json b/frontend/components.json
index 386889c023..4c5b3fcca6 100644
--- a/frontend/components.json
+++ b/frontend/components.json
@@ -1,17 +1,21 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "default",
+  "style": "new-york",
   "rsc": false,
   "tsx": false,
   "tailwind": {
     "config": "tailwind.config.js",
-    "css": "src/styles/theme.scss",
-    "baseColor": "zinc",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
     "cssVariables": true,
-    "prefix": ""
+    "prefix": "tw-"
   },
   "aliases": {
     "components": "@/components",
-    "utils": "@/lib/utils"
-  }
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
 }
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
index aeeffa3e2c..dcf2256fca 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,11 +22,11 @@
     "@radix-ui/colors": "^0.1.8",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "^1.0.3",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slider": "^1.1.2",
-    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
@@ -49,8 +49,9 @@
     "axios": "^1.3.3",
     "bootstrap": "^5.2.3",
     "buffer": "^6.0.3",
-    "class-variance-authority": "^0.7.0",
+    "class-variance-authority": "^0.7.1",
     "classnames": "^2.3.2",
+    "clsx": "^2.1.1",
     "cron-validator": "^1.3.1",
     "cronstrue": "^2.51.0",
     "deep-object-diff": "^1.1.9",
@@ -146,9 +147,10 @@
     "semver": "^7.3.8",
     "string-hash": "^1.1.3",
     "superstruct": "^1.0.3",
-    "tailwind-merge": "^2.2.1",
+    "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "tinycolor2": "^1.6.0",
+    "tw-animate-css": "^1.3.7",
     "url-join": "^5.0.0",
     "use-react-router-breadcrumbs": "^4.0.1",
     "uuid": "9.0.0",
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
new file mode 100644
index 0000000000..0ad90d5daa
--- /dev/null
+++ b/frontend/src/styles/globals.css
@@ -0,0 +1,123 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 2b3308968d..fe969000e5 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,8 @@
     "eslint-plugin-jest": "^28.13.3",
     "eslint-plugin-prettier": "^5.4.1",
     "husky": "^9.1.7",
-    "lint-staged": "^16.1.0"
+    "lint-staged": "^16.1.0",
+    "shadcn": "^3.0.0"
   },
   "scripts": {
     "prebuild:plugins": "npm run install:plugins",

From 4fb974aa8be044cb1223db9cccf2d1f80e0d73fc Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Tue, 16 Sep 2025 02:39:56 +0530
Subject: [PATCH 049/157] Update package dependencies, enhance Storybook
 configuration, and introduce new authentication components

- Updated Storybook addons and configurations to use the latest versions.
- Added `LoginForm` and `PasswordInput` components for user authentication.
- Refactored existing components and added new UI elements for improved user experience.
- Enhanced the onboarding background wrapper to integrate the new login form.
- Cleaned up and organized the package.json and package-lock.json files for better dependency management.
---
 frontend/.storybook/decorators.jsx            |  13 +-
 frontend/.storybook/main.js                   |  67 ++++-
 frontend/.storybook/preview.js                |  10 +-
 frontend/package.json                         |  17 +-
 frontend/src/components/Auth/FormWrapper.jsx  |  12 +
 frontend/src/components/Auth/LoginForm.jsx    | 210 ++++++++++++++++
 .../src/components/Auth/PasswordInput.jsx     | 103 ++++++++
 .../Auth/Stories/LoginForm.stories.jsx        | 232 ++++++++++++++++++
 .../Auth/Stories/PasswordInput.stories.jsx    | 145 +++++++++++
 frontend/src/components/login-form.jsx        |  53 ++++
 .../components/ui/Input/CommonInput/Index.jsx |   7 +-
 frontend/src/components/ui/Input/Input.jsx    |  57 +++--
 frontend/src/components/ui/Label/Label.jsx    |   8 +-
 frontend/src/components/ui/button.jsx         |   3 +
 frontend/src/components/ui/card.jsx           |   3 +
 frontend/src/components/ui/input.jsx          |   3 +
 frontend/src/components/ui/label.jsx          |   3 +
 frontend/src/hooks/usePasswordInput.js        |  47 ++++
 .../OnboardingBackgroundWrapper.jsx           |  37 +--
 frontend/src/stories/Configure.mdx            |   2 +-
 20 files changed, 954 insertions(+), 78 deletions(-)
 create mode 100644 frontend/src/components/Auth/FormWrapper.jsx
 create mode 100644 frontend/src/components/Auth/LoginForm.jsx
 create mode 100644 frontend/src/components/Auth/PasswordInput.jsx
 create mode 100644 frontend/src/components/Auth/Stories/LoginForm.stories.jsx
 create mode 100644 frontend/src/components/Auth/Stories/PasswordInput.stories.jsx
 create mode 100644 frontend/src/components/login-form.jsx
 create mode 100644 frontend/src/components/ui/button.jsx
 create mode 100644 frontend/src/components/ui/card.jsx
 create mode 100644 frontend/src/components/ui/input.jsx
 create mode 100644 frontend/src/components/ui/label.jsx
 create mode 100644 frontend/src/hooks/usePasswordInput.js

diff --git a/frontend/.storybook/decorators.jsx b/frontend/.storybook/decorators.jsx
index eee828eccf..e72f6af4f7 100644
--- a/frontend/.storybook/decorators.jsx
+++ b/frontend/.storybook/decorators.jsx
@@ -1,14 +1,19 @@
 // storybookDecorators.js
 
-import React from 'react';
+import React from "react";
+import { MemoryRouter } from "react-router-dom";
 
 export function withColorScheme(story, context) {
-  const darkMode = context?.globals?.backgrounds?.value === '#333333'; // Access theme mode from globals
-  const className = darkMode ? 'dark-theme' : '';
+  const darkMode = context?.globals?.backgrounds?.value === "#333333"; // Access theme mode from globals
+  const className = darkMode ? "dark-theme" : "";
 
   return (
-    <div className={className} style={{ backgroundColor: 'transparent' }}>
+    <div className={className} style={{ backgroundColor: "transparent" }}>
       {story()}
     </div>
   );
 }
+
+export function withRouter(story) {
+  return <MemoryRouter>{story()}</MemoryRouter>;
+}
diff --git a/frontend/.storybook/main.js b/frontend/.storybook/main.js
index c6ea9f6f9e..044b57df4e 100644
--- a/frontend/.storybook/main.js
+++ b/frontend/.storybook/main.js
@@ -1,32 +1,77 @@
-import customWebpackConfig from '../webpack.config';
-import path from 'path';
+import customWebpackConfig from "../webpack.config";
+import path from "path";
 
 const config = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+
   addons: [
     "@storybook/addon-links",
-    "@storybook/addon-essentials",
     "@storybook/addon-onboarding",
-    "@storybook/addon-interactions",
+    "@storybook/addon-docs",
   ],
+
   framework: {
     name: "@storybook/react-webpack5",
     options: {},
   },
-  docs: {
-    autodocs: "tag",
-  },
+
   webpackFinal: async (storybookConfig) => {
+    // Filter out the babel-loader rule from custom config to avoid conflicts
+    const customRules = customWebpackConfig.module.rules.filter((rule) => {
+      if (rule.test && rule.test.toString().includes("js|jsx")) {
+        return false; // Skip the babel-loader rule that includes react-refresh
+      }
+      return true;
+    });
+
+    // Add a custom babel-loader rule for JSX files without react-refresh
+    const babelRule = {
+      test: /\.(js|jsx)$/,
+      exclude: /node_modules/,
+      use: {
+        loader: "babel-loader",
+        options: {
+          presets: ["@babel/preset-env", "@babel/preset-react"],
+          plugins: [
+            [
+              "import",
+              {
+                libraryName: "lodash",
+                libraryDirectory: "",
+                camel2DashComponentName: false,
+              },
+              "lodash",
+            ],
+          ],
+        },
+      },
+    };
+
     return {
       ...storybookConfig,
-      module: { ...storybookConfig.module, rules: [...storybookConfig.module.rules, ...customWebpackConfig.module.rules] },
+      module: {
+        ...storybookConfig.module,
+        rules: [...storybookConfig.module.rules, ...customRules, babelRule],
+      },
       resolve: {
         ...storybookConfig.resolve,
         alias: {
           ...storybookConfig.resolve.alias,
-          '@': path.resolve(__dirname, '../src/') 
-        }
-      }
+          "@": path.resolve(__dirname, "../src/"),
+          "@ee": path.resolve(__dirname, "../ee/"),
+          "@cloud": path.resolve(__dirname, "../cloud/"),
+          "@assets": path.resolve(__dirname, "../assets/"),
+          "@white-label": path.resolve(
+            __dirname,
+            "../src/_helpers/white-label"
+          ),
+        },
+        fallback: {
+          ...storybookConfig.resolve.fallback,
+          process: require.resolve("process/browser.js"),
+          path: require.resolve("path-browserify"),
+        },
+      },
     };
   },
 };
diff --git a/frontend/.storybook/preview.js b/frontend/.storybook/preview.js
index 1d083f674a..93f1ec4603 100644
--- a/frontend/.storybook/preview.js
+++ b/frontend/.storybook/preview.js
@@ -1,8 +1,8 @@
-/** @type { import('@storybook/react').Preview } */
+/** @type { import('@storybook/react-webpack5').Preview } */
 
-import '../src/_styles/theme.scss';
-import './preview.scss';
-import { withColorScheme } from './decorators'; // Import the decorator
+import "../src/_styles/theme.scss";
+import "./preview.scss";
+import { withColorScheme, withRouter } from "./decorators"; // Import the decorators
 
 const preview = {
   parameters: {
@@ -14,7 +14,7 @@ const preview = {
       },
     },
   },
-  decorators: [withColorScheme], // Adding the decorator to the decorators array
+  decorators: [withRouter, withColorScheme], // Adding the decorators to the decorators array
 };
 
 export default preview;
diff --git a/frontend/package.json b/frontend/package.json
index dcf2256fca..9d3e424537 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -167,13 +167,9 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.6.0",
-    "@storybook/addon-essentials": "^7.2.1",
-    "@storybook/addon-interactions": "^7.2.1",
-    "@storybook/addon-links": "^7.2.1",
-    "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/blocks": "^7.2.1",
-    "@storybook/react": "^7.2.1",
-    "@storybook/react-webpack5": "^7.2.1",
+    "@storybook/addon-links": "^9.1.5",
+    "@storybook/addon-onboarding": "^9.1.5",
+    "@storybook/react-webpack5": "^9.1.5",
     "@storybook/testing-library": "^0.2.0",
     "@svgr/webpack": "^6.5.1",
     "@testing-library/jest-dom": "^5.16.5",
@@ -195,7 +191,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-storybook": "^9.1.5",
     "html-loader": "^4.2.0",
     "html-webpack-plugin": "^5.5.0",
     "jest": "^29.4.2",
@@ -206,13 +202,14 @@
     "react-refresh": "^0.17.0",
     "sass": "^1.93.2",
     "sass-loader": "^16.0.5",
-    "storybook": "^7.2.1",
+    "storybook": "^9.1.5",
     "style-loader": "^3.3.1",
     "tailwindcss": "^3.4.1",
     "terser-webpack-plugin": "^5.3.6",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^5.2.2"
+    "webpack-dev-server": "^5.2.2",
+    "@storybook/addon-docs": "^9.1.5"
   },
   "overrides": {
     "react-dates": {
diff --git a/frontend/src/components/Auth/FormWrapper.jsx b/frontend/src/components/Auth/FormWrapper.jsx
new file mode 100644
index 0000000000..f38dab890d
--- /dev/null
+++ b/frontend/src/components/Auth/FormWrapper.jsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+import Logo from '@/modules/common/resources/images/Logo';
+
+export const FormWrapper = ({ children }) => {
+  return (
+    <div className="tw-flex tw-flex-col tw-gap-9">
+      <Logo />
+      {children}
+    </div>
+  );
+};
diff --git a/frontend/src/components/Auth/LoginForm.jsx b/frontend/src/components/Auth/LoginForm.jsx
new file mode 100644
index 0000000000..8e84d20466
--- /dev/null
+++ b/frontend/src/components/Auth/LoginForm.jsx
@@ -0,0 +1,210 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { CornerDownLeft } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/Input/Input.jsx';
+import { Label } from '@/components/ui/label';
+import { FormWrapper } from '@/components/Auth/FormWrapper';
+import { PasswordInput } from '@/components/Auth/PasswordInput';
+
+export function LoginForm({ className, ...props }) {
+  const {
+    // Header and sign up section
+    signinHeader = 'Sign in',
+    signUpText = 'New to ToolJet?',
+    signUpUrl = '#',
+    signUpCTA = 'Create an account',
+
+    // Form fields
+    emailLabel = 'Email',
+    emailPlaceholder = 'm@example.com',
+    passwordLabel = 'Password',
+
+    // Forgot password
+    showForgotPassword = true,
+    forgotPasswordUrl = '/forgot-password',
+    forgotPasswordText = 'Forgot?',
+
+    // Button and separator
+    signinButtonText = 'Sign in',
+    orText = 'OR',
+    showOrSeparator = true,
+
+    // Form functionality
+    onSubmit,
+    emailValue,
+    passwordValue,
+    onEmailChange,
+    onPasswordChange,
+
+    // Validation and state
+    emailError,
+    passwordError,
+    isLoading = false,
+    disabled = false,
+  } = props;
+  return (
+    <FormWrapper>
+      <form className={cn('tw-flex tw-flex-col tw-gap-6', className)} onSubmit={onSubmit} {...props}>
+        <div className="tw-flex tw-flex-col tw-gap-0.5">
+          <h1 className="tw-text-2xl tw-font-bold tw-mb-0" data-cy="no-login-methods-warning">
+            {signinHeader}
+          </h1>
+          <div>
+            <p className="tw-text-balance tw-text-sm tw-text-muted-foreground tw-mb-0">
+              <span>{signUpText}</span>
+              <span>
+                <Link
+                  to={signUpUrl}
+                  className="tw-text-text-brand tw-text-[11px] tw-font-medium tw-no-underline tw-pl-1.5 tw-pb-0.5 tw-self-center hover:tw-text-button-primary-hover"
+                  tabIndex="-1"
+                  data-cy="create-an-account-link"
+                >
+                  {signUpCTA}
+                </Link>
+              </span>
+            </p>
+          </div>
+        </div>
+        <div className="tw-grid tw-gap-4">
+          <div className="tw-grid tw-gap-0.5">
+            <Label htmlFor="email">{emailLabel}</Label>
+            <Input
+              size="large"
+              id="email"
+              type="email"
+              placeholder={emailPlaceholder}
+              value={emailValue}
+              onChange={onEmailChange}
+              disabled={disabled}
+              required
+            />
+            {emailError && <p className="tw-text-sm tw-text-red-500 tw-mt-1">{emailError}</p>}
+          </div>
+          <div className="tw-grid tw-gap-0.5">
+            <div className="tw-flex tw-items-center tw-justify-between">
+              <Label htmlFor="password">{passwordLabel}</Label>
+              {showForgotPassword && (
+                <Link
+                  to={forgotPasswordUrl}
+                  tabIndex="-1"
+                  className="tw-text-text-brand tw-text-[11px] tw-font-medium tw-no-underline tw-pl-1.5 tw-pb-0.5 tw-self-center hover:tw-text-button-primary-hover"
+                  data-cy="forgot-password-link"
+                >
+                  {forgotPasswordText}
+                </Link>
+              )}
+            </div>
+            <PasswordInput
+              id="password"
+              type="password"
+              size="large"
+              hint=""
+              value={passwordValue}
+              onChange={onPasswordChange}
+              disabled={disabled}
+              required
+            />
+            {passwordError && <p className="tw-text-sm tw-text-red-500 tw-mt-1">{passwordError}</p>}
+          </div>
+          <Button
+            size="large"
+            type="submit"
+            className="tw-w-fit"
+            disabled={disabled || isLoading}
+            isLoading={isLoading}
+          >
+            {signinButtonText}
+            <CornerDownLeft width="16" height="16" />
+          </Button>
+          {showOrSeparator && (
+            <div className="tw-relative tw-flex tw-items-center tw-text-center tw-text-sm">
+              <div className="tw-flex-1 tw-h-px tw-bg-border-weak" />
+              <span className="tw-px-2 tw-text-muted-foreground">{orText}</span>
+              <div className="tw-flex-1 tw-h-px tw-bg-border-weak" />
+            </div>
+          )}
+        </div>
+      </form>
+    </FormWrapper>
+  );
+}
+
+LoginForm.propTypes = {
+  className: PropTypes.string,
+
+  // Header and sign up section
+  signinHeader: PropTypes.string,
+  signUpText: PropTypes.string,
+  signUpUrl: PropTypes.string,
+  signUpCTA: PropTypes.string,
+
+  // Form fields
+  emailLabel: PropTypes.string,
+  emailPlaceholder: PropTypes.string,
+  passwordLabel: PropTypes.string,
+
+  // Forgot password
+  showForgotPassword: PropTypes.bool,
+  forgotPasswordUrl: PropTypes.string,
+  forgotPasswordText: PropTypes.string,
+
+  // Button and separator
+  signinButtonText: PropTypes.string,
+  orText: PropTypes.string,
+  showOrSeparator: PropTypes.bool,
+
+  // Form functionality
+  onSubmit: PropTypes.func,
+  emailValue: PropTypes.string,
+  passwordValue: PropTypes.string,
+  onEmailChange: PropTypes.func,
+  onPasswordChange: PropTypes.func,
+
+  // Validation and state
+  emailError: PropTypes.string,
+  passwordError: PropTypes.string,
+  isLoading: PropTypes.bool,
+  disabled: PropTypes.bool,
+};
+
+LoginForm.defaultProps = {
+  className: '',
+
+  // Header and sign up section
+  signinHeader: 'Sign in',
+  signUpText: 'New to ToolJet?',
+  signUpUrl: '#',
+  signUpCTA: 'Create an account',
+
+  // Form fields
+  emailLabel: 'Email',
+  emailPlaceholder: 'm@example.com',
+  passwordLabel: 'Password',
+
+  // Forgot password
+  showForgotPassword: true,
+  forgotPasswordUrl: '/forgot-password',
+  forgotPasswordText: 'Forgot?',
+
+  // Button and separator
+  signinButtonText: 'Sign in',
+  orText: 'OR',
+  showOrSeparator: true,
+
+  // Form functionality
+  onSubmit: undefined,
+  emailValue: undefined,
+  passwordValue: undefined,
+  onEmailChange: undefined,
+  onPasswordChange: undefined,
+
+  // Validation and state
+  emailError: undefined,
+  passwordError: undefined,
+  isLoading: false,
+  disabled: false,
+};
diff --git a/frontend/src/components/Auth/PasswordInput.jsx b/frontend/src/components/Auth/PasswordInput.jsx
new file mode 100644
index 0000000000..261b671b61
--- /dev/null
+++ b/frontend/src/components/Auth/PasswordInput.jsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Input } from '@/components/ui/Input/Input.jsx';
+
+import { cn } from '@/lib/utils';
+import { HelperMessage, ValidationMessage } from '@/components/ui/Input/InputUtils/InputUtils';
+import { usePasswordInput } from '@/hooks/usePasswordInput';
+
+export const PasswordInput = ({
+  placeholder = 'Create a password',
+  value,
+  onChange,
+  error,
+  name = 'password',
+  dataCy = 'password',
+  minLength = 5,
+  hint = `Password must be at least ${minLength} characters`,
+  disabled = false,
+  className,
+  validation,
+  isValidatedMessages,
+  required = true,
+  ...props
+}) => {
+  const { isValid, message, handleChange } = usePasswordInput({
+    onChange,
+    validation,
+    isValidatedMessages,
+  });
+
+  return (
+    <div className={cn('tw-mb-0', className)}>
+      <div className="tw-relative">
+        <Input
+          type="password"
+          id={name}
+          name={name}
+          placeholder={placeholder}
+          value={value}
+          onChange={handleChange}
+          required={required}
+          minLength={minLength}
+          disabled={disabled}
+          data-cy={`${dataCy}-input`}
+          {...props}
+        />
+      </div>
+
+      {hint && !error && (
+        <HelperMessage
+          helperText={hint}
+          className="tw-gap-[5px]"
+          labelStyle={`${disabled ? 'tw-text-text-disabled' : ''}`}
+        />
+      )}
+
+      {error && <ValidationMessage response={false} validationMessage={error} className="tw-gap-[5px]" />}
+
+      {(isValid === true || isValid === false) && !disabled && message !== '' && (
+        <ValidationMessage response={isValid} validationMessage={message} className="tw-gap-[5px]" />
+      )}
+    </div>
+  );
+};
+
+PasswordInput.displayName = 'PasswordInput';
+
+PasswordInput.propTypes = {
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  error: PropTypes.string,
+  name: PropTypes.string,
+  dataCy: PropTypes.string,
+  minLength: PropTypes.number,
+  hint: PropTypes.string,
+  disabled: PropTypes.bool,
+  className: PropTypes.string,
+  validation: PropTypes.func,
+  isValidatedMessages: PropTypes.shape({
+    valid: PropTypes.bool,
+    message: PropTypes.string,
+  }),
+  required: PropTypes.bool,
+};
+
+PasswordInput.defaultProps = {
+  placeholder: 'Create a password',
+  value: undefined,
+  onChange: undefined,
+  error: undefined,
+  name: 'password',
+  dataCy: 'password',
+  minLength: 5,
+  hint: undefined,
+  disabled: false,
+  className: undefined,
+  validation: undefined,
+  isValidatedMessages: undefined,
+  required: true,
+};
+
+export default PasswordInput;
diff --git a/frontend/src/components/Auth/Stories/LoginForm.stories.jsx b/frontend/src/components/Auth/Stories/LoginForm.stories.jsx
new file mode 100644
index 0000000000..fc74965362
--- /dev/null
+++ b/frontend/src/components/Auth/Stories/LoginForm.stories.jsx
@@ -0,0 +1,232 @@
+import { LoginForm } from '../LoginForm';
+
+export default {
+  title: 'Auth/LoginForm',
+  component: LoginForm,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    signinHeader: {
+      control: 'text',
+      description: 'The main heading text for the login form',
+    },
+    signUpText: {
+      control: 'text',
+      description: 'Text before the sign up link',
+    },
+    signUpUrl: {
+      control: 'text',
+      description: 'URL for the sign up link',
+    },
+    signUpCTA: {
+      control: 'text',
+      description: 'Call-to-action text for the sign up link',
+    },
+    emailLabel: {
+      control: 'text',
+      description: 'Label for the email input field',
+    },
+    emailPlaceholder: {
+      control: 'text',
+      description: 'Placeholder text for the email input',
+    },
+    passwordLabel: {
+      control: 'text',
+      description: 'Label for the password input field',
+    },
+    showForgotPassword: {
+      control: 'boolean',
+      description: 'Show or hide the forgot password link',
+    },
+    forgotPasswordUrl: {
+      control: 'text',
+      description: 'URL for the forgot password link',
+    },
+    forgotPasswordText: {
+      control: 'text',
+      description: 'Text for the forgot password link',
+    },
+    signinButtonText: {
+      control: 'text',
+      description: 'Text for the submit button',
+    },
+    orText: {
+      control: 'text',
+      description: 'Text for the OR separator',
+    },
+    showOrSeparator: {
+      control: 'boolean',
+      description: 'Show or hide the OR separator',
+    },
+    emailValue: {
+      control: 'text',
+      description: 'Controlled value for email input',
+    },
+    passwordValue: {
+      control: 'text',
+      description: 'Controlled value for password input',
+    },
+    emailError: {
+      control: 'text',
+      description: 'Error message for email field',
+    },
+    passwordError: {
+      control: 'text',
+      description: 'Error message for password field',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Loading state for the form',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disabled state for the form',
+    },
+    onSubmit: {
+      action: 'submitted',
+      description: 'Form submission handler',
+    },
+    onEmailChange: {
+      action: 'email changed',
+      description: 'Email input change handler',
+    },
+    onPasswordChange: {
+      action: 'password changed',
+      description: 'Password input change handler',
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    signinHeader: 'Sign in',
+    signUpText: 'New to ToolJet?',
+    signUpUrl: '#',
+    signUpCTA: 'Create an account',
+    emailLabel: 'Email',
+    emailPlaceholder: 'm@example.com',
+    passwordLabel: 'Password',
+    showForgotPassword: true,
+    forgotPasswordUrl: '/forgot-password',
+    forgotPasswordText: 'Forgot?',
+    signinButtonText: 'Sign in',
+    orText: 'OR',
+    showOrSeparator: true,
+  },
+};
+
+export const CustomHeader = {
+  args: {
+    signinHeader: 'Welcome Back',
+    signUpText: 'New to ToolJet?',
+    signUpUrl: '#',
+    signUpCTA: 'Create an account',
+    emailLabel: 'Email',
+    emailPlaceholder: 'm@example.com',
+    passwordLabel: 'Password',
+    showForgotPassword: true,
+    forgotPasswordUrl: '/forgot-password',
+    forgotPasswordText: 'Forgot?',
+    signinButtonText: 'Sign in',
+    orText: 'OR',
+    showOrSeparator: true,
+  },
+};
+
+export const WithErrors = {
+  args: {
+    signinHeader: 'Sign in',
+    signUpText: 'New to ToolJet?',
+    signUpUrl: '#',
+    signUpCTA: 'Create an account',
+    emailLabel: 'Email',
+    emailPlaceholder: 'm@example.com',
+    passwordLabel: 'Password',
+    showForgotPassword: true,
+    forgotPasswordUrl: '/forgot-password',
+    forgotPasswordText: 'Forgot?',
+    signinButtonText: 'Sign in',
+    orText: 'OR',
+    showOrSeparator: true,
+    emailValue: 'invalid-email',
+    passwordValue: '123',
+    emailError: 'Please enter a valid email address',
+    passwordError: 'Password must be at least 8 characters',
+  },
+};
+
+export const Loading = {
+  args: {
+    signinHeader: 'Sign in',
+    signUpText: 'New to ToolJet?',
+    signUpUrl: '#',
+    signUpCTA: 'Create an account',
+    emailLabel: 'Email',
+    emailPlaceholder: 'm@example.com',
+    passwordLabel: 'Password',
+    showForgotPassword: true,
+    forgotPasswordUrl: '/forgot-password',
+    forgotPasswordText: 'Forgot?',
+    signinButtonText: 'Signing in...',
+    orText: 'OR',
+    showOrSeparator: true,
+    emailValue: 'user@example.com',
+    passwordValue: 'password123',
+    isLoading: true,
+    disabled: true,
+  },
+};
+
+export const CustomSeparator = {
+  args: {
+    signinHeader: 'Sign in',
+    signUpText: 'New to ToolJet?',
+    signUpUrl: '#',
+    signUpCTA: 'Create an account',
+    emailLabel: 'Email',
+    emailPlaceholder: 'm@example.com',
+    passwordLabel: 'Password',
+    showForgotPassword: true,
+    forgotPasswordUrl: '/forgot-password',
+    forgotPasswordText: 'Forgot?',
+    signinButtonText: 'Sign in',
+    orText: 'OR CONTINUE WITH',
+    showOrSeparator: true,
+  },
+};
+
+export const NoSeparator = {
+  args: {
+    signinHeader: 'Sign in',
+    signUpText: 'New to ToolJet?',
+    signUpUrl: '#',
+    signUpCTA: 'Create an account',
+    emailLabel: 'Email',
+    emailPlaceholder: 'm@example.com',
+    passwordLabel: 'Password',
+    showForgotPassword: true,
+    forgotPasswordUrl: '/forgot-password',
+    forgotPasswordText: 'Forgot?',
+    signinButtonText: 'Sign in',
+    orText: 'OR',
+    showOrSeparator: false,
+  },
+};
+
+export const Minimal = {
+  args: {
+    signinHeader: 'Login',
+    signUpText: '',
+    signUpUrl: '#',
+    signUpCTA: '',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your email',
+    passwordLabel: 'Password',
+    showForgotPassword: false,
+    signinButtonText: 'Login',
+    orText: 'OR',
+    showOrSeparator: false,
+  },
+};
diff --git a/frontend/src/components/Auth/Stories/PasswordInput.stories.jsx b/frontend/src/components/Auth/Stories/PasswordInput.stories.jsx
new file mode 100644
index 0000000000..9696ca0446
--- /dev/null
+++ b/frontend/src/components/Auth/Stories/PasswordInput.stories.jsx
@@ -0,0 +1,145 @@
+import React from 'react';
+import PasswordInput from '../PasswordInput';
+
+export default {
+  title: 'Auth/PasswordInput',
+  component: PasswordInput,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label text for the password input',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text for the input field',
+    },
+    value: {
+      control: 'text',
+      description: 'Current value of the password input',
+    },
+    onChange: {
+      action: 'changed',
+      description: 'Callback function when input value changes',
+    },
+    error: {
+      control: 'text',
+      description: 'Error message to display below the input',
+    },
+    name: {
+      control: 'text',
+      description: 'Name attribute for the input field',
+    },
+    dataCy: {
+      control: 'text',
+      description: 'Data-cy attribute for testing',
+    },
+    minLength: {
+      control: 'number',
+      description: 'Minimum length requirement for the password',
+    },
+    hint: {
+      control: 'text',
+      description: 'Hint text to display below the input',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the input is disabled',
+    },
+    showForgotPassword: {
+      control: 'boolean',
+      description: 'Whether to show the forgot password link',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes',
+    },
+  },
+};
+
+const Template = (args) => <PasswordInput {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Password',
+  placeholder: 'Enter your password',
+  value: '',
+  name: 'password',
+  dataCy: 'password',
+  minLength: 8,
+  hint: 'Password must be at least 8 characters',
+  disabled: false,
+  showForgotPassword: false,
+};
+
+export const WithForgotPassword = Template.bind({});
+WithForgotPassword.args = {
+  ...Default.args,
+  showForgotPassword: true,
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+  ...Default.args,
+  value: '123',
+  error: 'Password must be at least 8 characters long',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  ...Default.args,
+  value: 'mypassword123',
+  disabled: true,
+};
+
+export const CustomHint = Template.bind({});
+CustomHint.args = {
+  ...Default.args,
+  hint: 'Use a strong password with letters, numbers, and symbols',
+};
+
+export const CustomLabel = Template.bind({});
+CustomLabel.args = {
+  ...Default.args,
+  label: 'New Password',
+  placeholder: 'Create a new password',
+  hint: 'Choose a secure password for your account',
+};
+
+export const WithValue = Template.bind({});
+WithValue.args = {
+  ...Default.args,
+  value: 'mySecurePassword123!',
+};
+
+export const ShortPassword = Template.bind({});
+ShortPassword.args = {
+  ...Default.args,
+  minLength: 12,
+  hint: 'Password must be at least 12 characters',
+  value: 'short',
+  error: 'Password is too short',
+};
+
+export const LoginFormStyle = Template.bind({});
+LoginFormStyle.args = {
+  ...Default.args,
+  label: 'Password',
+  placeholder: 'Enter your password',
+  showForgotPassword: true,
+  hint: 'Enter your account password',
+};
+
+export const SignupFormStyle = Template.bind({});
+SignupFormStyle.args = {
+  ...Default.args,
+  label: 'Create Password',
+  placeholder: 'Create a strong password',
+  hint: 'Password must be at least 8 characters with letters and numbers',
+};
+
+
+
diff --git a/frontend/src/components/login-form.jsx b/frontend/src/components/login-form.jsx
new file mode 100644
index 0000000000..002e142ce7
--- /dev/null
+++ b/frontend/src/components/login-form.jsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import Logo from '@/modules/common/resources/images/Logo';
+
+export function LoginForm({ className, ...props }) {
+  return (
+    <form className={cn('tw-flex tw-flex-col tw-gap-6', className)} {...props}>
+      <div className="tw-flex tw-flex-col tw-items-center tw-gap-2 tw-text-center">
+        <h1 className="tw-text-2xl tw-font-bold">Login to your account</h1>
+        <p className="tw-text-balance tw-text-sm tw-text-muted-foreground">
+          Enter your email below to login to your account
+        </p>
+      </div>
+      <div className="tw-grid tw-gap-6">
+        <div className="tw-grid tw-gap-2">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" type="email" placeholder="m@example.com" required />
+        </div>
+        <div className="tw-grid tw-gap-2">
+          <div className="tw-flex tw-items-center">
+            <Label htmlFor="password">Password</Label>
+            <a href="#" className="tw-ml-auto tw-text-sm tw-underline-offset-4 hover:tw-underline">
+              Forgot your password?
+            </a>
+          </div>
+          <Input id="password" type="password" required />
+        </div>
+        <Button type="submit" className="tw-w-full">
+          Login
+        </Button>
+        <div className="tw-relative tw-text-center tw-text-sm after:tw-absolute after:tw-inset-0 after:tw-top-1/2 after:tw-z-0 after:tw-flex after:tw-items-center after:tw-border-t after:tw-border-border">
+          <span className="tw-relative tw-z-10 tw-bg-background tw-px-2 tw-text-muted-foreground">
+            Or continue with
+          </span>
+        </div>
+        <Button variant="outline" className="tw-w-full">
+          
+          Login with GitHub
+        </Button>
+      </div>
+      <div className="tw-text-center tw-text-sm">
+        Don&apos;t have an account?{' '}
+        <a href="#" className="tw-underline tw-underline-offset-4">
+          Sign up
+        </a>
+      </div>
+    </form>
+  );
+}
diff --git a/frontend/src/components/ui/Input/CommonInput/Index.jsx b/frontend/src/components/ui/Input/CommonInput/Index.jsx
index c992db5aaa..5f6f657029 100644
--- a/frontend/src/components/ui/Input/CommonInput/Index.jsx
+++ b/frontend/src/components/ui/Input/CommonInput/Index.jsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import NumberInput from './NumberInput';
 import TextInput from './TextInput';
 import { HelperMessage, InputLabel, ValidationMessage } from '../InputUtils/InputUtils';
-import { ButtonSolid } from '../../../../_components/AppButton';
+import { Button } from '@/components/ui/button';
 import { generateCypressDataCy } from '../../../../modules/common/helpers/cypressHelpers.js';
 
 const CommonInput = ({ label, helperText, disabled, required, onChange: change, ...restProps }) => {
@@ -62,8 +62,7 @@ const CommonInput = ({ label, helperText, disabled, required, onChange: change,
         {type === 'password' && (
           <div className="d-flex justify-content-between w-100">
             <div className="mx-1 col">
-              <ButtonSolid
-                className="datasource-edit-btn mb-2"
+              <Button
                 type="a"
                 variant="tertiary"
                 target="_blank"
@@ -73,7 +72,7 @@ const CommonInput = ({ label, helperText, disabled, required, onChange: change,
                 data-cy={`button-${generateCypressDataCy(isEditing ? 'Cancel' : 'Edit')}`}
               >
                 {isEditing ? 'Cancel' : 'Edit'}
-              </ButtonSolid>
+              </Button>
             </div>
 
             <div className="col-auto mb-2">
diff --git a/frontend/src/components/ui/Input/Input.jsx b/frontend/src/components/ui/Input/Input.jsx
index 7e0eda7465..0c6b1b27ca 100644
--- a/frontend/src/components/ui/Input/Input.jsx
+++ b/frontend/src/components/ui/Input/Input.jsx
@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { cn } from '@/lib/utils';
 import { inputVariants } from './InputUtils/Variants';
-import SolidIcon from '../../../_ui/Icon/SolidIcons';
+import { Eye, EyeOff } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
 import { useEffect } from 'react';
 
-const Input = React.forwardRef(
-  ({ className, size, type, multiline, response, isWorkspaceConstant, rows = 3, ...props }, ref) => {
+export const Input = React.forwardRef(
+  ({ className, size, type, multiline, response, isValid, isWorkspaceConstant, rows = 3, ...props }, ref) => {
     const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);
     const isPasswordField = type === 'password';
 
@@ -23,6 +25,12 @@ const Input = React.forwardRef(
 
     const validationClass = response === true ? 'valid-textarea' : response === false ? 'invalid-textarea' : '';
 
+    const inputStyle = ` ${
+      props.disabled ? 'placeholder:tw-text-text-placeholder' : 'placeholder:tw-text-text-default'
+    } ${
+      isValid === true ? '!tw-border-border-success-strong' : isValid === false ? '!tw-border-border-danger-strong' : ''
+    }`;
+
     return (
       <div className="design-component-inputs">
         {multiline ? (
@@ -37,23 +45,30 @@ const Input = React.forwardRef(
             {...props}
           />
         ) : (
-          <input
-            type={isPasswordField && isPasswordVisible ? 'text' : type}
-            className={cn(
-              inputVariants({ size }),
-              `tw-peer tw-flex tw-text-[12px]/[18px] tw-w-full tw-rounded-[8px] tw-border-[1px] tw-border-solid tw-bg-background-surface-layer-01 tw-py-[7px] tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${props.styles}`,
-              className
-            )}
-            ref={ref}
-            {...props}
-          />
-        )}
-        {isPasswordField && !multiline && (
-          <div onClick={togglePasswordVisibility}>
-            {isPasswordVisible ? (
-              <SolidIcon className="eye-icon" name="eye" />
-            ) : (
-              <SolidIcon className="eye-icon" name="eyedisable" />
+          <div className="tw-relative">
+            <input
+              type={isPasswordField && isPasswordVisible ? 'text' : type}
+              className={cn(
+                inputVariants({ size }),
+                `tw-peer tw-flex tw-text-[12px]/[18px] tw-w-full tw-rounded-[8px] tw-border tw-border-solid tw-border-border-strong tw-bg-background-surface-layer-01 tw-px-3 tw-py-[7px] tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${props.styles}`,
+                className,
+                inputStyle
+              )}
+              ref={ref}
+              {...props}
+            />
+            {isPasswordField && (
+              <Button
+                type="button"
+                variant="ghost"
+                iconOnly
+                className="tw-absolute tw-right-1 tw-top-1/2 tw-transform tw--translate-y-1/2 tw-bg-none tw-border-none tw-cursor-pointer tw-p-1 tw-text-icon-strong hover:tw-text-icon-default focus:tw-outline-none"
+                onClick={togglePasswordVisibility}
+                disabled={props.disabled}
+                aria-label={isPasswordVisible ? 'Hide password' : 'Show password'}
+              >
+                {isPasswordVisible ? <EyeOff width="16" height="16" /> : <Eye width="16" height="16" />}
+              </Button>
             )}
           </div>
         )}
@@ -62,5 +77,3 @@ const Input = React.forwardRef(
   }
 );
 Input.displayName = 'Input';
-
-export { Input };
diff --git a/frontend/src/components/ui/Label/Label.jsx b/frontend/src/components/ui/Label/Label.jsx
index b691f8fb58..907bec21cd 100644
--- a/frontend/src/components/ui/Label/Label.jsx
+++ b/frontend/src/components/ui/Label/Label.jsx
@@ -5,11 +5,11 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
-const labelVariants = cva('peer-disabled:tw-cursor-not-allowed peer-disabled:tw-opacity-70', {
+const labelVariants = cva('tw-font-medium peer-disabled:tw-cursor-not-allowed peer-disabled:tw-opacity-70', {
   variants: {
     type: {
-      label: `tw-text-text-default`,
-      helper: `tw-text-text-placeholder`,
+      label: 'tw-text-text-default',
+      helper: 'tw-text-text-placeholder',
     },
   },
   compoundVariants: [
@@ -36,7 +36,7 @@ const labelVariants = cva('peer-disabled:tw-cursor-not-allowed peer-disabled:tw-
   ],
 });
 
-const Label = React.forwardRef(({ className, size, type, ...restProps }, ref) => (
+const Label = React.forwardRef(({ className, size = 'default', type = 'label', ...restProps }, ref) => (
   <LabelPrimitive.Root ref={ref} className={cn(labelVariants({ type, size }), className)} {...restProps} />
 ));
 Label.displayName = LabelPrimitive.Root.displayName;
diff --git a/frontend/src/components/ui/button.jsx b/frontend/src/components/ui/button.jsx
new file mode 100644
index 0000000000..a6fffcd550
--- /dev/null
+++ b/frontend/src/components/ui/button.jsx
@@ -0,0 +1,3 @@
+import { Button, buttonVariants } from './Button/Button';
+
+export { Button, buttonVariants };
diff --git a/frontend/src/components/ui/card.jsx b/frontend/src/components/ui/card.jsx
new file mode 100644
index 0000000000..40c320166b
--- /dev/null
+++ b/frontend/src/components/ui/card.jsx
@@ -0,0 +1,3 @@
+import { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './Card/Index';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
diff --git a/frontend/src/components/ui/input.jsx b/frontend/src/components/ui/input.jsx
new file mode 100644
index 0000000000..ac963997f0
--- /dev/null
+++ b/frontend/src/components/ui/input.jsx
@@ -0,0 +1,3 @@
+import InputComponent from './Input/Index';
+
+export { InputComponent as Input };
diff --git a/frontend/src/components/ui/label.jsx b/frontend/src/components/ui/label.jsx
new file mode 100644
index 0000000000..25def6d8a2
--- /dev/null
+++ b/frontend/src/components/ui/label.jsx
@@ -0,0 +1,3 @@
+import { Label } from './Label/Label';
+
+export { Label };
diff --git a/frontend/src/hooks/usePasswordInput.js b/frontend/src/hooks/usePasswordInput.js
new file mode 100644
index 0000000000..ede924ff1d
--- /dev/null
+++ b/frontend/src/hooks/usePasswordInput.js
@@ -0,0 +1,47 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Custom hook for password input functionality
+ * @param {Object} options - Configuration options
+ * @param {Function} options.onChange - Change handler function
+ * @param {Function} options.validation - Validation function
+ * @param {Object} options.isValidatedMessages - External validation messages
+ * @param {boolean} options.disabled - Whether input is disabled
+ * @returns {Object} Password input state and handlers
+ */
+export const usePasswordInput = ({ onChange, validation, isValidatedMessages }) => {
+  const [isValid, setIsValid] = useState(null);
+  const [message, setMessage] = useState('');
+
+  /**
+   * Handle input change with validation
+   * @param {Event} e - Input change event
+   */
+  const handleChange = (e) => {
+    if (validation) {
+      const validateObj = validation(e);
+      setIsValid(validateObj.valid);
+      setMessage(validateObj.message);
+      onChange(e, validateObj);
+    } else {
+      onChange(e);
+    }
+  };
+
+  // Update validation state when external validation messages change
+  useEffect(() => {
+    if (isValidatedMessages) {
+      setIsValid(isValidatedMessages.valid);
+      setMessage(isValidatedMessages.message);
+    }
+  }, [isValidatedMessages]);
+
+  return {
+    // State
+    isValid,
+    message,
+
+    // Handlers
+    handleChange,
+  };
+};
diff --git a/frontend/src/modules/onboarding/components/OnboardingBackgroundWrapper/OnboardingBackgroundWrapper.jsx b/frontend/src/modules/onboarding/components/OnboardingBackgroundWrapper/OnboardingBackgroundWrapper.jsx
index 770bb4cbe1..35129447ae 100644
--- a/frontend/src/modules/onboarding/components/OnboardingBackgroundWrapper/OnboardingBackgroundWrapper.jsx
+++ b/frontend/src/modules/onboarding/components/OnboardingBackgroundWrapper/OnboardingBackgroundWrapper.jsx
@@ -2,6 +2,9 @@ import React from 'react';
 import './resources/styles/background.styles.scss';
 import { defaultWhiteLabellingSettings } from '@white-label/whiteLabelling';
 import { useWhiteLabellingStore } from '@/_stores/whiteLabellingStore';
+import { GalleryVerticalEnd } from 'lucide-react';
+
+import { LoginForm } from '@/components/login-form';
 import WhiteLabellingBackgroundWrapper from '@/modules/onboarding/components/WhiteLabellingBackgroundWrapper';
 const OnboardingBackgroundWrapper = ({
   LeftSideComponent,
@@ -19,27 +22,27 @@ const OnboardingBackgroundWrapper = ({
     return <WhiteLabellingBackgroundWrapper MiddleComponent={() => <ContentComponent />} />;
   }
   return (
-    <div className="onboarding-background-wrapper">
-      <div className="container-fluid h-100">
-        {MiddleComponent ? (
-          <div className="row h-100">
-            <div className="col-12 d-flex justify-content-center align-items-center">
-              <MiddleComponent />
+    <div className="tw-grid tw-min-h-svh lg:tw-grid-cols-2">
+      <div className="tw-flex tw-flex-col tw-gap-4 tw-p-6 md:tw-p-10">
+        <div className="tw-flex tw-justify-center tw-gap-2 md:tw-justify-start">
+          <a href="#" className="tw-flex tw-items-center tw-gap-2 tw-font-medium">
+            <div className="tw-bg-primary tw-text-primary-foreground tw-flex tw-size-6 tw-items-center tw-justify-center tw-rounded-md">
+              <GalleryVerticalEnd className="tw-size-4" />
             </div>
+            Acme Inc.
+          </a>
+        </div>
+        <div className="tw-flex tw-flex-1 tw-items-center tw-justify-center">
+          <div className="tw-w-full tw-max-w-xs">
+            <LoginForm />
           </div>
-        ) : (
-          <div className="row h-100">
-            <div className={`col-md-${leftSize} leftside-wrapper d-flex`}>
-              <LeftSideComponent />
-            </div>
-            <div className={`col-md-${rightSize} rightside-wrapper d-flex align-items-center justify-content-end`}>
-              <RightSideComponent />
-            </div>
-          </div>
-        )}
+        </div>
+      </div>
+      <div className="tw-bg-muted tw-relative tw-hidden lg:tw-block">
+        <RightSideComponent />
       </div>
     </div>
   );
 };
 
-export default OnboardingBackgroundWrapper;
+export default OnboardingBackgroundWrapper;
\ No newline at end of file
diff --git a/frontend/src/stories/Configure.mdx b/frontend/src/stories/Configure.mdx
index a50fcea3ed..77cbbcd0fe 100644
--- a/frontend/src/stories/Configure.mdx
+++ b/frontend/src/stories/Configure.mdx
@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 import Github from "./assets/github.svg";
 import Discord from "./assets/discord.svg";

From be552c8f23eecda3328c86c86dbb4fe56a1f423f Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Tue, 16 Sep 2025 18:53:41 +0530
Subject: [PATCH 050/157] Add GitHub and Google sign-in buttons, along with
 corresponding icons and stories

- Introduced `GitHubSigninButton` and `GoogleSigninButton` components for authentication.
- Added `GitHub` and `Google` icons to the solid icons collection.
- Updated the `SolidIcons` index to include new icons.
- Created Storybook stories for both sign-in buttons to demonstrate usage and variations.
- Refactored `LoginForm` to support external validation and improved input handling.
---
 frontend/src/_ui/Icon/solidIcons/GitHub.jsx   |  26 ++
 frontend/src/_ui/Icon/solidIcons/Google.jsx   |  58 +++
 frontend/src/_ui/Icon/solidIcons/index.js     |   6 +
 .../components/Auth/GitHubSigninButton.jsx    |  21 +
 .../components/Auth/GoogleSigninButton.jsx    |  21 +
 frontend/src/components/Auth/LoginForm.jsx    |  76 ++--
 .../src/components/Auth/PasswordInput.jsx     | 103 -----
 .../Stories/GitHubSigninButton.stories.jsx    |  62 +++
 .../Stories/GoogleSigninButton.stories.jsx    |  62 +++
 .../Auth/Stories/LoginForm.stories.jsx        | 390 ++++++++++++------
 .../Auth/Stories/PasswordInput.stories.jsx    | 145 -------
 .../components/ui/Input/CommonInput/Index.jsx |   5 +-
 12 files changed, 562 insertions(+), 413 deletions(-)
 create mode 100644 frontend/src/_ui/Icon/solidIcons/GitHub.jsx
 create mode 100644 frontend/src/_ui/Icon/solidIcons/Google.jsx
 create mode 100644 frontend/src/components/Auth/GitHubSigninButton.jsx
 create mode 100644 frontend/src/components/Auth/GoogleSigninButton.jsx
 delete mode 100644 frontend/src/components/Auth/PasswordInput.jsx
 create mode 100644 frontend/src/components/Auth/Stories/GitHubSigninButton.stories.jsx
 create mode 100644 frontend/src/components/Auth/Stories/GoogleSigninButton.stories.jsx
 delete mode 100644 frontend/src/components/Auth/Stories/PasswordInput.stories.jsx

diff --git a/frontend/src/_ui/Icon/solidIcons/GitHub.jsx b/frontend/src/_ui/Icon/solidIcons/GitHub.jsx
new file mode 100644
index 0000000000..5fcb4037e9
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/GitHub.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+const GitHub = (props) => {
+  const { width = 24, height = 24, ...restProps } = props;
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...restProps}
+    >
+      <title>GitHub</title>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20 8C13.37 8 8 13.5058 8 20.3035C8 25.7478 11.435 30.3463 16.205 31.9765C16.805 32.0842 17.03 31.715 17.03 31.3921C17.03 31.0999 17.015 30.131 17.015 29.1005C14 29.6696 13.22 28.347 12.98 27.6549C12.845 27.3012 12.26 26.2092 11.75 25.917C11.33 25.6863 10.73 25.1173 11.735 25.1019C12.68 25.0865 13.355 25.9939 13.58 26.363C14.66 28.2239 16.385 27.701 17.075 27.3781C17.18 26.5783 17.495 26.04 17.84 25.7325C15.17 25.4249 12.38 24.3637 12.38 19.6576C12.38 18.3196 12.845 17.2123 13.61 16.351C13.49 16.0434 13.07 14.7823 13.73 13.0906C13.73 13.0906 14.735 12.7676 17.03 14.3517C17.99 14.0749 19.01 13.9365 20.03 13.9365C21.05 13.9365 22.07 14.0749 23.03 14.3517C25.325 12.7522 26.33 13.0906 26.33 13.0906C26.99 14.7823 26.57 16.0434 26.45 16.351C27.215 17.2123 27.68 18.3042 27.68 19.6576C27.68 24.3791 24.875 25.4249 22.205 25.7325C22.64 26.1169 23.015 26.8552 23.015 28.0086C23.015 29.6542 23 30.9768 23 31.3921C23 31.715 23.225 32.0995 23.825 31.9765C26.2072 31.1519 28.2773 29.5822 29.7438 27.4882C31.2103 25.3942 31.9994 22.8814 32 20.3035C32 13.5058 26.63 8 20 8Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default GitHub;
diff --git a/frontend/src/_ui/Icon/solidIcons/Google.jsx b/frontend/src/_ui/Icon/solidIcons/Google.jsx
new file mode 100644
index 0000000000..0dff57d02b
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/Google.jsx
@@ -0,0 +1,58 @@
+import React from "react";
+
+const Google = (props) => {
+  const { width = 24, height = 24, ...restProps } = props;
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...restProps}
+    >
+      <title>Google</title>
+      <g clipPath="url(#clip0_139_4388)">
+        <g clipPath="url(#clip1_139_4388)">
+          <path
+            d="M31.745 20.27C31.745 19.48 31.675 18.73 31.555 18H20.255V22.51H26.725C26.435 23.99 25.585 25.24 24.325 26.09V29.09H28.185C30.445 27 31.745 23.92 31.745 20.27Z"
+            fill="#4285F4"
+          />
+          <path
+            d="M20.255 32C23.495 32 26.205 30.92 28.185 29.09L24.325 26.09C23.245 26.81 21.875 27.25 20.255 27.25C17.125 27.25 14.475 25.14 13.525 22.29H9.545V25.38C11.515 29.3 15.565 32 20.255 32Z"
+            fill="#34A853"
+          />
+          <path
+            d="M13.525 22.29C13.275 21.57 13.145 20.8 13.145 20C13.145 19.2 13.285 18.43 13.525 17.71V14.62H9.545C8.725 16.24 8.255 18.06 8.255 20C8.255 21.94 8.725 23.76 9.545 25.38L13.525 22.29Z"
+            fill="#FBBC05"
+          />
+          <path
+            d="M20.255 12.75C22.025 12.75 23.605 13.36 24.855 14.55L28.275 11.13C26.205 9.19 23.495 8 20.255 8C15.565 8 11.515 10.7 9.545 14.62L13.525 17.71C14.475 14.86 17.125 12.75 20.255 12.75Z"
+            fill="#EA4335"
+          />
+        </g>
+      </g>
+      <defs>
+        <clipPath id="clip0_139_4388">
+          <rect
+            width="24"
+            height="24"
+            fill="white"
+            transform="translate(8 8)"
+          />
+        </clipPath>
+        <clipPath id="clip1_139_4388">
+          <rect
+            width="23.49"
+            height="24"
+            fill="white"
+            transform="translate(8.255 8)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default Google;
diff --git a/frontend/src/_ui/Icon/solidIcons/index.js b/frontend/src/_ui/Icon/solidIcons/index.js
index 240bed8876..4efd3f65e6 100644
--- a/frontend/src/_ui/Icon/solidIcons/index.js
+++ b/frontend/src/_ui/Icon/solidIcons/index.js
@@ -287,6 +287,8 @@ import AITopupWhite from './AITopupWhite.jsx';
 import AITopupGrey from './AITopupGrey.jsx';
 import MobileEmptyStateIcon from './MobileEmptyStateIcon';
 import MobileEmptyStateIconDark from './MobileEmptyStateIconDark';
+import Google from './Google.jsx';
+import GitHub from './GitHub.jsx';
 
 const Icon = (props) => {
   switch (props.name) {
@@ -867,6 +869,10 @@ const Icon = (props) => {
       return <AITopupWhite {...props} />;
     case 'ai-topup-grey':
       return <AITopupGrey {...props} />;
+    case 'google':
+      return <Google {...props} />;
+    case 'github':
+      return <GitHub {...props} />;
     default:
       return <Apps {...props} />;
   }
diff --git a/frontend/src/components/Auth/GitHubSigninButton.jsx b/frontend/src/components/Auth/GitHubSigninButton.jsx
new file mode 100644
index 0000000000..cd4b75c32e
--- /dev/null
+++ b/frontend/src/components/Auth/GitHubSigninButton.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+
+export const GitHubSigninButton = ({ onClick, icon, text, dataCy }) => {
+  return (
+    <Button
+      onClick={onClick}
+      data-cy={dataCy}
+      type="button"
+      variant="outline"
+      size="large"
+      className="tw-justify-center"
+    >
+      <SolidIcon name="github" />
+      <span className="sso-text" data-cy={`${dataCy}-text`}>
+        {text}
+      </span>
+    </Button>
+  );
+};
diff --git a/frontend/src/components/Auth/GoogleSigninButton.jsx b/frontend/src/components/Auth/GoogleSigninButton.jsx
new file mode 100644
index 0000000000..4246f24ef2
--- /dev/null
+++ b/frontend/src/components/Auth/GoogleSigninButton.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+
+export const GoogleSigninButton = ({ onClick, icon, text, dataCy }) => {
+  return (
+    <Button
+      onClick={onClick}
+      data-cy={dataCy}
+      type="button"
+      variant="outline"
+      size="large"
+      className="tw-justify-center"
+    >
+      <SolidIcon name="google" />
+      <span className="sso-text" data-cy={`${dataCy}-text`}>
+        {text}
+      </span>
+    </Button>
+  );
+};
diff --git a/frontend/src/components/Auth/LoginForm.jsx b/frontend/src/components/Auth/LoginForm.jsx
index 8e84d20466..f6fb490304 100644
--- a/frontend/src/components/Auth/LoginForm.jsx
+++ b/frontend/src/components/Auth/LoginForm.jsx
@@ -5,33 +5,33 @@ import { CornerDownLeft } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/Input/Input.jsx';
+import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { FormWrapper } from '@/components/Auth/FormWrapper';
-import { PasswordInput } from '@/components/Auth/PasswordInput';
 
 export function LoginForm({ className, ...props }) {
   const {
     // Header and sign up section
-    signinHeader = 'Sign in',
-    signUpText = 'New to ToolJet?',
-    signUpUrl = '#',
-    signUpCTA = 'Create an account',
+    signinHeader,
+    signUpText,
+    signUpUrl,
+    signUpCTA,
 
     // Form fields
-    emailLabel = 'Email',
-    emailPlaceholder = 'm@example.com',
-    passwordLabel = 'Password',
+    emailLabel,
+    emailPlaceholder,
+    passwordLabel,
+    passwordPlaceholder,
 
     // Forgot password
-    showForgotPassword = true,
-    forgotPasswordUrl = '/forgot-password',
-    forgotPasswordText = 'Forgot?',
+    showForgotPassword,
+    forgotPasswordUrl,
+    forgotPasswordText,
 
     // Button and separator
-    signinButtonText = 'Sign in',
-    orText = 'OR',
-    showOrSeparator = true,
+    signinButtonText,
+    orText,
+    showOrSeparator,
 
     // Form functionality
     onSubmit,
@@ -41,15 +41,17 @@ export function LoginForm({ className, ...props }) {
     onPasswordChange,
 
     // Validation and state
-    emailError,
-    passwordError,
-    isLoading = false,
-    disabled = false,
+    emailValidation,
+    passwordValidation,
+    emailValidationMessage,
+    passwordValidationMessage,
+    isLoading,
+    disabled,
   } = props;
   return (
     <FormWrapper>
       <form className={cn('tw-flex tw-flex-col tw-gap-6', className)} onSubmit={onSubmit} {...props}>
-        <div className="tw-flex tw-flex-col tw-gap-0.5">
+        <div className="tw-flex tw-flex-col tw-gap-0.5 tw-min-w-96">
           <h1 className="tw-text-2xl tw-font-bold tw-mb-0" data-cy="no-login-methods-warning">
             {signinHeader}
           </h1>
@@ -71,18 +73,18 @@ export function LoginForm({ className, ...props }) {
         </div>
         <div className="tw-grid tw-gap-4">
           <div className="tw-grid tw-gap-0.5">
-            <Label htmlFor="email">{emailLabel}</Label>
             <Input
-              size="large"
-              id="email"
+              label={emailLabel}
               type="email"
               placeholder={emailPlaceholder}
               value={emailValue}
               onChange={onEmailChange}
               disabled={disabled}
               required
+              validation={emailValidation}
+              isValidatedMessages={emailValidationMessage}
+              size="large"
             />
-            {emailError && <p className="tw-text-sm tw-text-red-500 tw-mt-1">{emailError}</p>}
           </div>
           <div className="tw-grid tw-gap-0.5">
             <div className="tw-flex tw-items-center tw-justify-between">
@@ -98,17 +100,18 @@ export function LoginForm({ className, ...props }) {
                 </Link>
               )}
             </div>
-            <PasswordInput
-              id="password"
+            <Input
               type="password"
-              size="large"
-              hint=""
+              placeholder={passwordPlaceholder}
               value={passwordValue}
               onChange={onPasswordChange}
               disabled={disabled}
+              showEncryption={false}
               required
+              validation={passwordValidation}
+              isValidatedMessages={passwordValidationMessage}
+              size="large"
             />
-            {passwordError && <p className="tw-text-sm tw-text-red-500 tw-mt-1">{passwordError}</p>}
           </div>
           <Button
             size="large"
@@ -165,8 +168,10 @@ LoginForm.propTypes = {
   onPasswordChange: PropTypes.func,
 
   // Validation and state
-  emailError: PropTypes.string,
-  passwordError: PropTypes.string,
+  emailValidation: PropTypes.func,
+  passwordValidation: PropTypes.func,
+  emailValidationMessage: PropTypes.object,
+  passwordValidationMessage: PropTypes.object,
   isLoading: PropTypes.bool,
   disabled: PropTypes.bool,
 };
@@ -182,8 +187,9 @@ LoginForm.defaultProps = {
 
   // Form fields
   emailLabel: 'Email',
-  emailPlaceholder: 'm@example.com',
+  emailPlaceholder: 'Enter your work email',
   passwordLabel: 'Password',
+  passwordPlaceholder: 'Enter password',
 
   // Forgot password
   showForgotPassword: true,
@@ -203,8 +209,10 @@ LoginForm.defaultProps = {
   onPasswordChange: undefined,
 
   // Validation and state
-  emailError: undefined,
-  passwordError: undefined,
+  emailValidation: undefined,
+  passwordValidation: undefined,
+  emailValidationMessage: undefined,
+  passwordValidationMessage: undefined,
   isLoading: false,
   disabled: false,
 };
diff --git a/frontend/src/components/Auth/PasswordInput.jsx b/frontend/src/components/Auth/PasswordInput.jsx
deleted file mode 100644
index 261b671b61..0000000000
--- a/frontend/src/components/Auth/PasswordInput.jsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Input } from '@/components/ui/Input/Input.jsx';
-
-import { cn } from '@/lib/utils';
-import { HelperMessage, ValidationMessage } from '@/components/ui/Input/InputUtils/InputUtils';
-import { usePasswordInput } from '@/hooks/usePasswordInput';
-
-export const PasswordInput = ({
-  placeholder = 'Create a password',
-  value,
-  onChange,
-  error,
-  name = 'password',
-  dataCy = 'password',
-  minLength = 5,
-  hint = `Password must be at least ${minLength} characters`,
-  disabled = false,
-  className,
-  validation,
-  isValidatedMessages,
-  required = true,
-  ...props
-}) => {
-  const { isValid, message, handleChange } = usePasswordInput({
-    onChange,
-    validation,
-    isValidatedMessages,
-  });
-
-  return (
-    <div className={cn('tw-mb-0', className)}>
-      <div className="tw-relative">
-        <Input
-          type="password"
-          id={name}
-          name={name}
-          placeholder={placeholder}
-          value={value}
-          onChange={handleChange}
-          required={required}
-          minLength={minLength}
-          disabled={disabled}
-          data-cy={`${dataCy}-input`}
-          {...props}
-        />
-      </div>
-
-      {hint && !error && (
-        <HelperMessage
-          helperText={hint}
-          className="tw-gap-[5px]"
-          labelStyle={`${disabled ? 'tw-text-text-disabled' : ''}`}
-        />
-      )}
-
-      {error && <ValidationMessage response={false} validationMessage={error} className="tw-gap-[5px]" />}
-
-      {(isValid === true || isValid === false) && !disabled && message !== '' && (
-        <ValidationMessage response={isValid} validationMessage={message} className="tw-gap-[5px]" />
-      )}
-    </div>
-  );
-};
-
-PasswordInput.displayName = 'PasswordInput';
-
-PasswordInput.propTypes = {
-  placeholder: PropTypes.string,
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-  error: PropTypes.string,
-  name: PropTypes.string,
-  dataCy: PropTypes.string,
-  minLength: PropTypes.number,
-  hint: PropTypes.string,
-  disabled: PropTypes.bool,
-  className: PropTypes.string,
-  validation: PropTypes.func,
-  isValidatedMessages: PropTypes.shape({
-    valid: PropTypes.bool,
-    message: PropTypes.string,
-  }),
-  required: PropTypes.bool,
-};
-
-PasswordInput.defaultProps = {
-  placeholder: 'Create a password',
-  value: undefined,
-  onChange: undefined,
-  error: undefined,
-  name: 'password',
-  dataCy: 'password',
-  minLength: 5,
-  hint: undefined,
-  disabled: false,
-  className: undefined,
-  validation: undefined,
-  isValidatedMessages: undefined,
-  required: true,
-};
-
-export default PasswordInput;
diff --git a/frontend/src/components/Auth/Stories/GitHubSigninButton.stories.jsx b/frontend/src/components/Auth/Stories/GitHubSigninButton.stories.jsx
new file mode 100644
index 0000000000..bd1ab5de7e
--- /dev/null
+++ b/frontend/src/components/Auth/Stories/GitHubSigninButton.stories.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { GitHubSigninButton } from '../GitHubSigninButton';
+
+export default {
+  title: 'Auth/GitHubSigninButton',
+  component: GitHubSigninButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    onClick: {
+      action: 'clicked',
+      description: 'Function called when the button is clicked',
+    },
+    text: {
+      control: 'text',
+      description: 'Text displayed on the button',
+    },
+    dataCy: {
+      control: 'text',
+      description: 'Data-cy attribute for testing',
+    },
+  },
+};
+
+// Template for creating stories
+const Template = (args) => <GitHubSigninButton {...args} />;
+
+// Default story
+export const Default = Template.bind({});
+Default.args = {
+  text: 'Continue with GitHub',
+  dataCy: 'github-signin-button',
+};
+
+// Custom text story
+export const CustomText = Template.bind({});
+CustomText.args = {
+  text: 'Sign in with GitHub',
+  dataCy: 'github-signin-custom',
+};
+
+// Short text story
+export const ShortText = Template.bind({});
+ShortText.args = {
+  text: 'GitHub',
+  dataCy: 'github-signin-short',
+};
+
+// Long text story
+export const LongText = Template.bind({});
+LongText.args = {
+  text: 'Continue with your GitHub account',
+  dataCy: 'github-signin-long',
+};
+
+// Without data-cy story
+export const WithoutDataCy = Template.bind({});
+WithoutDataCy.args = {
+  text: 'Continue with GitHub',
+};
diff --git a/frontend/src/components/Auth/Stories/GoogleSigninButton.stories.jsx b/frontend/src/components/Auth/Stories/GoogleSigninButton.stories.jsx
new file mode 100644
index 0000000000..99de75efea
--- /dev/null
+++ b/frontend/src/components/Auth/Stories/GoogleSigninButton.stories.jsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { GoogleSigninButton } from '../GoogleSigninButton';
+
+export default {
+  title: 'Auth/GoogleSigninButton',
+  component: GoogleSigninButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    onClick: {
+      action: 'clicked',
+      description: 'Function called when the button is clicked',
+    },
+    text: {
+      control: 'text',
+      description: 'Text displayed on the button',
+    },
+    dataCy: {
+      control: 'text',
+      description: 'Data-cy attribute for testing',
+    },
+  },
+};
+
+// Template for creating stories
+const Template = (args) => <GoogleSigninButton {...args} />;
+
+// Default story
+export const Default = Template.bind({});
+Default.args = {
+  text: 'Continue with Google',
+  dataCy: 'google-signin-button',
+};
+
+// Custom text story
+export const CustomText = Template.bind({});
+CustomText.args = {
+  text: 'Sign in with Google',
+  dataCy: 'google-signin-custom',
+};
+
+// Short text story
+export const ShortText = Template.bind({});
+ShortText.args = {
+  text: 'Google',
+  dataCy: 'google-signin-short',
+};
+
+// Long text story
+export const LongText = Template.bind({});
+LongText.args = {
+  text: 'Continue with your Google account',
+  dataCy: 'google-signin-long',
+};
+
+// Without data-cy story
+export const WithoutDataCy = Template.bind({});
+WithoutDataCy.args = {
+  text: 'Continue with Google',
+};
diff --git a/frontend/src/components/Auth/Stories/LoginForm.stories.jsx b/frontend/src/components/Auth/Stories/LoginForm.stories.jsx
index fc74965362..065e939501 100644
--- a/frontend/src/components/Auth/Stories/LoginForm.stories.jsx
+++ b/frontend/src/components/Auth/Stories/LoginForm.stories.jsx
@@ -1,179 +1,200 @@
-import { LoginForm } from '../LoginForm';
+import { LoginForm } from "../LoginForm";
 
 export default {
-  title: 'Auth/LoginForm',
+  title: "Auth/LoginForm",
   component: LoginForm,
   parameters: {
-    layout: 'centered',
+    layout: "centered",
   },
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
     signinHeader: {
-      control: 'text',
-      description: 'The main heading text for the login form',
+      control: "text",
+      description: "The main heading text for the login form",
     },
     signUpText: {
-      control: 'text',
-      description: 'Text before the sign up link',
+      control: "text",
+      description: "Text before the sign up link",
     },
     signUpUrl: {
-      control: 'text',
-      description: 'URL for the sign up link',
+      control: "text",
+      description: "URL for the sign up link",
     },
     signUpCTA: {
-      control: 'text',
-      description: 'Call-to-action text for the sign up link',
+      control: "text",
+      description: "Call-to-action text for the sign up link",
     },
     emailLabel: {
-      control: 'text',
-      description: 'Label for the email input field',
+      control: "text",
+      description: "Label for the email input field",
     },
     emailPlaceholder: {
-      control: 'text',
-      description: 'Placeholder text for the email input',
+      control: "text",
+      description: "Placeholder text for the email input",
     },
     passwordLabel: {
-      control: 'text',
-      description: 'Label for the password input field',
+      control: "text",
+      description: "Label for the password input field",
     },
     showForgotPassword: {
-      control: 'boolean',
-      description: 'Show or hide the forgot password link',
+      control: "boolean",
+      description: "Show or hide the forgot password link",
     },
     forgotPasswordUrl: {
-      control: 'text',
-      description: 'URL for the forgot password link',
+      control: "text",
+      description: "URL for the forgot password link",
     },
     forgotPasswordText: {
-      control: 'text',
-      description: 'Text for the forgot password link',
+      control: "text",
+      description: "Text for the forgot password link",
     },
     signinButtonText: {
-      control: 'text',
-      description: 'Text for the submit button',
+      control: "text",
+      description: "Text for the submit button",
     },
     orText: {
-      control: 'text',
-      description: 'Text for the OR separator',
+      control: "text",
+      description: "Text for the OR separator",
     },
     showOrSeparator: {
-      control: 'boolean',
-      description: 'Show or hide the OR separator',
+      control: "boolean",
+      description: "Show or hide the OR separator",
     },
     emailValue: {
-      control: 'text',
-      description: 'Controlled value for email input',
+      control: "text",
+      description: "Controlled value for email input",
     },
     passwordValue: {
-      control: 'text',
-      description: 'Controlled value for password input',
+      control: "text",
+      description: "Controlled value for password input",
     },
     emailError: {
-      control: 'text',
-      description: 'Error message for email field',
+      control: "text",
+      description: "Error message for email field",
     },
     passwordError: {
-      control: 'text',
-      description: 'Error message for password field',
+      control: "text",
+      description: "Error message for password field",
     },
     isLoading: {
-      control: 'boolean',
-      description: 'Loading state for the form',
+      control: "boolean",
+      description: "Loading state for the form",
     },
     disabled: {
-      control: 'boolean',
-      description: 'Disabled state for the form',
+      control: "boolean",
+      description: "Disabled state for the form",
     },
     onSubmit: {
-      action: 'submitted',
-      description: 'Form submission handler',
+      action: "submitted",
+      description: "Form submission handler",
     },
     onEmailChange: {
-      action: 'email changed',
-      description: 'Email input change handler',
+      action: "email changed",
+      description: "Email input change handler",
     },
     onPasswordChange: {
-      action: 'password changed',
-      description: 'Password input change handler',
+      action: "password changed",
+      description: "Password input change handler",
+    },
+    emailValidation: {
+      control: false,
+      description: "Email validation function",
+    },
+    passwordValidation: {
+      control: false,
+      description: "Password validation function",
+    },
+    emailValidationMessage: {
+      control: "object",
+      description: "External email validation message object",
+    },
+    passwordValidationMessage: {
+      control: "object",
+      description: "External password validation message object",
     },
   },
 };
 
 export const Default = {
   args: {
-    signinHeader: 'Sign in',
-    signUpText: 'New to ToolJet?',
-    signUpUrl: '#',
-    signUpCTA: 'Create an account',
-    emailLabel: 'Email',
-    emailPlaceholder: 'm@example.com',
-    passwordLabel: 'Password',
+    signinHeader: "Sign in",
+    signUpText: "New to ToolJet?",
+    signUpUrl: "#",
+    signUpCTA: "Create an account",
+    emailLabel: "Email",
+    passwordLabel: "Password",
     showForgotPassword: true,
-    forgotPasswordUrl: '/forgot-password',
-    forgotPasswordText: 'Forgot?',
-    signinButtonText: 'Sign in',
-    orText: 'OR',
+    forgotPasswordUrl: "/forgot-password",
+    forgotPasswordText: "Forgot?",
+    signinButtonText: "Sign in",
+    orText: "OR",
     showOrSeparator: true,
   },
 };
 
 export const CustomHeader = {
   args: {
-    signinHeader: 'Welcome Back',
-    signUpText: 'New to ToolJet?',
-    signUpUrl: '#',
-    signUpCTA: 'Create an account',
-    emailLabel: 'Email',
-    emailPlaceholder: 'm@example.com',
-    passwordLabel: 'Password',
+    signinHeader: "Welcome Back",
+    signUpText: "New to ToolJet?",
+    signUpUrl: "#",
+    signUpCTA: "Create an account",
+    emailLabel: "Email",
+    emailPlaceholder: "m@example.com",
+    passwordLabel: "Password",
     showForgotPassword: true,
-    forgotPasswordUrl: '/forgot-password',
-    forgotPasswordText: 'Forgot?',
-    signinButtonText: 'Sign in',
-    orText: 'OR',
+    forgotPasswordUrl: "/forgot-password",
+    forgotPasswordText: "Forgot?",
+    signinButtonText: "Sign in",
+    orText: "OR",
     showOrSeparator: true,
   },
 };
 
 export const WithErrors = {
   args: {
-    signinHeader: 'Sign in',
-    signUpText: 'New to ToolJet?',
-    signUpUrl: '#',
-    signUpCTA: 'Create an account',
-    emailLabel: 'Email',
-    emailPlaceholder: 'm@example.com',
-    passwordLabel: 'Password',
+    signinHeader: "Sign in",
+    signUpText: "New to ToolJet?",
+    signUpUrl: "#",
+    signUpCTA: "Create an account",
+    emailLabel: "Email",
+    emailPlaceholder: "m@example.com",
+    passwordLabel: "Password",
     showForgotPassword: true,
-    forgotPasswordUrl: '/forgot-password',
-    forgotPasswordText: 'Forgot?',
-    signinButtonText: 'Sign in',
-    orText: 'OR',
+    forgotPasswordUrl: "/forgot-password",
+    forgotPasswordText: "Forgot?",
+    signinButtonText: "Sign in",
+    orText: "OR",
     showOrSeparator: true,
-    emailValue: 'invalid-email',
-    passwordValue: '123',
-    emailError: 'Please enter a valid email address',
-    passwordError: 'Password must be at least 8 characters',
+    emailValue: "invalid-email",
+    passwordValue: "123",
+    emailValidationMessage: {
+      valid: false,
+      message: "Please enter a valid email address",
+    },
+    passwordValidationMessage: {
+      valid: false,
+      message: "Password must be at least 8 characters",
+    },
   },
 };
 
 export const Loading = {
   args: {
-    signinHeader: 'Sign in',
-    signUpText: 'New to ToolJet?',
-    signUpUrl: '#',
-    signUpCTA: 'Create an account',
-    emailLabel: 'Email',
-    emailPlaceholder: 'm@example.com',
-    passwordLabel: 'Password',
+    signinHeader: "Sign in",
+    signUpText: "New to ToolJet?",
+    signUpUrl: "#",
+    signUpCTA: "Create an account",
+    emailLabel: "Email",
+    emailPlaceholder: "m@example.com",
+    passwordLabel: "Password",
     showForgotPassword: true,
-    forgotPasswordUrl: '/forgot-password',
-    forgotPasswordText: 'Forgot?',
-    signinButtonText: 'Signing in...',
-    orText: 'OR',
+    forgotPasswordUrl: "/forgot-password",
+    forgotPasswordText: "Forgot?",
+    signinButtonText: "Signing in...",
+    orText: "OR",
     showOrSeparator: true,
-    emailValue: 'user@example.com',
-    passwordValue: 'password123',
+    emailValue: "user@example.com",
+    passwordValue: "password123",
     isLoading: true,
     disabled: true,
   },
@@ -181,52 +202,163 @@ export const Loading = {
 
 export const CustomSeparator = {
   args: {
-    signinHeader: 'Sign in',
-    signUpText: 'New to ToolJet?',
-    signUpUrl: '#',
-    signUpCTA: 'Create an account',
-    emailLabel: 'Email',
-    emailPlaceholder: 'm@example.com',
-    passwordLabel: 'Password',
+    signinHeader: "Sign in",
+    signUpText: "New to ToolJet?",
+    signUpUrl: "#",
+    signUpCTA: "Create an account",
+    emailLabel: "Email",
+    emailPlaceholder: "m@example.com",
+    passwordLabel: "Password",
     showForgotPassword: true,
-    forgotPasswordUrl: '/forgot-password',
-    forgotPasswordText: 'Forgot?',
-    signinButtonText: 'Sign in',
-    orText: 'OR CONTINUE WITH',
+    forgotPasswordUrl: "/forgot-password",
+    forgotPasswordText: "Forgot?",
+    signinButtonText: "Sign in",
+    orText: "OR CONTINUE WITH",
     showOrSeparator: true,
   },
 };
 
 export const NoSeparator = {
   args: {
-    signinHeader: 'Sign in',
-    signUpText: 'New to ToolJet?',
-    signUpUrl: '#',
-    signUpCTA: 'Create an account',
-    emailLabel: 'Email',
-    emailPlaceholder: 'm@example.com',
-    passwordLabel: 'Password',
+    signinHeader: "Sign in",
+    signUpText: "New to ToolJet?",
+    signUpUrl: "#",
+    signUpCTA: "Create an account",
+    emailLabel: "Email",
+    emailPlaceholder: "m@example.com",
+    passwordLabel: "Password",
     showForgotPassword: true,
-    forgotPasswordUrl: '/forgot-password',
-    forgotPasswordText: 'Forgot?',
-    signinButtonText: 'Sign in',
-    orText: 'OR',
+    forgotPasswordUrl: "/forgot-password",
+    forgotPasswordText: "Forgot?",
+    signinButtonText: "Sign in",
+    orText: "OR",
     showOrSeparator: false,
   },
 };
 
 export const Minimal = {
   args: {
-    signinHeader: 'Login',
-    signUpText: '',
-    signUpUrl: '#',
-    signUpCTA: '',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your email',
-    passwordLabel: 'Password',
+    signinHeader: "Login",
+    signUpText: "",
+    signUpUrl: "#",
+    signUpCTA: "",
+    emailLabel: "Email",
+    emailPlaceholder: "Enter your email",
+    passwordLabel: "Password",
     showForgotPassword: false,
-    signinButtonText: 'Login',
-    orText: 'OR',
+    signinButtonText: "Login",
+    orText: "OR",
     showOrSeparator: false,
   },
 };
+
+export const WithValidation = {
+  args: {
+    signinHeader: "Sign in",
+    signUpText: "New to ToolJet?",
+    signUpUrl: "#",
+    signUpCTA: "Create an account",
+    emailLabel: "Email",
+    emailPlaceholder: "Enter your email",
+    passwordLabel: "Password",
+    showForgotPassword: true,
+    forgotPasswordUrl: "/forgot-password",
+    forgotPasswordText: "Forgot?",
+    signinButtonText: "Sign in",
+    orText: "OR",
+    showOrSeparator: true,
+    emailValidation: (e) => {
+      const value = e.target.value;
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+      if (!value) {
+        return { valid: false, message: "Email is required" };
+      }
+
+      if (!emailRegex.test(value)) {
+        return { valid: false, message: "Please enter a valid email address" };
+      }
+
+      return { valid: true, message: "Email looks good!" };
+    },
+    passwordValidation: (e) => {
+      const value = e.target.value;
+
+      if (!value) {
+        return { valid: false, message: "Password is required" };
+      }
+
+      if (value.length < 8) {
+        return {
+          valid: false,
+          message: "Password must be at least 8 characters",
+        };
+      }
+
+      if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value)) {
+        return {
+          valid: false,
+          message: "Password must contain uppercase, lowercase, and number",
+        };
+      }
+
+      return { valid: true, message: "Password is strong!" };
+    },
+  },
+};
+
+export const WithExternalValidation = {
+  args: {
+    signinHeader: "Sign in",
+    signUpText: "New to ToolJet?",
+    signUpUrl: "#",
+    signUpCTA: "Create an account",
+    emailLabel: "Email",
+    emailPlaceholder: "Enter your email",
+    passwordLabel: "Password",
+    showForgotPassword: true,
+    forgotPasswordUrl: "/forgot-password",
+    forgotPasswordText: "Forgot?",
+    signinButtonText: "Sign in",
+    orText: "OR",
+    showOrSeparator: true,
+    emailValue: "user@example.com",
+    passwordValue: "password123",
+    emailValidationMessage: {
+      valid: true,
+      message: "Email is valid and available",
+    },
+    passwordValidationMessage: {
+      valid: true,
+      message: "Password meets all requirements",
+    },
+  },
+};
+
+export const WithValidationErrors = {
+  args: {
+    signinHeader: "Sign in",
+    signUpText: "New to ToolJet?",
+    signUpUrl: "#",
+    signUpCTA: "Create an account",
+    emailLabel: "Email",
+    emailPlaceholder: "Enter your email",
+    passwordLabel: "Password",
+    showForgotPassword: true,
+    forgotPasswordUrl: "/forgot-password",
+    forgotPasswordText: "Forgot?",
+    signinButtonText: "Sign in",
+    orText: "OR",
+    showOrSeparator: true,
+    emailValue: "invalid-email",
+    passwordValue: "123",
+    emailValidationMessage: {
+      valid: false,
+      message: "Please enter a valid email address",
+    },
+    passwordValidationMessage: {
+      valid: false,
+      message: "Password must be at least 8 characters",
+    },
+  },
+};
diff --git a/frontend/src/components/Auth/Stories/PasswordInput.stories.jsx b/frontend/src/components/Auth/Stories/PasswordInput.stories.jsx
deleted file mode 100644
index 9696ca0446..0000000000
--- a/frontend/src/components/Auth/Stories/PasswordInput.stories.jsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import React from 'react';
-import PasswordInput from '../PasswordInput';
-
-export default {
-  title: 'Auth/PasswordInput',
-  component: PasswordInput,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    label: {
-      control: 'text',
-      description: 'Label text for the password input',
-    },
-    placeholder: {
-      control: 'text',
-      description: 'Placeholder text for the input field',
-    },
-    value: {
-      control: 'text',
-      description: 'Current value of the password input',
-    },
-    onChange: {
-      action: 'changed',
-      description: 'Callback function when input value changes',
-    },
-    error: {
-      control: 'text',
-      description: 'Error message to display below the input',
-    },
-    name: {
-      control: 'text',
-      description: 'Name attribute for the input field',
-    },
-    dataCy: {
-      control: 'text',
-      description: 'Data-cy attribute for testing',
-    },
-    minLength: {
-      control: 'number',
-      description: 'Minimum length requirement for the password',
-    },
-    hint: {
-      control: 'text',
-      description: 'Hint text to display below the input',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Whether the input is disabled',
-    },
-    showForgotPassword: {
-      control: 'boolean',
-      description: 'Whether to show the forgot password link',
-    },
-    className: {
-      control: 'text',
-      description: 'Additional CSS classes',
-    },
-  },
-};
-
-const Template = (args) => <PasswordInput {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  label: 'Password',
-  placeholder: 'Enter your password',
-  value: '',
-  name: 'password',
-  dataCy: 'password',
-  minLength: 8,
-  hint: 'Password must be at least 8 characters',
-  disabled: false,
-  showForgotPassword: false,
-};
-
-export const WithForgotPassword = Template.bind({});
-WithForgotPassword.args = {
-  ...Default.args,
-  showForgotPassword: true,
-};
-
-export const WithError = Template.bind({});
-WithError.args = {
-  ...Default.args,
-  value: '123',
-  error: 'Password must be at least 8 characters long',
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...Default.args,
-  value: 'mypassword123',
-  disabled: true,
-};
-
-export const CustomHint = Template.bind({});
-CustomHint.args = {
-  ...Default.args,
-  hint: 'Use a strong password with letters, numbers, and symbols',
-};
-
-export const CustomLabel = Template.bind({});
-CustomLabel.args = {
-  ...Default.args,
-  label: 'New Password',
-  placeholder: 'Create a new password',
-  hint: 'Choose a secure password for your account',
-};
-
-export const WithValue = Template.bind({});
-WithValue.args = {
-  ...Default.args,
-  value: 'mySecurePassword123!',
-};
-
-export const ShortPassword = Template.bind({});
-ShortPassword.args = {
-  ...Default.args,
-  minLength: 12,
-  hint: 'Password must be at least 12 characters',
-  value: 'short',
-  error: 'Password is too short',
-};
-
-export const LoginFormStyle = Template.bind({});
-LoginFormStyle.args = {
-  ...Default.args,
-  label: 'Password',
-  placeholder: 'Enter your password',
-  showForgotPassword: true,
-  hint: 'Enter your account password',
-};
-
-export const SignupFormStyle = Template.bind({});
-SignupFormStyle.args = {
-  ...Default.args,
-  label: 'Create Password',
-  placeholder: 'Create a strong password',
-  hint: 'Password must be at least 8 characters with letters and numbers',
-};
-
-
-
diff --git a/frontend/src/components/ui/Input/CommonInput/Index.jsx b/frontend/src/components/ui/Input/CommonInput/Index.jsx
index 5f6f657029..48894d0799 100644
--- a/frontend/src/components/ui/Input/CommonInput/Index.jsx
+++ b/frontend/src/components/ui/Input/CommonInput/Index.jsx
@@ -16,13 +16,14 @@ const CommonInput = ({ label, helperText, disabled, required, onChange: change,
     isEditing,
     handleEncryptedFieldsToggle,
     labelDisabled,
+    showEncryption = true,
   } = restProps;
 
   const InputComponentType = type === 'number' ? NumberInput : TextInput;
   const [isValid, setIsValid] = useState(null);
   const [message, setMessage] = useState('');
 
-  const isEncrypted = type === 'password' || encrypted;
+  const isEncrypted = showEncryption && (type === 'password' || encrypted);
   const isWorkspaceConstant =
     restProps.placeholder &&
     (restProps.placeholder.includes('{{constants') || restProps.placeholder.includes('{{secrets'));
@@ -59,7 +60,7 @@ const CommonInput = ({ label, helperText, disabled, required, onChange: change,
             <InputLabel disabled={labelDisabled ?? disabled} label={label} required={required} />
           </div>
         )}
-        {type === 'password' && (
+        {showEncryption && type === 'password' && (
           <div className="d-flex justify-content-between w-100">
             <div className="mx-1 col">
               <Button

From 169d39018e470f4c054713bebfb3b095950e803e Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Wed, 17 Sep 2025 17:49:47 +0530
Subject: [PATCH 051/157] Enhance LoginForm component and update dependencies

- Added `util` package to package.json and package-lock.json for utility functions.
- Updated `LoginForm` to include new props for organization name and signup visibility.
- Refactored LoginForm styles and structure for improved readability and functionality.
- Enhanced Storybook stories for LoginForm to support new props and scenarios.
- Updated webpack configuration to resolve the `util` module correctly.
---
 frontend/package.json                         |   2 +
 frontend/src/components/Auth/LoginForm.jsx    |  50 ++++--
 .../Auth/Stories/LoginForm.stories.jsx        | 156 +++++++++++++++++-
 .../OnboardingBackgroundWrapper.jsx           |  37 ++---
 frontend/webpack.config.js                    |  11 +-
 5 files changed, 211 insertions(+), 45 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 9d3e424537..9f6f2ddb64 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -153,6 +153,7 @@
     "tw-animate-css": "^1.3.7",
     "url-join": "^5.0.0",
     "use-react-router-breadcrumbs": "^4.0.1",
+    "util": "^0.12.5",
     "uuid": "9.0.0",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
     "y-websocket": "^1.4.5",
@@ -167,6 +168,7 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.6.0",
+    "@storybook/addon-docs": "^9.1.5",
     "@storybook/addon-links": "^9.1.5",
     "@storybook/addon-onboarding": "^9.1.5",
     "@storybook/react-webpack5": "^9.1.5",
diff --git a/frontend/src/components/Auth/LoginForm.jsx b/frontend/src/components/Auth/LoginForm.jsx
index f6fb490304..c65b3e33c0 100644
--- a/frontend/src/components/Auth/LoginForm.jsx
+++ b/frontend/src/components/Auth/LoginForm.jsx
@@ -16,6 +16,8 @@ export function LoginForm({ className, ...props }) {
     signUpText,
     signUpUrl,
     signUpCTA,
+    showSignup,
+    organizationName,
 
     // Form fields
     emailLabel,
@@ -55,21 +57,35 @@ export function LoginForm({ className, ...props }) {
           <h1 className="tw-text-2xl tw-font-bold tw-mb-0" data-cy="no-login-methods-warning">
             {signinHeader}
           </h1>
-          <div>
-            <p className="tw-text-balance tw-text-sm tw-text-muted-foreground tw-mb-0">
-              <span>{signUpText}</span>
-              <span>
-                <Link
-                  to={signUpUrl}
-                  className="tw-text-text-brand tw-text-[11px] tw-font-medium tw-no-underline tw-pl-1.5 tw-pb-0.5 tw-self-center hover:tw-text-button-primary-hover"
-                  tabIndex="-1"
-                  data-cy="create-an-account-link"
-                >
-                  {signUpCTA}
-                </Link>
-              </span>
+
+          {(organizationName || showSignup) && (
+            <p className="tw-text-balance tw-text-sm tw-text-text-placeholder tw-mb-0">
+              {organizationName && (
+                <>
+                  Sign in to the workspace -{' '}
+                  <span className="tw-font-medium" data-cy="workspace-name">
+                    {organizationName}
+                  </span>
+                  .
+                </>
+              )}{' '}
+              {showSignup && (
+                <>
+                  <span>{signUpText}</span>
+                  <span>
+                    <Link
+                      to={signUpUrl}
+                      className="tw-text-text-brand tw-text-[11px] tw-font-medium tw-no-underline tw-pl-1.5 tw-pb-0.5 tw-self-center hover:tw-text-button-primary-hover"
+                      tabIndex="-1"
+                      data-cy="create-an-account-link"
+                    >
+                      {signUpCTA}
+                    </Link>
+                  </span>
+                </>
+              )}
             </p>
-          </div>
+          )}
         </div>
         <div className="tw-grid tw-gap-4">
           <div className="tw-grid tw-gap-0.5">
@@ -144,7 +160,8 @@ LoginForm.propTypes = {
   signUpText: PropTypes.string,
   signUpUrl: PropTypes.string,
   signUpCTA: PropTypes.string,
-
+  showSignup: PropTypes.bool,
+  organizationName: PropTypes.string,
   // Form fields
   emailLabel: PropTypes.string,
   emailPlaceholder: PropTypes.string,
@@ -184,7 +201,8 @@ LoginForm.defaultProps = {
   signUpText: 'New to ToolJet?',
   signUpUrl: '#',
   signUpCTA: 'Create an account',
-
+  showSignup: true,
+  organizationName: '',
   // Form fields
   emailLabel: 'Email',
   emailPlaceholder: 'Enter your work email',
diff --git a/frontend/src/components/Auth/Stories/LoginForm.stories.jsx b/frontend/src/components/Auth/Stories/LoginForm.stories.jsx
index 065e939501..de18ae765f 100644
--- a/frontend/src/components/Auth/Stories/LoginForm.stories.jsx
+++ b/frontend/src/components/Auth/Stories/LoginForm.stories.jsx
@@ -24,6 +24,14 @@ export default {
       control: "text",
       description: "Call-to-action text for the sign up link",
     },
+    showSignup: {
+      control: "boolean",
+      description: "Show or hide the signup section",
+    },
+    organizationName: {
+      control: "text",
+      description: "Organization name to display in the header",
+    },
     emailLabel: {
       control: "text",
       description: "Label for the email input field",
@@ -36,6 +44,10 @@ export default {
       control: "text",
       description: "Label for the password input field",
     },
+    passwordPlaceholder: {
+      control: "text",
+      description: "Placeholder text for the password input",
+    },
     showForgotPassword: {
       control: "boolean",
       description: "Show or hide the forgot password link",
@@ -68,14 +80,6 @@ export default {
       control: "text",
       description: "Controlled value for password input",
     },
-    emailError: {
-      control: "text",
-      description: "Error message for email field",
-    },
-    passwordError: {
-      control: "text",
-      description: "Error message for password field",
-    },
     isLoading: {
       control: "boolean",
       description: "Loading state for the form",
@@ -121,8 +125,12 @@ export const Default = {
     signUpText: "New to ToolJet?",
     signUpUrl: "#",
     signUpCTA: "Create an account",
+    showSignup: true,
+    organizationName: "",
     emailLabel: "Email",
+    emailPlaceholder: "Enter your work email",
     passwordLabel: "Password",
+    passwordPlaceholder: "Enter password",
     showForgotPassword: true,
     forgotPasswordUrl: "/forgot-password",
     forgotPasswordText: "Forgot?",
@@ -138,9 +146,138 @@ export const CustomHeader = {
     signUpText: "New to ToolJet?",
     signUpUrl: "#",
     signUpCTA: "Create an account",
+    showSignup: true,
+    organizationName: "",
     emailLabel: "Email",
     emailPlaceholder: "m@example.com",
     passwordLabel: "Password",
+    passwordPlaceholder: "Enter password",
+    showForgotPassword: true,
+    forgotPasswordUrl: "/forgot-password",
+    forgotPasswordText: "Forgot?",
+    signinButtonText: "Sign in",
+    orText: "OR",
+    showOrSeparator: true,
+  },
+};
+
+export const WithOrganization = {
+  args: {
+    signinHeader: "Sign in",
+    signUpText: "New to ToolJet?",
+    signUpUrl: "#",
+    signUpCTA: "Create an account",
+    showSignup: true,
+    organizationName: "Acme Corporation",
+    emailLabel: "Email",
+    emailPlaceholder: "Enter your work email",
+    passwordLabel: "Password",
+    passwordPlaceholder: "Enter password",
+    showForgotPassword: true,
+    forgotPasswordUrl: "/forgot-password",
+    forgotPasswordText: "Forgot?",
+    signinButtonText: "Sign in",
+    orText: "OR",
+    showOrSeparator: true,
+  },
+};
+
+export const OrganizationOnly = {
+  args: {
+    signinHeader: "Sign in",
+    signUpText: "",
+    signUpUrl: "#",
+    signUpCTA: "",
+    showSignup: false,
+    organizationName: "TechCorp Inc.",
+    emailLabel: "Email",
+    emailPlaceholder: "Enter your work email",
+    passwordLabel: "Password",
+    passwordPlaceholder: "Enter password",
+    showForgotPassword: true,
+    forgotPasswordUrl: "/forgot-password",
+    forgotPasswordText: "Forgot?",
+    signinButtonText: "Sign in",
+    orText: "OR",
+    showOrSeparator: true,
+  },
+};
+
+export const LongOrganizationName = {
+  args: {
+    signinHeader: "Sign in",
+    signUpText: "New to ToolJet?",
+    signUpUrl: "#",
+    signUpCTA: "Create an account",
+    showSignup: true,
+    organizationName: "Very Long Organization Name That Might Wrap",
+    emailLabel: "Email",
+    emailPlaceholder: "Enter your work email",
+    passwordLabel: "Password",
+    passwordPlaceholder: "Enter password",
+    showForgotPassword: true,
+    forgotPasswordUrl: "/forgot-password",
+    forgotPasswordText: "Forgot?",
+    signinButtonText: "Sign in",
+    orText: "OR",
+    showOrSeparator: true,
+  },
+};
+
+export const OrganizationWithSpecialChars = {
+  args: {
+    signinHeader: "Sign in",
+    signUpText: "New to ToolJet?",
+    signUpUrl: "#",
+    signUpCTA: "Create an account",
+    showSignup: true,
+    organizationName: "Acme & Co. (Ltd.)",
+    emailLabel: "Email",
+    emailPlaceholder: "Enter your work email",
+    passwordLabel: "Password",
+    passwordPlaceholder: "Enter password",
+    showForgotPassword: true,
+    forgotPasswordUrl: "/forgot-password",
+    forgotPasswordText: "Forgot?",
+    signinButtonText: "Sign in",
+    orText: "OR",
+    showOrSeparator: true,
+  },
+};
+
+export const EmptyOrganizationName = {
+  args: {
+    signinHeader: "Sign in",
+    signUpText: "New to ToolJet?",
+    signUpUrl: "#",
+    signUpCTA: "Create an account",
+    showSignup: true,
+    organizationName: "",
+    emailLabel: "Email",
+    emailPlaceholder: "Enter your work email",
+    passwordLabel: "Password",
+    passwordPlaceholder: "Enter password",
+    showForgotPassword: true,
+    forgotPasswordUrl: "/forgot-password",
+    forgotPasswordText: "Forgot?",
+    signinButtonText: "Sign in",
+    orText: "OR",
+    showOrSeparator: true,
+  },
+};
+
+export const NoOrganizationNoSignup = {
+  args: {
+    signinHeader: "Sign in",
+    signUpText: "",
+    signUpUrl: "#",
+    signUpCTA: "",
+    showSignup: false,
+    organizationName: "",
+    emailLabel: "Email",
+    emailPlaceholder: "Enter your work email",
+    passwordLabel: "Password",
+    passwordPlaceholder: "Enter password",
     showForgotPassword: true,
     forgotPasswordUrl: "/forgot-password",
     forgotPasswordText: "Forgot?",
@@ -242,9 +379,12 @@ export const Minimal = {
     signUpText: "",
     signUpUrl: "#",
     signUpCTA: "",
+    showSignup: false,
+    organizationName: "",
     emailLabel: "Email",
     emailPlaceholder: "Enter your email",
     passwordLabel: "Password",
+    passwordPlaceholder: "Enter password",
     showForgotPassword: false,
     signinButtonText: "Login",
     orText: "OR",
diff --git a/frontend/src/modules/onboarding/components/OnboardingBackgroundWrapper/OnboardingBackgroundWrapper.jsx b/frontend/src/modules/onboarding/components/OnboardingBackgroundWrapper/OnboardingBackgroundWrapper.jsx
index 35129447ae..770bb4cbe1 100644
--- a/frontend/src/modules/onboarding/components/OnboardingBackgroundWrapper/OnboardingBackgroundWrapper.jsx
+++ b/frontend/src/modules/onboarding/components/OnboardingBackgroundWrapper/OnboardingBackgroundWrapper.jsx
@@ -2,9 +2,6 @@ import React from 'react';
 import './resources/styles/background.styles.scss';
 import { defaultWhiteLabellingSettings } from '@white-label/whiteLabelling';
 import { useWhiteLabellingStore } from '@/_stores/whiteLabellingStore';
-import { GalleryVerticalEnd } from 'lucide-react';
-
-import { LoginForm } from '@/components/login-form';
 import WhiteLabellingBackgroundWrapper from '@/modules/onboarding/components/WhiteLabellingBackgroundWrapper';
 const OnboardingBackgroundWrapper = ({
   LeftSideComponent,
@@ -22,27 +19,27 @@ const OnboardingBackgroundWrapper = ({
     return <WhiteLabellingBackgroundWrapper MiddleComponent={() => <ContentComponent />} />;
   }
   return (
-    <div className="tw-grid tw-min-h-svh lg:tw-grid-cols-2">
-      <div className="tw-flex tw-flex-col tw-gap-4 tw-p-6 md:tw-p-10">
-        <div className="tw-flex tw-justify-center tw-gap-2 md:tw-justify-start">
-          <a href="#" className="tw-flex tw-items-center tw-gap-2 tw-font-medium">
-            <div className="tw-bg-primary tw-text-primary-foreground tw-flex tw-size-6 tw-items-center tw-justify-center tw-rounded-md">
-              <GalleryVerticalEnd className="tw-size-4" />
+    <div className="onboarding-background-wrapper">
+      <div className="container-fluid h-100">
+        {MiddleComponent ? (
+          <div className="row h-100">
+            <div className="col-12 d-flex justify-content-center align-items-center">
+              <MiddleComponent />
             </div>
-            Acme Inc.
-          </a>
-        </div>
-        <div className="tw-flex tw-flex-1 tw-items-center tw-justify-center">
-          <div className="tw-w-full tw-max-w-xs">
-            <LoginForm />
           </div>
-        </div>
-      </div>
-      <div className="tw-bg-muted tw-relative tw-hidden lg:tw-block">
-        <RightSideComponent />
+        ) : (
+          <div className="row h-100">
+            <div className={`col-md-${leftSize} leftside-wrapper d-flex`}>
+              <LeftSideComponent />
+            </div>
+            <div className={`col-md-${rightSize} rightside-wrapper d-flex align-items-center justify-content-end`}>
+              <RightSideComponent />
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );
 };
 
-export default OnboardingBackgroundWrapper;
\ No newline at end of file
+export default OnboardingBackgroundWrapper;
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
index 6f96d3fca3..63f39da8d2 100644
--- a/frontend/webpack.config.js
+++ b/frontend/webpack.config.js
@@ -124,6 +124,7 @@ module.exports = {
     fallback: {
       process: require.resolve('process/browser.js'),
       path: require.resolve('path-browserify'),
+      util: require.resolve('util/'),
       '@ee/modules': emptyModulePath,
       '@cloud/modules': emptyModulePath,
     },
@@ -209,7 +210,15 @@ module.exports = {
           options: {
             plugins: [
               isDevEnv && require.resolve('react-refresh/babel'),
-              ['import', { libraryName: 'lodash', libraryDirectory: '', camel2DashComponentName: false }, 'lodash'],
+              [
+                'import',
+                {
+                  libraryName: 'lodash',
+                  libraryDirectory: '',
+                  camel2DashComponentName: false,
+                },
+                'lodash',
+              ],
             ].filter(Boolean),
           },
         },

From 01df4b8098f87640a15ee7e8f7da5d744b6c9efd Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Wed, 17 Sep 2025 18:18:35 +0530
Subject: [PATCH 052/157] Add Forgot Password components and enhance
 authentication flow

- Introduced `ForgotPasswordForm` and `ForgotPasswordInfoScreen` components for improved password recovery functionality.
- Implemented form validation and state management for the `ForgotPasswordForm`.
- Created Storybook stories for both components to demonstrate various use cases and configurations.
- Updated `LoginForm` styles for consistency with new components.
- Enhanced overall user experience in the authentication flow.
---
 .../components/Auth/ForgotPasswordForm.jsx    | 200 +++++++
 .../Auth/ForgotPasswordInfoScreen.jsx         | 123 ++++
 frontend/src/components/Auth/LoginForm.jsx    |   2 +-
 .../Stories/ForgotPasswordForm.stories.jsx    | 270 +++++++++
 .../ForgotPasswordInfoScreen.stories.jsx      | 167 ++++++
 .../Auth/Stories/LoginForm.stories.jsx        | 538 +++++++++---------
 6 files changed, 1030 insertions(+), 270 deletions(-)
 create mode 100644 frontend/src/components/Auth/ForgotPasswordForm.jsx
 create mode 100644 frontend/src/components/Auth/ForgotPasswordInfoScreen.jsx
 create mode 100644 frontend/src/components/Auth/Stories/ForgotPasswordForm.stories.jsx
 create mode 100644 frontend/src/components/Auth/Stories/ForgotPasswordInfoScreen.stories.jsx

diff --git a/frontend/src/components/Auth/ForgotPasswordForm.jsx b/frontend/src/components/Auth/ForgotPasswordForm.jsx
new file mode 100644
index 0000000000..0ecf2ebdef
--- /dev/null
+++ b/frontend/src/components/Auth/ForgotPasswordForm.jsx
@@ -0,0 +1,200 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { CornerDownLeft } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { FormWrapper } from '@/components/Auth/FormWrapper';
+
+export function ForgotPasswordForm({ className, ...props }) {
+  const {
+    // Header and sign up section
+    headerText,
+    signupText,
+    signupUrl,
+    signupCTA,
+    showSignup,
+
+    // Form fields
+    emailLabel,
+    emailPlaceholder,
+
+    // Button
+    buttonText,
+
+    // Admin banner
+    adminContactText,
+    showAdminBanner,
+    showSeparator,
+
+    // Form functionality
+    onSubmit,
+    emailValue,
+    onEmailChange,
+
+    // Validation and state
+    emailValidation,
+    emailValidationMessage,
+    isLoading,
+    disabled,
+  } = props;
+
+  return (
+    <FormWrapper>
+      <form className={cn('tw-flex tw-flex-col tw-gap-6', className)} onSubmit={onSubmit} {...props}>
+        <div className="tw-flex tw-flex-col tw-gap-0.5 tw-min-w-96">
+          <h1 className="tw-text-4xl tw-tracking-tight tw-font-medium tw-mb-0" data-cy="forgot-password-header">
+            {headerText}
+          </h1>
+
+          {showSignup && (
+            <p className="tw-text-balance tw-text-sm tw-text-text-placeholder tw-mb-0">
+              <span>{signupText}</span>
+              <span>
+                <Link
+                  to={signupUrl}
+                  className="tw-text-text-brand tw-text-[11px] tw-font-medium tw-no-underline tw-pl-1.5 tw-pb-0.5 tw-self-center hover:tw-text-button-primary-hover"
+                  tabIndex="-1"
+                  data-cy="create-an-account-link"
+                >
+                  {signupCTA}
+                </Link>
+              </span>
+            </p>
+          )}
+        </div>
+
+        <div className="tw-grid tw-gap-4">
+          <div className="tw-grid tw-gap-0.5">
+            <Input
+              label={emailLabel}
+              type="email"
+              placeholder={emailPlaceholder}
+              value={emailValue}
+              onChange={onEmailChange}
+              disabled={disabled}
+              required
+              validation={emailValidation}
+              isValidatedMessages={emailValidationMessage}
+              size="large"
+            />
+          </div>
+
+          <Button
+            size="large"
+            type="submit"
+            className="tw-w-fit"
+            disabled={disabled || isLoading}
+            isLoading={isLoading}
+          >
+            {buttonText}
+            <CornerDownLeft width="16" height="16" />
+          </Button>
+
+          {showSeparator && (
+            <div className="tw-relative tw-flex tw-items-center tw-text-center tw-text-sm">
+              <div className="tw-flex-1 tw-h-px tw-bg-border-weak" />
+              <span className="tw-px-2 tw-text-text-placeholder tw-text-lg tw-font-medium">OR</span>
+              <div className="tw-flex-1 tw-h-px tw-bg-border-weak" />
+            </div>
+          )}
+
+          {showAdminBanner && (
+            <div className="tw-flex tw-items-center tw-gap-2 tw-p-3 tw-bg-background-subtle tw-border tw-border-border-weak tw-rounded-md">
+              <div className="tw-w-6 tw-h-6 tw-flex tw-items-center tw-justify-center">
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="tw-text-text-brand"
+                  aria-label="Information icon"
+                >
+                  <title>Information</title>
+                  <path
+                    d="M8 1L9.5 2.5L8 4L6.5 2.5L8 1ZM8 12L6.5 13.5L8 15L9.5 13.5L8 12ZM1 8L2.5 6.5L4 8L2.5 9.5L1 8ZM12 8L13.5 9.5L15 8L13.5 6.5L12 8Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+              <p className="tw-text-sm tw-text-text-placeholder tw-mb-0" data-cy="admin-contact-banner">
+                {adminContactText}
+              </p>
+            </div>
+          )}
+        </div>
+      </form>
+    </FormWrapper>
+  );
+}
+
+ForgotPasswordForm.propTypes = {
+  className: PropTypes.string,
+
+  // Header and sign up section
+  headerText: PropTypes.string,
+  signupText: PropTypes.string,
+  signupUrl: PropTypes.string,
+  signupCTA: PropTypes.string,
+  showSignup: PropTypes.bool,
+
+  // Form fields
+  emailLabel: PropTypes.string,
+  emailPlaceholder: PropTypes.string,
+
+  // Button
+  buttonText: PropTypes.string,
+
+  // Admin banner
+  adminContactText: PropTypes.string,
+  showAdminBanner: PropTypes.bool,
+  showSeparator: PropTypes.bool,
+
+  // Form functionality
+  onSubmit: PropTypes.func,
+  emailValue: PropTypes.string,
+  onEmailChange: PropTypes.func,
+
+  // Validation and state
+  emailValidation: PropTypes.func,
+  emailValidationMessage: PropTypes.object,
+  isLoading: PropTypes.bool,
+  disabled: PropTypes.bool,
+};
+
+ForgotPasswordForm.defaultProps = {
+  className: '',
+
+  // Header and sign up section
+  headerText: 'Forgot Password',
+  signupText: 'New to ToolJet?',
+  signupUrl: '#',
+  signupCTA: 'Create an account',
+  showSignup: true,
+
+  // Form fields
+  emailLabel: 'Email address',
+  emailPlaceholder: 'Enter email address',
+
+  // Button
+  buttonText: 'Send a reset link',
+
+  // Admin banner
+  adminContactText: 'Contact admin to reset your password',
+  showAdminBanner: true,
+  showSeparator: true,
+
+  // Form functionality
+  onSubmit: undefined,
+  emailValue: undefined,
+  onEmailChange: undefined,
+
+  // Validation and state
+  emailValidation: undefined,
+  emailValidationMessage: undefined,
+  isLoading: false,
+  disabled: false,
+};
diff --git a/frontend/src/components/Auth/ForgotPasswordInfoScreen.jsx b/frontend/src/components/Auth/ForgotPasswordInfoScreen.jsx
new file mode 100644
index 0000000000..9b1607aacf
--- /dev/null
+++ b/frontend/src/components/Auth/ForgotPasswordInfoScreen.jsx
@@ -0,0 +1,123 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { ArrowLeft } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { FormWrapper } from '@/components/Auth/FormWrapper';
+
+export function ForgotPasswordInfoScreen({ className, ...props }) {
+  const {
+    // Header
+    headerText,
+
+    // Message content
+    messageText,
+    email,
+
+    // Info text
+    infoText,
+    showInfo,
+
+    // Button
+    buttonText,
+    onBackToLogin,
+
+    // Separator
+    showSeparator,
+  } = props;
+
+  return (
+    <FormWrapper>
+      <div className={cn('tw-flex tw-flex-col tw-gap-6 tw-min-w-96', className)} {...props}>
+        <div className="tw-flex tw-flex-col tw-gap-0.5">
+          <h1 className="tw-text-4xl tw-tracking-tight tw-font-medium tw-mb-0" data-cy="forgot-password-info-header">
+            {headerText}
+          </h1>
+        </div>
+
+        <div className="tw-flex tw-flex-col tw-gap-4">
+          <p className="tw-text-balance tw-text-sm tw-text-text-placeholder tw-mb-0" data-cy="forgot-password-message">
+            {messageText}
+            {email && (
+              <>
+                {' '}
+                <span className="tw-font-medium tw-text-text-brand">{email}</span>
+              </>
+            )}
+            .
+          </p>
+
+          {showInfo && (
+            <p className="tw-text-sm tw-text-text-placeholder tw-mb-0" data-cy="forgot-password-info">
+              {infoText}
+            </p>
+          )}
+
+          {showSeparator && (
+            <div className="tw-relative tw-flex tw-items-center tw-text-center tw-text-sm">
+              <div className="tw-flex-1 tw-h-px tw-bg-border-weak" />
+              <span className="tw-px-2 tw-text-muted-foreground">OR</span>
+              <div className="tw-flex-1 tw-h-px tw-bg-border-weak" />
+            </div>
+          )}
+
+          <Button
+            size="default"
+            variant="outline"
+            className="tw-w-fit"
+            onClick={onBackToLogin}
+            data-cy="back-to-login-button"
+          >
+            <ArrowLeft width="16" height="16" />
+            {buttonText}
+          </Button>
+        </div>
+      </div>
+    </FormWrapper>
+  );
+}
+
+ForgotPasswordInfoScreen.propTypes = {
+  className: PropTypes.string,
+
+  // Header
+  headerText: PropTypes.string,
+
+  // Message content
+  messageText: PropTypes.string,
+  email: PropTypes.string,
+
+  // Info text
+  infoText: PropTypes.string,
+  showInfo: PropTypes.bool,
+
+  // Button
+  buttonText: PropTypes.string,
+  onBackToLogin: PropTypes.func,
+
+  // Separator
+  showSeparator: PropTypes.bool,
+};
+
+ForgotPasswordInfoScreen.defaultProps = {
+  className: '',
+
+  // Header
+  headerText: 'Check your mail',
+
+  // Message content
+  messageText: "We've sent a password reset link to",
+  email: '',
+
+  // Info text
+  infoText: 'Did not receive an email? Check your spam folder!',
+  showInfo: true,
+
+  // Button
+  buttonText: 'Back to login',
+  onBackToLogin: undefined,
+
+  // Separator
+  showSeparator: true,
+};
diff --git a/frontend/src/components/Auth/LoginForm.jsx b/frontend/src/components/Auth/LoginForm.jsx
index c65b3e33c0..cf0207e28e 100644
--- a/frontend/src/components/Auth/LoginForm.jsx
+++ b/frontend/src/components/Auth/LoginForm.jsx
@@ -54,7 +54,7 @@ export function LoginForm({ className, ...props }) {
     <FormWrapper>
       <form className={cn('tw-flex tw-flex-col tw-gap-6', className)} onSubmit={onSubmit} {...props}>
         <div className="tw-flex tw-flex-col tw-gap-0.5 tw-min-w-96">
-          <h1 className="tw-text-2xl tw-font-bold tw-mb-0" data-cy="no-login-methods-warning">
+          <h1 className="tw-text-4xl tw-tracking-tight tw-font-medium tw-mb-0" data-cy="">
             {signinHeader}
           </h1>
 
diff --git a/frontend/src/components/Auth/Stories/ForgotPasswordForm.stories.jsx b/frontend/src/components/Auth/Stories/ForgotPasswordForm.stories.jsx
new file mode 100644
index 0000000000..5821647fcb
--- /dev/null
+++ b/frontend/src/components/Auth/Stories/ForgotPasswordForm.stories.jsx
@@ -0,0 +1,270 @@
+import React from 'react';
+import { ForgotPasswordForm } from '../ForgotPasswordForm';
+
+export default {
+  title: 'Auth/ForgotPasswordForm',
+  component: ForgotPasswordForm,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    headerText: {
+      control: 'text',
+      description: 'The main heading text for the forgot password form',
+    },
+    signupText: {
+      control: 'text',
+      description: 'Text before the sign up link',
+    },
+    signupUrl: {
+      control: 'text',
+      description: 'URL for the sign up link',
+    },
+    signupCTA: {
+      control: 'text',
+      description: 'Call-to-action text for the sign up link',
+    },
+    showSignup: {
+      control: 'boolean',
+      description: 'Show or hide the signup section',
+    },
+    emailLabel: {
+      control: 'text',
+      description: 'Label for the email input field',
+    },
+    emailPlaceholder: {
+      control: 'text',
+      description: 'Placeholder text for the email input',
+    },
+    buttonText: {
+      control: 'text',
+      description: 'Text for the submit button',
+    },
+    adminContactText: {
+      control: 'text',
+      description: 'Text for the admin contact banner',
+    },
+    showAdminBanner: {
+      control: 'boolean',
+      description: 'Show or hide the admin contact banner',
+    },
+    emailValue: {
+      control: 'text',
+      description: 'Controlled value for email input',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Loading state for the form',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disabled state for the form',
+    },
+    onSubmit: {
+      action: 'submitted',
+      description: 'Form submission handler',
+    },
+    onEmailChange: {
+      action: 'email changed',
+      description: 'Email input change handler',
+    },
+    emailValidation: {
+      control: false,
+      description: 'Email validation function',
+    },
+    emailValidationMessage: {
+      control: 'object',
+      description: 'External email validation message object',
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    headerText: 'Forgot Password',
+    signupText: 'New to ToolJet?',
+    signupUrl: '#',
+    signupCTA: 'Create an account',
+    showSignup: true,
+    emailLabel: 'Email address',
+    emailPlaceholder: 'Enter email address',
+    buttonText: 'Send a reset link',
+    adminContactText: 'Contact admin to reset your password',
+    showAdminBanner: true,
+  },
+};
+
+export const CustomHeader = {
+  args: {
+    headerText: 'Reset Your Password',
+    signupText: 'New to ToolJet?',
+    signupUrl: '#',
+    signupCTA: 'Create an account',
+    showSignup: true,
+    emailLabel: 'Email address',
+    emailPlaceholder: 'Enter your work email',
+    buttonText: 'Send reset link',
+    adminContactText: 'Contact admin to reset your password',
+    showAdminBanner: true,
+  },
+};
+
+export const NoSignup = {
+  args: {
+    headerText: 'Forgot Password',
+    signupText: '',
+    signupUrl: '#',
+    signupCTA: '',
+    showSignup: false,
+    emailLabel: 'Email address',
+    emailPlaceholder: 'Enter email address',
+    buttonText: 'Send a reset link',
+    adminContactText: 'Contact admin to reset your password',
+    showAdminBanner: true,
+  },
+};
+
+export const NoAdminBanner = {
+  args: {
+    headerText: 'Forgot Password',
+    signupText: 'New to ToolJet?',
+    signupUrl: '#',
+    signupCTA: 'Create an account',
+    showSignup: true,
+    emailLabel: 'Email address',
+    emailPlaceholder: 'Enter email address',
+    buttonText: 'Send a reset link',
+    adminContactText: 'Contact admin to reset your password',
+    showAdminBanner: false,
+  },
+};
+
+export const WithEmailValue = {
+  args: {
+    headerText: 'Forgot Password',
+    signupText: 'New to ToolJet?',
+    signupUrl: '#',
+    signupCTA: 'Create an account',
+    showSignup: true,
+    emailLabel: 'Email address',
+    emailPlaceholder: 'Enter email address',
+    buttonText: 'Send a reset link',
+    adminContactText: 'Contact admin to reset your password',
+    showAdminBanner: true,
+    emailValue: 'user@example.com',
+  },
+};
+
+export const WithValidationError = {
+  args: {
+    headerText: 'Forgot Password',
+    signupText: 'New to ToolJet?',
+    signupUrl: '#',
+    signupCTA: 'Create an account',
+    showSignup: true,
+    emailLabel: 'Email address',
+    emailPlaceholder: 'Enter email address',
+    buttonText: 'Send a reset link',
+    adminContactText: 'Contact admin to reset your password',
+    showAdminBanner: true,
+    emailValue: 'invalid-email',
+    emailValidationMessage: {
+      valid: false,
+      message: 'Please enter a valid email address',
+    },
+  },
+};
+
+export const Loading = {
+  args: {
+    headerText: 'Forgot Password',
+    signupText: 'New to ToolJet?',
+    signupUrl: '#',
+    signupCTA: 'Create an account',
+    showSignup: true,
+    emailLabel: 'Email address',
+    emailPlaceholder: 'Enter email address',
+    buttonText: 'Sending...',
+    adminContactText: 'Contact admin to reset your password',
+    showAdminBanner: true,
+    emailValue: 'user@example.com',
+    isLoading: true,
+    disabled: true,
+  },
+};
+
+export const Disabled = {
+  args: {
+    headerText: 'Forgot Password',
+    signupText: 'New to ToolJet?',
+    signupUrl: '#',
+    signupCTA: 'Create an account',
+    showSignup: true,
+    emailLabel: 'Email address',
+    emailPlaceholder: 'Enter email address',
+    buttonText: 'Send a reset link',
+    adminContactText: 'Contact admin to reset your password',
+    showAdminBanner: true,
+    disabled: true,
+  },
+};
+
+export const WithValidation = {
+  args: {
+    headerText: 'Forgot Password',
+    signupText: 'New to ToolJet?',
+    signupUrl: '#',
+    signupCTA: 'Create an account',
+    showSignup: true,
+    emailLabel: 'Email address',
+    emailPlaceholder: 'Enter email address',
+    buttonText: 'Send a reset link',
+    adminContactText: 'Contact admin to reset your password',
+    showAdminBanner: true,
+    emailValidation: (e) => {
+      const value = e.target.value;
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+      if (!value) {
+        return { valid: false, message: 'Email is required' };
+      }
+
+      if (!emailRegex.test(value)) {
+        return { valid: false, message: 'Please enter a valid email address' };
+      }
+
+      return { valid: true, message: 'Email looks good!' };
+    },
+  },
+};
+
+export const Minimal = {
+  args: {
+    headerText: 'Reset Password',
+    signupText: '',
+    signupUrl: '#',
+    signupCTA: '',
+    showSignup: false,
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your email',
+    buttonText: 'Reset',
+    adminContactText: '',
+    showAdminBanner: false,
+  },
+};
+
+export const CustomAdminText = {
+  args: {
+    headerText: 'Forgot Password',
+    signupText: 'New to ToolJet?',
+    signupUrl: '#',
+    signupCTA: 'Create an account',
+    showSignup: true,
+    emailLabel: 'Email address',
+    emailPlaceholder: 'Enter email address',
+    buttonText: 'Send a reset link',
+    adminContactText: 'Contact your system administrator for password reset assistance',
+    showAdminBanner: true,
+  },
+};
diff --git a/frontend/src/components/Auth/Stories/ForgotPasswordInfoScreen.stories.jsx b/frontend/src/components/Auth/Stories/ForgotPasswordInfoScreen.stories.jsx
new file mode 100644
index 0000000000..a7c9d145f9
--- /dev/null
+++ b/frontend/src/components/Auth/Stories/ForgotPasswordInfoScreen.stories.jsx
@@ -0,0 +1,167 @@
+import React from 'react';
+import { ForgotPasswordInfoScreen } from '../ForgotPasswordInfoScreen';
+
+export default {
+  title: 'Auth/ForgotPasswordInfoScreen',
+  component: ForgotPasswordInfoScreen,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    headerText: {
+      control: 'text',
+      description: 'The main heading text for the info screen',
+    },
+    messageText: {
+      control: 'text',
+      description: 'Main message text',
+    },
+    email: {
+      control: 'text',
+      description: 'Email address to display in the message',
+    },
+    infoText: {
+      control: 'text',
+      description: 'Additional info text',
+    },
+    showInfo: {
+      control: 'boolean',
+      description: 'Show or hide the info text',
+    },
+    buttonText: {
+      control: 'text',
+      description: 'Text for the back to login button',
+    },
+    onBackToLogin: {
+      action: 'back to login clicked',
+      description: 'Back to login button handler',
+    },
+    showSeparator: {
+      control: 'boolean',
+      description: 'Show or hide the separator',
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    headerText: 'Check your mail',
+    messageText: "We've sent a password reset link to",
+    email: 'user@example.com',
+    infoText: 'Did not receive an email? Check your spam folder!',
+    showInfo: true,
+    buttonText: 'Back to login',
+    showSeparator: true,
+  },
+};
+
+export const CustomHeader = {
+  args: {
+    headerText: 'Password Reset Sent',
+    messageText: "We've sent a password reset link to",
+    email: 'user@example.com',
+    infoText: 'Did not receive an email? Check your spam folder!',
+    showInfo: true,
+    buttonText: 'Back to login',
+    showSeparator: true,
+  },
+};
+
+export const LongEmail = {
+  args: {
+    headerText: 'Check your mail',
+    messageText: "We've sent a password reset link to",
+    email: 'very.long.email.address@verylongdomainname.com',
+    infoText: 'Did not receive an email? Check your spam folder!',
+    showInfo: true,
+    buttonText: 'Back to login',
+    showSeparator: true,
+  },
+};
+
+export const NoEmail = {
+  args: {
+    headerText: 'Check your mail',
+    messageText: "We've sent a password reset link to your registered email address",
+    email: '',
+    infoText: 'Did not receive an email? Check your spam folder!',
+    showInfo: true,
+    buttonText: 'Back to login',
+    showSeparator: true,
+  },
+};
+
+export const NoInfo = {
+  args: {
+    headerText: 'Check your mail',
+    messageText: "We've sent a password reset link to",
+    email: 'user@example.com',
+    infoText: '',
+    showInfo: false,
+    buttonText: 'Back to login',
+    showSeparator: true,
+  },
+};
+
+export const NoSeparator = {
+  args: {
+    headerText: 'Check your mail',
+    messageText: "We've sent a password reset link to",
+    email: 'user@example.com',
+    infoText: 'Did not receive an email? Check your spam folder!',
+    showInfo: true,
+    buttonText: 'Back to login',
+    showSeparator: false,
+  },
+};
+
+export const CustomMessage = {
+  args: {
+    headerText: 'Check your mail',
+    messageText: 'A password reset link has been sent to your email address',
+    email: 'user@example.com',
+    infoText: 'Please check your inbox and follow the instructions to reset your password',
+    showInfo: true,
+    buttonText: 'Return to login',
+    showSeparator: true,
+  },
+};
+
+export const Minimal = {
+  args: {
+    headerText: 'Email Sent',
+    messageText: 'Check your email for reset instructions',
+    email: '',
+    infoText: '',
+    showInfo: false,
+    buttonText: 'Back',
+    showSeparator: false,
+  },
+};
+
+export const CustomButtonText = {
+  args: {
+    headerText: 'Check your mail',
+    messageText: "We've sent a password reset link to",
+    email: 'user@example.com',
+    infoText: 'Did not receive an email? Check your spam folder!',
+    showInfo: true,
+    buttonText: 'Return to sign in',
+    showSeparator: true,
+  },
+};
+
+export const LongMessage = {
+  args: {
+    headerText: 'Check your mail',
+    messageText:
+      "We've sent a password reset link to your registered email address. Please check your inbox and click the link to reset your password",
+    email: 'user@example.com',
+    infoText:
+      'Did not receive an email? Please check your spam folder or contact support if you continue to have issues',
+    showInfo: true,
+    buttonText: 'Back to login',
+    showSeparator: true,
+  },
+};
diff --git a/frontend/src/components/Auth/Stories/LoginForm.stories.jsx b/frontend/src/components/Auth/Stories/LoginForm.stories.jsx
index de18ae765f..46f15bfe0f 100644
--- a/frontend/src/components/Auth/Stories/LoginForm.stories.jsx
+++ b/frontend/src/components/Auth/Stories/LoginForm.stories.jsx
@@ -1,337 +1,337 @@
-import { LoginForm } from "../LoginForm";
+import { LoginForm } from '../LoginForm';
 
 export default {
-  title: "Auth/LoginForm",
+  title: 'Auth/LoginForm',
   component: LoginForm,
   parameters: {
-    layout: "centered",
+    layout: 'centered',
   },
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {
     signinHeader: {
-      control: "text",
-      description: "The main heading text for the login form",
+      control: 'text',
+      description: 'The main heading text for the login form',
     },
     signUpText: {
-      control: "text",
-      description: "Text before the sign up link",
+      control: 'text',
+      description: 'Text before the sign up link',
     },
     signUpUrl: {
-      control: "text",
-      description: "URL for the sign up link",
+      control: 'text',
+      description: 'URL for the sign up link',
     },
     signUpCTA: {
-      control: "text",
-      description: "Call-to-action text for the sign up link",
+      control: 'text',
+      description: 'Call-to-action text for the sign up link',
     },
     showSignup: {
-      control: "boolean",
-      description: "Show or hide the signup section",
+      control: 'boolean',
+      description: 'Show or hide the signup section',
     },
     organizationName: {
-      control: "text",
-      description: "Organization name to display in the header",
+      control: 'text',
+      description: 'Organization name to display in the header',
     },
     emailLabel: {
-      control: "text",
-      description: "Label for the email input field",
+      control: 'text',
+      description: 'Label for the email input field',
     },
     emailPlaceholder: {
-      control: "text",
-      description: "Placeholder text for the email input",
+      control: 'text',
+      description: 'Placeholder text for the email input',
     },
     passwordLabel: {
-      control: "text",
-      description: "Label for the password input field",
+      control: 'text',
+      description: 'Label for the password input field',
     },
     passwordPlaceholder: {
-      control: "text",
-      description: "Placeholder text for the password input",
+      control: 'text',
+      description: 'Placeholder text for the password input',
     },
     showForgotPassword: {
-      control: "boolean",
-      description: "Show or hide the forgot password link",
+      control: 'boolean',
+      description: 'Show or hide the forgot password link',
     },
     forgotPasswordUrl: {
-      control: "text",
-      description: "URL for the forgot password link",
+      control: 'text',
+      description: 'URL for the forgot password link',
     },
     forgotPasswordText: {
-      control: "text",
-      description: "Text for the forgot password link",
+      control: 'text',
+      description: 'Text for the forgot password link',
     },
     signinButtonText: {
-      control: "text",
-      description: "Text for the submit button",
+      control: 'text',
+      description: 'Text for the submit button',
     },
     orText: {
-      control: "text",
-      description: "Text for the OR separator",
+      control: 'text',
+      description: 'Text for the OR separator',
     },
     showOrSeparator: {
-      control: "boolean",
-      description: "Show or hide the OR separator",
+      control: 'boolean',
+      description: 'Show or hide the OR separator',
     },
     emailValue: {
-      control: "text",
-      description: "Controlled value for email input",
+      control: 'text',
+      description: 'Controlled value for email input',
     },
     passwordValue: {
-      control: "text",
-      description: "Controlled value for password input",
+      control: 'text',
+      description: 'Controlled value for password input',
     },
     isLoading: {
-      control: "boolean",
-      description: "Loading state for the form",
+      control: 'boolean',
+      description: 'Loading state for the form',
     },
     disabled: {
-      control: "boolean",
-      description: "Disabled state for the form",
+      control: 'boolean',
+      description: 'Disabled state for the form',
     },
     onSubmit: {
-      action: "submitted",
-      description: "Form submission handler",
+      action: 'submitted',
+      description: 'Form submission handler',
     },
     onEmailChange: {
-      action: "email changed",
-      description: "Email input change handler",
+      action: 'email changed',
+      description: 'Email input change handler',
     },
     onPasswordChange: {
-      action: "password changed",
-      description: "Password input change handler",
+      action: 'password changed',
+      description: 'Password input change handler',
     },
     emailValidation: {
       control: false,
-      description: "Email validation function",
+      description: 'Email validation function',
     },
     passwordValidation: {
       control: false,
-      description: "Password validation function",
+      description: 'Password validation function',
     },
     emailValidationMessage: {
-      control: "object",
-      description: "External email validation message object",
+      control: 'object',
+      description: 'External email validation message object',
     },
     passwordValidationMessage: {
-      control: "object",
-      description: "External password validation message object",
+      control: 'object',
+      description: 'External password validation message object',
     },
   },
 };
 
 export const Default = {
   args: {
-    signinHeader: "Sign in",
-    signUpText: "New to ToolJet?",
-    signUpUrl: "#",
-    signUpCTA: "Create an account",
+    signinHeader: 'Sign in',
+    signUpText: 'New to ToolJet?',
+    signUpUrl: '#',
+    signUpCTA: 'Create an account',
     showSignup: true,
-    organizationName: "",
-    emailLabel: "Email",
-    emailPlaceholder: "Enter your work email",
-    passwordLabel: "Password",
-    passwordPlaceholder: "Enter password",
+    organizationName: '',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your work email',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Enter password',
     showForgotPassword: true,
-    forgotPasswordUrl: "/forgot-password",
-    forgotPasswordText: "Forgot?",
-    signinButtonText: "Sign in",
-    orText: "OR",
+    forgotPasswordUrl: '/forgot-password',
+    forgotPasswordText: 'Forgot?',
+    signinButtonText: 'Sign in',
+    orText: 'OR',
     showOrSeparator: true,
   },
 };
 
 export const CustomHeader = {
   args: {
-    signinHeader: "Welcome Back",
-    signUpText: "New to ToolJet?",
-    signUpUrl: "#",
-    signUpCTA: "Create an account",
+    signinHeader: 'Welcome Back',
+    signUpText: 'New to ToolJet?',
+    signUpUrl: '#',
+    signUpCTA: 'Create an account',
     showSignup: true,
-    organizationName: "",
-    emailLabel: "Email",
-    emailPlaceholder: "m@example.com",
-    passwordLabel: "Password",
-    passwordPlaceholder: "Enter password",
+    organizationName: '',
+    emailLabel: 'Email',
+    emailPlaceholder: 'm@example.com',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Enter password',
     showForgotPassword: true,
-    forgotPasswordUrl: "/forgot-password",
-    forgotPasswordText: "Forgot?",
-    signinButtonText: "Sign in",
-    orText: "OR",
+    forgotPasswordUrl: '/forgot-password',
+    forgotPasswordText: 'Forgot?',
+    signinButtonText: 'Sign in',
+    orText: 'OR',
     showOrSeparator: true,
   },
 };
 
 export const WithOrganization = {
   args: {
-    signinHeader: "Sign in",
-    signUpText: "New to ToolJet?",
-    signUpUrl: "#",
-    signUpCTA: "Create an account",
+    signinHeader: 'Sign in',
+    signUpText: 'New to ToolJet?',
+    signUpUrl: '#',
+    signUpCTA: 'Create an account',
     showSignup: true,
-    organizationName: "Acme Corporation",
-    emailLabel: "Email",
-    emailPlaceholder: "Enter your work email",
-    passwordLabel: "Password",
-    passwordPlaceholder: "Enter password",
+    organizationName: 'Acme Corporation',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your work email',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Enter password',
     showForgotPassword: true,
-    forgotPasswordUrl: "/forgot-password",
-    forgotPasswordText: "Forgot?",
-    signinButtonText: "Sign in",
-    orText: "OR",
+    forgotPasswordUrl: '/forgot-password',
+    forgotPasswordText: 'Forgot?',
+    signinButtonText: 'Sign in',
+    orText: 'OR',
     showOrSeparator: true,
   },
 };
 
 export const OrganizationOnly = {
   args: {
-    signinHeader: "Sign in",
-    signUpText: "",
-    signUpUrl: "#",
-    signUpCTA: "",
+    signinHeader: 'Sign in',
+    signUpText: '',
+    signUpUrl: '#',
+    signUpCTA: '',
     showSignup: false,
-    organizationName: "TechCorp Inc.",
-    emailLabel: "Email",
-    emailPlaceholder: "Enter your work email",
-    passwordLabel: "Password",
-    passwordPlaceholder: "Enter password",
+    organizationName: 'TechCorp Inc.',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your work email',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Enter password',
     showForgotPassword: true,
-    forgotPasswordUrl: "/forgot-password",
-    forgotPasswordText: "Forgot?",
-    signinButtonText: "Sign in",
-    orText: "OR",
+    forgotPasswordUrl: '/forgot-password',
+    forgotPasswordText: 'Forgot?',
+    signinButtonText: 'Sign in',
+    orText: 'OR',
     showOrSeparator: true,
   },
 };
 
 export const LongOrganizationName = {
   args: {
-    signinHeader: "Sign in",
-    signUpText: "New to ToolJet?",
-    signUpUrl: "#",
-    signUpCTA: "Create an account",
+    signinHeader: 'Sign in',
+    signUpText: 'New to ToolJet?',
+    signUpUrl: '#',
+    signUpCTA: 'Create an account',
     showSignup: true,
-    organizationName: "Very Long Organization Name That Might Wrap",
-    emailLabel: "Email",
-    emailPlaceholder: "Enter your work email",
-    passwordLabel: "Password",
-    passwordPlaceholder: "Enter password",
+    organizationName: 'Very Long Organization Name That Might Wrap',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your work email',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Enter password',
     showForgotPassword: true,
-    forgotPasswordUrl: "/forgot-password",
-    forgotPasswordText: "Forgot?",
-    signinButtonText: "Sign in",
-    orText: "OR",
+    forgotPasswordUrl: '/forgot-password',
+    forgotPasswordText: 'Forgot?',
+    signinButtonText: 'Sign in',
+    orText: 'OR',
     showOrSeparator: true,
   },
 };
 
 export const OrganizationWithSpecialChars = {
   args: {
-    signinHeader: "Sign in",
-    signUpText: "New to ToolJet?",
-    signUpUrl: "#",
-    signUpCTA: "Create an account",
+    signinHeader: 'Sign in',
+    signUpText: 'New to ToolJet?',
+    signUpUrl: '#',
+    signUpCTA: 'Create an account',
     showSignup: true,
-    organizationName: "Acme & Co. (Ltd.)",
-    emailLabel: "Email",
-    emailPlaceholder: "Enter your work email",
-    passwordLabel: "Password",
-    passwordPlaceholder: "Enter password",
+    organizationName: 'Acme & Co. (Ltd.)',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your work email',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Enter password',
     showForgotPassword: true,
-    forgotPasswordUrl: "/forgot-password",
-    forgotPasswordText: "Forgot?",
-    signinButtonText: "Sign in",
-    orText: "OR",
+    forgotPasswordUrl: '/forgot-password',
+    forgotPasswordText: 'Forgot?',
+    signinButtonText: 'Sign in',
+    orText: 'OR',
     showOrSeparator: true,
   },
 };
 
 export const EmptyOrganizationName = {
   args: {
-    signinHeader: "Sign in",
-    signUpText: "New to ToolJet?",
-    signUpUrl: "#",
-    signUpCTA: "Create an account",
+    signinHeader: 'Sign in',
+    signUpText: 'New to ToolJet?',
+    signUpUrl: '#',
+    signUpCTA: 'Create an account',
     showSignup: true,
-    organizationName: "",
-    emailLabel: "Email",
-    emailPlaceholder: "Enter your work email",
-    passwordLabel: "Password",
-    passwordPlaceholder: "Enter password",
+    organizationName: '',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your work email',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Enter password',
     showForgotPassword: true,
-    forgotPasswordUrl: "/forgot-password",
-    forgotPasswordText: "Forgot?",
-    signinButtonText: "Sign in",
-    orText: "OR",
+    forgotPasswordUrl: '/forgot-password',
+    forgotPasswordText: 'Forgot?',
+    signinButtonText: 'Sign in',
+    orText: 'OR',
     showOrSeparator: true,
   },
 };
 
 export const NoOrganizationNoSignup = {
   args: {
-    signinHeader: "Sign in",
-    signUpText: "",
-    signUpUrl: "#",
-    signUpCTA: "",
+    signinHeader: 'Sign in',
+    signUpText: '',
+    signUpUrl: '#',
+    signUpCTA: '',
     showSignup: false,
-    organizationName: "",
-    emailLabel: "Email",
-    emailPlaceholder: "Enter your work email",
-    passwordLabel: "Password",
-    passwordPlaceholder: "Enter password",
+    organizationName: '',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your work email',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Enter password',
     showForgotPassword: true,
-    forgotPasswordUrl: "/forgot-password",
-    forgotPasswordText: "Forgot?",
-    signinButtonText: "Sign in",
-    orText: "OR",
+    forgotPasswordUrl: '/forgot-password',
+    forgotPasswordText: 'Forgot?',
+    signinButtonText: 'Sign in',
+    orText: 'OR',
     showOrSeparator: true,
   },
 };
 
 export const WithErrors = {
   args: {
-    signinHeader: "Sign in",
-    signUpText: "New to ToolJet?",
-    signUpUrl: "#",
-    signUpCTA: "Create an account",
-    emailLabel: "Email",
-    emailPlaceholder: "m@example.com",
-    passwordLabel: "Password",
+    signinHeader: 'Sign in',
+    signUpText: 'New to ToolJet?',
+    signUpUrl: '#',
+    signUpCTA: 'Create an account',
+    emailLabel: 'Email',
+    emailPlaceholder: 'm@example.com',
+    passwordLabel: 'Password',
     showForgotPassword: true,
-    forgotPasswordUrl: "/forgot-password",
-    forgotPasswordText: "Forgot?",
-    signinButtonText: "Sign in",
-    orText: "OR",
+    forgotPasswordUrl: '/forgot-password',
+    forgotPasswordText: 'Forgot?',
+    signinButtonText: 'Sign in',
+    orText: 'OR',
     showOrSeparator: true,
-    emailValue: "invalid-email",
-    passwordValue: "123",
+    emailValue: 'invalid-email',
+    passwordValue: '123',
     emailValidationMessage: {
       valid: false,
-      message: "Please enter a valid email address",
+      message: 'Please enter a valid email address',
     },
     passwordValidationMessage: {
       valid: false,
-      message: "Password must be at least 8 characters",
+      message: 'Password must be at least 8 characters',
     },
   },
 };
 
 export const Loading = {
   args: {
-    signinHeader: "Sign in",
-    signUpText: "New to ToolJet?",
-    signUpUrl: "#",
-    signUpCTA: "Create an account",
-    emailLabel: "Email",
-    emailPlaceholder: "m@example.com",
-    passwordLabel: "Password",
+    signinHeader: 'Sign in',
+    signUpText: 'New to ToolJet?',
+    signUpUrl: '#',
+    signUpCTA: 'Create an account',
+    emailLabel: 'Email',
+    emailPlaceholder: 'm@example.com',
+    passwordLabel: 'Password',
     showForgotPassword: true,
-    forgotPasswordUrl: "/forgot-password",
-    forgotPasswordText: "Forgot?",
-    signinButtonText: "Signing in...",
-    orText: "OR",
+    forgotPasswordUrl: '/forgot-password',
+    forgotPasswordText: 'Forgot?',
+    signinButtonText: 'Signing in...',
+    orText: 'OR',
     showOrSeparator: true,
-    emailValue: "user@example.com",
-    passwordValue: "password123",
+    emailValue: 'user@example.com',
+    passwordValue: 'password123',
     isLoading: true,
     disabled: true,
   },
@@ -339,166 +339,166 @@ export const Loading = {
 
 export const CustomSeparator = {
   args: {
-    signinHeader: "Sign in",
-    signUpText: "New to ToolJet?",
-    signUpUrl: "#",
-    signUpCTA: "Create an account",
-    emailLabel: "Email",
-    emailPlaceholder: "m@example.com",
-    passwordLabel: "Password",
+    signinHeader: 'Sign in',
+    signUpText: 'New to ToolJet?',
+    signUpUrl: '#',
+    signUpCTA: 'Create an account',
+    emailLabel: 'Email',
+    emailPlaceholder: 'm@example.com',
+    passwordLabel: 'Password',
     showForgotPassword: true,
-    forgotPasswordUrl: "/forgot-password",
-    forgotPasswordText: "Forgot?",
-    signinButtonText: "Sign in",
-    orText: "OR CONTINUE WITH",
+    forgotPasswordUrl: '/forgot-password',
+    forgotPasswordText: 'Forgot?',
+    signinButtonText: 'Sign in',
+    orText: 'OR CONTINUE WITH',
     showOrSeparator: true,
   },
 };
 
 export const NoSeparator = {
   args: {
-    signinHeader: "Sign in",
-    signUpText: "New to ToolJet?",
-    signUpUrl: "#",
-    signUpCTA: "Create an account",
-    emailLabel: "Email",
-    emailPlaceholder: "m@example.com",
-    passwordLabel: "Password",
+    signinHeader: 'Sign in',
+    signUpText: 'New to ToolJet?',
+    signUpUrl: '#',
+    signUpCTA: 'Create an account',
+    emailLabel: 'Email',
+    emailPlaceholder: 'm@example.com',
+    passwordLabel: 'Password',
     showForgotPassword: true,
-    forgotPasswordUrl: "/forgot-password",
-    forgotPasswordText: "Forgot?",
-    signinButtonText: "Sign in",
-    orText: "OR",
+    forgotPasswordUrl: '/forgot-password',
+    forgotPasswordText: 'Forgot?',
+    signinButtonText: 'Sign in',
+    orText: 'OR',
     showOrSeparator: false,
   },
 };
 
 export const Minimal = {
   args: {
-    signinHeader: "Login",
-    signUpText: "",
-    signUpUrl: "#",
-    signUpCTA: "",
+    signinHeader: 'Login',
+    signUpText: '',
+    signUpUrl: '#',
+    signUpCTA: '',
     showSignup: false,
-    organizationName: "",
-    emailLabel: "Email",
-    emailPlaceholder: "Enter your email",
-    passwordLabel: "Password",
-    passwordPlaceholder: "Enter password",
+    organizationName: '',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your email',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Enter password',
     showForgotPassword: false,
-    signinButtonText: "Login",
-    orText: "OR",
+    signinButtonText: 'Login',
+    orText: 'OR',
     showOrSeparator: false,
   },
 };
 
 export const WithValidation = {
   args: {
-    signinHeader: "Sign in",
-    signUpText: "New to ToolJet?",
-    signUpUrl: "#",
-    signUpCTA: "Create an account",
-    emailLabel: "Email",
-    emailPlaceholder: "Enter your email",
-    passwordLabel: "Password",
+    signinHeader: 'Sign in',
+    signUpText: 'New to ToolJet?',
+    signUpUrl: '#',
+    signUpCTA: 'Create an account',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your email',
+    passwordLabel: 'Password',
     showForgotPassword: true,
-    forgotPasswordUrl: "/forgot-password",
-    forgotPasswordText: "Forgot?",
-    signinButtonText: "Sign in",
-    orText: "OR",
+    forgotPasswordUrl: '/forgot-password',
+    forgotPasswordText: 'Forgot?',
+    signinButtonText: 'Sign in',
+    orText: 'OR',
     showOrSeparator: true,
     emailValidation: (e) => {
       const value = e.target.value;
       const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
       if (!value) {
-        return { valid: false, message: "Email is required" };
+        return { valid: false, message: 'Email is required' };
       }
 
       if (!emailRegex.test(value)) {
-        return { valid: false, message: "Please enter a valid email address" };
+        return { valid: false, message: 'Please enter a valid email address' };
       }
 
-      return { valid: true, message: "Email looks good!" };
+      return { valid: true, message: 'Email looks good!' };
     },
     passwordValidation: (e) => {
       const value = e.target.value;
 
       if (!value) {
-        return { valid: false, message: "Password is required" };
+        return { valid: false, message: 'Password is required' };
       }
 
       if (value.length < 8) {
         return {
           valid: false,
-          message: "Password must be at least 8 characters",
+          message: 'Password must be at least 8 characters',
         };
       }
 
       if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value)) {
         return {
           valid: false,
-          message: "Password must contain uppercase, lowercase, and number",
+          message: 'Password must contain uppercase, lowercase, and number',
         };
       }
 
-      return { valid: true, message: "Password is strong!" };
+      return { valid: true, message: 'Password is strong!' };
     },
   },
 };
 
 export const WithExternalValidation = {
   args: {
-    signinHeader: "Sign in",
-    signUpText: "New to ToolJet?",
-    signUpUrl: "#",
-    signUpCTA: "Create an account",
-    emailLabel: "Email",
-    emailPlaceholder: "Enter your email",
-    passwordLabel: "Password",
+    signinHeader: 'Sign in',
+    signUpText: 'New to ToolJet?',
+    signUpUrl: '#',
+    signUpCTA: 'Create an account',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your email',
+    passwordLabel: 'Password',
     showForgotPassword: true,
-    forgotPasswordUrl: "/forgot-password",
-    forgotPasswordText: "Forgot?",
-    signinButtonText: "Sign in",
-    orText: "OR",
+    forgotPasswordUrl: '/forgot-password',
+    forgotPasswordText: 'Forgot?',
+    signinButtonText: 'Sign in',
+    orText: 'OR',
     showOrSeparator: true,
-    emailValue: "user@example.com",
-    passwordValue: "password123",
+    emailValue: 'user@example.com',
+    passwordValue: 'password123',
     emailValidationMessage: {
       valid: true,
-      message: "Email is valid and available",
+      message: 'Email is valid and available',
     },
     passwordValidationMessage: {
       valid: true,
-      message: "Password meets all requirements",
+      message: 'Password meets all requirements',
     },
   },
 };
 
 export const WithValidationErrors = {
   args: {
-    signinHeader: "Sign in",
-    signUpText: "New to ToolJet?",
-    signUpUrl: "#",
-    signUpCTA: "Create an account",
-    emailLabel: "Email",
-    emailPlaceholder: "Enter your email",
-    passwordLabel: "Password",
+    signinHeader: 'Sign in',
+    signUpText: 'New to ToolJet?',
+    signUpUrl: '#',
+    signUpCTA: 'Create an account',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your email',
+    passwordLabel: 'Password',
     showForgotPassword: true,
-    forgotPasswordUrl: "/forgot-password",
-    forgotPasswordText: "Forgot?",
-    signinButtonText: "Sign in",
-    orText: "OR",
+    forgotPasswordUrl: '/forgot-password',
+    forgotPasswordText: 'Forgot?',
+    signinButtonText: 'Sign in',
+    orText: 'OR',
     showOrSeparator: true,
-    emailValue: "invalid-email",
-    passwordValue: "123",
+    emailValue: 'invalid-email',
+    passwordValue: '123',
     emailValidationMessage: {
       valid: false,
-      message: "Please enter a valid email address",
+      message: 'Please enter a valid email address',
     },
     passwordValidationMessage: {
       valid: false,
-      message: "Password must be at least 8 characters",
+      message: 'Password must be at least 8 characters',
     },
   },
 };

From f27a3a2aaf6b6ac4abb4f4a620c5a8834ac38462 Mon Sep 17 00:00:00 2001
From: adishM98 Bot <adish.madhu@gmail.com>
Date: Wed, 17 Sep 2025 18:23:17 +0530
Subject: [PATCH 053/157] feat: add GitHub Actions workflow for rendering
 Storybook previews

---
 .github/workflows/story-book.yml | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/.github/workflows/story-book.yml b/.github/workflows/story-book.yml
index cfbb7814ff..b1791c99d2 100644
--- a/.github/workflows/story-book.yml
+++ b/.github/workflows/story-book.yml
@@ -29,11 +29,15 @@ jobs:
             "type": "static_site",
             "autoDeploy": "yes",
             "branch": "${{ env.BRANCH_NAME }}",
-            "name": "storybook PR #${{ env.PR_NUMBER }}",
+            "name": "ToolJet PR #${{ env.PR_NUMBER }}",
             "ownerId": "tea-caeo4bj19n072h3dddc0",
             "repo": "${{ github.event.pull_request.head.repo.git_url }}",
             "rootDir": "frontend",
             "envVars": [
+              {
+                "key": "NODE_ENV",
+                "value": "production"
+              },
               {
                 "key": "NODE_VERSION",
                 "value": "v22.15.1"
@@ -41,13 +45,17 @@ jobs:
               {
                 "key": "NPM_VERSION",
                 "value": "10.9.2"
+              },
+              {
+                "key": "GTM",
+                "value": "dummy"
               }
             ],
             "serviceDetails": {
                 "pullRequestPreviewsEnabled": "no",
                 "buildCommand": "npm i && npx storybook build",
-                "publishPath": "storybook-static/",
-                "url": "https://storybook-pr-${{ env.PR_NUMBER }}.onrender.com"
+                "publishPath": "frontend/storybook-static/",
+                "url": "https://tooljet-pr-${{ env.PR_NUMBER }}.onrender.com"
             }
           }')
 
@@ -64,7 +72,7 @@ jobs:
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              body: 'Deployment: https://storybook-pr-${{ env.PR_NUMBER }}.onrender.com \n Dashboard: https://dashboard.render.com/static/${{ env.SERVICE_ID }}'
+              body: 'Deployment: https://tooljet-pr-${{ env.PR_NUMBER }}.onrender.com \n Dashboard: https://dashboard.render.com/static/${{ env.SERVICE_ID }}'
             })
 
       - uses: actions/github-script@v6
@@ -96,7 +104,7 @@ jobs:
       - name: Delete service
         run: |
           export SERVICE_ID=$(curl --request GET \
-          --url 'https://api.render.com/v1/services?name=storybook%20PR%20%23${{ env.PR_NUMBER }}&limit=1' \
+          --url 'https://api.render.com/v1/services?name=ToolJet%20PR%20%23${{ env.PR_NUMBER }}&limit=1' \
           --header 'accept: application/json' \
           --header 'authorization: Bearer ${{ secrets.RENDER_API_KEY }}' | \
            jq -r '.[0].service.id')
@@ -150,7 +158,7 @@ jobs:
       - name: Suspend service
         run: |
           export SERVICE_ID=$(curl --request GET \
-          --url 'https://api.render.com/v1/services?name=storybook%20PR%20%23${{ env.PR_NUMBER }}&limit=1' \
+          --url 'https://api.render.com/v1/services?name=ToolJet%20PR%20%23${{ env.PR_NUMBER }}&limit=1' \
           --header 'accept: application/json' \
           --header 'authorization: Bearer ${{ secrets.RENDER_API_KEY }}' | \
            jq -r '.[0].service.id')
@@ -182,7 +190,7 @@ jobs:
       - name: Resume service
         run: |
           export SERVICE_ID=$(curl --request GET \
-          --url 'https://api.render.com/v1/services?name=storybook%20PR%20%23${{ env.PR_NUMBER }}&limit=1' \
+          --url 'https://api.render.com/v1/services?name=ToolJet%20PR%20%23${{ env.PR_NUMBER }}&limit=1' \
           --header 'accept: application/json' \
           --header 'authorization: Bearer ${{ secrets.RENDER_API_KEY }}' | \
            jq -r '.[0].service.id')

From 5466216ea1236f555a58b1c6c8a5f8da87ed28ea Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Wed, 17 Sep 2025 18:40:39 +0530
Subject: [PATCH 054/157] Add SetupAdminForm component and corresponding
 Storybook stories

- Introduced `SetupAdminForm` component for admin account setup, featuring fields for name, email, and password with validation.
- Implemented customizable props for labels, placeholders, and button text to enhance usability.
- Created comprehensive Storybook stories to showcase various configurations and states of the `SetupAdminForm`, including validation and loading scenarios.
- Ensured accessibility and user-friendly design in the form layout.
---
 .../src/components/Auth/SetupAdminForm.jsx    | 208 +++++++++++
 .../Auth/Stories/SetupAdminForm.stories.jsx   | 328 ++++++++++++++++++
 2 files changed, 536 insertions(+)
 create mode 100644 frontend/src/components/Auth/SetupAdminForm.jsx
 create mode 100644 frontend/src/components/Auth/Stories/SetupAdminForm.stories.jsx

diff --git a/frontend/src/components/Auth/SetupAdminForm.jsx b/frontend/src/components/Auth/SetupAdminForm.jsx
new file mode 100644
index 0000000000..724af2e7bd
--- /dev/null
+++ b/frontend/src/components/Auth/SetupAdminForm.jsx
@@ -0,0 +1,208 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { CornerDownLeft } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { FormWrapper } from '@/components/Auth/FormWrapper';
+
+export function SetupAdminForm({ className, ...props }) {
+  const {
+    // Header
+    headerText,
+
+    // Form fields
+    nameLabel,
+    namePlaceholder,
+    emailLabel,
+    emailPlaceholder,
+    passwordLabel,
+    passwordPlaceholder,
+
+    // Button
+    buttonText,
+
+    // Terms and privacy
+    termsText,
+    showTerms,
+
+    // Form functionality
+    onSubmit,
+    nameValue,
+    emailValue,
+    passwordValue,
+    onNameChange,
+    onEmailChange,
+    onPasswordChange,
+
+    // Validation and state
+    nameValidation,
+    emailValidation,
+    passwordValidation,
+    nameValidationMessage,
+    emailValidationMessage,
+    passwordValidationMessage,
+    isLoading,
+    disabled,
+  } = props;
+
+  return (
+    <FormWrapper>
+      <form className={cn('tw-flex tw-flex-col tw-gap-6', className)} onSubmit={onSubmit} {...props}>
+        <div className="tw-flex tw-flex-col tw-gap-0.5 tw-min-w-96">
+          <h1 className="tw-text-4xl tw-tracking-tight tw-font-medium tw-mb-0" data-cy="setup-admin-header">
+            {headerText}
+          </h1>
+        </div>
+
+        <div className="tw-grid tw-gap-4">
+          <div className="tw-grid tw-gap-0.5">
+            <Input
+              label={nameLabel}
+              type="text"
+              placeholder={namePlaceholder}
+              value={nameValue}
+              onChange={onNameChange}
+              disabled={disabled}
+              required
+              validation={nameValidation}
+              isValidatedMessages={nameValidationMessage}
+              size="large"
+            />
+          </div>
+
+          <div className="tw-grid tw-gap-0.5">
+            <Input
+              label={emailLabel}
+              type="email"
+              placeholder={emailPlaceholder}
+              value={emailValue}
+              onChange={onEmailChange}
+              disabled={disabled}
+              required
+              validation={emailValidation}
+              isValidatedMessages={emailValidationMessage}
+              size="large"
+            />
+          </div>
+
+          <div className="tw-grid tw-gap-0.5">
+            <Input
+              label={passwordLabel}
+              type="password"
+              placeholder={passwordPlaceholder}
+              value={passwordValue}
+              onChange={onPasswordChange}
+              disabled={disabled}
+              showEncryption={false}
+              required
+              validation={passwordValidation}
+              isValidatedMessages={passwordValidationMessage}
+              size="large"
+            />
+          </div>
+
+          <Button
+            size="large"
+            type="submit"
+            className="tw-w-fit"
+            disabled={disabled || isLoading}
+            isLoading={isLoading}
+          >
+            {buttonText}
+            <CornerDownLeft width="16" height="16" />
+          </Button>
+
+          {showTerms && (
+            <p className="tw-text-xs tw-text-text-placeholder tw-mb-0" data-cy="terms-and-privacy">
+              {termsText}
+            </p>
+          )}
+        </div>
+      </form>
+    </FormWrapper>
+  );
+}
+
+SetupAdminForm.propTypes = {
+  className: PropTypes.string,
+
+  // Header
+  headerText: PropTypes.string,
+
+  // Form fields
+  nameLabel: PropTypes.string,
+  namePlaceholder: PropTypes.string,
+  emailLabel: PropTypes.string,
+  emailPlaceholder: PropTypes.string,
+  passwordLabel: PropTypes.string,
+  passwordPlaceholder: PropTypes.string,
+
+  // Button
+  buttonText: PropTypes.string,
+
+  // Terms and privacy
+  termsText: PropTypes.string,
+  showTerms: PropTypes.bool,
+
+  // Form functionality
+  onSubmit: PropTypes.func,
+  nameValue: PropTypes.string,
+  emailValue: PropTypes.string,
+  passwordValue: PropTypes.string,
+  onNameChange: PropTypes.func,
+  onEmailChange: PropTypes.func,
+  onPasswordChange: PropTypes.func,
+
+  // Validation and state
+  nameValidation: PropTypes.func,
+  emailValidation: PropTypes.func,
+  passwordValidation: PropTypes.func,
+  nameValidationMessage: PropTypes.object,
+  emailValidationMessage: PropTypes.object,
+  passwordValidationMessage: PropTypes.object,
+  isLoading: PropTypes.bool,
+  disabled: PropTypes.bool,
+};
+
+SetupAdminForm.defaultProps = {
+  className: '',
+
+  // Header
+  headerText: 'Set up your admin account',
+
+  // Form fields
+  nameLabel: 'Name',
+  namePlaceholder: 'Enter your name',
+  emailLabel: 'Email',
+  emailPlaceholder: 'Enter your work email',
+  passwordLabel: 'Password',
+  passwordPlaceholder: 'Enter password',
+
+  // Button
+  buttonText: 'Sign up',
+
+  // Terms and privacy
+  termsText: 'By signing up, you agree to our Terms of Service and Privacy Policy',
+  showTerms: true,
+
+  // Form functionality
+  onSubmit: undefined,
+  nameValue: undefined,
+  emailValue: undefined,
+  passwordValue: undefined,
+  onNameChange: undefined,
+  onEmailChange: undefined,
+  onPasswordChange: undefined,
+
+  // Validation and state
+  nameValidation: undefined,
+  emailValidation: undefined,
+  passwordValidation: undefined,
+  nameValidationMessage: undefined,
+  emailValidationMessage: undefined,
+  passwordValidationMessage: undefined,
+  isLoading: false,
+  disabled: false,
+};
diff --git a/frontend/src/components/Auth/Stories/SetupAdminForm.stories.jsx b/frontend/src/components/Auth/Stories/SetupAdminForm.stories.jsx
new file mode 100644
index 0000000000..818eb38c5b
--- /dev/null
+++ b/frontend/src/components/Auth/Stories/SetupAdminForm.stories.jsx
@@ -0,0 +1,328 @@
+import React from 'react';
+import { SetupAdminForm } from '../SetupAdminForm';
+
+export default {
+  title: 'Auth/SetupAdminForm',
+  component: SetupAdminForm,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    headerText: {
+      control: 'text',
+      description: 'The main heading text for the setup admin form',
+    },
+    nameLabel: {
+      control: 'text',
+      description: 'Label for the name input field',
+    },
+    namePlaceholder: {
+      control: 'text',
+      description: 'Placeholder text for the name input',
+    },
+    emailLabel: {
+      control: 'text',
+      description: 'Label for the email input field',
+    },
+    emailPlaceholder: {
+      control: 'text',
+      description: 'Placeholder text for the email input',
+    },
+    passwordLabel: {
+      control: 'text',
+      description: 'Label for the password input field',
+    },
+    passwordPlaceholder: {
+      control: 'text',
+      description: 'Placeholder text for the password input',
+    },
+    buttonText: {
+      control: 'text',
+      description: 'Text for the submit button',
+    },
+    termsText: {
+      control: 'text',
+      description: 'Text for the terms and privacy notice',
+    },
+    showTerms: {
+      control: 'boolean',
+      description: 'Show or hide the terms and privacy notice',
+    },
+    nameValue: {
+      control: 'text',
+      description: 'Controlled value for name input',
+    },
+    emailValue: {
+      control: 'text',
+      description: 'Controlled value for email input',
+    },
+    passwordValue: {
+      control: 'text',
+      description: 'Controlled value for password input',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Loading state for the form',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disabled state for the form',
+    },
+    onSubmit: {
+      action: 'submitted',
+      description: 'Form submission handler',
+    },
+    onNameChange: {
+      action: 'name changed',
+      description: 'Name input change handler',
+    },
+    onEmailChange: {
+      action: 'email changed',
+      description: 'Email input change handler',
+    },
+    onPasswordChange: {
+      action: 'password changed',
+      description: 'Password input change handler',
+    },
+    nameValidation: {
+      control: false,
+      description: 'Name validation function',
+    },
+    emailValidation: {
+      control: false,
+      description: 'Email validation function',
+    },
+    passwordValidation: {
+      control: false,
+      description: 'Password validation function',
+    },
+    nameValidationMessage: {
+      control: 'object',
+      description: 'External name validation message object',
+    },
+    emailValidationMessage: {
+      control: 'object',
+      description: 'External email validation message object',
+    },
+    passwordValidationMessage: {
+      control: 'object',
+      description: 'External password validation message object',
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    headerText: 'Set up your admin account',
+    nameLabel: 'Name',
+    namePlaceholder: 'Enter your name',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your work email',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Enter password',
+    buttonText: 'Sign up',
+    termsText: 'By signing up, you agree to our Terms of Service and Privacy Policy',
+    showTerms: true,
+  },
+};
+
+export const CustomHeader = {
+  args: {
+    headerText: 'Create Admin Account',
+    nameLabel: 'Full Name',
+    namePlaceholder: 'Enter your full name',
+    emailLabel: 'Work Email',
+    emailPlaceholder: 'Enter your work email address',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Create a secure password',
+    buttonText: 'Create Account',
+    termsText: 'By creating an account, you agree to our Terms of Service and Privacy Policy',
+    showTerms: true,
+  },
+};
+
+export const WithValues = {
+  args: {
+    headerText: 'Set up your admin account',
+    nameLabel: 'Name',
+    namePlaceholder: 'Enter your name',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your work email',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Enter password',
+    buttonText: 'Sign up',
+    termsText: 'By signing up, you agree to our Terms of Service and Privacy Policy',
+    showTerms: true,
+    nameValue: 'John Doe',
+    emailValue: 'john.doe@company.com',
+    passwordValue: 'SecurePassword123!',
+  },
+};
+
+export const WithValidationErrors = {
+  args: {
+    headerText: 'Set up your admin account',
+    nameLabel: 'Name',
+    namePlaceholder: 'Enter your name',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your work email',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Enter password',
+    buttonText: 'Sign up',
+    termsText: 'By signing up, you agree to our Terms of Service and Privacy Policy',
+    showTerms: true,
+    nameValue: '',
+    emailValue: 'invalid-email',
+    passwordValue: '123',
+    nameValidationMessage: {
+      valid: false,
+      message: 'Name is required',
+    },
+    emailValidationMessage: {
+      valid: false,
+      message: 'Please enter a valid email address',
+    },
+    passwordValidationMessage: {
+      valid: false,
+      message: 'Password must be at least 8 characters',
+    },
+  },
+};
+
+export const Loading = {
+  args: {
+    headerText: 'Set up your admin account',
+    nameLabel: 'Name',
+    namePlaceholder: 'Enter your name',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your work email',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Enter password',
+    buttonText: 'Creating Account...',
+    termsText: 'By signing up, you agree to our Terms of Service and Privacy Policy',
+    showTerms: true,
+    nameValue: 'John Doe',
+    emailValue: 'john.doe@company.com',
+    passwordValue: 'SecurePassword123!',
+    isLoading: true,
+    disabled: true,
+  },
+};
+
+export const Disabled = {
+  args: {
+    headerText: 'Set up your admin account',
+    nameLabel: 'Name',
+    namePlaceholder: 'Enter your name',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your work email',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Enter password',
+    buttonText: 'Sign up',
+    termsText: 'By signing up, you agree to our Terms of Service and Privacy Policy',
+    showTerms: true,
+    disabled: true,
+  },
+};
+
+export const NoTerms = {
+  args: {
+    headerText: 'Set up your admin account',
+    nameLabel: 'Name',
+    namePlaceholder: 'Enter your name',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your work email',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Enter password',
+    buttonText: 'Sign up',
+    termsText: '',
+    showTerms: false,
+  },
+};
+
+export const WithValidation = {
+  args: {
+    headerText: 'Set up your admin account',
+    nameLabel: 'Name',
+    namePlaceholder: 'Enter your name',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your work email',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Enter password',
+    buttonText: 'Sign up',
+    termsText: 'By signing up, you agree to our Terms of Service and Privacy Policy',
+    showTerms: true,
+    nameValidation: (e) => {
+      const value = e.target.value;
+      if (!value.trim()) {
+        return { valid: false, message: 'Name is required' };
+      }
+      if (value.length < 2) {
+        return { valid: false, message: 'Name must be at least 2 characters' };
+      }
+      return { valid: true, message: 'Name looks good!' };
+    },
+    emailValidation: (e) => {
+      const value = e.target.value;
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      if (!value) {
+        return { valid: false, message: 'Email is required' };
+      }
+      if (!emailRegex.test(value)) {
+        return { valid: false, message: 'Please enter a valid email address' };
+      }
+      return { valid: true, message: 'Email looks good!' };
+    },
+    passwordValidation: (e) => {
+      const value = e.target.value;
+      if (!value) {
+        return { valid: false, message: 'Password is required' };
+      }
+      if (value.length < 8) {
+        return {
+          valid: false,
+          message: 'Password must be at least 8 characters',
+        };
+      }
+      if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value)) {
+        return {
+          valid: false,
+          message: 'Password must contain uppercase, lowercase, and number',
+        };
+      }
+      return { valid: true, message: 'Password is strong!' };
+    },
+  },
+};
+
+export const Minimal = {
+  args: {
+    headerText: 'Admin Setup',
+    nameLabel: 'Name',
+    namePlaceholder: 'Enter name',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter email',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Enter password',
+    buttonText: 'Setup',
+    termsText: '',
+    showTerms: false,
+  },
+};
+
+export const CustomTerms = {
+  args: {
+    headerText: 'Set up your admin account',
+    nameLabel: 'Name',
+    namePlaceholder: 'Enter your name',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your work email',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Enter password',
+    buttonText: 'Sign up',
+    termsText:
+      'By creating an admin account, you acknowledge that you have read and agree to our Terms of Service, Privacy Policy, and Data Processing Agreement.',
+    showTerms: true,
+  },
+};

From 6c05894add55dcb3457c1bce12d86e0cac63eaa1 Mon Sep 17 00:00:00 2001
From: adishM98 Bot <adish.madhu@gmail.com>
Date: Wed, 17 Sep 2025 18:24:09 +0530
Subject: [PATCH 055/157] chore: add dummy PR comment to Storybook workflow

---
 .github/workflows/story-book.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.github/workflows/story-book.yml b/.github/workflows/story-book.yml
index b1791c99d2..48684efc69 100644
--- a/.github/workflows/story-book.yml
+++ b/.github/workflows/story-book.yml
@@ -220,3 +220,5 @@ jobs:
             } catch (e) {
               console.log(e)
             }
+
+# dummy PR 

From f74b12ef02b454099ca09810e0b5d53845a7ec39 Mon Sep 17 00:00:00 2001
From: adishM98 Bot <adish.madhu@gmail.com>
Date: Wed, 17 Sep 2025 18:32:07 +0530
Subject: [PATCH 056/157] chore: comment out environment variables in Storybook
 workflow

---
 .github/workflows/story-book.yml | 36 ++++++++++++++++----------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/.github/workflows/story-book.yml b/.github/workflows/story-book.yml
index 48684efc69..69c4e95b11 100644
--- a/.github/workflows/story-book.yml
+++ b/.github/workflows/story-book.yml
@@ -33,24 +33,24 @@ jobs:
             "ownerId": "tea-caeo4bj19n072h3dddc0",
             "repo": "${{ github.event.pull_request.head.repo.git_url }}",
             "rootDir": "frontend",
-            "envVars": [
-              {
-                "key": "NODE_ENV",
-                "value": "production"
-              },
-              {
-                "key": "NODE_VERSION",
-                "value": "v22.15.1"
-              },
-              {
-                "key": "NPM_VERSION",
-                "value": "10.9.2"
-              },
-              {
-                "key": "GTM",
-                "value": "dummy"
-              }
-            ],
+            # "envVars": [
+            #   {
+            #     "key": "NODE_ENV",
+            #     "value": "production"
+            #   },
+            #   {
+            #     "key": "NODE_VERSION",
+            #     "value": "18.18.2"
+            #   },
+            #   {
+            #     "key": "NPM_VERSION",
+            #     "value": "9.8.1"
+            #   },
+            #   {
+            #     "key": "GTM",
+            #     "value": "dummy"
+            #   }
+            # ],
             "serviceDetails": {
                 "pullRequestPreviewsEnabled": "no",
                 "buildCommand": "npm i && npx storybook build",

From f6f0a9a5d5f2902674c7184af3b5b4c2a62ddb68 Mon Sep 17 00:00:00 2001
From: adishM98 Bot <adish.madhu@gmail.com>
Date: Wed, 17 Sep 2025 18:40:49 +0530
Subject: [PATCH 057/157] fix: update repository URL and remove commented
 environment variables in Storybook workflow

---
 .github/workflows/story-book.yml | 22 ++--------------------
 1 file changed, 2 insertions(+), 20 deletions(-)

diff --git a/.github/workflows/story-book.yml b/.github/workflows/story-book.yml
index 69c4e95b11..ef2177f430 100644
--- a/.github/workflows/story-book.yml
+++ b/.github/workflows/story-book.yml
@@ -31,26 +31,8 @@ jobs:
             "branch": "${{ env.BRANCH_NAME }}",
             "name": "ToolJet PR #${{ env.PR_NUMBER }}",
             "ownerId": "tea-caeo4bj19n072h3dddc0",
-            "repo": "${{ github.event.pull_request.head.repo.git_url }}",
-            "rootDir": "frontend",
-            # "envVars": [
-            #   {
-            #     "key": "NODE_ENV",
-            #     "value": "production"
-            #   },
-            #   {
-            #     "key": "NODE_VERSION",
-            #     "value": "18.18.2"
-            #   },
-            #   {
-            #     "key": "NPM_VERSION",
-            #     "value": "9.8.1"
-            #   },
-            #   {
-            #     "key": "GTM",
-            #     "value": "dummy"
-            #   }
-            # ],
+            "repo": https://github.com/ToolJet/ToolJet,
+            "rootDir": "frontend/",
             "serviceDetails": {
                 "pullRequestPreviewsEnabled": "no",
                 "buildCommand": "npm i && npx storybook build",

From 4cd37ded0ee36e8ea5aab9a494d9eaf74473e559 Mon Sep 17 00:00:00 2001
From: adishM98 Bot <adish.madhu@gmail.com>
Date: Wed, 17 Sep 2025 18:48:08 +0530
Subject: [PATCH 058/157] fix: update repository URL and add environment
 variables for Node and NPM versions in Storybook workflow

---
 .github/workflows/story-book.yml | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/story-book.yml b/.github/workflows/story-book.yml
index ef2177f430..ee2d24eea7 100644
--- a/.github/workflows/story-book.yml
+++ b/.github/workflows/story-book.yml
@@ -31,12 +31,22 @@ jobs:
             "branch": "${{ env.BRANCH_NAME }}",
             "name": "ToolJet PR #${{ env.PR_NUMBER }}",
             "ownerId": "tea-caeo4bj19n072h3dddc0",
-            "repo": https://github.com/ToolJet/ToolJet,
-            "rootDir": "frontend/",
+            "repo": "${{ github.event.pull_request.head.repo.git_url }}",
+            "rootDir": "frontend",
+            "envVars": [
+              {
+                "key": "NODE_VERSION",
+                "value": "v22.15.1"
+              },
+              {
+                "key": "NPM_VERSION",
+                "value": "10.9.2"
+              }
+            ],
             "serviceDetails": {
                 "pullRequestPreviewsEnabled": "no",
                 "buildCommand": "npm i && npx storybook build",
-                "publishPath": "frontend/storybook-static/",
+                "publishPath": "storybook-static/",
                 "url": "https://tooljet-pr-${{ env.PR_NUMBER }}.onrender.com"
             }
           }')

From 3186859a441bd353053f948d83a8563223392abe Mon Sep 17 00:00:00 2001
From: adishM98 Bot <adish.madhu@gmail.com>
Date: Wed, 17 Sep 2025 18:52:03 +0530
Subject: [PATCH 059/157] chore: update dummy PR comment in Storybook workflow

---
 .github/workflows/story-book.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/story-book.yml b/.github/workflows/story-book.yml
index ee2d24eea7..297fa2767f 100644
--- a/.github/workflows/story-book.yml
+++ b/.github/workflows/story-book.yml
@@ -213,4 +213,4 @@ jobs:
               console.log(e)
             }
 
-# dummy PR 
+# dummy PR 1

From d3e5ab514f618799059b947eac673acab6099814 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Wed, 17 Sep 2025 19:04:30 +0530
Subject: [PATCH 060/157] Add SignupSuccessInfo component and corresponding
 Storybook stories

- Introduced `SignupSuccessInfo` component to display a success message after user signup, including options for email, name, and additional info.
- Implemented customizable props for header text, message content, resend button, and back button functionality.
- Created comprehensive Storybook stories to showcase various configurations and states of the `SignupSuccessInfo` component, enhancing usability and testing.
- Ensured accessibility and user-friendly design in the component layout.
---
 .../src/components/Auth/SignupSuccessInfo.jsx | 165 ++++++++++
 .../Stories/SignupSuccessInfo.stories.jsx     | 305 ++++++++++++++++++
 2 files changed, 470 insertions(+)
 create mode 100644 frontend/src/components/Auth/SignupSuccessInfo.jsx
 create mode 100644 frontend/src/components/Auth/Stories/SignupSuccessInfo.stories.jsx

diff --git a/frontend/src/components/Auth/SignupSuccessInfo.jsx b/frontend/src/components/Auth/SignupSuccessInfo.jsx
new file mode 100644
index 0000000000..c78e0f3ae9
--- /dev/null
+++ b/frontend/src/components/Auth/SignupSuccessInfo.jsx
@@ -0,0 +1,165 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { ArrowLeft, Mail } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { FormWrapper } from '@/components/Auth/FormWrapper';
+
+export function SignupSuccessInfo({ className, ...props }) {
+  const {
+    // Header
+    headerText,
+
+    // Message content
+    messageText,
+    email,
+    name,
+
+    // Info text
+    infoText,
+    showInfo,
+
+    // Resend email
+    resendButtonText,
+    resendCountdownText,
+    showResendButton,
+    resendDisabled,
+    resendCountdown,
+
+    // Back button
+    backButtonText,
+    onBackToSignup,
+
+    // Separator
+    showSeparator,
+  } = props;
+
+  return (
+    <FormWrapper>
+      <div className={cn('tw-flex tw-flex-col tw-gap-6 tw-min-w-96', className)} {...props}>
+        <div className="tw-flex tw-flex-col tw-gap-0.5">
+          <h1 className="tw-text-4xl tw-tracking-tight tw-font-medium tw-mb-0" data-cy="signup-success-header">
+            {headerText}
+          </h1>
+        </div>
+
+        <div className="tw-flex tw-flex-col tw-gap-4">
+          <p className="tw-text-balance tw-text-sm tw-text-text-placeholder tw-mb-0" data-cy="signup-success-message">
+            {messageText}
+            {email && (
+              <>
+                {' '}
+                <span className="tw-font-medium tw-text-text-brand">{email}</span>
+              </>
+            )}
+            .{' '}
+            {name && (
+              <>
+                Welcome, <span className="tw-font-medium tw-text-text-brand">{name}</span>!
+              </>
+            )}
+          </p>
+
+          {showInfo && (
+            <p className="tw-text-sm tw-text-text-placeholder tw-mb-0" data-cy="signup-success-info">
+              {infoText}
+            </p>
+          )}
+
+          {showSeparator && (
+            <div className="tw-relative tw-flex tw-items-center tw-text-center tw-text-sm">
+              <div className="tw-flex-1 tw-h-px tw-bg-border-weak" />
+              <span className="tw-px-2 tw-text-text-placeholder tw-text-lg tw-font-medium">OR</span>
+              <div className="tw-flex-1 tw-h-px tw-bg-border-weak" />
+            </div>
+          )}
+
+          {showResendButton && (
+            <Button
+              size="default"
+              variant="outline"
+              className="tw-w-fit"
+              disabled={resendDisabled}
+              data-cy="resend-verification-email-button"
+            >
+              <Mail width="16" height="16" />
+              {resendDisabled && resendCountdown > 0 ? `${resendCountdownText} ${resendCountdown}s` : resendButtonText}
+            </Button>
+          )}
+
+          <Button
+            size="default"
+            variant="outline"
+            className="tw-w-fit"
+            onClick={onBackToSignup}
+            data-cy="back-to-signup-button"
+          >
+            <ArrowLeft width="16" height="16" />
+            {backButtonText}
+          </Button>
+        </div>
+      </div>
+    </FormWrapper>
+  );
+}
+
+SignupSuccessInfo.propTypes = {
+  className: PropTypes.string,
+
+  // Header
+  headerText: PropTypes.string,
+
+  // Message content
+  messageText: PropTypes.string,
+  email: PropTypes.string,
+  name: PropTypes.string,
+
+  // Info text
+  infoText: PropTypes.string,
+  showInfo: PropTypes.bool,
+
+  // Resend email
+  resendButtonText: PropTypes.string,
+  resendCountdownText: PropTypes.string,
+  showResendButton: PropTypes.bool,
+  resendDisabled: PropTypes.bool,
+  resendCountdown: PropTypes.number,
+
+  // Back button
+  backButtonText: PropTypes.string,
+  onBackToSignup: PropTypes.func,
+
+  // Separator
+  showSeparator: PropTypes.bool,
+};
+
+SignupSuccessInfo.defaultProps = {
+  className: '',
+
+  // Header
+  headerText: 'Check your mail',
+
+  // Message content
+  messageText: "We've sent a verification email to",
+  email: '',
+  name: '',
+
+  // Info text
+  infoText: 'Did not receive an email? Check your spam folder!',
+  showInfo: true,
+
+  // Resend email
+  resendButtonText: 'Resend verification email',
+  resendCountdownText: 'Resend verification email in',
+  showResendButton: true,
+  resendDisabled: false,
+  resendCountdown: 0,
+
+  // Back button
+  backButtonText: 'Back to sign up',
+  onBackToSignup: undefined,
+
+  // Separator
+  showSeparator: true,
+};
diff --git a/frontend/src/components/Auth/Stories/SignupSuccessInfo.stories.jsx b/frontend/src/components/Auth/Stories/SignupSuccessInfo.stories.jsx
new file mode 100644
index 0000000000..239b5b11d3
--- /dev/null
+++ b/frontend/src/components/Auth/Stories/SignupSuccessInfo.stories.jsx
@@ -0,0 +1,305 @@
+import React from 'react';
+import { SignupSuccessInfo } from '../SignupSuccessInfo';
+
+export default {
+  title: 'Auth/SignupSuccessInfo',
+  component: SignupSuccessInfo,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    headerText: {
+      control: 'text',
+      description: 'The main heading text for the signup success screen',
+    },
+    messageText: {
+      control: 'text',
+      description: 'Main message text',
+    },
+    email: {
+      control: 'text',
+      description: 'Email address to display in the message',
+    },
+    name: {
+      control: 'text',
+      description: 'User name to display in the message',
+    },
+    infoText: {
+      control: 'text',
+      description: 'Additional info text',
+    },
+    showInfo: {
+      control: 'boolean',
+      description: 'Show or hide the info text',
+    },
+    resendButtonText: {
+      control: 'text',
+      description: 'Text for the resend verification email button',
+    },
+    resendCountdownText: {
+      control: 'text',
+      description: 'Text for the resend countdown',
+    },
+    showResendButton: {
+      control: 'boolean',
+      description: 'Show or hide the resend button',
+    },
+    resendDisabled: {
+      control: 'boolean',
+      description: 'Disabled state for the resend button',
+    },
+    resendCountdown: {
+      control: 'number',
+      description: 'Countdown value for resend button',
+    },
+    backButtonText: {
+      control: 'text',
+      description: 'Text for the back to signup button',
+    },
+    onBackToSignup: {
+      action: 'back to signup clicked',
+      description: 'Back to signup button handler',
+    },
+    showSeparator: {
+      control: 'boolean',
+      description: 'Show or hide the separator',
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    headerText: 'Check your mail',
+    messageText: "We've sent a verification email to",
+    email: 'user@example.com',
+    name: 'John Doe',
+    infoText: 'Did not receive an email? Check your spam folder!',
+    showInfo: true,
+    resendButtonText: 'Resend verification email',
+    resendCountdownText: 'Resend verification email in',
+    showResendButton: true,
+    resendDisabled: false,
+    resendCountdown: 0,
+    backButtonText: 'Back to sign up',
+    showSeparator: true,
+  },
+};
+
+export const CustomHeader = {
+  args: {
+    headerText: 'Account Created Successfully',
+    messageText: "We've sent a verification email to",
+    email: 'user@example.com',
+    name: 'John Doe',
+    infoText: 'Did not receive an email? Check your spam folder!',
+    showInfo: true,
+    resendButtonText: 'Resend verification email',
+    resendCountdownText: 'Resend verification email in',
+    showResendButton: true,
+    resendDisabled: false,
+    resendCountdown: 0,
+    backButtonText: 'Back to sign up',
+    showSeparator: true,
+  },
+};
+
+export const WithEmailOnly = {
+  args: {
+    headerText: 'Check your mail',
+    messageText: "We've sent a verification email to",
+    email: 'user@example.com',
+    name: '',
+    infoText: 'Did not receive an email? Check your spam folder!',
+    showInfo: true,
+    resendButtonText: 'Resend verification email',
+    resendCountdownText: 'Resend verification email in',
+    showResendButton: true,
+    resendDisabled: false,
+    resendCountdown: 0,
+    backButtonText: 'Back to sign up',
+    showSeparator: true,
+  },
+};
+
+export const WithNameOnly = {
+  args: {
+    headerText: 'Check your mail',
+    messageText: "We've sent a verification email to your registered email address",
+    email: '',
+    name: 'John Doe',
+    infoText: 'Did not receive an email? Check your spam folder!',
+    showInfo: true,
+    resendButtonText: 'Resend verification email',
+    resendCountdownText: 'Resend verification email in',
+    showResendButton: true,
+    resendDisabled: false,
+    resendCountdown: 0,
+    backButtonText: 'Back to sign up',
+    showSeparator: true,
+  },
+};
+
+export const LongEmail = {
+  args: {
+    headerText: 'Check your mail',
+    messageText: "We've sent a verification email to",
+    email: 'very.long.email.address@verylongdomainname.com',
+    name: 'John Doe',
+    infoText: 'Did not receive an email? Check your spam folder!',
+    showInfo: true,
+    resendButtonText: 'Resend verification email',
+    resendCountdownText: 'Resend verification email in',
+    showResendButton: true,
+    resendDisabled: false,
+    resendCountdown: 0,
+    backButtonText: 'Back to sign up',
+    showSeparator: true,
+  },
+};
+
+export const NoInfo = {
+  args: {
+    headerText: 'Check your mail',
+    messageText: "We've sent a verification email to",
+    email: 'user@example.com',
+    name: 'John Doe',
+    infoText: '',
+    showInfo: false,
+    resendButtonText: 'Resend verification email',
+    resendCountdownText: 'Resend verification email in',
+    showResendButton: true,
+    resendDisabled: false,
+    resendCountdown: 0,
+    backButtonText: 'Back to sign up',
+    showSeparator: true,
+  },
+};
+
+export const NoResendButton = {
+  args: {
+    headerText: 'Check your mail',
+    messageText: "We've sent a verification email to",
+    email: 'user@example.com',
+    name: 'John Doe',
+    infoText: 'Did not receive an email? Check your spam folder!',
+    showInfo: true,
+    resendButtonText: 'Resend verification email',
+    resendCountdownText: 'Resend verification email in',
+    showResendButton: false,
+    resendDisabled: false,
+    resendCountdown: 0,
+    backButtonText: 'Back to sign up',
+    showSeparator: true,
+  },
+};
+
+export const ResendDisabled = {
+  args: {
+    headerText: 'Check your mail',
+    messageText: "We've sent a verification email to",
+    email: 'user@example.com',
+    name: 'John Doe',
+    infoText: 'Did not receive an email? Check your spam folder!',
+    showInfo: true,
+    resendButtonText: 'Resend verification email',
+    resendCountdownText: 'Resend verification email in',
+    showResendButton: true,
+    resendDisabled: true,
+    resendCountdown: 15,
+    backButtonText: 'Back to sign up',
+    showSeparator: true,
+  },
+};
+
+export const NoSeparator = {
+  args: {
+    headerText: 'Check your mail',
+    messageText: "We've sent a verification email to",
+    email: 'user@example.com',
+    name: 'John Doe',
+    infoText: 'Did not receive an email? Check your spam folder!',
+    showInfo: true,
+    resendButtonText: 'Resend verification email',
+    resendCountdownText: 'Resend verification email in',
+    showResendButton: true,
+    resendDisabled: false,
+    resendCountdown: 0,
+    backButtonText: 'Back to sign up',
+    showSeparator: false,
+  },
+};
+
+export const CustomMessage = {
+  args: {
+    headerText: 'Account Created',
+    messageText: 'A verification email has been sent to your email address',
+    email: 'user@example.com',
+    name: 'John Doe',
+    infoText: 'Please check your inbox and follow the instructions to verify your account',
+    showInfo: true,
+    resendButtonText: 'Resend verification email',
+    resendCountdownText: 'Resend verification email in',
+    showResendButton: true,
+    resendDisabled: false,
+    resendCountdown: 0,
+    backButtonText: 'Return to signup',
+    showSeparator: true,
+  },
+};
+
+export const Minimal = {
+  args: {
+    headerText: 'Email Sent',
+    messageText: 'Check your email for verification instructions',
+    email: '',
+    name: '',
+    infoText: '',
+    showInfo: false,
+    resendButtonText: 'Resend',
+    resendCountdownText: 'Resend in',
+    showResendButton: false,
+    resendDisabled: false,
+    resendCountdown: 0,
+    backButtonText: 'Back',
+    showSeparator: false,
+  },
+};
+
+export const CustomButtonTexts = {
+  args: {
+    headerText: 'Check your mail',
+    messageText: "We've sent a verification email to",
+    email: 'user@example.com',
+    name: 'John Doe',
+    infoText: 'Did not receive an email? Check your spam folder!',
+    showInfo: true,
+    resendButtonText: 'Send another verification email',
+    resendCountdownText: 'Send another email in',
+    showResendButton: true,
+    resendDisabled: false,
+    resendCountdown: 0,
+    backButtonText: 'Return to registration',
+    showSeparator: true,
+  },
+};
+
+export const LongMessage = {
+  args: {
+    headerText: 'Check your mail',
+    messageText:
+      "We've sent a verification email to your registered email address. Please check your inbox and click the link to verify your account and continue with the setup process",
+    email: 'user@example.com',
+    name: 'John Doe',
+    infoText:
+      'Did not receive an email? Please check your spam folder or contact support if you continue to have issues with email delivery',
+    showInfo: true,
+    resendButtonText: 'Resend verification email',
+    resendCountdownText: 'Resend verification email in',
+    showResendButton: true,
+    resendDisabled: false,
+    resendCountdown: 0,
+    backButtonText: 'Back to sign up',
+    showSeparator: true,
+  },
+};

From 5dca28ec2ebdba9f49aa338bdedd0ae3991c2e4a Mon Sep 17 00:00:00 2001
From: adishM98 Bot <adish.madhu@gmail.com>
Date: Wed, 17 Sep 2025 19:09:39 +0530
Subject: [PATCH 061/157] fix: update deployment URLs and names to use
 'storybook' prefix in Storybook workflow

---
 .github/workflows/story-book.yml | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/.github/workflows/story-book.yml b/.github/workflows/story-book.yml
index 297fa2767f..cfbb7814ff 100644
--- a/.github/workflows/story-book.yml
+++ b/.github/workflows/story-book.yml
@@ -29,7 +29,7 @@ jobs:
             "type": "static_site",
             "autoDeploy": "yes",
             "branch": "${{ env.BRANCH_NAME }}",
-            "name": "ToolJet PR #${{ env.PR_NUMBER }}",
+            "name": "storybook PR #${{ env.PR_NUMBER }}",
             "ownerId": "tea-caeo4bj19n072h3dddc0",
             "repo": "${{ github.event.pull_request.head.repo.git_url }}",
             "rootDir": "frontend",
@@ -47,7 +47,7 @@ jobs:
                 "pullRequestPreviewsEnabled": "no",
                 "buildCommand": "npm i && npx storybook build",
                 "publishPath": "storybook-static/",
-                "url": "https://tooljet-pr-${{ env.PR_NUMBER }}.onrender.com"
+                "url": "https://storybook-pr-${{ env.PR_NUMBER }}.onrender.com"
             }
           }')
 
@@ -64,7 +64,7 @@ jobs:
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              body: 'Deployment: https://tooljet-pr-${{ env.PR_NUMBER }}.onrender.com \n Dashboard: https://dashboard.render.com/static/${{ env.SERVICE_ID }}'
+              body: 'Deployment: https://storybook-pr-${{ env.PR_NUMBER }}.onrender.com \n Dashboard: https://dashboard.render.com/static/${{ env.SERVICE_ID }}'
             })
 
       - uses: actions/github-script@v6
@@ -96,7 +96,7 @@ jobs:
       - name: Delete service
         run: |
           export SERVICE_ID=$(curl --request GET \
-          --url 'https://api.render.com/v1/services?name=ToolJet%20PR%20%23${{ env.PR_NUMBER }}&limit=1' \
+          --url 'https://api.render.com/v1/services?name=storybook%20PR%20%23${{ env.PR_NUMBER }}&limit=1' \
           --header 'accept: application/json' \
           --header 'authorization: Bearer ${{ secrets.RENDER_API_KEY }}' | \
            jq -r '.[0].service.id')
@@ -150,7 +150,7 @@ jobs:
       - name: Suspend service
         run: |
           export SERVICE_ID=$(curl --request GET \
-          --url 'https://api.render.com/v1/services?name=ToolJet%20PR%20%23${{ env.PR_NUMBER }}&limit=1' \
+          --url 'https://api.render.com/v1/services?name=storybook%20PR%20%23${{ env.PR_NUMBER }}&limit=1' \
           --header 'accept: application/json' \
           --header 'authorization: Bearer ${{ secrets.RENDER_API_KEY }}' | \
            jq -r '.[0].service.id')
@@ -182,7 +182,7 @@ jobs:
       - name: Resume service
         run: |
           export SERVICE_ID=$(curl --request GET \
-          --url 'https://api.render.com/v1/services?name=ToolJet%20PR%20%23${{ env.PR_NUMBER }}&limit=1' \
+          --url 'https://api.render.com/v1/services?name=storybook%20PR%20%23${{ env.PR_NUMBER }}&limit=1' \
           --header 'accept: application/json' \
           --header 'authorization: Bearer ${{ secrets.RENDER_API_KEY }}' | \
            jq -r '.[0].service.id')
@@ -212,5 +212,3 @@ jobs:
             } catch (e) {
               console.log(e)
             }
-
-# dummy PR 1

From bf6ee2d63c4dc6bebf342604fbf6a7a83a28ae8d Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Thu, 18 Sep 2025 13:26:34 +0530
Subject: [PATCH 062/157] Enhance form components with Label integration and
 Button updates

- Added `Label` components to `ForgotPasswordForm`, `LoginForm`, and `SetupAdminForm` for improved accessibility and user experience.
- Updated `Button` component to support Lucide icons with dynamic loading, enhancing visual consistency and flexibility.
- Refactored utility functions in `ButtonUtils` to accommodate new icon handling logic.
- Expanded Storybook stories for `Button` to demonstrate new Lucide icon capabilities and various button configurations.
- Improved `Input` component styling to support dynamic text sizes based on input size prop.
---
 .../components/Auth/ForgotPasswordForm.jsx    |   5 +-
 frontend/src/components/Auth/LoginForm.jsx    |   8 +-
 .../src/components/Auth/SetupAdminForm.jsx    |  13 +-
 frontend/src/components/ui/Button/Button.jsx  |  41 ++-
 .../components/ui/Button/Button.stories.jsx   | 299 +++++++++++++++++-
 .../src/components/ui/Button/ButtonUtils.jsx  |  36 ++-
 frontend/src/components/ui/Input/Input.jsx    |  21 +-
 .../src/components/ui/Input/Input.stories.jsx | 188 ++++++++---
 8 files changed, 542 insertions(+), 69 deletions(-)

diff --git a/frontend/src/components/Auth/ForgotPasswordForm.jsx b/frontend/src/components/Auth/ForgotPasswordForm.jsx
index 0ecf2ebdef..ca7b4f59fe 100644
--- a/frontend/src/components/Auth/ForgotPasswordForm.jsx
+++ b/frontend/src/components/Auth/ForgotPasswordForm.jsx
@@ -6,6 +6,7 @@ import { CornerDownLeft } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import { FormWrapper } from '@/components/Auth/FormWrapper';
 
 export function ForgotPasswordForm({ className, ...props }) {
@@ -68,8 +69,10 @@ export function ForgotPasswordForm({ className, ...props }) {
 
         <div className="tw-grid tw-gap-4">
           <div className="tw-grid tw-gap-0.5">
+            <Label htmlFor="email" size="large">
+              {emailLabel}
+            </Label>
             <Input
-              label={emailLabel}
               type="email"
               placeholder={emailPlaceholder}
               value={emailValue}
diff --git a/frontend/src/components/Auth/LoginForm.jsx b/frontend/src/components/Auth/LoginForm.jsx
index cf0207e28e..3082f80a43 100644
--- a/frontend/src/components/Auth/LoginForm.jsx
+++ b/frontend/src/components/Auth/LoginForm.jsx
@@ -89,8 +89,10 @@ export function LoginForm({ className, ...props }) {
         </div>
         <div className="tw-grid tw-gap-4">
           <div className="tw-grid tw-gap-0.5">
+            <Label htmlFor="email" size="large">
+              {emailLabel}
+            </Label>
             <Input
-              label={emailLabel}
               type="email"
               placeholder={emailPlaceholder}
               value={emailValue}
@@ -104,7 +106,9 @@ export function LoginForm({ className, ...props }) {
           </div>
           <div className="tw-grid tw-gap-0.5">
             <div className="tw-flex tw-items-center tw-justify-between">
-              <Label htmlFor="password">{passwordLabel}</Label>
+              <Label htmlFor="password" size="large">
+                {passwordLabel}
+              </Label>
               {showForgotPassword && (
                 <Link
                   to={forgotPasswordUrl}
diff --git a/frontend/src/components/Auth/SetupAdminForm.jsx b/frontend/src/components/Auth/SetupAdminForm.jsx
index 724af2e7bd..acb873f097 100644
--- a/frontend/src/components/Auth/SetupAdminForm.jsx
+++ b/frontend/src/components/Auth/SetupAdminForm.jsx
@@ -5,6 +5,7 @@ import { CornerDownLeft } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import { FormWrapper } from '@/components/Auth/FormWrapper';
 
 export function SetupAdminForm({ className, ...props }) {
@@ -58,8 +59,10 @@ export function SetupAdminForm({ className, ...props }) {
 
         <div className="tw-grid tw-gap-4">
           <div className="tw-grid tw-gap-0.5">
+            <Label htmlFor="name" size="large">
+              {nameLabel}
+            </Label>
             <Input
-              label={nameLabel}
               type="text"
               placeholder={namePlaceholder}
               value={nameValue}
@@ -73,8 +76,10 @@ export function SetupAdminForm({ className, ...props }) {
           </div>
 
           <div className="tw-grid tw-gap-0.5">
+            <Label htmlFor="email" size="large">
+              {emailLabel}
+            </Label>
             <Input
-              label={emailLabel}
               type="email"
               placeholder={emailPlaceholder}
               value={emailValue}
@@ -88,8 +93,10 @@ export function SetupAdminForm({ className, ...props }) {
           </div>
 
           <div className="tw-grid tw-gap-0.5">
+            <Label htmlFor="password" size="large">
+              {passwordLabel}
+            </Label>
             <Input
-              label={passwordLabel}
               type="password"
               placeholder={passwordPlaceholder}
               value={passwordValue}
diff --git a/frontend/src/components/ui/Button/Button.jsx b/frontend/src/components/ui/Button/Button.jsx
index 2d26515fc7..ccc5d9e7e3 100644
--- a/frontend/src/components/ui/Button/Button.jsx
+++ b/frontend/src/components/ui/Button/Button.jsx
@@ -7,8 +7,16 @@ import SolidIcon from '@/_ui/Icon/SolidIcons';
 import { Slot } from '@radix-ui/react-slot';
 // eslint-disable-next-line import/no-unresolved
 import { cva } from 'class-variance-authority';
+// eslint-disable-next-line import/no-unresolved
+import { DynamicIcon } from 'lucide-react/dynamic';
 import './Button.scss';
-import { getDefaultIconFillColor, defaultButtonFillColour, getIconSize } from './ButtonUtils.jsx';
+import {
+  getDefaultIconFillColor,
+  getLucideIconClassName,
+  defaultButtonFillColour,
+  getIconSize,
+  getLucideIconSize,
+} from './ButtonUtils.jsx';
 
 const buttonVariants = cva(
   'tw-flex tw-justify-center tw-items-center tw-font-medium tw-whitespace-nowrap tw-transition-colors tw-focus-visible:tw-outline-none tw-disabled:tw-pointer-events-none tw-disabled:tw-opacity-50',
@@ -132,26 +140,33 @@ const Button = forwardRef(
       fill = '',
       iconOnly = false, // as normal button and icon have diff styles make sure to pass it as truw when icon only button is used
       loaderText = null,
+      isLucid = false, // Use Lucide icons instead of SolidIcon
       ...props
     },
     ref
   ) => {
-    const iconFillColor = !defaultButtonFillColour.includes(fill) && fill ? fill : getDefaultIconFillColor(variant);
+    const iconFillColor =
+      !defaultButtonFillColour.includes(fill) && fill ? fill : getDefaultIconFillColor(variant, iconOnly);
+    const lucideIconClassName = getLucideIconClassName(variant, iconOnly);
     const Comp = asChild ? Slot : 'button';
+    const iconSize = isLucid ? getLucideIconSize(size) : getIconSize(size);
+
     const leadingIconElement = leadingIcon && (
-      <div
-        className="tw-flex tw-justify-center tw-items-center"
-        style={{ width: getIconSize(size), height: getIconSize(size) }}
-      >
-        <SolidIcon name={leadingIcon} fill={iconFillColor} />
+      <div className="tw-flex tw-justify-center tw-items-center" style={{ width: iconSize, height: iconSize }}>
+        {isLucid ? (
+          <DynamicIcon name={leadingIcon} size={iconSize} className={lucideIconClassName} />
+        ) : (
+          <SolidIcon name={leadingIcon} fill={iconFillColor} />
+        )}
       </div>
     );
     const trailingIconElement = trailingIcon && (
-      <div
-        className="tw-flex tw-justify-center tw-items-center"
-        style={{ width: getIconSize(size), height: getIconSize(size) }}
-      >
-        <SolidIcon name={trailingIcon} fill={iconFillColor} />
+      <div className="tw-flex tw-justify-center tw-items-center" style={{ width: iconSize, height: iconSize }}>
+        {isLucid ? (
+          <DynamicIcon name={trailingIcon} size={iconSize} className={lucideIconClassName} />
+        ) : (
+          <SolidIcon name={trailingIcon} fill={iconFillColor} />
+        )}
       </div>
     );
 
@@ -212,6 +227,7 @@ Button.propTypes = {
   fill: PropTypes.string,
   leadingIcon: PropTypes.string,
   trailingIcon: PropTypes.string,
+  isLucid: PropTypes.bool,
 };
 
 Button.defaultProps = {
@@ -225,6 +241,7 @@ Button.defaultProps = {
   fill: '',
   leadingIcon: '',
   trailingIcon: '',
+  isLucid: false,
 };
 
 export { Button, buttonVariants };
diff --git a/frontend/src/components/ui/Button/Button.stories.jsx b/frontend/src/components/ui/Button/Button.stories.jsx
index 1cc142de8d..9dc6e7266e 100644
--- a/frontend/src/components/ui/Button/Button.stories.jsx
+++ b/frontend/src/components/ui/Button/Button.stories.jsx
@@ -2,7 +2,7 @@ import { Button } from './Button';
 import * as React from 'react';
 
 // Function to determine default icon fill color
-const getDefaultIconFillColor = (variant, customFill = '') => {
+const getDefaultIconFillColor = (variant, customFill = '', iconOnly = false) => {
   if (customFill) {
     return customFill;
   }
@@ -15,8 +15,28 @@ const getDefaultIconFillColor = (variant, customFill = '') => {
       return 'var(--icon-brand)';
     case 'outline':
     case 'ghost':
-      return 'var(--icon-strong)';
+      return iconOnly ? 'var(--icon-strong)' : 'var(--icon-default)';
     case 'dangerSecondary':
+      return 'var(--icon-danger)';
+    default:
+      return '';
+  }
+};
+
+// Function to determine Lucide icon className
+const getLucideIconClassName = (variant, iconOnly = false) => {
+  switch (variant) {
+    case 'primary':
+    case 'dangerPrimary':
+      return 'tw-text-icon-on-solid';
+    case 'secondary':
+    case 'ghostBrand':
+      return 'tw-text-icon-brand';
+    case 'outline':
+    case 'ghost':
+      return iconOnly ? 'tw-text-icon-strong' : 'tw-text-icon-default';
+    case 'dangerSecondary':
+      return 'tw-text-icon-danger';
     default:
       return '';
   }
@@ -58,7 +78,7 @@ RocketButton.args = {
 export const RocketButtonWithIcon = (args) => {
   const variant = args.variant || 'primary';
   const fill = ''; // If fill is provided by user, it will be used; otherwise, it falls back to defaults
-  const color = getDefaultIconFillColor(variant, fill);
+  const color = getDefaultIconFillColor(variant, fill, false);
 
   return <Button {...args} fill={color} iconOnly={false} leadingIcon="smilerectangle" />;
 };
@@ -70,7 +90,7 @@ RocketButtonWithIcon.args = {
 export const RocketButtonWithTrailingIcon = (args) => {
   const variant = args.variant || 'primary';
   const fill = '';
-  const color = getDefaultIconFillColor(variant, fill);
+  const color = getDefaultIconFillColor(variant, fill, false);
 
   return <Button {...args} fill={color} iconOnly={false} trailingIcon="smilerectangle" />;
 };
@@ -82,7 +102,7 @@ RocketButtonWithTrailingIcon.args = {
 export const Icon = (args) => {
   const variant = args.variant || 'primary';
   const fill = '';
-  const color = getDefaultIconFillColor(variant, fill);
+  const color = getDefaultIconFillColor(variant, fill, true);
 
   return <Button {...args} fill={color} trailingIcon="smilerectangle" />;
 };
@@ -91,3 +111,272 @@ Icon.args = {
   children: null,
   iconOnly: true,
 };
+
+// Lucide icon button story (async dynamic import)
+export const LucideButton = (args) => {
+  const variant = args.variant || 'primary';
+  const fill = '';
+  const color = getDefaultIconFillColor(variant, fill, false);
+
+  return <Button {...args} fill={color} isLucid={true} leadingIcon="rocket" />;
+};
+LucideButton.args = {
+  ...RocketButton.args,
+};
+LucideButton.parameters = {
+  docs: {
+    description: {
+      story: 'Button with Lucide icon using the official DynamicIcon component. Icons are loaded dynamically by name.',
+    },
+  },
+};
+
+// Lucide icon only button story (async dynamic import)
+export const LucideIconOnly = (args) => {
+  const variant = args.variant || 'primary';
+  const fill = '';
+  const color = getDefaultIconFillColor(variant, fill, true);
+
+  return <Button {...args} fill={color} isLucid={true} leadingIcon="rocket" iconOnly={true} />;
+};
+LucideIconOnly.args = {
+  ...RocketButton.args,
+  children: null,
+  iconOnly: true,
+};
+LucideIconOnly.parameters = {
+  docs: {
+    description: {
+      story: 'Icon-only button with Lucide icon using the official DynamicIcon component.',
+    },
+  },
+};
+
+// Showcase different Lucide icons with mixed variants and sizes
+export const LucideIconShowcase = () => {
+  const iconConfigs = [
+    // Regular buttons with text
+    {
+      icon: 'rocket',
+      variant: 'primary',
+      size: 'large',
+      label: 'Launch',
+      iconOnly: false,
+    },
+    {
+      icon: 'plus',
+      variant: 'secondary',
+      size: 'default',
+      label: 'Add',
+      iconOnly: false,
+    },
+    {
+      icon: 'search',
+      variant: 'outline',
+      size: 'medium',
+      label: 'Search',
+      iconOnly: false,
+    },
+    {
+      icon: 'settings',
+      variant: 'ghost',
+      size: 'small',
+      label: 'Settings',
+      iconOnly: false,
+    },
+    {
+      icon: 'user',
+      variant: 'primary',
+      size: 'medium',
+      label: 'Profile',
+      iconOnly: false,
+    },
+    {
+      icon: 'mail',
+      variant: 'secondary',
+      size: 'large',
+      label: 'Email',
+      iconOnly: false,
+    },
+    {
+      icon: 'lock',
+      variant: 'outline',
+      size: 'default',
+      label: 'Secure',
+      iconOnly: false,
+    },
+    {
+      icon: 'eye',
+      variant: 'ghost',
+      size: 'small',
+      label: 'View',
+      iconOnly: false,
+    },
+    {
+      icon: 'heart',
+      variant: 'dangerPrimary',
+      size: 'medium',
+      label: 'Like',
+      iconOnly: false,
+    },
+    {
+      icon: 'star',
+      variant: 'primary',
+      size: 'small',
+      label: 'Favorite',
+      iconOnly: false,
+    },
+    {
+      icon: 'arrow-big-down',
+      variant: 'secondary',
+      size: 'default',
+      label: 'Download',
+      iconOnly: false,
+    },
+    {
+      icon: 'wifi',
+      variant: 'outline',
+      size: 'large',
+      label: 'Connect',
+      iconOnly: false,
+    },
+    {
+      icon: 'bluetooth',
+      variant: 'ghost',
+      size: 'medium',
+      label: 'Pair',
+      iconOnly: false,
+    },
+    {
+      icon: 'smartphone',
+      variant: 'primary',
+      size: 'small',
+      label: 'Mobile',
+      iconOnly: false,
+    },
+
+    // Icon-only buttons to demonstrate color differences
+    {
+      icon: 'search',
+      variant: 'outline',
+      size: 'medium',
+      label: '',
+      iconOnly: true,
+    },
+    {
+      icon: 'settings',
+      variant: 'ghost',
+      size: 'small',
+      label: '',
+      iconOnly: true,
+    },
+    {
+      icon: 'lock',
+      variant: 'outline',
+      size: 'default',
+      label: '',
+      iconOnly: true,
+    },
+    { icon: 'eye', variant: 'ghost', size: 'small', label: '', iconOnly: true },
+    {
+      icon: 'wifi',
+      variant: 'outline',
+      size: 'large',
+      label: '',
+      iconOnly: true,
+    },
+    {
+      icon: 'bluetooth',
+      variant: 'ghost',
+      size: 'medium',
+      label: '',
+      iconOnly: true,
+    },
+    {
+      icon: 'plus',
+      variant: 'primary',
+      size: 'default',
+      label: '',
+      iconOnly: true,
+    },
+    {
+      icon: 'heart',
+      variant: 'dangerPrimary',
+      size: 'medium',
+      label: '',
+      iconOnly: true,
+    },
+  ];
+
+  return (
+    <div className="tw-space-y-6">
+      <div>
+        <h3 className="tw-text-lg tw-font-semibold">Lucide Icon Showcase</h3>
+        <p className="tw-text-sm tw-text-gray-600">
+          Mixed variants, sizes, and icon-only cases using Lucide's official DynamicIcon component. Notice how outline
+          and ghost variants use different icon colors for icon-only vs text buttons.
+        </p>
+      </div>
+
+      <div className="tw-flex tw-flex-wrap tw-gap-3">
+        {iconConfigs.map((config, index) => (
+          <Button
+            key={`${config.icon}-${index}`}
+            variant={config.variant}
+            isLucid={true}
+            leadingIcon={config.icon}
+            size={config.size}
+            iconOnly={config.iconOnly}
+          >
+            {config.label}
+          </Button>
+        ))}
+      </div>
+
+      <div className="tw-bg-blue-50 tw-p-4 tw-rounded-lg">
+        <h4 className="tw-font-semibold tw-text-blue-900">Variants & Sizes Demonstrated:</h4>
+        <div className="tw-grid tw-grid-cols-2 tw-gap-4 tw-mt-2">
+          <div>
+            <h5 className="tw-font-medium tw-text-blue-800">Variants:</h5>
+            <ul className="tw-text-sm tw-text-blue-700 tw-space-y-1">
+              <li>• primary</li>
+              <li>• secondary</li>
+              <li>• outline</li>
+              <li>• ghost</li>
+              <li>• dangerPrimary</li>
+            </ul>
+          </div>
+          <div>
+            <h5 className="tw-font-medium tw-text-blue-800">Sizes:</h5>
+            <ul className="tw-text-sm tw-text-blue-700 tw-space-y-1">
+              <li>• large (40px)</li>
+              <li>• default (32px)</li>
+              <li>• medium (28px)</li>
+              <li>• small (20px)</li>
+            </ul>
+          </div>
+        </div>
+        <div className="tw-mt-4 tw-pt-4 tw-border-t tw-border-blue-200">
+          <h5 className="tw-font-medium tw-text-blue-800">Icon Color Logic:</h5>
+          <ul className="tw-text-sm tw-text-blue-700 tw-space-y-1">
+            <li>• outline/ghost + iconOnly=true: tw-text-icon-strong (darker for visibility)</li>
+            <li>• outline/ghost + iconOnly=false: tw-text-icon-default (lighter for text buttons)</li>
+            <li>• Other variants: standard Tailwind classes (tw-text-icon-on-solid, tw-text-icon-brand, etc.)</li>
+          </ul>
+          <p className="tw-text-xs tw-text-blue-600 tw-mt-2">
+            Lucide icons use Tailwind CSS classes for colors. Compare the outline/ghost buttons with text vs icon-only
+            to see the color difference.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+LucideIconShowcase.parameters = {
+  docs: {
+    description: {
+      story:
+        'Comprehensive showcase of Lucide icons with mixed variants and sizes. Demonstrates the flexibility of the Button component with different visual styles and dimensions.',
+    },
+  },
+};
diff --git a/frontend/src/components/ui/Button/ButtonUtils.jsx b/frontend/src/components/ui/Button/ButtonUtils.jsx
index 5d0d6d3c7f..b9275ca7e2 100644
--- a/frontend/src/components/ui/Button/ButtonUtils.jsx
+++ b/frontend/src/components/ui/Button/ButtonUtils.jsx
@@ -1,4 +1,4 @@
-export const getDefaultIconFillColor = (variant) => {
+export const getDefaultIconFillColor = (variant, iconOnly = false) => {
   switch (variant) {
     case 'primary':
     case 'dangerPrimary':
@@ -8,7 +8,7 @@ export const getDefaultIconFillColor = (variant) => {
       return 'var(--icon-brand)';
     case 'outline':
     case 'ghost':
-      return 'var(--icon-strong)';
+      return iconOnly ? 'var(--icon-strong)' : 'var(--icon-default)';
     case 'dangerSecondary':
     case 'dangerGhost':
       return 'var(--icon-danger)';
@@ -16,6 +16,25 @@ export const getDefaultIconFillColor = (variant) => {
       return '';
   }
 };
+
+export const getLucideIconClassName = (variant, iconOnly = false) => {
+  switch (variant) {
+    case 'primary':
+    case 'dangerPrimary':
+      return 'tw-text-icon-on-solid';
+    case 'secondary':
+    case 'ghostBrand':
+      return 'tw-text-icon-brand';
+    case 'outline':
+    case 'ghost':
+      return iconOnly ? 'tw-text-icon-strong' : 'tw-text-icon-default';
+    case 'dangerSecondary':
+    case 'dangerGhost':
+      return 'tw-text-icon-danger';
+    default:
+      return '';
+  }
+};
 export const defaultButtonFillColour = ['#FFFFFF', '#4368E3', '#ACB2B9', '#D72D39']; // all default fill colors
 
 export const getIconSize = (size) => {
@@ -30,3 +49,16 @@ export const getIconSize = (size) => {
       return '12px';
   }
 };
+
+export const getLucideIconSize = (size) => {
+  switch (size) {
+    case 'large':
+      return 20;
+    case 'default':
+      return 16;
+    case 'medium':
+      return 14;
+    case 'small':
+      return 12;
+  }
+};
diff --git a/frontend/src/components/ui/Input/Input.jsx b/frontend/src/components/ui/Input/Input.jsx
index 0c6b1b27ca..e8196e0e2c 100644
--- a/frontend/src/components/ui/Input/Input.jsx
+++ b/frontend/src/components/ui/Input/Input.jsx
@@ -25,6 +25,19 @@ export const Input = React.forwardRef(
 
     const validationClass = response === true ? 'valid-textarea' : response === false ? 'invalid-textarea' : '';
 
+    const getTextSize = () => {
+      switch (size) {
+        case 'small':
+          return 'tw-text-[12px]/[18px]';
+        case 'medium':
+          return 'tw-text-[12px]/[18px]';
+        case 'large':
+          return 'tw-text-[14px]/[20px]';
+        default:
+          return 'tw-text-[12px]/[18px]';
+      }
+    };
+
     const inputStyle = ` ${
       props.disabled ? 'placeholder:tw-text-text-placeholder' : 'placeholder:tw-text-text-default'
     } ${
@@ -36,7 +49,9 @@ export const Input = React.forwardRef(
         {multiline ? (
           <textarea
             className={cn(
-              `tw-relative tw-peer tw-flex tw-text-[12px]/[18px] tw-w-full tw-rounded-[8px] tw-border-[1px] tw-border-solid tw-bg-background-surface-layer-01 tw-py-[7px] tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${props.styles}`,
+              `tw-relative tw-peer tw-flex ${getTextSize()} tw-w-full tw-rounded-[8px] tw-border-[1px] tw-border-solid tw-bg-background-surface-layer-01 tw-py-[7px] tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${
+                props.styles
+              }`,
               className,
               validationClass
             )}
@@ -50,7 +65,9 @@ export const Input = React.forwardRef(
               type={isPasswordField && isPasswordVisible ? 'text' : type}
               className={cn(
                 inputVariants({ size }),
-                `tw-peer tw-flex tw-text-[12px]/[18px] tw-w-full tw-rounded-[8px] tw-border tw-border-solid tw-border-border-strong tw-bg-background-surface-layer-01 tw-px-3 tw-py-[7px] tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${props.styles}`,
+                `tw-peer tw-flex ${getTextSize()} tw-w-full tw-rounded-[8px] tw-border tw-border-solid tw-border-border-strong tw-bg-background-surface-layer-01 tw-px-3 tw-py-[7px] tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${
+                  props.styles
+                }`,
                 className,
                 inputStyle
               )}
diff --git a/frontend/src/components/ui/Input/Input.stories.jsx b/frontend/src/components/ui/Input/Input.stories.jsx
index 5670693a17..83a0f2d3c1 100644
--- a/frontend/src/components/ui/Input/Input.stories.jsx
+++ b/frontend/src/components/ui/Input/Input.stories.jsx
@@ -76,48 +76,152 @@ export default {
 
 const Template = (args) => <InputComponent {...args} />;
 
-export const RocketInput = Template.bind({});
-RocketInput.args = {
+// Size Variants
+export const SizeVariants = () => (
+  <div className="tw-space-y-4">
+    <div>
+      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Small (28px height, 12px/18px text)</h3>
+      <InputComponent size="small" placeholder="Small input" label="Small Input" />
+    </div>
+    <div>
+      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Medium (32px height, 12px/18px text)</h3>
+      <InputComponent size="medium" placeholder="Medium input" label="Medium Input" />
+    </div>
+    <div>
+      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Large (40px height, 14px/20px text)</h3>
+      <InputComponent size="large" placeholder="Large input" label="Large Input" />
+    </div>
+  </div>
+);
+
+// Input Types
+export const InputTypes = () => (
+  <div className="tw-space-y-4">
+    <div>
+      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Text Input</h3>
+      <InputComponent type="text" placeholder="Enter text" label="Text Input" />
+    </div>
+    <div>
+      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Number Input</h3>
+      <InputComponent type="number" placeholder="00.00" label="Number Input" />
+    </div>
+    <div>
+      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Password Input</h3>
+      <InputComponent type="password" placeholder="Enter password" label="Password Input" />
+    </div>
+    <div>
+      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Email Input</h3>
+      <InputComponent type="email" placeholder="Enter email" label="Email Input" />
+    </div>
+    <div>
+      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Editable Title</h3>
+      <InputComponent type="editable title" placeholder="Editable title" label="Editable Title" />
+    </div>
+  </div>
+);
+
+// States
+export const InputStates = () => (
+  <div className="tw-space-y-4">
+    <div>
+      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Default</h3>
+      <InputComponent placeholder="Default state" label="Default Input" />
+    </div>
+    <div>
+      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Disabled</h3>
+      <InputComponent placeholder="Disabled state" label="Disabled Input" disabled />
+    </div>
+    <div>
+      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Required</h3>
+      <InputComponent placeholder="Required field" label="Required Input" required />
+    </div>
+    <div>
+      <h3 className="tw-text-sm tw-font-medium tw-mb-2">With Helper Text</h3>
+      <InputComponent placeholder="With helper text" label="Input with Helper" helperText="This is helper text" />
+    </div>
+  </div>
+);
+
+// With Icons and Actions
+export const WithIconsAndActions = () => (
+  <div className="tw-space-y-4">
+    <div>
+      <h3 className="tw-text-sm tw-font-medium tw-mb-2">With Leading Icon</h3>
+      <InputComponent placeholder="Search..." label="Search Input" leadingIcon="search" />
+    </div>
+    <div>
+      <h3 className="tw-text-sm tw-font-medium tw-mb-2">With Clear Action</h3>
+      <InputComponent placeholder="Clearable input" label="Clearable Input" trailingAction="clear" />
+    </div>
+    <div>
+      <h3 className="tw-text-sm tw-font-medium tw-mb-2">With Loading Action</h3>
+      <InputComponent placeholder="Loading input" label="Loading Input" trailingAction="loading" />
+    </div>
+    <div>
+      <h3 className="tw-text-sm tw-font-medium tw-mb-2">With Both Icons</h3>
+      <InputComponent
+        placeholder="Search and clear"
+        label="Full Featured Input"
+        leadingIcon="search"
+        trailingAction="clear"
+      />
+    </div>
+  </div>
+);
+
+// Size Combinations
+export const SizeCombinations = () => (
+  <div className="tw-space-y-6">
+    <div>
+      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Small Size Combinations</h3>
+      <div className="tw-space-y-3">
+        <InputComponent size="small" placeholder="Small text input" label="Small Text" />
+        <InputComponent size="small" type="number" placeholder="00.00" label="Small Number" />
+        <InputComponent size="small" type="password" placeholder="Small password" label="Small Password" />
+        <InputComponent size="small" leadingIcon="search" placeholder="Small with icon" label="Small with Icon" />
+        <InputComponent size="small" trailingAction="clear" placeholder="Small clearable" label="Small Clearable" />
+      </div>
+    </div>
+
+    <div>
+      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Medium Size Combinations</h3>
+      <div className="tw-space-y-3">
+        <InputComponent size="medium" placeholder="Medium text input" label="Medium Text" />
+        <InputComponent size="medium" type="number" placeholder="00.00" label="Medium Number" />
+        <InputComponent size="medium" type="password" placeholder="Medium password" label="Medium Password" />
+        <InputComponent size="medium" leadingIcon="search" placeholder="Medium with icon" label="Medium with Icon" />
+        <InputComponent size="medium" trailingAction="clear" placeholder="Medium clearable" label="Medium Clearable" />
+      </div>
+    </div>
+
+    <div>
+      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Large Size Combinations (14px/20px text)</h3>
+      <div className="tw-space-y-3">
+        <InputComponent size="large" placeholder="Large text input" label="Large Text" />
+        <InputComponent size="large" type="number" placeholder="00.00" label="Large Number" />
+        <InputComponent size="large" type="password" placeholder="Large password" label="Large Password" />
+        <InputComponent size="large" leadingIcon="search" placeholder="Large with icon" label="Large with Icon" />
+        <InputComponent size="large" trailingAction="clear" placeholder="Large clearable" label="Large Clearable" />
+        <InputComponent
+          size="large"
+          type="editable title"
+          placeholder="Large editable title"
+          label="Large Editable Title"
+        />
+      </div>
+    </div>
+  </div>
+);
+
+// Interactive Playground
+export const Playground = Template.bind({});
+Playground.args = {
   type: 'text',
-  placeholder: 'Placeholder',
-  name: 'name',
-  id: '#id',
+  placeholder: 'Interactive playground',
+  name: 'playground',
+  id: 'playground',
   size: 'medium',
-  label: 'Label text',
-  'aria-label': 'aria-label',
-};
-
-export const RocketInputWithLeadingVisual = (args) => {
-  return <InputComponent {...args} leadingIcon="search" />;
-};
-RocketInputWithLeadingVisual.args = {
-  ...RocketInput.args,
-};
-
-export const RocketInputWithTrailingAction = (args) => {
-  return <InputComponent {...args} trailingAction="clear" />;
-};
-RocketInputWithTrailingAction.args = {
-  ...RocketInput.args,
-};
-
-export const RocketInputWithHelperText = (args) => {
-  return <InputComponent {...args} helperText="Helper text" />;
-};
-RocketInputWithHelperText.args = {
-  ...RocketInput.args,
-};
-
-export const RocketNumberInput = (args) => {
-  return <InputComponent {...args} type="number" placeholder={'00.00'} />;
-};
-RocketNumberInput.args = {
-  ...RocketInput.args,
-};
-
-export const RocketEditableTitleInput = (args) => {
-  return <InputComponent {...args} type="editable title" placeholder="Editable title" />;
-};
-RocketEditableTitleInput.args = {
-  ...RocketInput.args,
+  label: 'Playground Input',
+  'aria-label': 'Interactive input playground',
+  helperText: 'Use the controls below to test different combinations',
 };

From afa8315a595decc75fa53ee94acb37984acf9743 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Tue, 23 Sep 2025 11:36:11 +0530
Subject: [PATCH 063/157] Refactor button and input components for improved
 styling and consistency

- Updated button size variants in `Button.jsx` to ensure consistent padding and border-radius across sizes.
- Introduced `buttonSizeVariants` utility in `Input.jsx` for dynamic button sizing, enhancing reusability.
- Modified interactive overlay colors in `componentdesign.scss` to use RGBA for better transparency control and visual consistency.
---
 frontend/src/_styles/componentdesign.scss    | 26 ++++++-------
 frontend/src/components/ui/Button/Button.jsx |  6 +--
 frontend/src/components/ui/Input/Input.jsx   | 40 +++++++++++---------
 3 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/frontend/src/_styles/componentdesign.scss b/frontend/src/_styles/componentdesign.scss
index 7ce820c18f..a51a708b56 100644
--- a/frontend/src/_styles/componentdesign.scss
+++ b/frontend/src/_styles/componentdesign.scss
@@ -64,11 +64,11 @@
 
 
     //interactive overlays 
-    --interactive-weak: #FFFFFF00;
-    --interactive-default: #CCD1D54D;
-    --interactive-hover: #ACB2B959;
-    --interactive-selected: #ACB2B973;
-    --interactive-disabled: #FFFFFF00;
+    --interactive-weak: rgba(255, 255, 255, 0);
+    --interactive-default: rgba(136, 144, 153, 0.08);
+    --interactive-hover: rgba(136, 144, 153, 0.12);
+    --interactive-selected: rgba(136, 144, 153, 0.18);
+    --interactive-disabled: rgba(255, 255, 255, 0);
     --interactive-focus-outline: #4368E3;
     --interactive-focus-active: #4368E3;
     --interactive-focus-inner-shadow: #FFFFFF;
@@ -84,8 +84,8 @@
     --button-secondary-pressed: #DEE5FE;
     --button-secondary-disabled: #FFFFFF;
     --button-outline: #FFFFFF;
-    --button-outline-hover: #ACB2B94D;
-    --button-outline-pressed: #ACB2B966;
+    --button-outline-hover: rgba(136, 144, 153, 0.12);
+    --button-outline-pressed: rgba(136, 144, 153, 0.18);
     --button-outline-disabled: #FFFFFF;
     --button-danger-primary: #D72D39;
     --button-danger-primary-hover: #B5121D;
@@ -188,11 +188,11 @@
 
 
     //interactive overlays 
-    --interactive-weak: #00000000;
-    --interactive-default: #A1A7AE1F;
-    --interactive-hover: #A1A7AE29;
-    --interactive-selected: #A1A7AE38;
-    --interactive-disabled: #00000000;
+    --interactive-weak: rgba(0, 0, 0, 0);
+    --interactive-default: rgba(133, 140, 148, 0.08);
+    --interactive-hover: rgba(133, 140, 148, 0.12);
+    --interactive-selected: rgba(133, 140, 148, 0.18);
+    --interactive-disabled: rgba(0, 0, 0, 0);
     --interactive-focus-outline: #4A6DD9;
     --interactive-focus-inner-shadow: #121518;
 
@@ -208,7 +208,7 @@
     --button-secondary-pressed: #213C90;
     --button-secondary-disabled: #121518;
     --button-outline: #A1A7AE1A;
-    --button-outline-hover: #A1A7AE33;
+    --button-outline-hover: rgba(133, 140, 148, 0.12);
     --button-outline-pressed: #A1A7AE4D;
     --button-outline-disabled: #121518;
     --button-danger-primary: #D03F43;
diff --git a/frontend/src/components/ui/Button/Button.jsx b/frontend/src/components/ui/Button/Button.jsx
index ccc5d9e7e3..5bb5fd8e5a 100644
--- a/frontend/src/components/ui/Button/Button.jsx
+++ b/frontend/src/components/ui/Button/Button.jsx
@@ -66,10 +66,10 @@ const buttonVariants = cva(
           tw-focus-visible:tw-ring-2 tw-focus-visible:tw-ring-[var(--interactive-focus-outline)] tw-focus-visible:tw-ring-offset-2 tw-focus-visible:tw-ring-offset-background tw-shadow-[0px_1px_0px_0px_rgba(0,0,0,0.10)]`,
       },
       size: {
-        large: 'tw-h-[40px] tw-gap-[8px] tw-py-[10px] tw-rounded-[10px] tw-text-lg',
-        default: 'tw-h-[32px] tw-gap-[6px] tw-py-[7px] tw-rounded-[8px] tw-text-base',
+        large: 'tw-h-[40px] tw-gap-[8px] tw-py-[10px] tw-rounded-[8px] tw-text-lg',
+        default: 'tw-h-[32px] tw-gap-[6px] tw-py-[7px] tw-rounded-[6px] tw-text-base',
         medium: 'tw-h-[28px] tw-gap-[6px] tw-py-[5px] tw-rounded-[6px] tw-text-base',
-        small: 'tw-h-[20px] tw-gap-[4px] tw-py-[2px] tw-rounded-[4px] tw-text-sm',
+        small: 'tw-h-[20px] tw-gap-[4px] tw-py-[2px] tw-rounded-[6px] tw-text-sm',
       },
       iconOnly: {
         true: '',
diff --git a/frontend/src/components/ui/Input/Input.jsx b/frontend/src/components/ui/Input/Input.jsx
index e8196e0e2c..1f0af9b6df 100644
--- a/frontend/src/components/ui/Input/Input.jsx
+++ b/frontend/src/components/ui/Input/Input.jsx
@@ -3,9 +3,24 @@ import { cn } from '@/lib/utils';
 import { inputVariants } from './InputUtils/Variants';
 import { Eye, EyeOff } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+// eslint-disable-next-line import/no-unresolved
+import { cva } from 'class-variance-authority';
 
 import { useEffect } from 'react';
 
+const buttonSizeVariants = cva('', {
+  variants: {
+    size: {
+      small: 'tw-text-[12px]/[18px] tw-px-[10px] tw-py-[6px] tw-rounded-[6px]',
+      medium: 'tw-text-[12px]/[18px] tw-px-3 tw-py-[7px] tw-rounded-[6px]',
+      large: 'tw-text-[14px]/[20px] tw-px-3 tw-py-[7px] tw-rounded-[8px]',
+    },
+  },
+  defaultVariants: {
+    size: 'medium',
+  },
+});
+
 export const Input = React.forwardRef(
   ({ className, size, type, multiline, response, isValid, isWorkspaceConstant, rows = 3, ...props }, ref) => {
     const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);
@@ -25,22 +40,7 @@ export const Input = React.forwardRef(
 
     const validationClass = response === true ? 'valid-textarea' : response === false ? 'invalid-textarea' : '';
 
-    const getTextSize = () => {
-      switch (size) {
-        case 'small':
-          return 'tw-text-[12px]/[18px]';
-        case 'medium':
-          return 'tw-text-[12px]/[18px]';
-        case 'large':
-          return 'tw-text-[14px]/[20px]';
-        default:
-          return 'tw-text-[12px]/[18px]';
-      }
-    };
-
-    const inputStyle = ` ${
-      props.disabled ? 'placeholder:tw-text-text-placeholder' : 'placeholder:tw-text-text-default'
-    } ${
+    const inputStyle = ` placeholder:tw-text-text-placeholder ${
       isValid === true ? '!tw-border-border-success-strong' : isValid === false ? '!tw-border-border-danger-strong' : ''
     }`;
 
@@ -49,7 +49,9 @@ export const Input = React.forwardRef(
         {multiline ? (
           <textarea
             className={cn(
-              `tw-relative tw-peer tw-flex ${getTextSize()} tw-w-full tw-rounded-[8px] tw-border-[1px] tw-border-solid tw-bg-background-surface-layer-01 tw-py-[7px] tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${
+              `tw-relative tw-peer tw-flex ${buttonSizeVariants({
+                size,
+              })} tw-w-full tw-border-[1px] tw-border-solid tw-bg-background-surface-layer-01 tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${
                 props.styles
               }`,
               className,
@@ -65,7 +67,9 @@ export const Input = React.forwardRef(
               type={isPasswordField && isPasswordVisible ? 'text' : type}
               className={cn(
                 inputVariants({ size }),
-                `tw-peer tw-flex ${getTextSize()} tw-w-full tw-rounded-[8px] tw-border tw-border-solid tw-border-border-strong tw-bg-background-surface-layer-01 tw-px-3 tw-py-[7px] tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${
+                `tw-peer tw-flex ${buttonSizeVariants({
+                  size,
+                })} tw-w-full tw-rounded-[6px] tw-border tw-border-solid tw-border-border-strong tw-bg-background-surface-layer-01 tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${
                   props.styles
                 }`,
                 className,

From 7eecd698f8f2f32f821b861647d66f77dc6801ac Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Fri, 26 Sep 2025 19:24:03 +0530
Subject: [PATCH 064/157] Add Alert component and related Storybook stories

- Introduced `Alert` component for displaying various types of alerts (info, warning, danger) with customizable styles and icons.
- Created comprehensive Storybook stories for the `Alert` component, showcasing different variants, including dark mode and custom icon sizes.
- Added `InlineInfo` component to provide a compound alert with title, description, and optional button, enhancing user feedback options.
- Updated `LoginForm` and `AuthLayout` components to integrate new alert functionalities, improving user experience during authentication processes.
---
 frontend/src/_ui/Alert/Alert.stories.jsx      | 308 ++++++++++++++
 .../components/Auth/AuthCenteredLayout.jsx    |  10 +
 frontend/src/components/Auth/AuthLayout.jsx   |  19 +
 frontend/src/components/Auth/FeatureList.jsx  |  57 +++
 frontend/src/components/Auth/LoginForm.jsx    |   2 +-
 .../Stories/AuthCenteredLayout.stories.jsx    | 228 ++++++++++
 .../Auth/Stories/AuthLayout.stories.jsx       | 400 ++++++++++++++++++
 .../Auth/Stories/LoginPage.stories.jsx        | 176 ++++++++
 frontend/src/components/login-form.jsx        |  53 ---
 frontend/src/components/ui/Alert/Alert.jsx    |  68 +++
 frontend/src/components/ui/Button/Button.jsx  |   2 +-
 .../components/ui/InlineInfo/InlineInfo.jsx   |  38 ++
 .../ui/InlineInfo/InlineInfo.stories.jsx      | 200 +++++++++
 frontend/src/components/ui/Input/Input.jsx    |   2 +-
 frontend/src/components/ui/alert.jsx          |   3 +
 15 files changed, 1510 insertions(+), 56 deletions(-)
 create mode 100644 frontend/src/_ui/Alert/Alert.stories.jsx
 create mode 100644 frontend/src/components/Auth/AuthCenteredLayout.jsx
 create mode 100644 frontend/src/components/Auth/AuthLayout.jsx
 create mode 100644 frontend/src/components/Auth/FeatureList.jsx
 create mode 100644 frontend/src/components/Auth/Stories/AuthCenteredLayout.stories.jsx
 create mode 100644 frontend/src/components/Auth/Stories/AuthLayout.stories.jsx
 create mode 100644 frontend/src/components/Auth/Stories/LoginPage.stories.jsx
 delete mode 100644 frontend/src/components/login-form.jsx
 create mode 100644 frontend/src/components/ui/Alert/Alert.jsx
 create mode 100644 frontend/src/components/ui/InlineInfo/InlineInfo.jsx
 create mode 100644 frontend/src/components/ui/InlineInfo/InlineInfo.stories.jsx
 create mode 100644 frontend/src/components/ui/alert.jsx

diff --git a/frontend/src/_ui/Alert/Alert.stories.jsx b/frontend/src/_ui/Alert/Alert.stories.jsx
new file mode 100644
index 0000000000..23edcfa03f
--- /dev/null
+++ b/frontend/src/_ui/Alert/Alert.stories.jsx
@@ -0,0 +1,308 @@
+import React from 'react';
+import { Alert, AlertTitle, AlertDescription } from '../../components/ui/Alert/Alert';
+import { Info, AlertTriangle, AlertCircle, CheckCircle } from 'lucide-react';
+
+// Storybook configuration
+export default {
+  title: 'Components/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Alert component for displaying important messages to users with various types and background variants.',
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      control: { type: 'select' },
+      options: ['info', 'warning', 'danger'],
+      description: 'The type of alert',
+    },
+    background: {
+      control: { type: 'select' },
+      options: ['none', 'grey', 'white', 'state-specific'],
+      description: 'The background variant of the alert',
+    },
+    children: {
+      control: 'text',
+      description: 'The message content to display in the alert',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes to apply to the alert container',
+    },
+  },
+};
+
+// Template for stories
+const Template = (args) => <Alert {...args} />;
+
+// Default alert
+export const Default = Template.bind({});
+Default.args = {
+  type: 'info',
+  background: 'none',
+  children: (
+    <>
+      <Info className="tw-w-4 tw-h-4 tw-text-icon-brand" />
+      <div className="tw-flex tw-flex-col tw-gap-2">
+        <AlertTitle>Default Alert</AlertTitle>
+        <AlertDescription>This is a default alert message.</AlertDescription>
+      </div>
+    </>
+  ),
+};
+
+// Alert variants with different types
+export const InfoAlert = Template.bind({});
+InfoAlert.args = {
+  type: 'info',
+  background: 'none',
+  children: (
+    <>
+      <Info className="tw-w-4 tw-h-4 tw-text-icon-brand" />
+      <div className="tw-flex tw-flex-col tw-gap-2">
+        <AlertTitle>Information</AlertTitle>
+        <AlertDescription>This is an informational alert message.</AlertDescription>
+      </div>
+    </>
+  ),
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  type: 'warning',
+  background: 'none',
+  children: (
+    <>
+      <AlertTriangle className="tw-w-4 tw-h-4 tw-text-icon-warning" />
+      <div className="tw-flex tw-flex-col tw-gap-2">
+        <AlertTitle>Warning</AlertTitle>
+        <AlertDescription>This is a warning alert message.</AlertDescription>
+      </div>
+    </>
+  ),
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  type: 'danger',
+  background: 'none',
+  children: (
+    <>
+      <AlertCircle className="tw-w-4 tw-h-4 tw-text-icon-danger" />
+      <div className="tw-flex tw-flex-col tw-gap-2">
+        <AlertTitle>Error</AlertTitle>
+        <AlertDescription>This is an error alert message.</AlertDescription>
+      </div>
+    </>
+  ),
+};
+
+// Background variants
+export const GreyBackground = Template.bind({});
+GreyBackground.args = {
+  type: 'info',
+  background: 'grey',
+  children: (
+    <>
+      <Info className="tw-w-4 tw-h-4 tw-text-icon-brand" />
+      <div className="tw-flex tw-flex-col tw-gap-2">
+        <AlertTitle>Grey Background</AlertTitle>
+        <AlertDescription>This alert has a grey background.</AlertDescription>
+      </div>
+    </>
+  ),
+};
+
+export const WhiteBackground = Template.bind({});
+WhiteBackground.args = {
+  type: 'info',
+  background: 'white',
+  children: (
+    <>
+      <Info className="tw-w-4 tw-h-4 tw-text-icon-brand" />
+      <div className="tw-flex tw-flex-col tw-gap-2">
+        <AlertTitle>White Background</AlertTitle>
+        <AlertDescription>This alert has a white background with shadow.</AlertDescription>
+      </div>
+    </>
+  ),
+};
+
+export const StateSpecificBackground = Template.bind({});
+StateSpecificBackground.args = {
+  type: 'info',
+  background: 'state-specific',
+  children: (
+    <>
+      <Info className="tw-w-4 tw-h-4 tw-text-icon-brand" />
+      <div className="tw-flex tw-flex-col tw-gap-2">
+        <AlertTitle>State Specific Background</AlertTitle>
+        <AlertDescription>This alert has a state-specific colored background.</AlertDescription>
+      </div>
+    </>
+  ),
+};
+
+// Long message variant
+export const LongMessage = Template.bind({});
+LongMessage.args = {
+  type: 'warning',
+  background: 'white',
+  children: (
+    <>
+      <AlertTriangle className="tw-w-4 tw-h-4 tw-text-icon-warning" />
+      <div className="tw-flex tw-flex-col tw-gap-2">
+        <AlertTitle>Long Message Alert</AlertTitle>
+        <AlertDescription>
+          This is a very long alert message that demonstrates how the alert component handles text wrapping and
+          overflow. The message should wrap properly and maintain good readability even with extended content that spans
+          multiple lines.
+        </AlertDescription>
+      </div>
+    </>
+  ),
+};
+
+// No icon variant
+export const NoIcon = Template.bind({});
+NoIcon.args = {
+  type: 'info',
+  background: 'none',
+  children: (
+    <div className="tw-flex tw-flex-col tw-gap-2">
+      <AlertTitle>No Icon Alert</AlertTitle>
+      <AlertDescription>This alert has no icon.</AlertDescription>
+    </div>
+  ),
+};
+
+// All variants showcase
+export const AllVariants = () => {
+  const types = ['info', 'warning', 'danger'];
+  const backgrounds = ['none', 'grey', 'white', 'state-specific'];
+  const icons = {
+    info: Info,
+    warning: AlertTriangle,
+    danger: AlertCircle,
+  };
+  const titles = {
+    info: 'Information',
+    warning: 'Warning',
+    danger: 'Error',
+  };
+  const descriptions = {
+    info: 'This is an informational message.',
+    warning: 'Please review your settings before proceeding.',
+    danger: 'Something went wrong. Please try again.',
+  };
+
+  return (
+    <div className="tw-space-y-8">
+      <div>
+        <h2 className="tw-text-2xl tw-font-bold tw-mb-4">Alert Component - All Variants</h2>
+        <p className="tw-text-gray-600 tw-mb-6">Showcasing all 12 variants (3 types × 4 backgrounds)</p>
+      </div>
+
+      {types.map((type) => (
+        <div key={type} className="tw-space-y-4">
+          <h3 className="tw-text-lg tw-font-semibold tw-capitalize tw-text-gray-800">{type} Type</h3>
+          <div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4">
+            {backgrounds.map((background) => {
+              const Icon = icons[type];
+              return (
+                <div key={`${type}-${background}`} className="tw-space-y-2">
+                  <div className="tw-text-sm tw-font-medium tw-text-gray-600 tw-capitalize">
+                    {background.replace('-', ' ')} Background
+                  </div>
+                  <Alert type={type} background={background}>
+                    <Icon className="tw-w-4 tw-h-4" />
+                    <div className="tw-flex tw-flex-col tw-gap-2">
+                      <AlertTitle>{titles[type]}</AlertTitle>
+                      <AlertDescription>{descriptions[type]}</AlertDescription>
+                    </div>
+                  </Alert>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+// Background variants showcase
+export const BackgroundVariants = () => (
+  <div className="tw-space-y-4">
+    <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Background Variants</h3>
+
+    <Alert type="info" background="none">
+      <Info className="tw-w-4 tw-h-4 tw-text-icon-brand" />
+      <div className="tw-flex tw-flex-col tw-gap-2">
+        <AlertTitle>No Background</AlertTitle>
+        <AlertDescription>Alert with no background</AlertDescription>
+      </div>
+    </Alert>
+
+    <Alert type="info" background="grey">
+      <Info className="tw-w-4 tw-h-4 tw-text-icon-brand" />
+      <div className="tw-flex tw-flex-col tw-gap-2">
+        <AlertTitle>Grey Background</AlertTitle>
+        <AlertDescription>Alert with grey background</AlertDescription>
+      </div>
+    </Alert>
+
+    <Alert type="info" background="white">
+      <Info className="tw-w-4 tw-h-4 tw-text-icon-brand" />
+      <div className="tw-flex tw-flex-col tw-gap-2">
+        <AlertTitle>White Background</AlertTitle>
+        <AlertDescription>Alert with white background and shadow</AlertDescription>
+      </div>
+    </Alert>
+
+    <Alert type="info" background="state-specific">
+      <Info className="tw-w-4 tw-h-4 tw-text-icon-brand" />
+      <div className="tw-flex tw-flex-col tw-gap-2">
+        <AlertTitle>State Specific Background</AlertTitle>
+        <AlertDescription>Alert with state-specific colored background</AlertDescription>
+      </div>
+    </Alert>
+  </div>
+);
+
+// Type variants showcase
+export const TypeVariants = () => (
+  <div className="tw-space-y-4">
+    <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Type Variants</h3>
+
+    <Alert type="info" background="state-specific">
+      <Info className="tw-w-4 tw-h-4 tw-text-icon-brand" />
+      <div className="tw-flex tw-flex-col tw-gap-2">
+        <AlertTitle>Information</AlertTitle>
+        <AlertDescription>This is an informational alert with blue accent</AlertDescription>
+      </div>
+    </Alert>
+
+    <Alert type="warning" background="state-specific">
+      <AlertTriangle className="tw-w-4 tw-h-4 tw-text-icon-warning" />
+      <div className="tw-flex tw-flex-col tw-gap-2">
+        <AlertTitle>Warning</AlertTitle>
+        <AlertDescription>This is a warning alert with orange accent</AlertDescription>
+      </div>
+    </Alert>
+
+    <Alert type="danger" background="state-specific">
+      <AlertCircle className="tw-w-4 tw-h-4 tw-text-icon-danger" />
+      <div className="tw-flex tw-flex-col tw-gap-2">
+        <AlertTitle>Error</AlertTitle>
+        <AlertDescription>This is an error alert with red accent</AlertDescription>
+      </div>
+    </Alert>
+  </div>
+);
diff --git a/frontend/src/components/Auth/AuthCenteredLayout.jsx b/frontend/src/components/Auth/AuthCenteredLayout.jsx
new file mode 100644
index 0000000000..b62a606866
--- /dev/null
+++ b/frontend/src/components/Auth/AuthCenteredLayout.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const AuthCenteredLayout = ({ children }) => {
+  return (
+    <div className="tw-flex tw-min-h-svh tw-w-full tw-items-center tw-justify-center tw-p-6 md:tw-p-10">
+      <div className="tw-w-full tw-max-w-sm">{children}</div>
+    </div>
+  );
+};
+
diff --git a/frontend/src/components/Auth/AuthLayout.jsx b/frontend/src/components/Auth/AuthLayout.jsx
new file mode 100644
index 0000000000..52f786586f
--- /dev/null
+++ b/frontend/src/components/Auth/AuthLayout.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import FeatureList from './FeatureList';
+
+export const AuthLayout = ({ children }) => {
+  return (
+    <div className="tw-grid tw-min-h-svh lg:tw-grid-cols-[38%_1fr] tw-bg-background-surface-layer-01">
+      <div className="tw-flex tw-flex-col tw-gap-4 tw-p-6 md:tw-p-10">
+        <div className="tw-flex tw-flex-1 tw-items-center tw-justify-center">
+          <div className="tw-w-full tw-max-w-xs">{children}</div>
+        </div>
+      </div>
+      <div className="tw-bg-muted tw-relative tw-hidden lg:tw-block tw-h-full tw-w-full tw-p-4">
+        <div className="tw-h-full tw-w-full tw-rounded-2xl tw-object-cover tw-bg-[linear-gradient(90deg,hsla(176,61%,87%,1)_0%,hsla(150,54%,86%,1)_50%,hsla(301,68%,84%,1)_100%)] tw-flex tw-items-center tw-justify-center tw-p-8">
+          <FeatureList />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/components/Auth/FeatureList.jsx b/frontend/src/components/Auth/FeatureList.jsx
new file mode 100644
index 0000000000..f712b85e9f
--- /dev/null
+++ b/frontend/src/components/Auth/FeatureList.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { DynamicIcon } from 'lucide-react/dynamic';
+
+const FeatureList = () => {
+  const features = [
+    {
+      icon: 'zap',
+      title: 'Build apps, fast',
+      description: 'Turn ideas into production-ready business\napplications in minutes with AI and low-code.',
+      className: 'tw-text-[#FBCA73]',
+    },
+    {
+      icon: 'workflow',
+      title: 'Automate business processes',
+      description: 'Use workflows and AI agents to streamline\nprocesses and drive real outcomes.',
+      className: 'tw-text-[#486AE1]',
+    },
+    {
+      icon: 'puzzle',
+      title: 'Connect your data',
+      description: 'Integrate with 70+ data sources instantly.',
+      className: 'tw-text-[#9D78E7]',
+    },
+    {
+      icon: 'key-round',
+      title: 'Secure by default',
+      description: 'Enterprise-grade compliance: authentication,\nauthorization, CI/CD, audit logs, and more.',
+      className: 'tw-text-[#33B480]',
+    },
+  ];
+
+  return (
+    <div className="tw-flex tw-flex-col tw-gap-16 tw-items-start tw-relative tw-w-full tw-max-w-md">
+      {features.map((feature) => (
+        <div key={feature.icon} className="tw-flex tw-gap-5 tw-items-start tw-relative tw-shrink-0 tw-w-full">
+          <div className="tw-overflow-clip tw-relative tw-shrink-0 tw-w-16 tw-h-16 tw-flex tw-items-center tw-justify-center">
+            <DynamicIcon name={feature.icon} size={30} className={feature.className} />
+          </div>
+          <div className="tw-flex tw-flex-col tw-gap-1.5 tw-items-start tw-relative tw-shrink-0 tw-flex-1">
+            <div className="tw-flex tw-flex-col tw-items-start tw-relative tw-shrink-0 tw-w-full">
+              <div className="tw-flex tw-gap-3 tw-items-center tw-relative tw-shrink-0">
+                <h3 className="tw-font-medium tw-leading-8 tw-not-italic tw-relative tw-shrink-0 tw-text-text-default tw-text-xl tw-tracking-[-0.4px] tw-m-0">
+                  {feature.title}
+                </h3>
+              </div>
+            </div>
+            <p className="tw-font-normal tw-leading-6 tw-not-italic tw-relative tw-shrink-0 tw-text-text-placeholder tw-text-[15px] tw-tracking-[-0.3px] tw-w-full tw-whitespace-pre-line tw-m-0">
+              {feature.description}
+            </p>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default FeatureList;
diff --git a/frontend/src/components/Auth/LoginForm.jsx b/frontend/src/components/Auth/LoginForm.jsx
index 3082f80a43..0b4ad51ff0 100644
--- a/frontend/src/components/Auth/LoginForm.jsx
+++ b/frontend/src/components/Auth/LoginForm.jsx
@@ -53,7 +53,7 @@ export function LoginForm({ className, ...props }) {
   return (
     <FormWrapper>
       <form className={cn('tw-flex tw-flex-col tw-gap-6', className)} onSubmit={onSubmit} {...props}>
-        <div className="tw-flex tw-flex-col tw-gap-0.5 tw-min-w-96">
+        <div className="tw-flex tw-flex-col tw-gap-2 tw-min-w-20">
           <h1 className="tw-text-4xl tw-tracking-tight tw-font-medium tw-mb-0" data-cy="">
             {signinHeader}
           </h1>
diff --git a/frontend/src/components/Auth/Stories/AuthCenteredLayout.stories.jsx b/frontend/src/components/Auth/Stories/AuthCenteredLayout.stories.jsx
new file mode 100644
index 0000000000..d1b06110f3
--- /dev/null
+++ b/frontend/src/components/Auth/Stories/AuthCenteredLayout.stories.jsx
@@ -0,0 +1,228 @@
+import React from 'react';
+import { AuthCenteredLayout } from '../AuthCenteredLayout';
+import { LoginForm } from '../LoginForm';
+import { SignupSuccessInfo } from '../SignupSuccessInfo';
+import { ForgotPasswordInfoScreen } from '../ForgotPasswordInfoScreen';
+
+export default {
+  title: 'Auth/AuthCenteredLayout',
+  component: AuthCenteredLayout,
+  parameters: {
+    layout: 'fullscreen',
+    viewport: {
+      viewports: {
+        desktop: {
+          name: 'Desktop',
+          styles: {
+            width: '1440px',
+            height: '900px',
+          },
+        },
+        tablet: {
+          name: 'Tablet',
+          styles: {
+            width: '768px',
+            height: '1024px',
+          },
+        },
+        mobile: {
+          name: 'Mobile',
+          styles: {
+            width: '375px',
+            height: '667px',
+          },
+        },
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    children: {
+      control: false,
+      description: 'Content to be displayed within the centered auth layout',
+    },
+  },
+};
+
+// Signup Success Examples
+export const WithSignupSuccess = {
+  args: {
+    children: (
+      <SignupSuccessInfo
+        headerText="Check your mail"
+        messageText="We've sent a verification email to"
+        email="john.doe@example.com"
+        name="John"
+        infoText="Did not receive an email? Check your spam folder!"
+        showInfo={true}
+        resendButtonText="Resend verification email"
+        resendCountdownText="Resend verification email in"
+        showResendButton={true}
+        resendDisabled={false}
+        resendCountdown={0}
+        backButtonText="Back to sign up"
+        showSeparator={true}
+      />
+    ),
+  },
+};
+
+export const WithSignupSuccessWithCountdown = {
+  args: {
+    children: (
+      <SignupSuccessInfo
+        headerText="Check your mail"
+        messageText="We've sent a verification email to"
+        email="jane.smith@example.com"
+        name="Jane"
+        infoText="Did not receive an email? Check your spam folder!"
+        showInfo={true}
+        resendButtonText="Resend verification email"
+        resendCountdownText="Resend verification email in"
+        showResendButton={true}
+        resendDisabled={true}
+        resendCountdown={45}
+        backButtonText="Back to sign up"
+        showSeparator={true}
+      />
+    ),
+  },
+};
+
+export const WithSignupSuccessMinimal = {
+  args: {
+    children: (
+      <SignupSuccessInfo
+        headerText="Email sent"
+        messageText="Verification email sent to"
+        email="user@example.com"
+        name=""
+        infoText=""
+        showInfo={false}
+        resendButtonText=""
+        resendCountdownText=""
+        showResendButton={false}
+        resendDisabled={false}
+        resendCountdown={0}
+        backButtonText="Back to sign up"
+        showSeparator={false}
+      />
+    ),
+  },
+};
+
+// Forgot Password Examples
+export const WithForgotPasswordInfo = {
+  args: {
+    children: (
+      <ForgotPasswordInfoScreen
+        headerText="Check your mail"
+        messageText="We've sent a password reset link to"
+        email="user@example.com"
+        infoText="Did not receive an email? Check your spam folder!"
+        showInfo={true}
+        buttonText="Back to login"
+        showSeparator={true}
+      />
+    ),
+  },
+};
+
+export const WithForgotPasswordInfoMinimal = {
+  args: {
+    children: (
+      <ForgotPasswordInfoScreen
+        headerText="Email sent"
+        messageText="Password reset link sent to"
+        email="user@example.com"
+        infoText=""
+        showInfo={false}
+        buttonText="Back to login"
+        showSeparator={false}
+      />
+    ),
+  },
+};
+
+// Responsive Examples
+export const DesktopView = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'desktop',
+    },
+  },
+  args: {
+    children: (
+      <SignupSuccessInfo
+        headerText="Check your mail"
+        messageText="We've sent a verification email to"
+        email="john.doe@example.com"
+        name="John"
+        infoText="Did not receive an email? Check your spam folder!"
+        showInfo={true}
+        resendButtonText="Resend verification email"
+        resendCountdownText="Resend verification email in"
+        showResendButton={true}
+        resendDisabled={false}
+        resendCountdown={0}
+        backButtonText="Back to sign up"
+        showSeparator={true}
+      />
+    ),
+  },
+};
+
+export const TabletView = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'tablet',
+    },
+  },
+  args: {
+    children: (
+      <SignupSuccessInfo
+        headerText="Check your mail"
+        messageText="We've sent a verification email to"
+        email="john.doe@example.com"
+        name="John"
+        infoText="Did not receive an email? Check your spam folder!"
+        showInfo={true}
+        resendButtonText="Resend verification email"
+        resendCountdownText="Resend verification email in"
+        showResendButton={true}
+        resendDisabled={false}
+        resendCountdown={0}
+        backButtonText="Back to sign up"
+        showSeparator={true}
+      />
+    ),
+  },
+};
+
+export const MobileView = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile',
+    },
+  },
+  args: {
+    children: (
+      <SignupSuccessInfo
+        headerText="Check your mail"
+        messageText="We've sent a verification email to"
+        email="john.doe@example.com"
+        name="John"
+        infoText="Did not receive an email? Check your spam folder!"
+        showInfo={true}
+        resendButtonText="Resend verification email"
+        resendCountdownText="Resend verification email in"
+        showResendButton={true}
+        resendDisabled={false}
+        resendCountdown={0}
+        backButtonText="Back to sign up"
+        showSeparator={true}
+      />
+    ),
+  },
+};
+
diff --git a/frontend/src/components/Auth/Stories/AuthLayout.stories.jsx b/frontend/src/components/Auth/Stories/AuthLayout.stories.jsx
new file mode 100644
index 0000000000..a358c45bc6
--- /dev/null
+++ b/frontend/src/components/Auth/Stories/AuthLayout.stories.jsx
@@ -0,0 +1,400 @@
+import React from 'react';
+import { AuthLayout } from '../AuthLayout';
+import { LoginForm } from '../LoginForm';
+import { SetupAdminForm } from '../SetupAdminForm';
+
+export default {
+  title: 'Auth/AuthLayout',
+  component: AuthLayout,
+  parameters: {
+    layout: 'fullscreen',
+    viewport: {
+      viewports: {
+        desktop: {
+          name: 'Desktop',
+          styles: {
+            width: '1440px',
+            height: '900px',
+          },
+        },
+        tablet: {
+          name: 'Tablet',
+          styles: {
+            width: '768px',
+            height: '1024px',
+          },
+        },
+        mobile: {
+          name: 'Mobile',
+          styles: {
+            width: '375px',
+            height: '667px',
+          },
+        },
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    children: {
+      control: false,
+      description: 'Content to be displayed within the auth layout',
+    },
+  },
+};
+
+// Login Form Examples
+export const WithLoginForm = {
+  args: {
+    children: (
+      <LoginForm
+        signinHeader="Sign in"
+        signUpText="New to ToolJet?"
+        signUpUrl="#"
+        signUpCTA="Create an account"
+        showSignup={true}
+        organizationName=""
+        emailLabel="Email"
+        emailPlaceholder="Enter your work email"
+        passwordLabel="Password"
+        passwordPlaceholder="Enter password"
+        showForgotPassword={true}
+        forgotPasswordUrl="/forgot-password"
+        forgotPasswordText="Forgot?"
+        signinButtonText="Sign in"
+        orText="OR"
+        showOrSeparator={true}
+      />
+    ),
+  },
+};
+
+export const WithLoginFormOrganization = {
+  args: {
+    children: (
+      <LoginForm
+        signinHeader="Sign in"
+        signUpText="New to ToolJet?"
+        signUpUrl="#"
+        signUpCTA="Create an account"
+        showSignup={true}
+        organizationName="Acme Corporation"
+        emailLabel="Email"
+        emailPlaceholder="Enter your work email"
+        passwordLabel="Password"
+        passwordPlaceholder="Enter password"
+        showForgotPassword={true}
+        forgotPasswordUrl="/forgot-password"
+        forgotPasswordText="Forgot?"
+        signinButtonText="Sign in"
+        orText="OR"
+        showOrSeparator={true}
+      />
+    ),
+  },
+};
+
+export const WithLoginFormLoading = {
+  args: {
+    children: (
+      <LoginForm
+        signinHeader="Sign in"
+        signUpText="New to ToolJet?"
+        signUpUrl="#"
+        signUpCTA="Create an account"
+        showSignup={true}
+        organizationName=""
+        emailLabel="Email"
+        emailPlaceholder="Enter your work email"
+        passwordLabel="Password"
+        passwordPlaceholder="Enter password"
+        showForgotPassword={true}
+        forgotPasswordUrl="/forgot-password"
+        forgotPasswordText="Forgot?"
+        signinButtonText="Signing in..."
+        orText="OR"
+        showOrSeparator={true}
+        emailValue="user@example.com"
+        passwordValue="password123"
+        isLoading={true}
+        disabled={true}
+      />
+    ),
+  },
+};
+
+// Signup Form Examples (using SetupAdminForm)
+export const WithSignupForm = {
+  args: {
+    children: (
+      <SetupAdminForm
+        headerText="Create your account"
+        nameLabel="Full Name"
+        namePlaceholder="Enter your full name"
+        emailLabel="Email"
+        emailPlaceholder="Enter your work email"
+        passwordLabel="Password"
+        passwordPlaceholder="Create a password"
+        buttonText="Create account"
+        termsText="By creating an account, you agree to our Terms of Service and Privacy Policy"
+        showTerms={true}
+      />
+    ),
+  },
+};
+
+export const WithSignupFormLoading = {
+  args: {
+    children: (
+      <SetupAdminForm
+        headerText="Create your account"
+        nameLabel="Full Name"
+        namePlaceholder="Enter your full name"
+        emailLabel="Email"
+        emailPlaceholder="Enter your work email"
+        passwordLabel="Password"
+        passwordPlaceholder="Create a password"
+        buttonText="Creating account..."
+        termsText="By creating an account, you agree to our Terms of Service and Privacy Policy"
+        showTerms={true}
+        nameValue="John Doe"
+        emailValue="john@example.com"
+        passwordValue="password123"
+        isLoading={true}
+        disabled={true}
+      />
+    ),
+  },
+};
+
+// Form with Validation Examples
+export const WithLoginFormValidation = {
+  args: {
+    children: (
+      <LoginForm
+        signinHeader="Sign in"
+        signUpText="New to ToolJet?"
+        signUpUrl="#"
+        signUpCTA="Create an account"
+        showSignup={true}
+        organizationName=""
+        emailLabel="Email"
+        emailPlaceholder="Enter your work email"
+        passwordLabel="Password"
+        passwordPlaceholder="Enter password"
+        showForgotPassword={true}
+        forgotPasswordUrl="/forgot-password"
+        forgotPasswordText="Forgot?"
+        signinButtonText="Sign in"
+        orText="OR"
+        showOrSeparator={true}
+        emailValue="invalid-email"
+        passwordValue="123"
+        emailValidationMessage={{
+          valid: false,
+          message: 'Please enter a valid email address',
+        }}
+        passwordValidationMessage={{
+          valid: false,
+          message: 'Password must be at least 8 characters',
+        }}
+      />
+    ),
+  },
+};
+
+export const WithSignupFormValidation = {
+  args: {
+    children: (
+      <SetupAdminForm
+        headerText="Create your account"
+        nameLabel="Full Name"
+        namePlaceholder="Enter your full name"
+        emailLabel="Email"
+        emailPlaceholder="Enter your work email"
+        passwordLabel="Password"
+        passwordPlaceholder="Create a password"
+        buttonText="Create account"
+        termsText="By creating an account, you agree to our Terms of Service and Privacy Policy"
+        showTerms={true}
+        nameValue=""
+        emailValue="invalid-email"
+        passwordValue="123"
+        nameValidationMessage={{
+          valid: false,
+          message: 'Name is required',
+        }}
+        emailValidationMessage={{
+          valid: false,
+          message: 'Please enter a valid email address',
+        }}
+        passwordValidationMessage={{
+          valid: false,
+          message: 'Password must be at least 8 characters',
+        }}
+      />
+    ),
+  },
+};
+
+// Empty State Example
+export const WithEmptyState = {
+  args: {
+    children: (
+      <div className="tw-flex tw-flex-col tw-gap-6 tw-items-center tw-text-center">
+        <div className="tw-flex tw-flex-col tw-gap-2">
+          <h1 className="tw-text-4xl tw-tracking-tight tw-font-medium tw-mb-0">Getting Started</h1>
+          <p className="tw-text-balance tw-text-sm tw-text-text-placeholder tw-mb-0">Welcome to your new workspace</p>
+        </div>
+        <div className="tw-w-full tw-max-w-xs">
+          <button
+            type="button"
+            className="tw-w-full tw-px-4 tw-py-3 tw-bg-button-primary tw-text-button-primary-text tw-rounded-md tw-text-sm tw-font-medium hover:tw-bg-button-primary-hover"
+          >
+            Get Started
+          </button>
+        </div>
+      </div>
+    ),
+  },
+};
+
+// Responsive Examples
+export const DesktopView = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'desktop',
+    },
+  },
+  args: {
+    children: (
+      <LoginForm
+        signinHeader="Sign in"
+        signUpText="New to ToolJet?"
+        signUpUrl="#"
+        signUpCTA="Create an account"
+        showSignup={true}
+        organizationName="Acme Corporation"
+        emailLabel="Email"
+        emailPlaceholder="Enter your work email"
+        passwordLabel="Password"
+        passwordPlaceholder="Enter password"
+        showForgotPassword={true}
+        forgotPasswordUrl="/forgot-password"
+        forgotPasswordText="Forgot?"
+        signinButtonText="Sign in"
+        orText="OR"
+        showOrSeparator={true}
+      />
+    ),
+  },
+};
+
+export const TabletView = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'tablet',
+    },
+  },
+  args: {
+    children: (
+      <LoginForm
+        signinHeader="Sign in"
+        signUpText="New to ToolJet?"
+        signUpUrl="#"
+        signUpCTA="Create an account"
+        showSignup={true}
+        organizationName="Acme Corporation"
+        emailLabel="Email"
+        emailPlaceholder="Enter your work email"
+        passwordLabel="Password"
+        passwordPlaceholder="Enter password"
+        showForgotPassword={true}
+        forgotPasswordUrl="/forgot-password"
+        forgotPasswordText="Forgot?"
+        signinButtonText="Sign in"
+        orText="OR"
+        showOrSeparator={true}
+      />
+    ),
+  },
+};
+
+export const MobileView = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile',
+    },
+  },
+  args: {
+    children: (
+      <LoginForm
+        signinHeader="Sign in"
+        signUpText="New to ToolJet?"
+        signUpUrl="#"
+        signUpCTA="Create an account"
+        showSignup={true}
+        organizationName="Acme Corporation"
+        emailLabel="Email"
+        emailPlaceholder="Enter your work email"
+        passwordLabel="Password"
+        passwordPlaceholder="Enter password"
+        showForgotPassword={true}
+        forgotPasswordUrl="/forgot-password"
+        forgotPasswordText="Forgot?"
+        signinButtonText="Sign in"
+        orText="OR"
+        showOrSeparator={true}
+      />
+    ),
+  },
+};
+
+// Responsive Signup Examples
+export const DesktopSignupView = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'desktop',
+    },
+  },
+  args: {
+    children: (
+      <SetupAdminForm
+        headerText="Create your account"
+        nameLabel="Full Name"
+        namePlaceholder="Enter your full name"
+        emailLabel="Email"
+        emailPlaceholder="Enter your work email"
+        passwordLabel="Password"
+        passwordPlaceholder="Create a password"
+        buttonText="Create account"
+        termsText="By creating an account, you agree to our Terms of Service and Privacy Policy"
+        showTerms={true}
+      />
+    ),
+  },
+};
+
+export const TabletSignupView = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'tablet',
+    },
+  },
+  args: {
+    children: (
+      <SetupAdminForm
+        headerText="Create your account"
+        nameLabel="Full Name"
+        namePlaceholder="Enter your full name"
+        emailLabel="Email"
+        emailPlaceholder="Enter your work email"
+        passwordLabel="Password"
+        passwordPlaceholder="Create a password"
+        buttonText="Create account"
+        termsText="By creating an account, you agree to our Terms of Service and Privacy Policy"
+        showTerms={true}
+      />
+    ),
+  },
+};
diff --git a/frontend/src/components/Auth/Stories/LoginPage.stories.jsx b/frontend/src/components/Auth/Stories/LoginPage.stories.jsx
new file mode 100644
index 0000000000..54584e291b
--- /dev/null
+++ b/frontend/src/components/Auth/Stories/LoginPage.stories.jsx
@@ -0,0 +1,176 @@
+import React from "react";
+import { AuthLayout } from "../AuthLayout";
+import { LoginForm } from "../LoginForm";
+import { GoogleSigninButton } from "../GoogleSigninButton";
+import { GitHubSigninButton } from "../GitHubSigninButton";
+
+export default {
+  title: "Auth/LoginPage",
+  component: AuthLayout,
+  parameters: {
+    layout: "fullscreen",
+    viewport: {
+      viewports: {
+        desktop: {
+          name: "Desktop",
+          styles: {
+            width: "1440px",
+            height: "900px",
+          },
+        },
+        tablet: {
+          name: "Tablet",
+          styles: {
+            width: "768px",
+            height: "1024px",
+          },
+        },
+        mobile: {
+          name: "Mobile",
+          styles: {
+            width: "375px",
+            height: "667px",
+          },
+        },
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: false,
+      description: "Content to be displayed within the auth layout",
+    },
+  },
+};
+
+// Complete Login Page with SSO
+export const CompleteLoginPage = {
+  args: {
+    children: (
+      <div className="tw-flex tw-flex-col tw-gap-6 tw-w-full">
+        <LoginForm
+          signinHeader="Sign in"
+          signUpText="New to ToolJet?"
+          signUpUrl="#"
+          signUpCTA="Create an account"
+          showSignup={true}
+          organizationName=""
+          emailLabel="Email"
+          emailPlaceholder="Enter your work email"
+          passwordLabel="Password"
+          passwordPlaceholder="Enter password"
+          showForgotPassword={true}
+          forgotPasswordUrl="/forgot-password"
+          forgotPasswordText="Forgot?"
+          signinButtonText="Sign in"
+          orText="OR"
+          showOrSeparator={true}
+          emailValue=""
+          passwordValue=""
+          onEmailChange={() => {}}
+          onPasswordChange={() => {}}
+          onSubmit={() => {}}
+          isLoading={false}
+          disabled={false}
+        />
+
+        {/* SSO Buttons */}
+        <div className="tw-flex tw-flex-col tw-gap-3">
+          <GoogleSigninButton
+            onClick={() => console.log("Google sign in clicked")}
+            text="Continue with"
+            dataCy="google-signin-button"
+          />
+          <GitHubSigninButton
+            onClick={() => console.log("GitHub sign in clicked")}
+            text="Continue with"
+            dataCy="github-signin-button"
+          />
+        </div>
+      </div>
+    ),
+  },
+};
+
+// Login Page with Organization
+export const LoginPageWithOrganization = {
+  args: {
+    children: (
+      <div className="tw-flex tw-flex-col tw-gap-6 tw-w-full">
+        <LoginForm
+          signinHeader="Sign in"
+          signUpText="New to ToolJet?"
+          signUpUrl="#"
+          signUpCTA="Create an account"
+          showSignup={true}
+          organizationName="Acme Corporation"
+          emailLabel="Email"
+          emailPlaceholder="Enter your work email"
+          passwordLabel="Password"
+          passwordPlaceholder="Enter password"
+          showForgotPassword={true}
+          forgotPasswordUrl="/forgot-password"
+          forgotPasswordText="Forgot?"
+          signinButtonText="Sign in"
+          orText="OR"
+          showOrSeparator={true}
+          emailValue=""
+          passwordValue=""
+          onEmailChange={() => {}}
+          onPasswordChange={() => {}}
+          onSubmit={() => {}}
+          isLoading={false}
+          disabled={false}
+        />
+
+        {/* SSO Buttons */}
+        <div className="tw-flex tw-flex-col tw-gap-3">
+          <GoogleSigninButton
+            onClick={() => console.log("Google sign in clicked")}
+            text="Continue with"
+            dataCy="google-signin-button"
+          />
+          <GitHubSigninButton
+            onClick={() => console.log("GitHub sign in clicked")}
+            text="Continue with"
+            dataCy="github-signin-button"
+          />
+        </div>
+      </div>
+    ),
+  },
+};
+
+// Login Page without SSO
+export const LoginPageWithoutSSO = {
+  args: {
+    children: (
+      <LoginForm
+        signinHeader="Sign in"
+        signUpText="New to ToolJet?"
+        signUpUrl="#"
+        signUpCTA="Create an account"
+        showSignup={true}
+        organizationName=""
+        emailLabel="Email"
+        emailPlaceholder="Enter your work email"
+        passwordLabel="Password"
+        passwordPlaceholder="Enter password"
+        showForgotPassword={true}
+        forgotPasswordUrl="/forgot-password"
+        forgotPasswordText="Forgot?"
+        signinButtonText="Sign in"
+        orText="OR"
+        showOrSeparator={false}
+        emailValue=""
+        passwordValue=""
+        onEmailChange={() => {}}
+        onPasswordChange={() => {}}
+        onSubmit={() => {}}
+        isLoading={false}
+        disabled={false}
+      />
+    ),
+  },
+};
diff --git a/frontend/src/components/login-form.jsx b/frontend/src/components/login-form.jsx
deleted file mode 100644
index 002e142ce7..0000000000
--- a/frontend/src/components/login-form.jsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import Logo from '@/modules/common/resources/images/Logo';
-
-export function LoginForm({ className, ...props }) {
-  return (
-    <form className={cn('tw-flex tw-flex-col tw-gap-6', className)} {...props}>
-      <div className="tw-flex tw-flex-col tw-items-center tw-gap-2 tw-text-center">
-        <h1 className="tw-text-2xl tw-font-bold">Login to your account</h1>
-        <p className="tw-text-balance tw-text-sm tw-text-muted-foreground">
-          Enter your email below to login to your account
-        </p>
-      </div>
-      <div className="tw-grid tw-gap-6">
-        <div className="tw-grid tw-gap-2">
-          <Label htmlFor="email">Email</Label>
-          <Input id="email" type="email" placeholder="m@example.com" required />
-        </div>
-        <div className="tw-grid tw-gap-2">
-          <div className="tw-flex tw-items-center">
-            <Label htmlFor="password">Password</Label>
-            <a href="#" className="tw-ml-auto tw-text-sm tw-underline-offset-4 hover:tw-underline">
-              Forgot your password?
-            </a>
-          </div>
-          <Input id="password" type="password" required />
-        </div>
-        <Button type="submit" className="tw-w-full">
-          Login
-        </Button>
-        <div className="tw-relative tw-text-center tw-text-sm after:tw-absolute after:tw-inset-0 after:tw-top-1/2 after:tw-z-0 after:tw-flex after:tw-items-center after:tw-border-t after:tw-border-border">
-          <span className="tw-relative tw-z-10 tw-bg-background tw-px-2 tw-text-muted-foreground">
-            Or continue with
-          </span>
-        </div>
-        <Button variant="outline" className="tw-w-full">
-          
-          Login with GitHub
-        </Button>
-      </div>
-      <div className="tw-text-center tw-text-sm">
-        Don&apos;t have an account?{' '}
-        <a href="#" className="tw-underline tw-underline-offset-4">
-          Sign up
-        </a>
-      </div>
-    </form>
-  );
-}
diff --git a/frontend/src/components/ui/Alert/Alert.jsx b/frontend/src/components/ui/Alert/Alert.jsx
new file mode 100644
index 0000000000..680723fe46
--- /dev/null
+++ b/frontend/src/components/ui/Alert/Alert.jsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const alertVariants = cva('tw-relative tw-w-full tw-rounded-md tw-p-3 tw-text-xs tw-flex tw-gap-1.5 tw-items-start', {
+  variants: {
+    type: {
+      info: '',
+      warning: '',
+      danger: '',
+    },
+    background: {
+      none: '',
+      grey: 'tw-bg-interactive-default',
+      white: 'tw-bg-background-surface-layer-01 tw-shadow-elevation-100',
+      'state-specific': '',
+    },
+  },
+  compoundVariants: [
+    // Info variants
+    {
+      type: 'info',
+      background: 'state-specific',
+      class: 'tw-bg-background-accent-weak',
+    },
+    // Warning variants
+    {
+      type: 'warning',
+      background: 'state-specific',
+      class: 'tw-bg-background-warning-weak',
+    },
+    // Danger variants
+    {
+      type: 'danger',
+      background: 'state-specific',
+      class: 'tw-bg-background-error-weak',
+    },
+  ],
+  defaultVariants: {
+    type: 'info',
+    background: 'none',
+  },
+});
+
+const Alert = React.forwardRef(({ className, type, background, ...props }, ref) => (
+  <div ref={ref} role="alert" className={cn(alertVariants({ type, background }), className)} {...props} />
+));
+Alert.displayName = 'Alert';
+
+const AlertTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn('tw-font-medium tw-leading-[18px] tw-text-[#2d343b] tw-text-[12px] tw-mb-0', className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('tw-font-normal tw-leading-[18px] tw-text-text-placeholder tw-text-[12px]', className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription };
diff --git a/frontend/src/components/ui/Button/Button.jsx b/frontend/src/components/ui/Button/Button.jsx
index 5bb5fd8e5a..850115e423 100644
--- a/frontend/src/components/ui/Button/Button.jsx
+++ b/frontend/src/components/ui/Button/Button.jsx
@@ -8,7 +8,7 @@ import { Slot } from '@radix-ui/react-slot';
 // eslint-disable-next-line import/no-unresolved
 import { cva } from 'class-variance-authority';
 // eslint-disable-next-line import/no-unresolved
-import { DynamicIcon } from 'lucide-react/dynamic';
+import { DynamicIcon } from 'lucide-react/dynamic.mjs';
 import './Button.scss';
 import {
   getDefaultIconFillColor,
diff --git a/frontend/src/components/ui/InlineInfo/InlineInfo.jsx b/frontend/src/components/ui/InlineInfo/InlineInfo.jsx
new file mode 100644
index 0000000000..79a09a594d
--- /dev/null
+++ b/frontend/src/components/ui/InlineInfo/InlineInfo.jsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import { Alert, AlertTitle, AlertDescription } from '../Alert/Alert';
+
+// Icon color variants based on type
+const getIconColor = (type) => {
+  switch (type) {
+    case 'info':
+      return 'tw-text-icon-brand';
+    case 'warning':
+      return 'tw-text-icon-warning';
+    case 'danger':
+      return 'tw-text-icon-danger';
+    default:
+      return 'tw-text-icon-brand';
+  }
+};
+
+// Compound component that accepts title, icon, description, and button props
+const InlineInfoCompound = React.forwardRef(
+  ({ className, type = 'info', background = 'none', title, icon: Icon, description, button, ...props }, ref) => (
+    <Alert ref={ref} type={type} background={background} className={className} {...props}>
+      {Icon && (
+        <div className="tw-shrink-0 tw-w-[18px] tw-h-[18px]">
+          <Icon className={cn('tw-w-full tw-h-full', getIconColor(type))} />
+        </div>
+      )}
+      <div className="tw-flex tw-flex-col tw-gap-2 tw-items-start">
+        {title && <AlertTitle>{title}</AlertTitle>}
+        {description && <AlertDescription>{description}</AlertDescription>}
+        {button && <div className="tw-mt-1">{button}</div>}
+      </div>
+    </Alert>
+  )
+);
+InlineInfoCompound.displayName = 'InlineInfoCompound';
+
+export { InlineInfoCompound };
diff --git a/frontend/src/components/ui/InlineInfo/InlineInfo.stories.jsx b/frontend/src/components/ui/InlineInfo/InlineInfo.stories.jsx
new file mode 100644
index 0000000000..9ca2c234e2
--- /dev/null
+++ b/frontend/src/components/ui/InlineInfo/InlineInfo.stories.jsx
@@ -0,0 +1,200 @@
+import React from 'react';
+import { InlineInfoCompound } from './InlineInfo';
+import { Info, AlertTriangle, AlertCircle } from 'lucide-react';
+import { Button } from '../Button/Button';
+
+export default {
+  title: 'UI/InlineInfo',
+  component: InlineInfoCompound,
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    type: {
+      control: { type: 'select' },
+      options: ['info', 'warning', 'danger'],
+    },
+    background: {
+      control: { type: 'select' },
+      options: ['none', 'grey', 'white', 'state-specific'],
+    },
+    title: {
+      control: { type: 'text' },
+    },
+    description: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+const Template = (args) => <InlineInfoCompound {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  type: 'info',
+  background: 'none',
+  title: 'Information',
+  description: 'This is an informational message.',
+  icon: Info,
+  button: (
+    <Button size="small" variant="outline">
+      Learn More
+    </Button>
+  ),
+};
+
+// All Variants Grid
+export const AllVariants = () => {
+  const types = ['info', 'warning', 'danger'];
+  const backgrounds = ['none', 'grey', 'white', 'state-specific'];
+  const icons = {
+    info: Info,
+    warning: AlertTriangle,
+    danger: AlertCircle,
+  };
+  const titles = {
+    info: 'Information',
+    warning: 'Warning',
+    danger: 'Error',
+  };
+  const descriptions = {
+    info: 'This is an informational message.',
+    warning: 'Please review your settings before proceeding.',
+    danger: 'Something went wrong. Please try again.',
+  };
+
+  return (
+    <div className="tw-space-y-8">
+      <div>
+        <h2 className="tw-text-2xl tw-font-bold tw-mb-4">InlineInfo Compound Component - All Variants</h2>
+        <p className="tw-text-gray-600 tw-mb-6">
+          Showcasing all 12 variants from Figma design (3 types × 4 backgrounds)
+        </p>
+      </div>
+
+      {types.map((type) => (
+        <div key={type} className="tw-space-y-4">
+          <h3 className="tw-text-lg tw-font-semibold tw-capitalize tw-text-gray-800">{type} Type</h3>
+          <div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4">
+            {backgrounds.map((background) => (
+              <div key={`${type}-${background}`} className="tw-space-y-2">
+                <div className="tw-text-sm tw-font-medium tw-text-gray-600 tw-capitalize">
+                  {background.replace('-', ' ')} Background
+                </div>
+                <InlineInfoCompound
+                  type={type}
+                  background={background}
+                  icon={icons[type]}
+                  title={titles[type]}
+                  description={descriptions[type]}
+                  button={
+                    <Button size="sm" variant={type === 'danger' ? 'destructive' : 'outline'}>
+                      Action
+                    </Button>
+                  }
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+// Individual Type Stories
+export const InfoVariants = () => (
+  <div className="tw-space-y-4">
+    <h3 className="tw-text-lg tw-font-semibold">Info Type Variants</h3>
+    <div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4">
+      {['none', 'grey', 'white', 'state-specific'].map((background) => (
+        <div key={background} className="tw-space-y-2">
+          <div className="tw-text-sm tw-font-medium tw-text-gray-600 tw-capitalize">
+            {background.replace('-', ' ')} Background
+          </div>
+          <InlineInfoCompound
+            type="info"
+            background={background}
+            icon={Info}
+            title="Information"
+            description="This is an informational message."
+            button={
+              <Button size="sm" variant="outline">
+                Learn More
+              </Button>
+            }
+          />
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+export const WarningVariants = () => (
+  <div className="tw-space-y-4">
+    <h3 className="tw-text-lg tw-font-semibold">Warning Type Variants</h3>
+    <div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4">
+      {['none', 'grey', 'white', 'state-specific'].map((background) => (
+        <div key={background} className="tw-space-y-2">
+          <div className="tw-text-sm tw-font-medium tw-text-gray-600 tw-capitalize">
+            {background.replace('-', ' ')} Background
+          </div>
+          <InlineInfoCompound
+            type="warning"
+            background={background}
+            icon={AlertTriangle}
+            title="Warning"
+            description="Please review your settings before proceeding."
+            button={
+              <Button size="sm" variant="outline">
+                Review
+              </Button>
+            }
+          />
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+export const DangerVariants = () => (
+  <div className="tw-space-y-4">
+    <h3 className="tw-text-lg tw-font-semibold">Danger Type Variants</h3>
+    <div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4">
+      {['none', 'grey', 'white', 'state-specific'].map((background) => (
+        <div key={background} className="tw-space-y-2">
+          <div className="tw-text-sm tw-font-medium tw-text-gray-600 tw-capitalize">
+            {background.replace('-', ' ')} Background
+          </div>
+          <InlineInfoCompound
+            type="danger"
+            background={background}
+            icon={AlertCircle}
+            title="Error"
+            description="Something went wrong. Please try again."
+            button={
+              <Button size="sm" variant="destructive">
+                Retry
+              </Button>
+            }
+          />
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+// Interactive Playground
+export const Playground = Template.bind({});
+Playground.args = {
+  type: 'info',
+  background: 'none',
+  title: 'Custom Title',
+  description: 'Custom description text goes here.',
+  icon: Info,
+  button: (
+    <Button size="sm" variant="outline">
+      Custom Button
+    </Button>
+  ),
+};
diff --git a/frontend/src/components/ui/Input/Input.jsx b/frontend/src/components/ui/Input/Input.jsx
index 1f0af9b6df..06f3982531 100644
--- a/frontend/src/components/ui/Input/Input.jsx
+++ b/frontend/src/components/ui/Input/Input.jsx
@@ -69,7 +69,7 @@ export const Input = React.forwardRef(
                 inputVariants({ size }),
                 `tw-peer tw-flex ${buttonSizeVariants({
                   size,
-                })} tw-w-full tw-rounded-[6px] tw-border tw-border-solid tw-border-border-strong tw-bg-background-surface-layer-01 tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${
+                })} tw-w-full tw-border tw-border-solid tw-border-border-strong tw-bg-background-surface-layer-01 tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${
                   props.styles
                 }`,
                 className,
diff --git a/frontend/src/components/ui/alert.jsx b/frontend/src/components/ui/alert.jsx
new file mode 100644
index 0000000000..14e6248437
--- /dev/null
+++ b/frontend/src/components/ui/alert.jsx
@@ -0,0 +1,3 @@
+import { Button, buttonVariants } from './InlineInfo/InlineInfo';
+
+export { Button, buttonVariants };

From f5dcecb806f1f554cec18b0505d83cc84786e7e9 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Mon, 29 Sep 2025 15:05:40 +0530
Subject: [PATCH 065/157] Refactor Auth component stories to use 'Auth/Blocks'
 naming convention

- Updated titles of various Auth component stories to follow the new 'Auth/Blocks' structure for better organization.
- Removed several unused story exports from `AuthCenteredLayout`, `AuthLayout`, `ForgotPasswordForm`, and `LoginPage` to streamline the codebase.
- Introduced a new `LoginFlow` story to demonstrate the complete login process, integrating the `LoginForm`, `GoogleSigninButton`, and `GitHubSigninButton` components.
- Enhanced the overall structure and readability of the Auth component stories in Storybook.
---
 .../Stories/AuthCenteredLayout.stories.jsx    | 145 +----------
 .../Auth/Stories/AuthLayout.stories.jsx       | 242 +-----------------
 .../Stories/ForgotPasswordForm.stories.jsx    |  82 +-----
 .../Stories/GitHubSigninButton.stories.jsx    |   2 +-
 .../Stories/GoogleSigninButton.stories.jsx    |   2 +-
 .../Auth/Stories/LoginFlow.stories.jsx        |  94 +++++++
 .../Auth/Stories/LoginForm.stories.jsx        |   2 +-
 .../Auth/Stories/LoginPage.stories.jsx        | 127 ++-------
 8 files changed, 125 insertions(+), 571 deletions(-)
 create mode 100644 frontend/src/components/Auth/Stories/LoginFlow.stories.jsx

diff --git a/frontend/src/components/Auth/Stories/AuthCenteredLayout.stories.jsx b/frontend/src/components/Auth/Stories/AuthCenteredLayout.stories.jsx
index d1b06110f3..78e0788d79 100644
--- a/frontend/src/components/Auth/Stories/AuthCenteredLayout.stories.jsx
+++ b/frontend/src/components/Auth/Stories/AuthCenteredLayout.stories.jsx
@@ -5,7 +5,7 @@ import { SignupSuccessInfo } from '../SignupSuccessInfo';
 import { ForgotPasswordInfoScreen } from '../ForgotPasswordInfoScreen';
 
 export default {
-  title: 'Auth/AuthCenteredLayout',
+  title: 'Auth/Blocks/AuthCenteredLayout',
   component: AuthCenteredLayout,
   parameters: {
     layout: 'fullscreen',
@@ -67,50 +67,6 @@ export const WithSignupSuccess = {
   },
 };
 
-export const WithSignupSuccessWithCountdown = {
-  args: {
-    children: (
-      <SignupSuccessInfo
-        headerText="Check your mail"
-        messageText="We've sent a verification email to"
-        email="jane.smith@example.com"
-        name="Jane"
-        infoText="Did not receive an email? Check your spam folder!"
-        showInfo={true}
-        resendButtonText="Resend verification email"
-        resendCountdownText="Resend verification email in"
-        showResendButton={true}
-        resendDisabled={true}
-        resendCountdown={45}
-        backButtonText="Back to sign up"
-        showSeparator={true}
-      />
-    ),
-  },
-};
-
-export const WithSignupSuccessMinimal = {
-  args: {
-    children: (
-      <SignupSuccessInfo
-        headerText="Email sent"
-        messageText="Verification email sent to"
-        email="user@example.com"
-        name=""
-        infoText=""
-        showInfo={false}
-        resendButtonText=""
-        resendCountdownText=""
-        showResendButton={false}
-        resendDisabled={false}
-        resendCountdown={0}
-        backButtonText="Back to sign up"
-        showSeparator={false}
-      />
-    ),
-  },
-};
-
 // Forgot Password Examples
 export const WithForgotPasswordInfo = {
   args: {
@@ -127,102 +83,3 @@ export const WithForgotPasswordInfo = {
     ),
   },
 };
-
-export const WithForgotPasswordInfoMinimal = {
-  args: {
-    children: (
-      <ForgotPasswordInfoScreen
-        headerText="Email sent"
-        messageText="Password reset link sent to"
-        email="user@example.com"
-        infoText=""
-        showInfo={false}
-        buttonText="Back to login"
-        showSeparator={false}
-      />
-    ),
-  },
-};
-
-// Responsive Examples
-export const DesktopView = {
-  parameters: {
-    viewport: {
-      defaultViewport: 'desktop',
-    },
-  },
-  args: {
-    children: (
-      <SignupSuccessInfo
-        headerText="Check your mail"
-        messageText="We've sent a verification email to"
-        email="john.doe@example.com"
-        name="John"
-        infoText="Did not receive an email? Check your spam folder!"
-        showInfo={true}
-        resendButtonText="Resend verification email"
-        resendCountdownText="Resend verification email in"
-        showResendButton={true}
-        resendDisabled={false}
-        resendCountdown={0}
-        backButtonText="Back to sign up"
-        showSeparator={true}
-      />
-    ),
-  },
-};
-
-export const TabletView = {
-  parameters: {
-    viewport: {
-      defaultViewport: 'tablet',
-    },
-  },
-  args: {
-    children: (
-      <SignupSuccessInfo
-        headerText="Check your mail"
-        messageText="We've sent a verification email to"
-        email="john.doe@example.com"
-        name="John"
-        infoText="Did not receive an email? Check your spam folder!"
-        showInfo={true}
-        resendButtonText="Resend verification email"
-        resendCountdownText="Resend verification email in"
-        showResendButton={true}
-        resendDisabled={false}
-        resendCountdown={0}
-        backButtonText="Back to sign up"
-        showSeparator={true}
-      />
-    ),
-  },
-};
-
-export const MobileView = {
-  parameters: {
-    viewport: {
-      defaultViewport: 'mobile',
-    },
-  },
-  args: {
-    children: (
-      <SignupSuccessInfo
-        headerText="Check your mail"
-        messageText="We've sent a verification email to"
-        email="john.doe@example.com"
-        name="John"
-        infoText="Did not receive an email? Check your spam folder!"
-        showInfo={true}
-        resendButtonText="Resend verification email"
-        resendCountdownText="Resend verification email in"
-        showResendButton={true}
-        resendDisabled={false}
-        resendCountdown={0}
-        backButtonText="Back to sign up"
-        showSeparator={true}
-      />
-    ),
-  },
-};
-
diff --git a/frontend/src/components/Auth/Stories/AuthLayout.stories.jsx b/frontend/src/components/Auth/Stories/AuthLayout.stories.jsx
index a358c45bc6..9edf12c6de 100644
--- a/frontend/src/components/Auth/Stories/AuthLayout.stories.jsx
+++ b/frontend/src/components/Auth/Stories/AuthLayout.stories.jsx
@@ -4,7 +4,7 @@ import { LoginForm } from '../LoginForm';
 import { SetupAdminForm } from '../SetupAdminForm';
 
 export default {
-  title: 'Auth/AuthLayout',
+  title: 'Auth/Blocks/AuthLayout',
   component: AuthLayout,
   parameters: {
     layout: 'fullscreen',
@@ -43,32 +43,6 @@ export default {
   },
 };
 
-// Login Form Examples
-export const WithLoginForm = {
-  args: {
-    children: (
-      <LoginForm
-        signinHeader="Sign in"
-        signUpText="New to ToolJet?"
-        signUpUrl="#"
-        signUpCTA="Create an account"
-        showSignup={true}
-        organizationName=""
-        emailLabel="Email"
-        emailPlaceholder="Enter your work email"
-        passwordLabel="Password"
-        passwordPlaceholder="Enter password"
-        showForgotPassword={true}
-        forgotPasswordUrl="/forgot-password"
-        forgotPasswordText="Forgot?"
-        signinButtonText="Sign in"
-        orText="OR"
-        showOrSeparator={true}
-      />
-    ),
-  },
-};
-
 export const WithLoginFormOrganization = {
   args: {
     children: (
@@ -94,171 +68,6 @@ export const WithLoginFormOrganization = {
   },
 };
 
-export const WithLoginFormLoading = {
-  args: {
-    children: (
-      <LoginForm
-        signinHeader="Sign in"
-        signUpText="New to ToolJet?"
-        signUpUrl="#"
-        signUpCTA="Create an account"
-        showSignup={true}
-        organizationName=""
-        emailLabel="Email"
-        emailPlaceholder="Enter your work email"
-        passwordLabel="Password"
-        passwordPlaceholder="Enter password"
-        showForgotPassword={true}
-        forgotPasswordUrl="/forgot-password"
-        forgotPasswordText="Forgot?"
-        signinButtonText="Signing in..."
-        orText="OR"
-        showOrSeparator={true}
-        emailValue="user@example.com"
-        passwordValue="password123"
-        isLoading={true}
-        disabled={true}
-      />
-    ),
-  },
-};
-
-// Signup Form Examples (using SetupAdminForm)
-export const WithSignupForm = {
-  args: {
-    children: (
-      <SetupAdminForm
-        headerText="Create your account"
-        nameLabel="Full Name"
-        namePlaceholder="Enter your full name"
-        emailLabel="Email"
-        emailPlaceholder="Enter your work email"
-        passwordLabel="Password"
-        passwordPlaceholder="Create a password"
-        buttonText="Create account"
-        termsText="By creating an account, you agree to our Terms of Service and Privacy Policy"
-        showTerms={true}
-      />
-    ),
-  },
-};
-
-export const WithSignupFormLoading = {
-  args: {
-    children: (
-      <SetupAdminForm
-        headerText="Create your account"
-        nameLabel="Full Name"
-        namePlaceholder="Enter your full name"
-        emailLabel="Email"
-        emailPlaceholder="Enter your work email"
-        passwordLabel="Password"
-        passwordPlaceholder="Create a password"
-        buttonText="Creating account..."
-        termsText="By creating an account, you agree to our Terms of Service and Privacy Policy"
-        showTerms={true}
-        nameValue="John Doe"
-        emailValue="john@example.com"
-        passwordValue="password123"
-        isLoading={true}
-        disabled={true}
-      />
-    ),
-  },
-};
-
-// Form with Validation Examples
-export const WithLoginFormValidation = {
-  args: {
-    children: (
-      <LoginForm
-        signinHeader="Sign in"
-        signUpText="New to ToolJet?"
-        signUpUrl="#"
-        signUpCTA="Create an account"
-        showSignup={true}
-        organizationName=""
-        emailLabel="Email"
-        emailPlaceholder="Enter your work email"
-        passwordLabel="Password"
-        passwordPlaceholder="Enter password"
-        showForgotPassword={true}
-        forgotPasswordUrl="/forgot-password"
-        forgotPasswordText="Forgot?"
-        signinButtonText="Sign in"
-        orText="OR"
-        showOrSeparator={true}
-        emailValue="invalid-email"
-        passwordValue="123"
-        emailValidationMessage={{
-          valid: false,
-          message: 'Please enter a valid email address',
-        }}
-        passwordValidationMessage={{
-          valid: false,
-          message: 'Password must be at least 8 characters',
-        }}
-      />
-    ),
-  },
-};
-
-export const WithSignupFormValidation = {
-  args: {
-    children: (
-      <SetupAdminForm
-        headerText="Create your account"
-        nameLabel="Full Name"
-        namePlaceholder="Enter your full name"
-        emailLabel="Email"
-        emailPlaceholder="Enter your work email"
-        passwordLabel="Password"
-        passwordPlaceholder="Create a password"
-        buttonText="Create account"
-        termsText="By creating an account, you agree to our Terms of Service and Privacy Policy"
-        showTerms={true}
-        nameValue=""
-        emailValue="invalid-email"
-        passwordValue="123"
-        nameValidationMessage={{
-          valid: false,
-          message: 'Name is required',
-        }}
-        emailValidationMessage={{
-          valid: false,
-          message: 'Please enter a valid email address',
-        }}
-        passwordValidationMessage={{
-          valid: false,
-          message: 'Password must be at least 8 characters',
-        }}
-      />
-    ),
-  },
-};
-
-// Empty State Example
-export const WithEmptyState = {
-  args: {
-    children: (
-      <div className="tw-flex tw-flex-col tw-gap-6 tw-items-center tw-text-center">
-        <div className="tw-flex tw-flex-col tw-gap-2">
-          <h1 className="tw-text-4xl tw-tracking-tight tw-font-medium tw-mb-0">Getting Started</h1>
-          <p className="tw-text-balance tw-text-sm tw-text-text-placeholder tw-mb-0">Welcome to your new workspace</p>
-        </div>
-        <div className="tw-w-full tw-max-w-xs">
-          <button
-            type="button"
-            className="tw-w-full tw-px-4 tw-py-3 tw-bg-button-primary tw-text-button-primary-text tw-rounded-md tw-text-sm tw-font-medium hover:tw-bg-button-primary-hover"
-          >
-            Get Started
-          </button>
-        </div>
-      </div>
-    ),
-  },
-};
-
 // Responsive Examples
 export const DesktopView = {
   parameters: {
@@ -349,52 +158,3 @@ export const MobileView = {
     ),
   },
 };
-
-// Responsive Signup Examples
-export const DesktopSignupView = {
-  parameters: {
-    viewport: {
-      defaultViewport: 'desktop',
-    },
-  },
-  args: {
-    children: (
-      <SetupAdminForm
-        headerText="Create your account"
-        nameLabel="Full Name"
-        namePlaceholder="Enter your full name"
-        emailLabel="Email"
-        emailPlaceholder="Enter your work email"
-        passwordLabel="Password"
-        passwordPlaceholder="Create a password"
-        buttonText="Create account"
-        termsText="By creating an account, you agree to our Terms of Service and Privacy Policy"
-        showTerms={true}
-      />
-    ),
-  },
-};
-
-export const TabletSignupView = {
-  parameters: {
-    viewport: {
-      defaultViewport: 'tablet',
-    },
-  },
-  args: {
-    children: (
-      <SetupAdminForm
-        headerText="Create your account"
-        nameLabel="Full Name"
-        namePlaceholder="Enter your full name"
-        emailLabel="Email"
-        emailPlaceholder="Enter your work email"
-        passwordLabel="Password"
-        passwordPlaceholder="Create a password"
-        buttonText="Create account"
-        termsText="By creating an account, you agree to our Terms of Service and Privacy Policy"
-        showTerms={true}
-      />
-    ),
-  },
-};
diff --git a/frontend/src/components/Auth/Stories/ForgotPasswordForm.stories.jsx b/frontend/src/components/Auth/Stories/ForgotPasswordForm.stories.jsx
index 5821647fcb..4966229e0a 100644
--- a/frontend/src/components/Auth/Stories/ForgotPasswordForm.stories.jsx
+++ b/frontend/src/components/Auth/Stories/ForgotPasswordForm.stories.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { ForgotPasswordForm } from '../ForgotPasswordForm';
 
 export default {
-  title: 'Auth/ForgotPasswordForm',
+  title: 'Auth/Blocks/ForgotPasswordForm',
   component: ForgotPasswordForm,
   parameters: {
     layout: 'centered',
@@ -94,22 +94,6 @@ export const Default = {
     showAdminBanner: true,
   },
 };
-
-export const CustomHeader = {
-  args: {
-    headerText: 'Reset Your Password',
-    signupText: 'New to ToolJet?',
-    signupUrl: '#',
-    signupCTA: 'Create an account',
-    showSignup: true,
-    emailLabel: 'Email address',
-    emailPlaceholder: 'Enter your work email',
-    buttonText: 'Send reset link',
-    adminContactText: 'Contact admin to reset your password',
-    showAdminBanner: true,
-  },
-};
-
 export const NoSignup = {
   args: {
     headerText: 'Forgot Password',
@@ -140,41 +124,7 @@ export const NoAdminBanner = {
   },
 };
 
-export const WithEmailValue = {
-  args: {
-    headerText: 'Forgot Password',
-    signupText: 'New to ToolJet?',
-    signupUrl: '#',
-    signupCTA: 'Create an account',
-    showSignup: true,
-    emailLabel: 'Email address',
-    emailPlaceholder: 'Enter email address',
-    buttonText: 'Send a reset link',
-    adminContactText: 'Contact admin to reset your password',
-    showAdminBanner: true,
-    emailValue: 'user@example.com',
-  },
-};
 
-export const WithValidationError = {
-  args: {
-    headerText: 'Forgot Password',
-    signupText: 'New to ToolJet?',
-    signupUrl: '#',
-    signupCTA: 'Create an account',
-    showSignup: true,
-    emailLabel: 'Email address',
-    emailPlaceholder: 'Enter email address',
-    buttonText: 'Send a reset link',
-    adminContactText: 'Contact admin to reset your password',
-    showAdminBanner: true,
-    emailValue: 'invalid-email',
-    emailValidationMessage: {
-      valid: false,
-      message: 'Please enter a valid email address',
-    },
-  },
-};
 
 export const Loading = {
   args: {
@@ -238,33 +188,3 @@ export const WithValidation = {
     },
   },
 };
-
-export const Minimal = {
-  args: {
-    headerText: 'Reset Password',
-    signupText: '',
-    signupUrl: '#',
-    signupCTA: '',
-    showSignup: false,
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your email',
-    buttonText: 'Reset',
-    adminContactText: '',
-    showAdminBanner: false,
-  },
-};
-
-export const CustomAdminText = {
-  args: {
-    headerText: 'Forgot Password',
-    signupText: 'New to ToolJet?',
-    signupUrl: '#',
-    signupCTA: 'Create an account',
-    showSignup: true,
-    emailLabel: 'Email address',
-    emailPlaceholder: 'Enter email address',
-    buttonText: 'Send a reset link',
-    adminContactText: 'Contact your system administrator for password reset assistance',
-    showAdminBanner: true,
-  },
-};
diff --git a/frontend/src/components/Auth/Stories/GitHubSigninButton.stories.jsx b/frontend/src/components/Auth/Stories/GitHubSigninButton.stories.jsx
index bd1ab5de7e..018b0a2623 100644
--- a/frontend/src/components/Auth/Stories/GitHubSigninButton.stories.jsx
+++ b/frontend/src/components/Auth/Stories/GitHubSigninButton.stories.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { GitHubSigninButton } from '../GitHubSigninButton';
 
 export default {
-  title: 'Auth/GitHubSigninButton',
+  title: 'Auth/Blocks/GitHubSigninButton',
   component: GitHubSigninButton,
   parameters: {
     layout: 'centered',
diff --git a/frontend/src/components/Auth/Stories/GoogleSigninButton.stories.jsx b/frontend/src/components/Auth/Stories/GoogleSigninButton.stories.jsx
index 99de75efea..ed666cb662 100644
--- a/frontend/src/components/Auth/Stories/GoogleSigninButton.stories.jsx
+++ b/frontend/src/components/Auth/Stories/GoogleSigninButton.stories.jsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { GoogleSigninButton } from '../GoogleSigninButton';
 
 export default {
-  title: 'Auth/GoogleSigninButton',
+  title: 'Auth/Blocks/GoogleSigninButton',
   component: GoogleSigninButton,
   parameters: {
     layout: 'centered',
diff --git a/frontend/src/components/Auth/Stories/LoginFlow.stories.jsx b/frontend/src/components/Auth/Stories/LoginFlow.stories.jsx
new file mode 100644
index 0000000000..e889070538
--- /dev/null
+++ b/frontend/src/components/Auth/Stories/LoginFlow.stories.jsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import { AuthLayout } from '../AuthLayout';
+import { LoginForm } from '../LoginForm';
+import { GoogleSigninButton } from '../GoogleSigninButton';
+import { GitHubSigninButton } from '../GitHubSigninButton';
+
+export default {
+  title: 'Auth/Flows/Login',
+  component: AuthLayout,
+  parameters: {
+    layout: 'fullscreen',
+    viewport: {
+      viewports: {
+        desktop: {
+          name: 'Desktop',
+          styles: {
+            width: '1440px',
+            height: '900px',
+          },
+        },
+        tablet: {
+          name: 'Tablet',
+          styles: {
+            width: '768px',
+            height: '1024px',
+          },
+        },
+        mobile: {
+          name: 'Mobile',
+          styles: {
+            width: '375px',
+            height: '667px',
+          },
+        },
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    children: {
+      control: false,
+      description: 'Content to be displayed within the auth layout',
+    },
+  },
+};
+
+// Login with Organization
+export const LoginWithOrganization = {
+  args: {
+    children: (
+      <div className="tw-flex tw-flex-col tw-gap-6 tw-w-full">
+        <LoginForm
+          signinHeader="Sign in"
+          signUpText="New to ToolJet?"
+          signUpUrl="#"
+          signUpCTA="Create an account"
+          showSignup={true}
+          organizationName=""
+          emailLabel="Email"
+          emailPlaceholder="Enter your work email"
+          passwordLabel="Password"
+          passwordPlaceholder="Enter password"
+          showForgotPassword={true}
+          forgotPasswordUrl="/forgot-password"
+          forgotPasswordText="Forgot?"
+          signinButtonText="Sign in"
+          orText="OR"
+          showOrSeparator={true}
+          emailValue=""
+          passwordValue=""
+          onEmailChange={() => {}}
+          onPasswordChange={() => {}}
+          onSubmit={() => {}}
+          isLoading={false}
+          disabled={false}
+        />
+
+        {/* SSO Buttons */}
+        <div className="tw-flex tw-flex-col tw-gap-3">
+          <GoogleSigninButton
+            onClick={() => console.log('Google sign in clicked')}
+            text="Continue with"
+            dataCy="google-signin-button"
+          />
+          <GitHubSigninButton
+            onClick={() => console.log('GitHub sign in clicked')}
+            text="Continue with"
+            dataCy="github-signin-button"
+          />
+        </div>
+      </div>
+    ),
+  },
+};
diff --git a/frontend/src/components/Auth/Stories/LoginForm.stories.jsx b/frontend/src/components/Auth/Stories/LoginForm.stories.jsx
index 46f15bfe0f..111c4a315a 100644
--- a/frontend/src/components/Auth/Stories/LoginForm.stories.jsx
+++ b/frontend/src/components/Auth/Stories/LoginForm.stories.jsx
@@ -1,7 +1,7 @@
 import { LoginForm } from '../LoginForm';
 
 export default {
-  title: 'Auth/LoginForm',
+  title: 'Auth/Blocks/LoginForm',
   component: LoginForm,
   parameters: {
     layout: 'centered',
diff --git a/frontend/src/components/Auth/Stories/LoginPage.stories.jsx b/frontend/src/components/Auth/Stories/LoginPage.stories.jsx
index 54584e291b..0a047a6f6b 100644
--- a/frontend/src/components/Auth/Stories/LoginPage.stories.jsx
+++ b/frontend/src/components/Auth/Stories/LoginPage.stories.jsx
@@ -1,100 +1,56 @@
-import React from "react";
-import { AuthLayout } from "../AuthLayout";
-import { LoginForm } from "../LoginForm";
-import { GoogleSigninButton } from "../GoogleSigninButton";
-import { GitHubSigninButton } from "../GitHubSigninButton";
+import React from 'react';
+import { AuthLayout } from '../AuthLayout';
+import { LoginForm } from '../LoginForm';
+import { GoogleSigninButton } from '../GoogleSigninButton';
+import { GitHubSigninButton } from '../GitHubSigninButton';
 
 export default {
-  title: "Auth/LoginPage",
+  title: 'Auth/Blocks/LoginPage',
   component: AuthLayout,
   parameters: {
-    layout: "fullscreen",
+    layout: 'fullscreen',
     viewport: {
       viewports: {
         desktop: {
-          name: "Desktop",
+          name: 'Desktop',
           styles: {
-            width: "1440px",
-            height: "900px",
+            width: '1440px',
+            height: '900px',
           },
         },
         tablet: {
-          name: "Tablet",
+          name: 'Tablet',
           styles: {
-            width: "768px",
-            height: "1024px",
+            width: '768px',
+            height: '1024px',
           },
         },
         mobile: {
-          name: "Mobile",
+          name: 'Mobile',
           styles: {
-            width: "375px",
-            height: "667px",
+            width: '375px',
+            height: '667px',
           },
         },
       },
     },
   },
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {
     children: {
       control: false,
-      description: "Content to be displayed within the auth layout",
+      description: 'Content to be displayed within the auth layout',
     },
   },
 };
 
-// Complete Login Page with SSO
-export const CompleteLoginPage = {
-  args: {
-    children: (
-      <div className="tw-flex tw-flex-col tw-gap-6 tw-w-full">
-        <LoginForm
-          signinHeader="Sign in"
-          signUpText="New to ToolJet?"
-          signUpUrl="#"
-          signUpCTA="Create an account"
-          showSignup={true}
-          organizationName=""
-          emailLabel="Email"
-          emailPlaceholder="Enter your work email"
-          passwordLabel="Password"
-          passwordPlaceholder="Enter password"
-          showForgotPassword={true}
-          forgotPasswordUrl="/forgot-password"
-          forgotPasswordText="Forgot?"
-          signinButtonText="Sign in"
-          orText="OR"
-          showOrSeparator={true}
-          emailValue=""
-          passwordValue=""
-          onEmailChange={() => {}}
-          onPasswordChange={() => {}}
-          onSubmit={() => {}}
-          isLoading={false}
-          disabled={false}
-        />
-
-        {/* SSO Buttons */}
-        <div className="tw-flex tw-flex-col tw-gap-3">
-          <GoogleSigninButton
-            onClick={() => console.log("Google sign in clicked")}
-            text="Continue with"
-            dataCy="google-signin-button"
-          />
-          <GitHubSigninButton
-            onClick={() => console.log("GitHub sign in clicked")}
-            text="Continue with"
-            dataCy="github-signin-button"
-          />
-        </div>
-      </div>
-    ),
-  },
-};
-
 // Login Page with Organization
 export const LoginPageWithOrganization = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'desktop',
+    },
+  },
   args: {
     children: (
       <div className="tw-flex tw-flex-col tw-gap-6 tw-w-full">
@@ -127,12 +83,12 @@ export const LoginPageWithOrganization = {
         {/* SSO Buttons */}
         <div className="tw-flex tw-flex-col tw-gap-3">
           <GoogleSigninButton
-            onClick={() => console.log("Google sign in clicked")}
+            onClick={() => console.log('Google sign in clicked')}
             text="Continue with"
             dataCy="google-signin-button"
           />
           <GitHubSigninButton
-            onClick={() => console.log("GitHub sign in clicked")}
+            onClick={() => console.log('GitHub sign in clicked')}
             text="Continue with"
             dataCy="github-signin-button"
           />
@@ -141,36 +97,3 @@ export const LoginPageWithOrganization = {
     ),
   },
 };
-
-// Login Page without SSO
-export const LoginPageWithoutSSO = {
-  args: {
-    children: (
-      <LoginForm
-        signinHeader="Sign in"
-        signUpText="New to ToolJet?"
-        signUpUrl="#"
-        signUpCTA="Create an account"
-        showSignup={true}
-        organizationName=""
-        emailLabel="Email"
-        emailPlaceholder="Enter your work email"
-        passwordLabel="Password"
-        passwordPlaceholder="Enter password"
-        showForgotPassword={true}
-        forgotPasswordUrl="/forgot-password"
-        forgotPasswordText="Forgot?"
-        signinButtonText="Sign in"
-        orText="OR"
-        showOrSeparator={false}
-        emailValue=""
-        passwordValue=""
-        onEmailChange={() => {}}
-        onPasswordChange={() => {}}
-        onSubmit={() => {}}
-        isLoading={false}
-        disabled={false}
-      />
-    ),
-  },
-};

From 5c6d1e63c17e21a9cc7be5c54547752dbb054c65 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Mon, 29 Sep 2025 16:04:09 +0530
Subject: [PATCH 066/157] Enhance Auth components with new stories and updates

- Updated `ForgotPasswordForm` to utilize the new `InlineInfoCompound` component for displaying admin contact information, improving visual consistency.
- Refactored `ForgotPasswordInfoScreen` story title to follow the 'Auth/Blocks' naming convention for better organization.
- Added new `ForgotPasswordFlow` and `ForgotPasswordInfoFlow` stories to showcase the complete forgot password process in Storybook.
- Cleaned up unused exports in `ForgotPasswordForm` stories to streamline the codebase.
---
 .../components/Auth/AuthCenteredLayout.jsx    |  3 +-
 .../components/Auth/ForgotPasswordForm.jsx    | 32 ++-----
 .../Stories/ForgotPasswordFlow.stories.jsx    | 92 +++++++++++++++++++
 .../Stories/ForgotPasswordForm.stories.jsx    |  2 -
 .../ForgotPasswordInfoScreen.stories.jsx      |  2 +-
 5 files changed, 103 insertions(+), 28 deletions(-)
 create mode 100644 frontend/src/components/Auth/Stories/ForgotPasswordFlow.stories.jsx

diff --git a/frontend/src/components/Auth/AuthCenteredLayout.jsx b/frontend/src/components/Auth/AuthCenteredLayout.jsx
index b62a606866..d0e7b9e5de 100644
--- a/frontend/src/components/Auth/AuthCenteredLayout.jsx
+++ b/frontend/src/components/Auth/AuthCenteredLayout.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 export const AuthCenteredLayout = ({ children }) => {
   return (
@@ -7,4 +7,3 @@ export const AuthCenteredLayout = ({ children }) => {
     </div>
   );
 };
-
diff --git a/frontend/src/components/Auth/ForgotPasswordForm.jsx b/frontend/src/components/Auth/ForgotPasswordForm.jsx
index ca7b4f59fe..b345e1653c 100644
--- a/frontend/src/components/Auth/ForgotPasswordForm.jsx
+++ b/frontend/src/components/Auth/ForgotPasswordForm.jsx
@@ -1,13 +1,14 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
-import { CornerDownLeft } from 'lucide-react';
+import { CornerDownLeft, Info } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { FormWrapper } from '@/components/Auth/FormWrapper';
+import { InlineInfoCompound } from '@/components/ui/InlineInfo/InlineInfo';
 
 export function ForgotPasswordForm({ className, ...props }) {
   const {
@@ -105,28 +106,13 @@ export function ForgotPasswordForm({ className, ...props }) {
           )}
 
           {showAdminBanner && (
-            <div className="tw-flex tw-items-center tw-gap-2 tw-p-3 tw-bg-background-subtle tw-border tw-border-border-weak tw-rounded-md">
-              <div className="tw-w-6 tw-h-6 tw-flex tw-items-center tw-justify-center">
-                <svg
-                  width="16"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="tw-text-text-brand"
-                  aria-label="Information icon"
-                >
-                  <title>Information</title>
-                  <path
-                    d="M8 1L9.5 2.5L8 4L6.5 2.5L8 1ZM8 12L6.5 13.5L8 15L9.5 13.5L8 12ZM1 8L2.5 6.5L4 8L2.5 9.5L1 8ZM12 8L13.5 9.5L15 8L13.5 6.5L12 8Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </div>
-              <p className="tw-text-sm tw-text-text-placeholder tw-mb-0" data-cy="admin-contact-banner">
-                {adminContactText}
-              </p>
-            </div>
+            <InlineInfoCompound
+              type="info"
+              background="state-specific"
+              icon={Info}
+              description={adminContactText}
+              data-cy="admin-contact-banner"
+            />
           )}
         </div>
       </form>
diff --git a/frontend/src/components/Auth/Stories/ForgotPasswordFlow.stories.jsx b/frontend/src/components/Auth/Stories/ForgotPasswordFlow.stories.jsx
new file mode 100644
index 0000000000..3d38cd19df
--- /dev/null
+++ b/frontend/src/components/Auth/Stories/ForgotPasswordFlow.stories.jsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import { AuthLayout } from '../AuthLayout';
+import { AuthCenteredLayout } from '../AuthCenteredLayout';
+import { ForgotPasswordForm } from '../ForgotPasswordForm';
+import { ForgotPasswordInfoScreen } from '../ForgotPasswordInfoScreen';
+
+export default {
+  title: 'Auth/Flows/ForgotPassword',
+  component: AuthLayout,
+  parameters: {
+    layout: 'fullscreen',
+    viewport: {
+      viewports: {
+        desktop: {
+          name: 'Desktop',
+          styles: {
+            width: '1440px',
+            height: '900px',
+          },
+        },
+        tablet: {
+          name: 'Tablet',
+          styles: {
+            width: '768px',
+            height: '1024px',
+          },
+        },
+        mobile: {
+          name: 'Mobile',
+          styles: {
+            width: '375px',
+            height: '667px',
+          },
+        },
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    children: {
+      control: false,
+      description: 'Content to be displayed within the auth layout',
+    },
+  },
+};
+
+// Forgot Password Flow - Form
+export const ForgotPasswordFlow = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'desktop',
+    },
+  },
+  args: {
+    children: (
+      <ForgotPasswordForm
+        headerText="Forgot Password"
+        signupText="New to ToolJet?"
+        signupUrl="#"
+        signupCTA="Create an account"
+        showSignup={true}
+        emailLabel="Email address"
+        emailPlaceholder="Enter email address"
+        buttonText="Send a reset link"
+        adminContactText="Contact admin to reset your password"
+        showAdminBanner={true}
+      />
+    ),
+  },
+};
+
+// Forgot Password Flow - Info Screen
+export const ForgotPasswordInfoFlow = {
+  render: (args) => (
+    <AuthCenteredLayout {...args}>
+      <ForgotPasswordInfoScreen
+        headerText="Check your mail"
+        messageText="We've sent a password reset link to"
+        email="user@example.com"
+        infoText="Did not receive an email? Check your spam folder!"
+        showInfo={true}
+        buttonText="Back to login"
+        showSeparator={true}
+      />
+    </AuthCenteredLayout>
+  ),
+  parameters: {
+    viewport: {
+      defaultViewport: 'desktop',
+    },
+  },
+};
diff --git a/frontend/src/components/Auth/Stories/ForgotPasswordForm.stories.jsx b/frontend/src/components/Auth/Stories/ForgotPasswordForm.stories.jsx
index 4966229e0a..7b8451d239 100644
--- a/frontend/src/components/Auth/Stories/ForgotPasswordForm.stories.jsx
+++ b/frontend/src/components/Auth/Stories/ForgotPasswordForm.stories.jsx
@@ -124,8 +124,6 @@ export const NoAdminBanner = {
   },
 };
 
-
-
 export const Loading = {
   args: {
     headerText: 'Forgot Password',
diff --git a/frontend/src/components/Auth/Stories/ForgotPasswordInfoScreen.stories.jsx b/frontend/src/components/Auth/Stories/ForgotPasswordInfoScreen.stories.jsx
index a7c9d145f9..782b1e4a42 100644
--- a/frontend/src/components/Auth/Stories/ForgotPasswordInfoScreen.stories.jsx
+++ b/frontend/src/components/Auth/Stories/ForgotPasswordInfoScreen.stories.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { ForgotPasswordInfoScreen } from '../ForgotPasswordInfoScreen';
 
 export default {
-  title: 'Auth/ForgotPasswordInfoScreen',
+  title: 'Auth/Blocks/ForgotPasswordInfoScreen',
   component: ForgotPasswordInfoScreen,
   parameters: {
     layout: 'centered',

From aad891d0f232cbce1790964af7a88a8dea085287 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Mon, 29 Sep 2025 16:51:59 +0530
Subject: [PATCH 067/157] Add new authentication forms and update Storybook
 organization

- Introduced `InviteSignupForm`, `JoinWorkspaceForm`, and `SignInWithPrefilledEmail` components for enhanced user authentication flows.
- Updated Storybook stories to include new `TeamInviteFlow`, showcasing the signup and workspace joining processes.
- Refactored existing story titles to follow the 'Auth/Blocks' naming convention for improved organization and clarity.
---
 .../src/components/Auth/InviteSignupForm.jsx  | 158 +++++++++++++++++
 .../src/components/Auth/JoinWorkspaceForm.jsx | 166 ++++++++++++++++++
 .../Auth/SignInWithPrefilledEmail.jsx         | 166 ++++++++++++++++++
 .../Auth/Stories/SetupAdminForm.stories.jsx   |   2 +-
 .../Stories/SignupSuccessInfo.stories.jsx     |   2 +-
 .../Auth/Stories/TeamInviteFlow.stories.jsx   |  92 ++++++++++
 6 files changed, 584 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/Auth/InviteSignupForm.jsx
 create mode 100644 frontend/src/components/Auth/JoinWorkspaceForm.jsx
 create mode 100644 frontend/src/components/Auth/SignInWithPrefilledEmail.jsx
 create mode 100644 frontend/src/components/Auth/Stories/TeamInviteFlow.stories.jsx

diff --git a/frontend/src/components/Auth/InviteSignupForm.jsx b/frontend/src/components/Auth/InviteSignupForm.jsx
new file mode 100644
index 0000000000..9cef60223a
--- /dev/null
+++ b/frontend/src/components/Auth/InviteSignupForm.jsx
@@ -0,0 +1,158 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { CornerDownLeft } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { FormWrapper } from '@/components/Auth/FormWrapper';
+
+export function InviteSignupForm({ className, ...props }) {
+  const {
+    // Header section
+    headerText,
+    descriptionText,
+
+    // Form fields
+    emailLabel,
+    emailPlaceholder,
+    emailValue,
+    emailDisabled,
+
+    passwordLabel,
+    passwordPlaceholder,
+    passwordValue,
+    onPasswordChange,
+    passwordValidation,
+    passwordValidationMessage,
+
+    // Button
+    buttonText,
+
+    // Form functionality
+    onSubmit,
+
+    // Validation and state
+    isLoading,
+    disabled,
+  } = props;
+
+  return (
+    <FormWrapper>
+      <form className={cn('tw-flex tw-flex-col tw-gap-6', className)} onSubmit={onSubmit} {...props}>
+        <div className="tw-flex tw-flex-col tw-gap-2">
+          <h1 className="tw-text-2xl tw-font-semibold tw-text-text-default">{headerText}</h1>
+          {descriptionText && <p className="tw-text-sm tw-text-text-muted">{descriptionText}</p>}
+        </div>
+
+        <div className="tw-grid tw-gap-4">
+          <div className="tw-grid tw-gap-0.5">
+            <Label htmlFor="email" size="large">
+              {emailLabel}
+            </Label>
+            <Input
+              type="email"
+              placeholder={emailPlaceholder}
+              value={emailValue}
+              disabled={emailDisabled || disabled}
+              required
+              size="large"
+            />
+          </div>
+
+          <div className="tw-grid tw-gap-0.5">
+            <Label htmlFor="password" size="large">
+              {passwordLabel}
+            </Label>
+            <Input
+              type="password"
+              placeholder={passwordPlaceholder}
+              value={passwordValue}
+              onChange={onPasswordChange}
+              disabled={disabled}
+              showEncryption={false}
+              required
+              validation={passwordValidation}
+              isValidatedMessages={passwordValidationMessage}
+              size="large"
+            />
+          </div>
+
+          <Button
+            size="large"
+            type="submit"
+            className="tw-w-fit"
+            disabled={disabled || isLoading}
+            isLoading={isLoading}
+          >
+            {buttonText}
+            <CornerDownLeft width="16" height="16" />
+          </Button>
+        </div>
+      </form>
+    </FormWrapper>
+  );
+}
+
+InviteSignupForm.propTypes = {
+  className: PropTypes.string,
+
+  // Header section
+  headerText: PropTypes.string,
+  descriptionText: PropTypes.string,
+
+  // Form fields
+  emailLabel: PropTypes.string,
+  emailPlaceholder: PropTypes.string,
+  emailValue: PropTypes.string,
+  emailDisabled: PropTypes.bool,
+
+  passwordLabel: PropTypes.string,
+  passwordPlaceholder: PropTypes.string,
+  passwordValue: PropTypes.string,
+  onPasswordChange: PropTypes.func,
+  passwordValidation: PropTypes.func,
+  passwordValidationMessage: PropTypes.object,
+
+  // Button
+  buttonText: PropTypes.string,
+
+  // Form functionality
+  onSubmit: PropTypes.func,
+
+  // Validation and state
+  isLoading: PropTypes.bool,
+  disabled: PropTypes.bool,
+};
+
+InviteSignupForm.defaultProps = {
+  className: '',
+
+  // Header section
+  headerText: 'Sign up',
+  descriptionText: '',
+
+  // Form fields
+  emailLabel: 'Email',
+  emailPlaceholder: 'Enter your email',
+  emailValue: '',
+  emailDisabled: true,
+
+  passwordLabel: 'Password',
+  passwordPlaceholder: 'Create password',
+  passwordValue: '',
+  onPasswordChange: undefined,
+  passwordValidation: undefined,
+  passwordValidationMessage: undefined,
+
+  // Button
+  buttonText: 'Create account',
+
+  // Form functionality
+  onSubmit: undefined,
+
+  // Validation and state
+  isLoading: false,
+  disabled: false,
+};
diff --git a/frontend/src/components/Auth/JoinWorkspaceForm.jsx b/frontend/src/components/Auth/JoinWorkspaceForm.jsx
new file mode 100644
index 0000000000..adf297baa5
--- /dev/null
+++ b/frontend/src/components/Auth/JoinWorkspaceForm.jsx
@@ -0,0 +1,166 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { CornerDownLeft } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { FormWrapper } from '@/components/Auth/FormWrapper';
+
+export function JoinWorkspaceForm({ className, ...props }) {
+  const {
+    // Header section
+    headerText,
+    descriptionText,
+
+    // Form fields
+    nameLabel,
+    namePlaceholder,
+    nameValue,
+    onNameChange,
+    nameValidation,
+    nameValidationMessage,
+
+    emailLabel,
+    emailPlaceholder,
+    emailValue,
+    onEmailChange,
+    emailValidation,
+    emailValidationMessage,
+
+    // Button
+    buttonText,
+
+    // Form functionality
+    onSubmit,
+
+    // Validation and state
+    isLoading,
+    disabled,
+  } = props;
+
+  return (
+    <FormWrapper>
+      <form className={cn('tw-flex tw-flex-col tw-gap-6', className)} onSubmit={onSubmit} {...props}>
+        <div className="tw-flex tw-flex-col tw-gap-2">
+          <h1 className="tw-text-2xl tw-font-semibold tw-text-text-default">{headerText}</h1>
+          {descriptionText && <p className="tw-text-sm tw-text-text-muted">{descriptionText}</p>}
+        </div>
+
+        <div className="tw-grid tw-gap-4">
+          <div className="tw-grid tw-gap-0.5">
+            <Label htmlFor="name" size="large">
+              {nameLabel}
+            </Label>
+            <Input
+              type="text"
+              placeholder={namePlaceholder}
+              value={nameValue}
+              onChange={onNameChange}
+              disabled={disabled}
+              required
+              validation={nameValidation}
+              isValidatedMessages={nameValidationMessage}
+              size="large"
+            />
+          </div>
+
+          <div className="tw-grid tw-gap-0.5">
+            <Label htmlFor="email" size="large">
+              {emailLabel}
+            </Label>
+            <Input
+              type="email"
+              placeholder={emailPlaceholder}
+              value={emailValue}
+              onChange={onEmailChange}
+              disabled={disabled}
+              required
+              validation={emailValidation}
+              isValidatedMessages={emailValidationMessage}
+              size="large"
+            />
+          </div>
+
+          <Button
+            size="large"
+            type="submit"
+            className="tw-w-fit"
+            disabled={disabled || isLoading}
+            isLoading={isLoading}
+          >
+            {buttonText}
+            <CornerDownLeft width="16" height="16" />
+          </Button>
+        </div>
+      </form>
+    </FormWrapper>
+  );
+}
+
+JoinWorkspaceForm.propTypes = {
+  className: PropTypes.string,
+
+  // Header section
+  headerText: PropTypes.string,
+  descriptionText: PropTypes.string,
+
+  // Form fields
+  nameLabel: PropTypes.string,
+  namePlaceholder: PropTypes.string,
+  nameValue: PropTypes.string,
+  onNameChange: PropTypes.func,
+  nameValidation: PropTypes.func,
+  nameValidationMessage: PropTypes.object,
+
+  emailLabel: PropTypes.string,
+  emailPlaceholder: PropTypes.string,
+  emailValue: PropTypes.string,
+  onEmailChange: PropTypes.func,
+  emailValidation: PropTypes.func,
+  emailValidationMessage: PropTypes.object,
+
+  // Button
+  buttonText: PropTypes.string,
+
+  // Form functionality
+  onSubmit: PropTypes.func,
+
+  // Validation and state
+  isLoading: PropTypes.bool,
+  disabled: PropTypes.bool,
+};
+
+JoinWorkspaceForm.defaultProps = {
+  className: '',
+
+  // Header section
+  headerText: 'Join workspace',
+  descriptionText: '',
+
+  // Form fields
+  nameLabel: 'Name',
+  namePlaceholder: 'Enter your name',
+  nameValue: '',
+  onNameChange: undefined,
+  nameValidation: undefined,
+  nameValidationMessage: undefined,
+
+  emailLabel: 'Email',
+  emailPlaceholder: 'Enter your email',
+  emailValue: '',
+  onEmailChange: undefined,
+  emailValidation: undefined,
+  emailValidationMessage: undefined,
+
+  // Button
+  buttonText: 'Accept Invite',
+
+  // Form functionality
+  onSubmit: undefined,
+
+  // Validation and state
+  isLoading: false,
+  disabled: false,
+};
diff --git a/frontend/src/components/Auth/SignInWithPrefilledEmail.jsx b/frontend/src/components/Auth/SignInWithPrefilledEmail.jsx
new file mode 100644
index 0000000000..b22ef541f3
--- /dev/null
+++ b/frontend/src/components/Auth/SignInWithPrefilledEmail.jsx
@@ -0,0 +1,166 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import { CornerDownLeft } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { FormWrapper } from "@/components/Auth/FormWrapper";
+
+export function InviteSignupForm({ className, ...props }) {
+  const {
+    // Header section
+    headerText,
+    descriptionText,
+
+    // Form fields
+    emailLabel,
+    emailPlaceholder,
+    emailValue,
+    emailDisabled,
+
+    passwordLabel,
+    passwordPlaceholder,
+    passwordValue,
+    onPasswordChange,
+    passwordValidation,
+    passwordValidationMessage,
+
+    // Button
+    buttonText,
+
+    // Form functionality
+    onSubmit,
+
+    // Validation and state
+    isLoading,
+    disabled,
+  } = props;
+
+  return (
+    <FormWrapper>
+      <form
+        className={cn("tw-flex tw-flex-col tw-gap-6", className)}
+        onSubmit={onSubmit}
+        {...props}
+      >
+        <div className="tw-flex tw-flex-col tw-gap-2">
+          <h1 className="tw-text-2xl tw-font-semibold tw-text-text-default">
+            {headerText}
+          </h1>
+          {descriptionText && (
+            <p className="tw-text-sm tw-text-text-muted">{descriptionText}</p>
+          )}
+        </div>
+
+        <div className="tw-grid tw-gap-4">
+          <div className="tw-grid tw-gap-0.5">
+            <Label htmlFor="email" size="large">
+              {emailLabel}
+            </Label>
+            <Input
+              type="email"
+              placeholder={emailPlaceholder}
+              value={emailValue}
+              disabled={emailDisabled || disabled}
+              required
+              size="large"
+            />
+          </div>
+
+          <div className="tw-grid tw-gap-0.5">
+            <Label htmlFor="password" size="large">
+              {passwordLabel}
+            </Label>
+            <Input
+              type="password"
+              placeholder={passwordPlaceholder}
+              value={passwordValue}
+              onChange={onPasswordChange}
+              disabled={disabled}
+              showEncryption={false}
+              required
+              validation={passwordValidation}
+              isValidatedMessages={passwordValidationMessage}
+              size="large"
+            />
+          </div>
+
+          <Button
+            size="large"
+            type="submit"
+            className="tw-w-fit"
+            disabled={disabled || isLoading}
+            isLoading={isLoading}
+          >
+            {buttonText}
+            <CornerDownLeft width="16" height="16" />
+          </Button>
+        </div>
+      </form>
+    </FormWrapper>
+  );
+}
+
+InviteSignupForm.propTypes = {
+  className: PropTypes.string,
+
+  // Header section
+  headerText: PropTypes.string,
+  descriptionText: PropTypes.string,
+
+  // Form fields
+  emailLabel: PropTypes.string,
+  emailPlaceholder: PropTypes.string,
+  emailValue: PropTypes.string,
+  emailDisabled: PropTypes.bool,
+
+  passwordLabel: PropTypes.string,
+  passwordPlaceholder: PropTypes.string,
+  passwordValue: PropTypes.string,
+  onPasswordChange: PropTypes.func,
+  passwordValidation: PropTypes.func,
+  passwordValidationMessage: PropTypes.object,
+
+  // Button
+  buttonText: PropTypes.string,
+
+  // Form functionality
+  onSubmit: PropTypes.func,
+
+  // Validation and state
+  isLoading: PropTypes.bool,
+  disabled: PropTypes.bool,
+};
+
+InviteSignupForm.defaultProps = {
+  className: "",
+
+  // Header section
+  headerText: "Sign in",
+  descriptionText: "",
+
+  // Form fields
+  emailLabel: "Email",
+  emailPlaceholder: "Enter your email",
+  emailValue: "",
+  emailDisabled: true,
+
+  passwordLabel: "Password",
+  passwordPlaceholder: "Enter password",
+  passwordValue: "",
+  onPasswordChange: undefined,
+  passwordValidation: undefined,
+  passwordValidationMessage: undefined,
+
+  // Button
+  buttonText: "Sign in",
+
+  // Form functionality
+  onSubmit: undefined,
+
+  // Validation and state
+  isLoading: false,
+  disabled: false,
+};
diff --git a/frontend/src/components/Auth/Stories/SetupAdminForm.stories.jsx b/frontend/src/components/Auth/Stories/SetupAdminForm.stories.jsx
index 818eb38c5b..cc29048677 100644
--- a/frontend/src/components/Auth/Stories/SetupAdminForm.stories.jsx
+++ b/frontend/src/components/Auth/Stories/SetupAdminForm.stories.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { SetupAdminForm } from '../SetupAdminForm';
 
 export default {
-  title: 'Auth/SetupAdminForm',
+  title: 'Auth/Blocks/SetupAdminForm',
   component: SetupAdminForm,
   parameters: {
     layout: 'centered',
diff --git a/frontend/src/components/Auth/Stories/SignupSuccessInfo.stories.jsx b/frontend/src/components/Auth/Stories/SignupSuccessInfo.stories.jsx
index 239b5b11d3..50371173a4 100644
--- a/frontend/src/components/Auth/Stories/SignupSuccessInfo.stories.jsx
+++ b/frontend/src/components/Auth/Stories/SignupSuccessInfo.stories.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { SignupSuccessInfo } from '../SignupSuccessInfo';
 
 export default {
-  title: 'Auth/SignupSuccessInfo',
+  title: 'Auth/Blocks/SignupSuccessInfo',
   component: SignupSuccessInfo,
   parameters: {
     layout: 'centered',
diff --git a/frontend/src/components/Auth/Stories/TeamInviteFlow.stories.jsx b/frontend/src/components/Auth/Stories/TeamInviteFlow.stories.jsx
new file mode 100644
index 0000000000..41c34bcea8
--- /dev/null
+++ b/frontend/src/components/Auth/Stories/TeamInviteFlow.stories.jsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import { AuthLayout } from '../AuthLayout';
+import { InviteSignupForm } from '../InviteSignupForm';
+import { JoinWorkspaceForm } from '../JoinWorkspaceForm';
+
+export default {
+  title: 'Auth/Flows/TeamInvite',
+  component: AuthLayout,
+  parameters: {
+    layout: 'fullscreen',
+    viewport: {
+      viewports: {
+        desktop: {
+          name: 'Desktop',
+          styles: {
+            width: '1440px',
+            height: '900px',
+          },
+        },
+        tablet: {
+          name: 'Tablet',
+          styles: {
+            width: '768px',
+            height: '1024px',
+          },
+        },
+        mobile: {
+          name: 'Mobile',
+          styles: {
+            width: '375px',
+            height: '667px',
+          },
+        },
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    children: {
+      control: false,
+      description: 'Content to be displayed within the auth layout',
+    },
+  },
+};
+
+// Team Invite Flow - Step 1: Invite Signup
+export const TeamInviteSignupFlow = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'desktop',
+    },
+  },
+  args: {
+    children: (
+      <InviteSignupForm
+        headerText="Sign up"
+        descriptionText="You have been invited to join a workspace. Please create your account to continue."
+        emailLabel="Email"
+        emailPlaceholder="Enter your email"
+        emailValue="nithin@dev.io"
+        emailDisabled={true}
+        passwordLabel="Password"
+        passwordPlaceholder="Create password"
+        buttonText="Create account"
+      />
+    ),
+  },
+};
+
+// Team Invite Flow - Step 2: Join Workspace
+export const TeamInviteJoinWorkspaceFlow = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'desktop',
+    },
+  },
+  args: {
+    children: (
+      <JoinWorkspaceForm
+        headerText="Join Dev's workspace"
+        descriptionText="You are invited to a workspace Dev's workspace. Accept the invite to join the workspace."
+        nameLabel="Name"
+        namePlaceholder="Enter your name"
+        nameValue="Nithin"
+        emailLabel="Email"
+        emailPlaceholder="Enter your email"
+        emailValue="nithin@dev.io"
+        buttonText="Accept Invite"
+      />
+    ),
+  },
+};

From fbb4f545c2c679db749c91a1408edf7d6aa1e754 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Tue, 30 Sep 2025 13:57:54 +0530
Subject: [PATCH 068/157] Add SignupFormWithSSO component and update related
 stories

- Introduced `SignupFormWithSSO` component for enhanced user signup experience with support for Single Sign-On (SSO) options.
- Updated `InviteSignupForm` and `JoinWorkspaceForm` components to improve header styling and layout consistency.
- Created new Storybook stories for `SignupFormWithSSO` and related signup flows, showcasing various configurations and states.
- Organized stories under 'Auth/Flows' and 'Auth/Blocks' for better clarity and structure in the Storybook.
---
 .../src/components/Auth/InviteSignupForm.jsx  |  11 +-
 .../src/components/Auth/JoinWorkspaceForm.jsx |  11 +-
 .../src/components/Auth/SignupFormWithSSO.jsx | 291 ++++++++++++++++++
 .../Auth/Stories/SignupFlow.stories.jsx       | 145 +++++++++
 .../Stories/SignupFormWithSSO.stories.jsx     | 280 +++++++++++++++++
 5 files changed, 732 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/components/Auth/SignupFormWithSSO.jsx
 create mode 100644 frontend/src/components/Auth/Stories/SignupFlow.stories.jsx
 create mode 100644 frontend/src/components/Auth/Stories/SignupFormWithSSO.stories.jsx

diff --git a/frontend/src/components/Auth/InviteSignupForm.jsx b/frontend/src/components/Auth/InviteSignupForm.jsx
index 9cef60223a..17bdd508ff 100644
--- a/frontend/src/components/Auth/InviteSignupForm.jsx
+++ b/frontend/src/components/Auth/InviteSignupForm.jsx
@@ -41,9 +41,14 @@ export function InviteSignupForm({ className, ...props }) {
   return (
     <FormWrapper>
       <form className={cn('tw-flex tw-flex-col tw-gap-6', className)} onSubmit={onSubmit} {...props}>
-        <div className="tw-flex tw-flex-col tw-gap-2">
-          <h1 className="tw-text-2xl tw-font-semibold tw-text-text-default">{headerText}</h1>
-          {descriptionText && <p className="tw-text-sm tw-text-text-muted">{descriptionText}</p>}
+        <div className="tw-flex tw-flex-col tw-gap-2 tw-min-w-20">
+          <h1 className="tw-text-4xl tw-tracking-tight tw-font-medium tw-mb-0" data-cy="">
+            {headerText}
+          </h1>
+
+          {descriptionText && (
+            <p className="tw-text-balance tw-text-sm tw-text-text-placeholder tw-mb-0">{descriptionText}</p>
+          )}
         </div>
 
         <div className="tw-grid tw-gap-4">
diff --git a/frontend/src/components/Auth/JoinWorkspaceForm.jsx b/frontend/src/components/Auth/JoinWorkspaceForm.jsx
index adf297baa5..c9a27d69ee 100644
--- a/frontend/src/components/Auth/JoinWorkspaceForm.jsx
+++ b/frontend/src/components/Auth/JoinWorkspaceForm.jsx
@@ -43,9 +43,14 @@ export function JoinWorkspaceForm({ className, ...props }) {
   return (
     <FormWrapper>
       <form className={cn('tw-flex tw-flex-col tw-gap-6', className)} onSubmit={onSubmit} {...props}>
-        <div className="tw-flex tw-flex-col tw-gap-2">
-          <h1 className="tw-text-2xl tw-font-semibold tw-text-text-default">{headerText}</h1>
-          {descriptionText && <p className="tw-text-sm tw-text-text-muted">{descriptionText}</p>}
+        <div className="tw-flex tw-flex-col tw-gap-2 tw-min-w-20">
+          <h1 className="tw-text-4xl tw-tracking-tight tw-font-medium tw-mb-0" data-cy="">
+            {headerText}
+          </h1>
+
+          {descriptionText && (
+            <p className="tw-text-balance tw-text-sm tw-text-text-placeholder tw-mb-0">{descriptionText}</p>
+          )}
         </div>
 
         <div className="tw-grid tw-gap-4">
diff --git a/frontend/src/components/Auth/SignupFormWithSSO.jsx b/frontend/src/components/Auth/SignupFormWithSSO.jsx
new file mode 100644
index 0000000000..90e00db563
--- /dev/null
+++ b/frontend/src/components/Auth/SignupFormWithSSO.jsx
@@ -0,0 +1,291 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { CornerDownLeft } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { FormWrapper } from '@/components/Auth/FormWrapper';
+import { GoogleSigninButton } from '@/components/Auth/GoogleSigninButton';
+import { GitHubSigninButton } from '@/components/Auth/GitHubSigninButton';
+
+export function SignupFormWithSSO({ className, ...props }) {
+  const {
+    // Header and sign in section
+    signupHeader,
+    signinText,
+    signinUrl,
+    signinCTA,
+    showSignin,
+    organizationName,
+
+    // Form fields
+    nameLabel,
+    namePlaceholder,
+    nameValue,
+    onNameChange,
+    nameValidation,
+    nameValidationMessage,
+
+    emailLabel,
+    emailPlaceholder,
+    emailValue,
+    onEmailChange,
+    emailValidation,
+    emailValidationMessage,
+
+    passwordLabel,
+    passwordPlaceholder,
+    passwordValue,
+    onPasswordChange,
+    passwordValidation,
+    passwordValidationMessage,
+
+    // Button and separator
+    signupButtonText,
+    orText,
+    showOrSeparator,
+
+    // SSO buttons
+    showSSOButtons,
+    googleButtonText,
+    githubButtonText,
+    onGoogleSignup,
+    onGitHubSignup,
+
+    // Form functionality
+    onSubmit,
+
+    // Validation and state
+    isLoading,
+    disabled,
+  } = props;
+
+  return (
+    <FormWrapper>
+      <form className={cn('tw-flex tw-flex-col tw-gap-6', className)} onSubmit={onSubmit} {...props}>
+        <div className="tw-flex tw-flex-col tw-gap-2 tw-min-w-20">
+          <h1 className="tw-text-4xl tw-tracking-tight tw-font-medium tw-mb-0" data-cy="">
+            {signupHeader}
+          </h1>
+
+          {(organizationName || showSignin) && (
+            <p className="tw-text-balance tw-text-sm tw-text-text-placeholder tw-mb-0">
+              {organizationName && (
+                <>
+                  Join the workspace -{' '}
+                  <span className="tw-font-medium" data-cy="workspace-name">
+                    {organizationName}
+                  </span>
+                  .
+                </>
+              )}{' '}
+              {showSignin && (
+                <>
+                  <span>{signinText}</span>
+                  <span>
+                    <a
+                      href={signinUrl}
+                      className="tw-text-text-brand tw-text-[11px] tw-font-medium tw-no-underline tw-pl-1.5 tw-pb-0.5 tw-self-center hover:tw-text-button-primary-hover"
+                      tabIndex="-1"
+                      data-cy="sign-in-link"
+                    >
+                      {signinCTA}
+                    </a>
+                  </span>
+                </>
+              )}
+            </p>
+          )}
+        </div>
+
+        <div className="tw-grid tw-gap-4">
+          <div className="tw-grid tw-gap-0.5">
+            <Label htmlFor="name" size="large">
+              {nameLabel}
+            </Label>
+            <Input
+              type="text"
+              placeholder={namePlaceholder}
+              value={nameValue}
+              onChange={onNameChange}
+              disabled={disabled}
+              required
+              validation={nameValidation}
+              isValidatedMessages={nameValidationMessage}
+              size="large"
+            />
+          </div>
+
+          <div className="tw-grid tw-gap-0.5">
+            <Label htmlFor="email" size="large">
+              {emailLabel}
+            </Label>
+            <Input
+              type="email"
+              placeholder={emailPlaceholder}
+              value={emailValue}
+              onChange={onEmailChange}
+              disabled={disabled}
+              required
+              validation={emailValidation}
+              isValidatedMessages={emailValidationMessage}
+              size="large"
+            />
+          </div>
+
+          <div className="tw-grid tw-gap-0.5">
+            <Label htmlFor="password" size="large">
+              {passwordLabel}
+            </Label>
+            <Input
+              type="password"
+              placeholder={passwordPlaceholder}
+              value={passwordValue}
+              onChange={onPasswordChange}
+              disabled={disabled}
+              showEncryption={false}
+              required
+              validation={passwordValidation}
+              isValidatedMessages={passwordValidationMessage}
+              size="large"
+            />
+          </div>
+
+          <Button
+            size="large"
+            type="submit"
+            className="tw-w-fit"
+            disabled={disabled || isLoading}
+            isLoading={isLoading}
+          >
+            {signupButtonText}
+            <CornerDownLeft width="16" height="16" />
+          </Button>
+
+          {showOrSeparator && (
+            <div className="tw-relative tw-flex tw-items-center tw-text-center tw-text-sm">
+              <div className="tw-flex-1 tw-h-px tw-bg-border-weak" />
+              <span className="tw-px-2 tw-text-muted-foreground">{orText}</span>
+              <div className="tw-flex-1 tw-h-px tw-bg-border-weak" />
+            </div>
+          )}
+
+          {showSSOButtons && (
+            <div className="tw-flex tw-flex-col tw-gap-3">
+              <GoogleSigninButton onClick={onGoogleSignup} text={googleButtonText} dataCy="google-signup-button" />
+              <GitHubSigninButton onClick={onGitHubSignup} text={githubButtonText} dataCy="github-signup-button" />
+            </div>
+          )}
+        </div>
+      </form>
+    </FormWrapper>
+  );
+}
+
+SignupFormWithSSO.propTypes = {
+  className: PropTypes.string,
+
+  // Header and sign in section
+  signupHeader: PropTypes.string,
+  signinText: PropTypes.string,
+  signinUrl: PropTypes.string,
+  signinCTA: PropTypes.string,
+  showSignin: PropTypes.bool,
+  organizationName: PropTypes.string,
+
+  // Form fields
+  nameLabel: PropTypes.string,
+  namePlaceholder: PropTypes.string,
+  nameValue: PropTypes.string,
+  onNameChange: PropTypes.func,
+  nameValidation: PropTypes.func,
+  nameValidationMessage: PropTypes.object,
+
+  emailLabel: PropTypes.string,
+  emailPlaceholder: PropTypes.string,
+  emailValue: PropTypes.string,
+  onEmailChange: PropTypes.func,
+  emailValidation: PropTypes.func,
+  emailValidationMessage: PropTypes.object,
+
+  passwordLabel: PropTypes.string,
+  passwordPlaceholder: PropTypes.string,
+  passwordValue: PropTypes.string,
+  onPasswordChange: PropTypes.func,
+  passwordValidation: PropTypes.func,
+  passwordValidationMessage: PropTypes.object,
+
+  // Button and separator
+  signupButtonText: PropTypes.string,
+  orText: PropTypes.string,
+  showOrSeparator: PropTypes.bool,
+
+  // SSO buttons
+  showSSOButtons: PropTypes.bool,
+  googleButtonText: PropTypes.string,
+  githubButtonText: PropTypes.string,
+  onGoogleSignup: PropTypes.func,
+  onGitHubSignup: PropTypes.func,
+
+  // Form functionality
+  onSubmit: PropTypes.func,
+
+  // Validation and state
+  isLoading: PropTypes.bool,
+  disabled: PropTypes.bool,
+};
+
+SignupFormWithSSO.defaultProps = {
+  className: '',
+
+  // Header and sign in section
+  signupHeader: 'Sign up',
+  signinText: 'Already have an account?',
+  signinUrl: '/login',
+  signinCTA: 'Sign in',
+  showSignin: true,
+  organizationName: '',
+
+  // Form fields
+  nameLabel: 'Name',
+  namePlaceholder: 'Enter your full name',
+  nameValue: '',
+  onNameChange: undefined,
+  nameValidation: undefined,
+  nameValidationMessage: undefined,
+
+  emailLabel: 'Email',
+  emailPlaceholder: 'Enter your work email',
+  emailValue: '',
+  onEmailChange: undefined,
+  emailValidation: undefined,
+  emailValidationMessage: undefined,
+
+  passwordLabel: 'Password',
+  passwordPlaceholder: 'Create password',
+  passwordValue: '',
+  onPasswordChange: undefined,
+  passwordValidation: undefined,
+  passwordValidationMessage: undefined,
+
+  // Button and separator
+  signupButtonText: 'Sign up',
+  orText: 'OR',
+  showOrSeparator: true,
+
+  // SSO buttons
+  showSSOButtons: true,
+  googleButtonText: 'Sign up with',
+  githubButtonText: 'Sign up with',
+  onGoogleSignup: undefined,
+  onGitHubSignup: undefined,
+
+  // Form functionality
+  onSubmit: undefined,
+
+  // Validation and state
+  isLoading: false,
+  disabled: false,
+};
diff --git a/frontend/src/components/Auth/Stories/SignupFlow.stories.jsx b/frontend/src/components/Auth/Stories/SignupFlow.stories.jsx
new file mode 100644
index 0000000000..ffed6d261a
--- /dev/null
+++ b/frontend/src/components/Auth/Stories/SignupFlow.stories.jsx
@@ -0,0 +1,145 @@
+import React from 'react';
+import { AuthLayout } from '../AuthLayout';
+import { AuthCenteredLayout } from '../AuthCenteredLayout';
+import { SignupFormWithSSO } from '../SignupFormWithSSO';
+import { SignupSuccessInfo } from '../SignupSuccessInfo';
+
+export default {
+  title: 'Auth/Flows/Signup',
+  component: AuthLayout,
+  parameters: {
+    layout: 'fullscreen',
+    viewport: {
+      viewports: {
+        desktop: {
+          name: 'Desktop',
+          styles: {
+            width: '1440px',
+            height: '900px',
+          },
+        },
+        tablet: {
+          name: 'Tablet',
+          styles: {
+            width: '768px',
+            height: '1024px',
+          },
+        },
+        mobile: {
+          name: 'Mobile',
+          styles: {
+            width: '375px',
+            height: '667px',
+          },
+        },
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    children: {
+      control: false,
+      description: 'Content to be displayed within the auth layout',
+    },
+  },
+};
+
+// Signup Flow - Step 1: Signup Form with SSO
+export const SignupFormFlow = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'desktop',
+    },
+  },
+  args: {
+    children: (
+      <SignupFormWithSSO
+        signupHeader="Sign up"
+        signinText="Already have an account?"
+        signinUrl="/login"
+        signinCTA="Sign in"
+        showSignin={true}
+        organizationName=""
+        nameLabel="Name"
+        namePlaceholder="Enter your full name"
+        emailLabel="Email"
+        emailPlaceholder="Enter your work email"
+        passwordLabel="Password"
+        passwordPlaceholder="Create password"
+        signupButtonText="Sign up"
+        orText="OR"
+        showOrSeparator={true}
+        showSSOButtons={true}
+        googleButtonText="Sign up with"
+        githubButtonText="Sign up with"
+        onGoogleSignup={() => console.log('Google signup clicked')}
+        onGitHubSignup={() => console.log('GitHub signup clicked')}
+      />
+    ),
+  },
+};
+
+// Signup Flow - Step 1: With Organization
+export const SignupFormWithOrganizationFlow = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'desktop',
+    },
+  },
+  args: {
+    children: (
+      <SignupFormWithSSO
+        signupHeader="Sign up"
+        signinText="Already have an account?"
+        signinUrl="/login"
+        signinCTA="Sign in"
+        showSignin={true}
+        organizationName="Acme Corporation"
+        nameLabel="Name"
+        namePlaceholder="Enter your full name"
+        emailLabel="Email"
+        emailPlaceholder="Enter your work email"
+        passwordLabel="Password"
+        passwordPlaceholder="Create password"
+        signupButtonText="Sign up"
+        orText="OR"
+        showOrSeparator={true}
+        showSSOButtons={true}
+        googleButtonText="Sign up with"
+        githubButtonText="Sign up with"
+        onGoogleSignup={() => console.log('Google signup clicked')}
+        onGitHubSignup={() => console.log('GitHub signup clicked')}
+      />
+    ),
+  },
+};
+
+// Signup Flow - Step 2: Signup Confirmation
+export const SignupConfirmationFlow = {
+  render: (args) => (
+    <AuthCenteredLayout {...args}>
+      <SignupSuccessInfo
+        headerText="Check your mail"
+        messageText="We've sent a verification email to"
+        email="user@example.com"
+        name="John Doe"
+        infoText="Did not receive an email? Check your spam folder!"
+        showInfo={true}
+        resendButtonText="Resend verification email"
+        resendCountdownText="Resend verification email in"
+        showResendButton={true}
+        resendDisabled={false}
+        resendCountdown={0}
+        onResendEmail={() => console.log('Resend email clicked')}
+        backButtonText="Back to sign up"
+        onBackToSignup={() => console.log('Back to signup clicked')}
+        showSeparator={true}
+      />
+    </AuthCenteredLayout>
+  ),
+  parameters: {
+    viewport: {
+      defaultViewport: 'desktop',
+    },
+  },
+};
diff --git a/frontend/src/components/Auth/Stories/SignupFormWithSSO.stories.jsx b/frontend/src/components/Auth/Stories/SignupFormWithSSO.stories.jsx
new file mode 100644
index 0000000000..e57dc562de
--- /dev/null
+++ b/frontend/src/components/Auth/Stories/SignupFormWithSSO.stories.jsx
@@ -0,0 +1,280 @@
+import React from 'react';
+import { SignupFormWithSSO } from '../SignupFormWithSSO';
+
+export default {
+  title: 'Auth/Blocks/SignupFormWithSSO',
+  component: SignupFormWithSSO,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    signupHeader: {
+      control: 'text',
+      description: 'The main heading text for the signup form',
+    },
+    signinText: {
+      control: 'text',
+      description: 'Text for the sign in link',
+    },
+    signinUrl: {
+      control: 'text',
+      description: 'URL for the sign in link',
+    },
+    signinCTA: {
+      control: 'text',
+      description: 'Call to action text for the sign in link',
+    },
+    showSignin: {
+      control: 'boolean',
+      description: 'Show or hide the sign in link',
+    },
+    organizationName: {
+      control: 'text',
+      description: 'Name of the organization to display',
+    },
+    nameLabel: {
+      control: 'text',
+      description: 'Label for the name input field',
+    },
+    namePlaceholder: {
+      control: 'text',
+      description: 'Placeholder text for the name input field',
+    },
+    emailLabel: {
+      control: 'text',
+      description: 'Label for the email input field',
+    },
+    emailPlaceholder: {
+      control: 'text',
+      description: 'Placeholder text for the email input field',
+    },
+    passwordLabel: {
+      control: 'text',
+      description: 'Label for the password input field',
+    },
+    passwordPlaceholder: {
+      control: 'text',
+      description: 'Placeholder text for the password input field',
+    },
+    signupButtonText: {
+      control: 'text',
+      description: 'Text for the signup button',
+    },
+    orText: {
+      control: 'text',
+      description: 'Text for the OR separator',
+    },
+    showOrSeparator: {
+      control: 'boolean',
+      description: 'Show or hide the OR separator',
+    },
+    showSSOButtons: {
+      control: 'boolean',
+      description: 'Show or hide the SSO buttons',
+    },
+    googleButtonText: {
+      control: 'text',
+      description: 'Text for the Google signup button',
+    },
+    githubButtonText: {
+      control: 'text',
+      description: 'Text for the GitHub signup button',
+    },
+    onGoogleSignup: {
+      action: 'google signup clicked',
+      description: 'Google signup button handler',
+    },
+    onGitHubSignup: {
+      action: 'github signup clicked',
+      description: 'GitHub signup button handler',
+    },
+    onSubmit: {
+      action: 'form submitted',
+      description: 'Form submission handler',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Loading state for the form',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disabled state for the form',
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    signupHeader: 'Sign up',
+    signinText: 'Already have an account?',
+    signinUrl: '/login',
+    signinCTA: 'Sign in',
+    showSignin: true,
+    organizationName: '',
+    nameLabel: 'Name',
+    namePlaceholder: 'Enter your full name',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your work email',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Create password',
+    signupButtonText: 'Sign up',
+    orText: 'OR',
+    showOrSeparator: true,
+    showSSOButtons: true,
+    googleButtonText: 'Sign up with',
+    githubButtonText: 'Sign up with',
+    isLoading: false,
+    disabled: false,
+  },
+};
+
+export const WithOrganization = {
+  args: {
+    signupHeader: 'Sign up',
+    signinText: 'Already have an account?',
+    signinUrl: '/login',
+    signinCTA: 'Sign in',
+    showSignin: true,
+    organizationName: 'Acme Corporation',
+    nameLabel: 'Name',
+    namePlaceholder: 'Enter your full name',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your work email',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Create password',
+    signupButtonText: 'Sign up',
+    orText: 'OR',
+    showOrSeparator: true,
+    showSSOButtons: true,
+    googleButtonText: 'Sign up with',
+    githubButtonText: 'Sign up with',
+    isLoading: false,
+    disabled: false,
+  },
+};
+
+export const WithoutSSO = {
+  args: {
+    signupHeader: 'Sign up',
+    signinText: 'Already have an account?',
+    signinUrl: '/login',
+    signinCTA: 'Sign in',
+    showSignin: true,
+    organizationName: '',
+    nameLabel: 'Name',
+    namePlaceholder: 'Enter your full name',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your work email',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Create password',
+    signupButtonText: 'Sign up',
+    orText: 'OR',
+    showOrSeparator: false,
+    showSSOButtons: false,
+    googleButtonText: 'Sign up with',
+    githubButtonText: 'Sign up with',
+    isLoading: false,
+    disabled: false,
+  },
+};
+
+export const WithoutSigninLink = {
+  args: {
+    signupHeader: 'Sign up',
+    signinText: 'Already have an account?',
+    signinUrl: '/login',
+    signinCTA: 'Sign in',
+    showSignin: false,
+    organizationName: '',
+    nameLabel: 'Name',
+    namePlaceholder: 'Enter your full name',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your work email',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Create password',
+    signupButtonText: 'Sign up',
+    orText: 'OR',
+    showOrSeparator: true,
+    showSSOButtons: true,
+    googleButtonText: 'Sign up with',
+    githubButtonText: 'Sign up with',
+    isLoading: false,
+    disabled: false,
+  },
+};
+
+export const Loading = {
+  args: {
+    signupHeader: 'Sign up',
+    signinText: 'Already have an account?',
+    signinUrl: '/login',
+    signinCTA: 'Sign in',
+    showSignin: true,
+    organizationName: '',
+    nameLabel: 'Name',
+    namePlaceholder: 'Enter your full name',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your work email',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Create password',
+    signupButtonText: 'Sign up',
+    orText: 'OR',
+    showOrSeparator: true,
+    showSSOButtons: true,
+    googleButtonText: 'Sign up with',
+    githubButtonText: 'Sign up with',
+    isLoading: true,
+    disabled: false,
+  },
+};
+
+export const Disabled = {
+  args: {
+    signupHeader: 'Sign up',
+    signinText: 'Already have an account?',
+    signinUrl: '/login',
+    signinCTA: 'Sign in',
+    showSignin: true,
+    organizationName: '',
+    nameLabel: 'Name',
+    namePlaceholder: 'Enter your full name',
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your work email',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Create password',
+    signupButtonText: 'Sign up',
+    orText: 'OR',
+    showOrSeparator: true,
+    showSSOButtons: true,
+    googleButtonText: 'Sign up with',
+    githubButtonText: 'Sign up with',
+    isLoading: false,
+    disabled: true,
+  },
+};
+
+export const CustomTexts = {
+  args: {
+    signupHeader: 'Create Account',
+    signinText: 'Have an existing account?',
+    signinUrl: '/login',
+    signinCTA: 'Log in',
+    showSignin: true,
+    organizationName: 'TechCorp',
+    nameLabel: 'Full Name',
+    namePlaceholder: 'Enter your complete name',
+    emailLabel: 'Work Email',
+    emailPlaceholder: 'Enter your company email',
+    passwordLabel: 'Secure Password',
+    passwordPlaceholder: 'Create a strong password',
+    signupButtonText: 'Create Account',
+    orText: 'OR',
+    showOrSeparator: true,
+    showSSOButtons: true,
+    googleButtonText: 'Continue with',
+    githubButtonText: 'Continue with',
+    isLoading: false,
+    disabled: false,
+  },
+};

From 630a53df8f300252e6d344eefab8ded6d28c6190 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Wed, 15 Oct 2025 21:28:57 +0530
Subject: [PATCH 069/157] feat: enhance input components

- Added `EncryptedField` component for handling encrypted inputs.
- Updated `InputComponent` to conditionally render `EncryptedField` for password types.
- Introduced `PasswordInput` for password handling with visibility toggle.
- Refactored `CommonInput` to support dynamic input types including password.
- Enhanced validation messaging and added new validation states in stories.
- Updated styles and utility functions for better input handling and icon positioning.
---
 frontend/.storybook/preview.scss              |   6 +-
 .../components/ui/EncryptedField/Index.jsx    |  40 ++
 .../components/ui/Input/CommonInput/Index.jsx |  59 +-
 .../ui/Input/CommonInput/NumberInput.jsx      |  46 +-
 .../ui/Input/CommonInput/PasswordInput.jsx    |  53 ++
 .../ui/Input/CommonInput/TextInput.jsx        |  33 +-
 frontend/src/components/ui/Input/Index.jsx    |  26 +-
 frontend/src/components/ui/Input/Input.jsx    | 131 ++---
 .../src/components/ui/Input/Input.stories.jsx | 549 +++++++++++++++++-
 .../ui/Input/InputUtils/InputUtils.jsx        |  18 +-
 .../ui/Input/InputUtils/TrailingBtn.jsx       |  23 +-
 .../ui/Input/InputUtils/Variants.jsx          | 100 +++-
 frontend/src/components/ui/input.jsx          |   3 +-
 13 files changed, 869 insertions(+), 218 deletions(-)
 create mode 100644 frontend/src/components/ui/EncryptedField/Index.jsx
 create mode 100644 frontend/src/components/ui/Input/CommonInput/PasswordInput.jsx

diff --git a/frontend/.storybook/preview.scss b/frontend/.storybook/preview.scss
index 5d2b1b09e6..07e09e71ce 100644
--- a/frontend/.storybook/preview.scss
+++ b/frontend/.storybook/preview.scss
@@ -1,2 +1,6 @@
 @import '~bootstrap/scss/bootstrap';
-@import '../src/_styles/componentdesign.scss'
\ No newline at end of file
+@import '../src/_styles/componentdesign.scss';
+
+body {
+  overflow-y: scroll !important;
+}
\ No newline at end of file
diff --git a/frontend/src/components/ui/EncryptedField/Index.jsx b/frontend/src/components/ui/EncryptedField/Index.jsx
new file mode 100644
index 0000000000..2d8ae61c77
--- /dev/null
+++ b/frontend/src/components/ui/EncryptedField/Index.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { generateCypressDataCy } from '../../../modules/common/helpers/cypressHelpers.js';
+
+const EncryptedField = ({ propertyKey, isEditing, handleEncryptedFieldsToggle, isDisabled, children }) => {
+  return (
+    <div>
+      <div className="d-flex justify-content-between w-100">
+        <div className="mx-1 col">
+          <Button
+            type="a"
+            variant="tertiary"
+            target="_blank"
+            rel="noreferrer"
+            disabled={isDisabled}
+            onClick={(e) => handleEncryptedFieldsToggle(e, propertyKey)}
+            data-cy={`button-${generateCypressDataCy(isEditing ? 'Cancel' : 'Edit')}`}
+          >
+            {isEditing ? 'Cancel' : 'Edit'}
+          </Button>
+        </div>
+        <div className="col-auto mb-2">
+          <small className="text-green" data-cy="encrypted-text">
+            <img
+              className="mx-2 encrypted-icon"
+              src="assets/images/icons/padlock.svg"
+              width="12"
+              height="12"
+              alt="Encrypted"
+            />
+            Encrypted
+          </small>
+        </div>
+      </div>
+      {children}
+    </div>
+  );
+};
+
+export default EncryptedField;
diff --git a/frontend/src/components/ui/Input/CommonInput/Index.jsx b/frontend/src/components/ui/Input/CommonInput/Index.jsx
index 48894d0799..6efbae711b 100644
--- a/frontend/src/components/ui/Input/CommonInput/Index.jsx
+++ b/frontend/src/components/ui/Input/CommonInput/Index.jsx
@@ -1,29 +1,22 @@
 import React, { useEffect, useState } from 'react';
 import NumberInput from './NumberInput';
 import TextInput from './TextInput';
+import PasswordInput from './PasswordInput';
 import { HelperMessage, InputLabel, ValidationMessage } from '../InputUtils/InputUtils';
-import { Button } from '@/components/ui/button';
-import { generateCypressDataCy } from '../../../../modules/common/helpers/cypressHelpers.js';
 
 const CommonInput = ({ label, helperText, disabled, required, onChange: change, ...restProps }) => {
-  const {
-    propertyKey,
-    type,
-    encrypted,
-    validation,
-    isValidatedMessages,
-    isDisabled,
-    isEditing,
-    handleEncryptedFieldsToggle,
-    labelDisabled,
-    showEncryption = true,
-  } = restProps;
+  const { type, validation, isValidatedMessages, labelDisabled } = restProps;
 
-  const InputComponentType = type === 'number' ? NumberInput : TextInput;
+  const getInputComponent = () => {
+    if (type === 'password') return PasswordInput;
+    if (type === 'number') return NumberInput;
+    return TextInput;
+  };
+
+  const InputComponentType = getInputComponent();
   const [isValid, setIsValid] = useState(null);
   const [message, setMessage] = useState('');
 
-  const isEncrypted = showEncryption && (type === 'password' || encrypted);
   const isWorkspaceConstant =
     restProps.placeholder &&
     (restProps.placeholder.includes('{{constants') || restProps.placeholder.includes('{{secrets'));
@@ -54,39 +47,15 @@ const CommonInput = ({ label, helperText, disabled, required, onChange: change,
 
   return (
     <div>
-      <div className="d-flex">
-        {label && (
+      {label && (
+        <div className="d-flex">
           <div className="tw-flex-shrink-0">
             <InputLabel disabled={labelDisabled ?? disabled} label={label} required={required} />
           </div>
-        )}
-        {showEncryption && type === 'password' && (
-          <div className="d-flex justify-content-between w-100">
-            <div className="mx-1 col">
-              <Button
-                type="a"
-                variant="tertiary"
-                target="_blank"
-                rel="noreferrer"
-                disabled={isDisabled}
-                onClick={(e) => handleEncryptedFieldsToggle(e, propertyKey)}
-                data-cy={`button-${generateCypressDataCy(isEditing ? 'Cancel' : 'Edit')}`}
-              >
-                {isEditing ? 'Cancel' : 'Edit'}
-              </Button>
-            </div>
-
-            <div className="col-auto mb-2">
-              <small className="text-green" data-cy="encrypted-text">
-                <img className="mx-2 encrypted-icon" src="assets/images/icons/padlock.svg" width="12" height="12" />
-                Encrypted
-              </small>
-            </div>
-          </div>
-        )}
-      </div>
+        </div>
+      )}
       <InputComponentType
-        disabled={disabled || (isEncrypted && !isEditing)}
+        disabled={disabled}
         required={required}
         response={isValid}
         onChange={handleChange}
diff --git a/frontend/src/components/ui/Input/CommonInput/NumberInput.jsx b/frontend/src/components/ui/Input/CommonInput/NumberInput.jsx
index b7242e0bb5..4aa837299c 100644
--- a/frontend/src/components/ui/Input/CommonInput/NumberInput.jsx
+++ b/frontend/src/components/ui/Input/CommonInput/NumberInput.jsx
@@ -3,7 +3,7 @@ import React, { useRef } from 'react';
 import { Input } from '../Input';
 import { Button } from '../../Button/Button';
 import { cn } from '@/lib/utils';
-import { inputVariants } from '../InputUtils/Variants';
+import { inputPaddingVariants, inputPositionVariants, inputIconSizeVariants } from '../InputUtils/Variants';
 
 const Btn = ({ onClick, icon, disabled, className }) => (
   <Button
@@ -12,35 +12,33 @@ const Btn = ({ onClick, icon, disabled, className }) => (
     onClick={onClick}
     size="small"
     variant="ghost"
-    className={`tw-h-[50%] tw-rounded-none ${className}`}
+    className={`!tw-h-[50%] tw-rounded-none ${className}`}
     fill={disabled ? 'var(--icon-weak)' : 'var(--icon-default)'}
     disabled={disabled}
   />
 );
 
-const NumberInput = ({ size, leadingIcon, response, disabled, ...restProps }) => {
+const NumberInput = ({ size, leadingIcon, disabled, ...restProps }) => {
   const inputRef = useRef(null);
 
-  const inputStyle = `tw-border-border-default placeholder:tw-text-text-placeholder tw-font-normal disabled:tw-bg-[#CCD1D5]/30 tw-pr-[12px] ${
-    leadingIcon ? (size === 'small' ? 'tw-pl-[32px]' : 'tw-pl-[34px]') : 'tw-pl-[12px]'
-  } ${
-    response === true
-      ? 'tw-border-border-success-strong focus-visible:!tw-ring-0 focus-visible:!tw-ring-offset-0 focus-visible:!tw-border-border-success-strong'
-      : response === false
-      ? 'tw-border-border-danger-strong focus-visible:!tw-ring-0 focus-visible:!tw-ring-offset-0 focus-visible:!tw-border-border-success-strong'
-      : ''
-  }`;
+  // Build className using variants for positioning only (size and validationState are handled in Input.jsx)
+  const leadingIconPaddingResult = leadingIcon ? inputPaddingVariants({ leadingIconPadding: size }) : 'tw-pl-[12px]';
+
+  const inputClassName = cn(
+    // Leading icon padding
+    leadingIconPaddingResult
+  );
 
   const handleIncrement = () => {
     if (inputRef.current) {
-      let newValue = parseFloat(inputRef.current.value) + 1;
+      const newValue = Number.parseFloat(inputRef.current.value) + 1;
       inputRef.current.value = newValue;
     }
   };
 
   const handleDecrement = () => {
     if (inputRef.current) {
-      let newValue = parseFloat(inputRef.current.value) - 1;
+      const newValue = Number.parseFloat(inputRef.current.value) - 1;
       inputRef.current.value = newValue;
     }
   };
@@ -50,24 +48,18 @@ const NumberInput = ({ size, leadingIcon, response, disabled, ...restProps }) =>
       {leadingIcon && (
         <SolidIcon
           name={leadingIcon}
-          width="16px"
-          height="16px"
-          className={`tw-absolute ${size === 'small' ? 'tw-top-[6px] tw-left-[10px]' : 'tw-top-[7px] tw-left-[12px]'}`}
+          className={cn(
+            'tw-absolute',
+            inputPositionVariants({ leadingIconPosition: size }),
+            inputIconSizeVariants({ iconSize: size })
+          )}
           fill="var(--icon-default)"
         />
       )}
-      <Input
-        size={size}
-        placeholder={'00.00'}
-        disabled={disabled}
-        className={inputStyle}
-        ref={inputRef}
-        {...restProps}
-      />
+      <Input size={size} disabled={disabled} className={inputClassName} ref={inputRef} {...restProps} />
       <div
         className={cn(
-          inputVariants({ size }),
-          'tw-absolute tw-top-0 tw-right-0 tw-flex tw-flex-col tw-border-l-[1px] tw-border-y-0 tw-border-r-0 tw-border-solid tw-border-l-border-weak'
+          'tw-absolute tw-h-full tw-top-0 tw-right-0 tw-flex tw-flex-col tw-border-l-[1px] tw-border-y-0 tw-border-r-0 tw-border-solid tw-border-l-border-weak'
         )}
       >
         <Btn icon="uparrow" onClick={handleIncrement} disabled={disabled} className="tw-rounded-tr-[8px]" />
diff --git a/frontend/src/components/ui/Input/CommonInput/PasswordInput.jsx b/frontend/src/components/ui/Input/CommonInput/PasswordInput.jsx
new file mode 100644
index 0000000000..042ff9302a
--- /dev/null
+++ b/frontend/src/components/ui/Input/CommonInput/PasswordInput.jsx
@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from 'react';
+import { Input } from '../Input';
+import { Eye, EyeOff } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { inputPositionVariants, inputIconSizeVariants } from '../InputUtils/Variants';
+import { getButtonSizeForInput } from '../InputUtils/InputUtils';
+
+const PasswordInput = ({ size, disabled, response, isWorkspaceConstant, ...restProps }) => {
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+
+  useEffect(() => {
+    if (isWorkspaceConstant) {
+      setIsPasswordVisible(true);
+    }
+  }, [isWorkspaceConstant]);
+
+  const togglePasswordVisibility = () => {
+    if (!disabled) {
+      setIsPasswordVisible((prev) => !prev);
+    }
+  };
+
+  return (
+    <div className="tw-relative">
+      <Input
+        type={isPasswordVisible ? 'text' : 'password'}
+        size={size}
+        disabled={disabled}
+        response={response}
+        {...restProps}
+      />
+      <Button
+        type="button"
+        variant="ghost"
+        size={getButtonSizeForInput(size)}
+        iconOnly
+        className={cn('tw-absolute tw-scale-[.85]', inputPositionVariants({ trailingIconPosition: size }))}
+        onClick={togglePasswordVisibility}
+        disabled={disabled}
+        aria-label={isPasswordVisible ? 'Hide password' : 'Show password'}
+      >
+        {isPasswordVisible ? (
+          <EyeOff className={inputIconSizeVariants({ iconSize: size })} />
+        ) : (
+          <Eye className={inputIconSizeVariants({ iconSize: size })} />
+        )}
+      </Button>
+    </div>
+  );
+};
+
+export default PasswordInput;
diff --git a/frontend/src/components/ui/Input/CommonInput/TextInput.jsx b/frontend/src/components/ui/Input/CommonInput/TextInput.jsx
index 27903c783f..dd17e1d60d 100644
--- a/frontend/src/components/ui/Input/CommonInput/TextInput.jsx
+++ b/frontend/src/components/ui/Input/CommonInput/TextInput.jsx
@@ -1,7 +1,9 @@
+import { cn } from '@/lib/utils';
 import SolidIcon from '@/_ui/Icon/SolidIcons';
 import React from 'react';
 import TrailingBtn from '../InputUtils/TrailingBtn';
 import { Input } from '../Input';
+import { inputPositionVariants, inputPaddingVariants, inputIconSizeVariants } from '../InputUtils/Variants';
 
 const TextInput = ({
   size,
@@ -14,24 +16,27 @@ const TextInput = ({
   readOnly,
   ...restProps
 }) => {
-  const inputStyle = `placeholder:tw-text-text-placeholder tw-font-normal disabled:tw-bg-[#CCD1D5]/30 ${
-    leadingIcon ? (size === 'small' ? 'tw-pl-[32px]' : 'tw-pl-[34px]') : 'tw-pl-[12px]'
-  } ${trailingAction ? (size === 'small' ? 'tw-pr-[40px]' : 'tw-pr-[44px]') : 'tw-pr-[12px]'} ${
-    response === true
-      ? '!tw-border-border-success-strong focus-visible:!tw-ring-0 focus-visible:!tw-ring-offset-0 focus-visible:!tw-border-border-success-strong'
-      : response === false
-      ? '!tw-border-border-danger-strong focus-visible:!tw-ring-0 focus-visible:!tw-ring-offset-0 focus-visible:!tw-border-border-danger-strong'
-      : 'tw-border-border-default'
-  }`;
+  // Build className using variants for positioning only (size and validationState are handled in Input.jsx)
+  const leadingIconPaddingResult = leadingIcon ? inputPaddingVariants({ leadingIconPadding: size }) : 'tw-pl-3';
+  const trailingIconPaddingResult = trailingAction ? inputPaddingVariants({ trailingIconPadding: size }) : 'tw-pr-3';
+
+  const inputClassName = cn(
+    // Leading icon padding
+    leadingIconPaddingResult,
+    // Trailing action padding
+    trailingIconPaddingResult
+  );
 
   return (
     <div className="tw-relative">
       {leadingIcon && (
         <SolidIcon
           name={leadingIcon}
-          width="16px"
-          height="16px"
-          className={`tw-absolute ${size === 'small' ? 'tw-top-[6px] tw-left-[10px]' : 'tw-top-[7px] tw-left-[12px]'}`}
+          className={cn(
+            'tw-absolute',
+            inputPositionVariants({ leadingIconPosition: size }),
+            inputIconSizeVariants({ iconSize: size })
+          )}
           fill="var(--icon-default)"
         />
       )}
@@ -41,7 +46,7 @@ const TextInput = ({
         disabled={disabled}
         response={response}
         {...restProps}
-        className={inputStyle}
+        className={inputClassName}
       />
       {trailingAction && (
         <TrailingBtn
@@ -49,7 +54,7 @@ const TextInput = ({
           type={trailingAction}
           {...(trailingAction === 'clear' && { onClick: restProps.onClear })}
           disabled={trailingActionDisabled || disabled}
-          className={`tw-absolute tw-right-[5px] ${size === 'small' ? 'tw-top-[5px]' : 'tw-top-[4px]'}`}
+          className={cn('tw-absolute', inputPositionVariants({ trailingIconPosition: size }))}
         />
       )}
     </div>
diff --git a/frontend/src/components/ui/Input/Index.jsx b/frontend/src/components/ui/Input/Index.jsx
index dbb6806d6b..92a0ced490 100644
--- a/frontend/src/components/ui/Input/Index.jsx
+++ b/frontend/src/components/ui/Input/Index.jsx
@@ -1,16 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import CommonInput from './CommonInput/Index';
-import EditableTitleInput from './EditableTitleInput/Index';
+import EncryptedField from '../EncryptedField/Index';
 
 const InputComponent = (props) => {
-  return props.type === 'editable title' ? <EditableTitleInput {...props} /> : <CommonInput {...props} />;
+  const { encrypted, showEncryption, type, isEditing, propertyKey, handleEncryptedFieldsToggle, isDisabled } = props;
+
+  // Check if we need encryption wrapper
+  const shouldWrapWithEncryption = showEncryption && encrypted && type === 'password';
+
+  if (shouldWrapWithEncryption) {
+    return (
+      <EncryptedField
+        propertyKey={propertyKey}
+        isEditing={isEditing}
+        handleEncryptedFieldsToggle={handleEncryptedFieldsToggle}
+        isDisabled={isDisabled}
+      >
+        <CommonInput {...props} />
+      </EncryptedField>
+    );
+  }
+
+  return <CommonInput {...props} />;
 };
 
 export default InputComponent;
 
 InputComponent.propTypes = {
-  type: PropTypes.oneOf(['text', 'number', 'editable title', 'password', 'email']),
+  type: PropTypes.oneOf(['text', 'number', 'password', 'email']),
   value: PropTypes.string,
   onChange: PropTypes.func,
   onClear: PropTypes.func,
@@ -32,7 +50,7 @@ InputComponent.propTypes = {
 
 InputComponent.defaultProps = {
   type: 'text',
-  onChange: (e, validateObj) => {},
+  onChange: (_e, _validateObj) => {},
   onClear: () => {},
   placeholder: '',
   name: '',
diff --git a/frontend/src/components/ui/Input/Input.jsx b/frontend/src/components/ui/Input/Input.jsx
index 06f3982531..9863a81602 100644
--- a/frontend/src/components/ui/Input/Input.jsx
+++ b/frontend/src/components/ui/Input/Input.jsx
@@ -1,100 +1,43 @@
 import * as React from 'react';
 import { cn } from '@/lib/utils';
-import { inputVariants } from './InputUtils/Variants';
-import { Eye, EyeOff } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-// eslint-disable-next-line import/no-unresolved
-import { cva } from 'class-variance-authority';
+import { inputBaseVariants } from './InputUtils/Variants';
 
-import { useEffect } from 'react';
+export const Input = React.forwardRef(({ className, size, type, multiline, response, rows = 3, ...props }, ref) => {
+  const validationClass = response === true ? 'valid-textarea' : response === false ? 'invalid-textarea' : '';
 
-const buttonSizeVariants = cva('', {
-  variants: {
-    size: {
-      small: 'tw-text-[12px]/[18px] tw-px-[10px] tw-py-[6px] tw-rounded-[6px]',
-      medium: 'tw-text-[12px]/[18px] tw-px-3 tw-py-[7px] tw-rounded-[6px]',
-      large: 'tw-text-[14px]/[20px] tw-px-3 tw-py-[7px] tw-rounded-[8px]',
-    },
-  },
-  defaultVariants: {
-    size: 'medium',
-  },
+  // Apply both size and validationState variants in Input.jsx
+  const baseVariants = inputBaseVariants({
+    size,
+    validationState: response === true ? 'success' : response === false ? 'error' : 'default',
+  });
+
+  return (
+    <div className="design-component-inputs">
+      {multiline ? (
+        <textarea
+          className={cn(
+            baseVariants,
+            `tw-relative tw-peer tw-flex placeholder:tw-text-text-placeholder tw-font-normal disabled:tw-bg-interactive-default tw-w-full tw-border-[1px] tw-border-solid tw-bg-background-surface-layer-01 tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${props.styles}`,
+            className,
+            validationClass
+          )}
+          rows={rows}
+          ref={ref}
+          {...props}
+        />
+      ) : (
+        <input
+          type={type}
+          className={cn(
+            baseVariants,
+            `tw-peer tw-flex placeholder:tw-text-text-placeholder tw-font-normal disabled:tw-bg-interactive-default tw-w-full tw-border tw-border-solid tw-bg-background-surface-layer-01 tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${props.styles}`,
+            className
+          )}
+          ref={ref}
+          {...props}
+        />
+      )}
+    </div>
+  );
 });
-
-export const Input = React.forwardRef(
-  ({ className, size, type, multiline, response, isValid, isWorkspaceConstant, rows = 3, ...props }, ref) => {
-    const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);
-    const isPasswordField = type === 'password';
-
-    const togglePasswordVisibility = () => {
-      if (!props.disabled) {
-        setIsPasswordVisible((prev) => !prev);
-      }
-    };
-
-    useEffect(() => {
-      if (isWorkspaceConstant) {
-        setIsPasswordVisible(true);
-      }
-    }, [isWorkspaceConstant]);
-
-    const validationClass = response === true ? 'valid-textarea' : response === false ? 'invalid-textarea' : '';
-
-    const inputStyle = ` placeholder:tw-text-text-placeholder ${
-      isValid === true ? '!tw-border-border-success-strong' : isValid === false ? '!tw-border-border-danger-strong' : ''
-    }`;
-
-    return (
-      <div className="design-component-inputs">
-        {multiline ? (
-          <textarea
-            className={cn(
-              `tw-relative tw-peer tw-flex ${buttonSizeVariants({
-                size,
-              })} tw-w-full tw-border-[1px] tw-border-solid tw-bg-background-surface-layer-01 tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${
-                props.styles
-              }`,
-              className,
-              validationClass
-            )}
-            rows={rows}
-            ref={ref}
-            {...props}
-          />
-        ) : (
-          <div className="tw-relative">
-            <input
-              type={isPasswordField && isPasswordVisible ? 'text' : type}
-              className={cn(
-                inputVariants({ size }),
-                `tw-peer tw-flex ${buttonSizeVariants({
-                  size,
-                })} tw-w-full tw-border tw-border-solid tw-border-border-strong tw-bg-background-surface-layer-01 tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${
-                  props.styles
-                }`,
-                className,
-                inputStyle
-              )}
-              ref={ref}
-              {...props}
-            />
-            {isPasswordField && (
-              <Button
-                type="button"
-                variant="ghost"
-                iconOnly
-                className="tw-absolute tw-right-1 tw-top-1/2 tw-transform tw--translate-y-1/2 tw-bg-none tw-border-none tw-cursor-pointer tw-p-1 tw-text-icon-strong hover:tw-text-icon-default focus:tw-outline-none"
-                onClick={togglePasswordVisibility}
-                disabled={props.disabled}
-                aria-label={isPasswordVisible ? 'Hide password' : 'Show password'}
-              >
-                {isPasswordVisible ? <EyeOff width="16" height="16" /> : <Eye width="16" height="16" />}
-              </Button>
-            )}
-          </div>
-        )}
-      </div>
-    );
-  }
-);
 Input.displayName = 'Input';
diff --git a/frontend/src/components/ui/Input/Input.stories.jsx b/frontend/src/components/ui/Input/Input.stories.jsx
index 83a0f2d3c1..258621f12d 100644
--- a/frontend/src/components/ui/Input/Input.stories.jsx
+++ b/frontend/src/components/ui/Input/Input.stories.jsx
@@ -1,6 +1,8 @@
 // eslint-disable-next-line no-unused-vars
 import * as React from 'react';
 import InputComponent from './Index';
+import EditableTitleInput from './EditableTitleInput/Index';
+import { ValidationMessage } from './InputUtils/InputUtils';
 
 // Storybook configuration
 export default {
@@ -12,7 +14,7 @@ export default {
   },
   argTypes: {
     type: {
-      options: ['text', 'number', 'editable title', 'password', 'email'],
+      options: ['text', 'number', 'password', 'email'],
       control: {
         type: 'select',
       },
@@ -115,7 +117,7 @@ export const InputTypes = () => (
     </div>
     <div>
       <h3 className="tw-text-sm tw-font-medium tw-mb-2">Editable Title</h3>
-      <InputComponent type="editable title" placeholder="Editable title" label="Editable Title" />
+      <EditableTitleInput placeholder="Editable title" label="Editable Title" />
     </div>
   </div>
 );
@@ -142,6 +144,314 @@ export const InputStates = () => (
   </div>
 );
 
+// Validation States
+export const ValidationStates = () => (
+  <div className="tw-space-y-4">
+    <div>
+      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Default (No Validation)</h3>
+      <InputComponent placeholder="Default state" label="Default Input" response={null} />
+    </div>
+    <div>
+      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Success State</h3>
+      <InputComponent placeholder="Valid input" label="Success Input" response={true} helperText="Input is valid" />
+    </div>
+    <div>
+      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Error State</h3>
+      <InputComponent
+        placeholder="Invalid input"
+        label="Error Input"
+        response={false}
+        helperText="Input has an error"
+      />
+    </div>
+    <div>
+      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Success with Icon</h3>
+      <InputComponent
+        placeholder="Valid email"
+        label="Email Input"
+        leadingIcon="mail"
+        response={true}
+        helperText="Email format is correct"
+      />
+    </div>
+    <div>
+      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Error with Icon</h3>
+      <InputComponent
+        placeholder="Invalid email"
+        label="Email Input"
+        leadingIcon="mail"
+        response={false}
+        helperText="Please enter a valid email"
+      />
+    </div>
+  </div>
+);
+
+// Validation States - All Sizes
+export const ValidationStatesSizes = () => (
+  <div className="tw-space-y-6">
+    <div>
+      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Small Size Validation States</h3>
+      <div className="tw-space-y-3">
+        <InputComponent size="small" placeholder="Default" label="Default" response={null} />
+        <InputComponent size="small" placeholder="Success" label="Success" response={true} helperText="Valid input" />
+        <InputComponent size="small" placeholder="Error" label="Error" response={false} helperText="Invalid input" />
+      </div>
+    </div>
+
+    <div>
+      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Medium Size Validation States</h3>
+      <div className="tw-space-y-3">
+        <InputComponent size="medium" placeholder="Default" label="Default" response={null} />
+        <InputComponent size="medium" placeholder="Success" label="Success" response={true} helperText="Valid input" />
+        <InputComponent size="medium" placeholder="Error" label="Error" response={false} helperText="Invalid input" />
+      </div>
+    </div>
+
+    <div>
+      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Large Size Validation States</h3>
+      <div className="tw-space-y-3">
+        <InputComponent size="large" placeholder="Default" label="Default" response={null} />
+        <InputComponent size="large" placeholder="Success" label="Success" response={true} helperText="Valid input" />
+        <InputComponent size="large" placeholder="Error" label="Error" response={false} helperText="Invalid input" />
+      </div>
+    </div>
+  </div>
+);
+
+// Validation States - All Input Types
+export const ValidationStatesTypes = () => (
+  <div className="tw-space-y-6">
+    <div>
+      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Text Input Validation</h3>
+      <div className="tw-space-y-3">
+        <InputComponent type="text" placeholder="Default" label="Text Input" response={null} />
+        <InputComponent
+          type="text"
+          placeholder="Valid text"
+          label="Text Input"
+          response={true}
+          helperText="Text is valid"
+        />
+        <InputComponent
+          type="text"
+          placeholder="Invalid text"
+          label="Text Input"
+          response={false}
+          helperText="Text is invalid"
+        />
+      </div>
+    </div>
+
+    <div>
+      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Number Input Validation</h3>
+      <div className="tw-space-y-3">
+        <InputComponent type="number" placeholder="00.00" label="Number Input" response={null} />
+        <InputComponent
+          type="number"
+          placeholder="00.00"
+          label="Number Input"
+          response={true}
+          helperText="Valid number"
+        />
+        <InputComponent
+          type="number"
+          placeholder="00.00"
+          label="Number Input"
+          response={false}
+          helperText="Invalid number"
+        />
+      </div>
+    </div>
+
+    <div>
+      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Password Input Validation</h3>
+      <div className="tw-space-y-3">
+        <InputComponent type="password" placeholder="Enter password" label="Password" response={null} />
+        <InputComponent
+          type="password"
+          placeholder="Enter password"
+          label="Password"
+          response={true}
+          helperText="Strong password"
+        />
+        <InputComponent
+          type="password"
+          placeholder="Enter password"
+          label="Password"
+          response={false}
+          helperText="Password too weak"
+        />
+      </div>
+    </div>
+
+    <div>
+      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Email Input Validation</h3>
+      <div className="tw-space-y-3">
+        <InputComponent type="email" placeholder="Enter email" label="Email" response={null} />
+        <InputComponent
+          type="email"
+          placeholder="user@example.com"
+          label="Email"
+          response={true}
+          helperText="Valid email format"
+        />
+        <InputComponent
+          type="email"
+          placeholder="invalid-email"
+          label="Email"
+          response={false}
+          helperText="Invalid email format"
+        />
+      </div>
+    </div>
+  </div>
+);
+
+// Validation with ValidationMessage Component
+export const WithValidationMessages = () => (
+  <div className="tw-space-y-6">
+    <div>
+      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Success Validation Messages</h3>
+      <div className="tw-space-y-4">
+        <div>
+          <InputComponent type="text" size="small" placeholder="Enter username" label="Username" response={true} />
+          <ValidationMessage response={true} validationMessage="Username is available" />
+        </div>
+        <div>
+          <InputComponent type="email" size="medium" placeholder="Enter email" label="Email Address" response={true} />
+          <ValidationMessage response={true} validationMessage="Email format is correct" />
+        </div>
+        <div>
+          <InputComponent type="password" size="large" placeholder="Enter password" label="Password" response={true} />
+          <ValidationMessage response={true} validationMessage="Strong password with special characters" />
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Error Validation Messages</h3>
+      <div className="tw-space-y-4">
+        <div>
+          <InputComponent type="text" size="small" placeholder="Enter username" label="Username" response={false} />
+          <ValidationMessage response={false} validationMessage="Username already exists" />
+        </div>
+        <div>
+          <InputComponent type="email" size="medium" placeholder="Enter email" label="Email Address" response={false} />
+          <ValidationMessage response={false} validationMessage="Please enter a valid email address" />
+        </div>
+        <div>
+          <InputComponent type="password" size="large" placeholder="Enter password" label="Password" response={false} />
+          <ValidationMessage response={false} validationMessage="Password must be at least 8 characters" />
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+// Validation Messages - Complex Examples
+export const ValidationMessagesComplex = () => (
+  <div className="tw-space-y-6">
+    <div>
+      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Form Validation Example</h3>
+      <div className="tw-space-y-4 tw-max-w-md">
+        <div>
+          <InputComponent type="text" placeholder="John Doe" label="Full Name" response={true} />
+          <ValidationMessage response={true} validationMessage="Name looks good" />
+        </div>
+        <div>
+          <InputComponent
+            type="email"
+            placeholder="john.doe@example.com"
+            label="Email Address"
+            leadingIcon="mail"
+            response={true}
+          />
+          <ValidationMessage response={true} validationMessage="Valid email format" />
+        </div>
+        <div>
+          <InputComponent type="number" placeholder="30" label="Age" response={false} />
+          <ValidationMessage response={false} validationMessage="Age must be between 18 and 65" />
+        </div>
+        <div>
+          <InputComponent type="password" placeholder="Enter password" label="Password" response={false} />
+          <ValidationMessage
+            response={false}
+            validationMessage="Password must contain uppercase, lowercase, number and special character"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Real-time Validation Example</h3>
+      <div className="tw-space-y-4 tw-max-w-md">
+        <div>
+          <InputComponent
+            type="text"
+            placeholder="myusername"
+            label="Username"
+            leadingIcon="user"
+            trailingAction="clear"
+            response={true}
+          />
+          <ValidationMessage response={true} validationMessage="Username is available and meets requirements" />
+        </div>
+        <div>
+          <InputComponent
+            type="text"
+            placeholder="abc"
+            label="Username"
+            leadingIcon="user"
+            trailingAction="clear"
+            response={false}
+          />
+          <ValidationMessage response={false} validationMessage="Username must be at least 5 characters long" />
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Multiple Validation States</h3>
+      <div className="tw-space-y-4 tw-max-w-md">
+        <div>
+          <InputComponent type="number" size="small" placeholder="100.00" label="Amount (USD)" response={true} />
+          <ValidationMessage response={true} validationMessage="Amount within valid range" />
+        </div>
+        <div>
+          <InputComponent type="number" size="small" placeholder="10000.00" label="Amount (USD)" response={false} />
+          <ValidationMessage response={false} validationMessage="Amount exceeds maximum limit of $5,000" />
+        </div>
+        <div>
+          <InputComponent
+            type="text"
+            size="medium"
+            placeholder="https://example.com"
+            label="Website URL"
+            leadingIcon="link"
+            response={true}
+          />
+          <ValidationMessage response={true} validationMessage="Valid URL format" />
+        </div>
+        <div>
+          <InputComponent
+            type="text"
+            size="medium"
+            placeholder="not-a-url"
+            label="Website URL"
+            leadingIcon="link"
+            response={false}
+          />
+          <ValidationMessage
+            response={false}
+            validationMessage="Please enter a valid URL (e.g., https://example.com)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
 // With Icons and Actions
 export const WithIconsAndActions = () => (
   <div className="tw-space-y-4">
@@ -202,17 +512,240 @@ export const SizeCombinations = () => (
         <InputComponent size="large" type="password" placeholder="Large password" label="Large Password" />
         <InputComponent size="large" leadingIcon="search" placeholder="Large with icon" label="Large with Icon" />
         <InputComponent size="large" trailingAction="clear" placeholder="Large clearable" label="Large Clearable" />
-        <InputComponent
-          size="large"
-          type="editable title"
-          placeholder="Large editable title"
-          label="Large Editable Title"
-        />
+        <EditableTitleInput size="large" placeholder="Large editable title" label="Large Editable Title" />
       </div>
     </div>
   </div>
 );
 
+// Encrypted Field Examples
+export const EncryptedFields = () => {
+  const [isEditing1, setIsEditing1] = React.useState(false);
+  const [isEditing2, setIsEditing2] = React.useState(false);
+  const [isEditing3, setIsEditing3] = React.useState(false);
+
+  return (
+    <div className="tw-space-y-6">
+      <div>
+        <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Encrypted Password Fields</h3>
+        <div className="tw-space-y-4 tw-max-w-md">
+          <div>
+            <InputComponent
+              type="password"
+              size="small"
+              label="API Key"
+              placeholder={isEditing1 ? 'Enter API key' : '**************'}
+              encrypted={true}
+              showEncryption={true}
+              isEditing={isEditing1}
+              propertyKey="api_key"
+              handleEncryptedFieldsToggle={() => setIsEditing1(!isEditing1)}
+              isDisabled={false}
+            />
+          </div>
+          <div>
+            <InputComponent
+              type="password"
+              size="medium"
+              label="Database Password"
+              placeholder={isEditing2 ? 'Enter password' : '**************'}
+              encrypted={true}
+              showEncryption={true}
+              isEditing={isEditing2}
+              propertyKey="db_password"
+              handleEncryptedFieldsToggle={() => setIsEditing2(!isEditing2)}
+              isDisabled={false}
+            />
+          </div>
+          <div>
+            <InputComponent
+              type="password"
+              size="large"
+              label="Secret Token"
+              placeholder={isEditing3 ? 'Enter token' : '**************'}
+              encrypted={true}
+              showEncryption={true}
+              isEditing={isEditing3}
+              propertyKey="secret_token"
+              handleEncryptedFieldsToggle={() => setIsEditing3(!isEditing3)}
+              isDisabled={false}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Encrypted Field - Disabled State</h3>
+        <div className="tw-max-w-md">
+          <InputComponent
+            type="password"
+            size="medium"
+            label="Protected Secret"
+            placeholder="**************"
+            encrypted={true}
+            showEncryption={true}
+            isEditing={false}
+            propertyKey="protected_secret"
+            handleEncryptedFieldsToggle={() => {}}
+            isDisabled={true}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Workspace Constants Examples
+export const WorkspaceConstants = () => {
+  return (
+    <div className="tw-space-y-6">
+      <div>
+        <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Workspace Constants (Auto-visible)</h3>
+        <p className="tw-text-sm tw-text-text-weak tw-mb-4">
+          Password inputs automatically show values when they contain workspace constants or secrets
+        </p>
+        <div className="tw-space-y-4 tw-max-w-md">
+          <div>
+            <InputComponent
+              type="password"
+              size="small"
+              label="API Key (Constant)"
+              placeholder="{{constants.API_KEY}}"
+              helperText="Workspace constant - automatically visible"
+            />
+          </div>
+          <div>
+            <InputComponent
+              type="password"
+              size="medium"
+              label="Database Password (Secret)"
+              placeholder="{{secrets.DB_PASSWORD}}"
+              helperText="Workspace secret - automatically visible"
+            />
+          </div>
+          <div>
+            <InputComponent
+              type="password"
+              size="large"
+              label="Auth Token (Constant)"
+              placeholder="{{constants.AUTH_TOKEN}}"
+              helperText="Template variable - shown in plain text"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Mixed: Constants vs Regular Passwords</h3>
+        <div className="tw-space-y-4 tw-max-w-md">
+          <div>
+            <InputComponent
+              type="password"
+              size="medium"
+              label="Regular Password"
+              placeholder="Enter your password"
+              helperText="Normal password - hidden by default"
+            />
+          </div>
+          <div>
+            <InputComponent
+              type="password"
+              size="medium"
+              label="Workspace Constant"
+              placeholder="{{constants.SECRET_KEY}}"
+              helperText="Constant - visible by default"
+            />
+          </div>
+          <div>
+            <InputComponent
+              type="password"
+              size="medium"
+              label="Workspace Secret"
+              placeholder="{{secrets.API_SECRET}}"
+              helperText="Secret - visible by default"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Workspace Constants with Validation</h3>
+        <div className="tw-space-y-4 tw-max-w-md">
+          <div>
+            <InputComponent
+              type="password"
+              size="medium"
+              label="Valid Constant"
+              placeholder="{{constants.VALID_KEY}}"
+              response={true}
+              helperText="Constant syntax is correct"
+            />
+          </div>
+          <div>
+            <InputComponent
+              type="password"
+              size="medium"
+              label="Invalid Constant"
+              placeholder="{{constants.MISSING_KEY}}"
+              response={false}
+              helperText="This constant doesn't exist in workspace"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Encrypted Fields with Validation
+export const EncryptedFieldsWithValidation = () => {
+  const [isEditing1, setIsEditing1] = React.useState(false);
+  const [isEditing2, setIsEditing2] = React.useState(false);
+
+  return (
+    <div className="tw-space-y-6">
+      <div>
+        <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Encrypted Fields with Validation States</h3>
+        <div className="tw-space-y-4 tw-max-w-md">
+          <div>
+            <InputComponent
+              type="password"
+              size="medium"
+              label="Valid Encrypted Password"
+              placeholder={isEditing1 ? 'Enter password' : '**************'}
+              encrypted={true}
+              showEncryption={true}
+              isEditing={isEditing1}
+              propertyKey="valid_password"
+              handleEncryptedFieldsToggle={() => setIsEditing1(!isEditing1)}
+              isDisabled={false}
+              response={true}
+              helperText="Password meets security requirements"
+            />
+          </div>
+          <div>
+            <InputComponent
+              type="password"
+              size="medium"
+              label="Invalid Encrypted Password"
+              placeholder={isEditing2 ? 'Enter password' : '**************'}
+              encrypted={true}
+              showEncryption={true}
+              isEditing={isEditing2}
+              propertyKey="invalid_password"
+              handleEncryptedFieldsToggle={() => setIsEditing2(!isEditing2)}
+              isDisabled={false}
+              response={false}
+              helperText="Password must be at least 12 characters"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+
 // Interactive Playground
 export const Playground = Template.bind({});
 Playground.args = {
diff --git a/frontend/src/components/ui/Input/InputUtils/InputUtils.jsx b/frontend/src/components/ui/Input/InputUtils/InputUtils.jsx
index 57e92a819b..7ff1efdf69 100644
--- a/frontend/src/components/ui/Input/InputUtils/InputUtils.jsx
+++ b/frontend/src/components/ui/Input/InputUtils/InputUtils.jsx
@@ -6,8 +6,8 @@ import HelperIcon from './HelperIcon';
 import { generateCypressDataCy } from '../../../../modules/common/helpers/cypressHelpers.js';
 
 export const ValidationMessage = ({ response, validationMessage, className }) => (
-  <div className={cn('tw-flex tw-pl-[2px] tw-items-start tw-my-[2px]', className)}>
-    <div className="tw-flex tw-pt-[3.5px]">
+  <div className={cn('tw-flex tw-pl-[2px] tw-items-start tw-my-[2px] tw-gap-1', className)}>
+    <div className="tw-flex tw-h-4 tw-items-center">
       <ValidationIcon result={response} />
     </div>
     <Label
@@ -60,3 +60,17 @@ export const InputLabel = ({ disabled, label, required }) => (
     {required && <RequiredIndicator disabled={disabled} />}
   </Label>
 );
+
+/**
+ * Maps input size to the corresponding button size
+ * Input sizes: small (28px), medium (32px), large (40px)
+ * Button sizes: small (20px), medium (28px), default (32px), large (40px)
+ */
+export const getButtonSizeForInput = (inputSize) => {
+  const sizeMap = {
+    small: 'medium', // Input 28px → Button 28px
+    medium: 'default', // Input 32px → Button 32px
+    large: 'large', // Input 40px → Button 40px
+  };
+  return sizeMap[inputSize] || 'default';
+};
diff --git a/frontend/src/components/ui/Input/InputUtils/TrailingBtn.jsx b/frontend/src/components/ui/Input/InputUtils/TrailingBtn.jsx
index 43fc1247b9..6a6f8f373a 100644
--- a/frontend/src/components/ui/Input/InputUtils/TrailingBtn.jsx
+++ b/frontend/src/components/ui/Input/InputUtils/TrailingBtn.jsx
@@ -1,21 +1,8 @@
 import React from 'react';
 import { Button } from '../../Button/Button';
 import { cn } from '@/lib/utils';
-// eslint-disable-next-line import/no-unresolved
-import { cva } from 'class-variance-authority';
-
-const iconVariants = cva('!tw-rounded-[6px]', {
-  variants: {
-    size: {
-      small: `!tw-h-[18px] !tw-px-[2px] !tw-py-[2px] !tw-w-[18px]`,
-      medium: `!tw-h-[24px] !tw-px-[4px] !tw-py-[4px] !tw-w-[24px]`,
-      large: `!tw-h-[32px] !tw-px-[8px] !tw-py-[8px] !tw-w-[32px]`,
-    },
-  },
-  defaultVariants: {
-    size: 'medium',
-  },
-});
+import { TRAILING_BUTTON_SCALE } from './Variants';
+import { getButtonSizeForInput } from './InputUtils';
 
 const TrailingBtn = ({ size, type, className, disabled, ...restProps }) => {
   return (
@@ -23,11 +10,11 @@ const TrailingBtn = ({ size, type, className, disabled, ...restProps }) => {
       disabled={disabled}
       fill={type === 'loading' ? '#3E63DD' : disabled ? 'var(--icon-disabled)' : 'var(--icon-default)'}
       iconOnly
-      isLoading={type === 'loading' ? true : false}
+      isLoading={type === 'loading'}
       leadingIcon="removerectangle"
       variant="ghost"
-      className={cn(iconVariants({ size }), className)}
-      size="default"
+      className={cn(TRAILING_BUTTON_SCALE, className)}
+      size={getButtonSizeForInput(size)}
       {...restProps}
     />
   );
diff --git a/frontend/src/components/ui/Input/InputUtils/Variants.jsx b/frontend/src/components/ui/Input/InputUtils/Variants.jsx
index a5dc443cb6..9bdb635391 100644
--- a/frontend/src/components/ui/Input/InputUtils/Variants.jsx
+++ b/frontend/src/components/ui/Input/InputUtils/Variants.jsx
@@ -1,15 +1,107 @@
 // eslint-disable-next-line import/no-unresolved
 import { cva } from 'class-variance-authority';
 
-export const inputVariants = cva('', {
+/**
+ * Base input variants for size and validation state.
+ * Applied directly in Input.jsx to all input/textarea elements.
+ *
+ * @param {Object} options
+ * @param {'small' | 'medium' | 'large'} options.size - Input size (height, font-size, padding, border-radius)
+ * @param {'success' | 'error' | 'default'} options.validationState - Validation state (border color, focus ring)
+ * @returns {string} Combined CSS classes
+ */
+export const inputBaseVariants = cva('', {
   variants: {
     size: {
-      small: `tw-h-[28px]`,
-      medium: `tw-h-[32px]`,
-      large: `tw-h-[40px]`,
+      small: 'tw-h-[28px] tw-text-[12px]/[18px] tw-px-[10px] tw-py-[6px] tw-rounded-[6px]',
+      medium: 'tw-h-[32px] tw-text-[12px]/[18px] tw-px-3 tw-py-[7px] tw-rounded-[6px]',
+      large: 'tw-h-[40px] tw-text-[14px]/[20px] tw-px-3 tw-py-[7px] tw-rounded-[8px]',
+    },
+    validationState: {
+      success:
+        '!tw-border-border-success-strong focus-visible:!tw-ring-0 focus-visible:!tw-ring-offset-0 focus-visible:!tw-border-border-success-strong',
+      error:
+        '!tw-border-border-danger-strong focus-visible:!tw-ring-0 focus-visible:!tw-ring-offset-0 focus-visible:!tw-border-border-danger-strong',
+      default: 'tw-border-border-default',
     },
   },
   defaultVariants: {
     size: 'medium',
+    validationState: 'default',
   },
 });
+
+/**
+ * Icon position variants for leading/trailing icons.
+ * Used in TextInput, NumberInput, and PasswordInput for absolute positioning.
+ * Uses transform for perfect vertical centering.
+ *
+ * @param {Object} options
+ * @param {'small' | 'medium' | 'large'} [options.leadingIconPosition] - Position for leading icon
+ * @param {'small' | 'medium' | 'large'} [options.trailingIconPosition] - Position for trailing icon/button
+ * @returns {string} CSS classes for absolute positioning
+ */
+export const inputPositionVariants = cva('', {
+  variants: {
+    leadingIconPosition: {
+      small: 'tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-left-[10px]',
+      medium: 'tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-left-[12px]',
+      large: 'tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-left-[12px]',
+    },
+    trailingIconPosition: {
+      small: 'tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-right-0',
+      medium: 'tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-right-0',
+      large: 'tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-right-0',
+    },
+  },
+});
+
+/**
+ * Input padding variants for when icons are present.
+ * Adds left/right padding to input to prevent text overlap with icons.
+ * Uses standard Tailwind spacing scale (8 = 32px, 9 = 36px, 10 = 40px, 11 = 44px).
+ *
+ * @param {Object} options
+ * @param {'small' | 'medium' | 'large'} [options.leadingIconPadding] - Left padding when leading icon exists
+ * @param {'small' | 'medium' | 'large'} [options.trailingIconPadding] - Right padding when trailing icon/button exists
+ * @returns {string} CSS padding classes
+ */
+export const inputPaddingVariants = cva('', {
+  variants: {
+    leadingIconPadding: {
+      small: 'tw-pl-8', // 32px
+      medium: 'tw-pl-9', // 36px
+      large: 'tw-pl-10', // 40px
+    },
+    trailingIconPadding: {
+      small: 'tw-pr-8', // 40px
+      medium: 'tw-pr-9', // 44px
+      large: 'tw-pr-10', // 48px
+    },
+  },
+});
+
+/**
+ * Icon size variants for leading/trailing icons.
+ * Controls width and height of SolidIcon and lucide icons.
+ *
+ * @param {Object} options
+ * @param {'small' | 'medium' | 'large'} options.iconSize - Icon dimensions
+ * @returns {string} CSS width/height classes
+ */
+export const inputIconSizeVariants = cva('', {
+  variants: {
+    iconSize: {
+      small: 'tw-w-[14px] tw-h-[14px]',
+      medium: 'tw-w-[16px] tw-h-[16px]',
+      large: 'tw-w-[18px] tw-h-[18px]',
+    },
+  },
+});
+
+/**
+ * Scale factor for trailing action buttons (clear/loading).
+ * Makes buttons compact to fit nicely inside inputs while maintaining proportions.
+ * Apply this class directly to buttons inside inputs.
+ */
+export const TRAILING_BUTTON_SCALE = 'tw-scale-75';
diff --git a/frontend/src/components/ui/input.jsx b/frontend/src/components/ui/input.jsx
index ac963997f0..8282d6f277 100644
--- a/frontend/src/components/ui/input.jsx
+++ b/frontend/src/components/ui/input.jsx
@@ -1,3 +1,4 @@
 import InputComponent from './Input/Index';
+import EditableTitleInput from './Input/EditableTitleInput/Index';
 
-export { InputComponent as Input };
+export { InputComponent as Input, EditableTitleInput };

From 4e4ea4381b6287a9fc9b84283293e2bce52e405a Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Thu, 16 Oct 2025 13:39:27 +0530
Subject: [PATCH 070/157] Separates New Components from the branch

---
 frontend/src/_ui/Alert/Alert.stories.jsx      | 308 -----------
 .../components/Auth/AuthCenteredLayout.jsx    |   9 -
 frontend/src/components/Auth/AuthLayout.jsx   |  19 -
 frontend/src/components/Auth/FeatureList.jsx  |  57 --
 .../components/Auth/ForgotPasswordForm.jsx    | 189 -------
 .../Auth/ForgotPasswordInfoScreen.jsx         | 123 -----
 frontend/src/components/Auth/FormWrapper.jsx  |  12 -
 .../components/Auth/GitHubSigninButton.jsx    |  21 -
 .../components/Auth/GoogleSigninButton.jsx    |  21 -
 .../src/components/Auth/InviteSignupForm.jsx  | 163 ------
 .../src/components/Auth/JoinWorkspaceForm.jsx | 171 ------
 frontend/src/components/Auth/LoginForm.jsx    | 240 ---------
 .../src/components/Auth/SetupAdminForm.jsx    | 215 --------
 .../Auth/SignInWithPrefilledEmail.jsx         | 166 ------
 .../src/components/Auth/SignupFormWithSSO.jsx | 291 ----------
 .../src/components/Auth/SignupSuccessInfo.jsx | 165 ------
 .../Stories/AuthCenteredLayout.stories.jsx    |  85 ---
 .../Auth/Stories/AuthLayout.stories.jsx       | 160 ------
 .../Stories/ForgotPasswordFlow.stories.jsx    |  92 ----
 .../Stories/ForgotPasswordForm.stories.jsx    | 188 -------
 .../ForgotPasswordInfoScreen.stories.jsx      | 167 ------
 .../Stories/GitHubSigninButton.stories.jsx    |  62 ---
 .../Stories/GoogleSigninButton.stories.jsx    |  62 ---
 .../Auth/Stories/LoginFlow.stories.jsx        |  94 ----
 .../Auth/Stories/LoginForm.stories.jsx        | 504 ------------------
 .../Auth/Stories/LoginPage.stories.jsx        |  99 ----
 .../Auth/Stories/SetupAdminForm.stories.jsx   | 328 ------------
 .../Auth/Stories/SignupFlow.stories.jsx       | 145 -----
 .../Stories/SignupFormWithSSO.stories.jsx     | 280 ----------
 .../Stories/SignupSuccessInfo.stories.jsx     | 305 -----------
 .../Auth/Stories/TeamInviteFlow.stories.jsx   |  92 ----
 frontend/src/components/ui/Alert/Alert.jsx    |  68 ---
 .../components/ui/EncryptedField/Index.jsx    |  40 --
 .../components/ui/InlineInfo/InlineInfo.jsx   |  38 --
 .../ui/InlineInfo/InlineInfo.stories.jsx      | 200 -------
 frontend/src/components/ui/alert.jsx          |   3 -
 frontend/src/components/ui/button.jsx         |   3 -
 frontend/src/components/ui/card.jsx           |   3 -
 frontend/src/components/ui/input.jsx          |   4 -
 frontend/src/components/ui/label.jsx          |   3 -
 frontend/src/hooks/usePasswordInput.js        |  47 --
 41 files changed, 5242 deletions(-)
 delete mode 100644 frontend/src/_ui/Alert/Alert.stories.jsx
 delete mode 100644 frontend/src/components/Auth/AuthCenteredLayout.jsx
 delete mode 100644 frontend/src/components/Auth/AuthLayout.jsx
 delete mode 100644 frontend/src/components/Auth/FeatureList.jsx
 delete mode 100644 frontend/src/components/Auth/ForgotPasswordForm.jsx
 delete mode 100644 frontend/src/components/Auth/ForgotPasswordInfoScreen.jsx
 delete mode 100644 frontend/src/components/Auth/FormWrapper.jsx
 delete mode 100644 frontend/src/components/Auth/GitHubSigninButton.jsx
 delete mode 100644 frontend/src/components/Auth/GoogleSigninButton.jsx
 delete mode 100644 frontend/src/components/Auth/InviteSignupForm.jsx
 delete mode 100644 frontend/src/components/Auth/JoinWorkspaceForm.jsx
 delete mode 100644 frontend/src/components/Auth/LoginForm.jsx
 delete mode 100644 frontend/src/components/Auth/SetupAdminForm.jsx
 delete mode 100644 frontend/src/components/Auth/SignInWithPrefilledEmail.jsx
 delete mode 100644 frontend/src/components/Auth/SignupFormWithSSO.jsx
 delete mode 100644 frontend/src/components/Auth/SignupSuccessInfo.jsx
 delete mode 100644 frontend/src/components/Auth/Stories/AuthCenteredLayout.stories.jsx
 delete mode 100644 frontend/src/components/Auth/Stories/AuthLayout.stories.jsx
 delete mode 100644 frontend/src/components/Auth/Stories/ForgotPasswordFlow.stories.jsx
 delete mode 100644 frontend/src/components/Auth/Stories/ForgotPasswordForm.stories.jsx
 delete mode 100644 frontend/src/components/Auth/Stories/ForgotPasswordInfoScreen.stories.jsx
 delete mode 100644 frontend/src/components/Auth/Stories/GitHubSigninButton.stories.jsx
 delete mode 100644 frontend/src/components/Auth/Stories/GoogleSigninButton.stories.jsx
 delete mode 100644 frontend/src/components/Auth/Stories/LoginFlow.stories.jsx
 delete mode 100644 frontend/src/components/Auth/Stories/LoginForm.stories.jsx
 delete mode 100644 frontend/src/components/Auth/Stories/LoginPage.stories.jsx
 delete mode 100644 frontend/src/components/Auth/Stories/SetupAdminForm.stories.jsx
 delete mode 100644 frontend/src/components/Auth/Stories/SignupFlow.stories.jsx
 delete mode 100644 frontend/src/components/Auth/Stories/SignupFormWithSSO.stories.jsx
 delete mode 100644 frontend/src/components/Auth/Stories/SignupSuccessInfo.stories.jsx
 delete mode 100644 frontend/src/components/Auth/Stories/TeamInviteFlow.stories.jsx
 delete mode 100644 frontend/src/components/ui/Alert/Alert.jsx
 delete mode 100644 frontend/src/components/ui/EncryptedField/Index.jsx
 delete mode 100644 frontend/src/components/ui/InlineInfo/InlineInfo.jsx
 delete mode 100644 frontend/src/components/ui/InlineInfo/InlineInfo.stories.jsx
 delete mode 100644 frontend/src/components/ui/alert.jsx
 delete mode 100644 frontend/src/components/ui/button.jsx
 delete mode 100644 frontend/src/components/ui/card.jsx
 delete mode 100644 frontend/src/components/ui/input.jsx
 delete mode 100644 frontend/src/components/ui/label.jsx
 delete mode 100644 frontend/src/hooks/usePasswordInput.js

diff --git a/frontend/src/_ui/Alert/Alert.stories.jsx b/frontend/src/_ui/Alert/Alert.stories.jsx
deleted file mode 100644
index 23edcfa03f..0000000000
--- a/frontend/src/_ui/Alert/Alert.stories.jsx
+++ /dev/null
@@ -1,308 +0,0 @@
-import React from 'react';
-import { Alert, AlertTitle, AlertDescription } from '../../components/ui/Alert/Alert';
-import { Info, AlertTriangle, AlertCircle, CheckCircle } from 'lucide-react';
-
-// Storybook configuration
-export default {
-  title: 'Components/Alert',
-  component: Alert,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Alert component for displaying important messages to users with various types and background variants.',
-      },
-    },
-  },
-  argTypes: {
-    type: {
-      control: { type: 'select' },
-      options: ['info', 'warning', 'danger'],
-      description: 'The type of alert',
-    },
-    background: {
-      control: { type: 'select' },
-      options: ['none', 'grey', 'white', 'state-specific'],
-      description: 'The background variant of the alert',
-    },
-    children: {
-      control: 'text',
-      description: 'The message content to display in the alert',
-    },
-    className: {
-      control: 'text',
-      description: 'Additional CSS classes to apply to the alert container',
-    },
-  },
-};
-
-// Template for stories
-const Template = (args) => <Alert {...args} />;
-
-// Default alert
-export const Default = Template.bind({});
-Default.args = {
-  type: 'info',
-  background: 'none',
-  children: (
-    <>
-      <Info className="tw-w-4 tw-h-4 tw-text-icon-brand" />
-      <div className="tw-flex tw-flex-col tw-gap-2">
-        <AlertTitle>Default Alert</AlertTitle>
-        <AlertDescription>This is a default alert message.</AlertDescription>
-      </div>
-    </>
-  ),
-};
-
-// Alert variants with different types
-export const InfoAlert = Template.bind({});
-InfoAlert.args = {
-  type: 'info',
-  background: 'none',
-  children: (
-    <>
-      <Info className="tw-w-4 tw-h-4 tw-text-icon-brand" />
-      <div className="tw-flex tw-flex-col tw-gap-2">
-        <AlertTitle>Information</AlertTitle>
-        <AlertDescription>This is an informational alert message.</AlertDescription>
-      </div>
-    </>
-  ),
-};
-
-export const Warning = Template.bind({});
-Warning.args = {
-  type: 'warning',
-  background: 'none',
-  children: (
-    <>
-      <AlertTriangle className="tw-w-4 tw-h-4 tw-text-icon-warning" />
-      <div className="tw-flex tw-flex-col tw-gap-2">
-        <AlertTitle>Warning</AlertTitle>
-        <AlertDescription>This is a warning alert message.</AlertDescription>
-      </div>
-    </>
-  ),
-};
-
-export const Danger = Template.bind({});
-Danger.args = {
-  type: 'danger',
-  background: 'none',
-  children: (
-    <>
-      <AlertCircle className="tw-w-4 tw-h-4 tw-text-icon-danger" />
-      <div className="tw-flex tw-flex-col tw-gap-2">
-        <AlertTitle>Error</AlertTitle>
-        <AlertDescription>This is an error alert message.</AlertDescription>
-      </div>
-    </>
-  ),
-};
-
-// Background variants
-export const GreyBackground = Template.bind({});
-GreyBackground.args = {
-  type: 'info',
-  background: 'grey',
-  children: (
-    <>
-      <Info className="tw-w-4 tw-h-4 tw-text-icon-brand" />
-      <div className="tw-flex tw-flex-col tw-gap-2">
-        <AlertTitle>Grey Background</AlertTitle>
-        <AlertDescription>This alert has a grey background.</AlertDescription>
-      </div>
-    </>
-  ),
-};
-
-export const WhiteBackground = Template.bind({});
-WhiteBackground.args = {
-  type: 'info',
-  background: 'white',
-  children: (
-    <>
-      <Info className="tw-w-4 tw-h-4 tw-text-icon-brand" />
-      <div className="tw-flex tw-flex-col tw-gap-2">
-        <AlertTitle>White Background</AlertTitle>
-        <AlertDescription>This alert has a white background with shadow.</AlertDescription>
-      </div>
-    </>
-  ),
-};
-
-export const StateSpecificBackground = Template.bind({});
-StateSpecificBackground.args = {
-  type: 'info',
-  background: 'state-specific',
-  children: (
-    <>
-      <Info className="tw-w-4 tw-h-4 tw-text-icon-brand" />
-      <div className="tw-flex tw-flex-col tw-gap-2">
-        <AlertTitle>State Specific Background</AlertTitle>
-        <AlertDescription>This alert has a state-specific colored background.</AlertDescription>
-      </div>
-    </>
-  ),
-};
-
-// Long message variant
-export const LongMessage = Template.bind({});
-LongMessage.args = {
-  type: 'warning',
-  background: 'white',
-  children: (
-    <>
-      <AlertTriangle className="tw-w-4 tw-h-4 tw-text-icon-warning" />
-      <div className="tw-flex tw-flex-col tw-gap-2">
-        <AlertTitle>Long Message Alert</AlertTitle>
-        <AlertDescription>
-          This is a very long alert message that demonstrates how the alert component handles text wrapping and
-          overflow. The message should wrap properly and maintain good readability even with extended content that spans
-          multiple lines.
-        </AlertDescription>
-      </div>
-    </>
-  ),
-};
-
-// No icon variant
-export const NoIcon = Template.bind({});
-NoIcon.args = {
-  type: 'info',
-  background: 'none',
-  children: (
-    <div className="tw-flex tw-flex-col tw-gap-2">
-      <AlertTitle>No Icon Alert</AlertTitle>
-      <AlertDescription>This alert has no icon.</AlertDescription>
-    </div>
-  ),
-};
-
-// All variants showcase
-export const AllVariants = () => {
-  const types = ['info', 'warning', 'danger'];
-  const backgrounds = ['none', 'grey', 'white', 'state-specific'];
-  const icons = {
-    info: Info,
-    warning: AlertTriangle,
-    danger: AlertCircle,
-  };
-  const titles = {
-    info: 'Information',
-    warning: 'Warning',
-    danger: 'Error',
-  };
-  const descriptions = {
-    info: 'This is an informational message.',
-    warning: 'Please review your settings before proceeding.',
-    danger: 'Something went wrong. Please try again.',
-  };
-
-  return (
-    <div className="tw-space-y-8">
-      <div>
-        <h2 className="tw-text-2xl tw-font-bold tw-mb-4">Alert Component - All Variants</h2>
-        <p className="tw-text-gray-600 tw-mb-6">Showcasing all 12 variants (3 types × 4 backgrounds)</p>
-      </div>
-
-      {types.map((type) => (
-        <div key={type} className="tw-space-y-4">
-          <h3 className="tw-text-lg tw-font-semibold tw-capitalize tw-text-gray-800">{type} Type</h3>
-          <div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4">
-            {backgrounds.map((background) => {
-              const Icon = icons[type];
-              return (
-                <div key={`${type}-${background}`} className="tw-space-y-2">
-                  <div className="tw-text-sm tw-font-medium tw-text-gray-600 tw-capitalize">
-                    {background.replace('-', ' ')} Background
-                  </div>
-                  <Alert type={type} background={background}>
-                    <Icon className="tw-w-4 tw-h-4" />
-                    <div className="tw-flex tw-flex-col tw-gap-2">
-                      <AlertTitle>{titles[type]}</AlertTitle>
-                      <AlertDescription>{descriptions[type]}</AlertDescription>
-                    </div>
-                  </Alert>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-// Background variants showcase
-export const BackgroundVariants = () => (
-  <div className="tw-space-y-4">
-    <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Background Variants</h3>
-
-    <Alert type="info" background="none">
-      <Info className="tw-w-4 tw-h-4 tw-text-icon-brand" />
-      <div className="tw-flex tw-flex-col tw-gap-2">
-        <AlertTitle>No Background</AlertTitle>
-        <AlertDescription>Alert with no background</AlertDescription>
-      </div>
-    </Alert>
-
-    <Alert type="info" background="grey">
-      <Info className="tw-w-4 tw-h-4 tw-text-icon-brand" />
-      <div className="tw-flex tw-flex-col tw-gap-2">
-        <AlertTitle>Grey Background</AlertTitle>
-        <AlertDescription>Alert with grey background</AlertDescription>
-      </div>
-    </Alert>
-
-    <Alert type="info" background="white">
-      <Info className="tw-w-4 tw-h-4 tw-text-icon-brand" />
-      <div className="tw-flex tw-flex-col tw-gap-2">
-        <AlertTitle>White Background</AlertTitle>
-        <AlertDescription>Alert with white background and shadow</AlertDescription>
-      </div>
-    </Alert>
-
-    <Alert type="info" background="state-specific">
-      <Info className="tw-w-4 tw-h-4 tw-text-icon-brand" />
-      <div className="tw-flex tw-flex-col tw-gap-2">
-        <AlertTitle>State Specific Background</AlertTitle>
-        <AlertDescription>Alert with state-specific colored background</AlertDescription>
-      </div>
-    </Alert>
-  </div>
-);
-
-// Type variants showcase
-export const TypeVariants = () => (
-  <div className="tw-space-y-4">
-    <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Type Variants</h3>
-
-    <Alert type="info" background="state-specific">
-      <Info className="tw-w-4 tw-h-4 tw-text-icon-brand" />
-      <div className="tw-flex tw-flex-col tw-gap-2">
-        <AlertTitle>Information</AlertTitle>
-        <AlertDescription>This is an informational alert with blue accent</AlertDescription>
-      </div>
-    </Alert>
-
-    <Alert type="warning" background="state-specific">
-      <AlertTriangle className="tw-w-4 tw-h-4 tw-text-icon-warning" />
-      <div className="tw-flex tw-flex-col tw-gap-2">
-        <AlertTitle>Warning</AlertTitle>
-        <AlertDescription>This is a warning alert with orange accent</AlertDescription>
-      </div>
-    </Alert>
-
-    <Alert type="danger" background="state-specific">
-      <AlertCircle className="tw-w-4 tw-h-4 tw-text-icon-danger" />
-      <div className="tw-flex tw-flex-col tw-gap-2">
-        <AlertTitle>Error</AlertTitle>
-        <AlertDescription>This is an error alert with red accent</AlertDescription>
-      </div>
-    </Alert>
-  </div>
-);
diff --git a/frontend/src/components/Auth/AuthCenteredLayout.jsx b/frontend/src/components/Auth/AuthCenteredLayout.jsx
deleted file mode 100644
index d0e7b9e5de..0000000000
--- a/frontend/src/components/Auth/AuthCenteredLayout.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-
-export const AuthCenteredLayout = ({ children }) => {
-  return (
-    <div className="tw-flex tw-min-h-svh tw-w-full tw-items-center tw-justify-center tw-p-6 md:tw-p-10">
-      <div className="tw-w-full tw-max-w-sm">{children}</div>
-    </div>
-  );
-};
diff --git a/frontend/src/components/Auth/AuthLayout.jsx b/frontend/src/components/Auth/AuthLayout.jsx
deleted file mode 100644
index 52f786586f..0000000000
--- a/frontend/src/components/Auth/AuthLayout.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import FeatureList from './FeatureList';
-
-export const AuthLayout = ({ children }) => {
-  return (
-    <div className="tw-grid tw-min-h-svh lg:tw-grid-cols-[38%_1fr] tw-bg-background-surface-layer-01">
-      <div className="tw-flex tw-flex-col tw-gap-4 tw-p-6 md:tw-p-10">
-        <div className="tw-flex tw-flex-1 tw-items-center tw-justify-center">
-          <div className="tw-w-full tw-max-w-xs">{children}</div>
-        </div>
-      </div>
-      <div className="tw-bg-muted tw-relative tw-hidden lg:tw-block tw-h-full tw-w-full tw-p-4">
-        <div className="tw-h-full tw-w-full tw-rounded-2xl tw-object-cover tw-bg-[linear-gradient(90deg,hsla(176,61%,87%,1)_0%,hsla(150,54%,86%,1)_50%,hsla(301,68%,84%,1)_100%)] tw-flex tw-items-center tw-justify-center tw-p-8">
-          <FeatureList />
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/frontend/src/components/Auth/FeatureList.jsx b/frontend/src/components/Auth/FeatureList.jsx
deleted file mode 100644
index f712b85e9f..0000000000
--- a/frontend/src/components/Auth/FeatureList.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import { DynamicIcon } from 'lucide-react/dynamic';
-
-const FeatureList = () => {
-  const features = [
-    {
-      icon: 'zap',
-      title: 'Build apps, fast',
-      description: 'Turn ideas into production-ready business\napplications in minutes with AI and low-code.',
-      className: 'tw-text-[#FBCA73]',
-    },
-    {
-      icon: 'workflow',
-      title: 'Automate business processes',
-      description: 'Use workflows and AI agents to streamline\nprocesses and drive real outcomes.',
-      className: 'tw-text-[#486AE1]',
-    },
-    {
-      icon: 'puzzle',
-      title: 'Connect your data',
-      description: 'Integrate with 70+ data sources instantly.',
-      className: 'tw-text-[#9D78E7]',
-    },
-    {
-      icon: 'key-round',
-      title: 'Secure by default',
-      description: 'Enterprise-grade compliance: authentication,\nauthorization, CI/CD, audit logs, and more.',
-      className: 'tw-text-[#33B480]',
-    },
-  ];
-
-  return (
-    <div className="tw-flex tw-flex-col tw-gap-16 tw-items-start tw-relative tw-w-full tw-max-w-md">
-      {features.map((feature) => (
-        <div key={feature.icon} className="tw-flex tw-gap-5 tw-items-start tw-relative tw-shrink-0 tw-w-full">
-          <div className="tw-overflow-clip tw-relative tw-shrink-0 tw-w-16 tw-h-16 tw-flex tw-items-center tw-justify-center">
-            <DynamicIcon name={feature.icon} size={30} className={feature.className} />
-          </div>
-          <div className="tw-flex tw-flex-col tw-gap-1.5 tw-items-start tw-relative tw-shrink-0 tw-flex-1">
-            <div className="tw-flex tw-flex-col tw-items-start tw-relative tw-shrink-0 tw-w-full">
-              <div className="tw-flex tw-gap-3 tw-items-center tw-relative tw-shrink-0">
-                <h3 className="tw-font-medium tw-leading-8 tw-not-italic tw-relative tw-shrink-0 tw-text-text-default tw-text-xl tw-tracking-[-0.4px] tw-m-0">
-                  {feature.title}
-                </h3>
-              </div>
-            </div>
-            <p className="tw-font-normal tw-leading-6 tw-not-italic tw-relative tw-shrink-0 tw-text-text-placeholder tw-text-[15px] tw-tracking-[-0.3px] tw-w-full tw-whitespace-pre-line tw-m-0">
-              {feature.description}
-            </p>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default FeatureList;
diff --git a/frontend/src/components/Auth/ForgotPasswordForm.jsx b/frontend/src/components/Auth/ForgotPasswordForm.jsx
deleted file mode 100644
index b345e1653c..0000000000
--- a/frontend/src/components/Auth/ForgotPasswordForm.jsx
+++ /dev/null
@@ -1,189 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
-import { CornerDownLeft, Info } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { FormWrapper } from '@/components/Auth/FormWrapper';
-import { InlineInfoCompound } from '@/components/ui/InlineInfo/InlineInfo';
-
-export function ForgotPasswordForm({ className, ...props }) {
-  const {
-    // Header and sign up section
-    headerText,
-    signupText,
-    signupUrl,
-    signupCTA,
-    showSignup,
-
-    // Form fields
-    emailLabel,
-    emailPlaceholder,
-
-    // Button
-    buttonText,
-
-    // Admin banner
-    adminContactText,
-    showAdminBanner,
-    showSeparator,
-
-    // Form functionality
-    onSubmit,
-    emailValue,
-    onEmailChange,
-
-    // Validation and state
-    emailValidation,
-    emailValidationMessage,
-    isLoading,
-    disabled,
-  } = props;
-
-  return (
-    <FormWrapper>
-      <form className={cn('tw-flex tw-flex-col tw-gap-6', className)} onSubmit={onSubmit} {...props}>
-        <div className="tw-flex tw-flex-col tw-gap-0.5 tw-min-w-96">
-          <h1 className="tw-text-4xl tw-tracking-tight tw-font-medium tw-mb-0" data-cy="forgot-password-header">
-            {headerText}
-          </h1>
-
-          {showSignup && (
-            <p className="tw-text-balance tw-text-sm tw-text-text-placeholder tw-mb-0">
-              <span>{signupText}</span>
-              <span>
-                <Link
-                  to={signupUrl}
-                  className="tw-text-text-brand tw-text-[11px] tw-font-medium tw-no-underline tw-pl-1.5 tw-pb-0.5 tw-self-center hover:tw-text-button-primary-hover"
-                  tabIndex="-1"
-                  data-cy="create-an-account-link"
-                >
-                  {signupCTA}
-                </Link>
-              </span>
-            </p>
-          )}
-        </div>
-
-        <div className="tw-grid tw-gap-4">
-          <div className="tw-grid tw-gap-0.5">
-            <Label htmlFor="email" size="large">
-              {emailLabel}
-            </Label>
-            <Input
-              type="email"
-              placeholder={emailPlaceholder}
-              value={emailValue}
-              onChange={onEmailChange}
-              disabled={disabled}
-              required
-              validation={emailValidation}
-              isValidatedMessages={emailValidationMessage}
-              size="large"
-            />
-          </div>
-
-          <Button
-            size="large"
-            type="submit"
-            className="tw-w-fit"
-            disabled={disabled || isLoading}
-            isLoading={isLoading}
-          >
-            {buttonText}
-            <CornerDownLeft width="16" height="16" />
-          </Button>
-
-          {showSeparator && (
-            <div className="tw-relative tw-flex tw-items-center tw-text-center tw-text-sm">
-              <div className="tw-flex-1 tw-h-px tw-bg-border-weak" />
-              <span className="tw-px-2 tw-text-text-placeholder tw-text-lg tw-font-medium">OR</span>
-              <div className="tw-flex-1 tw-h-px tw-bg-border-weak" />
-            </div>
-          )}
-
-          {showAdminBanner && (
-            <InlineInfoCompound
-              type="info"
-              background="state-specific"
-              icon={Info}
-              description={adminContactText}
-              data-cy="admin-contact-banner"
-            />
-          )}
-        </div>
-      </form>
-    </FormWrapper>
-  );
-}
-
-ForgotPasswordForm.propTypes = {
-  className: PropTypes.string,
-
-  // Header and sign up section
-  headerText: PropTypes.string,
-  signupText: PropTypes.string,
-  signupUrl: PropTypes.string,
-  signupCTA: PropTypes.string,
-  showSignup: PropTypes.bool,
-
-  // Form fields
-  emailLabel: PropTypes.string,
-  emailPlaceholder: PropTypes.string,
-
-  // Button
-  buttonText: PropTypes.string,
-
-  // Admin banner
-  adminContactText: PropTypes.string,
-  showAdminBanner: PropTypes.bool,
-  showSeparator: PropTypes.bool,
-
-  // Form functionality
-  onSubmit: PropTypes.func,
-  emailValue: PropTypes.string,
-  onEmailChange: PropTypes.func,
-
-  // Validation and state
-  emailValidation: PropTypes.func,
-  emailValidationMessage: PropTypes.object,
-  isLoading: PropTypes.bool,
-  disabled: PropTypes.bool,
-};
-
-ForgotPasswordForm.defaultProps = {
-  className: '',
-
-  // Header and sign up section
-  headerText: 'Forgot Password',
-  signupText: 'New to ToolJet?',
-  signupUrl: '#',
-  signupCTA: 'Create an account',
-  showSignup: true,
-
-  // Form fields
-  emailLabel: 'Email address',
-  emailPlaceholder: 'Enter email address',
-
-  // Button
-  buttonText: 'Send a reset link',
-
-  // Admin banner
-  adminContactText: 'Contact admin to reset your password',
-  showAdminBanner: true,
-  showSeparator: true,
-
-  // Form functionality
-  onSubmit: undefined,
-  emailValue: undefined,
-  onEmailChange: undefined,
-
-  // Validation and state
-  emailValidation: undefined,
-  emailValidationMessage: undefined,
-  isLoading: false,
-  disabled: false,
-};
diff --git a/frontend/src/components/Auth/ForgotPasswordInfoScreen.jsx b/frontend/src/components/Auth/ForgotPasswordInfoScreen.jsx
deleted file mode 100644
index 9b1607aacf..0000000000
--- a/frontend/src/components/Auth/ForgotPasswordInfoScreen.jsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { ArrowLeft } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
-import { FormWrapper } from '@/components/Auth/FormWrapper';
-
-export function ForgotPasswordInfoScreen({ className, ...props }) {
-  const {
-    // Header
-    headerText,
-
-    // Message content
-    messageText,
-    email,
-
-    // Info text
-    infoText,
-    showInfo,
-
-    // Button
-    buttonText,
-    onBackToLogin,
-
-    // Separator
-    showSeparator,
-  } = props;
-
-  return (
-    <FormWrapper>
-      <div className={cn('tw-flex tw-flex-col tw-gap-6 tw-min-w-96', className)} {...props}>
-        <div className="tw-flex tw-flex-col tw-gap-0.5">
-          <h1 className="tw-text-4xl tw-tracking-tight tw-font-medium tw-mb-0" data-cy="forgot-password-info-header">
-            {headerText}
-          </h1>
-        </div>
-
-        <div className="tw-flex tw-flex-col tw-gap-4">
-          <p className="tw-text-balance tw-text-sm tw-text-text-placeholder tw-mb-0" data-cy="forgot-password-message">
-            {messageText}
-            {email && (
-              <>
-                {' '}
-                <span className="tw-font-medium tw-text-text-brand">{email}</span>
-              </>
-            )}
-            .
-          </p>
-
-          {showInfo && (
-            <p className="tw-text-sm tw-text-text-placeholder tw-mb-0" data-cy="forgot-password-info">
-              {infoText}
-            </p>
-          )}
-
-          {showSeparator && (
-            <div className="tw-relative tw-flex tw-items-center tw-text-center tw-text-sm">
-              <div className="tw-flex-1 tw-h-px tw-bg-border-weak" />
-              <span className="tw-px-2 tw-text-muted-foreground">OR</span>
-              <div className="tw-flex-1 tw-h-px tw-bg-border-weak" />
-            </div>
-          )}
-
-          <Button
-            size="default"
-            variant="outline"
-            className="tw-w-fit"
-            onClick={onBackToLogin}
-            data-cy="back-to-login-button"
-          >
-            <ArrowLeft width="16" height="16" />
-            {buttonText}
-          </Button>
-        </div>
-      </div>
-    </FormWrapper>
-  );
-}
-
-ForgotPasswordInfoScreen.propTypes = {
-  className: PropTypes.string,
-
-  // Header
-  headerText: PropTypes.string,
-
-  // Message content
-  messageText: PropTypes.string,
-  email: PropTypes.string,
-
-  // Info text
-  infoText: PropTypes.string,
-  showInfo: PropTypes.bool,
-
-  // Button
-  buttonText: PropTypes.string,
-  onBackToLogin: PropTypes.func,
-
-  // Separator
-  showSeparator: PropTypes.bool,
-};
-
-ForgotPasswordInfoScreen.defaultProps = {
-  className: '',
-
-  // Header
-  headerText: 'Check your mail',
-
-  // Message content
-  messageText: "We've sent a password reset link to",
-  email: '',
-
-  // Info text
-  infoText: 'Did not receive an email? Check your spam folder!',
-  showInfo: true,
-
-  // Button
-  buttonText: 'Back to login',
-  onBackToLogin: undefined,
-
-  // Separator
-  showSeparator: true,
-};
diff --git a/frontend/src/components/Auth/FormWrapper.jsx b/frontend/src/components/Auth/FormWrapper.jsx
deleted file mode 100644
index f38dab890d..0000000000
--- a/frontend/src/components/Auth/FormWrapper.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react';
-
-import Logo from '@/modules/common/resources/images/Logo';
-
-export const FormWrapper = ({ children }) => {
-  return (
-    <div className="tw-flex tw-flex-col tw-gap-9">
-      <Logo />
-      {children}
-    </div>
-  );
-};
diff --git a/frontend/src/components/Auth/GitHubSigninButton.jsx b/frontend/src/components/Auth/GitHubSigninButton.jsx
deleted file mode 100644
index cd4b75c32e..0000000000
--- a/frontend/src/components/Auth/GitHubSigninButton.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import { Button } from '@/components/ui/button';
-import SolidIcon from '@/_ui/Icon/SolidIcons';
-
-export const GitHubSigninButton = ({ onClick, icon, text, dataCy }) => {
-  return (
-    <Button
-      onClick={onClick}
-      data-cy={dataCy}
-      type="button"
-      variant="outline"
-      size="large"
-      className="tw-justify-center"
-    >
-      <SolidIcon name="github" />
-      <span className="sso-text" data-cy={`${dataCy}-text`}>
-        {text}
-      </span>
-    </Button>
-  );
-};
diff --git a/frontend/src/components/Auth/GoogleSigninButton.jsx b/frontend/src/components/Auth/GoogleSigninButton.jsx
deleted file mode 100644
index 4246f24ef2..0000000000
--- a/frontend/src/components/Auth/GoogleSigninButton.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import { Button } from '@/components/ui/button';
-import SolidIcon from '@/_ui/Icon/SolidIcons';
-
-export const GoogleSigninButton = ({ onClick, icon, text, dataCy }) => {
-  return (
-    <Button
-      onClick={onClick}
-      data-cy={dataCy}
-      type="button"
-      variant="outline"
-      size="large"
-      className="tw-justify-center"
-    >
-      <SolidIcon name="google" />
-      <span className="sso-text" data-cy={`${dataCy}-text`}>
-        {text}
-      </span>
-    </Button>
-  );
-};
diff --git a/frontend/src/components/Auth/InviteSignupForm.jsx b/frontend/src/components/Auth/InviteSignupForm.jsx
deleted file mode 100644
index 17bdd508ff..0000000000
--- a/frontend/src/components/Auth/InviteSignupForm.jsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { CornerDownLeft } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { FormWrapper } from '@/components/Auth/FormWrapper';
-
-export function InviteSignupForm({ className, ...props }) {
-  const {
-    // Header section
-    headerText,
-    descriptionText,
-
-    // Form fields
-    emailLabel,
-    emailPlaceholder,
-    emailValue,
-    emailDisabled,
-
-    passwordLabel,
-    passwordPlaceholder,
-    passwordValue,
-    onPasswordChange,
-    passwordValidation,
-    passwordValidationMessage,
-
-    // Button
-    buttonText,
-
-    // Form functionality
-    onSubmit,
-
-    // Validation and state
-    isLoading,
-    disabled,
-  } = props;
-
-  return (
-    <FormWrapper>
-      <form className={cn('tw-flex tw-flex-col tw-gap-6', className)} onSubmit={onSubmit} {...props}>
-        <div className="tw-flex tw-flex-col tw-gap-2 tw-min-w-20">
-          <h1 className="tw-text-4xl tw-tracking-tight tw-font-medium tw-mb-0" data-cy="">
-            {headerText}
-          </h1>
-
-          {descriptionText && (
-            <p className="tw-text-balance tw-text-sm tw-text-text-placeholder tw-mb-0">{descriptionText}</p>
-          )}
-        </div>
-
-        <div className="tw-grid tw-gap-4">
-          <div className="tw-grid tw-gap-0.5">
-            <Label htmlFor="email" size="large">
-              {emailLabel}
-            </Label>
-            <Input
-              type="email"
-              placeholder={emailPlaceholder}
-              value={emailValue}
-              disabled={emailDisabled || disabled}
-              required
-              size="large"
-            />
-          </div>
-
-          <div className="tw-grid tw-gap-0.5">
-            <Label htmlFor="password" size="large">
-              {passwordLabel}
-            </Label>
-            <Input
-              type="password"
-              placeholder={passwordPlaceholder}
-              value={passwordValue}
-              onChange={onPasswordChange}
-              disabled={disabled}
-              showEncryption={false}
-              required
-              validation={passwordValidation}
-              isValidatedMessages={passwordValidationMessage}
-              size="large"
-            />
-          </div>
-
-          <Button
-            size="large"
-            type="submit"
-            className="tw-w-fit"
-            disabled={disabled || isLoading}
-            isLoading={isLoading}
-          >
-            {buttonText}
-            <CornerDownLeft width="16" height="16" />
-          </Button>
-        </div>
-      </form>
-    </FormWrapper>
-  );
-}
-
-InviteSignupForm.propTypes = {
-  className: PropTypes.string,
-
-  // Header section
-  headerText: PropTypes.string,
-  descriptionText: PropTypes.string,
-
-  // Form fields
-  emailLabel: PropTypes.string,
-  emailPlaceholder: PropTypes.string,
-  emailValue: PropTypes.string,
-  emailDisabled: PropTypes.bool,
-
-  passwordLabel: PropTypes.string,
-  passwordPlaceholder: PropTypes.string,
-  passwordValue: PropTypes.string,
-  onPasswordChange: PropTypes.func,
-  passwordValidation: PropTypes.func,
-  passwordValidationMessage: PropTypes.object,
-
-  // Button
-  buttonText: PropTypes.string,
-
-  // Form functionality
-  onSubmit: PropTypes.func,
-
-  // Validation and state
-  isLoading: PropTypes.bool,
-  disabled: PropTypes.bool,
-};
-
-InviteSignupForm.defaultProps = {
-  className: '',
-
-  // Header section
-  headerText: 'Sign up',
-  descriptionText: '',
-
-  // Form fields
-  emailLabel: 'Email',
-  emailPlaceholder: 'Enter your email',
-  emailValue: '',
-  emailDisabled: true,
-
-  passwordLabel: 'Password',
-  passwordPlaceholder: 'Create password',
-  passwordValue: '',
-  onPasswordChange: undefined,
-  passwordValidation: undefined,
-  passwordValidationMessage: undefined,
-
-  // Button
-  buttonText: 'Create account',
-
-  // Form functionality
-  onSubmit: undefined,
-
-  // Validation and state
-  isLoading: false,
-  disabled: false,
-};
diff --git a/frontend/src/components/Auth/JoinWorkspaceForm.jsx b/frontend/src/components/Auth/JoinWorkspaceForm.jsx
deleted file mode 100644
index c9a27d69ee..0000000000
--- a/frontend/src/components/Auth/JoinWorkspaceForm.jsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { CornerDownLeft } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { FormWrapper } from '@/components/Auth/FormWrapper';
-
-export function JoinWorkspaceForm({ className, ...props }) {
-  const {
-    // Header section
-    headerText,
-    descriptionText,
-
-    // Form fields
-    nameLabel,
-    namePlaceholder,
-    nameValue,
-    onNameChange,
-    nameValidation,
-    nameValidationMessage,
-
-    emailLabel,
-    emailPlaceholder,
-    emailValue,
-    onEmailChange,
-    emailValidation,
-    emailValidationMessage,
-
-    // Button
-    buttonText,
-
-    // Form functionality
-    onSubmit,
-
-    // Validation and state
-    isLoading,
-    disabled,
-  } = props;
-
-  return (
-    <FormWrapper>
-      <form className={cn('tw-flex tw-flex-col tw-gap-6', className)} onSubmit={onSubmit} {...props}>
-        <div className="tw-flex tw-flex-col tw-gap-2 tw-min-w-20">
-          <h1 className="tw-text-4xl tw-tracking-tight tw-font-medium tw-mb-0" data-cy="">
-            {headerText}
-          </h1>
-
-          {descriptionText && (
-            <p className="tw-text-balance tw-text-sm tw-text-text-placeholder tw-mb-0">{descriptionText}</p>
-          )}
-        </div>
-
-        <div className="tw-grid tw-gap-4">
-          <div className="tw-grid tw-gap-0.5">
-            <Label htmlFor="name" size="large">
-              {nameLabel}
-            </Label>
-            <Input
-              type="text"
-              placeholder={namePlaceholder}
-              value={nameValue}
-              onChange={onNameChange}
-              disabled={disabled}
-              required
-              validation={nameValidation}
-              isValidatedMessages={nameValidationMessage}
-              size="large"
-            />
-          </div>
-
-          <div className="tw-grid tw-gap-0.5">
-            <Label htmlFor="email" size="large">
-              {emailLabel}
-            </Label>
-            <Input
-              type="email"
-              placeholder={emailPlaceholder}
-              value={emailValue}
-              onChange={onEmailChange}
-              disabled={disabled}
-              required
-              validation={emailValidation}
-              isValidatedMessages={emailValidationMessage}
-              size="large"
-            />
-          </div>
-
-          <Button
-            size="large"
-            type="submit"
-            className="tw-w-fit"
-            disabled={disabled || isLoading}
-            isLoading={isLoading}
-          >
-            {buttonText}
-            <CornerDownLeft width="16" height="16" />
-          </Button>
-        </div>
-      </form>
-    </FormWrapper>
-  );
-}
-
-JoinWorkspaceForm.propTypes = {
-  className: PropTypes.string,
-
-  // Header section
-  headerText: PropTypes.string,
-  descriptionText: PropTypes.string,
-
-  // Form fields
-  nameLabel: PropTypes.string,
-  namePlaceholder: PropTypes.string,
-  nameValue: PropTypes.string,
-  onNameChange: PropTypes.func,
-  nameValidation: PropTypes.func,
-  nameValidationMessage: PropTypes.object,
-
-  emailLabel: PropTypes.string,
-  emailPlaceholder: PropTypes.string,
-  emailValue: PropTypes.string,
-  onEmailChange: PropTypes.func,
-  emailValidation: PropTypes.func,
-  emailValidationMessage: PropTypes.object,
-
-  // Button
-  buttonText: PropTypes.string,
-
-  // Form functionality
-  onSubmit: PropTypes.func,
-
-  // Validation and state
-  isLoading: PropTypes.bool,
-  disabled: PropTypes.bool,
-};
-
-JoinWorkspaceForm.defaultProps = {
-  className: '',
-
-  // Header section
-  headerText: 'Join workspace',
-  descriptionText: '',
-
-  // Form fields
-  nameLabel: 'Name',
-  namePlaceholder: 'Enter your name',
-  nameValue: '',
-  onNameChange: undefined,
-  nameValidation: undefined,
-  nameValidationMessage: undefined,
-
-  emailLabel: 'Email',
-  emailPlaceholder: 'Enter your email',
-  emailValue: '',
-  onEmailChange: undefined,
-  emailValidation: undefined,
-  emailValidationMessage: undefined,
-
-  // Button
-  buttonText: 'Accept Invite',
-
-  // Form functionality
-  onSubmit: undefined,
-
-  // Validation and state
-  isLoading: false,
-  disabled: false,
-};
diff --git a/frontend/src/components/Auth/LoginForm.jsx b/frontend/src/components/Auth/LoginForm.jsx
deleted file mode 100644
index 0b4ad51ff0..0000000000
--- a/frontend/src/components/Auth/LoginForm.jsx
+++ /dev/null
@@ -1,240 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
-import { CornerDownLeft } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { FormWrapper } from '@/components/Auth/FormWrapper';
-
-export function LoginForm({ className, ...props }) {
-  const {
-    // Header and sign up section
-    signinHeader,
-    signUpText,
-    signUpUrl,
-    signUpCTA,
-    showSignup,
-    organizationName,
-
-    // Form fields
-    emailLabel,
-    emailPlaceholder,
-    passwordLabel,
-    passwordPlaceholder,
-
-    // Forgot password
-    showForgotPassword,
-    forgotPasswordUrl,
-    forgotPasswordText,
-
-    // Button and separator
-    signinButtonText,
-    orText,
-    showOrSeparator,
-
-    // Form functionality
-    onSubmit,
-    emailValue,
-    passwordValue,
-    onEmailChange,
-    onPasswordChange,
-
-    // Validation and state
-    emailValidation,
-    passwordValidation,
-    emailValidationMessage,
-    passwordValidationMessage,
-    isLoading,
-    disabled,
-  } = props;
-  return (
-    <FormWrapper>
-      <form className={cn('tw-flex tw-flex-col tw-gap-6', className)} onSubmit={onSubmit} {...props}>
-        <div className="tw-flex tw-flex-col tw-gap-2 tw-min-w-20">
-          <h1 className="tw-text-4xl tw-tracking-tight tw-font-medium tw-mb-0" data-cy="">
-            {signinHeader}
-          </h1>
-
-          {(organizationName || showSignup) && (
-            <p className="tw-text-balance tw-text-sm tw-text-text-placeholder tw-mb-0">
-              {organizationName && (
-                <>
-                  Sign in to the workspace -{' '}
-                  <span className="tw-font-medium" data-cy="workspace-name">
-                    {organizationName}
-                  </span>
-                  .
-                </>
-              )}{' '}
-              {showSignup && (
-                <>
-                  <span>{signUpText}</span>
-                  <span>
-                    <Link
-                      to={signUpUrl}
-                      className="tw-text-text-brand tw-text-[11px] tw-font-medium tw-no-underline tw-pl-1.5 tw-pb-0.5 tw-self-center hover:tw-text-button-primary-hover"
-                      tabIndex="-1"
-                      data-cy="create-an-account-link"
-                    >
-                      {signUpCTA}
-                    </Link>
-                  </span>
-                </>
-              )}
-            </p>
-          )}
-        </div>
-        <div className="tw-grid tw-gap-4">
-          <div className="tw-grid tw-gap-0.5">
-            <Label htmlFor="email" size="large">
-              {emailLabel}
-            </Label>
-            <Input
-              type="email"
-              placeholder={emailPlaceholder}
-              value={emailValue}
-              onChange={onEmailChange}
-              disabled={disabled}
-              required
-              validation={emailValidation}
-              isValidatedMessages={emailValidationMessage}
-              size="large"
-            />
-          </div>
-          <div className="tw-grid tw-gap-0.5">
-            <div className="tw-flex tw-items-center tw-justify-between">
-              <Label htmlFor="password" size="large">
-                {passwordLabel}
-              </Label>
-              {showForgotPassword && (
-                <Link
-                  to={forgotPasswordUrl}
-                  tabIndex="-1"
-                  className="tw-text-text-brand tw-text-[11px] tw-font-medium tw-no-underline tw-pl-1.5 tw-pb-0.5 tw-self-center hover:tw-text-button-primary-hover"
-                  data-cy="forgot-password-link"
-                >
-                  {forgotPasswordText}
-                </Link>
-              )}
-            </div>
-            <Input
-              type="password"
-              placeholder={passwordPlaceholder}
-              value={passwordValue}
-              onChange={onPasswordChange}
-              disabled={disabled}
-              showEncryption={false}
-              required
-              validation={passwordValidation}
-              isValidatedMessages={passwordValidationMessage}
-              size="large"
-            />
-          </div>
-          <Button
-            size="large"
-            type="submit"
-            className="tw-w-fit"
-            disabled={disabled || isLoading}
-            isLoading={isLoading}
-          >
-            {signinButtonText}
-            <CornerDownLeft width="16" height="16" />
-          </Button>
-          {showOrSeparator && (
-            <div className="tw-relative tw-flex tw-items-center tw-text-center tw-text-sm">
-              <div className="tw-flex-1 tw-h-px tw-bg-border-weak" />
-              <span className="tw-px-2 tw-text-muted-foreground">{orText}</span>
-              <div className="tw-flex-1 tw-h-px tw-bg-border-weak" />
-            </div>
-          )}
-        </div>
-      </form>
-    </FormWrapper>
-  );
-}
-
-LoginForm.propTypes = {
-  className: PropTypes.string,
-
-  // Header and sign up section
-  signinHeader: PropTypes.string,
-  signUpText: PropTypes.string,
-  signUpUrl: PropTypes.string,
-  signUpCTA: PropTypes.string,
-  showSignup: PropTypes.bool,
-  organizationName: PropTypes.string,
-  // Form fields
-  emailLabel: PropTypes.string,
-  emailPlaceholder: PropTypes.string,
-  passwordLabel: PropTypes.string,
-
-  // Forgot password
-  showForgotPassword: PropTypes.bool,
-  forgotPasswordUrl: PropTypes.string,
-  forgotPasswordText: PropTypes.string,
-
-  // Button and separator
-  signinButtonText: PropTypes.string,
-  orText: PropTypes.string,
-  showOrSeparator: PropTypes.bool,
-
-  // Form functionality
-  onSubmit: PropTypes.func,
-  emailValue: PropTypes.string,
-  passwordValue: PropTypes.string,
-  onEmailChange: PropTypes.func,
-  onPasswordChange: PropTypes.func,
-
-  // Validation and state
-  emailValidation: PropTypes.func,
-  passwordValidation: PropTypes.func,
-  emailValidationMessage: PropTypes.object,
-  passwordValidationMessage: PropTypes.object,
-  isLoading: PropTypes.bool,
-  disabled: PropTypes.bool,
-};
-
-LoginForm.defaultProps = {
-  className: '',
-
-  // Header and sign up section
-  signinHeader: 'Sign in',
-  signUpText: 'New to ToolJet?',
-  signUpUrl: '#',
-  signUpCTA: 'Create an account',
-  showSignup: true,
-  organizationName: '',
-  // Form fields
-  emailLabel: 'Email',
-  emailPlaceholder: 'Enter your work email',
-  passwordLabel: 'Password',
-  passwordPlaceholder: 'Enter password',
-
-  // Forgot password
-  showForgotPassword: true,
-  forgotPasswordUrl: '/forgot-password',
-  forgotPasswordText: 'Forgot?',
-
-  // Button and separator
-  signinButtonText: 'Sign in',
-  orText: 'OR',
-  showOrSeparator: true,
-
-  // Form functionality
-  onSubmit: undefined,
-  emailValue: undefined,
-  passwordValue: undefined,
-  onEmailChange: undefined,
-  onPasswordChange: undefined,
-
-  // Validation and state
-  emailValidation: undefined,
-  passwordValidation: undefined,
-  emailValidationMessage: undefined,
-  passwordValidationMessage: undefined,
-  isLoading: false,
-  disabled: false,
-};
diff --git a/frontend/src/components/Auth/SetupAdminForm.jsx b/frontend/src/components/Auth/SetupAdminForm.jsx
deleted file mode 100644
index acb873f097..0000000000
--- a/frontend/src/components/Auth/SetupAdminForm.jsx
+++ /dev/null
@@ -1,215 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { CornerDownLeft } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { FormWrapper } from '@/components/Auth/FormWrapper';
-
-export function SetupAdminForm({ className, ...props }) {
-  const {
-    // Header
-    headerText,
-
-    // Form fields
-    nameLabel,
-    namePlaceholder,
-    emailLabel,
-    emailPlaceholder,
-    passwordLabel,
-    passwordPlaceholder,
-
-    // Button
-    buttonText,
-
-    // Terms and privacy
-    termsText,
-    showTerms,
-
-    // Form functionality
-    onSubmit,
-    nameValue,
-    emailValue,
-    passwordValue,
-    onNameChange,
-    onEmailChange,
-    onPasswordChange,
-
-    // Validation and state
-    nameValidation,
-    emailValidation,
-    passwordValidation,
-    nameValidationMessage,
-    emailValidationMessage,
-    passwordValidationMessage,
-    isLoading,
-    disabled,
-  } = props;
-
-  return (
-    <FormWrapper>
-      <form className={cn('tw-flex tw-flex-col tw-gap-6', className)} onSubmit={onSubmit} {...props}>
-        <div className="tw-flex tw-flex-col tw-gap-0.5 tw-min-w-96">
-          <h1 className="tw-text-4xl tw-tracking-tight tw-font-medium tw-mb-0" data-cy="setup-admin-header">
-            {headerText}
-          </h1>
-        </div>
-
-        <div className="tw-grid tw-gap-4">
-          <div className="tw-grid tw-gap-0.5">
-            <Label htmlFor="name" size="large">
-              {nameLabel}
-            </Label>
-            <Input
-              type="text"
-              placeholder={namePlaceholder}
-              value={nameValue}
-              onChange={onNameChange}
-              disabled={disabled}
-              required
-              validation={nameValidation}
-              isValidatedMessages={nameValidationMessage}
-              size="large"
-            />
-          </div>
-
-          <div className="tw-grid tw-gap-0.5">
-            <Label htmlFor="email" size="large">
-              {emailLabel}
-            </Label>
-            <Input
-              type="email"
-              placeholder={emailPlaceholder}
-              value={emailValue}
-              onChange={onEmailChange}
-              disabled={disabled}
-              required
-              validation={emailValidation}
-              isValidatedMessages={emailValidationMessage}
-              size="large"
-            />
-          </div>
-
-          <div className="tw-grid tw-gap-0.5">
-            <Label htmlFor="password" size="large">
-              {passwordLabel}
-            </Label>
-            <Input
-              type="password"
-              placeholder={passwordPlaceholder}
-              value={passwordValue}
-              onChange={onPasswordChange}
-              disabled={disabled}
-              showEncryption={false}
-              required
-              validation={passwordValidation}
-              isValidatedMessages={passwordValidationMessage}
-              size="large"
-            />
-          </div>
-
-          <Button
-            size="large"
-            type="submit"
-            className="tw-w-fit"
-            disabled={disabled || isLoading}
-            isLoading={isLoading}
-          >
-            {buttonText}
-            <CornerDownLeft width="16" height="16" />
-          </Button>
-
-          {showTerms && (
-            <p className="tw-text-xs tw-text-text-placeholder tw-mb-0" data-cy="terms-and-privacy">
-              {termsText}
-            </p>
-          )}
-        </div>
-      </form>
-    </FormWrapper>
-  );
-}
-
-SetupAdminForm.propTypes = {
-  className: PropTypes.string,
-
-  // Header
-  headerText: PropTypes.string,
-
-  // Form fields
-  nameLabel: PropTypes.string,
-  namePlaceholder: PropTypes.string,
-  emailLabel: PropTypes.string,
-  emailPlaceholder: PropTypes.string,
-  passwordLabel: PropTypes.string,
-  passwordPlaceholder: PropTypes.string,
-
-  // Button
-  buttonText: PropTypes.string,
-
-  // Terms and privacy
-  termsText: PropTypes.string,
-  showTerms: PropTypes.bool,
-
-  // Form functionality
-  onSubmit: PropTypes.func,
-  nameValue: PropTypes.string,
-  emailValue: PropTypes.string,
-  passwordValue: PropTypes.string,
-  onNameChange: PropTypes.func,
-  onEmailChange: PropTypes.func,
-  onPasswordChange: PropTypes.func,
-
-  // Validation and state
-  nameValidation: PropTypes.func,
-  emailValidation: PropTypes.func,
-  passwordValidation: PropTypes.func,
-  nameValidationMessage: PropTypes.object,
-  emailValidationMessage: PropTypes.object,
-  passwordValidationMessage: PropTypes.object,
-  isLoading: PropTypes.bool,
-  disabled: PropTypes.bool,
-};
-
-SetupAdminForm.defaultProps = {
-  className: '',
-
-  // Header
-  headerText: 'Set up your admin account',
-
-  // Form fields
-  nameLabel: 'Name',
-  namePlaceholder: 'Enter your name',
-  emailLabel: 'Email',
-  emailPlaceholder: 'Enter your work email',
-  passwordLabel: 'Password',
-  passwordPlaceholder: 'Enter password',
-
-  // Button
-  buttonText: 'Sign up',
-
-  // Terms and privacy
-  termsText: 'By signing up, you agree to our Terms of Service and Privacy Policy',
-  showTerms: true,
-
-  // Form functionality
-  onSubmit: undefined,
-  nameValue: undefined,
-  emailValue: undefined,
-  passwordValue: undefined,
-  onNameChange: undefined,
-  onEmailChange: undefined,
-  onPasswordChange: undefined,
-
-  // Validation and state
-  nameValidation: undefined,
-  emailValidation: undefined,
-  passwordValidation: undefined,
-  nameValidationMessage: undefined,
-  emailValidationMessage: undefined,
-  passwordValidationMessage: undefined,
-  isLoading: false,
-  disabled: false,
-};
diff --git a/frontend/src/components/Auth/SignInWithPrefilledEmail.jsx b/frontend/src/components/Auth/SignInWithPrefilledEmail.jsx
deleted file mode 100644
index b22ef541f3..0000000000
--- a/frontend/src/components/Auth/SignInWithPrefilledEmail.jsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import * as React from "react";
-import PropTypes from "prop-types";
-import { CornerDownLeft } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { FormWrapper } from "@/components/Auth/FormWrapper";
-
-export function InviteSignupForm({ className, ...props }) {
-  const {
-    // Header section
-    headerText,
-    descriptionText,
-
-    // Form fields
-    emailLabel,
-    emailPlaceholder,
-    emailValue,
-    emailDisabled,
-
-    passwordLabel,
-    passwordPlaceholder,
-    passwordValue,
-    onPasswordChange,
-    passwordValidation,
-    passwordValidationMessage,
-
-    // Button
-    buttonText,
-
-    // Form functionality
-    onSubmit,
-
-    // Validation and state
-    isLoading,
-    disabled,
-  } = props;
-
-  return (
-    <FormWrapper>
-      <form
-        className={cn("tw-flex tw-flex-col tw-gap-6", className)}
-        onSubmit={onSubmit}
-        {...props}
-      >
-        <div className="tw-flex tw-flex-col tw-gap-2">
-          <h1 className="tw-text-2xl tw-font-semibold tw-text-text-default">
-            {headerText}
-          </h1>
-          {descriptionText && (
-            <p className="tw-text-sm tw-text-text-muted">{descriptionText}</p>
-          )}
-        </div>
-
-        <div className="tw-grid tw-gap-4">
-          <div className="tw-grid tw-gap-0.5">
-            <Label htmlFor="email" size="large">
-              {emailLabel}
-            </Label>
-            <Input
-              type="email"
-              placeholder={emailPlaceholder}
-              value={emailValue}
-              disabled={emailDisabled || disabled}
-              required
-              size="large"
-            />
-          </div>
-
-          <div className="tw-grid tw-gap-0.5">
-            <Label htmlFor="password" size="large">
-              {passwordLabel}
-            </Label>
-            <Input
-              type="password"
-              placeholder={passwordPlaceholder}
-              value={passwordValue}
-              onChange={onPasswordChange}
-              disabled={disabled}
-              showEncryption={false}
-              required
-              validation={passwordValidation}
-              isValidatedMessages={passwordValidationMessage}
-              size="large"
-            />
-          </div>
-
-          <Button
-            size="large"
-            type="submit"
-            className="tw-w-fit"
-            disabled={disabled || isLoading}
-            isLoading={isLoading}
-          >
-            {buttonText}
-            <CornerDownLeft width="16" height="16" />
-          </Button>
-        </div>
-      </form>
-    </FormWrapper>
-  );
-}
-
-InviteSignupForm.propTypes = {
-  className: PropTypes.string,
-
-  // Header section
-  headerText: PropTypes.string,
-  descriptionText: PropTypes.string,
-
-  // Form fields
-  emailLabel: PropTypes.string,
-  emailPlaceholder: PropTypes.string,
-  emailValue: PropTypes.string,
-  emailDisabled: PropTypes.bool,
-
-  passwordLabel: PropTypes.string,
-  passwordPlaceholder: PropTypes.string,
-  passwordValue: PropTypes.string,
-  onPasswordChange: PropTypes.func,
-  passwordValidation: PropTypes.func,
-  passwordValidationMessage: PropTypes.object,
-
-  // Button
-  buttonText: PropTypes.string,
-
-  // Form functionality
-  onSubmit: PropTypes.func,
-
-  // Validation and state
-  isLoading: PropTypes.bool,
-  disabled: PropTypes.bool,
-};
-
-InviteSignupForm.defaultProps = {
-  className: "",
-
-  // Header section
-  headerText: "Sign in",
-  descriptionText: "",
-
-  // Form fields
-  emailLabel: "Email",
-  emailPlaceholder: "Enter your email",
-  emailValue: "",
-  emailDisabled: true,
-
-  passwordLabel: "Password",
-  passwordPlaceholder: "Enter password",
-  passwordValue: "",
-  onPasswordChange: undefined,
-  passwordValidation: undefined,
-  passwordValidationMessage: undefined,
-
-  // Button
-  buttonText: "Sign in",
-
-  // Form functionality
-  onSubmit: undefined,
-
-  // Validation and state
-  isLoading: false,
-  disabled: false,
-};
diff --git a/frontend/src/components/Auth/SignupFormWithSSO.jsx b/frontend/src/components/Auth/SignupFormWithSSO.jsx
deleted file mode 100644
index 90e00db563..0000000000
--- a/frontend/src/components/Auth/SignupFormWithSSO.jsx
+++ /dev/null
@@ -1,291 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { CornerDownLeft } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { FormWrapper } from '@/components/Auth/FormWrapper';
-import { GoogleSigninButton } from '@/components/Auth/GoogleSigninButton';
-import { GitHubSigninButton } from '@/components/Auth/GitHubSigninButton';
-
-export function SignupFormWithSSO({ className, ...props }) {
-  const {
-    // Header and sign in section
-    signupHeader,
-    signinText,
-    signinUrl,
-    signinCTA,
-    showSignin,
-    organizationName,
-
-    // Form fields
-    nameLabel,
-    namePlaceholder,
-    nameValue,
-    onNameChange,
-    nameValidation,
-    nameValidationMessage,
-
-    emailLabel,
-    emailPlaceholder,
-    emailValue,
-    onEmailChange,
-    emailValidation,
-    emailValidationMessage,
-
-    passwordLabel,
-    passwordPlaceholder,
-    passwordValue,
-    onPasswordChange,
-    passwordValidation,
-    passwordValidationMessage,
-
-    // Button and separator
-    signupButtonText,
-    orText,
-    showOrSeparator,
-
-    // SSO buttons
-    showSSOButtons,
-    googleButtonText,
-    githubButtonText,
-    onGoogleSignup,
-    onGitHubSignup,
-
-    // Form functionality
-    onSubmit,
-
-    // Validation and state
-    isLoading,
-    disabled,
-  } = props;
-
-  return (
-    <FormWrapper>
-      <form className={cn('tw-flex tw-flex-col tw-gap-6', className)} onSubmit={onSubmit} {...props}>
-        <div className="tw-flex tw-flex-col tw-gap-2 tw-min-w-20">
-          <h1 className="tw-text-4xl tw-tracking-tight tw-font-medium tw-mb-0" data-cy="">
-            {signupHeader}
-          </h1>
-
-          {(organizationName || showSignin) && (
-            <p className="tw-text-balance tw-text-sm tw-text-text-placeholder tw-mb-0">
-              {organizationName && (
-                <>
-                  Join the workspace -{' '}
-                  <span className="tw-font-medium" data-cy="workspace-name">
-                    {organizationName}
-                  </span>
-                  .
-                </>
-              )}{' '}
-              {showSignin && (
-                <>
-                  <span>{signinText}</span>
-                  <span>
-                    <a
-                      href={signinUrl}
-                      className="tw-text-text-brand tw-text-[11px] tw-font-medium tw-no-underline tw-pl-1.5 tw-pb-0.5 tw-self-center hover:tw-text-button-primary-hover"
-                      tabIndex="-1"
-                      data-cy="sign-in-link"
-                    >
-                      {signinCTA}
-                    </a>
-                  </span>
-                </>
-              )}
-            </p>
-          )}
-        </div>
-
-        <div className="tw-grid tw-gap-4">
-          <div className="tw-grid tw-gap-0.5">
-            <Label htmlFor="name" size="large">
-              {nameLabel}
-            </Label>
-            <Input
-              type="text"
-              placeholder={namePlaceholder}
-              value={nameValue}
-              onChange={onNameChange}
-              disabled={disabled}
-              required
-              validation={nameValidation}
-              isValidatedMessages={nameValidationMessage}
-              size="large"
-            />
-          </div>
-
-          <div className="tw-grid tw-gap-0.5">
-            <Label htmlFor="email" size="large">
-              {emailLabel}
-            </Label>
-            <Input
-              type="email"
-              placeholder={emailPlaceholder}
-              value={emailValue}
-              onChange={onEmailChange}
-              disabled={disabled}
-              required
-              validation={emailValidation}
-              isValidatedMessages={emailValidationMessage}
-              size="large"
-            />
-          </div>
-
-          <div className="tw-grid tw-gap-0.5">
-            <Label htmlFor="password" size="large">
-              {passwordLabel}
-            </Label>
-            <Input
-              type="password"
-              placeholder={passwordPlaceholder}
-              value={passwordValue}
-              onChange={onPasswordChange}
-              disabled={disabled}
-              showEncryption={false}
-              required
-              validation={passwordValidation}
-              isValidatedMessages={passwordValidationMessage}
-              size="large"
-            />
-          </div>
-
-          <Button
-            size="large"
-            type="submit"
-            className="tw-w-fit"
-            disabled={disabled || isLoading}
-            isLoading={isLoading}
-          >
-            {signupButtonText}
-            <CornerDownLeft width="16" height="16" />
-          </Button>
-
-          {showOrSeparator && (
-            <div className="tw-relative tw-flex tw-items-center tw-text-center tw-text-sm">
-              <div className="tw-flex-1 tw-h-px tw-bg-border-weak" />
-              <span className="tw-px-2 tw-text-muted-foreground">{orText}</span>
-              <div className="tw-flex-1 tw-h-px tw-bg-border-weak" />
-            </div>
-          )}
-
-          {showSSOButtons && (
-            <div className="tw-flex tw-flex-col tw-gap-3">
-              <GoogleSigninButton onClick={onGoogleSignup} text={googleButtonText} dataCy="google-signup-button" />
-              <GitHubSigninButton onClick={onGitHubSignup} text={githubButtonText} dataCy="github-signup-button" />
-            </div>
-          )}
-        </div>
-      </form>
-    </FormWrapper>
-  );
-}
-
-SignupFormWithSSO.propTypes = {
-  className: PropTypes.string,
-
-  // Header and sign in section
-  signupHeader: PropTypes.string,
-  signinText: PropTypes.string,
-  signinUrl: PropTypes.string,
-  signinCTA: PropTypes.string,
-  showSignin: PropTypes.bool,
-  organizationName: PropTypes.string,
-
-  // Form fields
-  nameLabel: PropTypes.string,
-  namePlaceholder: PropTypes.string,
-  nameValue: PropTypes.string,
-  onNameChange: PropTypes.func,
-  nameValidation: PropTypes.func,
-  nameValidationMessage: PropTypes.object,
-
-  emailLabel: PropTypes.string,
-  emailPlaceholder: PropTypes.string,
-  emailValue: PropTypes.string,
-  onEmailChange: PropTypes.func,
-  emailValidation: PropTypes.func,
-  emailValidationMessage: PropTypes.object,
-
-  passwordLabel: PropTypes.string,
-  passwordPlaceholder: PropTypes.string,
-  passwordValue: PropTypes.string,
-  onPasswordChange: PropTypes.func,
-  passwordValidation: PropTypes.func,
-  passwordValidationMessage: PropTypes.object,
-
-  // Button and separator
-  signupButtonText: PropTypes.string,
-  orText: PropTypes.string,
-  showOrSeparator: PropTypes.bool,
-
-  // SSO buttons
-  showSSOButtons: PropTypes.bool,
-  googleButtonText: PropTypes.string,
-  githubButtonText: PropTypes.string,
-  onGoogleSignup: PropTypes.func,
-  onGitHubSignup: PropTypes.func,
-
-  // Form functionality
-  onSubmit: PropTypes.func,
-
-  // Validation and state
-  isLoading: PropTypes.bool,
-  disabled: PropTypes.bool,
-};
-
-SignupFormWithSSO.defaultProps = {
-  className: '',
-
-  // Header and sign in section
-  signupHeader: 'Sign up',
-  signinText: 'Already have an account?',
-  signinUrl: '/login',
-  signinCTA: 'Sign in',
-  showSignin: true,
-  organizationName: '',
-
-  // Form fields
-  nameLabel: 'Name',
-  namePlaceholder: 'Enter your full name',
-  nameValue: '',
-  onNameChange: undefined,
-  nameValidation: undefined,
-  nameValidationMessage: undefined,
-
-  emailLabel: 'Email',
-  emailPlaceholder: 'Enter your work email',
-  emailValue: '',
-  onEmailChange: undefined,
-  emailValidation: undefined,
-  emailValidationMessage: undefined,
-
-  passwordLabel: 'Password',
-  passwordPlaceholder: 'Create password',
-  passwordValue: '',
-  onPasswordChange: undefined,
-  passwordValidation: undefined,
-  passwordValidationMessage: undefined,
-
-  // Button and separator
-  signupButtonText: 'Sign up',
-  orText: 'OR',
-  showOrSeparator: true,
-
-  // SSO buttons
-  showSSOButtons: true,
-  googleButtonText: 'Sign up with',
-  githubButtonText: 'Sign up with',
-  onGoogleSignup: undefined,
-  onGitHubSignup: undefined,
-
-  // Form functionality
-  onSubmit: undefined,
-
-  // Validation and state
-  isLoading: false,
-  disabled: false,
-};
diff --git a/frontend/src/components/Auth/SignupSuccessInfo.jsx b/frontend/src/components/Auth/SignupSuccessInfo.jsx
deleted file mode 100644
index c78e0f3ae9..0000000000
--- a/frontend/src/components/Auth/SignupSuccessInfo.jsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { ArrowLeft, Mail } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
-import { FormWrapper } from '@/components/Auth/FormWrapper';
-
-export function SignupSuccessInfo({ className, ...props }) {
-  const {
-    // Header
-    headerText,
-
-    // Message content
-    messageText,
-    email,
-    name,
-
-    // Info text
-    infoText,
-    showInfo,
-
-    // Resend email
-    resendButtonText,
-    resendCountdownText,
-    showResendButton,
-    resendDisabled,
-    resendCountdown,
-
-    // Back button
-    backButtonText,
-    onBackToSignup,
-
-    // Separator
-    showSeparator,
-  } = props;
-
-  return (
-    <FormWrapper>
-      <div className={cn('tw-flex tw-flex-col tw-gap-6 tw-min-w-96', className)} {...props}>
-        <div className="tw-flex tw-flex-col tw-gap-0.5">
-          <h1 className="tw-text-4xl tw-tracking-tight tw-font-medium tw-mb-0" data-cy="signup-success-header">
-            {headerText}
-          </h1>
-        </div>
-
-        <div className="tw-flex tw-flex-col tw-gap-4">
-          <p className="tw-text-balance tw-text-sm tw-text-text-placeholder tw-mb-0" data-cy="signup-success-message">
-            {messageText}
-            {email && (
-              <>
-                {' '}
-                <span className="tw-font-medium tw-text-text-brand">{email}</span>
-              </>
-            )}
-            .{' '}
-            {name && (
-              <>
-                Welcome, <span className="tw-font-medium tw-text-text-brand">{name}</span>!
-              </>
-            )}
-          </p>
-
-          {showInfo && (
-            <p className="tw-text-sm tw-text-text-placeholder tw-mb-0" data-cy="signup-success-info">
-              {infoText}
-            </p>
-          )}
-
-          {showSeparator && (
-            <div className="tw-relative tw-flex tw-items-center tw-text-center tw-text-sm">
-              <div className="tw-flex-1 tw-h-px tw-bg-border-weak" />
-              <span className="tw-px-2 tw-text-text-placeholder tw-text-lg tw-font-medium">OR</span>
-              <div className="tw-flex-1 tw-h-px tw-bg-border-weak" />
-            </div>
-          )}
-
-          {showResendButton && (
-            <Button
-              size="default"
-              variant="outline"
-              className="tw-w-fit"
-              disabled={resendDisabled}
-              data-cy="resend-verification-email-button"
-            >
-              <Mail width="16" height="16" />
-              {resendDisabled && resendCountdown > 0 ? `${resendCountdownText} ${resendCountdown}s` : resendButtonText}
-            </Button>
-          )}
-
-          <Button
-            size="default"
-            variant="outline"
-            className="tw-w-fit"
-            onClick={onBackToSignup}
-            data-cy="back-to-signup-button"
-          >
-            <ArrowLeft width="16" height="16" />
-            {backButtonText}
-          </Button>
-        </div>
-      </div>
-    </FormWrapper>
-  );
-}
-
-SignupSuccessInfo.propTypes = {
-  className: PropTypes.string,
-
-  // Header
-  headerText: PropTypes.string,
-
-  // Message content
-  messageText: PropTypes.string,
-  email: PropTypes.string,
-  name: PropTypes.string,
-
-  // Info text
-  infoText: PropTypes.string,
-  showInfo: PropTypes.bool,
-
-  // Resend email
-  resendButtonText: PropTypes.string,
-  resendCountdownText: PropTypes.string,
-  showResendButton: PropTypes.bool,
-  resendDisabled: PropTypes.bool,
-  resendCountdown: PropTypes.number,
-
-  // Back button
-  backButtonText: PropTypes.string,
-  onBackToSignup: PropTypes.func,
-
-  // Separator
-  showSeparator: PropTypes.bool,
-};
-
-SignupSuccessInfo.defaultProps = {
-  className: '',
-
-  // Header
-  headerText: 'Check your mail',
-
-  // Message content
-  messageText: "We've sent a verification email to",
-  email: '',
-  name: '',
-
-  // Info text
-  infoText: 'Did not receive an email? Check your spam folder!',
-  showInfo: true,
-
-  // Resend email
-  resendButtonText: 'Resend verification email',
-  resendCountdownText: 'Resend verification email in',
-  showResendButton: true,
-  resendDisabled: false,
-  resendCountdown: 0,
-
-  // Back button
-  backButtonText: 'Back to sign up',
-  onBackToSignup: undefined,
-
-  // Separator
-  showSeparator: true,
-};
diff --git a/frontend/src/components/Auth/Stories/AuthCenteredLayout.stories.jsx b/frontend/src/components/Auth/Stories/AuthCenteredLayout.stories.jsx
deleted file mode 100644
index 78e0788d79..0000000000
--- a/frontend/src/components/Auth/Stories/AuthCenteredLayout.stories.jsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from 'react';
-import { AuthCenteredLayout } from '../AuthCenteredLayout';
-import { LoginForm } from '../LoginForm';
-import { SignupSuccessInfo } from '../SignupSuccessInfo';
-import { ForgotPasswordInfoScreen } from '../ForgotPasswordInfoScreen';
-
-export default {
-  title: 'Auth/Blocks/AuthCenteredLayout',
-  component: AuthCenteredLayout,
-  parameters: {
-    layout: 'fullscreen',
-    viewport: {
-      viewports: {
-        desktop: {
-          name: 'Desktop',
-          styles: {
-            width: '1440px',
-            height: '900px',
-          },
-        },
-        tablet: {
-          name: 'Tablet',
-          styles: {
-            width: '768px',
-            height: '1024px',
-          },
-        },
-        mobile: {
-          name: 'Mobile',
-          styles: {
-            width: '375px',
-            height: '667px',
-          },
-        },
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    children: {
-      control: false,
-      description: 'Content to be displayed within the centered auth layout',
-    },
-  },
-};
-
-// Signup Success Examples
-export const WithSignupSuccess = {
-  args: {
-    children: (
-      <SignupSuccessInfo
-        headerText="Check your mail"
-        messageText="We've sent a verification email to"
-        email="john.doe@example.com"
-        name="John"
-        infoText="Did not receive an email? Check your spam folder!"
-        showInfo={true}
-        resendButtonText="Resend verification email"
-        resendCountdownText="Resend verification email in"
-        showResendButton={true}
-        resendDisabled={false}
-        resendCountdown={0}
-        backButtonText="Back to sign up"
-        showSeparator={true}
-      />
-    ),
-  },
-};
-
-// Forgot Password Examples
-export const WithForgotPasswordInfo = {
-  args: {
-    children: (
-      <ForgotPasswordInfoScreen
-        headerText="Check your mail"
-        messageText="We've sent a password reset link to"
-        email="user@example.com"
-        infoText="Did not receive an email? Check your spam folder!"
-        showInfo={true}
-        buttonText="Back to login"
-        showSeparator={true}
-      />
-    ),
-  },
-};
diff --git a/frontend/src/components/Auth/Stories/AuthLayout.stories.jsx b/frontend/src/components/Auth/Stories/AuthLayout.stories.jsx
deleted file mode 100644
index 9edf12c6de..0000000000
--- a/frontend/src/components/Auth/Stories/AuthLayout.stories.jsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import React from 'react';
-import { AuthLayout } from '../AuthLayout';
-import { LoginForm } from '../LoginForm';
-import { SetupAdminForm } from '../SetupAdminForm';
-
-export default {
-  title: 'Auth/Blocks/AuthLayout',
-  component: AuthLayout,
-  parameters: {
-    layout: 'fullscreen',
-    viewport: {
-      viewports: {
-        desktop: {
-          name: 'Desktop',
-          styles: {
-            width: '1440px',
-            height: '900px',
-          },
-        },
-        tablet: {
-          name: 'Tablet',
-          styles: {
-            width: '768px',
-            height: '1024px',
-          },
-        },
-        mobile: {
-          name: 'Mobile',
-          styles: {
-            width: '375px',
-            height: '667px',
-          },
-        },
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    children: {
-      control: false,
-      description: 'Content to be displayed within the auth layout',
-    },
-  },
-};
-
-export const WithLoginFormOrganization = {
-  args: {
-    children: (
-      <LoginForm
-        signinHeader="Sign in"
-        signUpText="New to ToolJet?"
-        signUpUrl="#"
-        signUpCTA="Create an account"
-        showSignup={true}
-        organizationName="Acme Corporation"
-        emailLabel="Email"
-        emailPlaceholder="Enter your work email"
-        passwordLabel="Password"
-        passwordPlaceholder="Enter password"
-        showForgotPassword={true}
-        forgotPasswordUrl="/forgot-password"
-        forgotPasswordText="Forgot?"
-        signinButtonText="Sign in"
-        orText="OR"
-        showOrSeparator={true}
-      />
-    ),
-  },
-};
-
-// Responsive Examples
-export const DesktopView = {
-  parameters: {
-    viewport: {
-      defaultViewport: 'desktop',
-    },
-  },
-  args: {
-    children: (
-      <LoginForm
-        signinHeader="Sign in"
-        signUpText="New to ToolJet?"
-        signUpUrl="#"
-        signUpCTA="Create an account"
-        showSignup={true}
-        organizationName="Acme Corporation"
-        emailLabel="Email"
-        emailPlaceholder="Enter your work email"
-        passwordLabel="Password"
-        passwordPlaceholder="Enter password"
-        showForgotPassword={true}
-        forgotPasswordUrl="/forgot-password"
-        forgotPasswordText="Forgot?"
-        signinButtonText="Sign in"
-        orText="OR"
-        showOrSeparator={true}
-      />
-    ),
-  },
-};
-
-export const TabletView = {
-  parameters: {
-    viewport: {
-      defaultViewport: 'tablet',
-    },
-  },
-  args: {
-    children: (
-      <LoginForm
-        signinHeader="Sign in"
-        signUpText="New to ToolJet?"
-        signUpUrl="#"
-        signUpCTA="Create an account"
-        showSignup={true}
-        organizationName="Acme Corporation"
-        emailLabel="Email"
-        emailPlaceholder="Enter your work email"
-        passwordLabel="Password"
-        passwordPlaceholder="Enter password"
-        showForgotPassword={true}
-        forgotPasswordUrl="/forgot-password"
-        forgotPasswordText="Forgot?"
-        signinButtonText="Sign in"
-        orText="OR"
-        showOrSeparator={true}
-      />
-    ),
-  },
-};
-
-export const MobileView = {
-  parameters: {
-    viewport: {
-      defaultViewport: 'mobile',
-    },
-  },
-  args: {
-    children: (
-      <LoginForm
-        signinHeader="Sign in"
-        signUpText="New to ToolJet?"
-        signUpUrl="#"
-        signUpCTA="Create an account"
-        showSignup={true}
-        organizationName="Acme Corporation"
-        emailLabel="Email"
-        emailPlaceholder="Enter your work email"
-        passwordLabel="Password"
-        passwordPlaceholder="Enter password"
-        showForgotPassword={true}
-        forgotPasswordUrl="/forgot-password"
-        forgotPasswordText="Forgot?"
-        signinButtonText="Sign in"
-        orText="OR"
-        showOrSeparator={true}
-      />
-    ),
-  },
-};
diff --git a/frontend/src/components/Auth/Stories/ForgotPasswordFlow.stories.jsx b/frontend/src/components/Auth/Stories/ForgotPasswordFlow.stories.jsx
deleted file mode 100644
index 3d38cd19df..0000000000
--- a/frontend/src/components/Auth/Stories/ForgotPasswordFlow.stories.jsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from 'react';
-import { AuthLayout } from '../AuthLayout';
-import { AuthCenteredLayout } from '../AuthCenteredLayout';
-import { ForgotPasswordForm } from '../ForgotPasswordForm';
-import { ForgotPasswordInfoScreen } from '../ForgotPasswordInfoScreen';
-
-export default {
-  title: 'Auth/Flows/ForgotPassword',
-  component: AuthLayout,
-  parameters: {
-    layout: 'fullscreen',
-    viewport: {
-      viewports: {
-        desktop: {
-          name: 'Desktop',
-          styles: {
-            width: '1440px',
-            height: '900px',
-          },
-        },
-        tablet: {
-          name: 'Tablet',
-          styles: {
-            width: '768px',
-            height: '1024px',
-          },
-        },
-        mobile: {
-          name: 'Mobile',
-          styles: {
-            width: '375px',
-            height: '667px',
-          },
-        },
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    children: {
-      control: false,
-      description: 'Content to be displayed within the auth layout',
-    },
-  },
-};
-
-// Forgot Password Flow - Form
-export const ForgotPasswordFlow = {
-  parameters: {
-    viewport: {
-      defaultViewport: 'desktop',
-    },
-  },
-  args: {
-    children: (
-      <ForgotPasswordForm
-        headerText="Forgot Password"
-        signupText="New to ToolJet?"
-        signupUrl="#"
-        signupCTA="Create an account"
-        showSignup={true}
-        emailLabel="Email address"
-        emailPlaceholder="Enter email address"
-        buttonText="Send a reset link"
-        adminContactText="Contact admin to reset your password"
-        showAdminBanner={true}
-      />
-    ),
-  },
-};
-
-// Forgot Password Flow - Info Screen
-export const ForgotPasswordInfoFlow = {
-  render: (args) => (
-    <AuthCenteredLayout {...args}>
-      <ForgotPasswordInfoScreen
-        headerText="Check your mail"
-        messageText="We've sent a password reset link to"
-        email="user@example.com"
-        infoText="Did not receive an email? Check your spam folder!"
-        showInfo={true}
-        buttonText="Back to login"
-        showSeparator={true}
-      />
-    </AuthCenteredLayout>
-  ),
-  parameters: {
-    viewport: {
-      defaultViewport: 'desktop',
-    },
-  },
-};
diff --git a/frontend/src/components/Auth/Stories/ForgotPasswordForm.stories.jsx b/frontend/src/components/Auth/Stories/ForgotPasswordForm.stories.jsx
deleted file mode 100644
index 7b8451d239..0000000000
--- a/frontend/src/components/Auth/Stories/ForgotPasswordForm.stories.jsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import React from 'react';
-import { ForgotPasswordForm } from '../ForgotPasswordForm';
-
-export default {
-  title: 'Auth/Blocks/ForgotPasswordForm',
-  component: ForgotPasswordForm,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    headerText: {
-      control: 'text',
-      description: 'The main heading text for the forgot password form',
-    },
-    signupText: {
-      control: 'text',
-      description: 'Text before the sign up link',
-    },
-    signupUrl: {
-      control: 'text',
-      description: 'URL for the sign up link',
-    },
-    signupCTA: {
-      control: 'text',
-      description: 'Call-to-action text for the sign up link',
-    },
-    showSignup: {
-      control: 'boolean',
-      description: 'Show or hide the signup section',
-    },
-    emailLabel: {
-      control: 'text',
-      description: 'Label for the email input field',
-    },
-    emailPlaceholder: {
-      control: 'text',
-      description: 'Placeholder text for the email input',
-    },
-    buttonText: {
-      control: 'text',
-      description: 'Text for the submit button',
-    },
-    adminContactText: {
-      control: 'text',
-      description: 'Text for the admin contact banner',
-    },
-    showAdminBanner: {
-      control: 'boolean',
-      description: 'Show or hide the admin contact banner',
-    },
-    emailValue: {
-      control: 'text',
-      description: 'Controlled value for email input',
-    },
-    isLoading: {
-      control: 'boolean',
-      description: 'Loading state for the form',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disabled state for the form',
-    },
-    onSubmit: {
-      action: 'submitted',
-      description: 'Form submission handler',
-    },
-    onEmailChange: {
-      action: 'email changed',
-      description: 'Email input change handler',
-    },
-    emailValidation: {
-      control: false,
-      description: 'Email validation function',
-    },
-    emailValidationMessage: {
-      control: 'object',
-      description: 'External email validation message object',
-    },
-  },
-};
-
-export const Default = {
-  args: {
-    headerText: 'Forgot Password',
-    signupText: 'New to ToolJet?',
-    signupUrl: '#',
-    signupCTA: 'Create an account',
-    showSignup: true,
-    emailLabel: 'Email address',
-    emailPlaceholder: 'Enter email address',
-    buttonText: 'Send a reset link',
-    adminContactText: 'Contact admin to reset your password',
-    showAdminBanner: true,
-  },
-};
-export const NoSignup = {
-  args: {
-    headerText: 'Forgot Password',
-    signupText: '',
-    signupUrl: '#',
-    signupCTA: '',
-    showSignup: false,
-    emailLabel: 'Email address',
-    emailPlaceholder: 'Enter email address',
-    buttonText: 'Send a reset link',
-    adminContactText: 'Contact admin to reset your password',
-    showAdminBanner: true,
-  },
-};
-
-export const NoAdminBanner = {
-  args: {
-    headerText: 'Forgot Password',
-    signupText: 'New to ToolJet?',
-    signupUrl: '#',
-    signupCTA: 'Create an account',
-    showSignup: true,
-    emailLabel: 'Email address',
-    emailPlaceholder: 'Enter email address',
-    buttonText: 'Send a reset link',
-    adminContactText: 'Contact admin to reset your password',
-    showAdminBanner: false,
-  },
-};
-
-export const Loading = {
-  args: {
-    headerText: 'Forgot Password',
-    signupText: 'New to ToolJet?',
-    signupUrl: '#',
-    signupCTA: 'Create an account',
-    showSignup: true,
-    emailLabel: 'Email address',
-    emailPlaceholder: 'Enter email address',
-    buttonText: 'Sending...',
-    adminContactText: 'Contact admin to reset your password',
-    showAdminBanner: true,
-    emailValue: 'user@example.com',
-    isLoading: true,
-    disabled: true,
-  },
-};
-
-export const Disabled = {
-  args: {
-    headerText: 'Forgot Password',
-    signupText: 'New to ToolJet?',
-    signupUrl: '#',
-    signupCTA: 'Create an account',
-    showSignup: true,
-    emailLabel: 'Email address',
-    emailPlaceholder: 'Enter email address',
-    buttonText: 'Send a reset link',
-    adminContactText: 'Contact admin to reset your password',
-    showAdminBanner: true,
-    disabled: true,
-  },
-};
-
-export const WithValidation = {
-  args: {
-    headerText: 'Forgot Password',
-    signupText: 'New to ToolJet?',
-    signupUrl: '#',
-    signupCTA: 'Create an account',
-    showSignup: true,
-    emailLabel: 'Email address',
-    emailPlaceholder: 'Enter email address',
-    buttonText: 'Send a reset link',
-    adminContactText: 'Contact admin to reset your password',
-    showAdminBanner: true,
-    emailValidation: (e) => {
-      const value = e.target.value;
-      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-
-      if (!value) {
-        return { valid: false, message: 'Email is required' };
-      }
-
-      if (!emailRegex.test(value)) {
-        return { valid: false, message: 'Please enter a valid email address' };
-      }
-
-      return { valid: true, message: 'Email looks good!' };
-    },
-  },
-};
diff --git a/frontend/src/components/Auth/Stories/ForgotPasswordInfoScreen.stories.jsx b/frontend/src/components/Auth/Stories/ForgotPasswordInfoScreen.stories.jsx
deleted file mode 100644
index 782b1e4a42..0000000000
--- a/frontend/src/components/Auth/Stories/ForgotPasswordInfoScreen.stories.jsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import React from 'react';
-import { ForgotPasswordInfoScreen } from '../ForgotPasswordInfoScreen';
-
-export default {
-  title: 'Auth/Blocks/ForgotPasswordInfoScreen',
-  component: ForgotPasswordInfoScreen,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    headerText: {
-      control: 'text',
-      description: 'The main heading text for the info screen',
-    },
-    messageText: {
-      control: 'text',
-      description: 'Main message text',
-    },
-    email: {
-      control: 'text',
-      description: 'Email address to display in the message',
-    },
-    infoText: {
-      control: 'text',
-      description: 'Additional info text',
-    },
-    showInfo: {
-      control: 'boolean',
-      description: 'Show or hide the info text',
-    },
-    buttonText: {
-      control: 'text',
-      description: 'Text for the back to login button',
-    },
-    onBackToLogin: {
-      action: 'back to login clicked',
-      description: 'Back to login button handler',
-    },
-    showSeparator: {
-      control: 'boolean',
-      description: 'Show or hide the separator',
-    },
-  },
-};
-
-export const Default = {
-  args: {
-    headerText: 'Check your mail',
-    messageText: "We've sent a password reset link to",
-    email: 'user@example.com',
-    infoText: 'Did not receive an email? Check your spam folder!',
-    showInfo: true,
-    buttonText: 'Back to login',
-    showSeparator: true,
-  },
-};
-
-export const CustomHeader = {
-  args: {
-    headerText: 'Password Reset Sent',
-    messageText: "We've sent a password reset link to",
-    email: 'user@example.com',
-    infoText: 'Did not receive an email? Check your spam folder!',
-    showInfo: true,
-    buttonText: 'Back to login',
-    showSeparator: true,
-  },
-};
-
-export const LongEmail = {
-  args: {
-    headerText: 'Check your mail',
-    messageText: "We've sent a password reset link to",
-    email: 'very.long.email.address@verylongdomainname.com',
-    infoText: 'Did not receive an email? Check your spam folder!',
-    showInfo: true,
-    buttonText: 'Back to login',
-    showSeparator: true,
-  },
-};
-
-export const NoEmail = {
-  args: {
-    headerText: 'Check your mail',
-    messageText: "We've sent a password reset link to your registered email address",
-    email: '',
-    infoText: 'Did not receive an email? Check your spam folder!',
-    showInfo: true,
-    buttonText: 'Back to login',
-    showSeparator: true,
-  },
-};
-
-export const NoInfo = {
-  args: {
-    headerText: 'Check your mail',
-    messageText: "We've sent a password reset link to",
-    email: 'user@example.com',
-    infoText: '',
-    showInfo: false,
-    buttonText: 'Back to login',
-    showSeparator: true,
-  },
-};
-
-export const NoSeparator = {
-  args: {
-    headerText: 'Check your mail',
-    messageText: "We've sent a password reset link to",
-    email: 'user@example.com',
-    infoText: 'Did not receive an email? Check your spam folder!',
-    showInfo: true,
-    buttonText: 'Back to login',
-    showSeparator: false,
-  },
-};
-
-export const CustomMessage = {
-  args: {
-    headerText: 'Check your mail',
-    messageText: 'A password reset link has been sent to your email address',
-    email: 'user@example.com',
-    infoText: 'Please check your inbox and follow the instructions to reset your password',
-    showInfo: true,
-    buttonText: 'Return to login',
-    showSeparator: true,
-  },
-};
-
-export const Minimal = {
-  args: {
-    headerText: 'Email Sent',
-    messageText: 'Check your email for reset instructions',
-    email: '',
-    infoText: '',
-    showInfo: false,
-    buttonText: 'Back',
-    showSeparator: false,
-  },
-};
-
-export const CustomButtonText = {
-  args: {
-    headerText: 'Check your mail',
-    messageText: "We've sent a password reset link to",
-    email: 'user@example.com',
-    infoText: 'Did not receive an email? Check your spam folder!',
-    showInfo: true,
-    buttonText: 'Return to sign in',
-    showSeparator: true,
-  },
-};
-
-export const LongMessage = {
-  args: {
-    headerText: 'Check your mail',
-    messageText:
-      "We've sent a password reset link to your registered email address. Please check your inbox and click the link to reset your password",
-    email: 'user@example.com',
-    infoText:
-      'Did not receive an email? Please check your spam folder or contact support if you continue to have issues',
-    showInfo: true,
-    buttonText: 'Back to login',
-    showSeparator: true,
-  },
-};
diff --git a/frontend/src/components/Auth/Stories/GitHubSigninButton.stories.jsx b/frontend/src/components/Auth/Stories/GitHubSigninButton.stories.jsx
deleted file mode 100644
index 018b0a2623..0000000000
--- a/frontend/src/components/Auth/Stories/GitHubSigninButton.stories.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import { GitHubSigninButton } from '../GitHubSigninButton';
-
-export default {
-  title: 'Auth/Blocks/GitHubSigninButton',
-  component: GitHubSigninButton,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    onClick: {
-      action: 'clicked',
-      description: 'Function called when the button is clicked',
-    },
-    text: {
-      control: 'text',
-      description: 'Text displayed on the button',
-    },
-    dataCy: {
-      control: 'text',
-      description: 'Data-cy attribute for testing',
-    },
-  },
-};
-
-// Template for creating stories
-const Template = (args) => <GitHubSigninButton {...args} />;
-
-// Default story
-export const Default = Template.bind({});
-Default.args = {
-  text: 'Continue with GitHub',
-  dataCy: 'github-signin-button',
-};
-
-// Custom text story
-export const CustomText = Template.bind({});
-CustomText.args = {
-  text: 'Sign in with GitHub',
-  dataCy: 'github-signin-custom',
-};
-
-// Short text story
-export const ShortText = Template.bind({});
-ShortText.args = {
-  text: 'GitHub',
-  dataCy: 'github-signin-short',
-};
-
-// Long text story
-export const LongText = Template.bind({});
-LongText.args = {
-  text: 'Continue with your GitHub account',
-  dataCy: 'github-signin-long',
-};
-
-// Without data-cy story
-export const WithoutDataCy = Template.bind({});
-WithoutDataCy.args = {
-  text: 'Continue with GitHub',
-};
diff --git a/frontend/src/components/Auth/Stories/GoogleSigninButton.stories.jsx b/frontend/src/components/Auth/Stories/GoogleSigninButton.stories.jsx
deleted file mode 100644
index ed666cb662..0000000000
--- a/frontend/src/components/Auth/Stories/GoogleSigninButton.stories.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import * as React from 'react';
-import { GoogleSigninButton } from '../GoogleSigninButton';
-
-export default {
-  title: 'Auth/Blocks/GoogleSigninButton',
-  component: GoogleSigninButton,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    onClick: {
-      action: 'clicked',
-      description: 'Function called when the button is clicked',
-    },
-    text: {
-      control: 'text',
-      description: 'Text displayed on the button',
-    },
-    dataCy: {
-      control: 'text',
-      description: 'Data-cy attribute for testing',
-    },
-  },
-};
-
-// Template for creating stories
-const Template = (args) => <GoogleSigninButton {...args} />;
-
-// Default story
-export const Default = Template.bind({});
-Default.args = {
-  text: 'Continue with Google',
-  dataCy: 'google-signin-button',
-};
-
-// Custom text story
-export const CustomText = Template.bind({});
-CustomText.args = {
-  text: 'Sign in with Google',
-  dataCy: 'google-signin-custom',
-};
-
-// Short text story
-export const ShortText = Template.bind({});
-ShortText.args = {
-  text: 'Google',
-  dataCy: 'google-signin-short',
-};
-
-// Long text story
-export const LongText = Template.bind({});
-LongText.args = {
-  text: 'Continue with your Google account',
-  dataCy: 'google-signin-long',
-};
-
-// Without data-cy story
-export const WithoutDataCy = Template.bind({});
-WithoutDataCy.args = {
-  text: 'Continue with Google',
-};
diff --git a/frontend/src/components/Auth/Stories/LoginFlow.stories.jsx b/frontend/src/components/Auth/Stories/LoginFlow.stories.jsx
deleted file mode 100644
index e889070538..0000000000
--- a/frontend/src/components/Auth/Stories/LoginFlow.stories.jsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import React from 'react';
-import { AuthLayout } from '../AuthLayout';
-import { LoginForm } from '../LoginForm';
-import { GoogleSigninButton } from '../GoogleSigninButton';
-import { GitHubSigninButton } from '../GitHubSigninButton';
-
-export default {
-  title: 'Auth/Flows/Login',
-  component: AuthLayout,
-  parameters: {
-    layout: 'fullscreen',
-    viewport: {
-      viewports: {
-        desktop: {
-          name: 'Desktop',
-          styles: {
-            width: '1440px',
-            height: '900px',
-          },
-        },
-        tablet: {
-          name: 'Tablet',
-          styles: {
-            width: '768px',
-            height: '1024px',
-          },
-        },
-        mobile: {
-          name: 'Mobile',
-          styles: {
-            width: '375px',
-            height: '667px',
-          },
-        },
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    children: {
-      control: false,
-      description: 'Content to be displayed within the auth layout',
-    },
-  },
-};
-
-// Login with Organization
-export const LoginWithOrganization = {
-  args: {
-    children: (
-      <div className="tw-flex tw-flex-col tw-gap-6 tw-w-full">
-        <LoginForm
-          signinHeader="Sign in"
-          signUpText="New to ToolJet?"
-          signUpUrl="#"
-          signUpCTA="Create an account"
-          showSignup={true}
-          organizationName=""
-          emailLabel="Email"
-          emailPlaceholder="Enter your work email"
-          passwordLabel="Password"
-          passwordPlaceholder="Enter password"
-          showForgotPassword={true}
-          forgotPasswordUrl="/forgot-password"
-          forgotPasswordText="Forgot?"
-          signinButtonText="Sign in"
-          orText="OR"
-          showOrSeparator={true}
-          emailValue=""
-          passwordValue=""
-          onEmailChange={() => {}}
-          onPasswordChange={() => {}}
-          onSubmit={() => {}}
-          isLoading={false}
-          disabled={false}
-        />
-
-        {/* SSO Buttons */}
-        <div className="tw-flex tw-flex-col tw-gap-3">
-          <GoogleSigninButton
-            onClick={() => console.log('Google sign in clicked')}
-            text="Continue with"
-            dataCy="google-signin-button"
-          />
-          <GitHubSigninButton
-            onClick={() => console.log('GitHub sign in clicked')}
-            text="Continue with"
-            dataCy="github-signin-button"
-          />
-        </div>
-      </div>
-    ),
-  },
-};
diff --git a/frontend/src/components/Auth/Stories/LoginForm.stories.jsx b/frontend/src/components/Auth/Stories/LoginForm.stories.jsx
deleted file mode 100644
index 111c4a315a..0000000000
--- a/frontend/src/components/Auth/Stories/LoginForm.stories.jsx
+++ /dev/null
@@ -1,504 +0,0 @@
-import { LoginForm } from '../LoginForm';
-
-export default {
-  title: 'Auth/Blocks/LoginForm',
-  component: LoginForm,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    signinHeader: {
-      control: 'text',
-      description: 'The main heading text for the login form',
-    },
-    signUpText: {
-      control: 'text',
-      description: 'Text before the sign up link',
-    },
-    signUpUrl: {
-      control: 'text',
-      description: 'URL for the sign up link',
-    },
-    signUpCTA: {
-      control: 'text',
-      description: 'Call-to-action text for the sign up link',
-    },
-    showSignup: {
-      control: 'boolean',
-      description: 'Show or hide the signup section',
-    },
-    organizationName: {
-      control: 'text',
-      description: 'Organization name to display in the header',
-    },
-    emailLabel: {
-      control: 'text',
-      description: 'Label for the email input field',
-    },
-    emailPlaceholder: {
-      control: 'text',
-      description: 'Placeholder text for the email input',
-    },
-    passwordLabel: {
-      control: 'text',
-      description: 'Label for the password input field',
-    },
-    passwordPlaceholder: {
-      control: 'text',
-      description: 'Placeholder text for the password input',
-    },
-    showForgotPassword: {
-      control: 'boolean',
-      description: 'Show or hide the forgot password link',
-    },
-    forgotPasswordUrl: {
-      control: 'text',
-      description: 'URL for the forgot password link',
-    },
-    forgotPasswordText: {
-      control: 'text',
-      description: 'Text for the forgot password link',
-    },
-    signinButtonText: {
-      control: 'text',
-      description: 'Text for the submit button',
-    },
-    orText: {
-      control: 'text',
-      description: 'Text for the OR separator',
-    },
-    showOrSeparator: {
-      control: 'boolean',
-      description: 'Show or hide the OR separator',
-    },
-    emailValue: {
-      control: 'text',
-      description: 'Controlled value for email input',
-    },
-    passwordValue: {
-      control: 'text',
-      description: 'Controlled value for password input',
-    },
-    isLoading: {
-      control: 'boolean',
-      description: 'Loading state for the form',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disabled state for the form',
-    },
-    onSubmit: {
-      action: 'submitted',
-      description: 'Form submission handler',
-    },
-    onEmailChange: {
-      action: 'email changed',
-      description: 'Email input change handler',
-    },
-    onPasswordChange: {
-      action: 'password changed',
-      description: 'Password input change handler',
-    },
-    emailValidation: {
-      control: false,
-      description: 'Email validation function',
-    },
-    passwordValidation: {
-      control: false,
-      description: 'Password validation function',
-    },
-    emailValidationMessage: {
-      control: 'object',
-      description: 'External email validation message object',
-    },
-    passwordValidationMessage: {
-      control: 'object',
-      description: 'External password validation message object',
-    },
-  },
-};
-
-export const Default = {
-  args: {
-    signinHeader: 'Sign in',
-    signUpText: 'New to ToolJet?',
-    signUpUrl: '#',
-    signUpCTA: 'Create an account',
-    showSignup: true,
-    organizationName: '',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your work email',
-    passwordLabel: 'Password',
-    passwordPlaceholder: 'Enter password',
-    showForgotPassword: true,
-    forgotPasswordUrl: '/forgot-password',
-    forgotPasswordText: 'Forgot?',
-    signinButtonText: 'Sign in',
-    orText: 'OR',
-    showOrSeparator: true,
-  },
-};
-
-export const CustomHeader = {
-  args: {
-    signinHeader: 'Welcome Back',
-    signUpText: 'New to ToolJet?',
-    signUpUrl: '#',
-    signUpCTA: 'Create an account',
-    showSignup: true,
-    organizationName: '',
-    emailLabel: 'Email',
-    emailPlaceholder: 'm@example.com',
-    passwordLabel: 'Password',
-    passwordPlaceholder: 'Enter password',
-    showForgotPassword: true,
-    forgotPasswordUrl: '/forgot-password',
-    forgotPasswordText: 'Forgot?',
-    signinButtonText: 'Sign in',
-    orText: 'OR',
-    showOrSeparator: true,
-  },
-};
-
-export const WithOrganization = {
-  args: {
-    signinHeader: 'Sign in',
-    signUpText: 'New to ToolJet?',
-    signUpUrl: '#',
-    signUpCTA: 'Create an account',
-    showSignup: true,
-    organizationName: 'Acme Corporation',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your work email',
-    passwordLabel: 'Password',
-    passwordPlaceholder: 'Enter password',
-    showForgotPassword: true,
-    forgotPasswordUrl: '/forgot-password',
-    forgotPasswordText: 'Forgot?',
-    signinButtonText: 'Sign in',
-    orText: 'OR',
-    showOrSeparator: true,
-  },
-};
-
-export const OrganizationOnly = {
-  args: {
-    signinHeader: 'Sign in',
-    signUpText: '',
-    signUpUrl: '#',
-    signUpCTA: '',
-    showSignup: false,
-    organizationName: 'TechCorp Inc.',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your work email',
-    passwordLabel: 'Password',
-    passwordPlaceholder: 'Enter password',
-    showForgotPassword: true,
-    forgotPasswordUrl: '/forgot-password',
-    forgotPasswordText: 'Forgot?',
-    signinButtonText: 'Sign in',
-    orText: 'OR',
-    showOrSeparator: true,
-  },
-};
-
-export const LongOrganizationName = {
-  args: {
-    signinHeader: 'Sign in',
-    signUpText: 'New to ToolJet?',
-    signUpUrl: '#',
-    signUpCTA: 'Create an account',
-    showSignup: true,
-    organizationName: 'Very Long Organization Name That Might Wrap',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your work email',
-    passwordLabel: 'Password',
-    passwordPlaceholder: 'Enter password',
-    showForgotPassword: true,
-    forgotPasswordUrl: '/forgot-password',
-    forgotPasswordText: 'Forgot?',
-    signinButtonText: 'Sign in',
-    orText: 'OR',
-    showOrSeparator: true,
-  },
-};
-
-export const OrganizationWithSpecialChars = {
-  args: {
-    signinHeader: 'Sign in',
-    signUpText: 'New to ToolJet?',
-    signUpUrl: '#',
-    signUpCTA: 'Create an account',
-    showSignup: true,
-    organizationName: 'Acme & Co. (Ltd.)',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your work email',
-    passwordLabel: 'Password',
-    passwordPlaceholder: 'Enter password',
-    showForgotPassword: true,
-    forgotPasswordUrl: '/forgot-password',
-    forgotPasswordText: 'Forgot?',
-    signinButtonText: 'Sign in',
-    orText: 'OR',
-    showOrSeparator: true,
-  },
-};
-
-export const EmptyOrganizationName = {
-  args: {
-    signinHeader: 'Sign in',
-    signUpText: 'New to ToolJet?',
-    signUpUrl: '#',
-    signUpCTA: 'Create an account',
-    showSignup: true,
-    organizationName: '',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your work email',
-    passwordLabel: 'Password',
-    passwordPlaceholder: 'Enter password',
-    showForgotPassword: true,
-    forgotPasswordUrl: '/forgot-password',
-    forgotPasswordText: 'Forgot?',
-    signinButtonText: 'Sign in',
-    orText: 'OR',
-    showOrSeparator: true,
-  },
-};
-
-export const NoOrganizationNoSignup = {
-  args: {
-    signinHeader: 'Sign in',
-    signUpText: '',
-    signUpUrl: '#',
-    signUpCTA: '',
-    showSignup: false,
-    organizationName: '',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your work email',
-    passwordLabel: 'Password',
-    passwordPlaceholder: 'Enter password',
-    showForgotPassword: true,
-    forgotPasswordUrl: '/forgot-password',
-    forgotPasswordText: 'Forgot?',
-    signinButtonText: 'Sign in',
-    orText: 'OR',
-    showOrSeparator: true,
-  },
-};
-
-export const WithErrors = {
-  args: {
-    signinHeader: 'Sign in',
-    signUpText: 'New to ToolJet?',
-    signUpUrl: '#',
-    signUpCTA: 'Create an account',
-    emailLabel: 'Email',
-    emailPlaceholder: 'm@example.com',
-    passwordLabel: 'Password',
-    showForgotPassword: true,
-    forgotPasswordUrl: '/forgot-password',
-    forgotPasswordText: 'Forgot?',
-    signinButtonText: 'Sign in',
-    orText: 'OR',
-    showOrSeparator: true,
-    emailValue: 'invalid-email',
-    passwordValue: '123',
-    emailValidationMessage: {
-      valid: false,
-      message: 'Please enter a valid email address',
-    },
-    passwordValidationMessage: {
-      valid: false,
-      message: 'Password must be at least 8 characters',
-    },
-  },
-};
-
-export const Loading = {
-  args: {
-    signinHeader: 'Sign in',
-    signUpText: 'New to ToolJet?',
-    signUpUrl: '#',
-    signUpCTA: 'Create an account',
-    emailLabel: 'Email',
-    emailPlaceholder: 'm@example.com',
-    passwordLabel: 'Password',
-    showForgotPassword: true,
-    forgotPasswordUrl: '/forgot-password',
-    forgotPasswordText: 'Forgot?',
-    signinButtonText: 'Signing in...',
-    orText: 'OR',
-    showOrSeparator: true,
-    emailValue: 'user@example.com',
-    passwordValue: 'password123',
-    isLoading: true,
-    disabled: true,
-  },
-};
-
-export const CustomSeparator = {
-  args: {
-    signinHeader: 'Sign in',
-    signUpText: 'New to ToolJet?',
-    signUpUrl: '#',
-    signUpCTA: 'Create an account',
-    emailLabel: 'Email',
-    emailPlaceholder: 'm@example.com',
-    passwordLabel: 'Password',
-    showForgotPassword: true,
-    forgotPasswordUrl: '/forgot-password',
-    forgotPasswordText: 'Forgot?',
-    signinButtonText: 'Sign in',
-    orText: 'OR CONTINUE WITH',
-    showOrSeparator: true,
-  },
-};
-
-export const NoSeparator = {
-  args: {
-    signinHeader: 'Sign in',
-    signUpText: 'New to ToolJet?',
-    signUpUrl: '#',
-    signUpCTA: 'Create an account',
-    emailLabel: 'Email',
-    emailPlaceholder: 'm@example.com',
-    passwordLabel: 'Password',
-    showForgotPassword: true,
-    forgotPasswordUrl: '/forgot-password',
-    forgotPasswordText: 'Forgot?',
-    signinButtonText: 'Sign in',
-    orText: 'OR',
-    showOrSeparator: false,
-  },
-};
-
-export const Minimal = {
-  args: {
-    signinHeader: 'Login',
-    signUpText: '',
-    signUpUrl: '#',
-    signUpCTA: '',
-    showSignup: false,
-    organizationName: '',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your email',
-    passwordLabel: 'Password',
-    passwordPlaceholder: 'Enter password',
-    showForgotPassword: false,
-    signinButtonText: 'Login',
-    orText: 'OR',
-    showOrSeparator: false,
-  },
-};
-
-export const WithValidation = {
-  args: {
-    signinHeader: 'Sign in',
-    signUpText: 'New to ToolJet?',
-    signUpUrl: '#',
-    signUpCTA: 'Create an account',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your email',
-    passwordLabel: 'Password',
-    showForgotPassword: true,
-    forgotPasswordUrl: '/forgot-password',
-    forgotPasswordText: 'Forgot?',
-    signinButtonText: 'Sign in',
-    orText: 'OR',
-    showOrSeparator: true,
-    emailValidation: (e) => {
-      const value = e.target.value;
-      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-
-      if (!value) {
-        return { valid: false, message: 'Email is required' };
-      }
-
-      if (!emailRegex.test(value)) {
-        return { valid: false, message: 'Please enter a valid email address' };
-      }
-
-      return { valid: true, message: 'Email looks good!' };
-    },
-    passwordValidation: (e) => {
-      const value = e.target.value;
-
-      if (!value) {
-        return { valid: false, message: 'Password is required' };
-      }
-
-      if (value.length < 8) {
-        return {
-          valid: false,
-          message: 'Password must be at least 8 characters',
-        };
-      }
-
-      if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value)) {
-        return {
-          valid: false,
-          message: 'Password must contain uppercase, lowercase, and number',
-        };
-      }
-
-      return { valid: true, message: 'Password is strong!' };
-    },
-  },
-};
-
-export const WithExternalValidation = {
-  args: {
-    signinHeader: 'Sign in',
-    signUpText: 'New to ToolJet?',
-    signUpUrl: '#',
-    signUpCTA: 'Create an account',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your email',
-    passwordLabel: 'Password',
-    showForgotPassword: true,
-    forgotPasswordUrl: '/forgot-password',
-    forgotPasswordText: 'Forgot?',
-    signinButtonText: 'Sign in',
-    orText: 'OR',
-    showOrSeparator: true,
-    emailValue: 'user@example.com',
-    passwordValue: 'password123',
-    emailValidationMessage: {
-      valid: true,
-      message: 'Email is valid and available',
-    },
-    passwordValidationMessage: {
-      valid: true,
-      message: 'Password meets all requirements',
-    },
-  },
-};
-
-export const WithValidationErrors = {
-  args: {
-    signinHeader: 'Sign in',
-    signUpText: 'New to ToolJet?',
-    signUpUrl: '#',
-    signUpCTA: 'Create an account',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your email',
-    passwordLabel: 'Password',
-    showForgotPassword: true,
-    forgotPasswordUrl: '/forgot-password',
-    forgotPasswordText: 'Forgot?',
-    signinButtonText: 'Sign in',
-    orText: 'OR',
-    showOrSeparator: true,
-    emailValue: 'invalid-email',
-    passwordValue: '123',
-    emailValidationMessage: {
-      valid: false,
-      message: 'Please enter a valid email address',
-    },
-    passwordValidationMessage: {
-      valid: false,
-      message: 'Password must be at least 8 characters',
-    },
-  },
-};
diff --git a/frontend/src/components/Auth/Stories/LoginPage.stories.jsx b/frontend/src/components/Auth/Stories/LoginPage.stories.jsx
deleted file mode 100644
index 0a047a6f6b..0000000000
--- a/frontend/src/components/Auth/Stories/LoginPage.stories.jsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import React from 'react';
-import { AuthLayout } from '../AuthLayout';
-import { LoginForm } from '../LoginForm';
-import { GoogleSigninButton } from '../GoogleSigninButton';
-import { GitHubSigninButton } from '../GitHubSigninButton';
-
-export default {
-  title: 'Auth/Blocks/LoginPage',
-  component: AuthLayout,
-  parameters: {
-    layout: 'fullscreen',
-    viewport: {
-      viewports: {
-        desktop: {
-          name: 'Desktop',
-          styles: {
-            width: '1440px',
-            height: '900px',
-          },
-        },
-        tablet: {
-          name: 'Tablet',
-          styles: {
-            width: '768px',
-            height: '1024px',
-          },
-        },
-        mobile: {
-          name: 'Mobile',
-          styles: {
-            width: '375px',
-            height: '667px',
-          },
-        },
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    children: {
-      control: false,
-      description: 'Content to be displayed within the auth layout',
-    },
-  },
-};
-
-// Login Page with Organization
-export const LoginPageWithOrganization = {
-  parameters: {
-    viewport: {
-      defaultViewport: 'desktop',
-    },
-  },
-  args: {
-    children: (
-      <div className="tw-flex tw-flex-col tw-gap-6 tw-w-full">
-        <LoginForm
-          signinHeader="Sign in"
-          signUpText="New to ToolJet?"
-          signUpUrl="#"
-          signUpCTA="Create an account"
-          showSignup={true}
-          organizationName="Acme Corporation"
-          emailLabel="Email"
-          emailPlaceholder="Enter your work email"
-          passwordLabel="Password"
-          passwordPlaceholder="Enter password"
-          showForgotPassword={true}
-          forgotPasswordUrl="/forgot-password"
-          forgotPasswordText="Forgot?"
-          signinButtonText="Sign in"
-          orText="OR"
-          showOrSeparator={true}
-          emailValue=""
-          passwordValue=""
-          onEmailChange={() => {}}
-          onPasswordChange={() => {}}
-          onSubmit={() => {}}
-          isLoading={false}
-          disabled={false}
-        />
-
-        {/* SSO Buttons */}
-        <div className="tw-flex tw-flex-col tw-gap-3">
-          <GoogleSigninButton
-            onClick={() => console.log('Google sign in clicked')}
-            text="Continue with"
-            dataCy="google-signin-button"
-          />
-          <GitHubSigninButton
-            onClick={() => console.log('GitHub sign in clicked')}
-            text="Continue with"
-            dataCy="github-signin-button"
-          />
-        </div>
-      </div>
-    ),
-  },
-};
diff --git a/frontend/src/components/Auth/Stories/SetupAdminForm.stories.jsx b/frontend/src/components/Auth/Stories/SetupAdminForm.stories.jsx
deleted file mode 100644
index cc29048677..0000000000
--- a/frontend/src/components/Auth/Stories/SetupAdminForm.stories.jsx
+++ /dev/null
@@ -1,328 +0,0 @@
-import React from 'react';
-import { SetupAdminForm } from '../SetupAdminForm';
-
-export default {
-  title: 'Auth/Blocks/SetupAdminForm',
-  component: SetupAdminForm,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    headerText: {
-      control: 'text',
-      description: 'The main heading text for the setup admin form',
-    },
-    nameLabel: {
-      control: 'text',
-      description: 'Label for the name input field',
-    },
-    namePlaceholder: {
-      control: 'text',
-      description: 'Placeholder text for the name input',
-    },
-    emailLabel: {
-      control: 'text',
-      description: 'Label for the email input field',
-    },
-    emailPlaceholder: {
-      control: 'text',
-      description: 'Placeholder text for the email input',
-    },
-    passwordLabel: {
-      control: 'text',
-      description: 'Label for the password input field',
-    },
-    passwordPlaceholder: {
-      control: 'text',
-      description: 'Placeholder text for the password input',
-    },
-    buttonText: {
-      control: 'text',
-      description: 'Text for the submit button',
-    },
-    termsText: {
-      control: 'text',
-      description: 'Text for the terms and privacy notice',
-    },
-    showTerms: {
-      control: 'boolean',
-      description: 'Show or hide the terms and privacy notice',
-    },
-    nameValue: {
-      control: 'text',
-      description: 'Controlled value for name input',
-    },
-    emailValue: {
-      control: 'text',
-      description: 'Controlled value for email input',
-    },
-    passwordValue: {
-      control: 'text',
-      description: 'Controlled value for password input',
-    },
-    isLoading: {
-      control: 'boolean',
-      description: 'Loading state for the form',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disabled state for the form',
-    },
-    onSubmit: {
-      action: 'submitted',
-      description: 'Form submission handler',
-    },
-    onNameChange: {
-      action: 'name changed',
-      description: 'Name input change handler',
-    },
-    onEmailChange: {
-      action: 'email changed',
-      description: 'Email input change handler',
-    },
-    onPasswordChange: {
-      action: 'password changed',
-      description: 'Password input change handler',
-    },
-    nameValidation: {
-      control: false,
-      description: 'Name validation function',
-    },
-    emailValidation: {
-      control: false,
-      description: 'Email validation function',
-    },
-    passwordValidation: {
-      control: false,
-      description: 'Password validation function',
-    },
-    nameValidationMessage: {
-      control: 'object',
-      description: 'External name validation message object',
-    },
-    emailValidationMessage: {
-      control: 'object',
-      description: 'External email validation message object',
-    },
-    passwordValidationMessage: {
-      control: 'object',
-      description: 'External password validation message object',
-    },
-  },
-};
-
-export const Default = {
-  args: {
-    headerText: 'Set up your admin account',
-    nameLabel: 'Name',
-    namePlaceholder: 'Enter your name',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your work email',
-    passwordLabel: 'Password',
-    passwordPlaceholder: 'Enter password',
-    buttonText: 'Sign up',
-    termsText: 'By signing up, you agree to our Terms of Service and Privacy Policy',
-    showTerms: true,
-  },
-};
-
-export const CustomHeader = {
-  args: {
-    headerText: 'Create Admin Account',
-    nameLabel: 'Full Name',
-    namePlaceholder: 'Enter your full name',
-    emailLabel: 'Work Email',
-    emailPlaceholder: 'Enter your work email address',
-    passwordLabel: 'Password',
-    passwordPlaceholder: 'Create a secure password',
-    buttonText: 'Create Account',
-    termsText: 'By creating an account, you agree to our Terms of Service and Privacy Policy',
-    showTerms: true,
-  },
-};
-
-export const WithValues = {
-  args: {
-    headerText: 'Set up your admin account',
-    nameLabel: 'Name',
-    namePlaceholder: 'Enter your name',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your work email',
-    passwordLabel: 'Password',
-    passwordPlaceholder: 'Enter password',
-    buttonText: 'Sign up',
-    termsText: 'By signing up, you agree to our Terms of Service and Privacy Policy',
-    showTerms: true,
-    nameValue: 'John Doe',
-    emailValue: 'john.doe@company.com',
-    passwordValue: 'SecurePassword123!',
-  },
-};
-
-export const WithValidationErrors = {
-  args: {
-    headerText: 'Set up your admin account',
-    nameLabel: 'Name',
-    namePlaceholder: 'Enter your name',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your work email',
-    passwordLabel: 'Password',
-    passwordPlaceholder: 'Enter password',
-    buttonText: 'Sign up',
-    termsText: 'By signing up, you agree to our Terms of Service and Privacy Policy',
-    showTerms: true,
-    nameValue: '',
-    emailValue: 'invalid-email',
-    passwordValue: '123',
-    nameValidationMessage: {
-      valid: false,
-      message: 'Name is required',
-    },
-    emailValidationMessage: {
-      valid: false,
-      message: 'Please enter a valid email address',
-    },
-    passwordValidationMessage: {
-      valid: false,
-      message: 'Password must be at least 8 characters',
-    },
-  },
-};
-
-export const Loading = {
-  args: {
-    headerText: 'Set up your admin account',
-    nameLabel: 'Name',
-    namePlaceholder: 'Enter your name',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your work email',
-    passwordLabel: 'Password',
-    passwordPlaceholder: 'Enter password',
-    buttonText: 'Creating Account...',
-    termsText: 'By signing up, you agree to our Terms of Service and Privacy Policy',
-    showTerms: true,
-    nameValue: 'John Doe',
-    emailValue: 'john.doe@company.com',
-    passwordValue: 'SecurePassword123!',
-    isLoading: true,
-    disabled: true,
-  },
-};
-
-export const Disabled = {
-  args: {
-    headerText: 'Set up your admin account',
-    nameLabel: 'Name',
-    namePlaceholder: 'Enter your name',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your work email',
-    passwordLabel: 'Password',
-    passwordPlaceholder: 'Enter password',
-    buttonText: 'Sign up',
-    termsText: 'By signing up, you agree to our Terms of Service and Privacy Policy',
-    showTerms: true,
-    disabled: true,
-  },
-};
-
-export const NoTerms = {
-  args: {
-    headerText: 'Set up your admin account',
-    nameLabel: 'Name',
-    namePlaceholder: 'Enter your name',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your work email',
-    passwordLabel: 'Password',
-    passwordPlaceholder: 'Enter password',
-    buttonText: 'Sign up',
-    termsText: '',
-    showTerms: false,
-  },
-};
-
-export const WithValidation = {
-  args: {
-    headerText: 'Set up your admin account',
-    nameLabel: 'Name',
-    namePlaceholder: 'Enter your name',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your work email',
-    passwordLabel: 'Password',
-    passwordPlaceholder: 'Enter password',
-    buttonText: 'Sign up',
-    termsText: 'By signing up, you agree to our Terms of Service and Privacy Policy',
-    showTerms: true,
-    nameValidation: (e) => {
-      const value = e.target.value;
-      if (!value.trim()) {
-        return { valid: false, message: 'Name is required' };
-      }
-      if (value.length < 2) {
-        return { valid: false, message: 'Name must be at least 2 characters' };
-      }
-      return { valid: true, message: 'Name looks good!' };
-    },
-    emailValidation: (e) => {
-      const value = e.target.value;
-      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-      if (!value) {
-        return { valid: false, message: 'Email is required' };
-      }
-      if (!emailRegex.test(value)) {
-        return { valid: false, message: 'Please enter a valid email address' };
-      }
-      return { valid: true, message: 'Email looks good!' };
-    },
-    passwordValidation: (e) => {
-      const value = e.target.value;
-      if (!value) {
-        return { valid: false, message: 'Password is required' };
-      }
-      if (value.length < 8) {
-        return {
-          valid: false,
-          message: 'Password must be at least 8 characters',
-        };
-      }
-      if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value)) {
-        return {
-          valid: false,
-          message: 'Password must contain uppercase, lowercase, and number',
-        };
-      }
-      return { valid: true, message: 'Password is strong!' };
-    },
-  },
-};
-
-export const Minimal = {
-  args: {
-    headerText: 'Admin Setup',
-    nameLabel: 'Name',
-    namePlaceholder: 'Enter name',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter email',
-    passwordLabel: 'Password',
-    passwordPlaceholder: 'Enter password',
-    buttonText: 'Setup',
-    termsText: '',
-    showTerms: false,
-  },
-};
-
-export const CustomTerms = {
-  args: {
-    headerText: 'Set up your admin account',
-    nameLabel: 'Name',
-    namePlaceholder: 'Enter your name',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your work email',
-    passwordLabel: 'Password',
-    passwordPlaceholder: 'Enter password',
-    buttonText: 'Sign up',
-    termsText:
-      'By creating an admin account, you acknowledge that you have read and agree to our Terms of Service, Privacy Policy, and Data Processing Agreement.',
-    showTerms: true,
-  },
-};
diff --git a/frontend/src/components/Auth/Stories/SignupFlow.stories.jsx b/frontend/src/components/Auth/Stories/SignupFlow.stories.jsx
deleted file mode 100644
index ffed6d261a..0000000000
--- a/frontend/src/components/Auth/Stories/SignupFlow.stories.jsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import React from 'react';
-import { AuthLayout } from '../AuthLayout';
-import { AuthCenteredLayout } from '../AuthCenteredLayout';
-import { SignupFormWithSSO } from '../SignupFormWithSSO';
-import { SignupSuccessInfo } from '../SignupSuccessInfo';
-
-export default {
-  title: 'Auth/Flows/Signup',
-  component: AuthLayout,
-  parameters: {
-    layout: 'fullscreen',
-    viewport: {
-      viewports: {
-        desktop: {
-          name: 'Desktop',
-          styles: {
-            width: '1440px',
-            height: '900px',
-          },
-        },
-        tablet: {
-          name: 'Tablet',
-          styles: {
-            width: '768px',
-            height: '1024px',
-          },
-        },
-        mobile: {
-          name: 'Mobile',
-          styles: {
-            width: '375px',
-            height: '667px',
-          },
-        },
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    children: {
-      control: false,
-      description: 'Content to be displayed within the auth layout',
-    },
-  },
-};
-
-// Signup Flow - Step 1: Signup Form with SSO
-export const SignupFormFlow = {
-  parameters: {
-    viewport: {
-      defaultViewport: 'desktop',
-    },
-  },
-  args: {
-    children: (
-      <SignupFormWithSSO
-        signupHeader="Sign up"
-        signinText="Already have an account?"
-        signinUrl="/login"
-        signinCTA="Sign in"
-        showSignin={true}
-        organizationName=""
-        nameLabel="Name"
-        namePlaceholder="Enter your full name"
-        emailLabel="Email"
-        emailPlaceholder="Enter your work email"
-        passwordLabel="Password"
-        passwordPlaceholder="Create password"
-        signupButtonText="Sign up"
-        orText="OR"
-        showOrSeparator={true}
-        showSSOButtons={true}
-        googleButtonText="Sign up with"
-        githubButtonText="Sign up with"
-        onGoogleSignup={() => console.log('Google signup clicked')}
-        onGitHubSignup={() => console.log('GitHub signup clicked')}
-      />
-    ),
-  },
-};
-
-// Signup Flow - Step 1: With Organization
-export const SignupFormWithOrganizationFlow = {
-  parameters: {
-    viewport: {
-      defaultViewport: 'desktop',
-    },
-  },
-  args: {
-    children: (
-      <SignupFormWithSSO
-        signupHeader="Sign up"
-        signinText="Already have an account?"
-        signinUrl="/login"
-        signinCTA="Sign in"
-        showSignin={true}
-        organizationName="Acme Corporation"
-        nameLabel="Name"
-        namePlaceholder="Enter your full name"
-        emailLabel="Email"
-        emailPlaceholder="Enter your work email"
-        passwordLabel="Password"
-        passwordPlaceholder="Create password"
-        signupButtonText="Sign up"
-        orText="OR"
-        showOrSeparator={true}
-        showSSOButtons={true}
-        googleButtonText="Sign up with"
-        githubButtonText="Sign up with"
-        onGoogleSignup={() => console.log('Google signup clicked')}
-        onGitHubSignup={() => console.log('GitHub signup clicked')}
-      />
-    ),
-  },
-};
-
-// Signup Flow - Step 2: Signup Confirmation
-export const SignupConfirmationFlow = {
-  render: (args) => (
-    <AuthCenteredLayout {...args}>
-      <SignupSuccessInfo
-        headerText="Check your mail"
-        messageText="We've sent a verification email to"
-        email="user@example.com"
-        name="John Doe"
-        infoText="Did not receive an email? Check your spam folder!"
-        showInfo={true}
-        resendButtonText="Resend verification email"
-        resendCountdownText="Resend verification email in"
-        showResendButton={true}
-        resendDisabled={false}
-        resendCountdown={0}
-        onResendEmail={() => console.log('Resend email clicked')}
-        backButtonText="Back to sign up"
-        onBackToSignup={() => console.log('Back to signup clicked')}
-        showSeparator={true}
-      />
-    </AuthCenteredLayout>
-  ),
-  parameters: {
-    viewport: {
-      defaultViewport: 'desktop',
-    },
-  },
-};
diff --git a/frontend/src/components/Auth/Stories/SignupFormWithSSO.stories.jsx b/frontend/src/components/Auth/Stories/SignupFormWithSSO.stories.jsx
deleted file mode 100644
index e57dc562de..0000000000
--- a/frontend/src/components/Auth/Stories/SignupFormWithSSO.stories.jsx
+++ /dev/null
@@ -1,280 +0,0 @@
-import React from 'react';
-import { SignupFormWithSSO } from '../SignupFormWithSSO';
-
-export default {
-  title: 'Auth/Blocks/SignupFormWithSSO',
-  component: SignupFormWithSSO,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    signupHeader: {
-      control: 'text',
-      description: 'The main heading text for the signup form',
-    },
-    signinText: {
-      control: 'text',
-      description: 'Text for the sign in link',
-    },
-    signinUrl: {
-      control: 'text',
-      description: 'URL for the sign in link',
-    },
-    signinCTA: {
-      control: 'text',
-      description: 'Call to action text for the sign in link',
-    },
-    showSignin: {
-      control: 'boolean',
-      description: 'Show or hide the sign in link',
-    },
-    organizationName: {
-      control: 'text',
-      description: 'Name of the organization to display',
-    },
-    nameLabel: {
-      control: 'text',
-      description: 'Label for the name input field',
-    },
-    namePlaceholder: {
-      control: 'text',
-      description: 'Placeholder text for the name input field',
-    },
-    emailLabel: {
-      control: 'text',
-      description: 'Label for the email input field',
-    },
-    emailPlaceholder: {
-      control: 'text',
-      description: 'Placeholder text for the email input field',
-    },
-    passwordLabel: {
-      control: 'text',
-      description: 'Label for the password input field',
-    },
-    passwordPlaceholder: {
-      control: 'text',
-      description: 'Placeholder text for the password input field',
-    },
-    signupButtonText: {
-      control: 'text',
-      description: 'Text for the signup button',
-    },
-    orText: {
-      control: 'text',
-      description: 'Text for the OR separator',
-    },
-    showOrSeparator: {
-      control: 'boolean',
-      description: 'Show or hide the OR separator',
-    },
-    showSSOButtons: {
-      control: 'boolean',
-      description: 'Show or hide the SSO buttons',
-    },
-    googleButtonText: {
-      control: 'text',
-      description: 'Text for the Google signup button',
-    },
-    githubButtonText: {
-      control: 'text',
-      description: 'Text for the GitHub signup button',
-    },
-    onGoogleSignup: {
-      action: 'google signup clicked',
-      description: 'Google signup button handler',
-    },
-    onGitHubSignup: {
-      action: 'github signup clicked',
-      description: 'GitHub signup button handler',
-    },
-    onSubmit: {
-      action: 'form submitted',
-      description: 'Form submission handler',
-    },
-    isLoading: {
-      control: 'boolean',
-      description: 'Loading state for the form',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disabled state for the form',
-    },
-  },
-};
-
-export const Default = {
-  args: {
-    signupHeader: 'Sign up',
-    signinText: 'Already have an account?',
-    signinUrl: '/login',
-    signinCTA: 'Sign in',
-    showSignin: true,
-    organizationName: '',
-    nameLabel: 'Name',
-    namePlaceholder: 'Enter your full name',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your work email',
-    passwordLabel: 'Password',
-    passwordPlaceholder: 'Create password',
-    signupButtonText: 'Sign up',
-    orText: 'OR',
-    showOrSeparator: true,
-    showSSOButtons: true,
-    googleButtonText: 'Sign up with',
-    githubButtonText: 'Sign up with',
-    isLoading: false,
-    disabled: false,
-  },
-};
-
-export const WithOrganization = {
-  args: {
-    signupHeader: 'Sign up',
-    signinText: 'Already have an account?',
-    signinUrl: '/login',
-    signinCTA: 'Sign in',
-    showSignin: true,
-    organizationName: 'Acme Corporation',
-    nameLabel: 'Name',
-    namePlaceholder: 'Enter your full name',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your work email',
-    passwordLabel: 'Password',
-    passwordPlaceholder: 'Create password',
-    signupButtonText: 'Sign up',
-    orText: 'OR',
-    showOrSeparator: true,
-    showSSOButtons: true,
-    googleButtonText: 'Sign up with',
-    githubButtonText: 'Sign up with',
-    isLoading: false,
-    disabled: false,
-  },
-};
-
-export const WithoutSSO = {
-  args: {
-    signupHeader: 'Sign up',
-    signinText: 'Already have an account?',
-    signinUrl: '/login',
-    signinCTA: 'Sign in',
-    showSignin: true,
-    organizationName: '',
-    nameLabel: 'Name',
-    namePlaceholder: 'Enter your full name',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your work email',
-    passwordLabel: 'Password',
-    passwordPlaceholder: 'Create password',
-    signupButtonText: 'Sign up',
-    orText: 'OR',
-    showOrSeparator: false,
-    showSSOButtons: false,
-    googleButtonText: 'Sign up with',
-    githubButtonText: 'Sign up with',
-    isLoading: false,
-    disabled: false,
-  },
-};
-
-export const WithoutSigninLink = {
-  args: {
-    signupHeader: 'Sign up',
-    signinText: 'Already have an account?',
-    signinUrl: '/login',
-    signinCTA: 'Sign in',
-    showSignin: false,
-    organizationName: '',
-    nameLabel: 'Name',
-    namePlaceholder: 'Enter your full name',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your work email',
-    passwordLabel: 'Password',
-    passwordPlaceholder: 'Create password',
-    signupButtonText: 'Sign up',
-    orText: 'OR',
-    showOrSeparator: true,
-    showSSOButtons: true,
-    googleButtonText: 'Sign up with',
-    githubButtonText: 'Sign up with',
-    isLoading: false,
-    disabled: false,
-  },
-};
-
-export const Loading = {
-  args: {
-    signupHeader: 'Sign up',
-    signinText: 'Already have an account?',
-    signinUrl: '/login',
-    signinCTA: 'Sign in',
-    showSignin: true,
-    organizationName: '',
-    nameLabel: 'Name',
-    namePlaceholder: 'Enter your full name',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your work email',
-    passwordLabel: 'Password',
-    passwordPlaceholder: 'Create password',
-    signupButtonText: 'Sign up',
-    orText: 'OR',
-    showOrSeparator: true,
-    showSSOButtons: true,
-    googleButtonText: 'Sign up with',
-    githubButtonText: 'Sign up with',
-    isLoading: true,
-    disabled: false,
-  },
-};
-
-export const Disabled = {
-  args: {
-    signupHeader: 'Sign up',
-    signinText: 'Already have an account?',
-    signinUrl: '/login',
-    signinCTA: 'Sign in',
-    showSignin: true,
-    organizationName: '',
-    nameLabel: 'Name',
-    namePlaceholder: 'Enter your full name',
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your work email',
-    passwordLabel: 'Password',
-    passwordPlaceholder: 'Create password',
-    signupButtonText: 'Sign up',
-    orText: 'OR',
-    showOrSeparator: true,
-    showSSOButtons: true,
-    googleButtonText: 'Sign up with',
-    githubButtonText: 'Sign up with',
-    isLoading: false,
-    disabled: true,
-  },
-};
-
-export const CustomTexts = {
-  args: {
-    signupHeader: 'Create Account',
-    signinText: 'Have an existing account?',
-    signinUrl: '/login',
-    signinCTA: 'Log in',
-    showSignin: true,
-    organizationName: 'TechCorp',
-    nameLabel: 'Full Name',
-    namePlaceholder: 'Enter your complete name',
-    emailLabel: 'Work Email',
-    emailPlaceholder: 'Enter your company email',
-    passwordLabel: 'Secure Password',
-    passwordPlaceholder: 'Create a strong password',
-    signupButtonText: 'Create Account',
-    orText: 'OR',
-    showOrSeparator: true,
-    showSSOButtons: true,
-    googleButtonText: 'Continue with',
-    githubButtonText: 'Continue with',
-    isLoading: false,
-    disabled: false,
-  },
-};
diff --git a/frontend/src/components/Auth/Stories/SignupSuccessInfo.stories.jsx b/frontend/src/components/Auth/Stories/SignupSuccessInfo.stories.jsx
deleted file mode 100644
index 50371173a4..0000000000
--- a/frontend/src/components/Auth/Stories/SignupSuccessInfo.stories.jsx
+++ /dev/null
@@ -1,305 +0,0 @@
-import React from 'react';
-import { SignupSuccessInfo } from '../SignupSuccessInfo';
-
-export default {
-  title: 'Auth/Blocks/SignupSuccessInfo',
-  component: SignupSuccessInfo,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    headerText: {
-      control: 'text',
-      description: 'The main heading text for the signup success screen',
-    },
-    messageText: {
-      control: 'text',
-      description: 'Main message text',
-    },
-    email: {
-      control: 'text',
-      description: 'Email address to display in the message',
-    },
-    name: {
-      control: 'text',
-      description: 'User name to display in the message',
-    },
-    infoText: {
-      control: 'text',
-      description: 'Additional info text',
-    },
-    showInfo: {
-      control: 'boolean',
-      description: 'Show or hide the info text',
-    },
-    resendButtonText: {
-      control: 'text',
-      description: 'Text for the resend verification email button',
-    },
-    resendCountdownText: {
-      control: 'text',
-      description: 'Text for the resend countdown',
-    },
-    showResendButton: {
-      control: 'boolean',
-      description: 'Show or hide the resend button',
-    },
-    resendDisabled: {
-      control: 'boolean',
-      description: 'Disabled state for the resend button',
-    },
-    resendCountdown: {
-      control: 'number',
-      description: 'Countdown value for resend button',
-    },
-    backButtonText: {
-      control: 'text',
-      description: 'Text for the back to signup button',
-    },
-    onBackToSignup: {
-      action: 'back to signup clicked',
-      description: 'Back to signup button handler',
-    },
-    showSeparator: {
-      control: 'boolean',
-      description: 'Show or hide the separator',
-    },
-  },
-};
-
-export const Default = {
-  args: {
-    headerText: 'Check your mail',
-    messageText: "We've sent a verification email to",
-    email: 'user@example.com',
-    name: 'John Doe',
-    infoText: 'Did not receive an email? Check your spam folder!',
-    showInfo: true,
-    resendButtonText: 'Resend verification email',
-    resendCountdownText: 'Resend verification email in',
-    showResendButton: true,
-    resendDisabled: false,
-    resendCountdown: 0,
-    backButtonText: 'Back to sign up',
-    showSeparator: true,
-  },
-};
-
-export const CustomHeader = {
-  args: {
-    headerText: 'Account Created Successfully',
-    messageText: "We've sent a verification email to",
-    email: 'user@example.com',
-    name: 'John Doe',
-    infoText: 'Did not receive an email? Check your spam folder!',
-    showInfo: true,
-    resendButtonText: 'Resend verification email',
-    resendCountdownText: 'Resend verification email in',
-    showResendButton: true,
-    resendDisabled: false,
-    resendCountdown: 0,
-    backButtonText: 'Back to sign up',
-    showSeparator: true,
-  },
-};
-
-export const WithEmailOnly = {
-  args: {
-    headerText: 'Check your mail',
-    messageText: "We've sent a verification email to",
-    email: 'user@example.com',
-    name: '',
-    infoText: 'Did not receive an email? Check your spam folder!',
-    showInfo: true,
-    resendButtonText: 'Resend verification email',
-    resendCountdownText: 'Resend verification email in',
-    showResendButton: true,
-    resendDisabled: false,
-    resendCountdown: 0,
-    backButtonText: 'Back to sign up',
-    showSeparator: true,
-  },
-};
-
-export const WithNameOnly = {
-  args: {
-    headerText: 'Check your mail',
-    messageText: "We've sent a verification email to your registered email address",
-    email: '',
-    name: 'John Doe',
-    infoText: 'Did not receive an email? Check your spam folder!',
-    showInfo: true,
-    resendButtonText: 'Resend verification email',
-    resendCountdownText: 'Resend verification email in',
-    showResendButton: true,
-    resendDisabled: false,
-    resendCountdown: 0,
-    backButtonText: 'Back to sign up',
-    showSeparator: true,
-  },
-};
-
-export const LongEmail = {
-  args: {
-    headerText: 'Check your mail',
-    messageText: "We've sent a verification email to",
-    email: 'very.long.email.address@verylongdomainname.com',
-    name: 'John Doe',
-    infoText: 'Did not receive an email? Check your spam folder!',
-    showInfo: true,
-    resendButtonText: 'Resend verification email',
-    resendCountdownText: 'Resend verification email in',
-    showResendButton: true,
-    resendDisabled: false,
-    resendCountdown: 0,
-    backButtonText: 'Back to sign up',
-    showSeparator: true,
-  },
-};
-
-export const NoInfo = {
-  args: {
-    headerText: 'Check your mail',
-    messageText: "We've sent a verification email to",
-    email: 'user@example.com',
-    name: 'John Doe',
-    infoText: '',
-    showInfo: false,
-    resendButtonText: 'Resend verification email',
-    resendCountdownText: 'Resend verification email in',
-    showResendButton: true,
-    resendDisabled: false,
-    resendCountdown: 0,
-    backButtonText: 'Back to sign up',
-    showSeparator: true,
-  },
-};
-
-export const NoResendButton = {
-  args: {
-    headerText: 'Check your mail',
-    messageText: "We've sent a verification email to",
-    email: 'user@example.com',
-    name: 'John Doe',
-    infoText: 'Did not receive an email? Check your spam folder!',
-    showInfo: true,
-    resendButtonText: 'Resend verification email',
-    resendCountdownText: 'Resend verification email in',
-    showResendButton: false,
-    resendDisabled: false,
-    resendCountdown: 0,
-    backButtonText: 'Back to sign up',
-    showSeparator: true,
-  },
-};
-
-export const ResendDisabled = {
-  args: {
-    headerText: 'Check your mail',
-    messageText: "We've sent a verification email to",
-    email: 'user@example.com',
-    name: 'John Doe',
-    infoText: 'Did not receive an email? Check your spam folder!',
-    showInfo: true,
-    resendButtonText: 'Resend verification email',
-    resendCountdownText: 'Resend verification email in',
-    showResendButton: true,
-    resendDisabled: true,
-    resendCountdown: 15,
-    backButtonText: 'Back to sign up',
-    showSeparator: true,
-  },
-};
-
-export const NoSeparator = {
-  args: {
-    headerText: 'Check your mail',
-    messageText: "We've sent a verification email to",
-    email: 'user@example.com',
-    name: 'John Doe',
-    infoText: 'Did not receive an email? Check your spam folder!',
-    showInfo: true,
-    resendButtonText: 'Resend verification email',
-    resendCountdownText: 'Resend verification email in',
-    showResendButton: true,
-    resendDisabled: false,
-    resendCountdown: 0,
-    backButtonText: 'Back to sign up',
-    showSeparator: false,
-  },
-};
-
-export const CustomMessage = {
-  args: {
-    headerText: 'Account Created',
-    messageText: 'A verification email has been sent to your email address',
-    email: 'user@example.com',
-    name: 'John Doe',
-    infoText: 'Please check your inbox and follow the instructions to verify your account',
-    showInfo: true,
-    resendButtonText: 'Resend verification email',
-    resendCountdownText: 'Resend verification email in',
-    showResendButton: true,
-    resendDisabled: false,
-    resendCountdown: 0,
-    backButtonText: 'Return to signup',
-    showSeparator: true,
-  },
-};
-
-export const Minimal = {
-  args: {
-    headerText: 'Email Sent',
-    messageText: 'Check your email for verification instructions',
-    email: '',
-    name: '',
-    infoText: '',
-    showInfo: false,
-    resendButtonText: 'Resend',
-    resendCountdownText: 'Resend in',
-    showResendButton: false,
-    resendDisabled: false,
-    resendCountdown: 0,
-    backButtonText: 'Back',
-    showSeparator: false,
-  },
-};
-
-export const CustomButtonTexts = {
-  args: {
-    headerText: 'Check your mail',
-    messageText: "We've sent a verification email to",
-    email: 'user@example.com',
-    name: 'John Doe',
-    infoText: 'Did not receive an email? Check your spam folder!',
-    showInfo: true,
-    resendButtonText: 'Send another verification email',
-    resendCountdownText: 'Send another email in',
-    showResendButton: true,
-    resendDisabled: false,
-    resendCountdown: 0,
-    backButtonText: 'Return to registration',
-    showSeparator: true,
-  },
-};
-
-export const LongMessage = {
-  args: {
-    headerText: 'Check your mail',
-    messageText:
-      "We've sent a verification email to your registered email address. Please check your inbox and click the link to verify your account and continue with the setup process",
-    email: 'user@example.com',
-    name: 'John Doe',
-    infoText:
-      'Did not receive an email? Please check your spam folder or contact support if you continue to have issues with email delivery',
-    showInfo: true,
-    resendButtonText: 'Resend verification email',
-    resendCountdownText: 'Resend verification email in',
-    showResendButton: true,
-    resendDisabled: false,
-    resendCountdown: 0,
-    backButtonText: 'Back to sign up',
-    showSeparator: true,
-  },
-};
diff --git a/frontend/src/components/Auth/Stories/TeamInviteFlow.stories.jsx b/frontend/src/components/Auth/Stories/TeamInviteFlow.stories.jsx
deleted file mode 100644
index 41c34bcea8..0000000000
--- a/frontend/src/components/Auth/Stories/TeamInviteFlow.stories.jsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from 'react';
-import { AuthLayout } from '../AuthLayout';
-import { InviteSignupForm } from '../InviteSignupForm';
-import { JoinWorkspaceForm } from '../JoinWorkspaceForm';
-
-export default {
-  title: 'Auth/Flows/TeamInvite',
-  component: AuthLayout,
-  parameters: {
-    layout: 'fullscreen',
-    viewport: {
-      viewports: {
-        desktop: {
-          name: 'Desktop',
-          styles: {
-            width: '1440px',
-            height: '900px',
-          },
-        },
-        tablet: {
-          name: 'Tablet',
-          styles: {
-            width: '768px',
-            height: '1024px',
-          },
-        },
-        mobile: {
-          name: 'Mobile',
-          styles: {
-            width: '375px',
-            height: '667px',
-          },
-        },
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    children: {
-      control: false,
-      description: 'Content to be displayed within the auth layout',
-    },
-  },
-};
-
-// Team Invite Flow - Step 1: Invite Signup
-export const TeamInviteSignupFlow = {
-  parameters: {
-    viewport: {
-      defaultViewport: 'desktop',
-    },
-  },
-  args: {
-    children: (
-      <InviteSignupForm
-        headerText="Sign up"
-        descriptionText="You have been invited to join a workspace. Please create your account to continue."
-        emailLabel="Email"
-        emailPlaceholder="Enter your email"
-        emailValue="nithin@dev.io"
-        emailDisabled={true}
-        passwordLabel="Password"
-        passwordPlaceholder="Create password"
-        buttonText="Create account"
-      />
-    ),
-  },
-};
-
-// Team Invite Flow - Step 2: Join Workspace
-export const TeamInviteJoinWorkspaceFlow = {
-  parameters: {
-    viewport: {
-      defaultViewport: 'desktop',
-    },
-  },
-  args: {
-    children: (
-      <JoinWorkspaceForm
-        headerText="Join Dev's workspace"
-        descriptionText="You are invited to a workspace Dev's workspace. Accept the invite to join the workspace."
-        nameLabel="Name"
-        namePlaceholder="Enter your name"
-        nameValue="Nithin"
-        emailLabel="Email"
-        emailPlaceholder="Enter your email"
-        emailValue="nithin@dev.io"
-        buttonText="Accept Invite"
-      />
-    ),
-  },
-};
diff --git a/frontend/src/components/ui/Alert/Alert.jsx b/frontend/src/components/ui/Alert/Alert.jsx
deleted file mode 100644
index 680723fe46..0000000000
--- a/frontend/src/components/ui/Alert/Alert.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import * as React from 'react';
-import { cva } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-
-const alertVariants = cva('tw-relative tw-w-full tw-rounded-md tw-p-3 tw-text-xs tw-flex tw-gap-1.5 tw-items-start', {
-  variants: {
-    type: {
-      info: '',
-      warning: '',
-      danger: '',
-    },
-    background: {
-      none: '',
-      grey: 'tw-bg-interactive-default',
-      white: 'tw-bg-background-surface-layer-01 tw-shadow-elevation-100',
-      'state-specific': '',
-    },
-  },
-  compoundVariants: [
-    // Info variants
-    {
-      type: 'info',
-      background: 'state-specific',
-      class: 'tw-bg-background-accent-weak',
-    },
-    // Warning variants
-    {
-      type: 'warning',
-      background: 'state-specific',
-      class: 'tw-bg-background-warning-weak',
-    },
-    // Danger variants
-    {
-      type: 'danger',
-      background: 'state-specific',
-      class: 'tw-bg-background-error-weak',
-    },
-  ],
-  defaultVariants: {
-    type: 'info',
-    background: 'none',
-  },
-});
-
-const Alert = React.forwardRef(({ className, type, background, ...props }, ref) => (
-  <div ref={ref} role="alert" className={cn(alertVariants({ type, background }), className)} {...props} />
-));
-Alert.displayName = 'Alert';
-
-const AlertTitle = React.forwardRef(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn('tw-font-medium tw-leading-[18px] tw-text-[#2d343b] tw-text-[12px] tw-mb-0', className)}
-    {...props}
-  />
-));
-AlertTitle.displayName = 'AlertTitle';
-
-const AlertDescription = React.forwardRef(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn('tw-font-normal tw-leading-[18px] tw-text-text-placeholder tw-text-[12px]', className)}
-    {...props}
-  />
-));
-AlertDescription.displayName = 'AlertDescription';
-
-export { Alert, AlertTitle, AlertDescription };
diff --git a/frontend/src/components/ui/EncryptedField/Index.jsx b/frontend/src/components/ui/EncryptedField/Index.jsx
deleted file mode 100644
index 2d8ae61c77..0000000000
--- a/frontend/src/components/ui/EncryptedField/Index.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import { Button } from '@/components/ui/button';
-import { generateCypressDataCy } from '../../../modules/common/helpers/cypressHelpers.js';
-
-const EncryptedField = ({ propertyKey, isEditing, handleEncryptedFieldsToggle, isDisabled, children }) => {
-  return (
-    <div>
-      <div className="d-flex justify-content-between w-100">
-        <div className="mx-1 col">
-          <Button
-            type="a"
-            variant="tertiary"
-            target="_blank"
-            rel="noreferrer"
-            disabled={isDisabled}
-            onClick={(e) => handleEncryptedFieldsToggle(e, propertyKey)}
-            data-cy={`button-${generateCypressDataCy(isEditing ? 'Cancel' : 'Edit')}`}
-          >
-            {isEditing ? 'Cancel' : 'Edit'}
-          </Button>
-        </div>
-        <div className="col-auto mb-2">
-          <small className="text-green" data-cy="encrypted-text">
-            <img
-              className="mx-2 encrypted-icon"
-              src="assets/images/icons/padlock.svg"
-              width="12"
-              height="12"
-              alt="Encrypted"
-            />
-            Encrypted
-          </small>
-        </div>
-      </div>
-      {children}
-    </div>
-  );
-};
-
-export default EncryptedField;
diff --git a/frontend/src/components/ui/InlineInfo/InlineInfo.jsx b/frontend/src/components/ui/InlineInfo/InlineInfo.jsx
deleted file mode 100644
index 79a09a594d..0000000000
--- a/frontend/src/components/ui/InlineInfo/InlineInfo.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from 'react';
-import { cn } from '@/lib/utils';
-import { Alert, AlertTitle, AlertDescription } from '../Alert/Alert';
-
-// Icon color variants based on type
-const getIconColor = (type) => {
-  switch (type) {
-    case 'info':
-      return 'tw-text-icon-brand';
-    case 'warning':
-      return 'tw-text-icon-warning';
-    case 'danger':
-      return 'tw-text-icon-danger';
-    default:
-      return 'tw-text-icon-brand';
-  }
-};
-
-// Compound component that accepts title, icon, description, and button props
-const InlineInfoCompound = React.forwardRef(
-  ({ className, type = 'info', background = 'none', title, icon: Icon, description, button, ...props }, ref) => (
-    <Alert ref={ref} type={type} background={background} className={className} {...props}>
-      {Icon && (
-        <div className="tw-shrink-0 tw-w-[18px] tw-h-[18px]">
-          <Icon className={cn('tw-w-full tw-h-full', getIconColor(type))} />
-        </div>
-      )}
-      <div className="tw-flex tw-flex-col tw-gap-2 tw-items-start">
-        {title && <AlertTitle>{title}</AlertTitle>}
-        {description && <AlertDescription>{description}</AlertDescription>}
-        {button && <div className="tw-mt-1">{button}</div>}
-      </div>
-    </Alert>
-  )
-);
-InlineInfoCompound.displayName = 'InlineInfoCompound';
-
-export { InlineInfoCompound };
diff --git a/frontend/src/components/ui/InlineInfo/InlineInfo.stories.jsx b/frontend/src/components/ui/InlineInfo/InlineInfo.stories.jsx
deleted file mode 100644
index 9ca2c234e2..0000000000
--- a/frontend/src/components/ui/InlineInfo/InlineInfo.stories.jsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import React from 'react';
-import { InlineInfoCompound } from './InlineInfo';
-import { Info, AlertTriangle, AlertCircle } from 'lucide-react';
-import { Button } from '../Button/Button';
-
-export default {
-  title: 'UI/InlineInfo',
-  component: InlineInfoCompound,
-  parameters: {
-    layout: 'padded',
-  },
-  argTypes: {
-    type: {
-      control: { type: 'select' },
-      options: ['info', 'warning', 'danger'],
-    },
-    background: {
-      control: { type: 'select' },
-      options: ['none', 'grey', 'white', 'state-specific'],
-    },
-    title: {
-      control: { type: 'text' },
-    },
-    description: {
-      control: { type: 'text' },
-    },
-  },
-};
-
-const Template = (args) => <InlineInfoCompound {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  type: 'info',
-  background: 'none',
-  title: 'Information',
-  description: 'This is an informational message.',
-  icon: Info,
-  button: (
-    <Button size="small" variant="outline">
-      Learn More
-    </Button>
-  ),
-};
-
-// All Variants Grid
-export const AllVariants = () => {
-  const types = ['info', 'warning', 'danger'];
-  const backgrounds = ['none', 'grey', 'white', 'state-specific'];
-  const icons = {
-    info: Info,
-    warning: AlertTriangle,
-    danger: AlertCircle,
-  };
-  const titles = {
-    info: 'Information',
-    warning: 'Warning',
-    danger: 'Error',
-  };
-  const descriptions = {
-    info: 'This is an informational message.',
-    warning: 'Please review your settings before proceeding.',
-    danger: 'Something went wrong. Please try again.',
-  };
-
-  return (
-    <div className="tw-space-y-8">
-      <div>
-        <h2 className="tw-text-2xl tw-font-bold tw-mb-4">InlineInfo Compound Component - All Variants</h2>
-        <p className="tw-text-gray-600 tw-mb-6">
-          Showcasing all 12 variants from Figma design (3 types × 4 backgrounds)
-        </p>
-      </div>
-
-      {types.map((type) => (
-        <div key={type} className="tw-space-y-4">
-          <h3 className="tw-text-lg tw-font-semibold tw-capitalize tw-text-gray-800">{type} Type</h3>
-          <div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4">
-            {backgrounds.map((background) => (
-              <div key={`${type}-${background}`} className="tw-space-y-2">
-                <div className="tw-text-sm tw-font-medium tw-text-gray-600 tw-capitalize">
-                  {background.replace('-', ' ')} Background
-                </div>
-                <InlineInfoCompound
-                  type={type}
-                  background={background}
-                  icon={icons[type]}
-                  title={titles[type]}
-                  description={descriptions[type]}
-                  button={
-                    <Button size="sm" variant={type === 'danger' ? 'destructive' : 'outline'}>
-                      Action
-                    </Button>
-                  }
-                />
-              </div>
-            ))}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-// Individual Type Stories
-export const InfoVariants = () => (
-  <div className="tw-space-y-4">
-    <h3 className="tw-text-lg tw-font-semibold">Info Type Variants</h3>
-    <div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4">
-      {['none', 'grey', 'white', 'state-specific'].map((background) => (
-        <div key={background} className="tw-space-y-2">
-          <div className="tw-text-sm tw-font-medium tw-text-gray-600 tw-capitalize">
-            {background.replace('-', ' ')} Background
-          </div>
-          <InlineInfoCompound
-            type="info"
-            background={background}
-            icon={Info}
-            title="Information"
-            description="This is an informational message."
-            button={
-              <Button size="sm" variant="outline">
-                Learn More
-              </Button>
-            }
-          />
-        </div>
-      ))}
-    </div>
-  </div>
-);
-
-export const WarningVariants = () => (
-  <div className="tw-space-y-4">
-    <h3 className="tw-text-lg tw-font-semibold">Warning Type Variants</h3>
-    <div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4">
-      {['none', 'grey', 'white', 'state-specific'].map((background) => (
-        <div key={background} className="tw-space-y-2">
-          <div className="tw-text-sm tw-font-medium tw-text-gray-600 tw-capitalize">
-            {background.replace('-', ' ')} Background
-          </div>
-          <InlineInfoCompound
-            type="warning"
-            background={background}
-            icon={AlertTriangle}
-            title="Warning"
-            description="Please review your settings before proceeding."
-            button={
-              <Button size="sm" variant="outline">
-                Review
-              </Button>
-            }
-          />
-        </div>
-      ))}
-    </div>
-  </div>
-);
-
-export const DangerVariants = () => (
-  <div className="tw-space-y-4">
-    <h3 className="tw-text-lg tw-font-semibold">Danger Type Variants</h3>
-    <div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4">
-      {['none', 'grey', 'white', 'state-specific'].map((background) => (
-        <div key={background} className="tw-space-y-2">
-          <div className="tw-text-sm tw-font-medium tw-text-gray-600 tw-capitalize">
-            {background.replace('-', ' ')} Background
-          </div>
-          <InlineInfoCompound
-            type="danger"
-            background={background}
-            icon={AlertCircle}
-            title="Error"
-            description="Something went wrong. Please try again."
-            button={
-              <Button size="sm" variant="destructive">
-                Retry
-              </Button>
-            }
-          />
-        </div>
-      ))}
-    </div>
-  </div>
-);
-
-// Interactive Playground
-export const Playground = Template.bind({});
-Playground.args = {
-  type: 'info',
-  background: 'none',
-  title: 'Custom Title',
-  description: 'Custom description text goes here.',
-  icon: Info,
-  button: (
-    <Button size="sm" variant="outline">
-      Custom Button
-    </Button>
-  ),
-};
diff --git a/frontend/src/components/ui/alert.jsx b/frontend/src/components/ui/alert.jsx
deleted file mode 100644
index 14e6248437..0000000000
--- a/frontend/src/components/ui/alert.jsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Button, buttonVariants } from './InlineInfo/InlineInfo';
-
-export { Button, buttonVariants };
diff --git a/frontend/src/components/ui/button.jsx b/frontend/src/components/ui/button.jsx
deleted file mode 100644
index a6fffcd550..0000000000
--- a/frontend/src/components/ui/button.jsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Button, buttonVariants } from './Button/Button';
-
-export { Button, buttonVariants };
diff --git a/frontend/src/components/ui/card.jsx b/frontend/src/components/ui/card.jsx
deleted file mode 100644
index 40c320166b..0000000000
--- a/frontend/src/components/ui/card.jsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './Card/Index';
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
diff --git a/frontend/src/components/ui/input.jsx b/frontend/src/components/ui/input.jsx
deleted file mode 100644
index 8282d6f277..0000000000
--- a/frontend/src/components/ui/input.jsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import InputComponent from './Input/Index';
-import EditableTitleInput from './Input/EditableTitleInput/Index';
-
-export { InputComponent as Input, EditableTitleInput };
diff --git a/frontend/src/components/ui/label.jsx b/frontend/src/components/ui/label.jsx
deleted file mode 100644
index 25def6d8a2..0000000000
--- a/frontend/src/components/ui/label.jsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Label } from './Label/Label';
-
-export { Label };
diff --git a/frontend/src/hooks/usePasswordInput.js b/frontend/src/hooks/usePasswordInput.js
deleted file mode 100644
index ede924ff1d..0000000000
--- a/frontend/src/hooks/usePasswordInput.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import { useState, useEffect } from 'react';
-
-/**
- * Custom hook for password input functionality
- * @param {Object} options - Configuration options
- * @param {Function} options.onChange - Change handler function
- * @param {Function} options.validation - Validation function
- * @param {Object} options.isValidatedMessages - External validation messages
- * @param {boolean} options.disabled - Whether input is disabled
- * @returns {Object} Password input state and handlers
- */
-export const usePasswordInput = ({ onChange, validation, isValidatedMessages }) => {
-  const [isValid, setIsValid] = useState(null);
-  const [message, setMessage] = useState('');
-
-  /**
-   * Handle input change with validation
-   * @param {Event} e - Input change event
-   */
-  const handleChange = (e) => {
-    if (validation) {
-      const validateObj = validation(e);
-      setIsValid(validateObj.valid);
-      setMessage(validateObj.message);
-      onChange(e, validateObj);
-    } else {
-      onChange(e);
-    }
-  };
-
-  // Update validation state when external validation messages change
-  useEffect(() => {
-    if (isValidatedMessages) {
-      setIsValid(isValidatedMessages.valid);
-      setMessage(isValidatedMessages.message);
-    }
-  }, [isValidatedMessages]);
-
-  return {
-    // State
-    isValid,
-    message,
-
-    // Handlers
-    handleChange,
-  };
-};

From 1b2a4be10bba143bceb7b283ff6ce686ff58bdf2 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Thu, 16 Oct 2025 21:24:55 +0530
Subject: [PATCH 071/157] Reverts changes to Input

---
 .../components/ui/Input/CommonInput/Index.jsx |  59 +-
 .../ui/Input/CommonInput/NumberInput.jsx      |  46 +-
 .../ui/Input/CommonInput/PasswordInput.jsx    |  53 --
 .../ui/Input/CommonInput/TextInput.jsx        |  33 +-
 frontend/src/components/ui/Input/Index.jsx    |  26 +-
 frontend/src/components/ui/Input/Input.jsx    |  97 ++-
 .../src/components/ui/Input/Input.stories.jsx | 723 ++----------------
 .../ui/Input/InputUtils/InputUtils.jsx        |  18 +-
 .../ui/Input/InputUtils/TrailingBtn.jsx       |  23 +-
 .../ui/Input/InputUtils/Variants.jsx          | 100 +--
 10 files changed, 217 insertions(+), 961 deletions(-)
 delete mode 100644 frontend/src/components/ui/Input/CommonInput/PasswordInput.jsx

diff --git a/frontend/src/components/ui/Input/CommonInput/Index.jsx b/frontend/src/components/ui/Input/CommonInput/Index.jsx
index 6efbae711b..c992db5aaa 100644
--- a/frontend/src/components/ui/Input/CommonInput/Index.jsx
+++ b/frontend/src/components/ui/Input/CommonInput/Index.jsx
@@ -1,22 +1,28 @@
 import React, { useEffect, useState } from 'react';
 import NumberInput from './NumberInput';
 import TextInput from './TextInput';
-import PasswordInput from './PasswordInput';
 import { HelperMessage, InputLabel, ValidationMessage } from '../InputUtils/InputUtils';
+import { ButtonSolid } from '../../../../_components/AppButton';
+import { generateCypressDataCy } from '../../../../modules/common/helpers/cypressHelpers.js';
 
 const CommonInput = ({ label, helperText, disabled, required, onChange: change, ...restProps }) => {
-  const { type, validation, isValidatedMessages, labelDisabled } = restProps;
+  const {
+    propertyKey,
+    type,
+    encrypted,
+    validation,
+    isValidatedMessages,
+    isDisabled,
+    isEditing,
+    handleEncryptedFieldsToggle,
+    labelDisabled,
+  } = restProps;
 
-  const getInputComponent = () => {
-    if (type === 'password') return PasswordInput;
-    if (type === 'number') return NumberInput;
-    return TextInput;
-  };
-
-  const InputComponentType = getInputComponent();
+  const InputComponentType = type === 'number' ? NumberInput : TextInput;
   const [isValid, setIsValid] = useState(null);
   const [message, setMessage] = useState('');
 
+  const isEncrypted = type === 'password' || encrypted;
   const isWorkspaceConstant =
     restProps.placeholder &&
     (restProps.placeholder.includes('{{constants') || restProps.placeholder.includes('{{secrets'));
@@ -47,15 +53,40 @@ const CommonInput = ({ label, helperText, disabled, required, onChange: change,
 
   return (
     <div>
-      {label && (
-        <div className="d-flex">
+      <div className="d-flex">
+        {label && (
           <div className="tw-flex-shrink-0">
             <InputLabel disabled={labelDisabled ?? disabled} label={label} required={required} />
           </div>
-        </div>
-      )}
+        )}
+        {type === 'password' && (
+          <div className="d-flex justify-content-between w-100">
+            <div className="mx-1 col">
+              <ButtonSolid
+                className="datasource-edit-btn mb-2"
+                type="a"
+                variant="tertiary"
+                target="_blank"
+                rel="noreferrer"
+                disabled={isDisabled}
+                onClick={(e) => handleEncryptedFieldsToggle(e, propertyKey)}
+                data-cy={`button-${generateCypressDataCy(isEditing ? 'Cancel' : 'Edit')}`}
+              >
+                {isEditing ? 'Cancel' : 'Edit'}
+              </ButtonSolid>
+            </div>
+
+            <div className="col-auto mb-2">
+              <small className="text-green" data-cy="encrypted-text">
+                <img className="mx-2 encrypted-icon" src="assets/images/icons/padlock.svg" width="12" height="12" />
+                Encrypted
+              </small>
+            </div>
+          </div>
+        )}
+      </div>
       <InputComponentType
-        disabled={disabled}
+        disabled={disabled || (isEncrypted && !isEditing)}
         required={required}
         response={isValid}
         onChange={handleChange}
diff --git a/frontend/src/components/ui/Input/CommonInput/NumberInput.jsx b/frontend/src/components/ui/Input/CommonInput/NumberInput.jsx
index 4aa837299c..b7242e0bb5 100644
--- a/frontend/src/components/ui/Input/CommonInput/NumberInput.jsx
+++ b/frontend/src/components/ui/Input/CommonInput/NumberInput.jsx
@@ -3,7 +3,7 @@ import React, { useRef } from 'react';
 import { Input } from '../Input';
 import { Button } from '../../Button/Button';
 import { cn } from '@/lib/utils';
-import { inputPaddingVariants, inputPositionVariants, inputIconSizeVariants } from '../InputUtils/Variants';
+import { inputVariants } from '../InputUtils/Variants';
 
 const Btn = ({ onClick, icon, disabled, className }) => (
   <Button
@@ -12,33 +12,35 @@ const Btn = ({ onClick, icon, disabled, className }) => (
     onClick={onClick}
     size="small"
     variant="ghost"
-    className={`!tw-h-[50%] tw-rounded-none ${className}`}
+    className={`tw-h-[50%] tw-rounded-none ${className}`}
     fill={disabled ? 'var(--icon-weak)' : 'var(--icon-default)'}
     disabled={disabled}
   />
 );
 
-const NumberInput = ({ size, leadingIcon, disabled, ...restProps }) => {
+const NumberInput = ({ size, leadingIcon, response, disabled, ...restProps }) => {
   const inputRef = useRef(null);
 
-  // Build className using variants for positioning only (size and validationState are handled in Input.jsx)
-  const leadingIconPaddingResult = leadingIcon ? inputPaddingVariants({ leadingIconPadding: size }) : 'tw-pl-[12px]';
-
-  const inputClassName = cn(
-    // Leading icon padding
-    leadingIconPaddingResult
-  );
+  const inputStyle = `tw-border-border-default placeholder:tw-text-text-placeholder tw-font-normal disabled:tw-bg-[#CCD1D5]/30 tw-pr-[12px] ${
+    leadingIcon ? (size === 'small' ? 'tw-pl-[32px]' : 'tw-pl-[34px]') : 'tw-pl-[12px]'
+  } ${
+    response === true
+      ? 'tw-border-border-success-strong focus-visible:!tw-ring-0 focus-visible:!tw-ring-offset-0 focus-visible:!tw-border-border-success-strong'
+      : response === false
+      ? 'tw-border-border-danger-strong focus-visible:!tw-ring-0 focus-visible:!tw-ring-offset-0 focus-visible:!tw-border-border-success-strong'
+      : ''
+  }`;
 
   const handleIncrement = () => {
     if (inputRef.current) {
-      const newValue = Number.parseFloat(inputRef.current.value) + 1;
+      let newValue = parseFloat(inputRef.current.value) + 1;
       inputRef.current.value = newValue;
     }
   };
 
   const handleDecrement = () => {
     if (inputRef.current) {
-      const newValue = Number.parseFloat(inputRef.current.value) - 1;
+      let newValue = parseFloat(inputRef.current.value) - 1;
       inputRef.current.value = newValue;
     }
   };
@@ -48,18 +50,24 @@ const NumberInput = ({ size, leadingIcon, disabled, ...restProps }) => {
       {leadingIcon && (
         <SolidIcon
           name={leadingIcon}
-          className={cn(
-            'tw-absolute',
-            inputPositionVariants({ leadingIconPosition: size }),
-            inputIconSizeVariants({ iconSize: size })
-          )}
+          width="16px"
+          height="16px"
+          className={`tw-absolute ${size === 'small' ? 'tw-top-[6px] tw-left-[10px]' : 'tw-top-[7px] tw-left-[12px]'}`}
           fill="var(--icon-default)"
         />
       )}
-      <Input size={size} disabled={disabled} className={inputClassName} ref={inputRef} {...restProps} />
+      <Input
+        size={size}
+        placeholder={'00.00'}
+        disabled={disabled}
+        className={inputStyle}
+        ref={inputRef}
+        {...restProps}
+      />
       <div
         className={cn(
-          'tw-absolute tw-h-full tw-top-0 tw-right-0 tw-flex tw-flex-col tw-border-l-[1px] tw-border-y-0 tw-border-r-0 tw-border-solid tw-border-l-border-weak'
+          inputVariants({ size }),
+          'tw-absolute tw-top-0 tw-right-0 tw-flex tw-flex-col tw-border-l-[1px] tw-border-y-0 tw-border-r-0 tw-border-solid tw-border-l-border-weak'
         )}
       >
         <Btn icon="uparrow" onClick={handleIncrement} disabled={disabled} className="tw-rounded-tr-[8px]" />
diff --git a/frontend/src/components/ui/Input/CommonInput/PasswordInput.jsx b/frontend/src/components/ui/Input/CommonInput/PasswordInput.jsx
deleted file mode 100644
index 042ff9302a..0000000000
--- a/frontend/src/components/ui/Input/CommonInput/PasswordInput.jsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Input } from '../Input';
-import { Eye, EyeOff } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
-import { inputPositionVariants, inputIconSizeVariants } from '../InputUtils/Variants';
-import { getButtonSizeForInput } from '../InputUtils/InputUtils';
-
-const PasswordInput = ({ size, disabled, response, isWorkspaceConstant, ...restProps }) => {
-  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-
-  useEffect(() => {
-    if (isWorkspaceConstant) {
-      setIsPasswordVisible(true);
-    }
-  }, [isWorkspaceConstant]);
-
-  const togglePasswordVisibility = () => {
-    if (!disabled) {
-      setIsPasswordVisible((prev) => !prev);
-    }
-  };
-
-  return (
-    <div className="tw-relative">
-      <Input
-        type={isPasswordVisible ? 'text' : 'password'}
-        size={size}
-        disabled={disabled}
-        response={response}
-        {...restProps}
-      />
-      <Button
-        type="button"
-        variant="ghost"
-        size={getButtonSizeForInput(size)}
-        iconOnly
-        className={cn('tw-absolute tw-scale-[.85]', inputPositionVariants({ trailingIconPosition: size }))}
-        onClick={togglePasswordVisibility}
-        disabled={disabled}
-        aria-label={isPasswordVisible ? 'Hide password' : 'Show password'}
-      >
-        {isPasswordVisible ? (
-          <EyeOff className={inputIconSizeVariants({ iconSize: size })} />
-        ) : (
-          <Eye className={inputIconSizeVariants({ iconSize: size })} />
-        )}
-      </Button>
-    </div>
-  );
-};
-
-export default PasswordInput;
diff --git a/frontend/src/components/ui/Input/CommonInput/TextInput.jsx b/frontend/src/components/ui/Input/CommonInput/TextInput.jsx
index dd17e1d60d..27903c783f 100644
--- a/frontend/src/components/ui/Input/CommonInput/TextInput.jsx
+++ b/frontend/src/components/ui/Input/CommonInput/TextInput.jsx
@@ -1,9 +1,7 @@
-import { cn } from '@/lib/utils';
 import SolidIcon from '@/_ui/Icon/SolidIcons';
 import React from 'react';
 import TrailingBtn from '../InputUtils/TrailingBtn';
 import { Input } from '../Input';
-import { inputPositionVariants, inputPaddingVariants, inputIconSizeVariants } from '../InputUtils/Variants';
 
 const TextInput = ({
   size,
@@ -16,27 +14,24 @@ const TextInput = ({
   readOnly,
   ...restProps
 }) => {
-  // Build className using variants for positioning only (size and validationState are handled in Input.jsx)
-  const leadingIconPaddingResult = leadingIcon ? inputPaddingVariants({ leadingIconPadding: size }) : 'tw-pl-3';
-  const trailingIconPaddingResult = trailingAction ? inputPaddingVariants({ trailingIconPadding: size }) : 'tw-pr-3';
-
-  const inputClassName = cn(
-    // Leading icon padding
-    leadingIconPaddingResult,
-    // Trailing action padding
-    trailingIconPaddingResult
-  );
+  const inputStyle = `placeholder:tw-text-text-placeholder tw-font-normal disabled:tw-bg-[#CCD1D5]/30 ${
+    leadingIcon ? (size === 'small' ? 'tw-pl-[32px]' : 'tw-pl-[34px]') : 'tw-pl-[12px]'
+  } ${trailingAction ? (size === 'small' ? 'tw-pr-[40px]' : 'tw-pr-[44px]') : 'tw-pr-[12px]'} ${
+    response === true
+      ? '!tw-border-border-success-strong focus-visible:!tw-ring-0 focus-visible:!tw-ring-offset-0 focus-visible:!tw-border-border-success-strong'
+      : response === false
+      ? '!tw-border-border-danger-strong focus-visible:!tw-ring-0 focus-visible:!tw-ring-offset-0 focus-visible:!tw-border-border-danger-strong'
+      : 'tw-border-border-default'
+  }`;
 
   return (
     <div className="tw-relative">
       {leadingIcon && (
         <SolidIcon
           name={leadingIcon}
-          className={cn(
-            'tw-absolute',
-            inputPositionVariants({ leadingIconPosition: size }),
-            inputIconSizeVariants({ iconSize: size })
-          )}
+          width="16px"
+          height="16px"
+          className={`tw-absolute ${size === 'small' ? 'tw-top-[6px] tw-left-[10px]' : 'tw-top-[7px] tw-left-[12px]'}`}
           fill="var(--icon-default)"
         />
       )}
@@ -46,7 +41,7 @@ const TextInput = ({
         disabled={disabled}
         response={response}
         {...restProps}
-        className={inputClassName}
+        className={inputStyle}
       />
       {trailingAction && (
         <TrailingBtn
@@ -54,7 +49,7 @@ const TextInput = ({
           type={trailingAction}
           {...(trailingAction === 'clear' && { onClick: restProps.onClear })}
           disabled={trailingActionDisabled || disabled}
-          className={cn('tw-absolute', inputPositionVariants({ trailingIconPosition: size }))}
+          className={`tw-absolute tw-right-[5px] ${size === 'small' ? 'tw-top-[5px]' : 'tw-top-[4px]'}`}
         />
       )}
     </div>
diff --git a/frontend/src/components/ui/Input/Index.jsx b/frontend/src/components/ui/Input/Index.jsx
index 92a0ced490..dbb6806d6b 100644
--- a/frontend/src/components/ui/Input/Index.jsx
+++ b/frontend/src/components/ui/Input/Index.jsx
@@ -1,34 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import CommonInput from './CommonInput/Index';
-import EncryptedField from '../EncryptedField/Index';
+import EditableTitleInput from './EditableTitleInput/Index';
 
 const InputComponent = (props) => {
-  const { encrypted, showEncryption, type, isEditing, propertyKey, handleEncryptedFieldsToggle, isDisabled } = props;
-
-  // Check if we need encryption wrapper
-  const shouldWrapWithEncryption = showEncryption && encrypted && type === 'password';
-
-  if (shouldWrapWithEncryption) {
-    return (
-      <EncryptedField
-        propertyKey={propertyKey}
-        isEditing={isEditing}
-        handleEncryptedFieldsToggle={handleEncryptedFieldsToggle}
-        isDisabled={isDisabled}
-      >
-        <CommonInput {...props} />
-      </EncryptedField>
-    );
-  }
-
-  return <CommonInput {...props} />;
+  return props.type === 'editable title' ? <EditableTitleInput {...props} /> : <CommonInput {...props} />;
 };
 
 export default InputComponent;
 
 InputComponent.propTypes = {
-  type: PropTypes.oneOf(['text', 'number', 'password', 'email']),
+  type: PropTypes.oneOf(['text', 'number', 'editable title', 'password', 'email']),
   value: PropTypes.string,
   onChange: PropTypes.func,
   onClear: PropTypes.func,
@@ -50,7 +32,7 @@ InputComponent.propTypes = {
 
 InputComponent.defaultProps = {
   type: 'text',
-  onChange: (_e, _validateObj) => {},
+  onChange: (e, validateObj) => {},
   onClear: () => {},
   placeholder: '',
   name: '',
diff --git a/frontend/src/components/ui/Input/Input.jsx b/frontend/src/components/ui/Input/Input.jsx
index 9863a81602..7e0eda7465 100644
--- a/frontend/src/components/ui/Input/Input.jsx
+++ b/frontend/src/components/ui/Input/Input.jsx
@@ -1,43 +1,66 @@
 import * as React from 'react';
 import { cn } from '@/lib/utils';
-import { inputBaseVariants } from './InputUtils/Variants';
+import { inputVariants } from './InputUtils/Variants';
+import SolidIcon from '../../../_ui/Icon/SolidIcons';
+import { useEffect } from 'react';
 
-export const Input = React.forwardRef(({ className, size, type, multiline, response, rows = 3, ...props }, ref) => {
-  const validationClass = response === true ? 'valid-textarea' : response === false ? 'invalid-textarea' : '';
+const Input = React.forwardRef(
+  ({ className, size, type, multiline, response, isWorkspaceConstant, rows = 3, ...props }, ref) => {
+    const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);
+    const isPasswordField = type === 'password';
 
-  // Apply both size and validationState variants in Input.jsx
-  const baseVariants = inputBaseVariants({
-    size,
-    validationState: response === true ? 'success' : response === false ? 'error' : 'default',
-  });
+    const togglePasswordVisibility = () => {
+      if (!props.disabled) {
+        setIsPasswordVisible((prev) => !prev);
+      }
+    };
 
-  return (
-    <div className="design-component-inputs">
-      {multiline ? (
-        <textarea
-          className={cn(
-            baseVariants,
-            `tw-relative tw-peer tw-flex placeholder:tw-text-text-placeholder tw-font-normal disabled:tw-bg-interactive-default tw-w-full tw-border-[1px] tw-border-solid tw-bg-background-surface-layer-01 tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${props.styles}`,
-            className,
-            validationClass
-          )}
-          rows={rows}
-          ref={ref}
-          {...props}
-        />
-      ) : (
-        <input
-          type={type}
-          className={cn(
-            baseVariants,
-            `tw-peer tw-flex placeholder:tw-text-text-placeholder tw-font-normal disabled:tw-bg-interactive-default tw-w-full tw-border tw-border-solid tw-bg-background-surface-layer-01 tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${props.styles}`,
-            className
-          )}
-          ref={ref}
-          {...props}
-        />
-      )}
-    </div>
-  );
-});
+    useEffect(() => {
+      if (isWorkspaceConstant) {
+        setIsPasswordVisible(true);
+      }
+    }, [isWorkspaceConstant]);
+
+    const validationClass = response === true ? 'valid-textarea' : response === false ? 'invalid-textarea' : '';
+
+    return (
+      <div className="design-component-inputs">
+        {multiline ? (
+          <textarea
+            className={cn(
+              `tw-relative tw-peer tw-flex tw-text-[12px]/[18px] tw-w-full tw-rounded-[8px] tw-border-[1px] tw-border-solid tw-bg-background-surface-layer-01 tw-py-[7px] tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${props.styles}`,
+              className,
+              validationClass
+            )}
+            rows={rows}
+            ref={ref}
+            {...props}
+          />
+        ) : (
+          <input
+            type={isPasswordField && isPasswordVisible ? 'text' : type}
+            className={cn(
+              inputVariants({ size }),
+              `tw-peer tw-flex tw-text-[12px]/[18px] tw-w-full tw-rounded-[8px] tw-border-[1px] tw-border-solid tw-bg-background-surface-layer-01 tw-py-[7px] tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${props.styles}`,
+              className
+            )}
+            ref={ref}
+            {...props}
+          />
+        )}
+        {isPasswordField && !multiline && (
+          <div onClick={togglePasswordVisibility}>
+            {isPasswordVisible ? (
+              <SolidIcon className="eye-icon" name="eye" />
+            ) : (
+              <SolidIcon className="eye-icon" name="eyedisable" />
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
 Input.displayName = 'Input';
+
+export { Input };
diff --git a/frontend/src/components/ui/Input/Input.stories.jsx b/frontend/src/components/ui/Input/Input.stories.jsx
index 258621f12d..5670693a17 100644
--- a/frontend/src/components/ui/Input/Input.stories.jsx
+++ b/frontend/src/components/ui/Input/Input.stories.jsx
@@ -1,8 +1,6 @@
 // eslint-disable-next-line no-unused-vars
 import * as React from 'react';
 import InputComponent from './Index';
-import EditableTitleInput from './EditableTitleInput/Index';
-import { ValidationMessage } from './InputUtils/InputUtils';
 
 // Storybook configuration
 export default {
@@ -14,7 +12,7 @@ export default {
   },
   argTypes: {
     type: {
-      options: ['text', 'number', 'password', 'email'],
+      options: ['text', 'number', 'editable title', 'password', 'email'],
       control: {
         type: 'select',
       },
@@ -78,683 +76,48 @@ export default {
 
 const Template = (args) => <InputComponent {...args} />;
 
-// Size Variants
-export const SizeVariants = () => (
-  <div className="tw-space-y-4">
-    <div>
-      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Small (28px height, 12px/18px text)</h3>
-      <InputComponent size="small" placeholder="Small input" label="Small Input" />
-    </div>
-    <div>
-      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Medium (32px height, 12px/18px text)</h3>
-      <InputComponent size="medium" placeholder="Medium input" label="Medium Input" />
-    </div>
-    <div>
-      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Large (40px height, 14px/20px text)</h3>
-      <InputComponent size="large" placeholder="Large input" label="Large Input" />
-    </div>
-  </div>
-);
-
-// Input Types
-export const InputTypes = () => (
-  <div className="tw-space-y-4">
-    <div>
-      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Text Input</h3>
-      <InputComponent type="text" placeholder="Enter text" label="Text Input" />
-    </div>
-    <div>
-      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Number Input</h3>
-      <InputComponent type="number" placeholder="00.00" label="Number Input" />
-    </div>
-    <div>
-      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Password Input</h3>
-      <InputComponent type="password" placeholder="Enter password" label="Password Input" />
-    </div>
-    <div>
-      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Email Input</h3>
-      <InputComponent type="email" placeholder="Enter email" label="Email Input" />
-    </div>
-    <div>
-      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Editable Title</h3>
-      <EditableTitleInput placeholder="Editable title" label="Editable Title" />
-    </div>
-  </div>
-);
-
-// States
-export const InputStates = () => (
-  <div className="tw-space-y-4">
-    <div>
-      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Default</h3>
-      <InputComponent placeholder="Default state" label="Default Input" />
-    </div>
-    <div>
-      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Disabled</h3>
-      <InputComponent placeholder="Disabled state" label="Disabled Input" disabled />
-    </div>
-    <div>
-      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Required</h3>
-      <InputComponent placeholder="Required field" label="Required Input" required />
-    </div>
-    <div>
-      <h3 className="tw-text-sm tw-font-medium tw-mb-2">With Helper Text</h3>
-      <InputComponent placeholder="With helper text" label="Input with Helper" helperText="This is helper text" />
-    </div>
-  </div>
-);
-
-// Validation States
-export const ValidationStates = () => (
-  <div className="tw-space-y-4">
-    <div>
-      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Default (No Validation)</h3>
-      <InputComponent placeholder="Default state" label="Default Input" response={null} />
-    </div>
-    <div>
-      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Success State</h3>
-      <InputComponent placeholder="Valid input" label="Success Input" response={true} helperText="Input is valid" />
-    </div>
-    <div>
-      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Error State</h3>
-      <InputComponent
-        placeholder="Invalid input"
-        label="Error Input"
-        response={false}
-        helperText="Input has an error"
-      />
-    </div>
-    <div>
-      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Success with Icon</h3>
-      <InputComponent
-        placeholder="Valid email"
-        label="Email Input"
-        leadingIcon="mail"
-        response={true}
-        helperText="Email format is correct"
-      />
-    </div>
-    <div>
-      <h3 className="tw-text-sm tw-font-medium tw-mb-2">Error with Icon</h3>
-      <InputComponent
-        placeholder="Invalid email"
-        label="Email Input"
-        leadingIcon="mail"
-        response={false}
-        helperText="Please enter a valid email"
-      />
-    </div>
-  </div>
-);
-
-// Validation States - All Sizes
-export const ValidationStatesSizes = () => (
-  <div className="tw-space-y-6">
-    <div>
-      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Small Size Validation States</h3>
-      <div className="tw-space-y-3">
-        <InputComponent size="small" placeholder="Default" label="Default" response={null} />
-        <InputComponent size="small" placeholder="Success" label="Success" response={true} helperText="Valid input" />
-        <InputComponent size="small" placeholder="Error" label="Error" response={false} helperText="Invalid input" />
-      </div>
-    </div>
-
-    <div>
-      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Medium Size Validation States</h3>
-      <div className="tw-space-y-3">
-        <InputComponent size="medium" placeholder="Default" label="Default" response={null} />
-        <InputComponent size="medium" placeholder="Success" label="Success" response={true} helperText="Valid input" />
-        <InputComponent size="medium" placeholder="Error" label="Error" response={false} helperText="Invalid input" />
-      </div>
-    </div>
-
-    <div>
-      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Large Size Validation States</h3>
-      <div className="tw-space-y-3">
-        <InputComponent size="large" placeholder="Default" label="Default" response={null} />
-        <InputComponent size="large" placeholder="Success" label="Success" response={true} helperText="Valid input" />
-        <InputComponent size="large" placeholder="Error" label="Error" response={false} helperText="Invalid input" />
-      </div>
-    </div>
-  </div>
-);
-
-// Validation States - All Input Types
-export const ValidationStatesTypes = () => (
-  <div className="tw-space-y-6">
-    <div>
-      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Text Input Validation</h3>
-      <div className="tw-space-y-3">
-        <InputComponent type="text" placeholder="Default" label="Text Input" response={null} />
-        <InputComponent
-          type="text"
-          placeholder="Valid text"
-          label="Text Input"
-          response={true}
-          helperText="Text is valid"
-        />
-        <InputComponent
-          type="text"
-          placeholder="Invalid text"
-          label="Text Input"
-          response={false}
-          helperText="Text is invalid"
-        />
-      </div>
-    </div>
-
-    <div>
-      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Number Input Validation</h3>
-      <div className="tw-space-y-3">
-        <InputComponent type="number" placeholder="00.00" label="Number Input" response={null} />
-        <InputComponent
-          type="number"
-          placeholder="00.00"
-          label="Number Input"
-          response={true}
-          helperText="Valid number"
-        />
-        <InputComponent
-          type="number"
-          placeholder="00.00"
-          label="Number Input"
-          response={false}
-          helperText="Invalid number"
-        />
-      </div>
-    </div>
-
-    <div>
-      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Password Input Validation</h3>
-      <div className="tw-space-y-3">
-        <InputComponent type="password" placeholder="Enter password" label="Password" response={null} />
-        <InputComponent
-          type="password"
-          placeholder="Enter password"
-          label="Password"
-          response={true}
-          helperText="Strong password"
-        />
-        <InputComponent
-          type="password"
-          placeholder="Enter password"
-          label="Password"
-          response={false}
-          helperText="Password too weak"
-        />
-      </div>
-    </div>
-
-    <div>
-      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Email Input Validation</h3>
-      <div className="tw-space-y-3">
-        <InputComponent type="email" placeholder="Enter email" label="Email" response={null} />
-        <InputComponent
-          type="email"
-          placeholder="user@example.com"
-          label="Email"
-          response={true}
-          helperText="Valid email format"
-        />
-        <InputComponent
-          type="email"
-          placeholder="invalid-email"
-          label="Email"
-          response={false}
-          helperText="Invalid email format"
-        />
-      </div>
-    </div>
-  </div>
-);
-
-// Validation with ValidationMessage Component
-export const WithValidationMessages = () => (
-  <div className="tw-space-y-6">
-    <div>
-      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Success Validation Messages</h3>
-      <div className="tw-space-y-4">
-        <div>
-          <InputComponent type="text" size="small" placeholder="Enter username" label="Username" response={true} />
-          <ValidationMessage response={true} validationMessage="Username is available" />
-        </div>
-        <div>
-          <InputComponent type="email" size="medium" placeholder="Enter email" label="Email Address" response={true} />
-          <ValidationMessage response={true} validationMessage="Email format is correct" />
-        </div>
-        <div>
-          <InputComponent type="password" size="large" placeholder="Enter password" label="Password" response={true} />
-          <ValidationMessage response={true} validationMessage="Strong password with special characters" />
-        </div>
-      </div>
-    </div>
-
-    <div>
-      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Error Validation Messages</h3>
-      <div className="tw-space-y-4">
-        <div>
-          <InputComponent type="text" size="small" placeholder="Enter username" label="Username" response={false} />
-          <ValidationMessage response={false} validationMessage="Username already exists" />
-        </div>
-        <div>
-          <InputComponent type="email" size="medium" placeholder="Enter email" label="Email Address" response={false} />
-          <ValidationMessage response={false} validationMessage="Please enter a valid email address" />
-        </div>
-        <div>
-          <InputComponent type="password" size="large" placeholder="Enter password" label="Password" response={false} />
-          <ValidationMessage response={false} validationMessage="Password must be at least 8 characters" />
-        </div>
-      </div>
-    </div>
-  </div>
-);
-
-// Validation Messages - Complex Examples
-export const ValidationMessagesComplex = () => (
-  <div className="tw-space-y-6">
-    <div>
-      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Form Validation Example</h3>
-      <div className="tw-space-y-4 tw-max-w-md">
-        <div>
-          <InputComponent type="text" placeholder="John Doe" label="Full Name" response={true} />
-          <ValidationMessage response={true} validationMessage="Name looks good" />
-        </div>
-        <div>
-          <InputComponent
-            type="email"
-            placeholder="john.doe@example.com"
-            label="Email Address"
-            leadingIcon="mail"
-            response={true}
-          />
-          <ValidationMessage response={true} validationMessage="Valid email format" />
-        </div>
-        <div>
-          <InputComponent type="number" placeholder="30" label="Age" response={false} />
-          <ValidationMessage response={false} validationMessage="Age must be between 18 and 65" />
-        </div>
-        <div>
-          <InputComponent type="password" placeholder="Enter password" label="Password" response={false} />
-          <ValidationMessage
-            response={false}
-            validationMessage="Password must contain uppercase, lowercase, number and special character"
-          />
-        </div>
-      </div>
-    </div>
-
-    <div>
-      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Real-time Validation Example</h3>
-      <div className="tw-space-y-4 tw-max-w-md">
-        <div>
-          <InputComponent
-            type="text"
-            placeholder="myusername"
-            label="Username"
-            leadingIcon="user"
-            trailingAction="clear"
-            response={true}
-          />
-          <ValidationMessage response={true} validationMessage="Username is available and meets requirements" />
-        </div>
-        <div>
-          <InputComponent
-            type="text"
-            placeholder="abc"
-            label="Username"
-            leadingIcon="user"
-            trailingAction="clear"
-            response={false}
-          />
-          <ValidationMessage response={false} validationMessage="Username must be at least 5 characters long" />
-        </div>
-      </div>
-    </div>
-
-    <div>
-      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Multiple Validation States</h3>
-      <div className="tw-space-y-4 tw-max-w-md">
-        <div>
-          <InputComponent type="number" size="small" placeholder="100.00" label="Amount (USD)" response={true} />
-          <ValidationMessage response={true} validationMessage="Amount within valid range" />
-        </div>
-        <div>
-          <InputComponent type="number" size="small" placeholder="10000.00" label="Amount (USD)" response={false} />
-          <ValidationMessage response={false} validationMessage="Amount exceeds maximum limit of $5,000" />
-        </div>
-        <div>
-          <InputComponent
-            type="text"
-            size="medium"
-            placeholder="https://example.com"
-            label="Website URL"
-            leadingIcon="link"
-            response={true}
-          />
-          <ValidationMessage response={true} validationMessage="Valid URL format" />
-        </div>
-        <div>
-          <InputComponent
-            type="text"
-            size="medium"
-            placeholder="not-a-url"
-            label="Website URL"
-            leadingIcon="link"
-            response={false}
-          />
-          <ValidationMessage
-            response={false}
-            validationMessage="Please enter a valid URL (e.g., https://example.com)"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-);
-
-// With Icons and Actions
-export const WithIconsAndActions = () => (
-  <div className="tw-space-y-4">
-    <div>
-      <h3 className="tw-text-sm tw-font-medium tw-mb-2">With Leading Icon</h3>
-      <InputComponent placeholder="Search..." label="Search Input" leadingIcon="search" />
-    </div>
-    <div>
-      <h3 className="tw-text-sm tw-font-medium tw-mb-2">With Clear Action</h3>
-      <InputComponent placeholder="Clearable input" label="Clearable Input" trailingAction="clear" />
-    </div>
-    <div>
-      <h3 className="tw-text-sm tw-font-medium tw-mb-2">With Loading Action</h3>
-      <InputComponent placeholder="Loading input" label="Loading Input" trailingAction="loading" />
-    </div>
-    <div>
-      <h3 className="tw-text-sm tw-font-medium tw-mb-2">With Both Icons</h3>
-      <InputComponent
-        placeholder="Search and clear"
-        label="Full Featured Input"
-        leadingIcon="search"
-        trailingAction="clear"
-      />
-    </div>
-  </div>
-);
-
-// Size Combinations
-export const SizeCombinations = () => (
-  <div className="tw-space-y-6">
-    <div>
-      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Small Size Combinations</h3>
-      <div className="tw-space-y-3">
-        <InputComponent size="small" placeholder="Small text input" label="Small Text" />
-        <InputComponent size="small" type="number" placeholder="00.00" label="Small Number" />
-        <InputComponent size="small" type="password" placeholder="Small password" label="Small Password" />
-        <InputComponent size="small" leadingIcon="search" placeholder="Small with icon" label="Small with Icon" />
-        <InputComponent size="small" trailingAction="clear" placeholder="Small clearable" label="Small Clearable" />
-      </div>
-    </div>
-
-    <div>
-      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Medium Size Combinations</h3>
-      <div className="tw-space-y-3">
-        <InputComponent size="medium" placeholder="Medium text input" label="Medium Text" />
-        <InputComponent size="medium" type="number" placeholder="00.00" label="Medium Number" />
-        <InputComponent size="medium" type="password" placeholder="Medium password" label="Medium Password" />
-        <InputComponent size="medium" leadingIcon="search" placeholder="Medium with icon" label="Medium with Icon" />
-        <InputComponent size="medium" trailingAction="clear" placeholder="Medium clearable" label="Medium Clearable" />
-      </div>
-    </div>
-
-    <div>
-      <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Large Size Combinations (14px/20px text)</h3>
-      <div className="tw-space-y-3">
-        <InputComponent size="large" placeholder="Large text input" label="Large Text" />
-        <InputComponent size="large" type="number" placeholder="00.00" label="Large Number" />
-        <InputComponent size="large" type="password" placeholder="Large password" label="Large Password" />
-        <InputComponent size="large" leadingIcon="search" placeholder="Large with icon" label="Large with Icon" />
-        <InputComponent size="large" trailingAction="clear" placeholder="Large clearable" label="Large Clearable" />
-        <EditableTitleInput size="large" placeholder="Large editable title" label="Large Editable Title" />
-      </div>
-    </div>
-  </div>
-);
-
-// Encrypted Field Examples
-export const EncryptedFields = () => {
-  const [isEditing1, setIsEditing1] = React.useState(false);
-  const [isEditing2, setIsEditing2] = React.useState(false);
-  const [isEditing3, setIsEditing3] = React.useState(false);
-
-  return (
-    <div className="tw-space-y-6">
-      <div>
-        <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Encrypted Password Fields</h3>
-        <div className="tw-space-y-4 tw-max-w-md">
-          <div>
-            <InputComponent
-              type="password"
-              size="small"
-              label="API Key"
-              placeholder={isEditing1 ? 'Enter API key' : '**************'}
-              encrypted={true}
-              showEncryption={true}
-              isEditing={isEditing1}
-              propertyKey="api_key"
-              handleEncryptedFieldsToggle={() => setIsEditing1(!isEditing1)}
-              isDisabled={false}
-            />
-          </div>
-          <div>
-            <InputComponent
-              type="password"
-              size="medium"
-              label="Database Password"
-              placeholder={isEditing2 ? 'Enter password' : '**************'}
-              encrypted={true}
-              showEncryption={true}
-              isEditing={isEditing2}
-              propertyKey="db_password"
-              handleEncryptedFieldsToggle={() => setIsEditing2(!isEditing2)}
-              isDisabled={false}
-            />
-          </div>
-          <div>
-            <InputComponent
-              type="password"
-              size="large"
-              label="Secret Token"
-              placeholder={isEditing3 ? 'Enter token' : '**************'}
-              encrypted={true}
-              showEncryption={true}
-              isEditing={isEditing3}
-              propertyKey="secret_token"
-              handleEncryptedFieldsToggle={() => setIsEditing3(!isEditing3)}
-              isDisabled={false}
-            />
-          </div>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Encrypted Field - Disabled State</h3>
-        <div className="tw-max-w-md">
-          <InputComponent
-            type="password"
-            size="medium"
-            label="Protected Secret"
-            placeholder="**************"
-            encrypted={true}
-            showEncryption={true}
-            isEditing={false}
-            propertyKey="protected_secret"
-            handleEncryptedFieldsToggle={() => {}}
-            isDisabled={true}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-// Workspace Constants Examples
-export const WorkspaceConstants = () => {
-  return (
-    <div className="tw-space-y-6">
-      <div>
-        <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Workspace Constants (Auto-visible)</h3>
-        <p className="tw-text-sm tw-text-text-weak tw-mb-4">
-          Password inputs automatically show values when they contain workspace constants or secrets
-        </p>
-        <div className="tw-space-y-4 tw-max-w-md">
-          <div>
-            <InputComponent
-              type="password"
-              size="small"
-              label="API Key (Constant)"
-              placeholder="{{constants.API_KEY}}"
-              helperText="Workspace constant - automatically visible"
-            />
-          </div>
-          <div>
-            <InputComponent
-              type="password"
-              size="medium"
-              label="Database Password (Secret)"
-              placeholder="{{secrets.DB_PASSWORD}}"
-              helperText="Workspace secret - automatically visible"
-            />
-          </div>
-          <div>
-            <InputComponent
-              type="password"
-              size="large"
-              label="Auth Token (Constant)"
-              placeholder="{{constants.AUTH_TOKEN}}"
-              helperText="Template variable - shown in plain text"
-            />
-          </div>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Mixed: Constants vs Regular Passwords</h3>
-        <div className="tw-space-y-4 tw-max-w-md">
-          <div>
-            <InputComponent
-              type="password"
-              size="medium"
-              label="Regular Password"
-              placeholder="Enter your password"
-              helperText="Normal password - hidden by default"
-            />
-          </div>
-          <div>
-            <InputComponent
-              type="password"
-              size="medium"
-              label="Workspace Constant"
-              placeholder="{{constants.SECRET_KEY}}"
-              helperText="Constant - visible by default"
-            />
-          </div>
-          <div>
-            <InputComponent
-              type="password"
-              size="medium"
-              label="Workspace Secret"
-              placeholder="{{secrets.API_SECRET}}"
-              helperText="Secret - visible by default"
-            />
-          </div>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Workspace Constants with Validation</h3>
-        <div className="tw-space-y-4 tw-max-w-md">
-          <div>
-            <InputComponent
-              type="password"
-              size="medium"
-              label="Valid Constant"
-              placeholder="{{constants.VALID_KEY}}"
-              response={true}
-              helperText="Constant syntax is correct"
-            />
-          </div>
-          <div>
-            <InputComponent
-              type="password"
-              size="medium"
-              label="Invalid Constant"
-              placeholder="{{constants.MISSING_KEY}}"
-              response={false}
-              helperText="This constant doesn't exist in workspace"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-// Encrypted Fields with Validation
-export const EncryptedFieldsWithValidation = () => {
-  const [isEditing1, setIsEditing1] = React.useState(false);
-  const [isEditing2, setIsEditing2] = React.useState(false);
-
-  return (
-    <div className="tw-space-y-6">
-      <div>
-        <h3 className="tw-text-lg tw-font-semibold tw-mb-4">Encrypted Fields with Validation States</h3>
-        <div className="tw-space-y-4 tw-max-w-md">
-          <div>
-            <InputComponent
-              type="password"
-              size="medium"
-              label="Valid Encrypted Password"
-              placeholder={isEditing1 ? 'Enter password' : '**************'}
-              encrypted={true}
-              showEncryption={true}
-              isEditing={isEditing1}
-              propertyKey="valid_password"
-              handleEncryptedFieldsToggle={() => setIsEditing1(!isEditing1)}
-              isDisabled={false}
-              response={true}
-              helperText="Password meets security requirements"
-            />
-          </div>
-          <div>
-            <InputComponent
-              type="password"
-              size="medium"
-              label="Invalid Encrypted Password"
-              placeholder={isEditing2 ? 'Enter password' : '**************'}
-              encrypted={true}
-              showEncryption={true}
-              isEditing={isEditing2}
-              propertyKey="invalid_password"
-              handleEncryptedFieldsToggle={() => setIsEditing2(!isEditing2)}
-              isDisabled={false}
-              response={false}
-              helperText="Password must be at least 12 characters"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-
-// Interactive Playground
-export const Playground = Template.bind({});
-Playground.args = {
+export const RocketInput = Template.bind({});
+RocketInput.args = {
   type: 'text',
-  placeholder: 'Interactive playground',
-  name: 'playground',
-  id: 'playground',
+  placeholder: 'Placeholder',
+  name: 'name',
+  id: '#id',
   size: 'medium',
-  label: 'Playground Input',
-  'aria-label': 'Interactive input playground',
-  helperText: 'Use the controls below to test different combinations',
+  label: 'Label text',
+  'aria-label': 'aria-label',
+};
+
+export const RocketInputWithLeadingVisual = (args) => {
+  return <InputComponent {...args} leadingIcon="search" />;
+};
+RocketInputWithLeadingVisual.args = {
+  ...RocketInput.args,
+};
+
+export const RocketInputWithTrailingAction = (args) => {
+  return <InputComponent {...args} trailingAction="clear" />;
+};
+RocketInputWithTrailingAction.args = {
+  ...RocketInput.args,
+};
+
+export const RocketInputWithHelperText = (args) => {
+  return <InputComponent {...args} helperText="Helper text" />;
+};
+RocketInputWithHelperText.args = {
+  ...RocketInput.args,
+};
+
+export const RocketNumberInput = (args) => {
+  return <InputComponent {...args} type="number" placeholder={'00.00'} />;
+};
+RocketNumberInput.args = {
+  ...RocketInput.args,
+};
+
+export const RocketEditableTitleInput = (args) => {
+  return <InputComponent {...args} type="editable title" placeholder="Editable title" />;
+};
+RocketEditableTitleInput.args = {
+  ...RocketInput.args,
 };
diff --git a/frontend/src/components/ui/Input/InputUtils/InputUtils.jsx b/frontend/src/components/ui/Input/InputUtils/InputUtils.jsx
index 7ff1efdf69..57e92a819b 100644
--- a/frontend/src/components/ui/Input/InputUtils/InputUtils.jsx
+++ b/frontend/src/components/ui/Input/InputUtils/InputUtils.jsx
@@ -6,8 +6,8 @@ import HelperIcon from './HelperIcon';
 import { generateCypressDataCy } from '../../../../modules/common/helpers/cypressHelpers.js';
 
 export const ValidationMessage = ({ response, validationMessage, className }) => (
-  <div className={cn('tw-flex tw-pl-[2px] tw-items-start tw-my-[2px] tw-gap-1', className)}>
-    <div className="tw-flex tw-h-4 tw-items-center">
+  <div className={cn('tw-flex tw-pl-[2px] tw-items-start tw-my-[2px]', className)}>
+    <div className="tw-flex tw-pt-[3.5px]">
       <ValidationIcon result={response} />
     </div>
     <Label
@@ -60,17 +60,3 @@ export const InputLabel = ({ disabled, label, required }) => (
     {required && <RequiredIndicator disabled={disabled} />}
   </Label>
 );
-
-/**
- * Maps input size to the corresponding button size
- * Input sizes: small (28px), medium (32px), large (40px)
- * Button sizes: small (20px), medium (28px), default (32px), large (40px)
- */
-export const getButtonSizeForInput = (inputSize) => {
-  const sizeMap = {
-    small: 'medium', // Input 28px → Button 28px
-    medium: 'default', // Input 32px → Button 32px
-    large: 'large', // Input 40px → Button 40px
-  };
-  return sizeMap[inputSize] || 'default';
-};
diff --git a/frontend/src/components/ui/Input/InputUtils/TrailingBtn.jsx b/frontend/src/components/ui/Input/InputUtils/TrailingBtn.jsx
index 6a6f8f373a..43fc1247b9 100644
--- a/frontend/src/components/ui/Input/InputUtils/TrailingBtn.jsx
+++ b/frontend/src/components/ui/Input/InputUtils/TrailingBtn.jsx
@@ -1,8 +1,21 @@
 import React from 'react';
 import { Button } from '../../Button/Button';
 import { cn } from '@/lib/utils';
-import { TRAILING_BUTTON_SCALE } from './Variants';
-import { getButtonSizeForInput } from './InputUtils';
+// eslint-disable-next-line import/no-unresolved
+import { cva } from 'class-variance-authority';
+
+const iconVariants = cva('!tw-rounded-[6px]', {
+  variants: {
+    size: {
+      small: `!tw-h-[18px] !tw-px-[2px] !tw-py-[2px] !tw-w-[18px]`,
+      medium: `!tw-h-[24px] !tw-px-[4px] !tw-py-[4px] !tw-w-[24px]`,
+      large: `!tw-h-[32px] !tw-px-[8px] !tw-py-[8px] !tw-w-[32px]`,
+    },
+  },
+  defaultVariants: {
+    size: 'medium',
+  },
+});
 
 const TrailingBtn = ({ size, type, className, disabled, ...restProps }) => {
   return (
@@ -10,11 +23,11 @@ const TrailingBtn = ({ size, type, className, disabled, ...restProps }) => {
       disabled={disabled}
       fill={type === 'loading' ? '#3E63DD' : disabled ? 'var(--icon-disabled)' : 'var(--icon-default)'}
       iconOnly
-      isLoading={type === 'loading'}
+      isLoading={type === 'loading' ? true : false}
       leadingIcon="removerectangle"
       variant="ghost"
-      className={cn(TRAILING_BUTTON_SCALE, className)}
-      size={getButtonSizeForInput(size)}
+      className={cn(iconVariants({ size }), className)}
+      size="default"
       {...restProps}
     />
   );
diff --git a/frontend/src/components/ui/Input/InputUtils/Variants.jsx b/frontend/src/components/ui/Input/InputUtils/Variants.jsx
index 9bdb635391..a5dc443cb6 100644
--- a/frontend/src/components/ui/Input/InputUtils/Variants.jsx
+++ b/frontend/src/components/ui/Input/InputUtils/Variants.jsx
@@ -1,107 +1,15 @@
 // eslint-disable-next-line import/no-unresolved
 import { cva } from 'class-variance-authority';
 
-/**
- * Base input variants for size and validation state.
- * Applied directly in Input.jsx to all input/textarea elements.
- *
- * @param {Object} options
- * @param {'small' | 'medium' | 'large'} options.size - Input size (height, font-size, padding, border-radius)
- * @param {'success' | 'error' | 'default'} options.validationState - Validation state (border color, focus ring)
- * @returns {string} Combined CSS classes
- */
-export const inputBaseVariants = cva('', {
+export const inputVariants = cva('', {
   variants: {
     size: {
-      small: 'tw-h-[28px] tw-text-[12px]/[18px] tw-px-[10px] tw-py-[6px] tw-rounded-[6px]',
-      medium: 'tw-h-[32px] tw-text-[12px]/[18px] tw-px-3 tw-py-[7px] tw-rounded-[6px]',
-      large: 'tw-h-[40px] tw-text-[14px]/[20px] tw-px-3 tw-py-[7px] tw-rounded-[8px]',
-    },
-    validationState: {
-      success:
-        '!tw-border-border-success-strong focus-visible:!tw-ring-0 focus-visible:!tw-ring-offset-0 focus-visible:!tw-border-border-success-strong',
-      error:
-        '!tw-border-border-danger-strong focus-visible:!tw-ring-0 focus-visible:!tw-ring-offset-0 focus-visible:!tw-border-border-danger-strong',
-      default: 'tw-border-border-default',
+      small: `tw-h-[28px]`,
+      medium: `tw-h-[32px]`,
+      large: `tw-h-[40px]`,
     },
   },
   defaultVariants: {
     size: 'medium',
-    validationState: 'default',
   },
 });
-
-/**
- * Icon position variants for leading/trailing icons.
- * Used in TextInput, NumberInput, and PasswordInput for absolute positioning.
- * Uses transform for perfect vertical centering.
- *
- * @param {Object} options
- * @param {'small' | 'medium' | 'large'} [options.leadingIconPosition] - Position for leading icon
- * @param {'small' | 'medium' | 'large'} [options.trailingIconPosition] - Position for trailing icon/button
- * @returns {string} CSS classes for absolute positioning
- */
-export const inputPositionVariants = cva('', {
-  variants: {
-    leadingIconPosition: {
-      small: 'tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-left-[10px]',
-      medium: 'tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-left-[12px]',
-      large: 'tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-left-[12px]',
-    },
-    trailingIconPosition: {
-      small: 'tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-right-0',
-      medium: 'tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-right-0',
-      large: 'tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-right-0',
-    },
-  },
-});
-
-/**
- * Input padding variants for when icons are present.
- * Adds left/right padding to input to prevent text overlap with icons.
- * Uses standard Tailwind spacing scale (8 = 32px, 9 = 36px, 10 = 40px, 11 = 44px).
- *
- * @param {Object} options
- * @param {'small' | 'medium' | 'large'} [options.leadingIconPadding] - Left padding when leading icon exists
- * @param {'small' | 'medium' | 'large'} [options.trailingIconPadding] - Right padding when trailing icon/button exists
- * @returns {string} CSS padding classes
- */
-export const inputPaddingVariants = cva('', {
-  variants: {
-    leadingIconPadding: {
-      small: 'tw-pl-8', // 32px
-      medium: 'tw-pl-9', // 36px
-      large: 'tw-pl-10', // 40px
-    },
-    trailingIconPadding: {
-      small: 'tw-pr-8', // 40px
-      medium: 'tw-pr-9', // 44px
-      large: 'tw-pr-10', // 48px
-    },
-  },
-});
-
-/**
- * Icon size variants for leading/trailing icons.
- * Controls width and height of SolidIcon and lucide icons.
- *
- * @param {Object} options
- * @param {'small' | 'medium' | 'large'} options.iconSize - Icon dimensions
- * @returns {string} CSS width/height classes
- */
-export const inputIconSizeVariants = cva('', {
-  variants: {
-    iconSize: {
-      small: 'tw-w-[14px] tw-h-[14px]',
-      medium: 'tw-w-[16px] tw-h-[16px]',
-      large: 'tw-w-[18px] tw-h-[18px]',
-    },
-  },
-});
-
-/**
- * Scale factor for trailing action buttons (clear/loading).
- * Makes buttons compact to fit nicely inside inputs while maintaining proportions.
- * Apply this class directly to buttons inside inputs.
- */
-export const TRAILING_BUTTON_SCALE = 'tw-scale-75';

From ae20b5de0584eea8638612190db2d069e6d68888 Mon Sep 17 00:00:00 2001
From: medhansh-alt <medhansh@tooljet.com>
Date: Fri, 17 Oct 2025 11:00:53 +0530
Subject: [PATCH 072/157] updated submodules

---
 frontend/ee | 2 +-
 server/ee   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/ee b/frontend/ee
index bd4e43c431..ea751ada29 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit bd4e43c431a4e5557a148bca1137fb5129560995
+Subproject commit ea751ada293469f8fdf5e3cb62b39b60c60071ef
diff --git a/server/ee b/server/ee
index 9be95ce62d..1baf0c1f3b 160000
--- a/server/ee
+++ b/server/ee
@@ -1 +1 @@
-Subproject commit 9be95ce62d520d2c1c4fe410e103236e2cd01684
+Subproject commit 1baf0c1f3b340048971548bd0b744e3be143df2b

From 322b2e1cef47c05a9d9a89bd7b9a0f77ff11f40c Mon Sep 17 00:00:00 2001
From: medhansh-alt <medhansh@tooljet.com>
Date: Fri, 17 Oct 2025 11:33:22 +0530
Subject: [PATCH 073/157] updated submodule ee-frontend

---
 frontend/ee | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/ee b/frontend/ee
index ea751ada29..bd4e43c431 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit ea751ada293469f8fdf5e3cb62b39b60c60071ef
+Subproject commit bd4e43c431a4e5557a148bca1137fb5129560995

From 7d288106522b34ef1cb6c64918ccc2c55139101c Mon Sep 17 00:00:00 2001
From: Ajith KV <ajith.jaban@gmail.com>
Date: Fri, 17 Oct 2025 12:38:44 +0530
Subject: [PATCH 074/157] Add cypress test cases for enterprise user groups and
 permissions (#14340)

* Add cypress test cases for enterprise user groups and permissions

* update constants

* update user groups test cases

* update spec

* update groups cases

* update lock.json

* update custom group cases

* update docker file

* update first user onboarding and platform commands

* add case for UI  promote and release permission
---
 .../commands/platform/platformApiCommands.js  |  68 +++--
 .../constants/selectors/manageGroups.js       |  30 +-
 .../cypress/constants/texts/manageGroups.js   |  27 +-
 .../workspace/groups/basicPermissions.cy.js   | 185 +++++++-----
 .../groups/customGroupGranularAccess.cy.js    | 231 +++++++++++++++
 .../groups/customGroupPermissions.cy.js       | 204 +++++++++++++
 .../workspace/groups/permissions.cy.js        | 258 ++---------------
 .../firstUser/firstUserOnboarding.cy.js       |  32 +--
 cypress-tests/cypress/support/utils/apps.js   |   2 +-
 cypress-tests/cypress/support/utils/common.js |   1 -
 .../cypress/support/utils/dashboard.js        |  10 +-
 .../cypress/support/utils/dataSource.js       |   7 +-
 .../cypress/support/utils/exportImport.js     |   7 +-
 .../cypress/support/utils/manageGroups.js     |  25 +-
 .../cypress/support/utils/manageSSO.js        |   2 +-
 .../cypress/support/utils/manageUsers.js      |  12 +-
 .../cypress/support/utils/onboarding.js       |  11 +-
 .../cypress/support/utils/uiPermissions.js    | 270 ++++++++++++++++++
 .../cypress/support/utils/userPermissions.js  | 110 ++++++-
 .../cypress/support/utils/version.js          |   9 +-
 .../components/AddResourcePermissionsMenu.jsx |   4 +-
 plugins/package-lock.json                     |   2 +-
 server/package-lock.json                      |   2 +-
 23 files changed, 1060 insertions(+), 449 deletions(-)
 create mode 100644 cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupGranularAccess.cy.js
 create mode 100644 cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupPermissions.cy.js
 create mode 100644 cypress-tests/cypress/support/utils/uiPermissions.js

diff --git a/cypress-tests/cypress/commands/platform/platformApiCommands.js b/cypress-tests/cypress/commands/platform/platformApiCommands.js
index d2cd90371b..b600db4d99 100644
--- a/cypress-tests/cypress/commands/platform/platformApiCommands.js
+++ b/cypress-tests/cypress/commands/platform/platformApiCommands.js
@@ -172,6 +172,24 @@ Cypress.Commands.add("apiUpdateWsConstant", (id, updateValue, envName) => {
     });
 });
 
+Cypress.Commands.add("apiGetGroupId", (groupName) => {
+    return cy.getAuthHeaders().then((headers) => {
+        return cy.request({
+            method: "GET",
+            url: `${Cypress.env("server_host")}/api/v2/group-permissions`,
+            headers: headers,
+            log: false,
+        }).then((response) => {
+            expect(response.status).to.equal(200);
+            const group = response.body.groupPermissions.find(
+                (g) => g.name === groupName
+            );
+            if (!group) throw new Error(`Group with name ${groupName} not found`);
+            return group.id;
+        });
+    });
+});
+
 Cypress.Commands.add(
     "apiCreateGranularPermission",
     (
@@ -183,21 +201,7 @@ Cypress.Commands.add(
         resourcesToAdd = []
     ) => {
         cy.getAuthHeaders().then((headers) => {
-            // Fetch group permissions
-            cy.request({
-                method: "GET",
-                url: `${Cypress.env("server_host")}/api/v2/group-permissions`,
-                headers: headers,
-                log: false,
-            }).then((response) => {
-                expect(response.status).to.equal(200);
-                const group = response.body.groupPermissions.find(
-                    (g) => g.name === groupName
-                );
-                if (!group) throw new Error(`Group with name ${groupName} not found`);
-
-                const groupId = group.id;
-
+            cy.apiGetGroupId(groupName).then((groupId) => {
                 // Create granular permission
                 cy.request({
                     method: "POST",
@@ -228,20 +232,7 @@ Cypress.Commands.add(
     "apiDeleteGranularPermission",
     (groupName, typesToDelete = []) => {
         cy.getAuthHeaders().then((headers) => {
-            // Step 1: Get the group by name
-            cy.request({
-                method: "GET",
-                url: `${Cypress.env("server_host")}/api/v2/group-permissions`,
-                headers,
-                log: false,
-            }).then((response) => {
-                expect(response.status).to.equal(200);
-                const group = response.body.groupPermissions.find(
-                    (g) => g.name === groupName
-                );
-                if (!group) throw new Error(`Group with name ${groupName} not found`);
-
-                const groupId = group.id;
+            cy.apiGetGroupId(groupName).then((groupId) => {
 
                 // Step 2: Get all granular permissions for the group
                 cy.request({
@@ -629,6 +620,23 @@ Cypress.Commands.add(
     }
 );
 
+Cypress.Commands.add("apiUpdateGroupPermission", (groupName, permissionPayload) => {
+    return cy.apiGetGroupId(groupName).then((groupId) => {
+        return cy.getAuthHeaders().then((headers) => {
+            return cy.request({
+                method: "PUT",
+                url: `${Cypress.env("server_host")}/api/v2/group-permissions/${groupId}`,
+                headers: headers,
+                body: permissionPayload,
+                log: false,
+            }).then((response) => {
+                expect(response.status).to.equal(200);
+                return response.body;
+            });
+        });
+    });
+});
+
 Cypress.Commands.add("getAuthHeaders", (returnCached = false) => {
     let headers = {};
     if (returnCached) {
@@ -644,4 +652,4 @@ Cypress.Commands.add("getAuthHeaders", (returnCached = false) => {
             return headers;
         });
     }
-});
\ No newline at end of file
+});
diff --git a/cypress-tests/cypress/constants/selectors/manageGroups.js b/cypress-tests/cypress/constants/selectors/manageGroups.js
index 9ed4273ba5..98ab952f32 100644
--- a/cypress-tests/cypress/constants/selectors/manageGroups.js
+++ b/cypress-tests/cypress/constants/selectors/manageGroups.js
@@ -50,10 +50,28 @@ export const groupsSelector = {
   appsCreateLabel: "[data-cy=app-create-label]",
   appsDeleteCheck: "[data-cy=app-delete-checkbox]",
   appsDeleteLabel: "[data-cy=app-delete-label]",
+  appPromoteCheck: '[data-cy="app-promote-checkbox"]',
+  appPromoteLabel: '[data-cy="app-promote-label"]',
+  appPrmoteHelperText: '[data-cy="app-promote-helper-text"]',
+  appReleaseCheck: '[data-cy="app-release-checkbox"]',
+  appReleaseLabel: '[data-cy="app-release-label"]',
+  appReleaseHelperText: '[data-cy="app-release-helper-text"]',
+  workflowsCreateCheck: "[data-cy=workflow-create-checkbox]",
+  workflowsCreateLabel: "[data-cy=workflow-create-label]",
+  workflowsHelperText: '[data-cy="workflow-helper-text"]',
+  workflowsDeleteCheck: '[data-cy="workflow-delete-checkbox"]',
+  workflowsDeleteLabel: '[data-cy="workflow-delete-label"]',
+  workflowsDeleteHelperText: '[data-cy="workflow-delete-helper-text"]',
+  datasourcesCreateCheck: "[data-cy=datasource-create-checkbox]",
+  datasourcesCreateLabel: "[data-cy=datasource-create-label]",
+  datasourcesHelperText: '[data-cy="datasource-helper-text"]',
+  datasourcesDeleteCheck: '[data-cy="datasource-delete-checkbox"]',
+  datasourcesDeleteLabel: '[data-cy="datasource-delete-label"]',
   foldersCreateCheck: "[data-cy=folder-create-checkbox]",
   foldersCreateLabel: "[data-cy=folder-create-label]",
   foldersHelperText: '[data-cy="folder-helper-text"]',
   workspaceVarCheckbox: '[data-cy="env-variable-checkbox"]',
+
   appsText: '[data-cy="apps-text"]',
   appEditRadio: '[data-cy="app-edit-radio"]',
   appEditLabel: '[data-cy="app-edit-label"]',
@@ -66,7 +84,7 @@ export const groupsSelector = {
   appHideLabel: '[data-cy="app-hide-from-dashboard-label"]',
   appHidePermissionModalLabel: '[data-cy="hide-from-dashboard-permission-label"]',
   appHidePermissionModalHelperText: '[data-cy="hide-from-dashboard-permission-info-text"]',
-  addAppButton: '[data-cy="add-apps-buton"]',
+  addAppsButton: '[data-cy="add-apps-buton"]',
   addEditPermissionModal: '[data-cy = "add-edit-permission-modal"]',
   addEditPermissionModalTitle: '[data-cy="modal-title"]',
   permissionNameLabel: '[data-cy="permission-name-label"]',
@@ -150,7 +168,13 @@ export const groupsSelector = {
   granularEmptyPageIcon: '[data-cy="empty-page-svg"]',
   emptyPagePermissionHelperText: '[data-cy="empty-page-info-text"]',
   groupNameUpdateLink: '[data-cy="group-name-update-link"]',
-
-
+  addPermissionButton: '[data-cy="add-permission-button"]',
+  addAppButton: '[data-cy="add-app-button"]',
+  addWorkflowButton: '[data-cy="add-workflow-button"]',
+  addDatasourceButton: '[data-cy="add-data_source-button"]',
+  buildWorkflowradio: '[data-cy="build-permission-radio"]',
+  executeWorkflowradio: '[data-cy="execute-permission-radio"]',
+  configureDatasourceradio: '[data-cy="configure-permission-radio"]',
+  buildWithDatasourceRadio: '[data-cy="build-with-datasource-radio"]',
 
 };
diff --git a/cypress-tests/cypress/constants/texts/manageGroups.js b/cypress-tests/cypress/constants/texts/manageGroups.js
index a24c2a6118..770778f2b5 100644
--- a/cypress-tests/cypress/constants/texts/manageGroups.js
+++ b/cypress-tests/cypress/constants/texts/manageGroups.js
@@ -85,12 +85,29 @@ export const groupsText = {
   warningText: "Users must be always be part of one default group. This will define the user count in your plan.",
   continueButtonText: "Continue",
   roleUpdateToastMessage: "Role updated successfully",
-  endUserToBuilderMessage: "Changing the user role from end-user to builder will grant access the user access to all resources.Are you sure you want to continue?",
-  endUserToAdminMessage: "Changing the user role from end-user to admin will grant the user access to all resources and settings.Are you sure you want to continue?",
-  builderToEnduserMessage: "Changing the user role from builder to end-user will revoke their access to edit all resources.Are you sure you want to continue?",
-  builderToAdminMessage: "Changing user role from builder to admin will grant access to all resources and settings.Are you sure you want to continue?",
+
+  endUserToBuilderMessage: Cypress.env('environment') === 'Community'
+    ? "Changing the user role from end-user to builder will grant access the user access to all resources.Are you sure you want to continue?"
+    : "Changing user default group from end-user to builder will affect the count of users covered by your plan.Are you sure you want to continue?",
+
+  endUserToAdminMessage: Cypress.env('environment') === 'Community'
+    ? "Changing the user role from end-user to admin will grant the user access to all resources and settings.Are you sure you want to continue?"
+    : "Changing user default group from end-user to admin will affect the count of users covered by your plan.Are you sure you want to continue?",
+
+  builderToEnduserMessage: Cypress.env('environment') === 'Community'
+    ? "Changing the user role from builder to end-user will revoke their access to edit all resources.Are you sure you want to continue?"
+    : "Changing user default group from builder to end-user will affect the count of users covered by your plan.This will also remove the user from any custom groups with builder-like permissions.Are you sure you want to continue?",
+
+  builderToAdminMessage: Cypress.env('environment') === 'Community'
+    ? "Changing user role from builder to admin will grant access to all resources.Are you sure you want to continue?"
+    : "Changing user role from builder to admin will grant access to all resources and settings.Are you sure you want to continue?",
+
   adminToBuilderMessage: "Changing your user default group from admin to builder will revoke your access to settings.Are you sure you want to continue?",
-  adminToEnduserMessage: "Changing the user role from admin to end-user will revoke their access to edit all resources and settings.Are you sure you want to continue?",
+
+  adminToEnduserMessage: Cypress.env('environment') === 'Community'
+    ? "Changing the user role from admin to end-user will revoke their access to edit all resources and settings.Are you sure you want to continue?"
+    : "Changing your user group from admin to end-user will revoke your access to settings. This will also affect the count of users covered by your plan.Are you sure you want to continue?",
+
   modalHeader: "Can not remove last active admin",
   modalMessage: "Cannot change role of last present admin, please add another admin and change the role",
   userAddedToast: "Users added to the group",
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/basicPermissions.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/basicPermissions.cy.js
index 782f8543cb..771c2d1e73 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/basicPermissions.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/basicPermissions.cy.js
@@ -1,24 +1,28 @@
 import { fake } from "Fixtures/fake";
 import { commonSelectors } from "Selectors/common";
 import { groupsSelector } from "Selectors/manageGroups";
-import { workspaceConstantsSelectors } from "Selectors/workspaceConstants";
 import {
-    createFolder,
-    deleteFolder,
     navigateToManageGroups,
     selectAppCardOption,
 } from "Support/utils/common";
 import {
     createGroupsAndAddUserInGroup,
     setupWorkspaceAndInviteUser,
-    updateRole,
-    verifyBasicPermissions,
-    verifySettingsAccess,
+    updateRole
 } from "Support/utils/manageGroups";
-import { addAndVerifyConstants } from "Support/utils/workspaceConstants";
+import {
+    uiAppCRUDWorkflow,
+    uiDataSourceCRUDWorkflow,
+    uiFolderCRUDWorkflow,
+    uiVerifyAdminPrivileges,
+    uiVerifyBuilderPrivileges,
+    uiWorkflowCRUDWorkflow,
+    uiWorkspaceConstantCRUDWorkflow,
+} from "Support/utils/uiPermissions";
 import { commonText } from "Texts/common";
 import { dashboardText } from "Texts/dashboard";
 import { groupsText } from "Texts/manageGroups";
+import { verifyBasicPermissions, verifySettingsAccess } from "Support/utils/userPermissions";
 
 describe("Manage Groups", () => {
     let data = {};
@@ -52,9 +56,100 @@ describe("Manage Groups", () => {
         );
 
         verifyBasicPermissions(false);
+        verifySettingsAccess(false);
+
     });
 
-    it("should verify builder privileges and role updates in custom groups", () => {
+    it("should verify builder privileges", () => {
+        setupWorkspaceAndInviteUser(
+            data.workspaceName,
+            data.workspaceSlug,
+            data.firstName,
+            data.email,
+            "builder"
+        );
+
+        // UI-based privilege verification for Builder
+        cy.get('.basic-plan-migration-banner').invoke('css', 'display', 'none');
+        uiVerifyBuilderPrivileges();
+
+        // UI CRUD workflows validation
+        cy.get(commonSelectors.dashboardIcon).click();
+        const uiTestAppName = `${data.appName}_ui`;
+        const uiTestFolderName = `${data.folderName}-ui`;
+        const uiTestConstName = `${data.firstName}_const`;
+        const uiTestConstValue = "test_value";
+
+        // Perform UI-based CRUD operations
+        uiAppCRUDWorkflow(uiTestAppName);
+        uiFolderCRUDWorkflow(uiTestFolderName);
+        uiWorkspaceConstantCRUDWorkflow(uiTestConstName, uiTestConstValue);
+
+        // Enterprise-specific UI workflows
+        cy.ifEnv("Enterprise", () => {
+            const uiTestDsName = `${data.appName}_ds`;
+            const uiTestWorkflowName = `${data.appName}_wf`;
+            uiDataSourceCRUDWorkflow(uiTestDsName, "restapi");
+            uiWorkflowCRUDWorkflow(uiTestWorkflowName);
+        });
+
+        cy.get(commonSelectors.dashboardIcon).click();
+        cy.apiCreateApp(data.appName);
+        cy.openApp();
+        cy.releaseApp();
+
+        //verify clone access
+        cy.visit(data.workspaceSlug);
+        selectAppCardOption(
+            data.appName,
+            commonSelectors.appCardOptions(commonText.cloneAppOption)
+        );
+        cy.get(commonSelectors.cloneAppButton).click();
+        cy.verifyToastMessage(
+            commonSelectors.toastMessage,
+            dashboardText.appClonedToast,
+            false
+        );
+
+    });
+
+    it("should verify admin privileges", () => {
+        setupWorkspaceAndInviteUser(
+            data.workspaceName,
+            data.workspaceSlug,
+            data.firstName,
+            data.email,
+            "admin"
+        );
+
+        // API-based verification
+        verifyBasicPermissions(true);
+
+        // UI-based privilege verification for Admin (includes settings access)
+        uiVerifyAdminPrivileges();
+
+        // UI CRUD workflows for validation
+        cy.get(commonSelectors.dashboardIcon).click();
+        const uiTestAppName = `${data.appName}_admin_ui`;
+        const uiTestFolderName = `${data.folderName}-admin-ui`;
+        const uiTestConstName = `${data.firstName}_admin_const`;
+        const uiTestConstValue = "admin_test_value";
+
+        // Perform UI-based CRUD operations
+        uiAppCRUDWorkflow(uiTestAppName);
+        uiFolderCRUDWorkflow(uiTestFolderName);
+        uiWorkspaceConstantCRUDWorkflow(uiTestConstName, uiTestConstValue);
+
+        // Enterprise-specific UI workflows
+        cy.ifEnv("Enterprise", () => {
+            const uiTestDsName = `${data.appName}_admin_ds`;
+            const uiTestWorkflowName = `${data.appName}_admin_wf`;
+            uiDataSourceCRUDWorkflow(uiTestDsName, "restapi");
+            uiWorkflowCRUDWorkflow(uiTestWorkflowName);
+        });
+    });
+
+    it("should verify role updates in custom groups", () => {
         const builderGroup = fake.firstName.replace(/[^A-Za-z]/g, "");
         const endUserGroup = fake.firstName.replace(/[^A-Za-z]/g, "");
 
@@ -66,47 +161,10 @@ describe("Manage Groups", () => {
             "builder"
         );
 
-        // Verify builder permissions
-        verifyBasicPermissions(true);
-
-        // App operations
-        cy.apiCreateApp(data.appName);
-        cy.apiDeleteApp();
-
-        // Folder operations
-        cy.apiCreateFolder(data.folderName);
-        cy.apiDeleteFolder();
-
-        // Constants management
-        cy.get(commonSelectors.workspaceConstantsIcon).click();
-        addAndVerifyConstants(data.firstName, data.appName);
-        cy.get(
-            workspaceConstantsSelectors.constDeleteButton(data.firstName)
-        ).click();
-        cy.get(commonSelectors.yesButton).click();
-
-        verifySettingsAccess(false);
-
-        cy.get(commonSelectors.dashboardIcon).click();
-        cy.apiCreateApp(data.appName);
-
-        //verify clone access
-        cy.reload();
-        selectAppCardOption(
-            data.appName,
-            commonSelectors.appCardOptions(commonText.cloneAppOption)
-        );
-        cy.get(commonSelectors.cloneAppButton).click();
-        cy.verifyToastMessage(
-            commonSelectors.toastMessage,
-            dashboardText.appClonedToast,
-            false
-        );
-        // cy.get(commonSelectors.cancelButton).click();
         cy.apiLogout();
-
         cy.apiLogin();
         cy.visit(data.workspaceSlug);
+        cy.apiCreateApp(`${data.appName}_builder`);
         navigateToManageGroups();
 
         [builderGroup, endUserGroup].forEach((group) => {
@@ -140,43 +198,12 @@ describe("Manage Groups", () => {
         cy.apiLogout();
         cy.apiLogin(data.email, "password");
         cy.visit(data.workspaceSlug);
-        cy.get(commonSelectors.appCard(data.appName))
+        cy.get(commonSelectors.appCard(`${data.appName}_builder`))
             .trigger("mouseover")
             .trigger("mouseenter")
             .find(commonSelectors.editButton)
             .should("not.exist");
-    });
 
-    it("should verify admin privileges", () => {
-        setupWorkspaceAndInviteUser(
-            data.workspaceName,
-            data.workspaceSlug,
-            data.firstName,
-            data.email,
-            "admin"
-        );
 
-        verifyBasicPermissions(true);
-
-        // App operations
-        cy.apiCreateApp(data.appName);
-        cy.apiDeleteApp();
-
-        // Folder operations
-        cy.apiCreateFolder(data.folderName);
-        cy.apiDeleteFolder();
-
-        // Constants management
-        cy.get(commonSelectors.workspaceConstantsIcon).click();
-        addAndVerifyConstants(data.firstName, data.appName);
-        cy.get(
-            workspaceConstantsSelectors.constDeleteButton(data.firstName)
-        ).click();
-        cy.get(commonSelectors.yesButton).click();
-
-        // Settings access check - explicitly verify workspace settings
-        cy.get(commonSelectors.settingsIcon).click();
-        cy.get(commonSelectors.workspaceSettings).should("exist");
-        cy.wait(1000);
-    });
+    })
 });
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupGranularAccess.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupGranularAccess.cy.js
new file mode 100644
index 0000000000..72cefce659
--- /dev/null
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupGranularAccess.cy.js
@@ -0,0 +1,231 @@
+import { fake } from "Fixtures/fake";
+import { commonSelectors } from "Selectors/common";
+import { dataSourceSelector } from "Selectors/dataSource";
+import { groupsSelector } from "Selectors/manageGroups";
+import {
+    navigateToManageGroups
+} from "Support/utils/common";
+import {
+    createGroupsAndAddUserInGroup,
+    setupWorkspaceAndInviteUser
+} from "Support/utils/manageGroups";
+import {
+    getGroupPermissionInput
+} from "Support/utils/userPermissions";
+import { groupsText } from "Texts/manageGroups";
+
+describe("Manage Groups", () => {
+    let data = {};
+    const isEnterprise = Cypress.env("environment") === "Enterprise";
+
+    before(() => {
+        cy.exec("mkdir -p ./cypress/downloads/");
+        cy.wait(3000);
+    });
+
+    beforeEach(() => {
+        data = {
+            firstName: fake.firstName,
+            appName: fake.companyName,
+            email: fake.email.toLowerCase().replaceAll("[^A-Za-z]", ""),
+            workspaceName: fake.lastName.toLowerCase().replace(/[^A-Za-z]/g, ""),
+            workspaceSlug: fake.lastName.toLowerCase().replace(/[^A-Za-z]/g, ""),
+            folderName: fake.companyName,
+            dsName: fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", ""),
+        };
+
+        cy.defaultWorkspaceLogin();
+        cy.intercept("DELETE", "/api/folders/*").as("folderDeleted");
+        cy.skipWalkthrough();
+        cy.viewport(2400, 2000);
+
+    });
+
+
+    it.only("should verify the granular permissions in custom groups", () => {
+        const groupName = fake.firstName.replace(/[^A-Za-z]/g, "");
+        const appName2 = fake.companyName;
+        const appName3 = fake.companyName;
+        const appSlug = appName3.toLowerCase().replace(/\s+/g, "-");
+        const workflowName1 = `${data.appName}-workflow`;
+        const workflowName2 = `${appName2}-workflow`;
+        const datasourceName1 = `${data.appName}-datasource`;
+        const datasourceName2 = `${appName2}-datasource`;
+
+        setupWorkspaceAndInviteUser(
+            data.workspaceName,
+            data.workspaceSlug,
+            data.firstName,
+            data.email,
+            'builder'
+        );
+
+        cy.apiLogin();
+        cy.visit(data.workspaceSlug);
+        cy.apiUpdateGroupPermission(
+            "builder",
+            getGroupPermissionInput(isEnterprise, false)
+        );
+
+        cy.apiDeleteGranularPermission("builder", []);
+
+        navigateToManageGroups();
+        createGroupsAndAddUserInGroup(groupName, data.email);
+
+        cy.apiCreateApp(data.appName);
+        cy.apiCreateApp(appName2);
+
+        // App Hide from dashboard
+        cy.apiCreateApp(appName3);
+        cy.openApp();
+        cy.apiAddComponentToApp(appName3, "text1");
+        cy.apiPromoteAppVersion().then(() => {
+            const stagingId = Cypress.env("stagingEnvId");
+            cy.apiPromoteAppVersion(Cypress.env("stagingEnvId"));
+        });
+        cy.apiReleaseApp(appName3);
+        cy.apiAddAppSlug(appName3, appSlug);
+        cy.go("back");
+
+        // Configure app permissions
+        navigateToManageGroups();
+        cy.get(groupsSelector.groupLink(groupName)).click();
+        cy.get(groupsSelector.granularLink).click();
+
+        // Setup permissions for both apps
+        [data.appName, appName2, appName3].forEach((app) => {
+            cy.ifEnv("Community", () => {
+                cy.get(groupsSelector.addAppsButton).click();
+            });
+            cy.ifEnv("Enterprise", () => {
+                cy.get(groupsSelector.addPermissionButton).click();
+                cy.get(groupsSelector.addAppButton).click();
+            });
+
+            cy.clearAndType(groupsSelector.permissionNameInput, app);
+            cy.get(groupsSelector.customradio).check();
+            cy.get(".css-1gfides").click({ force: true }).type(`${app}{enter}`);
+            cy.get(groupsSelector.confimButton).click({ force: true });
+            cy.verifyToastMessage(
+                commonSelectors.toastMessage,
+                groupsText.createPermissionToast
+            );
+        });
+
+        cy.get(groupsSelector.groupChip).contains(data.appName).click();
+        cy.get(groupsSelector.editPermissionRadio).click();
+        cy.get(groupsSelector.confimButton).click();
+
+        //To hide app
+        cy.get(groupsSelector.groupChip).contains(appName3).click();
+        cy.get(groupsSelector.hidePermissionInput).check();
+        cy.get(groupsSelector.confimButton).click();
+
+        cy.ifEnv("Enterprise", () => {
+
+            cy.apiCreateWorkflow(workflowName1);
+            cy.apiCreateWorkflow(workflowName2);
+
+            cy.apiCreateGDS(
+                `${Cypress.env("server_host")}/api/data-sources`,
+                datasourceName1,
+                "restapi",
+                [{ key: "url", value: "https://jsonplaceholder.typicode.com/users" }]
+            );
+
+            cy.apiCreateGDS(
+                `${Cypress.env("server_host")}/api/data-sources`,
+                datasourceName2,
+                "restapi",
+                [{ key: "url", value: "https://jsonplaceholder.typicode.com/users" }]
+            );
+
+            cy.get(groupsSelector.groupLink('Builder')).click();
+            cy.get(groupsSelector.groupLink(groupName)).click();
+            cy.get(groupsSelector.granularLink).click();
+
+            [workflowName1, workflowName2].forEach((workflow) => {
+                cy.get(groupsSelector.addPermissionButton).click();
+                cy.get(groupsSelector.addWorkflowButton).click();
+
+                cy.clearAndType(groupsSelector.permissionNameInput, workflow);
+                cy.get(groupsSelector.customradio).check();
+                cy.get(".css-1gfides")
+                    .click({ force: true })
+                    .type(`${workflow}{enter}`);
+                cy.get(groupsSelector.confimButton).click({ force: true });
+                cy.verifyToastMessage(
+                    commonSelectors.toastMessage,
+                    groupsText.createPermissionToast
+                );
+            });
+            cy.get(groupsSelector.groupChip).contains(workflowName1).click();
+            cy.get(groupsSelector.buildWorkflowradio).click();
+            cy.get(groupsSelector.confimButton).click();
+
+            [datasourceName1, datasourceName2].forEach((datasource) => {
+                cy.get(groupsSelector.addPermissionButton).click();
+                cy.get(groupsSelector.addDatasourceButton).click();
+
+                cy.clearAndType(groupsSelector.permissionNameInput, datasource);
+                cy.get(groupsSelector.customradio).check();
+                cy.get(".css-1gfides")
+                    .click({ force: true })
+                    .type(`${datasource}{enter}`);
+                cy.get(groupsSelector.confimButton).click({ force: true });
+                cy.verifyToastMessage(
+                    commonSelectors.toastMessage,
+                    groupsText.createPermissionToast
+                );
+            });
+            cy.get(groupsSelector.groupChip).contains(datasourceName1).click();
+            cy.get(groupsSelector.configureDatasourceradio).click();
+            cy.get(groupsSelector.confimButton).click();
+        });
+
+        // Verify as builder
+        cy.wait(1000);
+        cy.apiLogout();
+        cy.apiLogin(data.email);
+        cy.visit(data.workspaceSlug);
+
+        cy.get('.appcard-buttons-wrap [data-cy="edit-button"]').should(
+            "have.lengthOf",
+            1
+        );
+        cy.get('.appcard-buttons-wrap [data-cy="launch-button"]').should(
+            "have.lengthOf",
+            2
+        );
+
+        cy.ifEnv("Enterprise", () => {
+            cy.get(commonSelectors.globalWorkFlowsIcon).click();
+            cy.get('[data-cy="create-new-workflows-button"]').should("not.exist");
+            cy.get('.appcard-buttons-wrap [data-cy="edit-button"]').should(
+                "have.lengthOf",
+                1
+            );
+            cy.get('.appcard-buttons-wrap [data-cy="launch-button"]').should(
+                "have.lengthOf",
+                2
+            );
+
+            cy.get(commonSelectors.globalDataSourceIcon).click();
+            cy.get(dataSourceSelector.dataSourceNameButton(datasourceName1.toLowerCase())).click();
+            cy.get(dataSourceSelector.dsNameInputField).should('be.enabled');
+            cy.get(dataSourceSelector.dataSourceNameButton(datasourceName2.toLowerCase())).click();
+            cy.get(dataSourceSelector.dsNameInputField).should('be.disabled')
+            cy.get(dataSourceSelector.commonDsLabelAndCount).click();
+            cy.get('[data-cy="rest-api-add-button"]').should("be.disabled");
+        });
+
+
+        //Visit hidden app url
+        cy.visitSlug({
+            actualUrl: `${Cypress.config("baseUrl")}/applications/${appSlug}`,
+        });
+
+
+    });
+
+});
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupPermissions.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupPermissions.cy.js
new file mode 100644
index 0000000000..e3e0e73bec
--- /dev/null
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupPermissions.cy.js
@@ -0,0 +1,204 @@
+import { fake } from "Fixtures/fake";
+import { commonSelectors } from "Selectors/common";
+import { dataSourceSelector } from "Selectors/dataSource";
+import { groupsSelector } from "Selectors/manageGroups";
+import { navigateToManageGroups } from "Support/utils/common";
+import {
+    createGroupsAndAddUserInGroup,
+    setupWorkspaceAndInviteUser,
+} from "Support/utils/manageGroups";
+import {
+    getGroupPermissionInput,
+    verifyBuilderPermissions,
+} from "Support/utils/userPermissions";
+import { groupsText } from "Texts/manageGroups";
+
+describe("Manage Groups", () => {
+    let data = {};
+    const isEnterprise = Cypress.env("environment") === "Enterprise";
+
+    before(() => {
+        cy.exec("mkdir -p ./cypress/downloads/");
+        cy.wait(3000);
+    });
+
+    beforeEach(() => {
+        data = {
+            firstName: fake.firstName,
+            appName: fake.companyName,
+            email: fake.email.toLowerCase().replaceAll("[^A-Za-z]", ""),
+            workspaceName: fake.lastName.toLowerCase().replace(/[^A-Za-z]/g, ""),
+            workspaceSlug: fake.lastName.toLowerCase().replace(/[^A-Za-z]/g, ""),
+            folderName: fake.companyName,
+            dsName: fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", ""),
+        };
+
+        cy.defaultWorkspaceLogin();
+        cy.intercept("DELETE", "/api/folders/*").as("folderDeleted");
+        cy.skipWalkthrough();
+        cy.viewport(2400, 2000);
+    });
+
+    it("should verify user permissions in custom groups", () => {
+        const groupName = fake.firstName.replace(/[^A-Za-z]/g, "");
+        const workflowName1 = fake.companyName;
+        const datasourceName1 = fake.companyName.toLowerCase().replace(/[^A-Za-z]/g, "");
+
+        setupWorkspaceAndInviteUser(
+            data.workspaceName,
+            data.workspaceSlug,
+            data.firstName,
+            data.email
+        );
+        cy.apiLogout();
+
+        // Setup custom group
+        cy.apiLogin();
+        cy.visit(data.workspaceSlug);
+        cy.get(".basic-plan-migration-banner").invoke("css", "display", "none");
+
+        cy.apiUpdateGroupPermission(
+            "builder",
+            getGroupPermissionInput(isEnterprise, false)
+        );
+
+        cy.visit(data.workspaceSlug);
+        navigateToManageGroups();
+
+        createGroupsAndAddUserInGroup(groupName, data.email);
+
+        // Permission configuration and verification
+        cy.get(groupsSelector.permissionsLink).click();
+
+        // App creation permission
+        cy.get(groupsSelector.appsCreateCheck).check();
+        cy.get(commonSelectors.defaultModalTitle).contains(
+            groupsText.changeUserRoleHeader
+        );
+        cy.get(groupsSelector.changeRoleModalMessage).contains(
+            groupsText.changeUserRoleMessage
+        );
+        cy.get(".item-list").contains(data.email);
+        cy.get(groupsSelector.confimButton).should(
+            "have.text",
+            groupsText.continueButtonText
+        );
+        cy.get(commonSelectors.cancelButton).click();
+
+        // Other permissions
+        const permissions =
+            Cypress.env("environment") === "Community"
+                ? [
+                    groupsSelector.appsDeleteCheck,
+                    groupsSelector.foldersCreateCheck,
+                    groupsSelector.workspaceVarCheckbox,
+                ]
+                : [
+                    groupsSelector.appsDeleteCheck,
+                    groupsSelector.appPromoteCheck,
+                    groupsSelector.appReleaseCheck,
+                    groupsSelector.workflowsCreateCheck,
+                    groupsSelector.workflowsDeleteCheck,
+                    groupsSelector.datasourcesCreateCheck,
+                    groupsSelector.datasourcesDeleteCheck,
+                    groupsSelector.foldersCreateCheck,
+                    groupsSelector.workspaceVarCheckbox,
+                ];
+
+        permissions.forEach((permission) => {
+            cy.get(permission).check();
+            cy.get(".modal-content").should("be.visible");
+            cy.get(commonSelectors.cancelButton).click();
+        });
+
+        // Granular permissions
+        cy.get(groupsSelector.granularLink).click();
+
+        cy.ifEnv("Community", () => {
+            cy.get(groupsSelector.addAppsButton).click();
+        });
+        cy.ifEnv("Enterprise", () => {
+            cy.get(groupsSelector.addPermissionButton).click();
+            cy.get(groupsSelector.addAppButton).click();
+        });
+
+        cy.clearAndType(groupsSelector.permissionNameInput, data.firstName);
+        cy.get(groupsSelector.editPermissionRadio).click();
+        cy.get(groupsSelector.confimButton).click();
+
+        // Verify modal
+        cy.get(".modal-content").should("be.visible");
+        cy.get(groupsSelector.modalHeader).should(
+            "have.text",
+            groupsText.cantCreatePermissionModalHeader
+        );
+        cy.get(groupsSelector.modalMessage).should(
+            "have.text",
+            groupsText.cantCreatePermissionModalMessage
+        );
+
+        cy.get(".item-list").contains(data.email);
+        cy.get(commonSelectors.closeButton).click();
+
+        // Role transition
+        cy.get(groupsSelector.permissionsLink).click();
+        cy.get(groupsSelector.appsCreateCheck).check();
+        cy.get(groupsSelector.confimButton).click();
+        permissions.forEach((permission) => {
+            cy.get(permission).check();
+        });
+        cy.get(groupsSelector.groupLink("Builder")).click();
+        cy.get(groupsSelector.usersLink).click();
+        cy.get(`[data-cy="${data.email}-user-row"]`).should("be.visible");
+        cy.apiLogout();
+        cy.apiLogin(data.email);
+        cy.visit(data.workspaceSlug);
+
+        verifyBuilderPermissions(
+            data.appName,
+            data.folderName,
+            data.firstName,
+            data.appName
+        );
+
+        cy.apiLogout();
+
+        cy.apiLogin();
+        cy.visit(data.workspaceSlug);
+
+        // Reset permissions
+        cy.apiDeleteGranularPermission("builder", []);
+        cy.apiDeleteGranularPermission(groupName, []);
+        cy.apiCreateApp(data.appName);
+
+        cy.ifEnv("Enterprise", () => {
+            cy.apiCreateWorkflow(workflowName1);
+            cy.apiCreateGDS(
+                `${Cypress.env("server_host")}/api/data-sources`,
+                datasourceName1,
+                "restapi",
+                [{ key: "url", value: "https://jsonplaceholder.typicode.com/users" }]
+            );
+        });
+
+        cy.apiLogout();
+        cy.apiLogin(data.email);
+        cy.visit(data.workspaceSlug);
+
+        cy.get(commonSelectors.appCreateButton).should("be.enabled");
+        cy.get(commonSelectors.appCard(data.appName)).should("not.exist");
+
+        cy.ifEnv("Enterprise", () => {
+            cy.get(commonSelectors.globalWorkFlowsIcon).click();
+            cy.get('[data-cy="create-new-workflows-button"]').should("exist");
+            cy.get(commonSelectors.appCard(workflowName1)).should("not.exist");
+
+            cy.get(commonSelectors.globalDataSourceIcon).click();
+            cy.get(
+                dataSourceSelector.dataSourceNameButton(datasourceName1)
+            ).should("not.exist");
+            cy.get(dataSourceSelector.commonDsLabelAndCount).click();
+            cy.get('[data-cy="rest-api-add-button"]').should("be.enabled");
+        });
+    });
+});
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/permissions.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/permissions.cy.js
index 76eecab280..8257cc86bd 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/permissions.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/permissions.cy.js
@@ -1,37 +1,30 @@
 import { fake } from "Fixtures/fake";
-import { commonSelectors, commonWidgetSelector } from "Selectors/common";
+import { commonSelectors } from "Selectors/common";
 import {
     exportAppModalSelectors,
     importSelectors,
 } from "Selectors/exportImport";
 import { groupsSelector } from "Selectors/manageGroups";
-import { workspaceConstantsSelectors } from "Selectors/workspaceConstants";
 import {
-    createFolder,
-    deleteFolder,
     logout,
     navigateToManageGroups,
     navigateToManageUsers,
-    releaseApp,
     selectAppCardOption,
 } from "Support/utils/common";
 import {
-    createGroupsAndAddUserInGroup,
     inviteUserBasedOnRole,
     setupAndUpdateRole,
     setupWorkspaceAndInviteUser,
     updateRole,
-    verifyBasicPermissions,
-    verifySettingsAccess,
-    verifyUserPrivileges,
+    verifyUserPrivileges
 } from "Support/utils/manageGroups";
-import { addAndVerifyConstants } from "Support/utils/workspaceConstants";
 import { commonText } from "Texts/common";
 import { exportAppModalText, importText } from "Texts/exportImport";
 import { groupsText } from "Texts/manageGroups";
 
 describe("Manage Groups", () => {
     let data = {};
+    const isEnterprise = Cypress.env("environment") === "Enterprise";
 
     before(() => {
         cy.exec("mkdir -p ./cypress/downloads/");
@@ -52,6 +45,8 @@ describe("Manage Groups", () => {
         cy.defaultWorkspaceLogin();
         cy.intercept("DELETE", "/api/folders/*").as("folderDeleted");
         cy.skipWalkthrough();
+        cy.viewport(2400, 2000);
+
     });
 
     it("should verify the last active admin role update protection", () => {
@@ -89,215 +84,6 @@ describe("Manage Groups", () => {
         cy.get(commonSelectors.closeButton).click();
     });
 
-    it("should verify user privileges in custom groups", () => {
-        const groupName = fake.firstName.replace(/[^A-Za-z]/g, "");
-        const appName2 = fake.companyName;
-        const appName3 = fake.companyName;
-        const appSlug = appName3.toLowerCase().replace(/\s+/g, "-");
-
-        setupWorkspaceAndInviteUser(
-            data.workspaceName,
-            data.workspaceSlug,
-            data.firstName,
-            data.email
-        );
-        cy.apiLogout();
-
-        // Setup custom group
-        cy.apiLogin();
-        cy.visit(data.workspaceSlug);
-        navigateToManageGroups();
-        cy.get(groupsSelector.groupLink("Builder")).click();
-        cy.get(groupsSelector.permissionsLink).click();
-        cy.get(groupsSelector.appsCreateCheck).uncheck();
-        cy.get(groupsSelector.appsDeleteCheck).uncheck();
-        cy.get(groupsSelector.foldersCreateCheck).uncheck();
-        cy.get(groupsSelector.workspaceVarCheckbox).uncheck();
-
-        createGroupsAndAddUserInGroup(groupName, data.email);
-
-        // Permission configuration and verification
-        cy.get(groupsSelector.permissionsLink).click();
-
-        // App creation permission
-        cy.get(groupsSelector.appsCreateCheck).check();
-        cy.get(commonSelectors.defaultModalTitle).contains(
-            groupsText.changeUserRoleHeader
-        );
-        cy.get(groupsSelector.changeRoleModalMessage).contains(
-            groupsText.changeUserRoleMessage
-        );
-        cy.get(".item-list").contains(data.email);
-        cy.get(groupsSelector.confimButton).should(
-            "have.text",
-            groupsText.continueButtonText
-        );
-        cy.get(commonSelectors.cancelButton).click();
-
-        // Other permissions
-        const permissions = [
-            groupsSelector.appsDeleteCheck,
-            groupsSelector.foldersCreateCheck,
-            groupsSelector.workspaceVarCheckbox,
-        ];
-
-        permissions.forEach((permission) => {
-            cy.get(permission).check();
-            cy.get(".modal-content").should("be.visible");
-            cy.get(commonSelectors.cancelButton).click();
-        });
-
-        // Granular permissions
-        cy.get(groupsSelector.granularLink).click();
-        cy.get(groupsSelector.addAppButton).click();
-        cy.clearAndType(groupsSelector.permissionNameInput, data.firstName);
-        cy.get(groupsSelector.editPermissionRadio).click();
-        cy.get(groupsSelector.confimButton).click();
-
-        // Verify modal
-        cy.get(".modal-content").should("be.visible");
-        cy.get(groupsSelector.modalHeader).should(
-            "have.text",
-            groupsText.cantCreatePermissionModalHeader
-        );
-        cy.get(groupsSelector.modalMessage).should(
-            "have.text",
-            groupsText.cantCreatePermissionModalMessage
-        );
-
-        cy.get(".item-list").contains(data.email);
-        cy.get(commonSelectors.closeButton).click();
-
-        // Role transition
-        cy.get(groupsSelector.permissionsLink).click();
-        cy.get(groupsSelector.appsCreateCheck).check();
-        cy.get(groupsSelector.confimButton).click();
-        permissions.forEach((permission) => {
-            cy.get(permission).check();
-        });
-        cy.get(groupsSelector.groupLink("Builder")).click();
-        cy.get(groupsSelector.usersLink).click();
-        cy.get(`[data-cy="${data.email}-user-row"]`).should("be.visible");
-        cy.apiLogout();
-        cy.apiLogin(data.email);
-        cy.visit(data.workspaceSlug);
-
-        // Verify builder permissions
-        verifyBasicPermissions(true);
-
-        // App operations
-        cy.createApp(data.appName);
-        // cy.verifyToastMessage(
-        //     commonSelectors.toastMessage,
-        //     commonText.appCreatedToast
-        // );
-        cy.backToApps();
-
-        cy.wait(2500);
-        cy.deleteApp(data.appName);
-
-
-        // Folder operations
-        createFolder(data.folderName);
-        deleteFolder(data.folderName);
-
-        // Constants management
-        cy.get(commonSelectors.workspaceConstantsIcon).click();
-        addAndVerifyConstants(data.firstName, data.appName);
-        cy.get(
-            workspaceConstantsSelectors.constDeleteButton(data.firstName)
-        ).click();
-        cy.get(commonSelectors.yesButton).click();
-
-        verifySettingsAccess(false);
-        cy.get(commonSelectors.settingsIcon).click();
-        cy.wait(500);
-        cy.apiLogout();
-
-        cy.apiLogin();
-        cy.visit(data.workspaceSlug);
-        navigateToManageGroups();
-        cy.get(groupsSelector.groupLink(groupName)).click();
-
-        cy.get(groupsSelector.permissionsLink).click();
-        cy.get(groupsSelector.appsCreateCheck).uncheck();
-        permissions.forEach((permission) => {
-            cy.get(permission).uncheck();
-        });
-
-        cy.wait(2000);
-        cy.get(groupsSelector.groupLink("Builder")).click();
-        cy.get(groupsSelector.granularLink).click();
-        cy.wait(2000);
-        cy.get(groupsSelector.granularAccessPermission)
-            .trigger("mouseenter")
-            .click({ force: true });
-        cy.get(groupsSelector.deletePermissionIcon).click();
-        cy.get(groupsSelector.yesButton).click();
-
-        // Create test apps
-        cy.get(commonSelectors.homePageLogo).click();
-        cy.apiCreateApp(data.appName);
-        cy.apiCreateApp(appName2);
-
-        // App Hide from dashboard
-        cy.apiCreateApp(appName3);
-        cy.openApp();
-        cy.apiAddComponentToApp(appName3, "text1");
-        releaseApp();
-        cy.get(commonWidgetSelector.shareAppButton).click();
-        cy.clearAndType(commonWidgetSelector.appNameSlugInput, `${appSlug}`);
-        cy.wait(500);
-        cy.get(commonWidgetSelector.modalCloseButton).click();
-        cy.backToApps();
-
-        // Configure app permissions
-        navigateToManageGroups();
-        cy.get(groupsSelector.groupLink(groupName)).click();
-        cy.get(groupsSelector.granularLink).click();
-
-        // Setup permissions for both apps
-        [data.appName, appName2, appName3].forEach((app) => {
-            cy.get(groupsSelector.addAppButton).click();
-            cy.clearAndType(groupsSelector.permissionNameInput, app);
-            cy.get(groupsSelector.customradio).check();
-            cy.get(".css-1gfides").click({ force: true }).type(`${app}{enter}`);
-            cy.get(groupsSelector.confimButton).click({ force: true });
-            cy.verifyToastMessage(
-                commonSelectors.toastMessage,
-                groupsText.createPermissionToast
-            );
-        });
-        cy.get(groupsSelector.groupChip).contains(data.appName).click();
-        cy.get(groupsSelector.editPermissionRadio).click();
-        cy.get(groupsSelector.confimButton).click();
-
-        //To hide app
-        cy.get(groupsSelector.groupChip).contains(appName3).click();
-        cy.get(groupsSelector.hidePermissionInput).check();
-        cy.get(groupsSelector.confimButton).click();
-
-        // Verify as end user
-        cy.wait(1000);
-        cy.apiLogout()
-        cy.apiLogin(data.email);
-        cy.visit(data.workspaceSlug);
-
-        cy.get('.appcard-buttons-wrap [data-cy="edit-button"]').should(
-            "have.lengthOf",
-            1
-        );
-        cy.get('.appcard-buttons-wrap [data-cy="launch-button"]').should(
-            "have.lengthOf",
-            2
-        );
-
-        //Visit hidden app url
-        cy.visitSlug({
-            actualUrl: `${Cypress.config("baseUrl")}/applications/${appSlug}`,
-        });
-    });
-
     it("should verify user role updating sequence", () => {
         const roleUpdateSequence = [
             {
@@ -407,7 +193,7 @@ describe("Manage Groups", () => {
         });
     });
 
-    it("should verify query creation and import access for Builders and Admin", () => {
+    it.skip("should verify query creation and import access for Builders and Admin", () => {
         const firstName2 = fake.firstName;
         const email2 = fake.email.toLowerCase().replaceAll("[^A-Za-z]", "");
         const workspaceName2 = fake.firstName
@@ -454,7 +240,7 @@ describe("Manage Groups", () => {
         cy.wait(500);
 
         cy.apiCreateGDS(
-            `${Cypress.env('server_host')}/api/data-sources`,
+            `${Cypress.env("server_host")}/api/data-sources`,
             `cypress-${data.dsName}-qc-postgresql`,
             "postgresql",
             [
@@ -479,21 +265,21 @@ describe("Manage Groups", () => {
         //Create and run postgres query in the app
         // Need to enable once bug is fixed
         /*
-            
-    
-            addQuery(
-                "table_preview",
-                `SELECT * FROM persons;`,
-                `cypress-${data.dsName1}-postgresql`
-            );
-    
-            cy.get('[data-cy="list-query-table_preview"]').verifyVisibleElement(
-                "have.text",
-                "table_preview "
-            );
-            cy.get(dataSourceSelector.queryCreateAndRunButton).click();
-            verifyValueOnInspector("table_preview", "7 items ");
-            */
+                        
+                
+                        addQuery(
+                            "table_preview",
+                            `SELECT * FROM persons;`,
+                            `cypress-${data.dsName1}-postgresql`
+                        );
+                
+                        cy.get('[data-cy="list-query-table_preview"]').verifyVisibleElement(
+                            "have.text",
+                            "table_preview "
+                        );
+                        cy.get(dataSourceSelector.queryCreateAndRunButton).click();
+                        verifyValueOnInspector("table_preview", "7 items ");
+                        */
 
         cy.backToApps();
 
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/firstUser/firstUserOnboarding.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/firstUser/firstUserOnboarding.cy.js
index 3cdda33212..df4e5d0b50 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/firstUser/firstUserOnboarding.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/firstUser/firstUserOnboarding.cy.js
@@ -1,15 +1,15 @@
-import { commonSelectors } from "Selectors/common";
-import { commonText } from "Texts/common";
+import { commonSelectors, commonWidgetSelector } from "Selectors/common";
 import { onboardingSelectors } from "Selectors/onboarding";
-import { onboardingText } from "Texts/onboarding";
 import { logout } from "Support/utils/common";
 import {
   bannerElementsVerification,
   onboardingStepOne,
-  onboardingStepTwo,
   onboardingStepThree,
+  onboardingStepTwo,
 } from "Support/utils/onboarding";
 import { updateLicense } from "Support/utils/platform/eeCommon";
+import { commonText } from "Texts/common";
+import { onboardingText } from "Texts/onboarding";
 
 describe("Self host onboarding", () => {
   const envVar = Cypress.env("environment");
@@ -82,21 +82,10 @@ describe("Self host onboarding", () => {
       cy.get(check.selector).verifyVisibleElement("have.text", check.text);
     });
 
-    cy.ifEnv("Community", () => {
-      cy.get(commonSelectors.signUpTermsHelperText).should(($el) => {
-        expect($el.contents().first().text().trim()).to.eq(
-          // commonText.selfHostSignUpTermsHelperText
-          "By signing up you are agreeing to the"
-        );
-      });
-    });
-
-    cy.ifEnv("Enterprise", () => {
-      cy.get(commonSelectors.signUpTermsHelperText).should(($el) => {
-        expect($el.contents().first().text().trim()).to.eq(
-          "By signing up you are agreeing to the"
-        );
-      });
+    cy.get(commonSelectors.signUpTermsHelperText).should(($el) => {
+      expect($el.contents().first().text().trim()).to.eq(
+        "By signing up you are agreeing to the"
+      );
     });
 
     const links = [
@@ -272,8 +261,9 @@ describe("Self host onboarding", () => {
       onboardingStepThree();
     });
 
-    // cy.get(commonSelectors.skipbutton).click();
-    cy.backToApps();
+    cy.wait(2000);
+    cy.get(commonWidgetSelector.previewButton).eq(1).should("be.visible");
+    cy.go("back");
 
     logout();
     cy.appUILogin();
diff --git a/cypress-tests/cypress/support/utils/apps.js b/cypress-tests/cypress/support/utils/apps.js
index 4041c3ce46..01bae4f42a 100644
--- a/cypress-tests/cypress/support/utils/apps.js
+++ b/cypress-tests/cypress/support/utils/apps.js
@@ -1,4 +1,4 @@
-import { commonSelectors, commonWidgetSelector } from "Selectors/common";
+import { commonWidgetSelector } from "Selectors/common";
 import { appPromote } from "Support/utils/platform/multiEnv";
 
 const slugValidations = [
diff --git a/cypress-tests/cypress/support/utils/common.js b/cypress-tests/cypress/support/utils/common.js
index bd461ec006..89233859f8 100644
--- a/cypress-tests/cypress/support/utils/common.js
+++ b/cypress-tests/cypress/support/utils/common.js
@@ -109,7 +109,6 @@ export const viewAppCardOptions = (appName) => {
 };
 
 export const viewFolderCardOptions = (folderName) => {
-  cy.reloadAppForTheElement(folderName);
   cy.get(commonSelectors.folderListcard(folderName))
     .parent()
     .within(() => {
diff --git a/cypress-tests/cypress/support/utils/dashboard.js b/cypress-tests/cypress/support/utils/dashboard.js
index dbc090735b..0133ca2c3a 100644
--- a/cypress-tests/cypress/support/utils/dashboard.js
+++ b/cypress-tests/cypress/support/utils/dashboard.js
@@ -1,13 +1,13 @@
 import { commonSelectors } from "Selectors/common";
 import { dashboardSelector } from "Selectors/dashboard";
-import { dashboardText } from "Texts/dashboard";
-import { commonText } from "Texts/common";
 import {
-  viewAppCardOptions,
-  verifyModal,
-  closeModal,
   cancelModal,
+  closeModal,
+  verifyModal,
+  viewAppCardOptions,
 } from "Support/utils/common";
+import { commonText } from "Texts/common";
+import { dashboardText } from "Texts/dashboard";
 
 export const modifyAndVerifyAppCardIcon = (appName) => {
   var random = function (obj) {
diff --git a/cypress-tests/cypress/support/utils/dataSource.js b/cypress-tests/cypress/support/utils/dataSource.js
index 3238661dd0..020e46a735 100644
--- a/cypress-tests/cypress/support/utils/dataSource.js
+++ b/cypress-tests/cypress/support/utils/dataSource.js
@@ -1,10 +1,9 @@
-import { postgreSqlSelector } from "Selectors/postgreSql";
-import { postgreSqlText } from "Texts/postgreSql";
-import { cyParamName } from "Selectors/common";
-import { commonSelectors } from "Selectors/common";
+import { commonSelectors, cyParamName } from "Selectors/common";
 import { dataSourceSelector } from "Selectors/dataSource";
+import { postgreSqlSelector } from "Selectors/postgreSql";
 import { navigateToAppEditor } from "Support/utils/common";
 import { verifyAppDelete } from "Support/utils/dashboard";
+import { postgreSqlText } from "Texts/postgreSql";
 
 export const verifyCouldnotConnectWithAlert = (alertText) => {
   cy.get(postgreSqlSelector.connectionFailedText, {
diff --git a/cypress-tests/cypress/support/utils/exportImport.js b/cypress-tests/cypress/support/utils/exportImport.js
index 552cebdf1d..432a677f51 100644
--- a/cypress-tests/cypress/support/utils/exportImport.js
+++ b/cypress-tests/cypress/support/utils/exportImport.js
@@ -1,12 +1,11 @@
+import { commonSelectors } from "Selectors/common";
 import {
   appVersionSelectors,
   exportAppModalSelectors,
   importSelectors,
 } from "Selectors/exportImport";
-import { exportAppModalText, appVersionText } from "Texts/exportImport";
-import { commonSelectors } from "Selectors/common";
-import { verifyModal, commonWidgetSelector } from "Support/utils/common";
-import { importText } from "Texts/exportImport";
+import { verifyModal } from "Support/utils/common";
+import { appVersionText, exportAppModalText, importText } from "Texts/exportImport";
 
 export const verifyElementsOfExportModal = (
   currentVersionName,
diff --git a/cypress-tests/cypress/support/utils/manageGroups.js b/cypress-tests/cypress/support/utils/manageGroups.js
index ff93409568..5142637780 100644
--- a/cypress-tests/cypress/support/utils/manageGroups.js
+++ b/cypress-tests/cypress/support/utils/manageGroups.js
@@ -897,24 +897,7 @@ export const inviteUserBasedOnRole = (firstName, email, role = "end-user") => {
   cy.get(commonSelectors.dashboardIcon).click();
 };
 
-export const verifyBasicPermissions = (canCreate = true) => {
-  cy.get(commonSelectors.dashboardAppCreateButton).should(
-    canCreate ? "be.enabled" : "be.disabled"
-  );
-  cy.get(commonSelectors.createNewFolderButton).should(
-    canCreate ? "exist" : "not.exist"
-  );
-  cy.get('[data-cy="database-icon"]').should(canCreate ? "exist" : "not.exist");
-  cy.get(commonSelectors.workspaceConstantsIcon).should(
-    canCreate ? "exist" : "not.exist"
-  );
 
-  cy.ifEnv("Enterprise", () => {
-    cy.get(commonSelectors.globalDataSourceIcon).should(
-      canCreate ? "exist" : "not.exist"
-    );
-  });
-};
 
 export const setupWorkspaceAndInviteUser = (
   workspaceName,
@@ -934,12 +917,7 @@ export const setupWorkspaceAndInviteUser = (
   cy.wait(2000);
 };
 
-export const verifySettingsAccess = (shouldExist = true) => {
-  cy.get(commonSelectors.settingsIcon).click();
-  cy.get(commonSelectors.workspaceSettings).should(
-    shouldExist ? "exist" : "not.exist"
-  );
-};
+
 
 export const verifyUserPrivileges = (
   expectedButtonState,
@@ -974,3 +952,4 @@ export const verifyUserRole = (userIdAlias, expectedRole, expectedGroups) => {
     });
   });
 };
+
diff --git a/cypress-tests/cypress/support/utils/manageSSO.js b/cypress-tests/cypress/support/utils/manageSSO.js
index 3a793f16db..9270d1293f 100644
--- a/cypress-tests/cypress/support/utils/manageSSO.js
+++ b/cypress-tests/cypress/support/utils/manageSSO.js
@@ -1,8 +1,8 @@
 import { commonSelectors, cyParamName } from "Selectors/common";
 import { ssoSelector } from "Selectors/manageSSO";
-import { ssoText } from "Texts/manageSSO";
 import * as common from "Support/utils/common";
 import { commonText } from "Texts/common";
+import { ssoText } from "Texts/manageSSO";
 
 export const generalSettings = () => {
   cy.get(ssoSelector.enableSignUpToggle).check();
diff --git a/cypress-tests/cypress/support/utils/manageUsers.js b/cypress-tests/cypress/support/utils/manageUsers.js
index 4212891e90..b52f4cefc0 100644
--- a/cypress-tests/cypress/support/utils/manageUsers.js
+++ b/cypress-tests/cypress/support/utils/manageUsers.js
@@ -1,13 +1,13 @@
 import { commonSelectors, cyParamName } from "Selectors/common";
-import { usersText } from "Texts/manageUsers";
-import { usersSelector } from "Selectors/manageUsers";
 import { ssoSelector } from "Selectors/manageSSO";
-import { ssoText } from "Texts/manageSSO";
-import * as common from "Support/utils/common";
-import { commonText } from "Texts/common";
+import { usersSelector } from "Selectors/manageUsers";
 import { onboardingSelectors } from "Selectors/onboarding";
-const envVar = Cypress.env("environment");
+import * as common from "Support/utils/common";
 import { fillInputField } from "Support/utils/common";
+import { commonText } from "Texts/common";
+import { ssoText } from "Texts/manageSSO";
+import { usersText } from "Texts/manageUsers";
+const envVar = Cypress.env("environment");
 
 export const manageUsersElements = () => {
   cy.get(
diff --git a/cypress-tests/cypress/support/utils/onboarding.js b/cypress-tests/cypress/support/utils/onboarding.js
index 05ad350b6a..d8599c7166 100644
--- a/cypress-tests/cypress/support/utils/onboarding.js
+++ b/cypress-tests/cypress/support/utils/onboarding.js
@@ -1,15 +1,10 @@
 import { commonSelectors } from "Selectors/common";
-import { commonText } from "Texts/common";
-import { dashboardText } from "Texts/dashboard";
-import {
-  verifyandModifyUserRole,
-  verifyandModifySizeOftheCompany,
-} from "Support/utils/selfHostSignUp";
-import { navigateToManageUsers, logout } from "Support/utils/common";
 import { ssoSelector } from "Selectors/manageSSO";
-import { ssoText } from "Texts/manageSSO";
 import { onboardingSelectors } from "Selectors/onboarding";
+import { logout, navigateToManageUsers } from "Support/utils/common";
 import { fetchAndVisitInviteLink } from "Support/utils/manageUsers";
+import { commonText } from "Texts/common";
+import { ssoText } from "Texts/manageSSO";
 import { onboardingText } from "Texts/onboarding";
 
 export const verifyConfirmEmailPage = (email) => {
diff --git a/cypress-tests/cypress/support/utils/uiPermissions.js b/cypress-tests/cypress/support/utils/uiPermissions.js
new file mode 100644
index 0000000000..9f1c1fd9fc
--- /dev/null
+++ b/cypress-tests/cypress/support/utils/uiPermissions.js
@@ -0,0 +1,270 @@
+import { commonSelectors } from "Selectors/common";
+import { workflowSelector } from "Selectors/workflows";
+import { deleteFolder } from "Support/utils/common";
+import {
+  addAndVerifyConstants,
+  deleteConstant,
+} from "Support/utils/workspaceConstants";
+import { commonText } from "Texts/common";
+
+export const uiCreateApp = (appName) => {
+  cy.createApp(appName);
+  cy.wait(2000);
+  cy.go("back");
+};
+
+export const uiVerifyAppCreated = (appName, shouldExist = true) => {
+  const assertion = shouldExist ? "exist" : "not.exist";
+  cy.get(commonSelectors.appCard(appName)).should(assertion);
+};
+
+export const uiDeleteApp = (appName) => {
+  cy.deleteApp(appName);
+};
+
+export const uiVerifyAppDeleted = (appName) => {
+  cy.get(commonSelectors.appCard(appName)).should("not.exist");
+};
+
+export const uiVerifyAppCreatePrivilege = (hasPrivilege = true) => {
+  const assertion = hasPrivilege ? "be.enabled" : "be.disabled";
+  cy.get(commonSelectors.dashboardAppCreateButton).should(assertion);
+};
+
+export const uiCreateFolder = (folderName) => {
+  cy.get(commonSelectors.createNewFolderButton).click();
+  cy.clearAndType(commonSelectors.folderNameInput, folderName);
+  cy.get(commonSelectors.createFolderButton).click();
+};
+
+export const uiVerifyFolderCreated = (folderName) => {
+  cy.get(commonSelectors.folderListcard(folderName)).should("exist");
+};
+
+export const uiVerifyFolderDeleted = (folderName) => {
+  cy.verifyToastMessage(
+    commonSelectors.toastMessage,
+    commonText.folderDeletedToast
+  );
+  cy.get(commonSelectors.folderListcard(folderName)).should("not.exist");
+};
+
+export const uiVerifyFolderCreatePrivilege = (hasPrivilege = true) => {
+  const assertion = hasPrivilege ? "exist" : "not.exist";
+  cy.get(commonSelectors.createNewFolderButton).should(assertion);
+};
+
+// WORKSPACE CONSTANTS UI OPERATIONS
+
+export const uiVerifyWorkspaceConstantCreatePrivilege = (
+  hasPrivilege = true
+) => {
+  const assertion = hasPrivilege ? "exist" : "not.exist";
+  cy.get(commonSelectors.workspaceConstantsIcon).should(assertion);
+};
+
+// DATASOURCE UI OPERATIONS (Enterprise)
+
+export const uiCreateDataSource = (
+  datasourceName,
+  datasourceType = "restapi"
+) => {
+  cy.get(commonSelectors.globalDataSourceIcon).click();
+  // cy.get(commonSelectors.addNewDataSourceButton).click();
+  cy.get('[data-cy="rest-api-add-button"]').eq(0).click({ force: true });
+};
+
+export const uiVerifyDataSourceCreated = (datasourceName) => {
+  cy.verifyToastMessage(commonSelectors.toastMessage, "Data Source Added");
+  cy.get('[data-cy="restapi-button"]').should("exist");
+};
+
+export const uiDeleteDataSource = (datasourceName) => {
+  cy.get('[data-cy="restapi-delete-button"]').click({ force: true });
+  cy.get(commonSelectors.yesButton).click();
+};
+
+export const uiVerifyDataSourceDeleted = (datasourceName) => {
+  cy.verifyToastMessage(commonSelectors.toastMessage, "Data Source Deleted");
+  cy.get('[data-cy="restapi-button"]').should("not.exist");
+};
+
+export const uiVerifyDataSourceCreatePrivilege = (hasPrivilege = true) => {
+  const assertion = hasPrivilege ? "exist" : "not.exist";
+  cy.get(commonSelectors.globalDataSourceIcon).should(assertion);
+};
+
+// WORKFLOW UI OPERATIONS (Enterprise)
+
+export const uiCreateWorkflow = (workflowName) => {
+  cy.get(workflowSelector.globalWorkFlowsIcon).click();
+
+  cy.get('[data-cy="button-new-workflow-from-scratch"]').click();
+  cy.get(workflowSelector.workFlowNameInputField).type(workflowName);
+  cy.get(workflowSelector.createWorkFlowsButton).click();
+  cy.wait(2000);
+  cy.go("back");
+};
+
+export const uiVerifyWorkflowCreated = (workflowName) => {
+  cy.get(commonSelectors.globalWorkFlowsIcon).click();
+  cy.get(`[data-cy="${workflowName.toLowerCase()}-card"]`)
+    .contains(workflowName)
+    .should("exist");
+};
+
+export const uiDeleteWorkflow = () => {
+  cy.get(".homepage-app-card .home-app-card-header .menu-ico").then(($el) => {
+    $el[0].style.setProperty("visibility", "visible", "important");
+  });
+
+  cy.get('[data-cy="app-card-menu-icon"]').click();
+  cy.get(workflowSelector.deleteWorkFlowOption).click();
+  cy.get(commonSelectors.buttonSelector(commonText.modalYesButton)).click();
+};
+
+export const uiVerifyWorkflowDeleted = (workflowName) => {
+  cy.get(`[data-cy="${workflowName.toLowerCase()}-card"]`).should("not.exist");
+};
+
+export const uiVerifyWorkflowCreatePrivilege = (hasPrivilege = true) => {
+  const assertion = hasPrivilege ? "exist" : "not.exist";
+  cy.get(commonSelectors.globalWorkFlowsIcon).should(assertion);
+};
+
+// COMPREHENSIVE PERMISSION VERIFICATIONS
+
+export const uiVerifyAllCreatePrivileges = (
+  hasAppCreate = true,
+  hasFolderCreate = true,
+  hasConstantCreate = true,
+  hasDataSourceCreate = true,
+  hasWorkflowCreate = true
+) => {
+  uiVerifyAppCreatePrivilege(hasAppCreate);
+  uiVerifyFolderCreatePrivilege(hasFolderCreate);
+  uiVerifyWorkspaceConstantCreatePrivilege(hasConstantCreate);
+
+  cy.ifEnv("Enterprise", () => {
+    uiVerifyDataSourceCreatePrivilege(hasDataSourceCreate);
+    uiVerifyWorkflowCreatePrivilege(hasWorkflowCreate);
+  });
+};
+
+export const uiVerifyBuilderPrivileges = () => {
+  uiVerifyAllCreatePrivileges(true, true, true, true, true);
+};
+
+export const uiVerifyAdminPrivileges = () => {
+  uiVerifyAllCreatePrivileges(true, true, true, true, true);
+
+  // Verify settings access
+  cy.get(commonSelectors.settingsIcon).click();
+  cy.get(commonSelectors.workspaceSettings).should("exist");
+  cy.get(commonSelectors.dashboardIcon).click();
+};
+
+export const uiVerifyEndUserPrivileges = () => {
+  uiVerifyAllCreatePrivileges(false, false, false, false, false);
+
+  // Verify no settings access
+  cy.get(commonSelectors.settingsIcon).click();
+  cy.get(commonSelectors.workspaceSettings).should("not.exist");
+};
+
+// COMPREHENSIVE CRUD WORKFLOWS
+
+export const uiAppCRUDWorkflow = (appName) => {
+  // Create
+  uiCreateApp(appName);
+  uiVerifyAppCreated(appName, true);
+
+  // Delete
+  uiDeleteApp(appName);
+  uiVerifyAppDeleted(appName);
+};
+
+export const uiFolderCRUDWorkflow = (folderName) => {
+  // Create
+  uiCreateFolder(folderName);
+  uiVerifyFolderCreated(folderName);
+
+  // Delete
+  deleteFolder(folderName);
+  uiVerifyFolderDeleted(folderName);
+};
+
+export const uiWorkspaceConstantCRUDWorkflow = (
+  constantName,
+  constantValue
+) => {
+  // Create
+  cy.get(commonSelectors.workspaceConstantsIcon).click();
+
+  addAndVerifyConstants(constantName, constantValue);
+
+  // Delete
+  deleteConstant(constantName);
+
+  // Close workspace constants panel
+  cy.get(commonSelectors.dashboardIcon).click();
+};
+
+export const uiDataSourceCRUDWorkflow = (
+  datasourceName,
+  datasourceType = "restapi"
+) => {
+  cy.ifEnv("Enterprise", () => {
+    // Create
+    uiCreateDataSource(datasourceName, datasourceType);
+    uiVerifyDataSourceCreated(datasourceName);
+
+    // Delete
+    uiDeleteDataSource(datasourceName);
+    uiVerifyDataSourceDeleted(datasourceName);
+
+    // Go back to dashboard
+    cy.get(commonSelectors.dashboardIcon).click();
+  });
+};
+
+export const uiWorkflowCRUDWorkflow = (workflowName) => {
+  cy.ifEnv("Enterprise", () => {
+    // Create
+    uiCreateWorkflow(workflowName);
+    uiVerifyWorkflowCreated(workflowName);
+
+    // Delete
+    uiDeleteWorkflow();
+    uiVerifyWorkflowDeleted(workflowName);
+  });
+};
+
+export const uiPerformAllCRUDOperations = (
+  appName,
+  folderName,
+  constantName,
+  constantValue,
+  datasourceName = null,
+  workflowName = null
+) => {
+  // App CRUD
+  uiAppCRUDWorkflow(appName);
+
+  // Folder CRUD
+  uiFolderCRUDWorkflow(folderName);
+
+  // Workspace Constant CRUD
+  uiWorkspaceConstantCRUDWorkflow(constantName, constantValue);
+
+  // Enterprise features
+  cy.ifEnv("Enterprise", () => {
+    if (datasourceName) {
+      uiDataSourceCRUDWorkflow(datasourceName);
+    }
+
+    if (workflowName) {
+      uiWorkflowCRUDWorkflow(workflowName);
+    }
+  });
+};
diff --git a/cypress-tests/cypress/support/utils/userPermissions.js b/cypress-tests/cypress/support/utils/userPermissions.js
index 0058312120..6c8ed6933f 100644
--- a/cypress-tests/cypress/support/utils/userPermissions.js
+++ b/cypress-tests/cypress/support/utils/userPermissions.js
@@ -1,10 +1,10 @@
 import { commonSelectors } from "Selectors/common";
-import { commonText } from "Texts/common";
 import { workspaceConstantsSelectors } from "Selectors/workspaceConstants";
 import { createFolder, deleteFolder } from "Support/utils/common";
 import { addAndVerifyConstants } from "Support/utils/workspaceConstants";
+import { commonText } from "Texts/common";
 
-const appOperations = {
+export const appOperations = {
   createApp: (appName) => {
     cy.createApp(appName);
     cy.backToApps();
@@ -26,7 +26,7 @@ const appOperations = {
   },
 };
 
-const folderOperations = {
+export const folderOperations = {
   createFolder: (folderName) => {
     createFolder(folderName);
   },
@@ -36,7 +36,7 @@ const folderOperations = {
   },
 };
 
-const constantsOperations = {
+export const constantsOperations = {
   createConstant: (name, value) => {
     cy.get(commonSelectors.workspaceConstantsIcon).click();
     addAndVerifyConstants(name, value);
@@ -49,7 +49,7 @@ const constantsOperations = {
 };
 
 // Permission verification helpers
-const verifyPermissions = {
+export const verifyPermissions = {
   checkAppPermissions: (shouldExist = true) => {
     const assertion = shouldExist ? "exist" : "not.exist";
     cy.get(commonSelectors.appCreateButton).should(assertion);
@@ -74,7 +74,7 @@ const verifyPermissions = {
 };
 
 // Helper function to perform all verifications
-const verifyAllPermissions = (shouldHaveAccess = true) => {
+export const verifyAllPermissions = (shouldHaveAccess = true) => {
   verifyPermissions.checkAppPermissions(shouldHaveAccess);
   verifyPermissions.checkFolderPermissions(shouldHaveAccess);
   verifyPermissions.checkConstantsPermissions(shouldHaveAccess);
@@ -82,7 +82,7 @@ const verifyAllPermissions = (shouldHaveAccess = true) => {
 };
 
 // Role-based permission sets
-const rolePermissions = {
+export const rolePermissions = {
   admin: {
     name: "Admin",
     hasFullAccess: true,
@@ -103,11 +103,93 @@ const rolePermissions = {
   },
 };
 
-export {
-  appOperations,
-  folderOperations,
-  constantsOperations,
-  verifyPermissions,
-  verifyAllPermissions,
-  rolePermissions,
+
+export const getGroupPermissionInput = (isEnterprise, flag) => {
+  return isEnterprise
+    ? {
+      appCreate: flag,
+      appDelete: flag,
+      appPromote: flag,
+      appRelease: flag,
+      workflowCreate: flag,
+      workflowDelete: flag,
+      dataSourceCreate: flag,
+      dataSourceDelete: flag,
+      folderCRUD: flag,
+      orgConstantCRUD: flag,
+    }
+    : {
+      appCreate: flag,
+      appDelete: flag,
+      folderCRUD: flag,
+      orgConstantCRUD: flag,
+    };
+}
+
+
+export const verifyBuilderPermissions = (
+  appName,
+  folderName,
+  constName,
+  constValue,
+  isAdmin = false
+) => {
+  verifyBasicPermissions(true);
+
+  // App operations
+  cy.apiCreateApp(appName);
+  cy.apiDeleteApp();
+
+  // Folder operations
+  cy.apiCreateFolder(folderName);
+  cy.apiDeleteFolder();
+
+  // Constants management
+  cy.get(commonSelectors.workspaceConstantsIcon).click();
+  addAndVerifyConstants(constName, constValue);
+  cy.get(workspaceConstantsSelectors.constDeleteButton(constName)).click();
+  cy.get(commonSelectors.yesButton).click();
+
+  cy.ifEnv("Enterprise", () => {
+    cy.apiCreateGDS(
+      `${Cypress.env("server_host")}/api/data-sources`,
+      appName,
+      "restapi",
+      [{ key: "url", value: "https://jsonplaceholder.typicode.com/users" }]
+    );
+    cy.apiDeleteGDS(appName);
+
+    cy.apiCreateWorkflow(appName);
+    cy.apiDeleteWorkflow(appName);
+
+  })
+
+  verifySettingsAccess(isAdmin);
 };
+
+
+export const verifyBasicPermissions = (canCreate = true) => {
+  cy.get(commonSelectors.dashboardAppCreateButton).should(
+    canCreate ? "be.enabled" : "be.disabled"
+  );
+  cy.get(commonSelectors.createNewFolderButton).should(
+    canCreate ? "exist" : "not.exist"
+  );
+  cy.get('[data-cy="database-icon"]').should(canCreate ? "exist" : "not.exist");
+  cy.get(commonSelectors.workspaceConstantsIcon).should(
+    canCreate ? "exist" : "not.exist"
+  );
+
+  cy.ifEnv("Enterprise", () => {
+    cy.get(commonSelectors.globalDataSourceIcon).should(
+      canCreate ? "exist" : "not.exist"
+    );
+  });
+};
+
+export const verifySettingsAccess = (shouldExist = true) => {
+  cy.get(commonSelectors.settingsIcon).click();
+  cy.get(commonSelectors.workspaceSettings).should(
+    shouldExist ? "exist" : "not.exist"
+  );
+};
\ No newline at end of file
diff --git a/cypress-tests/cypress/support/utils/version.js b/cypress-tests/cypress/support/utils/version.js
index ffb1ad32a0..e8011f299d 100644
--- a/cypress-tests/cypress/support/utils/version.js
+++ b/cypress-tests/cypress/support/utils/version.js
@@ -1,14 +1,13 @@
-import { appVersionText } from "Texts/exportImport";
-import { appVersionSelectors } from "Selectors/exportImport";
 import { commonSelectors, commonWidgetSelector } from "Selectors/common";
-import { commonText } from "Texts/common";
-import { verifyModal, closeModal } from "Support/utils/common";
+import { appVersionSelectors } from "Selectors/exportImport";
 import {
   confirmVersionModalSelectors,
   editVersionSelectors,
 } from "Selectors/version";
+import { closeModal } from "Support/utils/common";
+import { commonText } from "Texts/common";
+import { appVersionText } from "Texts/exportImport";
 import { deleteVersionText, releasedVersionText } from "Texts/version";
-import { verifyComponent } from "Support/utils/basicComponents";
 import { appPromote } from "./platform/multiEnv";
 
 export const navigateToCreateNewVersionModal = (value) => {
diff --git a/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGranularAccess/components/AddResourcePermissionsMenu.jsx b/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGranularAccess/components/AddResourcePermissionsMenu.jsx
index 973418976e..2d961c39d0 100644
--- a/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGranularAccess/components/AddResourcePermissionsMenu.jsx
+++ b/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGranularAccess/components/AddResourcePermissionsMenu.jsx
@@ -4,7 +4,7 @@ import { ButtonSolid } from '@/_ui/AppButton/AppButton';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { RESOURCE_TYPE } from '../../../index';
 
-function AddResourcePermissionsMenu({
+function AddResourcePermissionsMenu ({
   openAddPermissionModal,
   resourcesOptions,
   currentGroupPermission,
@@ -50,6 +50,7 @@ function AddResourcePermissionsMenu({
                   openAddPermissionModal(resource);
                 }}
                 disabled={currentGroupPermission.name === 'end-user' && resource === RESOURCE_TYPE.DATA_SOURCES}
+                data-cy={`add-${resource.toLowerCase()}-button`}
               >
                 <OverlayTrigger
                   key={index}
@@ -80,6 +81,7 @@ function AddResourcePermissionsMenu({
           className="add-icon tj-text-xsm font-weight-600"
           leftIcon="plus"
           disabled={currentGroupPermission.name === 'admin' || isBasicPlan}
+          data-cy="add-permission-button"
         >
           Add permission
         </ButtonSolid>
diff --git a/plugins/package-lock.json b/plugins/package-lock.json
index e478756878..0b1baaba0e 100644
--- a/plugins/package-lock.json
+++ b/plugins/package-lock.json
@@ -20645,4 +20645,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/server/package-lock.json b/server/package-lock.json
index 4954ec2bb3..cd3886929a 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -24234,4 +24234,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file

From d742eaac76b78e5d461ec36f0e0685a50b31d17f Mon Sep 17 00:00:00 2001
From: manishkushare <kushare.manish9@gmail.com>
Date: Fri, 17 Oct 2025 16:58:22 +0530
Subject: [PATCH 075/157] bump: update version to 3.20.23-lts across all
 components

---
 .version          | 2 +-
 frontend/.version | 2 +-
 server/.version   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.version b/.version
index cd5e02fb32..2b6e2d8234 100644
--- a/.version
+++ b/.version
@@ -1 +1 @@
-3.20.22-lts
+3.20.23-lts
diff --git a/frontend/.version b/frontend/.version
index cd5e02fb32..2b6e2d8234 100644
--- a/frontend/.version
+++ b/frontend/.version
@@ -1 +1 @@
-3.20.22-lts
+3.20.23-lts
diff --git a/server/.version b/server/.version
index cd5e02fb32..2b6e2d8234 100644
--- a/server/.version
+++ b/server/.version
@@ -1 +1 @@
-3.20.22-lts
+3.20.23-lts

From ce67ca0c7b696cf05c2c3f368ee832c0cfab23d0 Mon Sep 17 00:00:00 2001
From: emidhun <midhun752@gmail.com>
Date: Fri, 17 Oct 2025 17:31:25 +0530
Subject: [PATCH 076/157] Update platform actions

---
 .github/workflows/cypress-platform.yml | 106 +++++++++++++++++++++++++
 1 file changed, 106 insertions(+)

diff --git a/.github/workflows/cypress-platform.yml b/.github/workflows/cypress-platform.yml
index 9958840934..0a3970533b 100644
--- a/.github/workflows/cypress-platform.yml
+++ b/.github/workflows/cypress-platform.yml
@@ -181,6 +181,112 @@ jobs:
           fi
 
           echo "✅ Server is ready!"
+          
+      - name: Test database connection
+        run: |
+          # Wait for database to be ready
+          echo "Testing database connection..."
+          docker exec Tooljet-postgres psql -U postgres -d tooljet_development -c "SELECT current_database();"
+
+      - name: Create delete_user procedure
+        run: |
+          echo "Creating delete_user stored procedure..."
+          docker exec Tooljet-postgres psql -U postgres -d tooljet_development -c "
+          CREATE OR REPLACE PROCEDURE delete_user(p_email TEXT)
+          LANGUAGE plpgsql
+          AS \$\$
+          DECLARE
+              v_user_id UUID;
+              v_organization_ids UUID[];
+              v_organizations_to_delete UUID[];
+              v_log_message TEXT;
+          BEGIN
+              -- Log start of procedure
+              RAISE NOTICE 'Starting delete_user procedure for email: %', p_email;
+
+              -- Get user_id from email
+              SELECT id INTO v_user_id
+              FROM users
+              WHERE email = p_email;
+
+              IF v_user_id IS NULL THEN
+                  RAISE EXCEPTION 'User with email % not found', p_email;
+              END IF;
+
+              RAISE NOTICE 'User found with id: %', v_user_id;
+
+              -- Get organization_ids for the user
+              SELECT ARRAY_AGG(organization_id) INTO v_organization_ids
+              FROM organization_users
+              WHERE user_id = v_user_id;
+
+              RAISE NOTICE 'Found % organizations for user', COALESCE(ARRAY_LENGTH(v_organization_ids, 1), 0);
+
+              -- Get organizations with exactly one user (to be deleted)
+              SELECT ARRAY_AGG(organization_id) INTO v_organizations_to_delete
+              FROM (
+                  SELECT organization_id
+                  FROM organization_users
+                  WHERE organization_id = ANY(v_organization_ids)
+                  GROUP BY organization_id
+                  HAVING COUNT(*) = 1
+              ) subquery;
+
+              -- Add organizations where the user is the owner
+              v_organizations_to_delete := v_organizations_to_delete;
+
+              RAISE NOTICE 'Found % organizations to delete', COALESCE(ARRAY_LENGTH(v_organizations_to_delete, 1), 0);
+
+              -- Delete apps in organizations to be deleted
+              WITH deleted_apps AS (
+                  DELETE FROM apps
+                  WHERE organization_id = ANY(v_organizations_to_delete)
+                  RETURNING id
+              )
+              SELECT 'Deleted ' || COUNT(*) || ' apps' INTO v_log_message FROM deleted_apps;
+
+              RAISE NOTICE '%', v_log_message;
+
+              -- Delete data_sources in organizations to be deleted
+              WITH deleted_data_sources AS (
+                  DELETE FROM data_sources
+                  WHERE organization_id = ANY(v_organizations_to_delete)
+                  RETURNING id
+              )
+              SELECT 'Deleted ' || COUNT(*) || ' data sources' INTO v_log_message FROM deleted_data_sources;
+
+              RAISE NOTICE '%', v_log_message;
+
+              -- Delete audit_logs for organizations to be deleted and for the user
+              WITH deleted_audit_logs AS (
+                  DELETE FROM audit_logs
+                  WHERE organization_id = ANY(v_organization_ids)
+                  OR user_id = v_user_id
+                  RETURNING id
+              )
+              SELECT 'Deleted ' || COUNT(*) || ' audit logs' INTO v_log_message FROM deleted_audit_logs;
+
+              RAISE NOTICE '%', v_log_message;
+
+              -- Delete organizations
+              WITH deleted_organizations AS (
+                  DELETE FROM organizations
+                  WHERE id = ANY(v_organizations_to_delete)
+                  RETURNING id
+              )
+              SELECT 'Deleted ' || COUNT(*) || ' organizations' INTO v_log_message FROM deleted_organizations;
+
+              RAISE NOTICE '%', v_log_message;
+
+              -- Finally, delete the user
+              DELETE FROM users
+              WHERE id = v_user_id;
+
+              RAISE NOTICE 'Deleted user with id: %', v_user_id;
+              RAISE NOTICE 'User deletion procedure completed successfully for email: %', p_email;
+          END;
+          \$\$;"
+          echo "✅ delete_user procedure created successfully"
 
       - name: Create Cypress environment file
         id: create-json-tj

From 59d57435797ef0a0eac92f0502d09df10a18e9bf Mon Sep 17 00:00:00 2001
From: emidhun <midhun752@gmail.com>
Date: Fri, 17 Oct 2025 17:32:00 +0530
Subject: [PATCH 077/157] Update dnd and minor changes

---
 cypress-tests/cypress/commands/commands.js    | 59 +++++++++++--------
 .../platform/ceTestcases/apps/appExport.cy.js |  9 ++-
 cypress-tests/cypress/support/e2e.js          |  1 +
 cypress-tests/cypress/support/utils/common.js | 10 ++--
 4 files changed, 49 insertions(+), 30 deletions(-)

diff --git a/cypress-tests/cypress/commands/commands.js b/cypress-tests/cypress/commands/commands.js
index fa46f242b1..1128e7fc24 100644
--- a/cypress-tests/cypress/commands/commands.js
+++ b/cypress-tests/cypress/commands/commands.js
@@ -53,9 +53,10 @@ Cypress.Commands.add("waitForAutoSave", () => {
   cy.wait(200);
   cy.get(commonSelectors.autoSave, { timeout: 20000 }).should(
     "have.text",
-    commonText.autoSave,
+    '',
     { timeout: 20000 }
-  );
+  ).find('svg')
+    .should('be.visible', { timeout: 20000 });
 });
 
 Cypress.Commands.add("createApp", (appName) => {
@@ -77,37 +78,47 @@ Cypress.Commands.add(
   "dragAndDropWidget",
   (
     widgetName,
-    positionX = 80,
-    positionY = 80,
+    positionX = 100,
+    positionY = 100,
     widgetName2 = widgetName,
     canvas = commonSelectors.canvas
   ) => {
     const dataTransfer = new DataTransfer();
-    cy.forceClickOnCanvas();
 
-    cy.get("body")
-      .then(($body) => {
-        const isSearchVisible = $body
-          .find(commonSelectors.searchField)
-          .is(":visible");
+    cy.get('[data-cy="right-sidebar-plus-button"]').click();
+    cy.get(commonSelectors.searchField).should('be.visible');
 
-        if (!isSearchVisible) {
-          cy.get('[data-cy="right-sidebar-plus-button"]').click();
-        }
+    cy.get(commonSelectors.searchField).first().clear().type(widgetName);
+    cy.get(commonWidgetSelector.widgetBox(widgetName2)).should('be.visible');
+
+    cy.get(commonWidgetSelector.widgetBox(widgetName2))
+      .trigger('mousedown', { which: 1, button: 0, force: true })
+      .trigger('dragstart', { dataTransfer, force: true });
+
+    cy.get(canvas)
+      .trigger('dragenter', {
+        dataTransfer,
+        clientX: positionX,
+        clientY: positionY,
+        force: true
       })
-      .then(() => {
-        cy.clearAndType(commonSelectors.searchField, widgetName);
+      .trigger('dragover', {
+        dataTransfer,
+        clientX: positionX,
+        clientY: positionY,
+        force: true
       });
 
-    cy.get(commonWidgetSelector.widgetBox(widgetName2)).trigger(
-      "dragstart",
-      { dataTransfer },
-      { force: true }
-    );
-    cy.get(canvas).trigger("drop", positionX, positionY, {
-      dataTransfer,
-      force: true,
-    });
+
+    cy.get(canvas)
+      .trigger('drop', {
+        dataTransfer,
+        clientX: positionX,
+        clientY: positionY,
+        force: true
+      })
+      .trigger('mouseup', { force: true });
+
     cy.waitForAutoSave();
   }
 );
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appExport.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appExport.cy.js
index 2ffe613f72..13f0ae4847 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appExport.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appExport.cy.js
@@ -1,14 +1,16 @@
 import { fake } from "Fixtures/fake";
+
 import { commonSelectors } from "Selectors/common";
 import { importSelectors } from "Selectors/exportImport";
 import { commonText } from "Texts/common";
-
 import { exportAppModalText } from "Texts/exportImport";
+
 import {
   clickOnExportButtonAndVerify,
   exportAllVersionsAndVerify,
   verifyElementsOfExportModal,
 } from "Support/utils/exportImport";
+
 import { selectAppCardOption, closeModal } from "Support/utils/common";
 
 describe("App Export", () => {
@@ -217,3 +219,8 @@ describe("App Export", () => {
     exportAllVersionsAndVerify(data.appName1, "v1");
   });
 });
+
+it('.', function() {
+  cy.visit('localhost:8082')
+  
+});
diff --git a/cypress-tests/cypress/support/e2e.js b/cypress-tests/cypress/support/e2e.js
index 157e580be7..1a37080bba 100644
--- a/cypress-tests/cypress/support/e2e.js
+++ b/cypress-tests/cypress/support/e2e.js
@@ -19,6 +19,7 @@ import "../commands/apiCommands";
 import '../commands/workflowCommands';
 import '../commands/platform/platformApiCommands';
 import "@cypress/code-coverage/support";
+import "cypress-real-events";
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
diff --git a/cypress-tests/cypress/support/utils/common.js b/cypress-tests/cypress/support/utils/common.js
index bd461ec006..b6612aa64e 100644
--- a/cypress-tests/cypress/support/utils/common.js
+++ b/cypress-tests/cypress/support/utils/common.js
@@ -101,11 +101,12 @@ export const navigateToAppEditor = (appName) => {
 };
 
 export const viewAppCardOptions = (appName) => {
-  cy.get(".homepage-app-card .home-app-card-header .menu-ico").then(($el) => {
-    $el[0].style.setProperty("visibility", "visible", "important");
+  // cy.get(".homepage-app-card .home-app-card-header .menu-ico").then(($el) => {
+  //   $el[0].style.setProperty("visibility", "visible", "important");
+  // });
+  cy.get(`[data-cy="${appName.toLowerCase()}-card"]`).click().trigger("hover").realHover().within(() => {
+    cy.get('[data-cy="app-card-menu-icon"]').click();
   });
-
-  cy.get('[data-cy="app-card-menu-icon"]').click();
 };
 
 export const viewFolderCardOptions = (folderName) => {
@@ -184,7 +185,6 @@ export const searchUser = (email) => {
 };
 
 export const selectAppCardOption = (appName, appCardOption) => {
-  cy.wait(1000);
   viewAppCardOptions(appName);
   cy.get(appCardOption).should("be.visible").click();
 };

From 4ede7110d62eb7b793bfb08f034e5c3bfd87726f Mon Sep 17 00:00:00 2001
From: Ganesh Kumar <40178541+ganesh8056@users.noreply.github.com>
Date: Fri, 17 Oct 2025 22:11:19 +0530
Subject: [PATCH 078/157] Hotfix: Microsoft graph datasource refresh token flow
 (#14344)

* microsoft graph refresh token flow

* Handled unauthorised error

* marketplace dev mode will be picked from public config

* for microsoft graph when datasource is updated clear the token details

* added migration to backfill values for scope in Microsoft graph datasource

* version bump
---
 .version                                      |  2 +-
 frontend/.version                             |  2 +-
 .../src/MarketplacePage/InstalledPlugins.jsx  |  2 +-
 .../plugins/microsoft_graph/lib/index.ts      | 70 ++++++++++++++++++-
 .../plugins/microsoft_graph/lib/manifest.json |  2 +-
 server/.version                               |  2 +-
 ...ScopeToHaveOfflineAccessForRefreshToken.ts | 15 ++++
 server/src/modules/configs/service.ts         |  7 ++
 .../src/modules/data-sources/util.service.ts  |  2 +-
 9 files changed, 95 insertions(+), 9 deletions(-)
 create mode 100644 server/data-migrations/1760693571486-BackfillMicrosoftGraphDatasourceScopeToHaveOfflineAccessForRefreshToken.ts

diff --git a/.version b/.version
index 2b6e2d8234..74de710a35 100644
--- a/.version
+++ b/.version
@@ -1 +1 @@
-3.20.23-lts
+3.20.24-lts
diff --git a/frontend/.version b/frontend/.version
index 2b6e2d8234..74de710a35 100644
--- a/frontend/.version
+++ b/frontend/.version
@@ -1 +1 @@
-3.20.23-lts
+3.20.24-lts
diff --git a/frontend/src/MarketplacePage/InstalledPlugins.jsx b/frontend/src/MarketplacePage/InstalledPlugins.jsx
index 2377aa8376..713ee84cf3 100644
--- a/frontend/src/MarketplacePage/InstalledPlugins.jsx
+++ b/frontend/src/MarketplacePage/InstalledPlugins.jsx
@@ -13,7 +13,7 @@ export const InstalledPlugins = () => {
   const [allPlugins, setAllPlugins] = React.useState([]);
   const [installedPlugins, setInstalledPlugins] = React.useState([]);
   const [fetching, setFetching] = React.useState(false);
-  const ENABLE_MARKETPLACE_DEV_MODE = config.ENABLE_MARKETPLACE_DEV_MODE == 'true';
+  const ENABLE_MARKETPLACE_DEV_MODE = window.public_config?.ENABLE_MARKETPLACE_DEV_MODE == 'true';
 
   React.useEffect(() => {
     marketplaceService
diff --git a/marketplace/plugins/microsoft_graph/lib/index.ts b/marketplace/plugins/microsoft_graph/lib/index.ts
index d8668a6e5d..2a540ab59b 100644
--- a/marketplace/plugins/microsoft_graph/lib/index.ts
+++ b/marketplace/plugins/microsoft_graph/lib/index.ts
@@ -5,9 +5,11 @@ import {
   User,
   App,
   validateAndSetRequestOptionsBasedOnAuthType,
+  OAuthUnauthorizedClientError,
 } from '@tooljet-marketplace/common';
 import { SourceOptions, ConvertedFormat } from './types';
-import got, { OptionsOfTextResponseBody, Headers } from 'got';
+import got, { OptionsOfTextResponseBody, Headers, HTTPError } from 'got';
+import { getCurrentToken } from '@tooljet-marketplace/common';
 
 export default class Microsoft_graph implements QueryService {
   authUrl(source_options: SourceOptions) {
@@ -157,6 +159,9 @@ export default class Microsoft_graph implements QueryService {
         result = 'Query Success';
       }
     } catch (error) {
+      if (error instanceof HTTPError && error?.response?.statusCode === 401) {
+        throw new OAuthUnauthorizedClientError('Unauthorized status from API server', error.message, {});
+      }
       if (error.response && error.response.body) {
         try {
           result = JSON.parse(error.response.body);
@@ -188,7 +193,7 @@ export default class Microsoft_graph implements QueryService {
     const tenantId = sourceOptions['tenant_id'] || 'common';
     const accessTokenUrl = sourceOptions['access_token_url'];
     const authUrl = `https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/authorize`;
-    const scope = 'https://graph.microsoft.com/.default';
+    const scope = 'https://graph.microsoft.com/.default offline_access';
 
     const addSourceOptions = {
       url: baseUrl,
@@ -210,7 +215,8 @@ export default class Microsoft_graph implements QueryService {
       access_token_custom_headers: [['', '']],
       ssl_certificate: 'none',
       retry_network_errors: true,
-      scopes: this.encodeOAuthScope(scope),
+      scopes: scope,
+      // scopes: this.encodeOAuthScope(scope),
     };
 
     const newSourceOptions = {
@@ -299,4 +305,62 @@ export default class Microsoft_graph implements QueryService {
 
     return { clientId, clientSecret, tenantId, accessTokenUrl, scopes, redirectUri };
   }
+
+  async refreshToken(sourceOptions, dataSourceId, userId, isAppPublic) {
+    let refreshToken: string;
+    // If multi user authentication is enabled, we would need specific users refresh token.
+    if (sourceOptions?.multiple_auth_enabled) {
+      const currentToken = getCurrentToken(
+        sourceOptions['multiple_auth_enabled'],
+        sourceOptions['tokenData'],
+        userId,
+        isAppPublic
+      );
+
+      if (!currentToken?.refresh_token) {
+        throw new QueryError('Refresh token not found', 'Refresh token is required to refresh access token', {});
+      }
+      refreshToken = currentToken['refresh_token'];
+    } else {
+      if (!sourceOptions?.refresh_token) {
+        throw new QueryError('Refresh token not found', 'Refresh token is required to refresh access token', {});
+      }
+      refreshToken = sourceOptions['refresh_token'];
+    }
+
+    const accessTokenDetails = {};
+    // Refresh token logic here
+    const { clientId, clientSecret, tenantId } = this.getOAuthCredentials(sourceOptions);
+    const tokenEndpoint = `https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/token`;
+
+    const tokenRequestBody = {
+      grant_type: 'refresh_token',
+      client_id: clientId,
+      client_secret: clientSecret,
+      refresh_token: refreshToken,
+    };
+
+    const headers = {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    };
+
+    try {
+      const response = await got(tokenEndpoint, {
+        method: 'post',
+        headers,
+        form: tokenRequestBody,
+        responseType: 'json', // Automatically parse JSON response
+      });
+      const result = response.body;
+      if (result['access_token']) {
+        accessTokenDetails['access_token'] = result['access_token'];
+        accessTokenDetails['refresh_token'] = result['refresh_token'];
+      } else {
+        throw new QueryError('Refresh token failed', 'Access token not found in response', {});
+      }
+    } catch (error) {
+      throw new QueryError('Error while generating refresh access token', JSON.stringify(error), {});
+    }
+    return accessTokenDetails;
+  }
 }
diff --git a/marketplace/plugins/microsoft_graph/lib/manifest.json b/marketplace/plugins/microsoft_graph/lib/manifest.json
index 2d5052895c..8724f80e30 100644
--- a/marketplace/plugins/microsoft_graph/lib/manifest.json
+++ b/marketplace/plugins/microsoft_graph/lib/manifest.json
@@ -76,7 +76,7 @@
           "value": "authorization_code"
       },
       "scopes": {
-          "value": "https://graph.microsoft.com/.default"
+          "value": "https://graph.microsoft.com/.default offline_access"
       },
       "access_token_custom_headers": {
         "value": [
diff --git a/server/.version b/server/.version
index 2b6e2d8234..74de710a35 100644
--- a/server/.version
+++ b/server/.version
@@ -1 +1 @@
-3.20.23-lts
+3.20.24-lts
diff --git a/server/data-migrations/1760693571486-BackfillMicrosoftGraphDatasourceScopeToHaveOfflineAccessForRefreshToken.ts b/server/data-migrations/1760693571486-BackfillMicrosoftGraphDatasourceScopeToHaveOfflineAccessForRefreshToken.ts
new file mode 100644
index 0000000000..e042f99ac8
--- /dev/null
+++ b/server/data-migrations/1760693571486-BackfillMicrosoftGraphDatasourceScopeToHaveOfflineAccessForRefreshToken.ts
@@ -0,0 +1,15 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class BackfillMicrosoftGraphDatasourceScopeToHaveOfflineAccessForRefreshToken1760693571486
+  implements MigrationInterface
+{
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+        UPDATE data_source_options
+        SET "options" = ("options"::jsonb || '{"scopes": {"value": "https://graph.microsoft.com/.default offline_access", "encrypted": false}}'::jsonb)::json
+        FROM data_sources ds
+        WHERE ds.id = data_source_id and ds.kind = 'microsoft_graph'`);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {}
+}
diff --git a/server/src/modules/configs/service.ts b/server/src/modules/configs/service.ts
index 807ce2532a..495fc2181b 100644
--- a/server/src/modules/configs/service.ts
+++ b/server/src/modules/configs/service.ts
@@ -21,6 +21,13 @@ export class ConfigService implements IConfigService {
     if (publicConfigVars?.ENABLE_WORKFLOWS_FEATURE === undefined) {
       publicConfigVars.ENABLE_WORKFLOWS_FEATURE = 'true';
     }
+
+    if (process.env.TOOLJET_EDITION === 'cloud') {
+      publicConfigVars.ENABLE_MARKETPLACE_DEV_MODE = 'false';
+    } else {
+      publicConfigVars.ENABLE_MARKETPLACE_DEV_MODE = process.env.ENABLE_MARKETPLACE_DEV_MODE || 'false';
+    }
+
     return publicConfigVars;
   }
 
diff --git a/server/src/modules/data-sources/util.service.ts b/server/src/modules/data-sources/util.service.ts
index dcc02c4863..984465cfd4 100644
--- a/server/src/modules/data-sources/util.service.ts
+++ b/server/src/modules/data-sources/util.service.ts
@@ -194,7 +194,7 @@ export class DataSourcesUtilService implements IDataSourcesUtilService {
         );
         const envToUpdate = await this.appEnvironmentUtilService.get(organizationId, environmentId, false, manager);
         // if datasource is restapi then reset the token data
-        if (dataSource.kind === 'restapi')
+        if (['restapi', 'microsoft_graph'].includes(dataSource.kind))
           options.push({
             key: 'tokenData',
             value: undefined,

From ef2450ca458d18a47ed4c64da53f3b0e060f8b06 Mon Sep 17 00:00:00 2001
From: ajith-k-v <ajith.jaban@gmail.com>
Date: Mon, 20 Oct 2025 14:04:58 +0530
Subject: [PATCH 079/157] Update data-cy attribute

---
 .../BaseManageGroupPermissionResources.jsx    | 18 +++++-----
 .../BaseManageGroupPermissions.jsx            | 33 ++++++++++---------
 .../components/GroupChipTD/GroupChipTD.jsx    |  4 +--
 3 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGroupPermissionResources/BaseManageGroupPermissionResources.jsx b/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGroupPermissionResources/BaseManageGroupPermissionResources.jsx
index 82f884650b..a59adac103 100644
--- a/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGroupPermissionResources/BaseManageGroupPermissionResources.jsx
+++ b/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGroupPermissionResources/BaseManageGroupPermissionResources.jsx
@@ -26,7 +26,7 @@ import AppPromoteReleasePermissionsUI from '../AppPromoteReleasePermissionsUI';
 import posthogHelper from '@/modules/common/helpers/posthogHelper';
 
 class BaseManageGroupPermissionResources extends React.Component {
-  constructor(props) {
+  constructor (props) {
     super(props);
 
     this.state = {
@@ -65,11 +65,11 @@ class BaseManageGroupPermissionResources extends React.Component {
     };
   }
 
-  componentDidMount() {
+  componentDidMount () {
     if (this.props.groupPermissionId) this.fetchGroupAndResources(this.props.groupPermissionId);
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate (prevProps) {
     if (this.props.groupPermissionId && this.props.groupPermissionId !== prevProps.groupPermissionId) {
       this.fetchGroupAndResources(this.props.groupPermissionId);
       this.setState({
@@ -426,7 +426,7 @@ class BaseManageGroupPermissionResources extends React.Component {
     this.setState({ updateParam });
   };
 
-  render() {
+  render () {
     if (!this.props.groupPermissionId) return null;
 
     const {
@@ -742,6 +742,7 @@ class BaseManageGroupPermissionResources extends React.Component {
                             iconWidth="15"
                             fill="#889096"
                             className="search-user-group-btn"
+                            data-cy="user-group-search-btn"
                           />
                           <p className="tj-text-xsm" data-cy="name-header" style={{ padding: '10px' }}>
                             User name
@@ -783,14 +784,13 @@ class BaseManageGroupPermissionResources extends React.Component {
                                   <Avatar
                                     className="name-avatar"
                                     avatarId={user?.avatarId}
-                                    text={`${user.firstName ? user.firstName[0] : ''}${
-                                      user.lastName ? user.lastName[0] : ''
-                                    }`}
+                                    text={`${user.firstName ? user.firstName[0] : ''}${user.lastName ? user.lastName[0] : ''
+                                      }`}
                                   />
-                                  <span>{`${user?.firstName ?? ''} ${user?.lastName ?? ''}`}</span>
+                                  <span data-cy="user-name">{`${user?.firstName ?? ''} ${user?.lastName ?? ''}`}</span>
                                 </p>
                                 <p className="tj-text-sm d-flex align-items-center" style={{ paddingLeft: '12px' }}>
-                                  <span> {user.email}</span>
+                                  <span data-cy="user-email"> {user.email}</span>
                                 </p>
                                 <p className="tj-text-sm d-flex align-items-center">
                                   <div className="d-flex align-items-center edit-role-btn">
diff --git a/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGroupPermissions/BaseManageGroupPermissions.jsx b/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGroupPermissions/BaseManageGroupPermissions.jsx
index b8cbf5a35d..efc7551435 100644
--- a/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGroupPermissions/BaseManageGroupPermissions.jsx
+++ b/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGroupPermissions/BaseManageGroupPermissions.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { groupPermissionV2Service } from '@/_services';
+import { groupPermissionV2Service, authenticationService } from '@/_services';
 import { Tooltip } from 'react-tooltip';
 import { ConfirmDialog } from '@/_components';
 import { toast } from 'react-hot-toast';
@@ -19,10 +19,9 @@ import { SearchBox } from '@/_components/SearchBox';
 import { LicenseTooltip } from '@/LicenseTooltip';
 import _ from 'lodash';
 import posthogHelper from '@/modules/common/helpers/posthogHelper';
-import { authenticationService } from '@/_services';
 
 class BaseManageGroupPermissions extends React.Component {
-  constructor(props) {
+  constructor (props) {
     super(props);
 
     this.state = {
@@ -51,7 +50,7 @@ class BaseManageGroupPermissions extends React.Component {
     };
   }
 
-  componentDidMount() {
+  componentDidMount () {
     this.fetchGroups();
   }
 
@@ -186,7 +185,7 @@ class BaseManageGroupPermissions extends React.Component {
     return list;
   };
 
-  fetchGroups = (type = 'admin', callback = () => {}) => {
+  fetchGroups = (type = 'admin', callback = () => { }) => {
     this.setState({
       isLoading: true,
     });
@@ -200,8 +199,8 @@ class BaseManageGroupPermissions extends React.Component {
           type == 'admin'
             ? defaultGroups[0].id
             : type == 'current'
-            ? this.findCurrentGroupDetails(groupPermissions)
-            : groupPermissions.at(-1).id;
+              ? this.findCurrentGroupDetails(groupPermissions)
+              : groupPermissions.at(-1).id;
         this.setState(
           {
             groups: groupPermissions.filter((group) => group.type === 'custom'),
@@ -382,7 +381,7 @@ class BaseManageGroupPermissions extends React.Component {
       });
   };
 
-  render() {
+  render () {
     const {
       isLoading,
       showNewGroupForm,
@@ -723,7 +722,9 @@ class BaseManageGroupPermissions extends React.Component {
                     {!showGroupSearchBar ? (
                       <div className="mb-2 d-flex align-items-center">
                         <SolidIcon name="usergroup" width="18px" fill="#889096" />
-                        <span className="ml-1 group-title">CUSTOM GROUPS</span>
+                        <span className="ml-1 group-title" data-cy="custom-groups-title">
+                          CUSTOM GROUPS
+                        </span>
                         <div className="create-group-cont">
                           {isFeatureEnabled ? (
                             <ButtonSolid
@@ -736,6 +737,7 @@ class BaseManageGroupPermissions extends React.Component {
                               iconWidth="15"
                               fill="#889096"
                               className="create-group-custom"
+                              data-cy="search-icon"
                             />
                           ) : (
                             <div style={{ width: '20px' }}></div>
@@ -759,6 +761,7 @@ class BaseManageGroupPermissions extends React.Component {
                               iconWidth="20"
                               className="create-group-custom"
                               disabled={!isFeatureEnabled}
+                              data-cy="create-group-button"
                             />
                           </LicenseTooltip>
                         </div>
@@ -802,12 +805,12 @@ class BaseManageGroupPermissions extends React.Component {
                               permissionGroup.disabled
                                 ? null
                                 : () => {
-                                    this.setState({
-                                      selectedGroupPermissionId: permissionGroup.id,
-                                      selectedGroup: this.humanizeifDefaultGroupName(permissionGroup.name),
-                                      selectedGroupObject: permissionGroup,
-                                    });
-                                  }
+                                  this.setState({
+                                    selectedGroupPermissionId: permissionGroup.id,
+                                    selectedGroup: this.humanizeifDefaultGroupName(permissionGroup.name),
+                                    selectedGroupObject: permissionGroup,
+                                  });
+                                }
                             }
                             disabled={permissionGroup.disabled}
                             toolTipDisabled={permissionGroup.disabled}
diff --git a/frontend/src/modules/WorkspaceSettings/pages/Groups/components/GroupChipTD/GroupChipTD.jsx b/frontend/src/modules/WorkspaceSettings/pages/Groups/components/GroupChipTD/GroupChipTD.jsx
index 33cd656de7..6199ea80da 100644
--- a/frontend/src/modules/WorkspaceSettings/pages/Groups/components/GroupChipTD/GroupChipTD.jsx
+++ b/frontend/src/modules/WorkspaceSettings/pages/Groups/components/GroupChipTD/GroupChipTD.jsx
@@ -20,7 +20,7 @@ const GroupChipTD = ({ groups = [] }) => {
     };
   }, [showAllGroups]);
 
-  function moveValuesToLast(arr, valuesToMove) {
+  function moveValuesToLast (arr, valuesToMove) {
     const validValuesToMove = valuesToMove.filter((value) => arr.includes(value));
 
     validValuesToMove.forEach((value) => {
@@ -41,7 +41,7 @@ const GroupChipTD = ({ groups = [] }) => {
   };
 
   const renderGroupChip = (group, index) => (
-    <span className="group-chip" key={index} data-cy="group-chip">
+    <span className="group-chip" key={index} data-cy={`${group.toLowerCase().replace(/\s+/g, '-')}-group-chip`}>
       {humanizeifDefaultGroupName(group)}
     </span>
   );

From 27dd54124233ff5f9edd8cc8221c265f240b6a57 Mon Sep 17 00:00:00 2001
From: ajith-k-v <ajith.jaban@gmail.com>
Date: Mon, 20 Oct 2025 14:06:37 +0530
Subject: [PATCH 080/157] Revamp Groups UI test cases

---
 cypress-tests/cypress.config.js               |   14 +-
 .../cypress/constants/selectors/common.js     |    2 +-
 .../constants/selectors/manageGroups.js       |   26 +-
 .../workspace/groups/basicPermissions.cy.js   |   17 +-
 .../groups/customGroupGranularAccess.cy.js    |    7 +-
 .../groups/customGroupPermissions.cy.js       |    4 +-
 ...manageGroups.cy.js => customGroupUI.cy.js} |  278 +++--
 .../workspace/groups/userRoleUI.cy.js         |  213 ++++
 .../cypress/support/utils/manageGroups.js     |  613 +---------
 .../support/utils/platform/groupsUI.js        | 1004 +++++++++++++++++
 .../cypress/support/utils/userPermissions.js  |    7 +-
 11 files changed, 1471 insertions(+), 714 deletions(-)
 rename cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/{manageGroups.cy.js => customGroupUI.cy.js} (54%)
 create mode 100644 cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/userRoleUI.cy.js
 create mode 100644 cypress-tests/cypress/support/utils/platform/groupsUI.js

diff --git a/cypress-tests/cypress.config.js b/cypress-tests/cypress.config.js
index 53b86c4c53..bc88af7640 100644
--- a/cypress-tests/cypress.config.js
+++ b/cypress-tests/cypress.config.js
@@ -19,9 +19,9 @@ module.exports = defineConfig({
   trashAssetsBeforeRuns: true,
 
   e2e: {
-    setupNodeEvents(on, config) {
+    setupNodeEvents (on, config) {
       on("task", {
-        readPdf(pathToPdf) {
+        readPdf (pathToPdf) {
           return new Promise((resolve) => {
             const pdfPath = path.resolve(pathToPdf);
             let dataBuffer = fs.readFileSync(pdfPath);
@@ -33,7 +33,7 @@ module.exports = defineConfig({
       });
 
       on("task", {
-        readXlsx(filePath) {
+        readXlsx (filePath) {
           return new Promise((resolve, reject) => {
             try {
               let dataBuffer = fs.readFileSync(filePath);
@@ -48,7 +48,7 @@ module.exports = defineConfig({
       });
 
       on("task", {
-        deleteFile(filePath) {
+        deleteFile (filePath) {
           return new Promise((resolve, reject) => {
             const fullPath = path.resolve(filePath);
             if (fs.existsSync(fullPath)) {
@@ -69,7 +69,7 @@ module.exports = defineConfig({
       });
 
       on("task", {
-        deleteFolder(folderName) {
+        deleteFolder (folderName) {
           return new Promise((resolve, reject) => {
             if (fs.existsSync(folderName)) {
               rmdir(folderName, { maxRetries: 10, recursive: true }, (err) => {
@@ -87,7 +87,7 @@ module.exports = defineConfig({
       });
 
       on("task", {
-        dbConnection({ dbconfig, sql }) {
+        dbConnection ({ dbconfig, sql }) {
           const client = new pg.Pool(dbconfig);
           return client.query(sql);
         },
@@ -114,7 +114,7 @@ module.exports = defineConfig({
     baseUrl: "http://localhost:8082",
     specPattern: "cypress/e2e/happyPath/**/*.cy.js",
     downloadsFolder: "cypress/downloads",
-    numTestsKeptInMemory: 1,
+    numTestsKeptInMemory: 0,
     redirectionLimit: 5,
     trashAssetsBeforeRuns: true,
     experimentalMemoryManagement: true,
diff --git a/cypress-tests/cypress/constants/selectors/common.js b/cypress-tests/cypress/constants/selectors/common.js
index 5bffc17390..1c703cf914 100644
--- a/cypress-tests/cypress/constants/selectors/common.js
+++ b/cypress-tests/cypress/constants/selectors/common.js
@@ -176,7 +176,7 @@ export const commonSelectors = {
   resetPasswordButton: '[data-cy="reset-password-button"]',
   resetPasswordPageDescription: '[data-cy="reset-password-page-description"]',
   backToLoginButton: '[data-cy="back-to-login"]',
-  breadcrumbTitle: '[data-cy="app-header-label"]>>',
+  breadcrumbTitle: '[data-cy="breadcrumb-header-workspace-settings"]>>',
   // breadcrumbPageTitle: '[data-cy="app-header-label"]',
   breadcrumbPageTitle: '[data-cy="breadcrumb-page-title"]',
   labelFullNameInput: '[data-cy="name-label"]',
diff --git a/cypress-tests/cypress/constants/selectors/manageGroups.js b/cypress-tests/cypress/constants/selectors/manageGroups.js
index 98ab952f32..3fc120bb72 100644
--- a/cypress-tests/cypress/constants/selectors/manageGroups.js
+++ b/cypress-tests/cypress/constants/selectors/manageGroups.js
@@ -52,21 +52,22 @@ export const groupsSelector = {
   appsDeleteLabel: "[data-cy=app-delete-label]",
   appPromoteCheck: '[data-cy="app-promote-checkbox"]',
   appPromoteLabel: '[data-cy="app-promote-label"]',
-  appPrmoteHelperText: '[data-cy="app-promote-helper-text"]',
+  appPromoteHelperText: '[data-cy="app-promote-helper-text"]',
   appReleaseCheck: '[data-cy="app-release-checkbox"]',
   appReleaseLabel: '[data-cy="app-release-label"]',
   appReleaseHelperText: '[data-cy="app-release-helper-text"]',
   workflowsCreateCheck: "[data-cy=workflow-create-checkbox]",
   workflowsCreateLabel: "[data-cy=workflow-create-label]",
-  workflowsHelperText: '[data-cy="workflow-helper-text"]',
+  workflowsCreateHelperText: '[data-cy="workflow-create-helper-text"]',
   workflowsDeleteCheck: '[data-cy="workflow-delete-checkbox"]',
   workflowsDeleteLabel: '[data-cy="workflow-delete-label"]',
   workflowsDeleteHelperText: '[data-cy="workflow-delete-helper-text"]',
   datasourcesCreateCheck: "[data-cy=datasource-create-checkbox]",
   datasourcesCreateLabel: "[data-cy=datasource-create-label]",
-  datasourcesHelperText: '[data-cy="datasource-helper-text"]',
+  datasourcesCreateHelperText: '[data-cy="datasource-create-helper-text"]',
   datasourcesDeleteCheck: '[data-cy="datasource-delete-checkbox"]',
   datasourcesDeleteLabel: '[data-cy="datasource-delete-label"]',
+  datasourcesDeleteHelperText: '[data-cy="datasource-delete-helper-text"]',
   foldersCreateCheck: "[data-cy=folder-create-checkbox]",
   foldersCreateLabel: "[data-cy=folder-create-label]",
   foldersHelperText: '[data-cy="folder-helper-text"]',
@@ -82,6 +83,23 @@ export const groupsSelector = {
   appHideCheckbox: '[data-cy="app-hide-from-dashboard-radio"]',
   appHideHelperText: '[data-cy="app-hide-from-dashboard-helper-text"]',
   appHideLabel: '[data-cy="app-hide-from-dashboard-label"]',
+
+  workflowsText: '[data-cy="workflows-text"]',
+  workflowsBuildRadio: '[data-cy="workflow-build-radio"]',
+  workflowsBuildLabel: '[data-cy="workflow-build-label"]',
+  workflowsBuildHelperText: '[data-cy="workflow-build-helper-text"]',
+  workflowsExecuteRadio: '[data-cy="workflow-execute-radio"]',
+  workflowsExecuteLabel: '[data-cy="workflow-execute-label"]',
+  workflowsExecuteHelperText: '[data-cy="workflow-execute-helper-text"]',
+
+  datasourcesText: '[data-cy="datasources-text"]',
+  datasourcesConfigureRadio: '[data-cy="datasource-configure-radio"]',
+  datasourcesConfigureLabel: '[data-cy="datasource-configure-label"]',
+  datasourcesConfigureHelperText: '[data-cy="datasource-configure-helper-text"]',
+  datasourcesBuildWithRadio: '[data-cy="datasource-build-with-radio"]',
+  datasourcesBuildWithLabel: '[data-cy="datasource-build-with-label"]',
+  datasourcesBuildWithHelperText: '[data-cy="datasource-build-with-helper-text"]',
+
   appHidePermissionModalLabel: '[data-cy="hide-from-dashboard-permission-label"]',
   appHidePermissionModalHelperText: '[data-cy="hide-from-dashboard-permission-info-text"]',
   addAppsButton: '[data-cy="add-apps-buton"]',
@@ -122,7 +140,7 @@ export const groupsSelector = {
   updateGroupNameModalTitle: '[data-cy="update-group-title"]',
   editGranularPermissionIcon: '[data-cy="edit-permission-button"]',
   granularAccessPermission: '[data-cy="granular-access-permission"]',
-  groupChip: '[data-cy="group-chip"]',
+  groupChip: (accessType) => `[data-cy="${cyParamName(accessType)}-group-chip"]`,
   resourceContainer: '[data-cy="resources-container"]',
   groupLink: (groupname) => {
     return `[data-cy="${cyParamName(groupname)}-list-item"]`;
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/basicPermissions.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/basicPermissions.cy.js
index 771c2d1e73..0b715ea8a4 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/basicPermissions.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/basicPermissions.cy.js
@@ -8,7 +8,7 @@ import {
 import {
     createGroupsAndAddUserInGroup,
     setupWorkspaceAndInviteUser,
-    updateRole
+    updateRole,
 } from "Support/utils/manageGroups";
 import {
     uiAppCRUDWorkflow,
@@ -19,12 +19,15 @@ import {
     uiWorkflowCRUDWorkflow,
     uiWorkspaceConstantCRUDWorkflow,
 } from "Support/utils/uiPermissions";
+import {
+    verifyBasicPermissions,
+    verifySettingsAccess,
+} from "Support/utils/userPermissions";
 import { commonText } from "Texts/common";
 import { dashboardText } from "Texts/dashboard";
 import { groupsText } from "Texts/manageGroups";
-import { verifyBasicPermissions, verifySettingsAccess } from "Support/utils/userPermissions";
 
-describe("Manage Groups", () => {
+describe("Basic Permissions", () => {
     let data = {};
 
     before(() => {
@@ -57,7 +60,6 @@ describe("Manage Groups", () => {
 
         verifyBasicPermissions(false);
         verifySettingsAccess(false);
-
     });
 
     it("should verify builder privileges", () => {
@@ -70,7 +72,7 @@ describe("Manage Groups", () => {
         );
 
         // UI-based privilege verification for Builder
-        cy.get('.basic-plan-migration-banner').invoke('css', 'display', 'none');
+        cy.get(".basic-plan-migration-banner").invoke("css", "display", "none");
         uiVerifyBuilderPrivileges();
 
         // UI CRUD workflows validation
@@ -110,7 +112,6 @@ describe("Manage Groups", () => {
             dashboardText.appClonedToast,
             false
         );
-
     });
 
     it("should verify admin privileges", () => {
@@ -203,7 +204,5 @@ describe("Manage Groups", () => {
             .trigger("mouseenter")
             .find(commonSelectors.editButton)
             .should("not.exist");
-
-
-    })
+    });
 });
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupGranularAccess.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupGranularAccess.cy.js
index 72cefce659..56522cf375 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupGranularAccess.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupGranularAccess.cy.js
@@ -14,7 +14,7 @@ import {
 } from "Support/utils/userPermissions";
 import { groupsText } from "Texts/manageGroups";
 
-describe("Manage Groups", () => {
+describe("Custom Group Granular Access", () => {
     let data = {};
     const isEnterprise = Cypress.env("environment") === "Enterprise";
 
@@ -42,7 +42,7 @@ describe("Manage Groups", () => {
     });
 
 
-    it.only("should verify the granular permissions in custom groups", () => {
+    it("should verify the granular permissions in custom groups", () => {
         const groupName = fake.firstName.replace(/[^A-Za-z]/g, "");
         const appName2 = fake.companyName;
         const appName3 = fake.companyName;
@@ -189,6 +189,8 @@ describe("Manage Groups", () => {
         cy.apiLogin(data.email);
         cy.visit(data.workspaceSlug);
 
+        cy.get(commonSelectors.dashboardIcon).click();
+        cy.get(commonSelectors.appCreateButton).should("not.exist");
         cy.get('.appcard-buttons-wrap [data-cy="edit-button"]').should(
             "have.lengthOf",
             1
@@ -215,6 +217,7 @@ describe("Manage Groups", () => {
             cy.get(dataSourceSelector.dsNameInputField).should('be.enabled');
             cy.get(dataSourceSelector.dataSourceNameButton(datasourceName2.toLowerCase())).click();
             cy.get(dataSourceSelector.dsNameInputField).should('be.disabled')
+
             cy.get(dataSourceSelector.commonDsLabelAndCount).click();
             cy.get('[data-cy="rest-api-add-button"]').should("be.disabled");
         });
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupPermissions.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupPermissions.cy.js
index e3e0e73bec..9197da5db8 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupPermissions.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupPermissions.cy.js
@@ -13,7 +13,7 @@ import {
 } from "Support/utils/userPermissions";
 import { groupsText } from "Texts/manageGroups";
 
-describe("Manage Groups", () => {
+describe("Custom Group Permissions", () => {
     let data = {};
     const isEnterprise = Cypress.env("environment") === "Enterprise";
 
@@ -196,7 +196,7 @@ describe("Manage Groups", () => {
             cy.get(commonSelectors.globalDataSourceIcon).click();
             cy.get(
                 dataSourceSelector.dataSourceNameButton(datasourceName1)
-            ).should("not.exist");
+            ).should("exist");
             cy.get(dataSourceSelector.commonDsLabelAndCount).click();
             cy.get('[data-cy="rest-api-add-button"]').should("be.enabled");
         });
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/manageGroups.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupUI.cy.js
similarity index 54%
rename from cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/manageGroups.cy.js
rename to cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupUI.cy.js
index a22290df5d..3d7e1abf0b 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/manageGroups.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupUI.cy.js
@@ -1,11 +1,11 @@
 import { fake } from "Fixtures/fake";
 import { commonSelectors } from "Selectors/common";
 import { groupsSelector } from "Selectors/manageGroups";
-import * as common from "Support/utils/common";
-import * as groups from "Support/utils/manageGroups";
+import { navigateToManageGroups } from "Support/utils/common";
+import { OpenGroupCardOption } from "Support/utils/manageGroups";
 import { groupsText } from "Texts/manageGroups";
 
-const verifyModalFields = (isEdit = false, groupName = '') => {
+const verifyModalFields = (isEdit = false, groupName = "") => {
   // Modal header verification
   cy.get(groupsSelector.permissionNameLabel).verifyVisibleElement(
     "have.text",
@@ -13,9 +13,11 @@ const verifyModalFields = (isEdit = false, groupName = '') => {
   );
   cy.get(groupsSelector.permissionNameInput)
     .should("be.visible")
-    .and(isEdit ? "have.value" : "have.attr",
+    .and(
+      isEdit ? "have.value" : "have.attr",
       isEdit ? groupName : "placeholder",
-      isEdit ? groupName : "Eg. Product analytics apps");
+      isEdit ? groupName : "Eg. Product analytics apps"
+    );
   cy.get(groupsSelector.permissionNameHelperText).verifyVisibleElement(
     "have.text",
     groupsText.permissionNameHelperText
@@ -23,11 +25,26 @@ const verifyModalFields = (isEdit = false, groupName = '') => {
 
   // Permission section verification
   const permissionChecks = [
-    { selector: groupsSelector.permissionLabel, text: groupsText.permissionLabel },
-    { selector: groupsSelector.editPermissionLabel, text: groupsText.editPermissionLabel },
-    { selector: groupsSelector.editPermissionHelperText, text: groupsText.appEditHelperText },
-    { selector: groupsSelector.viewPermissionLabel, text: groupsText.viewPermissionLabel },
-    { selector: groupsSelector.viewPermissionHelperText, text: groupsText.appViewHelperText }
+    {
+      selector: groupsSelector.permissionLabel,
+      text: groupsText.permissionLabel,
+    },
+    {
+      selector: groupsSelector.editPermissionLabel,
+      text: groupsText.editPermissionLabel,
+    },
+    {
+      selector: groupsSelector.editPermissionHelperText,
+      text: groupsText.appEditHelperText,
+    },
+    {
+      selector: groupsSelector.viewPermissionLabel,
+      text: groupsText.viewPermissionLabel,
+    },
+    {
+      selector: groupsSelector.viewPermissionHelperText,
+      text: groupsText.appViewHelperText,
+    },
   ];
 
   permissionChecks.forEach(({ selector, text }) => {
@@ -47,9 +64,18 @@ const verifyModalFields = (isEdit = false, groupName = '') => {
 
   // Resource section verification
   const resourceChecks = [
-    { selector: groupsSelector.resourceLabel, text: groupsText.resourcesheader },
-    { selector: groupsSelector.allAppsLabel, text: isEdit ? groupsText.allAppsLabel : groupsText.groupChipText },
-    { selector: groupsSelector.allAppsHelperText, text: groupsText.allAppsHelperText }
+    {
+      selector: groupsSelector.resourceLabel,
+      text: groupsText.resourcesheader,
+    },
+    {
+      selector: groupsSelector.allAppsLabel,
+      text: isEdit ? groupsText.allAppsLabel : groupsText.groupChipText,
+    },
+    {
+      selector: groupsSelector.allAppsHelperText,
+      text: groupsText.allAppsHelperText,
+    },
   ];
 
   resourceChecks.forEach(({ selector, text }) => {
@@ -61,8 +87,13 @@ const verifyModalFields = (isEdit = false, groupName = '') => {
     "have.text",
     isEdit ? groupsText.updateButtonText : groupsText.addButtonText
   );
-  cy.get(groupsSelector.confimButton).should(isEdit ? "be.enabled" : "be.disabled");
-  cy.get(groupsSelector.cancelButton).verifyVisibleElement("have.text", groupsText.cancelButton);
+  cy.get(groupsSelector.confimButton).should(
+    isEdit ? "be.enabled" : "be.disabled"
+  );
+  cy.get(groupsSelector.cancelButton).verifyVisibleElement(
+    "have.text",
+    groupsText.cancelButton
+  );
 
   if (isEdit) {
     cy.get(groupsSelector.deletePermissionIcon).should("be.visible");
@@ -78,7 +109,7 @@ const verifyPermissionSection = () => {
       label: groupsSelector.appsCreateLabel,
       labelText: groupsText.createLabel,
       helperText: groupsSelector.appCreateHelperText,
-      helperContent: groupsText.appCreateHelperText
+      helperContent: groupsText.appCreateHelperText,
     },
     {
       resource: groupsSelector.resourcesFolders,
@@ -87,40 +118,71 @@ const verifyPermissionSection = () => {
       label: groupsSelector.foldersCreateLabel,
       labelText: groupsText.folderCreateLabel,
       helperText: groupsSelector.foldersHelperText,
-      helperContent: groupsText.folderHelperText
-    }
+      helperContent: groupsText.folderHelperText,
+    },
   ];
 
-  permissionElements.forEach(({ resource, resourceText, check, label, labelText, helperText, helperContent }) => {
-    cy.get(resource).verifyVisibleElement("have.text", resourceText);
-    cy.get(check).should("be.visible");
-    cy.get(check).check();
-    cy.verifyToastMessage(commonSelectors.toastMessage, groupsText.permissionUpdatedToast);
-    cy.get(check).uncheck();
-    cy.verifyToastMessage(commonSelectors.toastMessage, groupsText.permissionUpdatedToast);
-    cy.get(label).verifyVisibleElement("have.text", labelText);
-    cy.get(helperText).verifyVisibleElement("have.text", helperContent);
-  });
+  permissionElements.forEach(
+    ({
+      resource,
+      resourceText,
+      check,
+      label,
+      labelText,
+      helperText,
+      helperContent,
+    }) => {
+      cy.get(resource).verifyVisibleElement("have.text", resourceText);
+      cy.get(check).should("be.visible");
+      cy.get(check).check();
+      cy.verifyToastMessage(
+        commonSelectors.toastMessage,
+        groupsText.permissionUpdatedToast
+      );
+      cy.get(check).uncheck();
+      cy.verifyToastMessage(
+        commonSelectors.toastMessage,
+        groupsText.permissionUpdatedToast
+      );
+      cy.get(label).verifyVisibleElement("have.text", labelText);
+      cy.get(helperText).verifyVisibleElement("have.text", helperContent);
+    }
+  );
 };
 
 const verifyEmptyStates = () => {
   // Users empty state
   cy.get(groupsSelector.userEmptyPageIcon).should("be.visible");
-  cy.get(groupsSelector.userEmptyPageTitle).verifyVisibleElement("have.text", groupsText.userEmptyPageTitle);
-  cy.get(groupsSelector.userEmptyPageHelperText).verifyVisibleElement("have.text", groupsText.userEmptyPageHelperText);
+  cy.get(groupsSelector.userEmptyPageTitle).verifyVisibleElement(
+    "have.text",
+    groupsText.userEmptyPageTitle
+  );
+  cy.get(groupsSelector.userEmptyPageHelperText).verifyVisibleElement(
+    "have.text",
+    groupsText.userEmptyPageHelperText
+  );
 
   // Granular permissions empty state
   cy.get(groupsSelector.granularLink).click();
   cy.get(groupsSelector.granularEmptyPageIcon).should("be.visible");
-  cy.get(groupsSelector.emptyPagePermissionTitle).verifyVisibleElement("have.text", groupsText.emptyPagePermissionTitle);
-  cy.get(groupsSelector.emptyPagePermissionHelperText).verifyVisibleElement("have.text", groupsText.emptyPagePermissionHelperText);
+  cy.get(groupsSelector.emptyPagePermissionTitle).verifyVisibleElement(
+    "have.text",
+    groupsText.emptyPagePermissionTitle
+  );
+  cy.get(groupsSelector.emptyPagePermissionHelperText).verifyVisibleElement(
+    "have.text",
+    groupsText.emptyPagePermissionHelperText
+  );
 };
 
 const verifyGroupLinks = () => {
   const links = [
     { selector: groupsSelector.usersLink, text: groupsText.usersLink },
-    { selector: groupsSelector.permissionsLink, text: groupsText.permissionsLink },
-    { selector: groupsSelector.granularLink, text: "Granular access" }
+    {
+      selector: groupsSelector.permissionsLink,
+      text: groupsText.permissionsLink,
+    },
+    { selector: groupsSelector.granularLink, text: "Granular access" },
   ];
 
   links.forEach(({ selector, text }) => {
@@ -128,42 +190,64 @@ const verifyGroupLinks = () => {
   });
 };
 
-describe("Manage Groups", () => {
+describe("Custom groups UI and Functionality verification", () => {
   const groupName = fake.firstName.replaceAll("[^A-Za-z]", "");
   const newGroupname = `New ${groupName}`;
   const data = {
     firstName: fake.firstName,
     email: fake.email.toLowerCase().replaceAll("[^A-Za-z]", ""),
     workspaceName: fake.firstName,
-    workspaceSlug: fake.firstName.toLowerCase().replaceAll("[^A-Za-z]", "")
+    workspaceSlug: fake.firstName.toLowerCase().replaceAll("[^A-Za-z]", ""),
   };
 
-  beforeEach(() => {
-    cy.defaultWorkspaceLogin();
+  before(() => {
+    cy.apiLogin();
+    cy.apiCreateWorkspace(data.workspaceName, data.workspaceSlug);
   });
 
-  it("Should verify the elements and functionalities on manage groups page", () => {
-    // Setup workspace
-    cy.apiCreateWorkspace(data.workspaceName, data.workspaceSlug);
+  beforeEach(() => {
+    cy.apiLogin();
     cy.visit(`${data.workspaceSlug}`);
-    common.navigateToManageGroups();
+    navigateToManageGroups();
+  });
 
-    // Verify page headers
-    cy.get(commonSelectors.breadcrumbTitle).should(($el) => {
-      expect($el.contents().first().text().trim()).to.eq("Workspace settings");
-    });
-    cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement("have.text", "Groups");
+  const commonGroupVerification = () => {
+    // Resource Verification
+    cy.verifyElement(
+      groupsSelector.textDefaultGroup,
+      groupsText.textDefaultGroup
+    );
+    cy.get(groupsSelector.usersLink).click();
+    cy.verifyElement(
+      groupsSelector.nameTableHeader,
+      groupsText.userNameTableHeader
+    );
+    cy.verifyElement(
+      groupsSelector.emailTableHeader,
+      groupsText.emailTableHeader
+    );
+  };
 
+  it("Should verify the elements and functionalities on manage groups page", () => {
     // Verify base group elements
-    groups.manageGroupsElements();
+    manageGroupsElements();
 
     // Test group creation flow
     const verifyGroupCreation = () => {
       cy.get(groupsSelector.createNewGroupButton).should("be.visible").click();
-      cy.get(groupsSelector.addNewGroupModalTitle).verifyVisibleElement("have.text", groupsText.cardTitle);
+      cy.get(groupsSelector.addNewGroupModalTitle).verifyVisibleElement(
+        "have.text",
+        groupsText.cardTitle
+      );
       cy.get(groupsSelector.groupNameInput).should("be.visible");
-      cy.get(groupsSelector.cancelButton).verifyVisibleElement("have.text", groupsText.cancelButton);
-      cy.get(groupsSelector.createGroupButton).verifyVisibleElement("have.text", groupsText.createGroupButton);
+      cy.get(groupsSelector.cancelButton).verifyVisibleElement(
+        "have.text",
+        groupsText.cancelButton
+      );
+      cy.get(groupsSelector.createGroupButton).verifyVisibleElement(
+        "have.text",
+        groupsText.createGroupButton
+      );
       cy.get(groupsSelector.cancelButton).click();
     };
 
@@ -172,7 +256,10 @@ describe("Manage Groups", () => {
       cy.get(groupsSelector.createNewGroupButton).click();
       cy.clearAndType(groupsSelector.groupNameInput, groupsText.admin);
       cy.get(groupsSelector.createGroupButton).click();
-      cy.verifyToastMessage(commonSelectors.toastMessage, groupsText.groupNameExistToast);
+      cy.verifyToastMessage(
+        commonSelectors.toastMessage,
+        groupsText.groupNameExistToast
+      );
       cy.get(groupsSelector.cancelButton).click();
       cy.get(groupsSelector.groupNameInput).should("not.exist");
     };
@@ -182,19 +269,34 @@ describe("Manage Groups", () => {
       cy.get(groupsSelector.createNewGroupButton).click();
       cy.clearAndType(groupsSelector.groupNameInput, groupName);
       cy.get(groupsSelector.createGroupButton).click();
-      cy.verifyToastMessage(commonSelectors.toastMessage, groupsText.groupCreatedToast);
+      cy.verifyToastMessage(
+        commonSelectors.toastMessage,
+        groupsText.groupCreatedToast
+      );
 
       // Verify group creation
-      cy.get(groupsSelector.groupLink(groupName)).verifyVisibleElement("have.text", groupName);
+      cy.get(groupsSelector.groupLink(groupName)).verifyVisibleElement(
+        "have.text",
+        groupName
+      );
       cy.get(groupsSelector.groupLink(groupName)).click();
-      cy.get(groupsSelector.groupPageTitle(groupName)).verifyVisibleElement("have.text", `${groupName} (0)`);
+      cy.get(groupsSelector.groupPageTitle(groupName)).verifyVisibleElement(
+        "have.text",
+        `${groupName} (0)`
+      );
       cy.get(groupsSelector.groupNameUpdateLink).should("be.visible");
 
       // Verify group links and tables
       verifyGroupLinks();
       cy.get(groupsSelector.usersLink).click();
-      cy.get(groupsSelector.nameTableHeader).verifyVisibleElement("have.text", groupsText.userNameTableHeader);
-      cy.get(groupsSelector.emailTableHeader).verifyVisibleElement("have.text", groupsText.emailTableHeader);
+      cy.get(groupsSelector.nameTableHeader).verifyVisibleElement(
+        "have.text",
+        groupsText.userNameTableHeader
+      );
+      cy.get(groupsSelector.emailTableHeader).verifyVisibleElement(
+        "have.text",
+        groupsText.emailTableHeader
+      );
       verifyEmptyStates();
     };
 
@@ -208,7 +310,14 @@ describe("Manage Groups", () => {
     // Test granular access section
     const verifyGranularAccess = () => {
       cy.get(groupsSelector.granularLink).click();
-      cy.get(groupsSelector.addAppButton).click();
+      cy.ifEnv("Community", () => {
+        cy.get(groupsSelector.addAppsButton).click();
+      });
+      cy.ifEnv("Enterprise", () => {
+        cy.get(groupsSelector.addPermissionButton).click();
+        cy.get(groupsSelector.addAppButton).click();
+      });
+
       verifyModalFields();
 
       // Add permission
@@ -217,8 +326,9 @@ describe("Manage Groups", () => {
 
       // Verify edit mode
       cy.get(`[data-cy="${groupName.toLowerCase()}-text"]`).click();
-      cy.get(`${groupsSelector.addEditPermissionModalTitle}:eq(2)`)
-        .verifyVisibleElement("have.text", groupsText.editPermissionModalTitle);
+      cy.get(
+        `${groupsSelector.addEditPermissionModalTitle}:eq(2)`
+      ).verifyVisibleElement("have.text", groupsText.editPermissionModalTitle);
       cy.get(groupsSelector.editPermissionRadio).check();
       verifyModalFields(true, groupName);
       cy.get(groupsSelector.confimButton).click();
@@ -229,31 +339,44 @@ describe("Manage Groups", () => {
     // Test group rename and delete
     const verifyGroupRename = () => {
       cy.get(groupsSelector.groupNameUpdateLink).click();
-      cy.get(groupsSelector.updateGroupNameModalTitle)
-        .verifyVisibleElement("have.text", groupsText.updateGroupNameModalTitle);
+      cy.get(groupsSelector.updateGroupNameModalTitle).verifyVisibleElement(
+        "have.text",
+        groupsText.updateGroupNameModalTitle
+      );
       cy.clearAndType(groupsSelector.groupNameInput, newGroupname);
       cy.get(groupsSelector.createGroupButton).click();
-      cy.verifyToastMessage(commonSelectors.toastMessage, groupsText.groupNameUpdateSucessToast);
-      cy.get(groupsSelector.groupLink(newGroupname))
-        .verifyVisibleElement("have.text", newGroupname);
+      cy.verifyToastMessage(
+        commonSelectors.toastMessage,
+        groupsText.groupNameUpdateSucessToast
+      );
+      cy.get(groupsSelector.groupLink(newGroupname)).verifyVisibleElement(
+        "have.text",
+        newGroupname
+      );
     };
 
     const verifyGroupDelete = () => {
       cy.get(groupsSelector.groupLink(newGroupname)).click();
-      groups.OpenGroupCardOption(newGroupname);
+      OpenGroupCardOption(newGroupname);
       cy.get(groupsSelector.deleteGroupOption).click();
 
       // Verify delete confirmation
-      cy.get(groupsSelector.confirmText)
-        .verifyVisibleElement("have.text", groupsText.confirmText);
-      cy.get(commonSelectors.buttonSelector("Cancel"))
-        .verifyVisibleElement("have.text", groupsText.confirmCancelButton);
-      cy.get(commonSelectors.buttonSelector("Yes"))
-        .verifyVisibleElement("have.text", groupsText.confirmYesButton);
+      cy.get(groupsSelector.confirmText).verifyVisibleElement(
+        "have.text",
+        groupsText.confirmText
+      );
+      cy.get(commonSelectors.buttonSelector("Cancel")).verifyVisibleElement(
+        "have.text",
+        groupsText.confirmCancelButton
+      );
+      cy.get(commonSelectors.buttonSelector("Yes")).verifyVisibleElement(
+        "have.text",
+        groupsText.confirmYesButton
+      );
       cy.get(commonSelectors.buttonSelector("Cancel")).click();
 
       // Actual delete
-      groups.OpenGroupCardOption(newGroupname);
+      OpenGroupCardOption(newGroupname);
       cy.get(groupsSelector.deleteGroupOption).click();
       cy.get(commonSelectors.buttonSelector("Yes")).click();
     };
@@ -261,4 +384,11 @@ describe("Manage Groups", () => {
     verifyGroupRename();
     verifyGroupDelete();
   });
-});
\ No newline at end of file
+
+  const toggleCheckbox = (selector, toastSelector, toastMessage) => {
+    cy.get(selector).should("be.visible").uncheck();
+    cy.verifyToastMessage(toastSelector, toastMessage);
+    cy.get(selector).check();
+    cy.verifyToastMessage(toastSelector, toastMessage);
+  };
+});
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/userRoleUI.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/userRoleUI.cy.js
new file mode 100644
index 0000000000..8212f2e798
--- /dev/null
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/userRoleUI.cy.js
@@ -0,0 +1,213 @@
+import { fake } from "Fixtures/fake";
+import { commonSelectors } from "Selectors/common";
+import { groupsSelector } from "Selectors/manageGroups";
+import { navigateToManageGroups } from "Support/utils/common";
+import {
+    commonGroupVerification,
+    toggleAllPermissions,
+    verifyAdminHelperText,
+    verifyCheckPermissionStates,
+    verifyEditUserRoleModal,
+    verifyEmptyStates,
+    verifyEnduserHelperText,
+    verifyGranularAccessByRole,
+    verifyGranularAddModal,
+    verifyGranularEditModal,
+    verifyPermissionCheckBoxLabelsAndHelperTexts,
+} from "Support/utils/platform/groupsUI";
+import { groupsText } from "Texts/manageGroups";
+
+describe("User Role UI and Functionality verification", () => {
+    const data = {
+        firstName: fake.firstName,
+        email: fake.email.toLowerCase().replaceAll("[^A-Za-z]", ""),
+        workspaceName: fake.firstName,
+        workspaceSlug: fake.firstName.toLowerCase().replaceAll("[^A-Za-z]", ""),
+    };
+
+    before(() => {
+        cy.apiLogin();
+        cy.apiCreateWorkspace(data.workspaceName, data.workspaceSlug);
+    });
+
+    beforeEach(() => {
+        cy.apiLogin();
+        cy.visit(`${data.workspaceSlug}`);
+        navigateToManageGroups();
+        cy.viewport(2000, 1900);
+    });
+
+    it("should verify admin role UI elements and interactions", () => {
+        // Verify page headers
+        cy.get(commonSelectors.breadcrumbTitle).should(($el) => {
+            expect($el.contents().first().text().trim()).to.eq("Workspace settings");
+        });
+        cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement(
+            "have.text",
+            "Groups"
+        );
+
+        cy.get('[data-cy="page-title"]').should(($el) => {
+            expect($el.contents().last().text().trim()).to.eq("Groups");
+        });
+
+        cy.verifyElement(
+            groupsSelector.createNewGroupButton,
+            groupsText.createNewGroupButton
+        );
+
+        cy.get('[data-cy="user-role-title"]').verifyVisibleElement(
+            "have.text",
+            "USER ROLE"
+        );
+        cy.verifyElement('[data-cy="custom-groups-title"]', "CUSTOM GROUPS");
+        cy.get('[data-cy="create-group-button"]').should("be.visible");
+        cy.get('[data-cy="search-icon"]').should("be.visible");
+
+        // Admin List Item Verification
+        cy.verifyElement(groupsSelector.adminListItem, "Admin");
+        cy.verifyElement(groupsSelector.adminTitle, "Admin (1)");
+        cy.verifyElement(
+            groupsSelector.textDefaultGroup,
+            groupsText.textDefaultGroup
+        );
+
+        // Verify tabs visibility
+        cy.get(groupsSelector.usersLink).should("be.visible");
+        cy.get(groupsSelector.permissionsLink).should("be.visible");
+        cy.get(groupsSelector.granularLink).should("be.visible");
+
+        commonGroupVerification();
+
+        // Users Tab Verification
+        cy.get(groupsSelector.usersLink).click();
+        cy.get('[data-cy="user-group-search-btn"]').should("be.visible");
+        cy.verifyElement(
+            groupsSelector.nameTableHeader,
+            groupsText.userNameTableHeader
+        );
+        cy.verifyElement(
+            groupsSelector.emailTableHeader,
+            groupsText.emailTableHeader
+        );
+
+        // Verify user data row is present (Admin group should have at least one user)
+
+        // Verify user name column with avatar and name text
+        cy.get('[data-cy="avatar-image"]').should("be.visible");
+        cy.get('[data-cy="user-name"]')
+            .should("be.visible")
+            .and("contain.text", "The Developer");
+        cy.get('[data-cy="user-email"]')
+            .should("be.visible")
+            .and("have.text", " dev@tooljet.io");
+
+        // Verify edit role button
+        cy.get('[data-cy="edit-role-button"]')
+            .should("be.visible")
+            .and("be.enabled");
+
+        // Verify Edit User Role Modal
+        cy.get('[data-cy="edit-role-button"]').click();
+        verifyEditUserRoleModal("dev@tooljet.io");
+        cy.get(groupsSelector.cancelButton).click();
+
+        // Permissions Tab Verification
+        cy.get(groupsSelector.permissionsLink).click();
+        verifyAdminHelperText(0);
+
+        verifyCheckPermissionStates("admin");
+        verifyPermissionCheckBoxLabelsAndHelperTexts();
+
+        // Granular Access Tab Verification
+        verifyGranularAccessByRole("admin");
+        verifyAdminHelperText(1);
+    });
+
+    it("should verify builder role UI elements and interactions", () => {
+        // Builder Group Navigation and Title Verification
+        cy.get(groupsSelector.groupLink("Builder")).click();
+        cy.verifyElement(groupsSelector.builderListItem, "Builder");
+        cy.verifyElement(groupsSelector.builderTitle, "Builder (0)");
+        cy.verifyElement(
+            groupsSelector.textDefaultGroup,
+            groupsText.textDefaultGroup
+        );
+
+        // Verify tabs visibility
+        cy.get(groupsSelector.usersLink).should("be.visible");
+        cy.get(groupsSelector.permissionsLink).should("be.visible");
+        cy.get(groupsSelector.granularLink).should("be.visible");
+
+        // Users Tab Verification - Empty State
+        verifyEmptyStates();
+
+        // Permissions Tab Verification
+        cy.get(groupsSelector.permissionsLink).click();
+        verifyCheckPermissionStates("builder");
+        verifyPermissionCheckBoxLabelsAndHelperTexts();
+        toggleAllPermissions();
+
+        // Granular Access Tab Verification
+        verifyGranularAccessByRole("builder");
+        cy.verifyElement(
+            groupsSelector.appHideLabel,
+            groupsText.appHideLabelPermissionModal
+        );
+
+        // Edit Modal Verification
+        verifyGranularEditModal("builder");
+
+        // Add Modal Verification
+        verifyGranularAddModal("builder");
+    });
+
+    it("should verify enduser role UI and interaction", () => {
+        // End-user Group Navigation and Title Verification
+        cy.get(groupsSelector.groupLink("End-user")).click();
+        cy.get(groupsSelector.groupLink("End-user")).verifyVisibleElement(
+            "have.text",
+            "End-user"
+        );
+        cy.get(groupsSelector.enduserTitle).verifyVisibleElement(
+            "have.text",
+            "End-user (0)"
+        );
+        cy.verifyElement(
+            groupsSelector.textDefaultGroup,
+            groupsText.textDefaultGroup
+        );
+
+        // Verify tabs visibility
+        cy.get(groupsSelector.usersLink).should("be.visible");
+        cy.get(groupsSelector.permissionsLink).should("be.visible");
+        cy.get(groupsSelector.granularLink).should("be.visible");
+
+        // Users Tab Verification - Empty State
+        verifyEmptyStates();
+
+        // Permissions Tab Verification
+        cy.get(groupsSelector.permissionsLink).click();
+        verifyEnduserHelperText(0);
+        verifyCheckPermissionStates("enduser");
+        verifyPermissionCheckBoxLabelsAndHelperTexts();
+
+        // Granular Access Tab Verification
+        cy.reload();
+        cy.wait(2000);
+        cy.get(groupsSelector.groupLink("End-user")).click();
+
+        verifyGranularAccessByRole("enduser");
+        verifyEnduserHelperText(1);
+        cy.verifyElement(
+            groupsSelector.appHideLabel,
+            groupsText.appHideLabelPermissionModal
+        );
+
+        // Edit Modal Verification
+        verifyGranularEditModal("enduser");
+
+        // Add Modal Verification
+        verifyGranularAddModal("enduser");
+    });
+});
diff --git a/cypress-tests/cypress/support/utils/manageGroups.js b/cypress-tests/cypress/support/utils/manageGroups.js
index 5142637780..72066059a1 100644
--- a/cypress-tests/cypress/support/utils/manageGroups.js
+++ b/cypress-tests/cypress/support/utils/manageGroups.js
@@ -10,612 +10,6 @@ import {
 } from "Support/utils/manageUsers";
 import { groupsText } from "Texts/manageGroups";
 
-export const manageGroupsElements = () => {
-  cy.get('[data-cy="page-title"]').should(($el) => {
-    expect($el.contents().last().text().trim()).to.eq("Groups");
-  });
-
-  cy.get('[data-cy="user-role-title"]').verifyVisibleElement(
-    "have.text",
-    "USER ROLE"
-  );
-
-  // Admin Permissions
-  // Admin List Item Verification
-  cy.verifyElement(groupsSelector.adminListItem, "Admin");
-  cy.verifyElement(groupsSelector.adminTitle, "Admin (1)");
-
-  // Group Permission Elements Verification
-  cy.verifyElement(
-    groupsSelector.createNewGroupButton,
-    groupsText.createNewGroupButton
-  );
-  cy.verifyElement(groupsSelector.usersLink, groupsText.usersLink);
-  cy.verifyElement(groupsSelector.permissionsLink, groupsText.permissionsLink);
-  cy.verifyElement(groupsSelector.granularLink, "Granular access");
-
-  // Resource Verification
-  cy.verifyElement(
-    groupsSelector.textDefaultGroup,
-    groupsText.textDefaultGroup
-  );
-  cy.verifyElement(
-    groupsSelector.nameTableHeader,
-    groupsText.userNameTableHeader
-  );
-  cy.verifyElement(
-    groupsSelector.emailTableHeader,
-    groupsText.emailTableHeader
-  );
-
-  // Permissions Page Navigation and Verifications
-  cy.get(groupsSelector.permissionsLink).click();
-  cy.get(groupsSelector.helperTextAdminAppAccess)
-    .eq(0)
-    .verifyVisibleElement("have.text", groupsText.adminAccessHelperText);
-
-  // Granular Access Verifications
-  cy.verifyElement(groupsSelector.resourcesApps, groupsText.resourcesApps);
-  cy.verifyElement(
-    groupsSelector.permissionsTableHeader,
-    groupsText.permissionsTableHeader
-  );
-  cy.get(groupsSelector.appsCreateCheck)
-    .should("be.visible")
-    .and("be.checked")
-    .and("be.disabled");
-  cy.verifyElement(groupsSelector.appsCreateLabel, groupsText.createLabel);
-  cy.verifyElement(
-    groupsSelector.appCreateHelperText,
-    groupsText.appCreateHelperText
-  );
-  cy.get(groupsSelector.appsDeleteCheck)
-    .should("be.visible")
-    .and("be.checked")
-    .and("be.disabled");
-  cy.verifyElement(groupsSelector.appsDeleteLabel, groupsText.deleteLabel);
-  cy.verifyElement(
-    groupsSelector.appDeleteHelperText,
-    groupsText.appDeleteHelperText
-  );
-
-  // Folder Permissions
-  cy.verifyElement(
-    groupsSelector.resourcesFolders,
-    groupsText.resourcesFolders
-  );
-  cy.verifyElement(
-    groupsSelector.foldersCreateLabel,
-    groupsText.folderCreateLabel
-  );
-  cy.verifyElement(
-    groupsSelector.foldersHelperText,
-    groupsText.folderHelperText
-  );
-  cy.get(groupsSelector.foldersCreateCheck)
-    .should("be.visible")
-    .and("be.checked")
-    .and("be.disabled");
-
-  // Workspace Variable Permissions
-  cy.verifyElement(
-    groupsSelector.resourcesWorkspaceVar,
-    groupsText.resourcesWorkspaceVar
-  );
-  cy.verifyElement(
-    groupsSelector.workspaceCreateLabel,
-    groupsText.workspaceCreateLabel
-  );
-  cy.verifyElement(
-    groupsSelector.workspaceHelperText,
-    groupsText.workspaceHelperText
-  );
-  cy.get(groupsSelector.workspaceVarCheckbox)
-    .should("be.visible")
-    .and("be.checked")
-    .and("be.disabled");
-  // Granular Permissions
-  cy.get(groupsSelector.granularLink).click();
-  cy.verifyElement(groupsSelector.nameTableHeader, groupsText.nameTableHeader);
-  cy.verifyElement(
-    groupsSelector.permissionsTableHeader,
-    groupsText.granularAccessPermissionHeader
-  );
-  cy.verifyElement(
-    `${groupsSelector.resourceHeader}:eq(1)`,
-    groupsText.resourcesTableHeader
-  );
-  cy.verifyElement(groupsSelector.appsText, "  Apps");
-  cy.get(groupsSelector.appEditRadio)
-    .should("be.visible")
-    .and("be.checked")
-    .and("have.attr", "disabled");
-  cy.verifyElement(groupsSelector.appEditLabel, groupsText.appEditLabelText);
-  cy.verifyElement(
-    groupsSelector.appEditHelperText,
-    groupsText.appEditHelperText
-  );
-  cy.get(groupsSelector.appViewRadio)
-    .should("be.visible")
-    .and("have.attr", "disabled");
-  cy.verifyElement(groupsSelector.appViewLabel, groupsText.appViewLabel);
-  cy.verifyElement(
-    groupsSelector.appViewHelperText,
-    groupsText.appViewHelperText
-  );
-  cy.get(groupsSelector.appHideCheckbox).should("be.visible");
-  cy.verifyElement(
-    groupsSelector.appHideHelperText,
-    groupsText.appHideHelperText
-  );
-  cy.verifyElement(groupsSelector.addAppButton, groupsText.addButton);
-  cy.get(groupsSelector.addAppButton).should("be.disabled");
-
-  //Builder
-  cy.get(groupsSelector.groupLink("Builder")).click();
-  cy.verifyElement(groupsSelector.builderListItem, "Builder");
-  cy.verifyElement(groupsSelector.builderTitle, "Builder (0)");
-
-  // Group Permission Elements Verification
-  cy.verifyElement(
-    groupsSelector.createNewGroupButton,
-    groupsText.createNewGroupButton
-  );
-  cy.verifyElement(groupsSelector.usersLink, groupsText.usersLink);
-  cy.verifyElement(groupsSelector.permissionsLink, groupsText.permissionsLink);
-  cy.verifyElement(groupsSelector.granularLink, "Granular access");
-
-  // Resource Verification
-  cy.verifyElement(
-    groupsSelector.textDefaultGroup,
-    groupsText.textDefaultGroup
-  );
-  cy.get(groupsSelector.usersLink).click();
-  cy.verifyElement(
-    groupsSelector.nameTableHeader,
-    groupsText.userNameTableHeader
-  );
-  cy.verifyElement(
-    groupsSelector.emailTableHeader,
-    groupsText.emailTableHeader
-  );
-  cy.get(groupsSelector.userEmptyPageIcon).should("be.visible");
-  cy.get(groupsSelector.userEmptyPageTitle).verifyVisibleElement(
-    "have.text",
-    groupsText.userEmptyPageTitle
-  );
-  cy.get(groupsSelector.userEmptyPageHelperText).verifyVisibleElement(
-    "have.text",
-    groupsText.userEmptyPageHelperText
-  );
-
-  // Granular Access Verifications
-  cy.get(groupsSelector.permissionsLink).click();
-  cy.verifyElement(groupsSelector.resourcesApps, groupsText.resourcesApps);
-  cy.verifyElement(
-    groupsSelector.permissionsTableHeader,
-    groupsText.permissionsTableHeader
-  );
-
-  cy.get(groupsSelector.appsCreateCheck).should("be.visible").and("be.checked");
-  cy.verifyElement(groupsSelector.appsCreateLabel, groupsText.createLabel);
-  cy.verifyElement(
-    groupsSelector.appCreateHelperText,
-    groupsText.appCreateHelperText
-  );
-  toggleCheckbox(
-    groupsSelector.appsCreateCheck,
-    commonSelectors.toastMessage,
-    groupsText.permissionUpdatedToast
-  );
-
-  cy.get(groupsSelector.appsDeleteCheck).should("be.visible").and("be.checked");
-  cy.verifyElement(groupsSelector.appsDeleteLabel, groupsText.deleteLabel);
-  cy.verifyElement(
-    groupsSelector.appDeleteHelperText,
-    groupsText.appDeleteHelperText
-  );
-  toggleCheckbox(
-    groupsSelector.appsDeleteCheck,
-    commonSelectors.toastMessage,
-    groupsText.permissionUpdatedToast
-  );
-
-  // Folder Permissions
-  cy.verifyElement(
-    groupsSelector.resourcesFolders,
-    groupsText.resourcesFolders
-  );
-  cy.get(groupsSelector.foldersCreateCheck)
-    .should("be.visible")
-    .and("be.checked");
-  cy.verifyElement(
-    groupsSelector.foldersCreateLabel,
-    groupsText.folderCreateLabel
-  );
-  cy.verifyElement(
-    groupsSelector.foldersHelperText,
-    groupsText.folderHelperText
-  );
-  toggleCheckbox(
-    groupsSelector.foldersCreateCheck,
-    commonSelectors.toastMessage,
-    groupsText.permissionUpdatedToast
-  );
-
-  // Workspace Variable Permissions
-  cy.verifyElement(
-    groupsSelector.resourcesWorkspaceVar,
-    groupsText.resourcesWorkspaceVar
-  );
-  cy.get(groupsSelector.workspaceVarCheckbox)
-    .should("be.visible")
-    .and("be.checked");
-  cy.verifyElement(
-    groupsSelector.workspaceCreateLabel,
-    groupsText.workspaceCreateLabel
-  );
-  cy.verifyElement(
-    groupsSelector.workspaceHelperText,
-    groupsText.workspaceHelperText
-  );
-  toggleCheckbox(
-    groupsSelector.workspaceVarCheckbox,
-    commonSelectors.toastMessage,
-    groupsText.permissionUpdatedToast
-  );
-
-  // Granular Permissions
-  cy.get(groupsSelector.granularLink).click();
-
-  cy.verifyElement(groupsSelector.nameTableHeader, groupsText.nameTableHeader);
-  cy.verifyElement(
-    groupsSelector.permissionsTableHeader,
-    groupsText.granularAccessPermissionHeader
-  );
-  cy.verifyElement(
-    `${groupsSelector.resourceHeader}:eq(1)`,
-    groupsText.resourcesTableHeader
-  );
-  cy.verifyElement(groupsSelector.appsText, groupsText.appsLink);
-  cy.get(groupsSelector.appEditRadio)
-    .should("be.visible")
-    .and("be.checked")
-    .and("be.enabled");
-  cy.verifyElement(groupsSelector.appEditLabel, groupsText.appEditLabelText);
-  cy.verifyElement(
-    groupsSelector.appEditHelperText,
-    groupsText.appEditHelperText
-  );
-  cy.get(groupsSelector.appViewRadio).should("be.visible").and("be.enabled");
-  cy.verifyElement(groupsSelector.appViewLabel, groupsText.appViewLabel);
-  cy.verifyElement(
-    groupsSelector.appViewHelperText,
-    groupsText.appViewHelperText
-  );
-  cy.get(groupsSelector.appHideCheckbox)
-    .should("be.visible")
-    .and("be.disabled");
-  cy.verifyElement(
-    groupsSelector.appHideLabel,
-    groupsText.appHideLabelPermissionModal
-  );
-  cy.verifyElement(
-    groupsSelector.appHideHelperText,
-    groupsText.appHideHelperText
-  );
-
-  cy.get(groupsSelector.granularAccessPermission)
-    .trigger("mouseenter")
-    .click({ force: true });
-  cy.get(".modal-base").should("be.visible");
-  cy.get(groupsSelector.deletePermissionIcon)
-    .should("be.visible")
-    .and("be.enabled");
-  cy.get(groupsSelector.deletePermissionIcon).click();
-  cy.get(".confirm-dialogue-modal").should("be.visible");
-  cy.verifyElement(groupsSelector.deleteMessage, groupsText.deleteMessage);
-  cy.get(groupsSelector.yesButton).should("be.visible").and("be.enabled");
-  cy.get(groupsSelector.cancelButton).should("be.visible").and("be.enabled");
-  cy.contains("Cancel").click();
-  cy.get(groupsSelector.granularAccessPermission)
-    .trigger("mouseenter")
-    .click({ force: true });
-  cy.verifyElement(
-    `${groupsSelector.addEditPermissionModalTitle}:eq(2)`,
-    groupsText.editPermissionModalTitle
-  );
-  permissionModal();
-
-  cy.get(groupsSelector.customradio).should("be.visible").should("be.disabled");
-  cy.verifyElement(groupsSelector.customLabel, groupsText.customLabel);
-  cy.verifyElement(
-    groupsSelector.customHelperText,
-    groupsText.customHelperText
-  );
-
-  cy.verifyElement(groupsSelector.confimButton, groupsText.updateButtonText);
-  cy.get(groupsSelector.confimButton).should("be.disabled");
-  cy.verifyElement(groupsSelector.cancelButton, groupsText.cancelButton);
-  cy.get(groupsSelector.cancelButton).click();
-
-  //Add modal
-  cy.verifyElement(groupsSelector.addAppButton, groupsText.addButton);
-  cy.get(groupsSelector.addAppButton)
-    .should("be.visible")
-    .and("be.enabled")
-    .click();
-  cy.verifyElement(
-    `${groupsSelector.addEditPermissionModalTitle}:eq(2)`,
-    groupsText.addPermissionModalTitle
-  );
-  permissionModal();
-  cy.get(groupsSelector.customradio).should("be.visible").should("be.disabled");
-  cy.verifyElement(groupsSelector.customLabel, groupsText.customLabel);
-  cy.verifyElement(
-    groupsSelector.customHelperText,
-    groupsText.customHelperText
-  );
-  cy.verifyElement(groupsSelector.confimButton, groupsText.addButtonText);
-  cy.get(groupsSelector.confimButton).should("be.disabled");
-  cy.verifyElement(groupsSelector.cancelButton, groupsText.cancelButton);
-  cy.get(groupsSelector.cancelButton).click();
-
-  //End User
-
-  cy.get(groupsSelector.groupLink("End-user")).click();
-  cy.get(groupsSelector.groupLink("End-user")).verifyVisibleElement(
-    "have.text",
-    "End-user"
-  );
-
-  cy.get(groupsSelector.enduserTitle).verifyVisibleElement(
-    "have.text",
-    "End-user (0)"
-  );
-
-  cy.verifyElement(
-    groupsSelector.createNewGroupButton,
-    groupsText.createNewGroupButton
-  );
-  cy.verifyElement(groupsSelector.usersLink, groupsText.usersLink);
-  cy.verifyElement(groupsSelector.permissionsLink, groupsText.permissionsLink);
-  cy.verifyElement(groupsSelector.granularLink, "Granular access");
-
-  // Resource Verification
-  cy.verifyElement(
-    groupsSelector.textDefaultGroup,
-    groupsText.textDefaultGroup
-  );
-  cy.get(groupsSelector.usersLink).click();
-  cy.verifyElement(
-    groupsSelector.nameTableHeader,
-    groupsText.userNameTableHeader
-  );
-  cy.verifyElement(
-    groupsSelector.emailTableHeader,
-    groupsText.emailTableHeader
-  );
-  cy.get(groupsSelector.userEmptyPageIcon).should("be.visible");
-  cy.get(groupsSelector.userEmptyPageTitle).verifyVisibleElement(
-    "have.text",
-    groupsText.userEmptyPageTitle
-  );
-  cy.get(groupsSelector.userEmptyPageHelperText).verifyVisibleElement(
-    "have.text",
-    groupsText.userEmptyPageHelperText
-  );
-
-  // Granular Access Verifications
-  cy.get(groupsSelector.permissionsLink).click();
-  cy.get(groupsSelector.helperTextAdminAppAccess)
-    .eq(0)
-    .verifyVisibleElement("have.text", groupsText.enduserAccessHelperText);
-  cy.verifyElement(groupsSelector.resourcesApps, groupsText.resourcesApps);
-  cy.verifyElement(
-    groupsSelector.permissionsTableHeader,
-    groupsText.permissionsTableHeader
-  );
-
-  cy.get(groupsSelector.appsCreateCheck)
-    .should("be.visible")
-    .and("not.be.checked")
-    .and("be.disabled");
-  cy.verifyElement(groupsSelector.appsCreateLabel, groupsText.createLabel);
-  cy.verifyElement(
-    groupsSelector.appCreateHelperText,
-    groupsText.appCreateHelperText
-  );
-  cy.get(groupsSelector.appsDeleteCheck)
-    .should("be.visible")
-    .and("not.be.checked")
-    .and("be.disabled");
-  cy.verifyElement(groupsSelector.appsDeleteLabel, groupsText.deleteLabel);
-  cy.verifyElement(
-    groupsSelector.appDeleteHelperText,
-    groupsText.appDeleteHelperText
-  );
-
-  // Folder Permissions
-  cy.verifyElement(
-    groupsSelector.resourcesFolders,
-    groupsText.resourcesFolders
-  );
-  cy.get(groupsSelector.foldersCreateCheck)
-    .should("be.visible")
-    .and("not.be.checked")
-    .and("be.disabled");
-  cy.verifyElement(
-    groupsSelector.foldersCreateLabel,
-    groupsText.folderCreateLabel
-  );
-  cy.verifyElement(
-    groupsSelector.foldersHelperText,
-    groupsText.folderHelperText
-  );
-
-  // Workspace Variable Permissions
-  cy.verifyElement(
-    groupsSelector.resourcesWorkspaceVar,
-    groupsText.resourcesWorkspaceVar
-  );
-  cy.get(groupsSelector.workspaceVarCheckbox)
-    .should("be.visible")
-    .and("not.be.checked")
-    .and("be.disabled");
-  cy.verifyElement(
-    groupsSelector.workspaceCreateLabel,
-    groupsText.workspaceCreateLabel
-  );
-  cy.verifyElement(
-    groupsSelector.workspaceHelperText,
-    groupsText.workspaceHelperText
-  );
-
-  // Granular Permissions
-  cy.get(groupsSelector.granularLink).click();
-  cy.verifyElement(groupsSelector.nameTableHeader, groupsText.nameTableHeader);
-  cy.verifyElement(
-    groupsSelector.permissionsTableHeader,
-    groupsText.granularAccessPermissionHeader
-  );
-  cy.verifyElement(
-    `${groupsSelector.resourceHeader}:eq(1)`,
-    groupsText.resourcesTableHeader
-  );
-  cy.verifyElement(groupsSelector.appsText, groupsText.appsLink);
-  cy.get(groupsSelector.appEditRadio)
-    .should("be.visible")
-    .and("not.be.checked")
-    .and("be.disabled");
-  cy.verifyElement(groupsSelector.appEditLabel, groupsText.appEditLabelText);
-  cy.verifyElement(
-    groupsSelector.appEditHelperText,
-    groupsText.appEditHelperText
-  );
-  cy.get(groupsSelector.appViewRadio)
-    .should("be.visible")
-    .and("be.disabled")
-    .and("be.checked");
-  cy.verifyElement(groupsSelector.appViewLabel, groupsText.appViewLabel);
-  cy.verifyElement(
-    groupsSelector.appViewHelperText,
-    groupsText.appViewHelperText
-  );
-  cy.get(groupsSelector.appHideCheckbox).should("be.visible").and("be.enabled");
-  cy.verifyElement(
-    groupsSelector.appHideLabel,
-    groupsText.appHideLabelPermissionModal
-  );
-  cy.verifyElement(
-    groupsSelector.appHideHelperText,
-    groupsText.appHideHelperText
-  );
-
-  cy.get(groupsSelector.granularAccessPermission)
-    .trigger("mouseenter")
-    .click({ force: true });
-  cy.get(".modal-base").should("be.visible");
-  cy.get(groupsSelector.deletePermissionIcon)
-    .should("be.visible")
-    .and("be.enabled");
-  cy.get(groupsSelector.deletePermissionIcon).click();
-  cy.get(".confirm-dialogue-modal").should("be.visible");
-  cy.verifyElement(groupsSelector.deleteMessage, groupsText.deleteMessage);
-  cy.get(groupsSelector.yesButton).should("be.visible").and("be.enabled");
-  cy.get(groupsSelector.cancelButton).should("be.visible").and("be.enabled");
-  cy.contains("Cancel").click();
-  cy.get(groupsSelector.granularAccessPermission)
-    .trigger("mouseenter")
-    .click({ force: true });
-  cy.verifyElement(
-    `${groupsSelector.addEditPermissionModalTitle}:eq(2)`,
-    groupsText.editPermissionModalTitle
-  );
-  permissionModal();
-
-  cy.get(groupsSelector.customradio).should("be.visible").should("be.disabled");
-  cy.verifyElement(groupsSelector.customLabel, groupsText.customLabel);
-  cy.verifyElement(
-    groupsSelector.customHelperText,
-    groupsText.customHelperText
-  );
-
-  cy.verifyElement(groupsSelector.confimButton, groupsText.updateButtonText);
-  cy.get(groupsSelector.confimButton).should("be.disabled");
-  cy.verifyElement(groupsSelector.cancelButton, groupsText.cancelButton);
-  cy.get(groupsSelector.cancelButton).click();
-  //Add Modal
-  cy.verifyElement(groupsSelector.addAppButton, groupsText.addButton);
-  cy.get(groupsSelector.addAppButton)
-    .should("be.visible")
-    .and("be.enabled")
-    .click();
-  cy.verifyElement(
-    `${groupsSelector.addEditPermissionModalTitle}:eq(2)`,
-    groupsText.addPermissionModalTitle
-  );
-  permissionModal();
-  cy.get(groupsSelector.customradio).should("be.visible").should("be.disabled");
-  cy.verifyElement(groupsSelector.customLabel, groupsText.customLabel);
-  cy.verifyElement(
-    groupsSelector.customHelperText,
-    groupsText.customHelperText
-  );
-  cy.verifyElement(groupsSelector.confimButton, groupsText.addButtonText);
-  cy.get(groupsSelector.confimButton).should("be.disabled");
-  cy.verifyElement(groupsSelector.cancelButton, groupsText.cancelButton);
-  cy.get(groupsSelector.cancelButton).click();
-};
-
-const toggleCheckbox = (selector, toastSelector, toastMessage) => {
-  cy.get(selector).should("be.visible").uncheck();
-  cy.verifyToastMessage(toastSelector, toastMessage);
-  cy.get(selector).check();
-  cy.verifyToastMessage(toastSelector, toastMessage);
-};
-
-// Permission Modal Verification
-export const permissionModal = () => {
-  cy.verifyElement(
-    groupsSelector.permissionNameLabel,
-    groupsText.permissionNameLabel
-  );
-  cy.verifyElement(
-    groupsSelector.permissionNameHelperText,
-    groupsText.permissionNameHelperText
-  );
-
-  cy.verifyElement(groupsSelector.permissionLabel, groupsText.permissionLabel);
-  cy.verifyElement(
-    groupsSelector.editPermissionLabel,
-    groupsText.editPermissionLabel
-  );
-  cy.verifyElement(
-    groupsSelector.editPermissionHelperText,
-    groupsText.editPermissionHelperText
-  );
-
-  cy.verifyElement(
-    groupsSelector.viewPermissionLabel,
-    groupsText.viewPermissionLabel
-  );
-  cy.verifyElement(
-    groupsSelector.viewPermissionHelperText,
-    groupsText.viewPermissionHelperText
-  );
-
-  cy.get(groupsSelector.hidePermissionInput).should("be.visible");
-  cy.verifyElement(groupsSelector.resourceLabel, groupsText.resourcesheader);
-  cy.get(groupsSelector.resourceContainer).should("be.visible");
-  cy.get(groupsSelector.allAppsRadio).should("be.visible").and("be.checked");
-  cy.verifyElement(groupsSelector.allAppsLabel, groupsText.allAppsLabel);
-  cy.verifyElement(
-    groupsSelector.allAppsHelperText,
-    groupsText.allAppsHelperText
-  );
-};
-
 export const addAppToGroup = (appName) => {
   cy.get(groupsSelector.appsLink).click();
   cy.wait(500);
@@ -897,8 +291,6 @@ export const inviteUserBasedOnRole = (firstName, email, role = "end-user") => {
   cy.get(commonSelectors.dashboardIcon).click();
 };
 
-
-
 export const setupWorkspaceAndInviteUser = (
   workspaceName,
   workspaceSlug,
@@ -917,8 +309,6 @@ export const setupWorkspaceAndInviteUser = (
   cy.wait(2000);
 };
 
-
-
 export const verifyUserPrivileges = (
   expectedButtonState,
   shouldHaveWorkspaceSettings
@@ -951,5 +341,4 @@ export const verifyUserRole = (userIdAlias, expectedRole, expectedGroups) => {
       expect(roleName).to.equal(expectedRole);
     });
   });
-};
-
+};
\ No newline at end of file
diff --git a/cypress-tests/cypress/support/utils/platform/groupsUI.js b/cypress-tests/cypress/support/utils/platform/groupsUI.js
new file mode 100644
index 0000000000..8d88e939dd
--- /dev/null
+++ b/cypress-tests/cypress/support/utils/platform/groupsUI.js
@@ -0,0 +1,1004 @@
+import { commonSelectors } from "Selectors/common";
+import { groupsSelector } from "Selectors/manageGroups";
+import { groupsText } from "Texts/manageGroups";
+
+export const verifyAdminHelperText = (index = 0) => {
+    cy.get(groupsSelector.helperTextAdminAppAccess)
+        .eq(index)
+        .should("be.visible")
+        .and("contain.text", "Admin has all permissions. This is not editable");
+
+    cy.get(groupsSelector.helperTextAdminAppAccess)
+        .eq(index)
+        .find("a")
+        .should("be.visible")
+        .and("have.text", "read documentation")
+        .and("have.attr", "href")
+        .and("include", "docs.tooljet.ai/docs/tutorial/manage-users-groups");
+};
+
+export const verifyEditUserRoleModal = (userEmail) => {
+    cy.get('[data-cy="modal-title"]')
+        .last()
+        .within(() => {
+            cy.get("span").should("be.visible").and("contain.text", "Edit user role");
+            cy.get('[data-cy="user-email"]')
+                .should("be.visible")
+                .and("have.text", userEmail);
+        });
+
+    cy.get(groupsSelector.userRoleLabel)
+        .should("be.visible")
+        .and("have.text", groupsText.userRole);
+    cy.get(groupsSelector.warningText)
+        .should("be.visible")
+        .and("have.text", groupsText.warningText);
+
+    cy.get(".react-select__control").should("be.visible");
+    cy.get(".react-select__placeholder")
+        .should("be.visible")
+        .and("contain.text", "Select new role of user");
+
+    cy.get(groupsSelector.cancelButton)
+        .should("be.visible")
+        .and("have.text", groupsText.cancelButton)
+        .and("be.enabled");
+
+    cy.get(groupsSelector.confimButton)
+        .should("be.visible")
+        .and("have.text", groupsText.continueButtonText)
+        .and("be.disabled");
+
+    cy.get('[data-cy="modal-close-button"]').should("be.visible");
+};
+
+export const toggleAllPermissions = () => {
+    permissions.forEach((permissionSelector) => {
+        cy.get(permissionSelector).should("be.visible").uncheck();
+        cy.verifyToastMessage(
+            commonSelectors.toastMessage,
+            groupsText.permissionUpdatedToast
+        );
+        cy.get(permissionSelector).check();
+        cy.verifyToastMessage(
+            commonSelectors.toastMessage,
+            groupsText.permissionUpdatedToast
+        );
+    });
+};
+
+export const verifyDeleteConfirmationModal = () => {
+    cy.get(".confirm-dialogue-modal").should("be.visible");
+    cy.verifyElement(groupsSelector.deleteMessage, groupsText.deleteMessage);
+    cy.get(groupsSelector.yesButton).should("be.visible").and("be.enabled");
+    cy.get(groupsSelector.cancelButton).should("be.visible").and("be.enabled");
+};
+
+export const verifyGranularEditModal = (role) => {
+    cy.get(groupsSelector.granularAccessPermission)
+        .trigger("mouseenter")
+        .click({ force: true });
+    cy.get(".modal-base").should("be.visible");
+
+    cy.get(groupsSelector.deletePermissionIcon)
+        .should("be.visible")
+        .and("be.enabled");
+    cy.get(groupsSelector.deletePermissionIcon).click();
+
+    verifyDeleteConfirmationModal();
+    cy.contains("Cancel").click();
+
+    cy.get(groupsSelector.granularAccessPermission)
+        .trigger("mouseenter")
+        .click({ force: true });
+    cy.verifyElement(
+        `${groupsSelector.addEditPermissionModalTitle}:eq(2)`,
+        groupsText.editPermissionModalTitle
+    );
+    permissionModal();
+
+    if (role === "builder" || role === "enduser") {
+        cy.get(groupsSelector.customradio).should("be.disabled");
+    } else {
+        cy.get(groupsSelector.customradio).should("be.enabled");
+    }
+    cy.verifyElement(groupsSelector.customLabel, groupsText.customLabel);
+    cy.verifyElement(
+        groupsSelector.customHelperText,
+        groupsText.customHelperText
+    );
+
+    cy.verifyElement(groupsSelector.confimButton, groupsText.updateButtonText);
+    cy.get(groupsSelector.confimButton).should("be.disabled");
+    cy.verifyElement(groupsSelector.cancelButton, groupsText.cancelButton);
+    cy.get(groupsSelector.cancelButton).click();
+};
+
+export const verifyGranularAddModal = (role) => {
+    cy.ifEnv("Community", () => {
+        cy.get(groupsSelector.addAppsButton)
+            .should("be.visible")
+            .and("be.enabled")
+            .click();
+    });
+
+    cy.ifEnv("Enterprise", () => {
+        cy.get(groupsSelector.addPermissionButton)
+            .should("be.visible")
+            .and("be.enabled")
+            .click();
+        cy.get(groupsSelector.addAppButton).click();
+    });
+
+    cy.verifyElement(
+        `${groupsSelector.addEditPermissionModalTitle}:eq(2)`,
+        groupsText.addPermissionModalTitle
+    );
+    permissionModal();
+
+    if (role === "builder" || role === "enduser") {
+        cy.get(groupsSelector.customradio).should("be.disabled");
+    } else {
+        cy.get(groupsSelector.customradio).should("be.enabled");
+    }
+    cy.verifyElement(groupsSelector.customLabel, groupsText.customLabel);
+    cy.verifyElement(
+        groupsSelector.customHelperText,
+        groupsText.customHelperText
+    );
+
+    cy.verifyElement(groupsSelector.confimButton, groupsText.addButtonText);
+    cy.get(groupsSelector.confimButton).should("be.disabled");
+    cy.verifyElement(groupsSelector.cancelButton, groupsText.cancelButton);
+    cy.get(groupsSelector.cancelButton).click();
+};
+
+export const verifyEnduserHelperText = (index = 0) => {
+    cy.get(groupsSelector.helperTextAdminAppAccess)
+        .eq(index)
+        .should("be.visible")
+        .and("contain.text", "End-user can only have permission to view apps");
+
+    cy.get(groupsSelector.helperTextAdminAppAccess)
+        .eq(index)
+        .find("a")
+        .should("be.visible")
+        .and("have.text", "read documentation")
+        .and("have.attr", "href")
+        .and("include", "docs.tooljet.ai/docs/tutorial/manage-users-groups");
+};
+
+export const verifyGranularPermissionModalUI = (
+    resourceType,
+    isEdit = false,
+    permissionName = ""
+) => {
+    // Permission name section
+    cy.get(groupsSelector.permissionNameLabel).verifyVisibleElement(
+        "have.text",
+        groupsText.permissionNameLabel
+    );
+    cy.get(groupsSelector.permissionNameInput).should("be.visible");
+
+    if (isEdit) {
+        cy.get(groupsSelector.permissionNameInput).should(
+            "have.value",
+            permissionName
+        );
+    } else {
+        cy.get(groupsSelector.permissionNameInput).should(
+            "have.attr",
+            "placeholder"
+        );
+    }
+
+    cy.get(groupsSelector.permissionNameHelperText).verifyVisibleElement(
+        "have.text",
+        groupsText.permissionNameHelperText
+    );
+
+    // Permission section
+    cy.get(groupsSelector.permissionLabel).verifyVisibleElement(
+        "have.text",
+        groupsText.permissionLabel
+    );
+
+    if (resourceType === "app") {
+        cy.verifyElement(
+            groupsSelector.editPermissionLabel,
+            groupsText.editPermissionLabel
+        );
+        cy.verifyElement(
+            groupsSelector.editPermissionHelperText,
+            groupsText.editPermissionHelperText
+        );
+        cy.verifyElement(
+            groupsSelector.viewPermissionLabel,
+            groupsText.viewPermissionLabel
+        );
+        cy.verifyElement(
+            groupsSelector.viewPermissionHelperText,
+            groupsText.viewPermissionHelperText
+        );
+
+        cy.get(groupsSelector.hidePermissionInput).should("be.visible");
+        cy.verifyElement(
+            groupsSelector.appHidePermissionModalLabel,
+            groupsText.appHideLabel
+        );
+        cy.verifyElement(
+            groupsSelector.appHidePermissionModalHelperText,
+            groupsText.appHideHelperText
+        );
+    }
+
+    if (resourceType === "workflow") {
+        cy.verifyElement(groupsSelector.workflowsBuildLabel, "Build");
+        cy.verifyElement(
+            groupsSelector.workflowsBuildHelperText,
+            "Access to workflow builder"
+        );
+        cy.verifyElement(groupsSelector.workflowsExecuteLabel, "Execute");
+        cy.verifyElement(
+            groupsSelector.workflowsExecuteHelperText,
+            "Only able to execute the workflow"
+        );
+    }
+
+    if (resourceType === "datasource") {
+        cy.verifyElement(groupsSelector.datasourcesConfigureLabel, "Configure");
+        cy.verifyElement(
+            groupsSelector.datasourcesConfigureHelperText,
+            "Access and edit connection detail"
+        );
+        cy.verifyElement(groupsSelector.datasourcesBuildWithLabel, "Build with");
+        cy.verifyElement(
+            groupsSelector.datasourcesBuildWithHelperText,
+            "Use in apps & workflows"
+        );
+    }
+
+    // Resources section
+    cy.get(groupsSelector.resourceLabel).verifyVisibleElement(
+        "have.text",
+        groupsText.resourcesheader
+    );
+    cy.get(groupsSelector.allAppsRadio).should("be.visible");
+
+    if (isEdit) {
+        cy.verifyElement(groupsSelector.allAppsLabel, groupsText.allAppsLabel);
+    } else {
+        cy.verifyElement(groupsSelector.allAppsLabel, groupsText.groupChipText);
+    }
+
+    cy.verifyElement(
+        groupsSelector.allAppsHelperText,
+        groupsText.allAppsHelperText
+    );
+    cy.get(groupsSelector.customradio).should("be.visible");
+    cy.verifyElement(groupsSelector.customLabel, groupsText.customLabel);
+    cy.verifyElement(
+        groupsSelector.customHelperText,
+        groupsText.customHelperText
+    );
+
+    cy.verifyElement(
+        groupsSelector.confimButton,
+        isEdit ? groupsText.updateButtonText : groupsText.addButtonText
+    );
+    cy.verifyElement(groupsSelector.cancelButton, groupsText.cancelButton);
+
+    if (isEdit) {
+        cy.get(groupsSelector.deletePermissionIcon).should("be.visible");
+    }
+};
+
+export const verifyGranularPermissionModalStates = (resourceType, role) => {
+    const stateConfig = {
+        app: {
+            builder: {
+                editRadio: { checked: true, enabled: true },
+                viewRadio: { checked: false, enabled: true },
+                hideCheckbox: { enabled: false },
+                allAppsRadio: { checked: true, enabled: false },
+                customRadio: { checked: false, enabled: false },
+            },
+            enduser: {
+                editRadio: { checked: false, enabled: false },
+                viewRadio: { checked: true, enabled: false },
+                hideCheckbox: { enabled: true },
+                allAppsRadio: { checked: true, enabled: false },
+                customRadio: { checked: false, enabled: false },
+            },
+            custom: {
+                editRadio: { checked: true, enabled: true },
+                viewRadio: { checked: false, enabled: true },
+                hideCheckbox: { enabled: true },
+                allAppsRadio: { checked: true, enabled: true },
+                customRadio: { checked: false, enabled: true },
+            },
+        },
+        workflow: {
+            builder: {
+                buildRadio: { checked: true, enabled: true },
+                executeRadio: { checked: false, enabled: true },
+                allAppsRadio: { checked: true, enabled: false },
+                customRadio: { checked: false, enabled: false },
+            },
+            enduser: {
+                buildRadio: { checked: false, enabled: false },
+                executeRadio: { checked: true, enabled: false },
+                allAppsRadio: { checked: true, enabled: false },
+                customRadio: { checked: false, enabled: false },
+            },
+            custom: {
+                buildRadio: { checked: true, enabled: true },
+                executeRadio: { checked: false, enabled: true },
+                allAppsRadio: { checked: true, enabled: true },
+                customRadio: { checked: false, enabled: true },
+            },
+        },
+        datasource: {
+            builder: {
+                configureRadio: { checked: true, enabled: true },
+                buildWithRadio: { checked: false, enabled: true },
+                allAppsRadio: { checked: true, enabled: false },
+                customRadio: { checked: false, enabled: false },
+            },
+            custom: {
+                configureRadio: { checked: true, enabled: true },
+                buildWithRadio: { checked: false, enabled: true },
+                allAppsRadio: { checked: true, enabled: true },
+                customRadio: { checked: false, enabled: true },
+            },
+        },
+    };
+
+    const config = stateConfig[resourceType][role];
+
+    if (resourceType === "app") {
+        cy.get(groupsSelector.editPermissionRadio)
+            .should("be.visible")
+            .and(config.editRadio.checked ? "be.checked" : "not.be.checked")
+            .and(config.editRadio.enabled ? "be.enabled" : "be.disabled");
+
+        cy.get(groupsSelector.viewPermissionRadio)
+            .should("be.visible")
+            .and(config.viewRadio.checked ? "be.checked" : "not.be.checked")
+            .and(config.viewRadio.enabled ? "be.enabled" : "be.disabled");
+
+        cy.get(groupsSelector.hidePermissionInput)
+            .should("be.visible")
+            .and(config.hideCheckbox.enabled ? "be.enabled" : "be.disabled");
+    }
+
+    if (resourceType === "workflow") {
+        cy.get(groupsSelector.buildWorkflowradio)
+            .should("be.visible")
+            .and(config.buildRadio.checked ? "be.checked" : "not.be.checked")
+            .and(config.buildRadio.enabled ? "be.enabled" : "be.disabled");
+
+        cy.get(groupsSelector.executeWorkflowradio)
+            .should("be.visible")
+            .and(config.executeRadio.checked ? "be.checked" : "not.be.checked")
+            .and(config.executeRadio.enabled ? "be.enabled" : "be.disabled");
+    }
+
+    if (resourceType === "datasource") {
+        cy.get(groupsSelector.configureDatasourceradio)
+            .should("be.visible")
+            .and(config.configureRadio.checked ? "be.checked" : "not.be.checked")
+            .and(config.configureRadio.enabled ? "be.enabled" : "be.disabled");
+
+        cy.get(groupsSelector.buildWithDatasourceRadio)
+            .should("be.visible")
+            .and(config.buildWithRadio.checked ? "be.checked" : "not.be.checked")
+            .and(config.buildWithRadio.enabled ? "be.enabled" : "be.disabled");
+    }
+
+    cy.get(groupsSelector.allAppsRadio)
+        .should("be.visible")
+        .and(config.allAppsRadio.checked ? "be.checked" : "not.be.checked")
+        .and(config.allAppsRadio.enabled ? "be.enabled" : "be.disabled");
+
+    cy.get(groupsSelector.customradio)
+        .should("be.visible")
+        .and(config.customRadio.checked ? "be.checked" : "not.be.checked")
+        .and(config.customRadio.enabled ? "be.enabled" : "be.disabled");
+};
+
+export const verifyModalFields = (isEdit = false, groupName = "") => {
+    // Modal header verification
+    cy.get(groupsSelector.permissionNameLabel).verifyVisibleElement(
+        "have.text",
+        groupsText.permissionNameLabel
+    );
+    cy.get(groupsSelector.permissionNameInput)
+        .should("be.visible")
+        .and(
+            isEdit ? "have.value" : "have.attr",
+            isEdit ? groupName : "placeholder",
+            isEdit ? groupName : "Eg. Product analytics apps"
+        );
+    cy.get(groupsSelector.permissionNameHelperText).verifyVisibleElement(
+        "have.text",
+        groupsText.permissionNameHelperText
+    );
+
+    // Permission section verification
+    const permissionChecks = [
+        {
+            selector: groupsSelector.permissionLabel,
+            text: groupsText.permissionLabel,
+        },
+        {
+            selector: groupsSelector.editPermissionLabel,
+            text: groupsText.editPermissionLabel,
+        },
+        {
+            selector: groupsSelector.editPermissionHelperText,
+            text: groupsText.appEditHelperText,
+        },
+        {
+            selector: groupsSelector.viewPermissionLabel,
+            text: groupsText.viewPermissionLabel,
+        },
+        {
+            selector: groupsSelector.viewPermissionHelperText,
+            text: groupsText.appViewHelperText,
+        },
+    ];
+
+    permissionChecks.forEach(({ selector, text }) => {
+        cy.get(selector).verifyVisibleElement("have.text", text);
+    });
+
+    // Hide permission verification
+    cy.get(groupsSelector.hidePermissionInput).should("be.visible");
+    cy.get(groupsSelector.appHidePermissionModalLabel).verifyVisibleElement(
+        "have.text",
+        groupsText.appHideLabel
+    );
+    cy.get(groupsSelector.appHidePermissionModalHelperText).verifyVisibleElement(
+        "have.text",
+        groupsText.appHideHelperText
+    );
+
+    // Resource section verification
+    const resourceChecks = [
+        {
+            selector: groupsSelector.resourceLabel,
+            text: groupsText.resourcesheader,
+        },
+        {
+            selector: groupsSelector.allAppsLabel,
+            text: isEdit ? groupsText.allAppsLabel : groupsText.groupChipText,
+        },
+        {
+            selector: groupsSelector.allAppsHelperText,
+            text: groupsText.allAppsHelperText,
+        },
+    ];
+
+    resourceChecks.forEach(({ selector, text }) => {
+        cy.get(selector).verifyVisibleElement("have.text", text);
+    });
+
+    // Button states
+    cy.get(groupsSelector.confimButton).verifyVisibleElement(
+        "have.text",
+        isEdit ? groupsText.updateButtonText : groupsText.addButtonText
+    );
+    cy.get(groupsSelector.confimButton).should(
+        isEdit ? "be.enabled" : "be.disabled"
+    );
+    cy.get(groupsSelector.cancelButton).verifyVisibleElement(
+        "have.text",
+        groupsText.cancelButton
+    );
+
+    if (isEdit) {
+        cy.get(groupsSelector.deletePermissionIcon).should("be.visible");
+    }
+};
+
+export const verifyPermissionSection = () => {
+    const permissionElements = [
+        {
+            resource: groupsSelector.resourcesApps,
+            resourceText: groupsText.resourcesApps,
+            check: groupsSelector.appsCreateCheck,
+            label: groupsSelector.appsCreateLabel,
+            labelText: groupsText.createLabel,
+            helperText: groupsSelector.appCreateHelperText,
+            helperContent: groupsText.appCreateHelperText,
+        },
+        {
+            resource: groupsSelector.resourcesFolders,
+            resourceText: groupsText.resourcesFolders,
+            check: groupsSelector.foldersCreateCheck,
+            label: groupsSelector.foldersCreateLabel,
+            labelText: groupsText.folderCreateLabel,
+            helperText: groupsSelector.foldersHelperText,
+            helperContent: groupsText.folderHelperText,
+        },
+    ];
+
+    permissionElements.forEach(
+        ({
+            resource,
+            resourceText,
+            check,
+            label,
+            labelText,
+            helperText,
+            helperContent,
+        }) => {
+            cy.get(resource).verifyVisibleElement("have.text", resourceText);
+            cy.get(check).should("be.visible");
+            cy.get(check).check();
+            cy.verifyToastMessage(
+                commonSelectors.toastMessage,
+                groupsText.permissionUpdatedToast
+            );
+            cy.get(check).uncheck();
+            cy.verifyToastMessage(
+                commonSelectors.toastMessage,
+                groupsText.permissionUpdatedToast
+            );
+            cy.get(label).verifyVisibleElement("have.text", labelText);
+            cy.get(helperText).verifyVisibleElement("have.text", helperContent);
+        }
+    );
+};
+
+export const verifyEmptyStates = (customGroup = false) => {
+    // Users empty state
+    cy.get(groupsSelector.usersLink).click();
+    cy.get('[data-cy="user-group-search-btn"]').should("be.visible");
+    cy.verifyElement(
+        groupsSelector.nameTableHeader,
+        groupsText.userNameTableHeader
+    );
+    cy.verifyElement(
+        groupsSelector.emailTableHeader,
+        groupsText.emailTableHeader
+    );
+
+    cy.get(groupsSelector.userEmptyPageIcon).should("be.visible");
+    cy.get(groupsSelector.userEmptyPageTitle).verifyVisibleElement(
+        "have.text",
+        groupsText.userEmptyPageTitle
+    );
+    cy.get(groupsSelector.userEmptyPageHelperText).verifyVisibleElement(
+        "have.text",
+        groupsText.userEmptyPageHelperText
+    );
+
+    if (customGroup) {
+        // Granular permissions empty state
+        cy.get(groupsSelector.granularLink).click();
+        cy.get(groupsSelector.granularEmptyPageIcon).should("be.visible");
+        cy.get(groupsSelector.emptyPagePermissionTitle).verifyVisibleElement(
+            "have.text",
+            groupsText.emptyPagePermissionTitle
+        );
+        cy.get(groupsSelector.emptyPagePermissionHelperText).verifyVisibleElement(
+            "have.text",
+            groupsText.emptyPagePermissionHelperText
+        );
+    }
+};
+
+export const verifyGroupLinks = () => {
+    const links = [
+        { selector: groupsSelector.usersLink, text: groupsText.usersLink },
+        {
+            selector: groupsSelector.permissionsLink,
+            text: groupsText.permissionsLink,
+        },
+        { selector: groupsSelector.granularLink, text: "Granular access" },
+    ];
+
+    links.forEach(({ selector, text }) => {
+        cy.get(selector).verifyVisibleElement("have.text", text);
+    });
+};
+
+export const commonGroupVerification = () => {
+    cy.verifyElement(
+        groupsSelector.textDefaultGroup,
+        groupsText.textDefaultGroup
+    );
+    cy.verifyElement(groupsSelector.usersLink, groupsText.usersLink);
+    cy.verifyElement(groupsSelector.permissionsLink, groupsText.permissionsLink);
+    cy.verifyElement(groupsSelector.granularLink, "Granular access");
+
+    cy.get(groupsSelector.usersLink).click();
+    cy.verifyElement(
+        groupsSelector.nameTableHeader,
+        groupsText.userNameTableHeader
+    );
+    cy.verifyElement(
+        groupsSelector.emailTableHeader,
+        groupsText.emailTableHeader
+    );
+};
+
+export const permissions =
+    Cypress.env("environment") === "Community"
+        ? [
+            groupsSelector.appsCreateCheck,
+            groupsSelector.appsDeleteCheck,
+            groupsSelector.foldersCreateCheck,
+            groupsSelector.workspaceVarCheckbox,
+        ]
+        : [
+            groupsSelector.appsCreateCheck,
+            groupsSelector.appsDeleteCheck,
+            groupsSelector.appPromoteCheck,
+            groupsSelector.appReleaseCheck,
+            groupsSelector.workflowsCreateCheck,
+            groupsSelector.workflowsDeleteCheck,
+            groupsSelector.datasourcesCreateCheck,
+            groupsSelector.datasourcesDeleteCheck,
+            groupsSelector.foldersCreateCheck,
+            groupsSelector.workspaceVarCheckbox,
+        ];
+
+export const updatePermissionCheckbox = (permissionSelector, action) => {
+    if (action === "check") {
+        cy.get(permissionSelector).check();
+        cy.verifyToastMessage(
+            commonSelectors.toastMessage,
+            groupsText.permissionUpdatedToast
+        );
+    }
+    if (action === "uncheck") {
+        cy.get(permissionSelector).uncheck();
+        cy.verifyToastMessage(
+            commonSelectors.toastMessage,
+            groupsText.permissionUpdatedToast
+        );
+    }
+};
+
+export const verifyCheckPermissionStates = (roleType, action = null) => {
+    const roleConfig = {
+        admin: { checked: true, enabled: false },
+        enduser: { checked: false, enabled: false },
+        builder: { checked: true, enabled: true },
+        custom: { checked: false, enabled: true },
+    };
+
+    const config = roleConfig[roleType];
+    if (!config) {
+        throw new Error(
+            `Invalid role type: ${roleType}. Must be one of: admin, enduser, builder, custom`
+        );
+    }
+
+    permissions.forEach((permissionSelector) => {
+        cy.get(permissionSelector)
+            .should("be.visible")
+            .and(config.checked ? "be.checked" : "not.be.checked")
+            .and(config.enabled ? "be.enabled" : "be.disabled");
+    });
+};
+
+export const verifyPermissionCheckBoxLabelsAndHelperTexts = () => {
+    const commonPermissions = [
+        { selector: groupsSelector.resourcesApps, text: groupsText.resourcesApps },
+        {
+            selector: groupsSelector.permissionsTableHeader,
+            text: groupsText.permissionsTableHeader,
+        },
+        { selector: groupsSelector.appsCreateLabel, text: groupsText.createLabel },
+        {
+            selector: groupsSelector.appCreateHelperText,
+            text: groupsText.appCreateHelperText,
+        },
+        { selector: groupsSelector.appsDeleteLabel, text: groupsText.deleteLabel },
+        {
+            selector: groupsSelector.appDeleteHelperText,
+            text: groupsText.appDeleteHelperText,
+        },
+        {
+            selector: groupsSelector.resourcesFolders,
+            text: groupsText.resourcesFolders,
+        },
+        {
+            selector: groupsSelector.foldersCreateLabel,
+            text: groupsText.folderCreateLabel,
+        },
+        {
+            selector: groupsSelector.foldersHelperText,
+            text: groupsText.folderHelperText,
+        },
+        {
+            selector: groupsSelector.resourcesWorkspaceVar,
+            text: groupsText.resourcesWorkspaceVar,
+        },
+        {
+            selector: groupsSelector.workspaceCreateLabel,
+            text: groupsText.workspaceCreateLabel,
+        },
+        {
+            selector: groupsSelector.workspaceHelperText,
+            text: groupsText.workspaceHelperText,
+        },
+    ];
+
+    commonPermissions.forEach(({ selector, text }) => {
+        cy.verifyElement(selector, text);
+    });
+
+    cy.ifEnv("Enterprise", () => {
+        const enterprisePermissions = [
+            { selector: groupsSelector.appPromoteLabel, text: "Promote" },
+            {
+                selector: groupsSelector.appPromoteHelperText,
+                text: "Promote any app in this workspace",
+            },
+            { selector: groupsSelector.appReleaseLabel, text: "Release" },
+            {
+                selector: groupsSelector.appReleaseHelperText,
+                text: "Release any app in this workspace",
+            },
+            { selector: groupsSelector.workflowsCreateLabel, text: "Create" },
+            {
+                selector: groupsSelector.workflowsCreateHelperText,
+                text: "Create workflow in this workspace",
+            },
+            { selector: groupsSelector.workflowsDeleteLabel, text: "Delete" },
+            {
+                selector: groupsSelector.workflowsDeleteHelperText,
+                text: "Delete any workflow in this workspace",
+            },
+            { selector: groupsSelector.datasourcesCreateLabel, text: "Create" },
+            {
+                selector: groupsSelector.datasourcesCreateHelperText,
+                text: "Create data source connections in this workspace",
+            },
+            { selector: groupsSelector.datasourcesDeleteLabel, text: "Delete" },
+            {
+                selector: groupsSelector.datasourcesDeleteHelperText,
+                text: "Delete any data source in this workspace",
+            },
+        ];
+
+        enterprisePermissions.forEach(({ selector, text }) => {
+            cy.verifyElement(selector, text);
+        });
+    });
+};
+
+export const verifyGranularAccessByRole = (role) => {
+    const roleConfig = {
+        admin: {
+            appEditRadio: { checked: true, enabled: false },
+            appViewRadio: { checked: false, enabled: false },
+            appHideCheckbox: { enabled: false },
+            workflowBuildRadio: { checked: true, enabled: false },
+            workflowExecuteRadio: { checked: false, enabled: false },
+            datasourceConfigureRadio: { checked: true, enabled: false },
+            datasourceBuildWithRadio: { checked: false, enabled: false },
+            addButtonEnabled: false,
+            verifyHelperTexts: true,
+            hasDatasource: true,
+        },
+        builder: {
+            appEditRadio: { checked: true, enabled: true },
+            appViewRadio: { checked: false, enabled: true },
+            appHideCheckbox: { enabled: false },
+            workflowBuildRadio: { checked: true, enabled: true },
+            workflowExecuteRadio: { checked: false, enabled: true },
+            datasourceConfigureRadio: { checked: true, enabled: true },
+            datasourceBuildWithRadio: { checked: false, enabled: true },
+            addButtonEnabled: true,
+            verifyHelperTexts: false,
+            hasDatasource: true,
+        },
+        enduser: {
+            appEditRadio: { checked: false, enabled: false },
+            appViewRadio: { checked: true, enabled: false },
+            appHideCheckbox: { enabled: true },
+            workflowBuildRadio: { checked: false, enabled: false },
+            workflowExecuteRadio: { checked: true, enabled: false },
+            addButtonEnabled: true,
+            verifyHelperTexts: false,
+            hasDatasource: false,
+        },
+    };
+
+    const config = roleConfig[role];
+
+    cy.get(groupsSelector.granularLink).click();
+
+    if (role === "admin") {
+        cy.verifyElement(
+            groupsSelector.nameTableHeader,
+            groupsText.nameTableHeader
+        );
+        cy.verifyElement(
+            groupsSelector.permissionsTableHeader,
+            groupsText.granularAccessPermissionHeader
+        );
+        cy.verifyElement(
+            `${groupsSelector.resourceHeader}:eq(1)`,
+            groupsText.resourcesTableHeader
+        );
+    }
+
+    cy.verifyElement(groupsSelector.appsText, "  Apps");
+
+    cy.get(groupsSelector.appEditRadio)
+        .should("be.visible")
+        .and(config.appEditRadio.checked ? "be.checked" : "not.be.checked")
+        .and(
+            config.appEditRadio.enabled ? "be.enabled" : "have.attr",
+            config.appEditRadio.enabled ? "" : "disabled"
+        );
+
+    cy.get(groupsSelector.appViewRadio)
+        .should("be.visible")
+        .and(
+            config.appViewRadio.enabled ? "be.enabled" : "have.attr",
+            config.appViewRadio.enabled ? "" : "disabled"
+        );
+
+    cy.get(groupsSelector.appHideCheckbox)
+        .should("be.visible")
+        .and(config.appHideCheckbox.enabled ? "be.enabled" : "be.disabled");
+
+    if (config.verifyHelperTexts) {
+        cy.verifyElement(groupsSelector.appEditLabel, groupsText.appEditLabelText);
+        cy.verifyElement(
+            groupsSelector.appEditHelperText,
+            groupsText.appEditHelperText
+        );
+        cy.verifyElement(groupsSelector.appViewLabel, groupsText.appViewLabel);
+        cy.verifyElement(
+            groupsSelector.appViewHelperText,
+            groupsText.appViewHelperText
+        );
+        cy.verifyElement(
+            groupsSelector.appHideHelperText,
+            groupsText.appHideHelperText
+        );
+    }
+
+    cy.verifyElement(groupsSelector.groupChip("All apps"), "All apps");
+
+    cy.ifEnv("Community", () => {
+        cy.get(groupsSelector.addAppButton).should(
+            config.addButtonEnabled ? "be.enabled" : "be.disabled"
+        );
+    });
+
+    cy.ifEnv("Enterprise", () => {
+        cy.verifyElement(groupsSelector.workflowsText, "Workflows");
+
+        cy.get(groupsSelector.workflowsBuildRadio)
+            .should("be.visible")
+            .and(config.workflowBuildRadio.checked ? "be.checked" : "not.be.checked")
+            .and(
+                config.workflowBuildRadio.enabled ? "be.enabled" : "have.attr",
+                config.workflowBuildRadio.enabled ? "" : "disabled"
+            );
+
+        cy.get(groupsSelector.workflowsExecuteRadio)
+            .should("be.visible")
+            .and(
+                config.workflowExecuteRadio.enabled ? "be.enabled" : "have.attr",
+                config.workflowExecuteRadio.enabled ? "" : "disabled"
+            );
+
+        if (config.verifyHelperTexts) {
+            cy.verifyElement(groupsSelector.workflowsBuildLabel, "Build");
+            cy.verifyElement(
+                groupsSelector.workflowsBuildHelperText,
+                "Access to workflow builder"
+            );
+            cy.verifyElement(groupsSelector.workflowsExecuteLabel, "Execute");
+            cy.verifyElement(
+                groupsSelector.workflowsExecuteHelperText,
+                "Only able to execute the workflow"
+            );
+        }
+
+        cy.verifyElement(
+            groupsSelector.groupChip("All workflows"),
+            "All workflows"
+        );
+
+        if (config.hasDatasource) {
+            cy.verifyElement(groupsSelector.datasourcesText, "  Data sources");
+
+            cy.get(groupsSelector.datasourcesConfigureRadio)
+                .should("be.visible")
+                .and(
+                    config.datasourceConfigureRadio.checked
+                        ? "be.checked"
+                        : "not.be.checked"
+                )
+                .and(
+                    config.datasourceConfigureRadio.enabled ? "be.enabled" : "have.attr",
+                    config.datasourceConfigureRadio.enabled ? "" : "disabled"
+                );
+
+            cy.get(groupsSelector.datasourcesBuildWithRadio)
+                .should("be.visible")
+                .and(
+                    config.datasourceBuildWithRadio.enabled ? "be.enabled" : "have.attr",
+                    config.datasourceBuildWithRadio.enabled ? "" : "disabled"
+                );
+
+            if (config.verifyHelperTexts) {
+                cy.verifyElement(groupsSelector.datasourcesConfigureLabel, "Configure");
+                cy.verifyElement(
+                    groupsSelector.datasourcesConfigureHelperText,
+                    "Access & edit connection details"
+                );
+                cy.verifyElement(
+                    groupsSelector.datasourcesBuildWithLabel,
+                    "Build with"
+                );
+                cy.verifyElement(
+                    groupsSelector.datasourcesBuildWithHelperText,
+                    "Use in apps & workflows"
+                );
+            }
+
+            cy.verifyElement(
+                groupsSelector.groupChip("All data source"),
+                "All data sources"
+            );
+        }
+
+        cy.verifyElement(groupsSelector.addPermissionButton, "Add permission");
+        cy.get(groupsSelector.addPermissionButton).should(
+            config.addButtonEnabled ? "be.enabled" : "be.disabled"
+        );
+    });
+};
+
+export const permissionModal = () => {
+    cy.verifyElement(
+        groupsSelector.permissionNameLabel,
+        groupsText.permissionNameLabel
+    );
+    cy.verifyElement(
+        groupsSelector.permissionNameHelperText,
+        groupsText.permissionNameHelperText
+    );
+
+    cy.verifyElement(groupsSelector.permissionLabel, groupsText.permissionLabel);
+    cy.verifyElement(
+        groupsSelector.editPermissionLabel,
+        groupsText.editPermissionLabel
+    );
+    cy.verifyElement(
+        groupsSelector.editPermissionHelperText,
+        groupsText.editPermissionHelperText
+    );
+
+    cy.verifyElement(
+        groupsSelector.viewPermissionLabel,
+        groupsText.viewPermissionLabel
+    );
+    cy.verifyElement(
+        groupsSelector.viewPermissionHelperText,
+        groupsText.viewPermissionHelperText
+    );
+
+    cy.get(groupsSelector.hidePermissionInput).should("be.visible");
+    cy.verifyElement(groupsSelector.resourceLabel, groupsText.resourcesheader);
+    cy.get(groupsSelector.resourceContainer).should("be.visible");
+    cy.get(groupsSelector.allAppsRadio).should("be.visible").and("be.checked");
+    cy.verifyElement(groupsSelector.allAppsLabel, groupsText.allAppsLabel);
+    cy.verifyElement(
+        groupsSelector.allAppsHelperText,
+        groupsText.allAppsHelperText
+    );
+};
\ No newline at end of file
diff --git a/cypress-tests/cypress/support/utils/userPermissions.js b/cypress-tests/cypress/support/utils/userPermissions.js
index 6c8ed6933f..44c56d700c 100644
--- a/cypress-tests/cypress/support/utils/userPermissions.js
+++ b/cypress-tests/cypress/support/utils/userPermissions.js
@@ -176,14 +176,15 @@ export const verifyBasicPermissions = (canCreate = true) => {
     canCreate ? "exist" : "not.exist"
   );
   cy.get('[data-cy="database-icon"]').should(canCreate ? "exist" : "not.exist");
-  cy.get(commonSelectors.workspaceConstantsIcon).should(
-    canCreate ? "exist" : "not.exist"
-  );
+
 
   cy.ifEnv("Enterprise", () => {
     cy.get(commonSelectors.globalDataSourceIcon).should(
       canCreate ? "exist" : "not.exist"
     );
+    cy.get(commonSelectors.workspaceConstantsIcon).should(
+      canCreate ? "exist" : "not.exist"
+    );
   });
 };
 

From 4290ab46d52acd33318f4e25befbff6118b41368 Mon Sep 17 00:00:00 2001
From: Adish M <44204658+adishM98@users.noreply.github.com>
Date: Tue, 21 Oct 2025 15:30:34 +0530
Subject: [PATCH 081/157] =?UTF-8?q?=F0=9F=9A=80=20chore:=20update=20submod?=
 =?UTF-8?q?ules=20to=20latest=20lts-3.16=20after=20auto-merge=20(#14379)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/ee | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/ee b/frontend/ee
index ea751ada29..e15a081f27 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit ea751ada293469f8fdf5e3cb62b39b60c60071ef
+Subproject commit e15a081f27f142460133f90040e94ce3ffe6d425

From 359f175514f43c78fd534872c5add5ec951bb8d4 Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Tue, 21 Oct 2025 17:17:02 +0530
Subject: [PATCH 082/157] Feat: Expose the columnKey property inside
 sortApplied variable for Table component

---
 .../TableExposedVariables.jsx                  | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableExposedVariables/TableExposedVariables.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableExposedVariables/TableExposedVariables.jsx
index 688ef8d04f..513a2ba3c4 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableExposedVariables/TableExposedVariables.jsx
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableExposedVariables/TableExposedVariables.jsx
@@ -78,6 +78,14 @@ export const TableExposedVariables = ({
     [table]
   );
 
+  const getColumnKey = useCallback(
+    (columnId) => {
+      const column = table.getColumn(columnId);
+      return column.columnDef.accessorKey;
+    },
+    [table]
+  );
+
   useEffect(() => {
     setExposedVariables({
       currentData: data,
@@ -145,7 +153,13 @@ export const TableExposedVariables = ({
   // Expose sort applied
   useEffect(() => {
     if (sorting.length > 0) {
-      const sortApplied = [{ column: getColumnName(sorting[0].id), direction: sorting[0].desc ? 'desc' : 'asc' }];
+      const sortApplied = [
+        {
+          column: getColumnName(sorting[0].id),
+          columnKey: getColumnKey(sorting[0].id),
+          direction: sorting[0].desc ? 'desc' : 'asc',
+        },
+      ];
       setExposedVariables({ sortApplied });
       fireEvent('onSort');
       prevSortingLength.current = sorting.length;
@@ -154,7 +168,7 @@ export const TableExposedVariables = ({
       prevSortingLength.current && fireEvent('onSort');
       prevSortingLength.current = null;
     }
-  }, [sorting, getColumnName, setExposedVariables, fireEvent]);
+  }, [sorting, getColumnName, getColumnKey, setExposedVariables, fireEvent]);
 
   //   // Expose current page data
   useEffect(() => {

From 58f159ec89899f591925f5a0633efc7e308b881b Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Tue, 21 Oct 2025 17:18:33 +0530
Subject: [PATCH 083/157] version bump

---
 .version          | 2 +-
 frontend/.version | 2 +-
 server/.version   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.version b/.version
index 74de710a35..d7ea6305e8 100644
--- a/.version
+++ b/.version
@@ -1 +1 @@
-3.20.24-lts
+3.20.25-lts
diff --git a/frontend/.version b/frontend/.version
index 74de710a35..d7ea6305e8 100644
--- a/frontend/.version
+++ b/frontend/.version
@@ -1 +1 @@
-3.20.24-lts
+3.20.25-lts
diff --git a/server/.version b/server/.version
index 74de710a35..d7ea6305e8 100644
--- a/server/.version
+++ b/server/.version
@@ -1 +1 @@
-3.20.24-lts
+3.20.25-lts

From 1ee0f9ac2693fa4c20c020b3d07ef4fc863b2982 Mon Sep 17 00:00:00 2001
From: Yukti Goyal <yuktigoyal02@gmail.com>
Date: Thu, 16 Oct 2025 19:12:02 +0530
Subject: [PATCH 084/157] Dashboard, homepage changes with data-cy

---
 cypress-tests/cypress/commands/commands.js    |  19 +--
 .../cypress/constants/selectors/common.js     |   5 +-
 .../cypress/constants/selectors/dashboard.js  |  25 ++++
 .../cypress/constants/texts/common.js         |   2 +
 .../cypress/constants/texts/dashboard.js      |  13 +++
 .../commonTestcases/workspace/dashboard.cy.js |  27 +++--
 .../workspace/homePageDashboard.cy.js         | 109 ++++++++++++++++++
 cypress-tests/cypress/support/utils/common.js |  10 +-
 .../src/AppBuilder/Header/EditAppName.jsx     |   1 +
 frontend/src/GetStarted/GetStartedHome.jsx    |  64 ++++++++--
 frontend/src/_ui/Header/index.jsx             |   1 -
 frontend/src/_ui/Icon/solidIcons/Apps.jsx     |   1 +
 frontend/src/_ui/Icon/solidIcons/Corners.jsx  |   1 +
 .../src/_ui/Icon/solidIcons/Datasource.jsx    |   1 +
 .../src/_ui/Icon/solidIcons/TooljetAI.jsx     |   1 +
 .../src/_ui/Icon/solidIcons/Workflows.jsx     |   2 +-
 .../BaseSettingsMenu/BaseSettingsMenu.jsx     |   2 +-
 17 files changed, 249 insertions(+), 35 deletions(-)
 create mode 100644 cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/homePageDashboard.cy.js

diff --git a/cypress-tests/cypress/commands/commands.js b/cypress-tests/cypress/commands/commands.js
index 6894f12075..74451e78a5 100644
--- a/cypress-tests/cypress/commands/commands.js
+++ b/cypress-tests/cypress/commands/commands.js
@@ -230,14 +230,17 @@ Cypress.Commands.add("createAppFromTemplate", (appName) => {
   cy.get('[data-cy="app-name-label"]').should("have.text", "App Name");
 });
 
-// Cypress.Commands.add("renameApp", (appName) => {
-//   cy.get(commonSelectors.appNameInput).type(
-//     `{selectAll}{backspace}${appName}`,
-//     { force: true }
-//   );
-//   cy.forceClickOnCanvas();
-//   cy.waitForAutoSave();
-// });
+Cypress.Commands.add("renameApp", (appName) => {
+  cy.get(commonSelectors.appNameInput).type(
+    `{selectAll}{backspace}${appName}`,
+    { force: true }
+  );
+  cy.get(commonSelectors.renameAppButton).should("be.enabled").click();
+  cy.verifyToastMessage(
+    commonSelectors.toastMessage,
+    commonText.appRenamedToast
+  );
+});
 
 Cypress.Commands.add(
   "clearCodeMirror",
diff --git a/cypress-tests/cypress/constants/selectors/common.js b/cypress-tests/cypress/constants/selectors/common.js
index 5bffc17390..57862218b6 100644
--- a/cypress-tests/cypress/constants/selectors/common.js
+++ b/cypress-tests/cypress/constants/selectors/common.js
@@ -89,6 +89,7 @@ export const commonSelectors = {
   invitedUserEmail: '[data-cy="email-input-value"]',
   invitedUseremail: '[data-cy="email-input-input-value"]',
   acceptInviteButton: '[data-cy="accept-invite-button"]',
+  homePageIcon: '[data-cy="icon-home"]',
   databaseIcon: '[data-cy="icon-database"]',
   profileSettings: '[data-cy="profile-settings"]',
   workspaceSettings: '[data-cy="workspace-settings"]',
@@ -176,7 +177,8 @@ export const commonSelectors = {
   resetPasswordButton: '[data-cy="reset-password-button"]',
   resetPasswordPageDescription: '[data-cy="reset-password-page-description"]',
   backToLoginButton: '[data-cy="back-to-login"]',
-  breadcrumbTitle: '[data-cy="app-header-label"]>>',
+  // breadcrumbTitle: '[data-cy="app-header-label"]>>',
+  breadcrumbTitle: '[data-cy="breadcrumb-header-applications"]>>',
   // breadcrumbPageTitle: '[data-cy="app-header-label"]',
   breadcrumbPageTitle: '[data-cy="breadcrumb-page-title"]',
   labelFullNameInput: '[data-cy="name-label"]',
@@ -190,6 +192,7 @@ export const commonSelectors = {
   addNewDataSourceButton: '[data-cy="add-new-data-source-button"]',
   saveButton: '[data-cy="save-button"]',
   appEditButton: '[data-cy="edit-button"]',
+  editorAppNameInput: '[data-cy="editor-app-name-input"]',
   onboardingRadioButton: (radioButtonText) => {
     return `[data-cy="${cyParamName(radioButtonText)}-radio-button"]`;
   },
diff --git a/cypress-tests/cypress/constants/selectors/dashboard.js b/cypress-tests/cypress/constants/selectors/dashboard.js
index 50c0c87a0f..d98da7d2f2 100644
--- a/cypress-tests/cypress/constants/selectors/dashboard.js
+++ b/cypress-tests/cypress/constants/selectors/dashboard.js
@@ -55,4 +55,29 @@ export const dashboardSelector = {
   slugSuccessLabel: '[data-cy="slug-sucess-label"]',
   slugErrorLabel: '[data-cy="slug-error-label"]',
   editWorkspaceTitle: '[data-cy="edit-workspace-title"]',
+
+  homePagePromptHeader: '[data-cy="home-page-prompt-header"]',
+  promptInput: '[data-cy="prompt-input"]',
+  homePageDividerText: '[data-cy="divider-text"]',
+  appCardWidget: '[data-cy="getstarted-app-widget"]',
+  templateCardWidget: '[data-cy="getstarted-templates-widget"]',
+  databaseCardWidget: '[data-cy="getstarted-datasource-widget"]',
+  workflowCardWidget: '[data-cy="getstarted-workflow-widget"]',
+
+  widgetCardName: (cardType) => {
+    return `[data-cy="getstarted-${cardType}-widget"]`;
+  },
+  widgetCardTitle: '[data-cy="widget-card-title"]',
+  widgetCardDescription: '[data-cy="widget-card-description"]',
+  homePagePromptTextArea: '[data-cy="prompt-textarea"]',
+  promptEnterButton: '[data-cy="prompt-enter-button"]',
+  aiIcon: '[data-cy="ai-icon"]',
+  homePageAppIcon: '[data-cy="apps-icon"]',
+  homePageDatasourceIcon: '[data-cy="datasources-icon"]',
+  homePageWorkflowIcon: '[data-cy="workflows-icon"]',
+  homePageTemplateIcon: '[data-cy="templates-icon"]',
+
+  homePageIcon: (iconName) => {
+    return `[data-cy="${iconName}s-icon"]`;
+  }
 };
diff --git a/cypress-tests/cypress/constants/texts/common.js b/cypress-tests/cypress/constants/texts/common.js
index bc3f566129..996de524bf 100644
--- a/cypress-tests/cypress/constants/texts/common.js
+++ b/cypress-tests/cypress/constants/texts/common.js
@@ -28,6 +28,7 @@ export const commonText = {
   createFolder: "Create folder",
   AddedToFolderToast: "Added to folder.",
   appCreatedToast: "App created successfully!",
+  appRenamedToast: "App name has been updated!",
   appRemovedFromFolderMessage:
     "The app will be removed from this folder, do you want to continue?",
   appRemovedFromFolderTaost: "Removed from folder.",
@@ -135,6 +136,7 @@ export const commonText = {
   breadcrumbGlobalDatasourceTitle: "Global datasources",
   breadcrumbDatabaseTitle: "Databse",
   breadcrumbApplications: "Applications",
+  breadcrumbHome: "Home",
   breadcrumbSettings: "Settings",
   addNewDataSourceButton: "Add new datasource",
 
diff --git a/cypress-tests/cypress/constants/texts/dashboard.js b/cypress-tests/cypress/constants/texts/dashboard.js
index 09b73d3711..c33b37ab36 100644
--- a/cypress-tests/cypress/constants/texts/dashboard.js
+++ b/cypress-tests/cypress/constants/texts/dashboard.js
@@ -49,4 +49,17 @@ export const dashboardText = {
   folderName: (folderName) => {
     return folderName;
   },
+  homePageDividerText: "OR START WITH",
+  homePagePromptHeader: "What do you want to build today?",
+  appCardTitle: "Create a blank app",
+  appCardDescription: "Build custom apps that make internal processes efficient",
+  datasourceCardTitle: "Connect to a data source",
+  datasourceCardDescription:
+    "Link your tools to existing databases, spreadsheets, APIs, and more",
+  workflowCardTitle: "Create a workflow",
+  workflowCardDescription:
+    "Automate repetitive tasks to streamline business process",
+  exploreTemplateCardTitle: "Explore templates",
+  exploreTemplateCardDescription:
+    "Get started quickly with ready-to-deploy applications",
 };
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/dashboard.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/dashboard.cy.js
index 02eb2dc9d4..982096200a 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/dashboard.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/dashboard.cy.js
@@ -105,6 +105,12 @@ describe("dashboard", () => {
 
     cy.wait(500);
     cy.get(commonSelectors.settingsIcon).click();
+
+    cy.get(dashboardSelector.versionLabel).verifyVisibleElement(
+      "have.text",
+      "Version 2.9.2"
+    );
+
     cy.get(commonSelectors.marketplaceOption).verifyVisibleElement(
       "have.text",
       "Marketplace"
@@ -132,10 +138,6 @@ describe("dashboard", () => {
       dashboardText.dashboardAppsHeaderLabel
     );
 
-    cy.get(dashboardSelector.versionLabel).verifyVisibleElement(
-      "have.text",
-      "Version 2.9.2"
-    );
     cy.get(dashboardSelector.emptyPageImage).should("be.visible");
     cy.get(dashboardSelector.emptyPageHeader).verifyVisibleElement(
       "have.text",
@@ -158,7 +160,10 @@ describe("dashboard", () => {
 
     cy.get(dashboardSelector.appTemplateRow).should("be.visible");
     cy.reload();
+
+    verifyTooltip(commonSelectors.homePageIcon, "Home");
     verifyTooltip(commonSelectors.dashboardIcon, "Apps");
+    verifyTooltip(commonSelectors.globalWorkFlowsIcon, "Workflows");
     verifyTooltip(commonSelectors.databaseIcon, "ToolJet Database");
     verifyTooltip(commonSelectors.globalDataSourceIcon, "Data sources");
     verifyTooltip(
@@ -171,7 +176,7 @@ describe("dashboard", () => {
 
   it("Should verify app card elements and app card operations", () => {
     cy.exec("mkdir -p ./cypress/downloads/");
-    cy.exec("cd ./cypress/downloads/ && rm -rf *");
+    cy.exec("cd ./cypress/downloads/ && rm -rf '*'");
 
     const customLayout = {
       desktop: { top: 100, left: 20 },
@@ -180,7 +185,7 @@ describe("dashboard", () => {
 
     cy.apiCreateApp(data.appName);
     cy.visit(`${data.workspaceSlug}`);
-
+    cy.get('.basic-plan-migration-banner').invoke('css', 'display', 'none');
     cy.wait(2000);
     cy.get(commonSelectors.appCreationDetails).should("be.visible");
     cy.get(commonSelectors.appCard(data.appName)).should("be.visible");
@@ -189,6 +194,7 @@ describe("dashboard", () => {
       data.appName
     );
 
+
     viewAppCardOptions(data.appName);
     cy.get(
       commonSelectors.appCardOptions(commonText.changeIconOption)
@@ -205,7 +211,6 @@ describe("dashboard", () => {
     cy.get(
       commonSelectors.appCardOptions(commonText.deleteAppOption)
     ).verifyVisibleElement("have.text", commonText.deleteAppOption);
-
     modifyAndVerifyAppCardIcon(data.appName);
     createFolder(data.folderName);
 
@@ -261,12 +266,15 @@ describe("dashboard", () => {
       commonText.appRemovedFromFolderTaost,
       false
     );
+
     cy.get(commonSelectors.modalComponent).should("not.exist");
     cy.get(commonSelectors.empytyFolderImage).should("be.visible");
+    cy.wait(1000);
     cy.get(commonSelectors.emptyFolderText).verifyVisibleElement(
       "have.text",
       commonText.emptyFolderText
     );
+
     cy.get(commonSelectors.allApplicationsLink).click();
     deleteFolder(data.folderName);
 
@@ -277,6 +285,7 @@ describe("dashboard", () => {
     cy.wait(2000);
     cy.get(commonSelectors.appCardOptions(commonText.exportAppOption)).click();
     cy.get(commonSelectors.exportAllButton).click();
+    cy.wait(2000)
 
 
     cy.exec("ls ./cypress/downloads/").then((result) => {
@@ -292,9 +301,12 @@ describe("dashboard", () => {
       .and("have.text", dashboardText.appClonedToast);
     cy.wait(3000);
 
+    cy.get(commonSelectors.editorAppNameInput).click();
     cy.renameApp(data.cloneAppName);
     cy.apiAddComponentToApp(data.cloneAppName, "button", 25, 25);
+
     cy.backToApps();
+    cy.get('.basic-plan-migration-banner').invoke('css', 'display', 'none');
     cy.wait("@appLibrary");
     cy.wait(1000);
 
@@ -303,6 +315,7 @@ describe("dashboard", () => {
     cy.wait(1000);
 
     viewAppCardOptions(data.cloneAppName);
+
     cy.get(commonSelectors.deleteAppOption).click();
     cy.get(commonSelectors.modalMessage).verifyVisibleElement(
       "have.text",
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/homePageDashboard.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/homePageDashboard.cy.js
new file mode 100644
index 0000000000..6695398b27
--- /dev/null
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/homePageDashboard.cy.js
@@ -0,0 +1,109 @@
+import { fake } from "Fixtures/fake";
+import { commonSelectors } from "Selectors/common";
+import { dashboardSelector } from "Selectors/dashboard";
+import { commonText } from "Texts/common";
+import { dashboardText } from "Texts/dashboard";
+import { inviteUserToWorkspace } from "Support/utils/manageUsers";
+import { logout } from "Support/utils/common";
+import { setupAndUpdateRole } from "Support/utils/manageGroups";
+
+describe("Home Page Dashboard Testcases", () => {
+    let data = {};
+    beforeEach(() => {
+
+        data = {
+            workspaceName: fake.firstName,
+            workspaceSlug: fake.firstName.toLowerCase().replaceAll("[^A-Za-z]", ""),
+            firstName: fake.firstName,
+            email: fake.email.toLowerCase().replaceAll("[^A-Za-z]", ""),
+        };
+        cy.intercept("GET", "/api/library_apps").as("appLibrary");
+        cy.skipWalkthrough();
+
+        cy.apiLogin();
+        cy.apiCreateWorkspace(data.workspaceName, data.workspaceSlug);
+        cy.apiLogout();
+        cy.apiLogin();
+        cy.visit(`${data.workspaceSlug}`);
+
+    });
+
+    it("Should verify elements on home page dashboard", () => {
+        cy.get(commonSelectors.homePageIcon).click();
+        cy.get(commonSelectors.breadcrumbTitle).should(($el) => {
+            expect($el.contents().first().text().trim()).to.eq(
+                commonText.breadcrumbHome
+            );
+        });
+        cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement(
+            "have.text",
+            commonText.breadcrumbHome
+        );
+
+        cy.get(dashboardSelector.aiIcon).should("be.visible");
+        cy.get(dashboardSelector.homePagePromptHeader).verifyVisibleElement(
+            "have.text",
+            dashboardText.homePagePromptHeader
+        );
+
+        cy.get(dashboardSelector.promptInput).should("be.visible");
+        cy.get(dashboardSelector.homePagePromptTextArea).should("be.enabled").type("Build a task manager app");
+        cy.get(dashboardSelector.promptEnterButton).should("have.attr", "class").and("include", "tw-opacity-100");
+
+
+        cy.get(dashboardSelector.homePageDividerText).verifyVisibleElement(
+            "have.text",
+            dashboardText.homePageDividerText
+        );
+
+        // Define card types
+        const cardTypes = [
+            { type: 'app', title: dashboardText.appCardTitle, description: dashboardText.appCardDescription, url: `${data.workspaceSlug}` },
+            { type: 'datasource', title: dashboardText.datasourceCardTitle, description: dashboardText.datasourceCardDescription, url: 'data-sources' },
+            { type: 'workflow', title: dashboardText.workflowCardTitle, description: dashboardText.workflowCardDescription, url: 'workflows' },
+            { type: 'template', title: dashboardText.templateCardTitle, description: dashboardText.templateCardDescription, url: '#' }
+        ];
+
+
+        const env = Cypress.env('environment');
+
+        // Filter cards based on environment
+        const cardsToTest = cardTypes.filter(cardType => {
+            if (env === 'Enterprise') return ['app', 'datasource', 'workflow'].includes(cardType.type);
+            if (env === 'cloud') return ['add', 'datasource', 'template'].includes(cardType.type);
+            return false;
+        });
+
+        cardsToTest.forEach(cardType => {
+            cy.get(dashboardSelector.widgetCardName(cardType.type)).within(() => {
+                cy.get(dashboardSelector.homePageIcon(cardType.type)).should("be.visible");
+                cy.get(dashboardSelector.widgetCardTitle).verifyVisibleElement(
+                    "have.text",
+                    cardType.title
+                );
+                cy.get(dashboardSelector.widgetCardDescription).verifyVisibleElement(
+                    "have.text",
+                    cardType.description
+                );
+
+            });
+            cy.get(dashboardSelector.widgetCardName(cardType.type)).should("have.attr", "href").and("include", cardType.url);
+        });
+
+    });
+
+    it("Should verify Home page accessibility for the specific role", () => {
+        //Invite End-user
+        inviteUserToWorkspace(data.firstName, data.email);
+        cy.get(commonSelectors.homePageIcon).should("not.exist");
+        logout();
+        cy.apiLogin();
+        cy.visit(`${data.workspaceSlug}`);
+
+        //Update role to Builder
+        setupAndUpdateRole("end-user", "builder", data.email);
+        logout();
+        cy.appUILogin(data.email);
+        cy.get(commonSelectors.homePageIcon).should("be.visible");
+    });
+});
diff --git a/cypress-tests/cypress/support/utils/common.js b/cypress-tests/cypress/support/utils/common.js
index e91a001c38..fa7d24ff42 100644
--- a/cypress-tests/cypress/support/utils/common.js
+++ b/cypress-tests/cypress/support/utils/common.js
@@ -101,10 +101,12 @@ export const navigateToAppEditor = (appName) => {
 };
 
 export const viewAppCardOptions = (appName) => {
-  // cy.get(".homepage-app-card .home-app-card-header .menu-ico").then(($el) => {
-  //   $el[0].style.setProperty("visibility", "visible", "important");
-  // });
-  cy.get(`[data-cy="${appName.toLowerCase()}-card"]`).click().trigger("hover").realHover().within(() => {
+  cy.contains('.homepage-app-card', appName).within(() => {
+    cy.get('.home-app-card-header .menu-ico')
+      .then(($el) => {
+        $el[0].style.setProperty('visibility', 'visible', 'important');
+      });
+
     cy.get('[data-cy="app-card-menu-icon"]').click();
   });
 };
diff --git a/frontend/src/AppBuilder/Header/EditAppName.jsx b/frontend/src/AppBuilder/Header/EditAppName.jsx
index 9ba4bcd464..9213fa6114 100644
--- a/frontend/src/AppBuilder/Header/EditAppName.jsx
+++ b/frontend/src/AppBuilder/Header/EditAppName.jsx
@@ -47,6 +47,7 @@ function EditAppName() {
             type="button"
             data-cy="edit-app-name-button"
             onClick={() => setShowRenameModal(true)}
+            data-cy="editor-app-name-input"
           >
             <span className="tw-font-title-large tw-truncate tw-w-full tw-block group-hover:tw-w-[calc(100%-24px)]">
               {appName}
diff --git a/frontend/src/GetStarted/GetStartedHome.jsx b/frontend/src/GetStarted/GetStartedHome.jsx
index 3742fdfb4a..d4e5a600f4 100644
--- a/frontend/src/GetStarted/GetStartedHome.jsx
+++ b/frontend/src/GetStarted/GetStartedHome.jsx
@@ -38,7 +38,12 @@ function DividerWithText() {
   return (
     <div className="tw-flex tw-items-center tw-justify-center tw-w-full">
       <div className="tw-min-w-0 tw-grow tw-border-solid tw-flex-1 tw-border-0 tw-border-t tw-border-border-weak tw-mr-4" />
-      <p className="tw-flex tw-items-center tw-font-body-default tw-text-text-placeholder tw-m-0">OR START WITH</p>
+      <p
+        className="tw-flex tw-items-center tw-font-body-default tw-text-text-placeholder tw-m-0"
+        data-cy="divider-text"
+      >
+        OR START WITH
+      </p>
       <div className="tw-min-w-0 tw-grow tw-border-solid tw-flex-1 tw-border-0 tw-border-t tw-border-border-weak tw-ml-4" />
     </div>
   );
@@ -46,7 +51,14 @@ function DividerWithText() {
 
 function WidgetIcon({ type }) {
   const { icon, iconColor } = WIDGET_TYPES[type];
-  return <SolidIcon name={icon} className="tw-size-5 tw-shrink-0" fill={iconColor} data-name={icon} />;
+  return (
+    <SolidIcon
+      name={icon}
+      className="tw-size-5 tw-shrink-0"
+      fill={iconColor}
+      data-name={icon}
+    />
+  );
 }
 
 function ContentBlock({ title, description, descriptionClassName = '', titleClassName = '', ...props }) {
@@ -56,21 +68,23 @@ function ContentBlock({ title, description, descriptionClassName = '', titleClas
       {...props}
     >
       <p
-        className={`tw-block tw-text-text-default tw-font-title-large tw-whitespace-pre tw-m-0 tw-mb-0.5 ${titleClassName}`}
+        className={`tw-block tw-text-text-default tw-font-title-large tw-whitespace-pre tw-m-0 tw-mb-0.5 ${titleClassName}`} data-cy="widget-card-title"
       >
         {title}
       </p>
-      <p className={`tw-block tw-font-body-default tw-text-text-placeholder tw-m-0 tw-mb-0.5 ${descriptionClassName}`}>
+      <p
+        className={`tw-block tw-font-body-default tw-text-text-placeholder tw-m-0 tw-mb-0.5 ${descriptionClassName}`} data-cy="widget-card-description"
+      >
         {description}
       </p>
     </article>
   );
 }
 
-function GetStartedWidget({ type, to, onClick }) {
+function GetStartedWidget({ type, to, onClick, ...props }) {
   const { title, description } = WIDGET_TYPES[type];
   return (
-    <GetStartedCard to={to} onClick={onClick}>
+    <GetStartedCard to={to} onClick={onClick} {...props}>
       <WidgetIcon type={type} />
       <ContentBlock
         title={title}
@@ -110,17 +124,43 @@ function GetStartedOptionsRow({ edition, isToolJetCloud }) {
   if (isToolJetCloud || edition === 'cloud') {
     return (
       <div className="tw-flex tw-flex-row tw-gap-4 tw-items-start tw-justify-start tw-w-full">
-        <GetStartedWidget type="APP" to={getPrivateRoute('dashboard')} />
-        <GetStartedWidget type="DATASOURCE" to={getPrivateRoute('data_sources')} />
-        <GetStartedWidget type="EXPLORE_TEMPLATES" to={`${getPrivateRoute('dashboard')}?fromtemplate=true`} />
+        <GetStartedWidget
+          type="APP"
+          to={getPrivateRoute('dashboard')}
+          data-cy="getstarted-app-widget"
+        />
+        <GetStartedWidget
+          type="DATASOURCE"
+          to={getPrivateRoute('data_sources')}
+          data-cy="getstarted-datasource-widget"
+        />
+        <GetStartedWidget
+          type="EXPLORE_TEMPLATES"
+          to={`${getPrivateRoute('dashboard')}?fromtemplate=true`}
+          data-cy="getstarted-templates-widget"
+        />
       </div>
     );
   }
+
   return (
     <div className="tw-flex tw-flex-row tw-gap-4 tw-items-start tw-justify-start tw-w-full">
-      <GetStartedWidget type="APP" to={getPrivateRoute('dashboard')} />
-      <GetStartedWidget type="DATASOURCE" to={getPrivateRoute('data_sources')} />
-      <GetStartedWidget type="WORKFLOW" to={getPrivateRoute('workflows')} onClick={handleWorkflowClick} />
+      <GetStartedWidget
+        type="APP"
+        to={getPrivateRoute('dashboard')}
+        data-cy="getstarted-app-widget"
+      />
+      <GetStartedWidget
+        type="DATASOURCE"
+        to={getPrivateRoute('data_sources')}
+        data-cy="getstarted-datasource-widget"
+      />
+      <GetStartedWidget
+        type="WORKFLOW"
+        to={getPrivateRoute('workflows')}
+        onClick={handleWorkflowClick}
+        data-cy="getstarted-workflow-widget"
+      />
     </div>
   );
 }
diff --git a/frontend/src/_ui/Header/index.jsx b/frontend/src/_ui/Header/index.jsx
index 2588b9bcc6..f252b10c04 100644
--- a/frontend/src/_ui/Header/index.jsx
+++ b/frontend/src/_ui/Header/index.jsx
@@ -156,7 +156,6 @@ function Header({
                 'color-muted-darkmode': darkMode,
                 'color-disabled': !darkMode,
               })}
-              data-cy="version-label"
             >
               {Object.keys(featureAccess).length > 0 && (
                 <LicenseBanner limits={featureAccess} showNavBarActions={true} />
diff --git a/frontend/src/_ui/Icon/solidIcons/Apps.jsx b/frontend/src/_ui/Icon/solidIcons/Apps.jsx
index fa116392c8..ea8b600d8d 100644
--- a/frontend/src/_ui/Icon/solidIcons/Apps.jsx
+++ b/frontend/src/_ui/Icon/solidIcons/Apps.jsx
@@ -8,6 +8,7 @@ const Apps = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 2
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     className={className}
+    data-cy="apps-icon"
   >
     <path
       fillRule="evenodd"
diff --git a/frontend/src/_ui/Icon/solidIcons/Corners.jsx b/frontend/src/_ui/Icon/solidIcons/Corners.jsx
index 72ca376981..09dbe8f50c 100644
--- a/frontend/src/_ui/Icon/solidIcons/Corners.jsx
+++ b/frontend/src/_ui/Icon/solidIcons/Corners.jsx
@@ -9,6 +9,7 @@ const Corners = ({ style, fill = '#C1C8CD', width = '12', height = '13', classNa
     className={className}
     style={style}
     xmlns="http://www.w3.org/2000/svg"
+    data-cy="corners-icon"
   >
     <g id="corners ">
       <path
diff --git a/frontend/src/_ui/Icon/solidIcons/Datasource.jsx b/frontend/src/_ui/Icon/solidIcons/Datasource.jsx
index a5d2746b4d..582278969c 100644
--- a/frontend/src/_ui/Icon/solidIcons/Datasource.jsx
+++ b/frontend/src/_ui/Icon/solidIcons/Datasource.jsx
@@ -8,6 +8,7 @@ const Datasource = ({ fill = '#C1C8CD', width = '25', className = '', viewBox =
     viewBox={viewBox}
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    data-cy="datasources-icon"
   >
     <path
       d="M10.5195 9.16667C12.6029 9.16667 14.3737 8.84028 15.832 8.1875C17.2904 7.53472 18.0195 6.75 18.0195 5.83333C18.0195 4.91667 17.2904 4.13194 15.832 3.47917C14.3737 2.82639 12.6029 2.5 10.5195 2.5C8.4362 2.5 6.66536 2.82639 5.20703 3.47917C3.7487 4.13194 3.01953 4.91667 3.01953 5.83333C3.01953 6.75 3.7487 7.53472 5.20703 8.1875C6.66536 8.84028 8.4362 9.16667 10.5195 9.16667ZM10.5195 11.25C11.089 11.25 11.8008 11.191 12.6549 11.0729C13.5091 10.9549 14.332 10.7639 15.1237 10.5C15.9154 10.2361 16.5959 9.89236 17.1654 9.46875C17.7348 9.04514 18.0195 8.52778 18.0195 7.91667V10C18.0195 10.6111 17.7348 11.1285 17.1654 11.5521C16.5959 11.9757 15.9154 12.3194 15.1237 12.5833C14.332 12.8472 13.5091 13.0382 12.6549 13.1562C11.8008 13.2743 11.089 13.3333 10.5195 13.3333C9.95009 13.3333 9.23828 13.2743 8.38411 13.1562C7.52995 13.0382 6.70703 12.8472 5.91536 12.5833C5.1237 12.3194 4.44314 11.9757 3.8737 11.5521C3.30425 11.1285 3.01953 10.6111 3.01953 10V7.91667C3.01953 8.52778 3.30425 9.04514 3.8737 9.46875C4.44314 9.89236 5.1237 10.2361 5.91536 10.5C6.70703 10.7639 7.52995 10.9549 8.38411 11.0729C9.23828 11.191 9.95009 11.25 10.5195 11.25ZM10.5195 15.4167C11.089 15.4167 11.8008 15.3576 12.6549 15.2396C13.5091 15.1215 14.332 14.9306 15.1237 14.6667C15.9154 14.4028 16.5959 14.059 17.1654 13.6354C17.7348 13.2118 18.0195 12.6944 18.0195 12.0833V14.1667C18.0195 14.7778 17.7348 15.2951 17.1654 15.7188C16.5959 16.1424 15.9154 16.4861 15.1237 16.75C14.332 17.0139 13.5091 17.2049 12.6549 17.3229C11.8008 17.441 11.089 17.5 10.5195 17.5C9.95009 17.5 9.23828 17.441 8.38411 17.3229C7.52995 17.2049 6.70703 17.0139 5.91536 16.75C5.1237 16.4861 4.44314 16.1424 3.8737 15.7188C3.30425 15.2951 3.01953 14.7778 3.01953 14.1667V12.0833C3.01953 12.6944 3.30425 13.2118 3.8737 13.6354C4.44314 14.059 5.1237 14.4028 5.91536 14.6667C6.70703 14.9306 7.52995 15.1215 8.38411 15.2396C9.23828 15.3576 9.95009 15.4167 10.5195 15.4167Z"
diff --git a/frontend/src/_ui/Icon/solidIcons/TooljetAI.jsx b/frontend/src/_ui/Icon/solidIcons/TooljetAI.jsx
index fd12ff0776..df67688223 100644
--- a/frontend/src/_ui/Icon/solidIcons/TooljetAI.jsx
+++ b/frontend/src/_ui/Icon/solidIcons/TooljetAI.jsx
@@ -8,6 +8,7 @@ const TooljetAi = ({ className, width = '14', height = '15' }) => (
     className={className}
     viewBox="0 0 14 15"
     fill="none"
+    data-cy="ai-icon"
   >
     <path
       d="M11.194 1.7735V3.87036M2.80527 10.1622V12.2591M12.2425 2.82193H10.1456M3.8537 11.2107H1.75684M6.48496 2.20018C6.50742 2.07993 6.57123 1.97132 6.66534 1.89316C6.75945 1.815 6.87793 1.77222 7.00026 1.77222C7.12259 1.77222 7.24107 1.815 7.33518 1.89316C7.42929 1.97132 7.4931 2.07993 7.51557 2.20018L8.06652 5.11378C8.10565 5.32093 8.20631 5.51146 8.35538 5.66053C8.50444 5.80959 8.69498 5.91025 8.90212 5.94938L11.8157 6.50034C11.936 6.5228 12.0446 6.58661 12.1227 6.68072C12.2009 6.77483 12.2437 6.89331 12.2437 7.01564C12.2437 7.13797 12.2009 7.25646 12.1227 7.35057C12.0446 7.44467 11.936 7.50849 11.8157 7.53095L8.90212 8.0819C8.69498 8.12103 8.50444 8.22169 8.35538 8.37076C8.20631 8.51982 8.10565 8.71036 8.06652 8.9175L7.51557 11.8311C7.4931 11.9514 7.42929 12.06 7.33518 12.1381C7.24107 12.2163 7.12259 12.2591 7.00026 12.2591C6.87793 12.2591 6.75945 12.2163 6.66534 12.1381C6.57123 12.06 6.50742 11.9514 6.48496 11.8311L5.934 8.9175C5.89487 8.71036 5.79421 8.51982 5.64514 8.37076C5.49608 8.22169 5.30554 8.12103 5.0984 8.0819L2.1848 7.53095C2.06455 7.50849 1.95594 7.44467 1.87778 7.35057C1.79962 7.25646 1.75684 7.13797 1.75684 7.01564C1.75684 6.89331 1.79962 6.77483 1.87778 6.68072C1.95594 6.58661 2.06455 6.5228 2.1848 6.50034L5.0984 5.94938C5.30554 5.91025 5.49608 5.80959 5.64514 5.66053C5.79421 5.51146 5.89487 5.32093 5.934 5.11378L6.48496 2.20018Z"
diff --git a/frontend/src/_ui/Icon/solidIcons/Workflows.jsx b/frontend/src/_ui/Icon/solidIcons/Workflows.jsx
index ba967c3ac1..365fcf1954 100644
--- a/frontend/src/_ui/Icon/solidIcons/Workflows.jsx
+++ b/frontend/src/_ui/Icon/solidIcons/Workflows.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 export default function Workflows({ fill = 'none', width = '18', viewBox = '0 0 18 16' }) {
   return (
-    <svg width={width} height={width} viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width={width} height={width} viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg" data-cy="workflows-icon">
       <path
         d="M9.00016 0.083313L12.7501 2.16665V6.33331L9.00016 8.41665L5.25012 6.33331V2.16665L9.00016 0.083313Z"
         fill={fill}
diff --git a/frontend/src/modules/common/components/BaseSettingsMenu/BaseSettingsMenu.jsx b/frontend/src/modules/common/components/BaseSettingsMenu/BaseSettingsMenu.jsx
index 60aade6c73..e1e14f750c 100644
--- a/frontend/src/modules/common/components/BaseSettingsMenu/BaseSettingsMenu.jsx
+++ b/frontend/src/modules/common/components/BaseSettingsMenu/BaseSettingsMenu.jsx
@@ -82,7 +82,7 @@ function BaseSettingsMenu({
     const currentVersion = localStorage.getItem('currentVersion');
     return (
       <div className={`settings-card tj-text card ${darkMode ? 'dark-theme' : ''}`}>
-        <div className="tw-px-2.5 tw-py-2 tw-text-xs tw-font-light tw-text-text-placeholder">
+        <div className="tw-px-2.5 tw-py-2 tw-text-xs tw-font-light tw-text-text-placeholder" data-cy="version-label">
           <span>Version {currentVersion}</span>
         </div>
         <div className="divider" />

From 75e03caf6e935d6ad33edef3af7476f3df7c130c Mon Sep 17 00:00:00 2001
From: Yukti Goyal <yuktigoyal02@gmail.com>
Date: Tue, 21 Oct 2025 16:49:08 +0530
Subject: [PATCH 085/157] removed props parameter

---
 frontend/src/GetStarted/GetStartedHome.jsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/frontend/src/GetStarted/GetStartedHome.jsx b/frontend/src/GetStarted/GetStartedHome.jsx
index d4e5a600f4..031b97eee8 100644
--- a/frontend/src/GetStarted/GetStartedHome.jsx
+++ b/frontend/src/GetStarted/GetStartedHome.jsx
@@ -81,10 +81,10 @@ function ContentBlock({ title, description, descriptionClassName = '', titleClas
   );
 }
 
-function GetStartedWidget({ type, to, onClick, ...props }) {
+function GetStartedWidget({ type, to, onClick}) {
   const { title, description } = WIDGET_TYPES[type];
   return (
-    <GetStartedCard to={to} onClick={onClick} {...props}>
+    <GetStartedCard to={to} onClick={onClick} data-cy={`getstarted-${type.toLowerCase()}-widget`}>
       <WidgetIcon type={type} />
       <ContentBlock
         title={title}
@@ -127,17 +127,14 @@ function GetStartedOptionsRow({ edition, isToolJetCloud }) {
         <GetStartedWidget
           type="APP"
           to={getPrivateRoute('dashboard')}
-          data-cy="getstarted-app-widget"
         />
         <GetStartedWidget
           type="DATASOURCE"
           to={getPrivateRoute('data_sources')}
-          data-cy="getstarted-datasource-widget"
         />
         <GetStartedWidget
           type="EXPLORE_TEMPLATES"
           to={`${getPrivateRoute('dashboard')}?fromtemplate=true`}
-          data-cy="getstarted-templates-widget"
         />
       </div>
     );
@@ -148,18 +145,15 @@ function GetStartedOptionsRow({ edition, isToolJetCloud }) {
       <GetStartedWidget
         type="APP"
         to={getPrivateRoute('dashboard')}
-        data-cy="getstarted-app-widget"
       />
       <GetStartedWidget
         type="DATASOURCE"
         to={getPrivateRoute('data_sources')}
-        data-cy="getstarted-datasource-widget"
       />
       <GetStartedWidget
         type="WORKFLOW"
         to={getPrivateRoute('workflows')}
         onClick={handleWorkflowClick}
-        data-cy="getstarted-workflow-widget"
       />
     </div>
   );

From 4c8c5381dd316cde9e518d19d34dea4e64fc765a Mon Sep 17 00:00:00 2001
From: adishM98 Bot <adish.madhu@gmail.com>
Date: Tue, 21 Oct 2025 18:00:24 +0530
Subject: [PATCH 086/157] Fix: add rsyslog directory for audit logs with proper
 permissionsin Dockerfile

---
 docker/LTS/ee/ee-production.Dockerfile         | 6 ++++++
 docker/pre-release/ee/ee-production.Dockerfile | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/docker/LTS/ee/ee-production.Dockerfile b/docker/LTS/ee/ee-production.Dockerfile
index 034d8e5ea5..eb1fa3c058 100644
--- a/docker/LTS/ee/ee-production.Dockerfile
+++ b/docker/LTS/ee/ee-production.Dockerfile
@@ -168,6 +168,12 @@ RUN mkdir -p /home/appuser \
     && chmod -R g=u /home/appuser \
     && npm cache clean --force
 
+# Create rsyslog directory for audit logs with proper permissions
+RUN mkdir -p /home/appuser/rsyslog \
+    && chown -R appuser:0 /home/appuser/rsyslog \
+    && chmod g+s /home/appuser/rsyslog \
+    && chmod -R g=u /home/appuser/rsyslog
+
 # Create directory /tmp/.npm/npm-cache/ and set ownership to appuser
 RUN mkdir -p /tmp/.npm/npm-cache/ \
     && chown -R appuser:0 /tmp/.npm/npm-cache/ \
diff --git a/docker/pre-release/ee/ee-production.Dockerfile b/docker/pre-release/ee/ee-production.Dockerfile
index 7dc300436a..fb39eaa921 100644
--- a/docker/pre-release/ee/ee-production.Dockerfile
+++ b/docker/pre-release/ee/ee-production.Dockerfile
@@ -164,6 +164,12 @@ RUN mkdir -p /home/appuser \
     && chmod -R g=u /home/appuser \
     && npm cache clean --force
 
+# Create rsyslog directory for audit logs with proper permissions
+RUN mkdir -p /home/appuser/rsyslog \
+    && chown -R appuser:0 /home/appuser/rsyslog \
+    && chmod g+s /home/appuser/rsyslog \
+    && chmod -R g=u /home/appuser/rsyslog
+
 # Create directory /tmp/.npm/npm-cache/ and set ownership to appuser
 RUN mkdir -p /tmp/.npm/npm-cache/ \
     && chown -R appuser:0 /tmp/.npm/npm-cache/ \

From 2df92175fb7af39ea3d11e93f7a7460994b84c0e Mon Sep 17 00:00:00 2001
From: Adish M <44204658+adishM98@users.noreply.github.com>
Date: Tue, 21 Oct 2025 18:03:22 +0530
Subject: [PATCH 087/157] =?UTF-8?q?=F0=9F=9A=80=20chore:=20update=20submod?=
 =?UTF-8?q?ules=20to=20latest=20lts-3.16=20after=20auto-merge=20(#14383)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/ee | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/ee b/frontend/ee
index e15a081f27..fe64320fb8 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit e15a081f27f142460133f90040e94ce3ffe6d425
+Subproject commit fe64320fb889e8040ac93ee284b089fd6e51e7a2

From 15c00875f2f9682c23b18bfd4862727d5e236744 Mon Sep 17 00:00:00 2001
From: Yukti Goyal <yuktigoyal02@gmail.com>
Date: Tue, 21 Oct 2025 19:12:00 +0530
Subject: [PATCH 088/157] made cases CE compatible

---
 .../commonTestcases/workspace/dashboard.cy.js    | 16 ++++++++++------
 .../workspace/homePageDashboard.cy.js            |  8 +++++++-
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/dashboard.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/dashboard.cy.js
index 982096200a..798729ec48 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/dashboard.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/dashboard.cy.js
@@ -53,7 +53,7 @@ describe("dashboard", () => {
       },
     }).as("version");
 
-    cy.get(commonSelectors.homePageLogo).should("be.visible");
+
     cy.get(commonSelectors.workspaceName).verifyVisibleElement(
       "have.text",
       data.workspaceName
@@ -160,10 +160,13 @@ describe("dashboard", () => {
 
     cy.get(dashboardSelector.appTemplateRow).should("be.visible");
     cy.reload();
-
-    verifyTooltip(commonSelectors.homePageIcon, "Home");
+    const env = Cypress.env("environment");
+    if (env === "Enterprise" || env === "Cloud") {
+      cy.get(commonSelectors.homePageLogo).should("be.visible");
+      verifyTooltip(commonSelectors.homePageIcon, "Home");
+      verifyTooltip(commonSelectors.globalWorkFlowsIcon, "Workflows");
+    };
     verifyTooltip(commonSelectors.dashboardIcon, "Apps");
-    verifyTooltip(commonSelectors.globalWorkFlowsIcon, "Workflows");
     verifyTooltip(commonSelectors.databaseIcon, "ToolJet Database");
     verifyTooltip(commonSelectors.globalDataSourceIcon, "Data sources");
     verifyTooltip(
@@ -185,7 +188,8 @@ describe("dashboard", () => {
 
     cy.apiCreateApp(data.appName);
     cy.visit(`${data.workspaceSlug}`);
-    cy.get('.basic-plan-migration-banner').invoke('css', 'display', 'none');
+
+    cy.ifEnv(["Enterprise", "Cloud"], () => { cy.get('.basic-plan-migration-banner').invoke('css', 'display', 'none') });
     cy.wait(2000);
     cy.get(commonSelectors.appCreationDetails).should("be.visible");
     cy.get(commonSelectors.appCard(data.appName)).should("be.visible");
@@ -306,7 +310,7 @@ describe("dashboard", () => {
     cy.apiAddComponentToApp(data.cloneAppName, "button", 25, 25);
 
     cy.backToApps();
-    cy.get('.basic-plan-migration-banner').invoke('css', 'display', 'none');
+    cy.ifEnv(["Enterprise", "Cloud"], () => { cy.get('.basic-plan-migration-banner').invoke('css', 'display', 'none') });
     cy.wait("@appLibrary");
     cy.wait(1000);
 
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/homePageDashboard.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/homePageDashboard.cy.js
index 6695398b27..332656ae08 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/homePageDashboard.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/homePageDashboard.cy.js
@@ -9,6 +9,11 @@ import { setupAndUpdateRole } from "Support/utils/manageGroups";
 
 describe("Home Page Dashboard Testcases", () => {
     let data = {};
+    before(function () {
+        if (Cypress.env("environment") === "Community") {
+            this.skip();
+        }
+    });
     beforeEach(() => {
 
         data = {
@@ -29,6 +34,7 @@ describe("Home Page Dashboard Testcases", () => {
     });
 
     it("Should verify elements on home page dashboard", () => {
+
         cy.get(commonSelectors.homePageIcon).click();
         cy.get(commonSelectors.breadcrumbTitle).should(($el) => {
             expect($el.contents().first().text().trim()).to.eq(
@@ -70,7 +76,7 @@ describe("Home Page Dashboard Testcases", () => {
         // Filter cards based on environment
         const cardsToTest = cardTypes.filter(cardType => {
             if (env === 'Enterprise') return ['app', 'datasource', 'workflow'].includes(cardType.type);
-            if (env === 'cloud') return ['add', 'datasource', 'template'].includes(cardType.type);
+            if (env === 'Cloud') return ['add', 'datasource', 'template'].includes(cardType.type);
             return false;
         });
 

From 79e84cc470fbcf2da3225dd179068595a011db88 Mon Sep 17 00:00:00 2001
From: ajith-k-v <ajith.jaban@gmail.com>
Date: Tue, 21 Oct 2025 23:52:28 +0530
Subject: [PATCH 089/157] custom group test cases

---
 .../commands/platform/platformApiCommands.js  | 158 +++--
 .../constants/selectors/manageGroups.js       |   5 +-
 .../groups/customGroupGranularAccess.cy.js    |   6 +-
 .../workspace/groups/customGroupUI.cy.js      | 567 +++++++-----------
 .../workspace/groups/userRoleUI.cy.js         |  17 +-
 .../cypress/support/utils/manageGroups.js     |  54 +-
 .../support/utils/platform/customGroups.js    | 173 ++++++
 7 files changed, 556 insertions(+), 424 deletions(-)
 create mode 100644 cypress-tests/cypress/support/utils/platform/customGroups.js

diff --git a/cypress-tests/cypress/commands/platform/platformApiCommands.js b/cypress-tests/cypress/commands/platform/platformApiCommands.js
index b600db4d99..bd6f408630 100644
--- a/cypress-tests/cypress/commands/platform/platformApiCommands.js
+++ b/cypress-tests/cypress/commands/platform/platformApiCommands.js
@@ -174,19 +174,21 @@ Cypress.Commands.add("apiUpdateWsConstant", (id, updateValue, envName) => {
 
 Cypress.Commands.add("apiGetGroupId", (groupName) => {
     return cy.getAuthHeaders().then((headers) => {
-        return cy.request({
-            method: "GET",
-            url: `${Cypress.env("server_host")}/api/v2/group-permissions`,
-            headers: headers,
-            log: false,
-        }).then((response) => {
-            expect(response.status).to.equal(200);
-            const group = response.body.groupPermissions.find(
-                (g) => g.name === groupName
-            );
-            if (!group) throw new Error(`Group with name ${groupName} not found`);
-            return group.id;
-        });
+        return cy
+            .request({
+                method: "GET",
+                url: `${Cypress.env("server_host")}/api/v2/group-permissions`,
+                headers: headers,
+                log: false,
+            })
+            .then((response) => {
+                expect(response.status).to.equal(200);
+                const group = response.body.groupPermissions.find(
+                    (g) => g.name === groupName
+                );
+                if (!group) throw new Error(`Group with name ${groupName} not found`);
+                return group.id;
+            });
     });
 });
 
@@ -195,33 +197,71 @@ Cypress.Commands.add(
     (
         groupName,
         name,
-        canEdit = false,
-        canView = true,
-        hideFromDashboard = false,
+        resourceType = "app",
+        permissions = {},
         resourcesToAdd = []
     ) => {
         cy.getAuthHeaders().then((headers) => {
             cy.apiGetGroupId(groupName).then((groupId) => {
-                // Create granular permission
-                cy.request({
-                    method: "POST",
-                    url: `${Cypress.env("server_host")}/api/v2/group-permissions/granular-permissions`,
-                    headers: headers,
-                    body: {
+                const environment = Cypress.env("environment");
+                const isEnterprise = environment === "Enterprise";
+
+                const resourceTypeMap = {
+                    app: { type: "app", endpoint: "app" },
+                    workflow: { type: "workflow", endpoint: "data-source" },
+                    datasource: { type: "data_source", endpoint: "data-source" },
+                };
+
+                const { type, endpoint } =
+                    resourceTypeMap[resourceType] || resourceTypeMap.app;
+
+                const url = isEnterprise
+                    ? `${Cypress.env("server_host")}/api/v2/group-permissions/${groupId}/granular-permissions/${endpoint}`
+                    : `${Cypress.env("server_host")}/api/v2/group-permissions/granular-permissions`;
+                let permissionObject;
+
+                if (resourceType === "datasource") {
+                    permissionObject = {
+                        action: {
+                            canUse: permissions.canUse ?? true,
+                            canConfigure: permissions.canConfigure ?? false,
+                        },
+                        resourcesToAdd,
+                    };
+                } else {
+                    permissionObject = {
+                        canEdit: permissions.canEdit ?? false,
+                        canView: permissions.canView ?? true,
+                        hideFromDashboard: permissions.hideFromDashboard ?? false,
+                        resourcesToAdd,
+                    };
+                }
+
+                const body = isEnterprise
+                    ? {
+                        name,
+                        type,
+                        groupId,
+                        isAll: true,
+                        createResourcePermissionObject: permissionObject,
+                    }
+                    : {
                         name,
                         type: "app",
                         groupId,
                         isAll: true,
-                        createAppsPermissionsObject: {
-                            canEdit,
-                            canView,
-                            hideFromDashboard,
-                            resourcesToAdd,
-                        },
-                    },
+                        createAppsPermissionsObject: permissionObject,
+                    };
+
+                cy.request({
+                    method: "POST",
+                    url: url,
+                    headers: headers,
+                    body: body,
                     log: false,
                 }).then((res) => {
                     expect(res.status).to.equal(201);
+                    cy.log(`Created ${resourceType} granular permission: ${name}`);
                 });
             });
         });
@@ -233,8 +273,6 @@ Cypress.Commands.add(
     (groupName, typesToDelete = []) => {
         cy.getAuthHeaders().then((headers) => {
             cy.apiGetGroupId(groupName).then((groupId) => {
-
-                // Step 2: Get all granular permissions for the group
                 cy.request({
                     method: "GET",
                     url: `${Cypress.env("server_host")}/api/v2/group-permissions/${groupId}/granular-permissions`,
@@ -244,23 +282,32 @@ Cypress.Commands.add(
                     expect(granularResponse.status).to.equal(200);
                     const granularPermissions = granularResponse.body;
 
-                    // Step 3: Filter if typesToDelete is specified
                     const permissionsToDelete = typesToDelete.length
                         ? granularPermissions.filter((perm) =>
                             typesToDelete.includes(perm.type)
                         )
                         : granularPermissions;
 
-                    // Step 4: Delete each granular permission
                     permissionsToDelete.forEach((permission) => {
+                        // Map resource types to delete endpoints
+                        // Note: Workflows use the 'app' endpoint (no separate workflow endpoint in backend)
+                        const typeEndpointMap = {
+                            app: "app",
+                            workflow: "app",          // ⬅️ Workflows use app endpoint
+                            data_source: "data-source",
+                        };
+                        const endpoint = typeEndpointMap[permission.type] || "app";
+
                         cy.request({
                             method: "DELETE",
-                            url: `${Cypress.env("server_host")}/api/v2/group-permissions/granular-permissions/app/${permission.id}`,
+                            url: `${Cypress.env("server_host")}/api/v2/group-permissions/granular-permissions/${endpoint}/${permission.id}`,
                             headers,
                             log: false,
                         }).then((deleteResponse) => {
                             expect(deleteResponse.status).to.equal(200);
-                            cy.log(`Deleted granular permission: ${permission.name}`);
+                            cy.log(
+                                `Deleted ${permission.type} granular permission: ${permission.name}`
+                            );
                         });
                     });
                 });
@@ -496,7 +543,7 @@ Cypress.Commands.add(
         userRole = "end-user",
         userPassword = "password",
         workspaceName = "My workspace",
-        metaData = {}
+        metaData = {},
     ) => {
         let invitationToken, organizationToken;
 
@@ -620,22 +667,27 @@ Cypress.Commands.add(
     }
 );
 
-Cypress.Commands.add("apiUpdateGroupPermission", (groupName, permissionPayload) => {
-    return cy.apiGetGroupId(groupName).then((groupId) => {
-        return cy.getAuthHeaders().then((headers) => {
-            return cy.request({
-                method: "PUT",
-                url: `${Cypress.env("server_host")}/api/v2/group-permissions/${groupId}`,
-                headers: headers,
-                body: permissionPayload,
-                log: false,
-            }).then((response) => {
-                expect(response.status).to.equal(200);
-                return response.body;
+Cypress.Commands.add(
+    "apiUpdateGroupPermission",
+    (groupName, permissionPayload) => {
+        return cy.apiGetGroupId(groupName).then((groupId) => {
+            return cy.getAuthHeaders().then((headers) => {
+                return cy
+                    .request({
+                        method: "PUT",
+                        url: `${Cypress.env("server_host")}/api/v2/group-permissions/${groupId}`,
+                        headers: headers,
+                        body: permissionPayload,
+                        log: false,
+                    })
+                    .then((response) => {
+                        expect(response.status).to.equal(200);
+                        return response.body;
+                    });
             });
         });
-    });
-});
+    }
+);
 
 Cypress.Commands.add("getAuthHeaders", (returnCached = false) => {
     let headers = {};
@@ -648,8 +700,12 @@ Cypress.Commands.add("getAuthHeaders", (returnCached = false) => {
                 Cookie: `tj_auth_token=${cookie.value}`,
             };
             Cypress.env("authHeaders", headers);
-            Cypress.log({ name: "getAuthHeaders", message: `Auth headers: ${JSON.stringify(headers)}` });
+            Cypress.log({
+                name: "getAuthHeaders",
+                message: `Auth headers: ${JSON.stringify(headers)}`,
+            });
             return headers;
         });
     }
 });
+
diff --git a/cypress-tests/cypress/constants/selectors/manageGroups.js b/cypress-tests/cypress/constants/selectors/manageGroups.js
index 3fc120bb72..84a17b5742 100644
--- a/cypress-tests/cypress/constants/selectors/manageGroups.js
+++ b/cypress-tests/cypress/constants/selectors/manageGroups.js
@@ -4,6 +4,7 @@ export const cyParamName = (paramName = "") => {
 export const groupsSelector = {
   pageTitle: "[data-cy=user-groups-title]",
   createNewGroupButton: "[data-cy=create-new-group-button]",
+  createGroupButton: "[data-cy=create-group-button]",
   tableHeader: "[data-cy=table-header]",
   groupName: "[data-cy=group-name]",
   addNewGroupModalTitle: '[data-cy="add-new-group-title"]',
@@ -41,7 +42,7 @@ export const groupsSelector = {
   allAppsRadio: '[data-cy="all-apps-radio"]',
   allAppsLabel: '[data-cy="all-apps-label"]',
   allAppsHelperText: '[data-cy="this-will-select-all-apps-in-the-workspace-including-any-new-apps-created-info-text"]',
-  customradio: '[data-cy="custom-radio"]',
+  customRadio: '[data-cy="custom-radio"]',
   customLabel: '[data-cy="custom-label"]',
   customHelperText: '[data-cy="custom-info-text"]',
   resourcesFolders: "[data-cy=resource-folders]",
@@ -139,7 +140,7 @@ export const groupsSelector = {
   helperTextAdminPermissions: '[data-cy="helper-text-admin-permissions"]',
   updateGroupNameModalTitle: '[data-cy="update-group-title"]',
   editGranularPermissionIcon: '[data-cy="edit-permission-button"]',
-  granularAccessPermission: '[data-cy="granular-access-permission"]',
+  granularAccessPermission: '[data-cy="apps-granular-access"]',
   groupChip: (accessType) => `[data-cy="${cyParamName(accessType)}-group-chip"]`,
   resourceContainer: '[data-cy="resources-container"]',
   groupLink: (groupname) => {
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupGranularAccess.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupGranularAccess.cy.js
index 56522cf375..aeed08c85c 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupGranularAccess.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupGranularAccess.cy.js
@@ -103,7 +103,7 @@ describe("Custom Group Granular Access", () => {
             });
 
             cy.clearAndType(groupsSelector.permissionNameInput, app);
-            cy.get(groupsSelector.customradio).check();
+            cy.get(groupsSelector.customRadio).check();
             cy.get(".css-1gfides").click({ force: true }).type(`${app}{enter}`);
             cy.get(groupsSelector.confimButton).click({ force: true });
             cy.verifyToastMessage(
@@ -149,7 +149,7 @@ describe("Custom Group Granular Access", () => {
                 cy.get(groupsSelector.addWorkflowButton).click();
 
                 cy.clearAndType(groupsSelector.permissionNameInput, workflow);
-                cy.get(groupsSelector.customradio).check();
+                cy.get(groupsSelector.customRadio).check();
                 cy.get(".css-1gfides")
                     .click({ force: true })
                     .type(`${workflow}{enter}`);
@@ -168,7 +168,7 @@ describe("Custom Group Granular Access", () => {
                 cy.get(groupsSelector.addDatasourceButton).click();
 
                 cy.clearAndType(groupsSelector.permissionNameInput, datasource);
-                cy.get(groupsSelector.customradio).check();
+                cy.get(groupsSelector.customRadio).check();
                 cy.get(".css-1gfides")
                     .click({ force: true })
                     .type(`${datasource}{enter}`);
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupUI.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupUI.cy.js
index 3d7e1abf0b..c9ee0e6498 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupUI.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupUI.cy.js
@@ -1,204 +1,58 @@
 import { fake } from "Fixtures/fake";
+
 import { commonSelectors } from "Selectors/common";
+import { commonEeSelectors } from "Selectors/eeCommon";
 import { groupsSelector } from "Selectors/manageGroups";
 import { navigateToManageGroups } from "Support/utils/common";
-import { OpenGroupCardOption } from "Support/utils/manageGroups";
-import { groupsText } from "Texts/manageGroups";
+import {
+  apiAddUserToGroup,
+  apiCreateGroup,
+  apiDeleteGroup,
+} from "Support/utils/manageGroups";
+import {
+  addGranularPermissionViaUI,
+  createGroupViaUI,
+  deleteGroupViaUI,
+  openGroupThreeDotMenu,
+  renameGroupViaUI,
+  switchBetweenAllAndCustom,
+  verifyDuplicateModal,
+  verifyGroupCreatedInSidebar,
+  verifyGroupRemovedFromSidebar,
+} from "Support/utils/platform/customGroups";
 
-const verifyModalFields = (isEdit = false, groupName = "") => {
-  // Modal header verification
-  cy.get(groupsSelector.permissionNameLabel).verifyVisibleElement(
-    "have.text",
-    groupsText.permissionNameLabel
-  );
-  cy.get(groupsSelector.permissionNameInput)
-    .should("be.visible")
-    .and(
-      isEdit ? "have.value" : "have.attr",
-      isEdit ? groupName : "placeholder",
-      isEdit ? groupName : "Eg. Product analytics apps"
-    );
-  cy.get(groupsSelector.permissionNameHelperText).verifyVisibleElement(
-    "have.text",
-    groupsText.permissionNameHelperText
-  );
+import {
+  verifyCheckPermissionStates,
+  verifyEmptyStates,
+  verifyGranularAccessByRole,
+  verifyGranularEditModal,
+  verifyGranularPermissionModalStates,
+  verifyGroupLinks,
+  verifyPermissionCheckBoxLabelsAndHelperTexts,
+  verifyUserRow,
+} from "Support/utils/platform/groupsUI";
 
-  // Permission section verification
-  const permissionChecks = [
-    {
-      selector: groupsSelector.permissionLabel,
-      text: groupsText.permissionLabel,
-    },
-    {
-      selector: groupsSelector.editPermissionLabel,
-      text: groupsText.editPermissionLabel,
-    },
-    {
-      selector: groupsSelector.editPermissionHelperText,
-      text: groupsText.appEditHelperText,
-    },
-    {
-      selector: groupsSelector.viewPermissionLabel,
-      text: groupsText.viewPermissionLabel,
-    },
-    {
-      selector: groupsSelector.viewPermissionHelperText,
-      text: groupsText.appViewHelperText,
-    },
-  ];
-
-  permissionChecks.forEach(({ selector, text }) => {
-    cy.get(selector).verifyVisibleElement("have.text", text);
-  });
-
-  // Hide permission verification
-  cy.get(groupsSelector.hidePermissionInput).should("be.visible");
-  cy.get(groupsSelector.appHidePermissionModalLabel).verifyVisibleElement(
-    "have.text",
-    groupsText.appHideLabel
-  );
-  cy.get(groupsSelector.appHidePermissionModalHelperText).verifyVisibleElement(
-    "have.text",
-    groupsText.appHideHelperText
-  );
-
-  // Resource section verification
-  const resourceChecks = [
-    {
-      selector: groupsSelector.resourceLabel,
-      text: groupsText.resourcesheader,
-    },
-    {
-      selector: groupsSelector.allAppsLabel,
-      text: isEdit ? groupsText.allAppsLabel : groupsText.groupChipText,
-    },
-    {
-      selector: groupsSelector.allAppsHelperText,
-      text: groupsText.allAppsHelperText,
-    },
-  ];
-
-  resourceChecks.forEach(({ selector, text }) => {
-    cy.get(selector).verifyVisibleElement("have.text", text);
-  });
-
-  // Button states
-  cy.get(groupsSelector.confimButton).verifyVisibleElement(
-    "have.text",
-    isEdit ? groupsText.updateButtonText : groupsText.addButtonText
-  );
-  cy.get(groupsSelector.confimButton).should(
-    isEdit ? "be.enabled" : "be.disabled"
-  );
-  cy.get(groupsSelector.cancelButton).verifyVisibleElement(
-    "have.text",
-    groupsText.cancelButton
-  );
-
-  if (isEdit) {
-    cy.get(groupsSelector.deletePermissionIcon).should("be.visible");
-  }
-};
-
-const verifyPermissionSection = () => {
-  const permissionElements = [
-    {
-      resource: groupsSelector.resourcesApps,
-      resourceText: groupsText.resourcesApps,
-      check: groupsSelector.appsCreateCheck,
-      label: groupsSelector.appsCreateLabel,
-      labelText: groupsText.createLabel,
-      helperText: groupsSelector.appCreateHelperText,
-      helperContent: groupsText.appCreateHelperText,
-    },
-    {
-      resource: groupsSelector.resourcesFolders,
-      resourceText: groupsText.resourcesFolders,
-      check: groupsSelector.foldersCreateCheck,
-      label: groupsSelector.foldersCreateLabel,
-      labelText: groupsText.folderCreateLabel,
-      helperText: groupsSelector.foldersHelperText,
-      helperContent: groupsText.folderHelperText,
-    },
-  ];
-
-  permissionElements.forEach(
-    ({
-      resource,
-      resourceText,
-      check,
-      label,
-      labelText,
-      helperText,
-      helperContent,
-    }) => {
-      cy.get(resource).verifyVisibleElement("have.text", resourceText);
-      cy.get(check).should("be.visible");
-      cy.get(check).check();
-      cy.verifyToastMessage(
-        commonSelectors.toastMessage,
-        groupsText.permissionUpdatedToast
-      );
-      cy.get(check).uncheck();
-      cy.verifyToastMessage(
-        commonSelectors.toastMessage,
-        groupsText.permissionUpdatedToast
-      );
-      cy.get(label).verifyVisibleElement("have.text", labelText);
-      cy.get(helperText).verifyVisibleElement("have.text", helperContent);
-    }
-  );
-};
-
-const verifyEmptyStates = () => {
-  // Users empty state
-  cy.get(groupsSelector.userEmptyPageIcon).should("be.visible");
-  cy.get(groupsSelector.userEmptyPageTitle).verifyVisibleElement(
-    "have.text",
-    groupsText.userEmptyPageTitle
-  );
-  cy.get(groupsSelector.userEmptyPageHelperText).verifyVisibleElement(
-    "have.text",
-    groupsText.userEmptyPageHelperText
-  );
-
-  // Granular permissions empty state
-  cy.get(groupsSelector.granularLink).click();
-  cy.get(groupsSelector.granularEmptyPageIcon).should("be.visible");
-  cy.get(groupsSelector.emptyPagePermissionTitle).verifyVisibleElement(
-    "have.text",
-    groupsText.emptyPagePermissionTitle
-  );
-  cy.get(groupsSelector.emptyPagePermissionHelperText).verifyVisibleElement(
-    "have.text",
-    groupsText.emptyPagePermissionHelperText
-  );
-};
-
-const verifyGroupLinks = () => {
-  const links = [
-    { selector: groupsSelector.usersLink, text: groupsText.usersLink },
-    {
-      selector: groupsSelector.permissionsLink,
-      text: groupsText.permissionsLink,
-    },
-    { selector: groupsSelector.granularLink, text: "Granular access" },
-  ];
-
-  links.forEach(({ selector, text }) => {
-    cy.get(selector).verifyVisibleElement("have.text", text);
-  });
-};
+import { getGroupPermissionInput } from "Support/utils/userPermissions";
 
 describe("Custom groups UI and Functionality verification", () => {
+  const isEnterprise = Cypress.env("environment") === "Enterprise";
+
   const groupName = fake.firstName.replaceAll("[^A-Za-z]", "");
   const newGroupname = `New ${groupName}`;
+  const groupName2 = `${fake.firstName.replaceAll("[^A-Za-z]", "")}2`;
+  const groupName3 = `${fake.firstName.replaceAll("[^A-Za-z]", "")}3`;
+  const duplicatedGroupName = `${groupName3}_copy`;
+  const appPermissionName = "Apps";
+  const workflowPermissionName = "Workflows";
+  const datasourcePermissionName = "  Data sources";
+  const permissionName2 = "Permission2";
   const data = {
     firstName: fake.firstName,
     email: fake.email.toLowerCase().replaceAll("[^A-Za-z]", ""),
     workspaceName: fake.firstName,
     workspaceSlug: fake.firstName.toLowerCase().replaceAll("[^A-Za-z]", ""),
   };
+  let groupId3;
 
   before(() => {
     cy.apiLogin();
@@ -208,187 +62,212 @@ describe("Custom groups UI and Functionality verification", () => {
   beforeEach(() => {
     cy.apiLogin();
     cy.visit(`${data.workspaceSlug}`);
-    navigateToManageGroups();
+    cy.viewport(2000, 1900);
   });
 
-  const commonGroupVerification = () => {
-    // Resource Verification
-    cy.verifyElement(
-      groupsSelector.textDefaultGroup,
-      groupsText.textDefaultGroup
-    );
-    cy.get(groupsSelector.usersLink).click();
-    cy.verifyElement(
-      groupsSelector.nameTableHeader,
-      groupsText.userNameTableHeader
-    );
-    cy.verifyElement(
-      groupsSelector.emailTableHeader,
-      groupsText.emailTableHeader
-    );
-  };
+  it("should create, rename, and delete a custom group", () => {
+    navigateToManageGroups();
+    createGroupViaUI(groupName);
 
-  it("Should verify the elements and functionalities on manage groups page", () => {
-    // Verify base group elements
-    manageGroupsElements();
+    verifyGroupCreatedInSidebar(groupName);
 
-    // Test group creation flow
-    const verifyGroupCreation = () => {
-      cy.get(groupsSelector.createNewGroupButton).should("be.visible").click();
-      cy.get(groupsSelector.addNewGroupModalTitle).verifyVisibleElement(
-        "have.text",
-        groupsText.cardTitle
-      );
-      cy.get(groupsSelector.groupNameInput).should("be.visible");
-      cy.get(groupsSelector.cancelButton).verifyVisibleElement(
-        "have.text",
-        groupsText.cancelButton
-      );
-      cy.get(groupsSelector.createGroupButton).verifyVisibleElement(
-        "have.text",
-        groupsText.createGroupButton
-      );
-      cy.get(groupsSelector.cancelButton).click();
-    };
+    renameGroupViaUI(groupName, newGroupname);
 
-    // Test duplicate group name
-    const testDuplicateGroup = () => {
-      cy.get(groupsSelector.createNewGroupButton).click();
-      cy.clearAndType(groupsSelector.groupNameInput, groupsText.admin);
-      cy.get(groupsSelector.createGroupButton).click();
-      cy.verifyToastMessage(
-        commonSelectors.toastMessage,
-        groupsText.groupNameExistToast
-      );
-      cy.get(groupsSelector.cancelButton).click();
-      cy.get(groupsSelector.groupNameInput).should("not.exist");
-    };
+    verifyGroupCreatedInSidebar(newGroupname);
 
-    // Create and verify new group
-    const createNewGroup = () => {
-      cy.get(groupsSelector.createNewGroupButton).click();
-      cy.clearAndType(groupsSelector.groupNameInput, groupName);
-      cy.get(groupsSelector.createGroupButton).click();
-      cy.verifyToastMessage(
-        commonSelectors.toastMessage,
-        groupsText.groupCreatedToast
-      );
+    deleteGroupViaUI(newGroupname);
 
-      // Verify group creation
-      cy.get(groupsSelector.groupLink(groupName)).verifyVisibleElement(
-        "have.text",
-        groupName
-      );
-      cy.get(groupsSelector.groupLink(groupName)).click();
-      cy.get(groupsSelector.groupPageTitle(groupName)).verifyVisibleElement(
-        "have.text",
-        `${groupName} (0)`
-      );
-      cy.get(groupsSelector.groupNameUpdateLink).should("be.visible");
+    verifyGroupRemovedFromSidebar(newGroupname);
+  });
 
-      // Verify group links and tables
-      verifyGroupLinks();
-      cy.get(groupsSelector.usersLink).click();
-      cy.get(groupsSelector.nameTableHeader).verifyVisibleElement(
-        "have.text",
-        groupsText.userNameTableHeader
-      );
-      cy.get(groupsSelector.emailTableHeader).verifyVisibleElement(
-        "have.text",
-        groupsText.emailTableHeader
-      );
-      verifyEmptyStates();
-    };
+  it("should create custom group, verify empty states, add permissions, and manage granular access", () => {
+    apiCreateGroup(groupName2);
 
-    verifyGroupCreation();
-    testDuplicateGroup();
-    createNewGroup();
+    cy.apiCreateApp(groupName);
+    cy.ifEnv("Enterprise", () => {
+      cy.apiCreateWorkflow(groupName);
+      cy.apiCreateGDS(
+        `${Cypress.env("server_host")}/api/data-sources`,
+        groupName,
+        "restapi",
+        [{ key: "url", value: "https://jsonplaceholder.typicode.com/users" }]
+      );
+    });
+
+    navigateToManageGroups();
+    cy.get(groupsSelector.groupLink(groupName2)).click();
+
+    verifyGroupLinks();
+    verifyEmptyStates(true);
 
     cy.get(groupsSelector.permissionsLink).click();
-    verifyPermissionSection();
+    verifyCheckPermissionStates("custom");
+    verifyPermissionCheckBoxLabelsAndHelperTexts();
 
-    // Test granular access section
-    const verifyGranularAccess = () => {
-      cy.get(groupsSelector.granularLink).click();
-      cy.ifEnv("Community", () => {
-        cy.get(groupsSelector.addAppsButton).click();
-      });
-      cy.ifEnv("Enterprise", () => {
-        cy.get(groupsSelector.addPermissionButton).click();
-        cy.get(groupsSelector.addAppButton).click();
+    cy.get(groupsSelector.granularLink).click();
+    addGranularPermissionViaUI(appPermissionName, {
+      resourceType: "app",
+      permission: "edit",
+      scope: "all",
+    });
+
+    cy.ifEnv("Enterprise", () => {
+      addGranularPermissionViaUI(workflowPermissionName, {
+        resourceType: "workflow",
+        permission: "build",
+        scope: "all",
       });
 
-      verifyModalFields();
+      addGranularPermissionViaUI(datasourcePermissionName, {
+        resourceType: "datasource",
+        permission: "configure",
+        scope: "all",
+      });
+    });
+    verifyGranularAccessByRole("builder");
+    verifyGranularEditModal("custom");
 
-      // Add permission
-      cy.clearAndType(groupsSelector.permissionNameInput, groupName);
-      cy.get(groupsSelector.confimButton).click();
+    cy.get('[data-cy="apps-granular-access"]').realHover();
+    cy.get('[data-cy="edit-apps-granular-access"]').click();
 
-      // Verify edit mode
-      cy.get(`[data-cy="${groupName.toLowerCase()}-text"]`).click();
-      cy.get(
-        `${groupsSelector.addEditPermissionModalTitle}:eq(2)`
-      ).verifyVisibleElement("have.text", groupsText.editPermissionModalTitle);
-      cy.get(groupsSelector.editPermissionRadio).check();
-      verifyModalFields(true, groupName);
-      cy.get(groupsSelector.confimButton).click();
-    };
+    verifyGranularPermissionModalStates("app", "custom");
 
-    verifyGranularAccess();
+    cy.get(groupsSelector.viewPermissionRadio).check();
+    switchBetweenAllAndCustom("custom");
 
-    // Test group rename and delete
-    const verifyGroupRename = () => {
-      cy.get(groupsSelector.groupNameUpdateLink).click();
-      cy.get(groupsSelector.updateGroupNameModalTitle).verifyVisibleElement(
-        "have.text",
-        groupsText.updateGroupNameModalTitle
-      );
-      cy.clearAndType(groupsSelector.groupNameInput, newGroupname);
-      cy.get(groupsSelector.createGroupButton).click();
-      cy.verifyToastMessage(
-        commonSelectors.toastMessage,
-        groupsText.groupNameUpdateSucessToast
-      );
-      cy.get(groupsSelector.groupLink(newGroupname)).verifyVisibleElement(
-        "have.text",
-        newGroupname
-      );
-    };
+    verifyGranularPermissionModalStates("app", "custom", {
+      editRadio: { checked: false, enabled: true },
+      viewRadio: { checked: true, enabled: true },
+      hideCheckbox: { enabled: true },
+      allAppsRadio: { checked: false, enabled: true },
+      customRadio: { checked: true, enabled: true },
+    });
 
-    const verifyGroupDelete = () => {
-      cy.get(groupsSelector.groupLink(newGroupname)).click();
-      OpenGroupCardOption(newGroupname);
-      cy.get(groupsSelector.deleteGroupOption).click();
+    switchBetweenAllAndCustom("all");
+    verifyGranularPermissionModalStates("app", "custom", {
+      editRadio: { checked: false, enabled: true },
+      viewRadio: { checked: true, enabled: true },
+      hideCheckbox: { enabled: true },
+      allAppsRadio: { checked: true, enabled: true },
+      customRadio: { checked: false, enabled: true },
+    });
 
-      // Verify delete confirmation
-      cy.get(groupsSelector.confirmText).verifyVisibleElement(
-        "have.text",
-        groupsText.confirmText
-      );
-      cy.get(commonSelectors.buttonSelector("Cancel")).verifyVisibleElement(
-        "have.text",
-        groupsText.confirmCancelButton
-      );
-      cy.get(commonSelectors.buttonSelector("Yes")).verifyVisibleElement(
-        "have.text",
-        groupsText.confirmYesButton
-      );
-      cy.get(commonSelectors.buttonSelector("Cancel")).click();
+    cy.get(groupsSelector.editPermissionRadio).check();
+    verifyGranularPermissionModalStates("app", "custom", {
+      editRadio: { checked: true, enabled: true },
+      viewRadio: { checked: false, enabled: true },
+      hideCheckbox: { enabled: false },
+      allAppsRadio: { checked: true, enabled: true },
+      customRadio: { checked: false, enabled: true },
+    });
 
-      // Actual delete
-      OpenGroupCardOption(newGroupname);
-      cy.get(groupsSelector.deleteGroupOption).click();
-      cy.get(commonSelectors.buttonSelector("Yes")).click();
-    };
+    cy.get(groupsSelector.cancelButton).click();
 
-    verifyGroupRename();
-    verifyGroupDelete();
+    cy.ifEnv("Enterprise", () => {
+      cy.get('[data-cy="workflow-granular-access"]').realHover();
+      cy.get('[data-cy="edit-workflow-granular-access"]').click();
+
+      verifyGranularPermissionModalStates("workflow", "custom");
+
+      cy.get(groupsSelector.executeWorkflowradio).check();
+      verifyGranularPermissionModalStates("workflow", "custom", {
+        buildRadio: { checked: false, enabled: true },
+        executeRadio: { checked: true, enabled: true },
+      });
+      cy.get(groupsSelector.cancelButton).click();
+
+      cy.get('[data-cy="datasource-granular-access"]').realHover();
+      cy.get('[data-cy="edit-datasource-granular-access"]').click();
+      verifyGranularPermissionModalStates("datasource", "custom");
+
+      cy.get(groupsSelector.buildWithDatasourceRadio).check();
+      verifyGranularPermissionModalStates("datasource", "custom", {
+        configureRadio: { checked: false, enabled: true },
+        buildWithRadio: { checked: true, enabled: true },
+      });
+      cy.get(groupsSelector.cancelButton).click();
+    });
+
+    apiDeleteGroup(groupName2);
   });
 
-  const toggleCheckbox = (selector, toastSelector, toastMessage) => {
-    cy.get(selector).should("be.visible").uncheck();
-    cy.verifyToastMessage(toastSelector, toastMessage);
-    cy.get(selector).check();
-    cy.verifyToastMessage(toastSelector, toastMessage);
-  };
+  it("should create group via API, add permissions, duplicate group and verify all permissions are copied", () => {
+    cy.apiFullUserOnboarding(data.firstName, data.email, "builder");
+    cy.apiLogout();
+
+    cy.apiLogin();
+    cy.apiCreateApp(groupName3);
+
+    cy.ifEnv("Enterprise", () => {
+      cy.apiCreateWorkflow(groupName3);
+      cy.apiCreateGDS(
+        `${Cypress.env("server_host")}/api/data-sources`,
+        groupName3,
+        "restapi",
+        [{ key: "url", value: "https://jsonplaceholder.typicode.com/users" }]
+      );
+    });
+
+    apiCreateGroup(groupName3).then((groupId) => {
+      groupId3 = groupId;
+      apiAddUserToGroup(groupId3, data.email);
+      cy.apiCreateGranularPermission(
+        groupName3,
+        "Apps",
+        "app",
+        { canEdit: true, canView: false, hideFromDashboard: false },
+        []
+      );
+
+      cy.ifEnv("Enterprise", () => {
+        cy.apiCreateGranularPermission(
+          groupName3,
+          "Workflows",
+          "workflow",
+          { canEdit: true, canView: false, hideFromDashboard: false },
+          []
+        );
+        cy.apiCreateGranularPermission(
+          groupName3,
+          "Data sources",
+          "datasource",
+          { canUse: false, canConfigure: true },
+          []
+        );
+      });
+    });
+
+    cy.apiUpdateGroupPermission(
+      groupName3,
+      getGroupPermissionInput(isEnterprise, true)
+    );
+
+    navigateToManageGroups();
+    cy.wait(2000);
+    openGroupThreeDotMenu(groupName3);
+    cy.get(groupsSelector.duplicateOption).click();
+    verifyDuplicateModal(groupName3);
+
+    cy.get(groupsSelector.cancelButton).click();
+
+    openGroupThreeDotMenu(groupName3);
+    cy.get(groupsSelector.duplicateOption).click();
+    cy.get(commonEeSelectors.confirmButton).click();
+    cy.verifyToastMessage(
+      commonSelectors.toastMessage,
+      "Group duplicated successfully"
+    );
+
+    cy.wait(1000);
+    verifyUserRow(data.firstName, ` ${data.email}`);
+    cy.get(groupsSelector.groupLink(duplicatedGroupName)).click();
+    cy.get(groupsSelector.permissionsLink).click();
+    verifyCheckPermissionStates("builder");
+
+    cy.get(groupsSelector.granularLink).click();
+    verifyGranularAccessByRole("builder");
+
+    apiDeleteGroup(duplicatedGroupName);
+    apiDeleteGroup(groupName3);
+  });
 });
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/userRoleUI.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/userRoleUI.cy.js
index 8212f2e798..31ef2d2e4e 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/userRoleUI.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/userRoleUI.cy.js
@@ -14,6 +14,7 @@ import {
     verifyGranularAddModal,
     verifyGranularEditModal,
     verifyPermissionCheckBoxLabelsAndHelperTexts,
+    verifyUserRow
 } from "Support/utils/platform/groupsUI";
 import { groupsText } from "Texts/manageGroups";
 
@@ -61,7 +62,7 @@ describe("User Role UI and Functionality verification", () => {
             "USER ROLE"
         );
         cy.verifyElement('[data-cy="custom-groups-title"]', "CUSTOM GROUPS");
-        cy.get('[data-cy="create-group-button"]').should("be.visible");
+        cy.get('[data-cy="create-group-button-icon"]').should("be.visible");
         cy.get('[data-cy="search-icon"]').should("be.visible");
 
         // Admin List Item Verification
@@ -91,23 +92,11 @@ describe("User Role UI and Functionality verification", () => {
             groupsText.emailTableHeader
         );
 
-        // Verify user data row is present (Admin group should have at least one user)
+        verifyUserRow("The Developer", "dev@tooljet.io");
 
-        // Verify user name column with avatar and name text
-        cy.get('[data-cy="avatar-image"]').should("be.visible");
-        cy.get('[data-cy="user-name"]')
-            .should("be.visible")
-            .and("contain.text", "The Developer");
-        cy.get('[data-cy="user-email"]')
-            .should("be.visible")
-            .and("have.text", " dev@tooljet.io");
-
-        // Verify edit role button
         cy.get('[data-cy="edit-role-button"]')
             .should("be.visible")
             .and("be.enabled");
-
-        // Verify Edit User Role Modal
         cy.get('[data-cy="edit-role-button"]').click();
         verifyEditUserRoleModal("dev@tooljet.io");
         cy.get(groupsSelector.cancelButton).click();
diff --git a/cypress-tests/cypress/support/utils/manageGroups.js b/cypress-tests/cypress/support/utils/manageGroups.js
index 72066059a1..3ca75057e0 100644
--- a/cypress-tests/cypress/support/utils/manageGroups.js
+++ b/cypress-tests/cypress/support/utils/manageGroups.js
@@ -28,7 +28,7 @@ export const addAppToGroup = (appName) => {
   );
 };
 
-export const createGroup = (groupName) => {
+export const apiCreateGroup = (groupName) => {
   return cy.getAuthHeaders().then((headers) => {
     return cy
       .request({
@@ -44,14 +44,16 @@ export const createGroup = (groupName) => {
   });
 };
 
-export const apiDeleteGroup = (groupId) => {
-  cy.getAuthHeaders().then((headers) => {
-    cy.request({
-      method: "DELETE",
-      url: `${Cypress.env("server_host")}/api/v2/group-permissions/${groupId}`,
-      headers: headers,
-    }).then((response) => {
-      expect(response.status).to.equal(200);
+export const apiDeleteGroup = (groupName) => {
+  cy.apiGetGroupId(groupName).then((groupId) => {
+    cy.getAuthHeaders().then((headers) => {
+      cy.request({
+        method: "DELETE",
+        url: `${Cypress.env("server_host")}/api/v2/group-permissions/${groupId}`,
+        headers: headers,
+      }).then((response) => {
+        expect(response.status).to.equal(200);
+      });
     });
   });
 };
@@ -341,4 +343,36 @@ export const verifyUserRole = (userIdAlias, expectedRole, expectedGroups) => {
       expect(roleName).to.equal(expectedRole);
     });
   });
-};
\ No newline at end of file
+};
+
+export const apiAddUserToGroup = (groupId, email) => {
+  return cy.getAuthHeaders().then((headers) => {
+    return cy
+      .request({
+        method: "GET",
+        url: `${Cypress.env("server_host")}/api/organization-users`,
+        headers: headers,
+        log: false,
+      })
+      .then((response) => {
+        expect(response.status).to.equal(200);
+        const user = response.body.users.find((u) => u.email === email);
+        const userId = user.user_id;
+        return cy
+          .request({
+            method: "POST",
+            url: `${Cypress.env("server_host")}/api/v2/group-permissions/${groupId}/users`,
+            headers: headers,
+            body: {
+              userIds: [userId],
+              groupId: groupId,
+            },
+            log: false,
+          })
+          .then((addResponse) => {
+            expect(addResponse.status).to.equal(201);
+            return userId;
+          });
+      });
+  });
+};
diff --git a/cypress-tests/cypress/support/utils/platform/customGroups.js b/cypress-tests/cypress/support/utils/platform/customGroups.js
new file mode 100644
index 0000000000..cdae98c6fd
--- /dev/null
+++ b/cypress-tests/cypress/support/utils/platform/customGroups.js
@@ -0,0 +1,173 @@
+import { commonSelectors } from "Selectors/common";
+import { commonEeSelectors } from "Selectors/eeCommon";
+import { cyParamName, groupsSelector } from "Selectors/manageGroups";
+import { groupsText } from "Texts/manageGroups";
+
+export const createGroupViaUI = (groupName) => {
+    cy.get(groupsSelector.createNewGroupButton).click();
+    cy.get(groupsSelector.addNewGroupModalTitle).verifyVisibleElement(
+        "have.text",
+        groupsText.cardTitle
+    );
+    cy.clearAndType(groupsSelector.groupNameInput, groupName);
+    cy.get(groupsSelector.createGroupButton).should("be.enabled").click();
+    cy.verifyToastMessage(
+        commonSelectors.toastMessage,
+        groupsText.groupCreatedToast
+    );
+};
+
+export const verifyGroupCreatedInSidebar = (groupName) => {
+    cy.get(groupsSelector.groupLink(groupName))
+        .should("be.visible")
+        .and("contain.text", groupName);
+};
+
+export const renameGroupViaUI = (oldName, newName) => {
+    cy.get(groupsSelector.groupLink(oldName)).click();
+    cy.get(groupsSelector.groupNameUpdateLink).should("be.visible").click();
+    cy.clearAndType(groupsSelector.groupNameInput, newName);
+    cy.get(groupsSelector.createGroupButton).click();
+    cy.verifyToastMessage(
+        commonSelectors.toastMessage,
+        groupsText.groupNameUpdateSucessToast
+    );
+};
+
+export const deleteGroupViaUI = (groupName) => {
+    cy.get(groupsSelector.groupLink(groupName)).click();
+    cy.get(groupsSelector.groupLink(groupName)).realHover();
+    cy.wait(2000).then(() => {
+        cy.get(
+            `[data-cy="${cyParamName(groupName)}-list-item"] > :nth-child(2) > .tj-base-btn`
+        ).click({ force: true });
+    });
+    cy.get(groupsSelector.deleteGroupOption).click();
+    cy.get(commonSelectors.buttonSelector("Yes")).click();
+};
+
+export const verifyGroupRemovedFromSidebar = (groupName) => {
+    cy.get(groupsSelector.groupLink(groupName)).should("not.exist");
+};
+
+export const addGranularPermissionViaUI = (permissionName, options = {}) => {
+    const {
+        resourceType = "app",
+        permission = "edit",
+        scope = "all",
+        resources = [],
+    } = options;
+
+    cy.ifEnv("Community", () => {
+        cy.get(groupsSelector.addAppsButton).click();
+    });
+    cy.ifEnv("Enterprise", () => {
+        cy.get(groupsSelector.addPermissionButton).click();
+        if (resourceType === "app") {
+            cy.get(groupsSelector.addAppButton).click();
+        } else if (resourceType === "workflow") {
+            cy.get(groupsSelector.addWorkflowButton).click();
+        } else if (resourceType === "datasource") {
+            cy.get(groupsSelector.addDatasourceButton).click();
+        }
+    });
+
+    cy.clearAndType(groupsSelector.permissionNameInput, permissionName);
+
+    if (resourceType === "app") {
+        if (permission === "view") {
+            cy.get(groupsSelector.viewPermissionRadio).check();
+        } else if (permission === "edit") {
+            cy.get(groupsSelector.editPermissionRadio).check();
+        }
+    } else if (resourceType === "workflow") {
+        if (permission === "execute") {
+            cy.get(groupsSelector.executeWorkflowradio).check();
+        } else if (permission === "build") {
+            cy.get(groupsSelector.buildWorkflowradio).check();
+        }
+    } else if (resourceType === "datasource") {
+        if (permission === "buildWith") {
+            cy.get(groupsSelector.buildWithDatasourceRadio).check();
+        } else if (permission === "configure") {
+            cy.get(groupsSelector.configureDatasourceradio).check();
+        }
+    }
+
+    if (scope === "custom") {
+        cy.get(groupsSelector.customRadio).check();
+        if (resources.length > 0) {
+            resources.forEach((resource) => {
+                cy.get(groupsSelector.resourceSelector).click();
+                cy.get(groupsSelector.searchBoxOptions).contains(resource).click();
+            });
+        }
+    } else {
+        cy.get(groupsSelector.allAppsRadio).check();
+    }
+
+    cy.get(groupsSelector.confimButton).click();
+};
+
+export const switchBetweenAllAndCustom = (targetScope) => {
+    if (targetScope === "all") {
+        cy.get(groupsSelector.allAppsRadio).check();
+        cy.get(groupsSelector.allAppsRadio).should("be.checked");
+        cy.get(groupsSelector.customRadio).should("not.be.checked");
+    } else if (targetScope === "custom") {
+        cy.get(groupsSelector.customRadio).check();
+        cy.get(groupsSelector.customRadio).should("be.checked");
+        cy.get(groupsSelector.allAppsRadio).should("not.be.checked");
+        cy.get(".css-b62m3t-container").should("be.visible");
+    }
+};
+
+export const openGroupThreeDotMenu = (groupName) => {
+    cy.get(groupsSelector.groupLink(groupName)).realHover()
+    cy.get(groupsSelector.groupLink(groupName)).then(() => {
+        cy.get('[datacy="groups-list-option-button"]').click();
+    });
+};
+
+export const verifyDuplicateModal = (originalGroupName) => {
+    cy.get('[data-cy="modal-title"]')
+        .should("be.visible")
+        .and("contain.text", "Duplicate group");
+
+    cy.verifyElement(
+        '[data-cy="modal-message"]',
+        "Duplicate the following parts of the group"
+    );
+    cy.verifyElement('[data-cy="users-label"]', "Users");
+    cy.get('[data-cy="users-check-input"]')
+        .should("be.visible")
+        .and("be.checked");
+
+    cy.verifyElement('[data-cy="permissions-label"]', "Permissions");
+    cy.get('[data-cy="permissions-check-input"]')
+        .should("be.visible")
+        .and("be.checked");
+
+    cy.verifyElement('[data-cy="apps-label"]', "Apps");
+    cy.get('[data-cy="apps-check-input"]').should("be.visible").and("be.checked");
+
+    cy.ifEnv("Enterprise", () => {
+        cy.verifyElement('[data-cy="workflows-label"]', "Workflows");
+        cy.get('[data-cy="workflows-check-input"]')
+            .should("be.visible")
+            .and("be.checked");
+
+        cy.verifyElement('[data-cy="datasources-label"]', "Datasources");
+        cy.get('[data-cy="datasources-check-input"]')
+            .should("be.visible")
+            .and("be.checked");
+    });
+
+    cy.verifyElement(groupsSelector.cancelButton, "Cancel");
+    cy.get(groupsSelector.cancelButton).should("be.visible").and("be.enabled");
+
+    cy.verifyElement(commonEeSelectors.confirmButton, "Duplicate");
+    cy.get(commonEeSelectors.confirmButton)
+        .should("be.visible")
+        .and("be.enabled");
+};

From 1a40e8a2cdfdebe4fbad6c001582a2beeaab8ca0 Mon Sep 17 00:00:00 2001
From: ajith-k-v <ajith.jaban@gmail.com>
Date: Tue, 21 Oct 2025 23:52:42 +0530
Subject: [PATCH 090/157] utils file

---
 .../support/utils/platform/groupsUI.js        | 52 +++++++++++--------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/cypress-tests/cypress/support/utils/platform/groupsUI.js b/cypress-tests/cypress/support/utils/platform/groupsUI.js
index 8d88e939dd..2cd8720342 100644
--- a/cypress-tests/cypress/support/utils/platform/groupsUI.js
+++ b/cypress-tests/cypress/support/utils/platform/groupsUI.js
@@ -52,14 +52,14 @@ export const verifyEditUserRoleModal = (userEmail) => {
     cy.get('[data-cy="modal-close-button"]').should("be.visible");
 };
 
-export const toggleAllPermissions = () => {
+export const toggleAllPermissions = (status = ["uncheck", "check"]) => {
     permissions.forEach((permissionSelector) => {
-        cy.get(permissionSelector).should("be.visible").uncheck();
+        cy.get(permissionSelector).should("be.visible")[status[0]]();
         cy.verifyToastMessage(
             commonSelectors.toastMessage,
             groupsText.permissionUpdatedToast
         );
-        cy.get(permissionSelector).check();
+        cy.get(permissionSelector).should("be.visible")[status[1]]();
         cy.verifyToastMessage(
             commonSelectors.toastMessage,
             groupsText.permissionUpdatedToast
@@ -75,9 +75,9 @@ export const verifyDeleteConfirmationModal = () => {
 };
 
 export const verifyGranularEditModal = (role) => {
-    cy.get(groupsSelector.granularAccessPermission)
-        .trigger("mouseenter")
-        .click({ force: true });
+    cy.get(groupsSelector.granularAccessPermission).realHover()
+    cy.get('[data-cy="edit-apps-granular-access"]').click();
+
     cy.get(".modal-base").should("be.visible");
 
     cy.get(groupsSelector.deletePermissionIcon)
@@ -89,7 +89,7 @@ export const verifyGranularEditModal = (role) => {
     cy.contains("Cancel").click();
 
     cy.get(groupsSelector.granularAccessPermission)
-        .trigger("mouseenter")
+        .realHover()
         .click({ force: true });
     cy.verifyElement(
         `${groupsSelector.addEditPermissionModalTitle}:eq(2)`,
@@ -98,9 +98,9 @@ export const verifyGranularEditModal = (role) => {
     permissionModal();
 
     if (role === "builder" || role === "enduser") {
-        cy.get(groupsSelector.customradio).should("be.disabled");
+        cy.get(groupsSelector.customRadio).should("be.disabled");
     } else {
-        cy.get(groupsSelector.customradio).should("be.enabled");
+        cy.get(groupsSelector.customRadio).should("be.enabled");
     }
     cy.verifyElement(groupsSelector.customLabel, groupsText.customLabel);
     cy.verifyElement(
@@ -137,9 +137,9 @@ export const verifyGranularAddModal = (role) => {
     permissionModal();
 
     if (role === "builder" || role === "enduser") {
-        cy.get(groupsSelector.customradio).should("be.disabled");
+        cy.get(groupsSelector.customRadio).should("be.disabled");
     } else {
-        cy.get(groupsSelector.customradio).should("be.enabled");
+        cy.get(groupsSelector.customRadio).should("be.enabled");
     }
     cy.verifyElement(groupsSelector.customLabel, groupsText.customLabel);
     cy.verifyElement(
@@ -275,7 +275,7 @@ export const verifyGranularPermissionModalUI = (
         groupsSelector.allAppsHelperText,
         groupsText.allAppsHelperText
     );
-    cy.get(groupsSelector.customradio).should("be.visible");
+    cy.get(groupsSelector.customRadio).should("be.visible");
     cy.verifyElement(groupsSelector.customLabel, groupsText.customLabel);
     cy.verifyElement(
         groupsSelector.customHelperText,
@@ -293,7 +293,8 @@ export const verifyGranularPermissionModalUI = (
     }
 };
 
-export const verifyGranularPermissionModalStates = (resourceType, role) => {
+
+export const verifyGranularPermissionModalStates = (resourceType, role, customStateOverride = null) => {
     const stateConfig = {
         app: {
             builder: {
@@ -313,7 +314,7 @@ export const verifyGranularPermissionModalStates = (resourceType, role) => {
             custom: {
                 editRadio: { checked: true, enabled: true },
                 viewRadio: { checked: false, enabled: true },
-                hideCheckbox: { enabled: true },
+                hideCheckbox: { enabled: false },
                 allAppsRadio: { checked: true, enabled: true },
                 customRadio: { checked: false, enabled: true },
             },
@@ -354,7 +355,13 @@ export const verifyGranularPermissionModalStates = (resourceType, role) => {
         },
     };
 
-    const config = stateConfig[resourceType][role];
+    // Get the base config
+    let config = stateConfig[resourceType][role];
+
+    // If customStateOverride is provided and role is 'custom', merge it with the default
+    if (customStateOverride && role === 'custom') {
+        config = { ...config, ...customStateOverride };
+    }
 
     if (resourceType === "app") {
         cy.get(groupsSelector.editPermissionRadio)
@@ -401,7 +408,7 @@ export const verifyGranularPermissionModalStates = (resourceType, role) => {
         .and(config.allAppsRadio.checked ? "be.checked" : "not.be.checked")
         .and(config.allAppsRadio.enabled ? "be.enabled" : "be.disabled");
 
-    cy.get(groupsSelector.customradio)
+    cy.get(groupsSelector.customRadio)
         .should("be.visible")
         .and(config.customRadio.checked ? "be.checked" : "not.be.checked")
         .and(config.customRadio.enabled ? "be.enabled" : "be.disabled");
@@ -672,11 +679,6 @@ export const verifyCheckPermissionStates = (roleType, action = null) => {
     };
 
     const config = roleConfig[roleType];
-    if (!config) {
-        throw new Error(
-            `Invalid role type: ${roleType}. Must be one of: admin, enduser, builder, custom`
-        );
-    }
 
     permissions.forEach((permissionSelector) => {
         cy.get(permissionSelector)
@@ -1001,4 +1003,10 @@ export const permissionModal = () => {
         groupsSelector.allAppsHelperText,
         groupsText.allAppsHelperText
     );
-};
\ No newline at end of file
+};
+
+export const verifyUserRow = (name, email) => {
+    cy.get('[data-cy="avatar-image"]').should("be.visible");
+    cy.get('[data-cy="user-name"]').should("be.visible").and("contain.text", name);
+    cy.get('[data-cy="user-email"]').should("be.visible").and("have.text", email);
+};

From 8152117d6edcd34aba975d792426a3066f69908b Mon Sep 17 00:00:00 2001
From: ajith-k-v <ajith.jaban@gmail.com>
Date: Tue, 21 Oct 2025 23:52:57 +0530
Subject: [PATCH 091/157] Update data-cy

---
 .../components/AppResourcePermission.jsx                    | 6 +++---
 .../BaseManageGroupPermissions.jsx                          | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGranularAccess/components/AppResourcePermission.jsx b/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGranularAccess/components/AppResourcePermission.jsx
index bcb43ba917..6a2e738294 100644
--- a/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGranularAccess/components/AppResourcePermission.jsx
+++ b/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGranularAccess/components/AppResourcePermission.jsx
@@ -5,7 +5,7 @@ import SolidIcon from '@/_ui/Icon/SolidIcons';
 import { ButtonSolid } from '@/_ui/AppButton/AppButton';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import OverflowTooltip from '@/_components/OverflowTooltip';
-function AppResourcePermissions({
+function AppResourcePermissions ({
   updateOnlyGranularPermissions,
   permissions,
   currentGroupPermission,
@@ -34,7 +34,7 @@ function AppResourcePermissions({
       onClick={() => {
         !isRoleGroup && !isBasicPlan && !notClickable && openEditPermissionModal(permissions);
       }}
-      data-cy="granular-access-permission"
+      data-cy="apps-granular-access"
     >
       <div className="resource-name">
         <SolidIcon name="app" width="20px" className="resource-icon" />
@@ -176,7 +176,7 @@ function AppResourcePermissions({
               openEditPermissionModal(permissions);
             }}
             disabled={isRoleGroup || isBasicPlan}
-            data-cy="edit-permission-button"
+            data-cy="edit-apps-granular-access"
           />
         )}
       </div>
diff --git a/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGroupPermissions/BaseManageGroupPermissions.jsx b/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGroupPermissions/BaseManageGroupPermissions.jsx
index efc7551435..8768b56e95 100644
--- a/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGroupPermissions/BaseManageGroupPermissions.jsx
+++ b/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGroupPermissions/BaseManageGroupPermissions.jsx
@@ -761,7 +761,7 @@ class BaseManageGroupPermissions extends React.Component {
                               iconWidth="20"
                               className="create-group-custom"
                               disabled={!isFeatureEnabled}
-                              data-cy="create-group-button"
+                              data-cy="create-new-group-button-icon"
                             />
                           </LicenseTooltip>
                         </div>

From 50e8e6932ef49ac77b0b1332de6ac5e02395915c Mon Sep 17 00:00:00 2001
From: ajith-k-v <ajith.jaban@gmail.com>
Date: Wed, 22 Oct 2025 00:25:28 +0530
Subject: [PATCH 092/157] update test cases

---
 .../workspace/groupDuplication.cy.js          | 143 --------------
 .../groups/customGroupGranularAccess.cy.js    |  33 ++--
 .../groups/customGroupPermissions.cy.js       |  10 +-
 .../workspace/groups/permissions.cy.js        |  33 ++--
 .../workspace/groups/userRoleUI.cy.js         |   2 +-
 .../cypress/support/utils/manageGroups.js     | 119 ------------
 .../support/utils/platform/groupsUI.js        | 177 +-----------------
 .../cypress/support/utils/uiPermissions.js    |  64 -------
 .../cypress/support/utils/userPermissions.js  |  75 +-------
 9 files changed, 49 insertions(+), 607 deletions(-)
 delete mode 100644 cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/workspace/groupDuplication.cy.js

diff --git a/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/workspace/groupDuplication.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/workspace/groupDuplication.cy.js
deleted file mode 100644
index ce82392019..0000000000
--- a/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/workspace/groupDuplication.cy.js
+++ /dev/null
@@ -1,143 +0,0 @@
-import { commonSelectors } from "Selectors/common";
-import { groupsSelector } from "Selectors/manageGroups";
-import { fake } from "Fixtures/fake";
-import {
-  navigateToManageGroups,
-  viewAppCardOptions,
-} from "Support/utils/common";
-import {
-  OpenGroupCardOption,
-  verifyGroupCardOptions,
-  duplicateMultipleGroups,
-  createGroupAddAppAndUserToGroup,
-  groupPermission,
-} from "Support/utils/manageGroups";
-import { cyParamName } from "Selectors/common";
-import { roleBasedOnboarding } from "Support/utils/onboarding";
-
-const data = {};
-data.groupName = fake.firstName.replaceAll("[^A-Za-z]", "");
-data.appName = `${fake.companyName}-App`;
-const workspaceName = fake.firstName;
-const workspaceSlug = fake.firstName.toLowerCase().replace(/[^A-Za-z]/g, "");
-
-describe("Groups duplication", () => {
-  beforeEach(() => {
-    cy.defaultWorkspaceLogin();
-    cy.apiCreateWorkspace(workspaceName, workspaceSlug);
-    cy.visit(`${workspaceSlug}`);
-    cy.apiLogout();
-    cy.apiLogin();
-    cy.visit(`${workspaceSlug}`);
-    groupPermission(
-      [
-        "appsCreateCheck",
-        "appsDeleteCheck",
-        "workspaceVarCheckbox",
-        "foldersCreateCheck",
-      ],
-      "Admin"
-    );
-    cy.apiCreateApp(data.appName);
-
-  });
-
-  it("Should verify the group duplication feature", () => {
-    data.firstName = fake.firstName;
-    data.email = fake.email.toLowerCase().replaceAll("[^A-Za-z]", "");
-    cy.visit(`${workspaceSlug}`);
-    roleBasedOnboarding(data.firstName, data.email, "builder");
-    cy.apiLogout();
-
-    cy.apiLogin();
-    cy.visit(`${workspaceSlug}`);
-    navigateToManageGroups();
-    verifyGroupCardOptions("Admin");
-    cy.wait(3000);
-    cy.get('[datacy="groups-list-option-button"]').click();
-    cy.get('[data-cy="delete-group-card-option"] > .col').should(
-      "have.class",
-      "disable"
-    );
-    duplicateMultipleGroups(["Admin", "Builder", "End-user"]);
-    createGroupAddAppAndUserToGroup(data.groupName, data.email);
-    groupPermission(
-      [
-        "appsCreateCheck",
-        "appsDeleteCheck",
-        "workspaceVarCheckbox",
-        "foldersCreateCheck",
-      ],
-      data.groupName,
-      true
-    );
-    cy.wait(1000);
-    verifyGroupCardOptions(data.groupName);
-    cy.get(groupsSelector.duplicateOption).click();
-
-    cy.get(commonSelectors.defaultModalTitle).verifyVisibleElement(
-      "have.text",
-      "Duplicate group"
-    );
-    cy.get(commonSelectors.modalMessage).verifyVisibleElement(
-      "have.text",
-      "Duplicate the following parts of the group"
-    );
-    cy.get(groupsSelector.usersCheckInput).should("be.visible");
-    cy.verifyLabel("Users");
-    cy.get(groupsSelector.permissionCheckInput).should("be.visible");
-    cy.verifyLabel("Permissions");
-    cy.get(groupsSelector.appsCheckInput).should("be.visible");
-    cy.verifyLabel("Apps");
-    cy.get(commonSelectors.cancelButton).verifyVisibleElement(
-      "have.text",
-      "Cancel"
-    );
-    cy.get(groupsSelector.confimButton).verifyVisibleElement(
-      "have.text",
-      "Duplicate"
-    );
-
-    cy.get(groupsSelector.confimButton).click();
-    cy.verifyToastMessage(
-      commonSelectors.toastMessage,
-      "Group duplicated successfully!"
-    );
-
-    cy.wait(500);
-    cy.get(
-      groupsSelector.duplicatedGroupLink(data.groupName)
-    ).verifyVisibleElement("have.text", `${data.groupName}_copy`);
-
-    OpenGroupCardOption(data.groupName);
-    cy.get(groupsSelector.deleteGroupOption).click();
-    cy.get(commonSelectors.buttonSelector("Yes")).click();
-    cy.apiLogout();
-
-    cy.apiLogin(data.email, "password");
-    cy.visit(`${workspaceSlug}`);
-    cy.wait(2000);
-    cy.get(commonSelectors.appCreateButton).should("be.visible");
-    cy.get(commonSelectors.createNewFolderButton).should("be.visible");
-    cy.wait(2000);
-    cy.reload();
-    viewAppCardOptions(data.appName);
-    cy.contains("Delete app").should("exist");
-    cy.get(commonSelectors.workspaceConstantsIcon).should("be.visible");
-    cy.apiLogout();
-
-    cy.apiLogin();
-    cy.visit(`${workspaceSlug}`);
-    navigateToManageGroups();
-    OpenGroupCardOption(`${data.groupName}_copy`);
-    cy.get(groupsSelector.deleteGroupOption).click();
-    cy.get(commonSelectors.buttonSelector("Yes")).click();
-    cy.apiLogout();
-
-    cy.apiLogin(data.email, "password");
-    cy.visit(`${workspaceSlug}`);
-    cy.get(commonSelectors.appCreateButton).should("not.exist");
-    cy.get(commonSelectors.createNewFolderButton).should("not.exist");
-    cy.get(commonSelectors.workspaceConstantsIcon).should("not.exist");
-  });
-});
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupGranularAccess.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupGranularAccess.cy.js
index aeed08c85c..02fc2cae58 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupGranularAccess.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupGranularAccess.cy.js
@@ -2,16 +2,12 @@ import { fake } from "Fixtures/fake";
 import { commonSelectors } from "Selectors/common";
 import { dataSourceSelector } from "Selectors/dataSource";
 import { groupsSelector } from "Selectors/manageGroups";
-import {
-    navigateToManageGroups
-} from "Support/utils/common";
+import { navigateToManageGroups } from "Support/utils/common";
 import {
     createGroupsAndAddUserInGroup,
-    setupWorkspaceAndInviteUser
+    setupWorkspaceAndInviteUser,
 } from "Support/utils/manageGroups";
-import {
-    getGroupPermissionInput
-} from "Support/utils/userPermissions";
+import { getGroupPermissionInput } from "Support/utils/userPermissions";
 import { groupsText } from "Texts/manageGroups";
 
 describe("Custom Group Granular Access", () => {
@@ -38,10 +34,8 @@ describe("Custom Group Granular Access", () => {
         cy.intercept("DELETE", "/api/folders/*").as("folderDeleted");
         cy.skipWalkthrough();
         cy.viewport(2400, 2000);
-
     });
 
-
     it("should verify the granular permissions in custom groups", () => {
         const groupName = fake.firstName.replace(/[^A-Za-z]/g, "");
         const appName2 = fake.companyName;
@@ -57,7 +51,7 @@ describe("Custom Group Granular Access", () => {
             data.workspaceSlug,
             data.firstName,
             data.email,
-            'builder'
+            "builder"
         );
 
         cy.apiLogin();
@@ -122,7 +116,6 @@ describe("Custom Group Granular Access", () => {
         cy.get(groupsSelector.confimButton).click();
 
         cy.ifEnv("Enterprise", () => {
-
             cy.apiCreateWorkflow(workflowName1);
             cy.apiCreateWorkflow(workflowName2);
 
@@ -140,7 +133,7 @@ describe("Custom Group Granular Access", () => {
                 [{ key: "url", value: "https://jsonplaceholder.typicode.com/users" }]
             );
 
-            cy.get(groupsSelector.groupLink('Builder')).click();
+            cy.get(groupsSelector.groupLink("Builder")).click();
             cy.get(groupsSelector.groupLink(groupName)).click();
             cy.get(groupsSelector.granularLink).click();
 
@@ -213,22 +206,22 @@ describe("Custom Group Granular Access", () => {
             );
 
             cy.get(commonSelectors.globalDataSourceIcon).click();
-            cy.get(dataSourceSelector.dataSourceNameButton(datasourceName1.toLowerCase())).click();
-            cy.get(dataSourceSelector.dsNameInputField).should('be.enabled');
-            cy.get(dataSourceSelector.dataSourceNameButton(datasourceName2.toLowerCase())).click();
-            cy.get(dataSourceSelector.dsNameInputField).should('be.disabled')
+            cy.get(
+                dataSourceSelector.dataSourceNameButton(datasourceName1.toLowerCase())
+            ).click();
+            cy.get(dataSourceSelector.dsNameInputField).should("be.enabled");
+            cy.get(
+                dataSourceSelector.dataSourceNameButton(datasourceName2.toLowerCase())
+            ).click();
+            cy.get(dataSourceSelector.dsNameInputField).should("be.disabled");
 
             cy.get(dataSourceSelector.commonDsLabelAndCount).click();
             cy.get('[data-cy="rest-api-add-button"]').should("be.disabled");
         });
 
-
         //Visit hidden app url
         cy.visitSlug({
             actualUrl: `${Cypress.config("baseUrl")}/applications/${appSlug}`,
         });
-
-
     });
-
 });
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupPermissions.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupPermissions.cy.js
index 9197da5db8..021f212641 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupPermissions.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/customGroupPermissions.cy.js
@@ -42,7 +42,9 @@ describe("Custom Group Permissions", () => {
     it("should verify user permissions in custom groups", () => {
         const groupName = fake.firstName.replace(/[^A-Za-z]/g, "");
         const workflowName1 = fake.companyName;
-        const datasourceName1 = fake.companyName.toLowerCase().replace(/[^A-Za-z]/g, "");
+        const datasourceName1 = fake.companyName
+            .toLowerCase()
+            .replace(/[^A-Za-z]/g, "");
 
         setupWorkspaceAndInviteUser(
             data.workspaceName,
@@ -194,9 +196,9 @@ describe("Custom Group Permissions", () => {
             cy.get(commonSelectors.appCard(workflowName1)).should("not.exist");
 
             cy.get(commonSelectors.globalDataSourceIcon).click();
-            cy.get(
-                dataSourceSelector.dataSourceNameButton(datasourceName1)
-            ).should("exist");
+            cy.get(dataSourceSelector.dataSourceNameButton(datasourceName1)).should(
+                "exist"
+            );
             cy.get(dataSourceSelector.commonDsLabelAndCount).click();
             cy.get('[data-cy="rest-api-add-button"]').should("be.enabled");
         });
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/permissions.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/permissions.cy.js
index 8257cc86bd..b6b8967b39 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/permissions.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/permissions.cy.js
@@ -16,7 +16,7 @@ import {
     setupAndUpdateRole,
     setupWorkspaceAndInviteUser,
     updateRole,
-    verifyUserPrivileges
+    verifyUserPrivileges,
 } from "Support/utils/manageGroups";
 import { commonText } from "Texts/common";
 import { exportAppModalText, importText } from "Texts/exportImport";
@@ -46,7 +46,6 @@ describe("Manage Groups", () => {
         cy.intercept("DELETE", "/api/folders/*").as("folderDeleted");
         cy.skipWalkthrough();
         cy.viewport(2400, 2000);
-
     });
 
     it("should verify the last active admin role update protection", () => {
@@ -265,21 +264,21 @@ describe("Manage Groups", () => {
         //Create and run postgres query in the app
         // Need to enable once bug is fixed
         /*
-                        
-                
-                        addQuery(
-                            "table_preview",
-                            `SELECT * FROM persons;`,
-                            `cypress-${data.dsName1}-postgresql`
-                        );
-                
-                        cy.get('[data-cy="list-query-table_preview"]').verifyVisibleElement(
-                            "have.text",
-                            "table_preview "
-                        );
-                        cy.get(dataSourceSelector.queryCreateAndRunButton).click();
-                        verifyValueOnInspector("table_preview", "7 items ");
-                        */
+                            
+                    
+                            addQuery(
+                                "table_preview",
+                                `SELECT * FROM persons;`,
+                                `cypress-${data.dsName1}-postgresql`
+                            );
+                    
+                            cy.get('[data-cy="list-query-table_preview"]').verifyVisibleElement(
+                                "have.text",
+                                "table_preview "
+                            );
+                            cy.get(dataSourceSelector.queryCreateAndRunButton).click();
+                            verifyValueOnInspector("table_preview", "7 items ");
+                            */
 
         cy.backToApps();
 
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/userRoleUI.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/userRoleUI.cy.js
index 31ef2d2e4e..af06f1778c 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/userRoleUI.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/groups/userRoleUI.cy.js
@@ -14,7 +14,7 @@ import {
     verifyGranularAddModal,
     verifyGranularEditModal,
     verifyPermissionCheckBoxLabelsAndHelperTexts,
-    verifyUserRow
+    verifyUserRow,
 } from "Support/utils/platform/groupsUI";
 import { groupsText } from "Texts/manageGroups";
 
diff --git a/cypress-tests/cypress/support/utils/manageGroups.js b/cypress-tests/cypress/support/utils/manageGroups.js
index 3ca75057e0..df8c2d921b 100644
--- a/cypress-tests/cypress/support/utils/manageGroups.js
+++ b/cypress-tests/cypress/support/utils/manageGroups.js
@@ -10,24 +10,6 @@ import {
 } from "Support/utils/manageUsers";
 import { groupsText } from "Texts/manageGroups";
 
-export const addAppToGroup = (appName) => {
-  cy.get(groupsSelector.appsLink).click();
-  cy.wait(500);
-  cy.get(groupsSelector.appSearchBox).click();
-  cy.wait(500);
-  cy.get(groupsSelector.searchBoxOptions).contains(appName).click();
-  cy.get(groupsSelector.selectAddButton).click();
-  cy.contains("tr", appName)
-    .parent()
-    .within(() => {
-      cy.get("td input").eq(1).check();
-    });
-  cy.verifyToastMessage(
-    commonSelectors.toastMessage,
-    "App permissions updated"
-  );
-};
-
 export const apiCreateGroup = (groupName) => {
   return cy.getAuthHeaders().then((headers) => {
     return cy
@@ -65,52 +47,6 @@ export const deleteGroup = (groupName, workspaceId) => {
   });
 };
 
-export const createGroupAddAppAndUserToGroup = (groupName, email) => {
-  cy.getAuthHeaders().then((headers) => {
-    createGroup(groupName).then((groupId) => {
-      // Add app to group
-      cy.request({
-        method: "POST",
-        url: `${Cypress.env("server_host")}/api/v2/group-permissions/${groupId}/granular-permissions/app`,
-        headers: headers,
-        body: {
-          name: "Apps",
-          type: "app",
-          groupId: groupId,
-          isAll: false,
-          createResourcePermissionObject: {
-            canEdit: true,
-            canView: false,
-            hideFromDashboard: false,
-            resourcesToAdd: [{ appId: Cypress.env("appId") }],
-          },
-        },
-      }).then((response) => {
-        expect(response.status).to.equal(201);
-      });
-      cy.wait(2000);
-      cy.task("dbConnection", {
-        dbconfig: Cypress.env("app_db"),
-        sql: `select id from users where email='${email}';`,
-      }).then((resp) => {
-        const userId = resp.rows[0].id;
-        // Add user to group
-        cy.request({
-          method: "POST",
-          url: `${Cypress.env("server_host")}/api/v2/group-permissions/${groupId}/users`,
-          headers: headers,
-          body: {
-            userIds: [userId],
-            groupId: groupId,
-          },
-        }).then((response) => {
-          expect(response.status).to.equal(201);
-        });
-      });
-    });
-  });
-};
-
 export const OpenGroupCardOption = (groupName) => {
   cy.get(groupsSelector.groupLink(groupName))
     .trigger("mouseenter")
@@ -171,61 +107,6 @@ export const groupPermission = (
   });
 };
 
-export const duplicateGroup = () => {
-  OpenGroupCardOption(groupName);
-  cy.get(groupsSelector.duplicateOption).click();
-};
-
-export const updateRoleUI = (user, role, email, message) => {
-  cy.get(groupsSelector.groupLink(user)).click();
-  cy.get(groupsSelector.usersLink).click();
-  cy.get(`[data-cy="${email}-user-row"] > :nth-child(3)`).click();
-  cy.get('[data-cy="modal-title"] > .tj-text-md').should(
-    "have.text",
-    "Edit user role"
-  );
-  cy.get('[data-cy="user-email"]').should("have.text", email);
-  cy.get(groupsSelector.userRoleLabel).should("have.text", groupsText.userRole);
-  cy.get(groupsSelector.warningText).should(
-    "have.text",
-    groupsText.warningText
-  );
-  cy.get(groupsSelector.cancelButton)
-    .should("have.text", groupsText.cancelButton)
-    .and("be.enabled");
-  cy.get(groupsSelector.confimButton).should("be.disabled");
-  cy.get(
-    ".css-nwhe5y-container > .react-select__control > .react-select__value-container"
-  )
-    .click()
-    .type(`${role}{enter}`);
-  cy.get(groupsSelector.confimButton)
-    .should("be.enabled")
-    .and("have.text", groupsText.continueButtonText)
-    .click();
-  cy.get('[data-cy="modal-body"]').should("have.text", message);
-  cy.get(groupsSelector.cancelButton).click();
-  cy.get(`[data-cy="${email}-user-row"] > :nth-child(3)`).click();
-  cy.get(
-    ".css-nwhe5y-container > .react-select__control > .react-select__value-container"
-  )
-    .click()
-    .type(`${role}{enter}`);
-  cy.get(groupsSelector.confimButton)
-    .should("be.enabled")
-    .and("have.text", groupsText.continueButtonText)
-    .click();
-  cy.get(groupsSelector.confimButton).click();
-  if (user != "Admin") {
-    cy.verifyToastMessage(
-      commonSelectors.toastMessage,
-      groupsText.roleUpdateToastMessage
-    );
-  }
-  cy.get(groupsSelector.groupLink(role)).click();
-  cy.get(`[data-cy="${email}-user-row"]`).should("exist");
-};
-
 export const updateRole = (user, role, email, message = null) => {
   cy.get(groupsSelector.groupLink(user)).click();
   cy.get(groupsSelector.usersLink).click();
diff --git a/cypress-tests/cypress/support/utils/platform/groupsUI.js b/cypress-tests/cypress/support/utils/platform/groupsUI.js
index 2cd8720342..5d5e32408e 100644
--- a/cypress-tests/cypress/support/utils/platform/groupsUI.js
+++ b/cypress-tests/cypress/support/utils/platform/groupsUI.js
@@ -75,7 +75,7 @@ export const verifyDeleteConfirmationModal = () => {
 };
 
 export const verifyGranularEditModal = (role) => {
-    cy.get(groupsSelector.granularAccessPermission).realHover()
+    cy.get(groupsSelector.granularAccessPermission).realHover();
     cy.get('[data-cy="edit-apps-granular-access"]').click();
 
     cy.get(".modal-base").should("be.visible");
@@ -293,8 +293,11 @@ export const verifyGranularPermissionModalUI = (
     }
 };
 
-
-export const verifyGranularPermissionModalStates = (resourceType, role, customStateOverride = null) => {
+export const verifyGranularPermissionModalStates = (
+    resourceType,
+    role,
+    customStateOverride = null
+) => {
     const stateConfig = {
         app: {
             builder: {
@@ -359,7 +362,7 @@ export const verifyGranularPermissionModalStates = (resourceType, role, customSt
     let config = stateConfig[resourceType][role];
 
     // If customStateOverride is provided and role is 'custom', merge it with the default
-    if (customStateOverride && role === 'custom') {
+    if (customStateOverride && role === "custom") {
         config = { ...config, ...customStateOverride };
     }
 
@@ -414,151 +417,6 @@ export const verifyGranularPermissionModalStates = (resourceType, role, customSt
         .and(config.customRadio.enabled ? "be.enabled" : "be.disabled");
 };
 
-export const verifyModalFields = (isEdit = false, groupName = "") => {
-    // Modal header verification
-    cy.get(groupsSelector.permissionNameLabel).verifyVisibleElement(
-        "have.text",
-        groupsText.permissionNameLabel
-    );
-    cy.get(groupsSelector.permissionNameInput)
-        .should("be.visible")
-        .and(
-            isEdit ? "have.value" : "have.attr",
-            isEdit ? groupName : "placeholder",
-            isEdit ? groupName : "Eg. Product analytics apps"
-        );
-    cy.get(groupsSelector.permissionNameHelperText).verifyVisibleElement(
-        "have.text",
-        groupsText.permissionNameHelperText
-    );
-
-    // Permission section verification
-    const permissionChecks = [
-        {
-            selector: groupsSelector.permissionLabel,
-            text: groupsText.permissionLabel,
-        },
-        {
-            selector: groupsSelector.editPermissionLabel,
-            text: groupsText.editPermissionLabel,
-        },
-        {
-            selector: groupsSelector.editPermissionHelperText,
-            text: groupsText.appEditHelperText,
-        },
-        {
-            selector: groupsSelector.viewPermissionLabel,
-            text: groupsText.viewPermissionLabel,
-        },
-        {
-            selector: groupsSelector.viewPermissionHelperText,
-            text: groupsText.appViewHelperText,
-        },
-    ];
-
-    permissionChecks.forEach(({ selector, text }) => {
-        cy.get(selector).verifyVisibleElement("have.text", text);
-    });
-
-    // Hide permission verification
-    cy.get(groupsSelector.hidePermissionInput).should("be.visible");
-    cy.get(groupsSelector.appHidePermissionModalLabel).verifyVisibleElement(
-        "have.text",
-        groupsText.appHideLabel
-    );
-    cy.get(groupsSelector.appHidePermissionModalHelperText).verifyVisibleElement(
-        "have.text",
-        groupsText.appHideHelperText
-    );
-
-    // Resource section verification
-    const resourceChecks = [
-        {
-            selector: groupsSelector.resourceLabel,
-            text: groupsText.resourcesheader,
-        },
-        {
-            selector: groupsSelector.allAppsLabel,
-            text: isEdit ? groupsText.allAppsLabel : groupsText.groupChipText,
-        },
-        {
-            selector: groupsSelector.allAppsHelperText,
-            text: groupsText.allAppsHelperText,
-        },
-    ];
-
-    resourceChecks.forEach(({ selector, text }) => {
-        cy.get(selector).verifyVisibleElement("have.text", text);
-    });
-
-    // Button states
-    cy.get(groupsSelector.confimButton).verifyVisibleElement(
-        "have.text",
-        isEdit ? groupsText.updateButtonText : groupsText.addButtonText
-    );
-    cy.get(groupsSelector.confimButton).should(
-        isEdit ? "be.enabled" : "be.disabled"
-    );
-    cy.get(groupsSelector.cancelButton).verifyVisibleElement(
-        "have.text",
-        groupsText.cancelButton
-    );
-
-    if (isEdit) {
-        cy.get(groupsSelector.deletePermissionIcon).should("be.visible");
-    }
-};
-
-export const verifyPermissionSection = () => {
-    const permissionElements = [
-        {
-            resource: groupsSelector.resourcesApps,
-            resourceText: groupsText.resourcesApps,
-            check: groupsSelector.appsCreateCheck,
-            label: groupsSelector.appsCreateLabel,
-            labelText: groupsText.createLabel,
-            helperText: groupsSelector.appCreateHelperText,
-            helperContent: groupsText.appCreateHelperText,
-        },
-        {
-            resource: groupsSelector.resourcesFolders,
-            resourceText: groupsText.resourcesFolders,
-            check: groupsSelector.foldersCreateCheck,
-            label: groupsSelector.foldersCreateLabel,
-            labelText: groupsText.folderCreateLabel,
-            helperText: groupsSelector.foldersHelperText,
-            helperContent: groupsText.folderHelperText,
-        },
-    ];
-
-    permissionElements.forEach(
-        ({
-            resource,
-            resourceText,
-            check,
-            label,
-            labelText,
-            helperText,
-            helperContent,
-        }) => {
-            cy.get(resource).verifyVisibleElement("have.text", resourceText);
-            cy.get(check).should("be.visible");
-            cy.get(check).check();
-            cy.verifyToastMessage(
-                commonSelectors.toastMessage,
-                groupsText.permissionUpdatedToast
-            );
-            cy.get(check).uncheck();
-            cy.verifyToastMessage(
-                commonSelectors.toastMessage,
-                groupsText.permissionUpdatedToast
-            );
-            cy.get(label).verifyVisibleElement("have.text", labelText);
-            cy.get(helperText).verifyVisibleElement("have.text", helperContent);
-        }
-    );
-};
-
 export const verifyEmptyStates = (customGroup = false) => {
     // Users empty state
     cy.get(groupsSelector.usersLink).click();
@@ -653,23 +511,6 @@ export const permissions =
             groupsSelector.workspaceVarCheckbox,
         ];
 
-export const updatePermissionCheckbox = (permissionSelector, action) => {
-    if (action === "check") {
-        cy.get(permissionSelector).check();
-        cy.verifyToastMessage(
-            commonSelectors.toastMessage,
-            groupsText.permissionUpdatedToast
-        );
-    }
-    if (action === "uncheck") {
-        cy.get(permissionSelector).uncheck();
-        cy.verifyToastMessage(
-            commonSelectors.toastMessage,
-            groupsText.permissionUpdatedToast
-        );
-    }
-};
-
 export const verifyCheckPermissionStates = (roleType, action = null) => {
     const roleConfig = {
         admin: { checked: true, enabled: false },
@@ -1007,6 +848,8 @@ export const permissionModal = () => {
 
 export const verifyUserRow = (name, email) => {
     cy.get('[data-cy="avatar-image"]').should("be.visible");
-    cy.get('[data-cy="user-name"]').should("be.visible").and("contain.text", name);
+    cy.get('[data-cy="user-name"]')
+        .should("be.visible")
+        .and("contain.text", name);
     cy.get('[data-cy="user-email"]').should("be.visible").and("have.text", email);
 };
diff --git a/cypress-tests/cypress/support/utils/uiPermissions.js b/cypress-tests/cypress/support/utils/uiPermissions.js
index 9f1c1fd9fc..4e5a61dcf8 100644
--- a/cypress-tests/cypress/support/utils/uiPermissions.js
+++ b/cypress-tests/cypress/support/utils/uiPermissions.js
@@ -54,8 +54,6 @@ export const uiVerifyFolderCreatePrivilege = (hasPrivilege = true) => {
   cy.get(commonSelectors.createNewFolderButton).should(assertion);
 };
 
-// WORKSPACE CONSTANTS UI OPERATIONS
-
 export const uiVerifyWorkspaceConstantCreatePrivilege = (
   hasPrivilege = true
 ) => {
@@ -63,8 +61,6 @@ export const uiVerifyWorkspaceConstantCreatePrivilege = (
   cy.get(commonSelectors.workspaceConstantsIcon).should(assertion);
 };
 
-// DATASOURCE UI OPERATIONS (Enterprise)
-
 export const uiCreateDataSource = (
   datasourceName,
   datasourceType = "restapi"
@@ -94,8 +90,6 @@ export const uiVerifyDataSourceCreatePrivilege = (hasPrivilege = true) => {
   cy.get(commonSelectors.globalDataSourceIcon).should(assertion);
 };
 
-// WORKFLOW UI OPERATIONS (Enterprise)
-
 export const uiCreateWorkflow = (workflowName) => {
   cy.get(workflowSelector.globalWorkFlowsIcon).click();
 
@@ -132,8 +126,6 @@ export const uiVerifyWorkflowCreatePrivilege = (hasPrivilege = true) => {
   cy.get(commonSelectors.globalWorkFlowsIcon).should(assertion);
 };
 
-// COMPREHENSIVE PERMISSION VERIFICATIONS
-
 export const uiVerifyAllCreatePrivileges = (
   hasAppCreate = true,
   hasFolderCreate = true,
@@ -157,39 +149,23 @@ export const uiVerifyBuilderPrivileges = () => {
 
 export const uiVerifyAdminPrivileges = () => {
   uiVerifyAllCreatePrivileges(true, true, true, true, true);
-
-  // Verify settings access
   cy.get(commonSelectors.settingsIcon).click();
   cy.get(commonSelectors.workspaceSettings).should("exist");
   cy.get(commonSelectors.dashboardIcon).click();
 };
 
-export const uiVerifyEndUserPrivileges = () => {
-  uiVerifyAllCreatePrivileges(false, false, false, false, false);
-
-  // Verify no settings access
-  cy.get(commonSelectors.settingsIcon).click();
-  cy.get(commonSelectors.workspaceSettings).should("not.exist");
-};
-
-// COMPREHENSIVE CRUD WORKFLOWS
-
 export const uiAppCRUDWorkflow = (appName) => {
-  // Create
   uiCreateApp(appName);
   uiVerifyAppCreated(appName, true);
 
-  // Delete
   uiDeleteApp(appName);
   uiVerifyAppDeleted(appName);
 };
 
 export const uiFolderCRUDWorkflow = (folderName) => {
-  // Create
   uiCreateFolder(folderName);
   uiVerifyFolderCreated(folderName);
 
-  // Delete
   deleteFolder(folderName);
   uiVerifyFolderDeleted(folderName);
 };
@@ -198,15 +174,10 @@ export const uiWorkspaceConstantCRUDWorkflow = (
   constantName,
   constantValue
 ) => {
-  // Create
   cy.get(commonSelectors.workspaceConstantsIcon).click();
 
   addAndVerifyConstants(constantName, constantValue);
-
-  // Delete
   deleteConstant(constantName);
-
-  // Close workspace constants panel
   cy.get(commonSelectors.dashboardIcon).click();
 };
 
@@ -215,56 +186,21 @@ export const uiDataSourceCRUDWorkflow = (
   datasourceType = "restapi"
 ) => {
   cy.ifEnv("Enterprise", () => {
-    // Create
     uiCreateDataSource(datasourceName, datasourceType);
     uiVerifyDataSourceCreated(datasourceName);
 
-    // Delete
     uiDeleteDataSource(datasourceName);
     uiVerifyDataSourceDeleted(datasourceName);
-
-    // Go back to dashboard
     cy.get(commonSelectors.dashboardIcon).click();
   });
 };
 
 export const uiWorkflowCRUDWorkflow = (workflowName) => {
   cy.ifEnv("Enterprise", () => {
-    // Create
     uiCreateWorkflow(workflowName);
     uiVerifyWorkflowCreated(workflowName);
 
-    // Delete
     uiDeleteWorkflow();
     uiVerifyWorkflowDeleted(workflowName);
   });
 };
-
-export const uiPerformAllCRUDOperations = (
-  appName,
-  folderName,
-  constantName,
-  constantValue,
-  datasourceName = null,
-  workflowName = null
-) => {
-  // App CRUD
-  uiAppCRUDWorkflow(appName);
-
-  // Folder CRUD
-  uiFolderCRUDWorkflow(folderName);
-
-  // Workspace Constant CRUD
-  uiWorkspaceConstantCRUDWorkflow(constantName, constantValue);
-
-  // Enterprise features
-  cy.ifEnv("Enterprise", () => {
-    if (datasourceName) {
-      uiDataSourceCRUDWorkflow(datasourceName);
-    }
-
-    if (workflowName) {
-      uiWorkflowCRUDWorkflow(workflowName);
-    }
-  });
-};
diff --git a/cypress-tests/cypress/support/utils/userPermissions.js b/cypress-tests/cypress/support/utils/userPermissions.js
index 44c56d700c..0d2e585b80 100644
--- a/cypress-tests/cypress/support/utils/userPermissions.js
+++ b/cypress-tests/cypress/support/utils/userPermissions.js
@@ -1,40 +1,6 @@
 import { commonSelectors } from "Selectors/common";
 import { workspaceConstantsSelectors } from "Selectors/workspaceConstants";
-import { createFolder, deleteFolder } from "Support/utils/common";
 import { addAndVerifyConstants } from "Support/utils/workspaceConstants";
-import { commonText } from "Texts/common";
-
-export const appOperations = {
-  createApp: (appName) => {
-    cy.createApp(appName);
-    cy.backToApps();
-  },
-
-  deleteApp: (appName) => {
-    cy.deleteApp(appName);
-    cy.verifyToastMessage(
-      commonSelectors.toastMessage,
-      commonText.appDeletedToast
-    );
-  },
-
-  cloneApp: (appName) => {
-    cy.get(commonSelectors.appCard(appName))
-      .trigger("mouseover")
-      .find(commonSelectors.cloneButton)
-      .click();
-  },
-};
-
-export const folderOperations = {
-  createFolder: (folderName) => {
-    createFolder(folderName);
-  },
-
-  deleteFolder: (folderName) => {
-    deleteFolder(folderName);
-  },
-};
 
 export const constantsOperations = {
   createConstant: (name, value) => {
@@ -73,37 +39,6 @@ export const verifyPermissions = {
   },
 };
 
-// Helper function to perform all verifications
-export const verifyAllPermissions = (shouldHaveAccess = true) => {
-  verifyPermissions.checkAppPermissions(shouldHaveAccess);
-  verifyPermissions.checkFolderPermissions(shouldHaveAccess);
-  verifyPermissions.checkConstantsPermissions(shouldHaveAccess);
-  verifyPermissions.checkSettingsAccess(shouldHaveAccess);
-};
-
-// Role-based permission sets
-export const rolePermissions = {
-  admin: {
-    name: "Admin",
-    hasFullAccess: true,
-    canManageWorkspace: true,
-    canManageUsers: true,
-  },
-  builder: {
-    name: "Builder",
-    hasFullAccess: true,
-    canManageWorkspace: false,
-    canManageUsers: false,
-  },
-  endUser: {
-    name: "End User",
-    hasFullAccess: false,
-    canManageWorkspace: false,
-    canManageUsers: false,
-  },
-};
-
-
 export const getGroupPermissionInput = (isEnterprise, flag) => {
   return isEnterprise
     ? {
@@ -124,8 +59,7 @@ export const getGroupPermissionInput = (isEnterprise, flag) => {
       folderCRUD: flag,
       orgConstantCRUD: flag,
     };
-}
-
+};
 
 export const verifyBuilderPermissions = (
   appName,
@@ -161,13 +95,11 @@ export const verifyBuilderPermissions = (
 
     cy.apiCreateWorkflow(appName);
     cy.apiDeleteWorkflow(appName);
-
-  })
+  });
 
   verifySettingsAccess(isAdmin);
 };
 
-
 export const verifyBasicPermissions = (canCreate = true) => {
   cy.get(commonSelectors.dashboardAppCreateButton).should(
     canCreate ? "be.enabled" : "be.disabled"
@@ -177,7 +109,6 @@ export const verifyBasicPermissions = (canCreate = true) => {
   );
   cy.get('[data-cy="database-icon"]').should(canCreate ? "exist" : "not.exist");
 
-
   cy.ifEnv("Enterprise", () => {
     cy.get(commonSelectors.globalDataSourceIcon).should(
       canCreate ? "exist" : "not.exist"
@@ -193,4 +124,4 @@ export const verifySettingsAccess = (shouldExist = true) => {
   cy.get(commonSelectors.workspaceSettings).should(
     shouldExist ? "exist" : "not.exist"
   );
-};
\ No newline at end of file
+};

From da9bd9341e23846aece5d62195ade6c037f14672 Mon Sep 17 00:00:00 2001
From: ajith-k-v <ajith.jaban@gmail.com>
Date: Wed, 22 Oct 2025 11:29:04 +0530
Subject: [PATCH 093/157] update platfrom commands

---
 .../commands/platform/platformApiCommands.js      | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/cypress-tests/cypress/commands/platform/platformApiCommands.js b/cypress-tests/cypress/commands/platform/platformApiCommands.js
index bd6f408630..558c4edd5e 100644
--- a/cypress-tests/cypress/commands/platform/platformApiCommands.js
+++ b/cypress-tests/cypress/commands/platform/platformApiCommands.js
@@ -161,12 +161,12 @@ Cypress.Commands.add("apiUpdateWsConstant", (id, updateValue, envName) => {
                 url: `${Cypress.env("server_host")}/api/organization-constants/${id}`,
                 headers: headers,
                 body: {
-                    value: String(updateValue), // ensure it's a string
+                    value: String(updateValue),
                     environment_id: envId,
                 },
             }).then((response) => {
                 expect(response.status).to.equal(200);
-                response.body; // returns the PATCH response body
+                response.body;
             });
         });
     });
@@ -289,11 +289,9 @@ Cypress.Commands.add(
                         : granularPermissions;
 
                     permissionsToDelete.forEach((permission) => {
-                        // Map resource types to delete endpoints
-                        // Note: Workflows use the 'app' endpoint (no separate workflow endpoint in backend)
                         const typeEndpointMap = {
                             app: "app",
-                            workflow: "app",          // ⬅️ Workflows use app endpoint
+                            workflow: "app",
                             data_source: "data-source",
                         };
                         const endpoint = typeEndpointMap[permission.type] || "app";
@@ -409,14 +407,13 @@ Cypress.Commands.add(
         redirectTo = "/",
     }) => {
         cy.intercept("POST", "/api/oauth/sign-in/*", (req) => {
-            // Inject missing params if not present
             if (!req.body.organizationId) {
                 req.body.organizationId = organizationId;
             }
             if (!req.body.redirectTo) {
                 req.body.redirectTo = redirectTo;
             }
-            req.continue(); // Send the modified request
+            req.continue();
         }).as("oidcSignIn");
         cy.getSsoConfigId("openid").then((ssoConfigId) => {
             const configIdToUse = ssoConfigId;
@@ -474,7 +471,6 @@ Cypress.Commands.add(
                         const redirectUrl = authResp.headers["location"];
                         const params = new URL(redirectUrl).searchParams;
                         const code = params.get("code");
-                        // 6. Exchange code for tokens
                         cy.request({
                             method: "POST",
                             url: `https://${oktaDomain}/oauth2/v1/token`,
@@ -543,7 +539,7 @@ Cypress.Commands.add(
         userRole = "end-user",
         userPassword = "password",
         workspaceName = "My workspace",
-        metaData = {},
+        metaData = {}
     ) => {
         let invitationToken, organizationToken;
 
@@ -708,4 +704,3 @@ Cypress.Commands.add("getAuthHeaders", (returnCached = false) => {
         });
     }
 });
-

From fb686e10d64e44756d804fdaa7c57d91a52938a0 Mon Sep 17 00:00:00 2001
From: Devanshu Gupta <devanshuguptaknp@gmail.com>
Date: Wed, 22 Oct 2025 11:32:40 +0530
Subject: [PATCH 094/157] fix: added all scopes hubspot (#14025)

Co-authored-by: Ganesh Kumar <ganesh8056234@gmail.com>
---
 marketplace/plugins/hubspot/lib/manifest.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/marketplace/plugins/hubspot/lib/manifest.json b/marketplace/plugins/hubspot/lib/manifest.json
index 0f4943273b..29dc892b8f 100644
--- a/marketplace/plugins/hubspot/lib/manifest.json
+++ b/marketplace/plugins/hubspot/lib/manifest.json
@@ -57,7 +57,7 @@
         ]
       },
     "scopes": {
-      "value": "oauth"
+      "value": "account-info.security.read accounting actions analytics.behavioral_events.send automation automation.sequences.enrollments.write automation.sequences.read behavioral_events.event_definitions.read_write business-intelligence business_units_view.read cms.domains.read cms.domains.write cms.functions.read cms.functions.write cms.knowledge_base.articles.publish cms.knowledge_base.articles.read cms.knowledge_base.articles.write cms.knowledge_base.settings.read cms.knowledge_base.settings.write cms.membership.access_groups.read cms.membership.access_groups.write cms.performance.read collector.graphql_query.execute collector.graphql_schema.read communication_preferences.read communication_preferences.read_write communication_preferences.statuses.batch.read communication_preferences.statuses.batch.write communication_preferences.write content conversations.custom_channels.read conversations.custom_channels.write conversations.read conversations.visitor_identification.tokens.create conversations.write crm.dealsplits.read_write crm.export crm.extensions_calling_transcripts.read crm.extensions_calling_transcripts.write crm.import crm.lists.read crm.lists.write crm.objects.appointments.read crm.objects.appointments.write crm.objects.carts.read crm.objects.carts.write crm.objects.commercepayments.read crm.objects.commercepayments.write crm.objects.companies.read crm.objects.companies.write crm.objects.contacts.read crm.objects.contacts.write crm.objects.courses.read crm.objects.courses.write crm.objects.custom.read crm.objects.custom.write crm.objects.deals.read crm.objects.deals.write crm.objects.feedback_submissions.read crm.objects.goals.read crm.objects.goals.write crm.objects.invoices.read crm.objects.invoices.write crm.objects.leads.read crm.objects.leads.write crm.objects.line_items.read crm.objects.line_items.write crm.objects.listings.read crm.objects.listings.write crm.objects.marketing_events.read crm.objects.marketing_events.write crm.objects.orders.read crm.objects.orders.write crm.objects.owners.read crm.objects.partner-clients.read crm.objects.partner-clients.write crm.objects.partner-services.read crm.objects.partner-services.write crm.objects.products.read crm.objects.products.write crm.objects.quotes.read crm.objects.quotes.write crm.objects.services.read crm.objects.services.write crm.objects.subscriptions.read crm.objects.subscriptions.write crm.objects.users.read crm.objects.users.write crm.pipelines.orders.read crm.pipelines.orders.write crm.schemas.appointments.read crm.schemas.appointments.write crm.schemas.carts.read crm.schemas.carts.write crm.schemas.commercepayments.read crm.schemas.commercepayments.write crm.schemas.companies.read crm.schemas.companies.write crm.schemas.contacts.read crm.schemas.contacts.write crm.schemas.courses.read crm.schemas.courses.write crm.schemas.custom.read crm.schemas.deals.read crm.schemas.deals.write crm.schemas.invoices.read crm.schemas.invoices.write crm.schemas.line_items.read crm.schemas.listings.read crm.schemas.listings.write crm.schemas.orders.read crm.schemas.orders.write crm.schemas.quotes.read crm.schemas.services.read crm.schemas.services.write crm.schemas.subscriptions.read crm.schemas.subscriptions.write ctas.read e-commerce external_integrations.forms.access files files.ui_hidden.read forms forms-uploaded-files hubdb integration-sync marketing-email marketing.campaigns.read marketing.campaigns.revenue.read marketing.campaigns.write media_bridge.read media_bridge.write oauth record_images.signed_urls.read sales-email-read scheduler.meetings.meeting-link.read settings.billing.write settings.currencies.read settings.currencies.write settings.security.security_health.read settings.users.read settings.users.teams.read settings.users.teams.write settings.users.write social tax_rates.read tickets timeline transactional-email"
     }
   },
   "properties": {

From 4310e457a575473bca9ac873ef7ace90767f9a7d Mon Sep 17 00:00:00 2001
From: Parth <108089718+parthy007@users.noreply.github.com>
Date: Wed, 22 Oct 2025 11:47:46 +0530
Subject: [PATCH 095/157] fix: update pop-up copywriting (#14151)

---
 frontend/src/MarketplacePage/InstalledPlugins.jsx    | 12 +++---------
 .../modules/dataSources/components/List/index.jsx    |  4 ++--
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/frontend/src/MarketplacePage/InstalledPlugins.jsx b/frontend/src/MarketplacePage/InstalledPlugins.jsx
index 2377aa8376..0ee67b8565 100644
--- a/frontend/src/MarketplacePage/InstalledPlugins.jsx
+++ b/frontend/src/MarketplacePage/InstalledPlugins.jsx
@@ -157,13 +157,7 @@ const InstalledPluginCard = ({ plugin, marketplacePlugin, fetchPlugins, isDevMod
       });
   };
 
-  const pluginDeleteMessage = (
-    <>
-      Deleting <strong>{capitalizeFirstLetter(name)}</strong> plugin will result in the permanent removal of all
-      associated datasources and its dataqueries. This action cannot be undone. Are you sure you wish to proceed with
-      the deletion?
-    </>
-  );
+  const pluginDeleteMessage = <>Do you want to uninstall?</>;
 
   return (
     <>
@@ -177,10 +171,10 @@ const InstalledPluginCard = ({ plugin, marketplacePlugin, fetchPlugins, isDevMod
         </div>
       </Modal>
       <ConfirmDialog
-        title={'Delete plugin'}
+        title={'Uninstall plugin'}
         show={isDeleteModalVisible}
         message={pluginDeleteMessage}
-        confirmButtonText={'Delete'}
+        confirmButtonText={'Uninstall'}
         confirmButtonLoading={isDeletingPlugin}
         onConfirm={executePluginDeletion}
         onCancel={cancelDeletePlugin}
diff --git a/frontend/src/modules/dataSources/components/List/index.jsx b/frontend/src/modules/dataSources/components/List/index.jsx
index 6f44ab3cd4..8e3b8ef482 100644
--- a/frontend/src/modules/dataSources/components/List/index.jsx
+++ b/frontend/src/modules/dataSources/components/List/index.jsx
@@ -102,7 +102,7 @@ export const List = ({ updateSelectedDatasource }) => {
     setFilteredData(filtered);
   };
 
-  function handleClose () {
+  function handleClose() {
     setShowInput(false);
     setFilteredData(dataSources);
   }
@@ -204,7 +204,7 @@ export const List = ({ updateSelectedDatasource }) => {
       </Modal>
       <ConfirmDialog
         show={isDeleteModalVisible}
-        message={'You will lose all the queries created from this data source. Do you really want to delete?'}
+        message={'Do you want to delete?'}
         confirmButtonLoading={isDeletingDatasource}
         onConfirm={() => executeDataSourceDeletion()}
         onCancel={() => cancelDeleteDataSource()}

From 2d0b8384fe8888c15cdeb6cb45c5119076be147d Mon Sep 17 00:00:00 2001
From: Priyansh Rai <111194704+priyxansh@users.noreply.github.com>
Date: Wed, 22 Oct 2025 12:13:31 +0530
Subject: [PATCH 096/157] Docs: add doc links for static data sources (#14175)

* added docs for static data sources

Signed-off-by: thesynthax <kushagra1403@gmail.com>

* fix: update documentation link for ToolJet DB static source

* fix: add margin to doc links

---------

Signed-off-by: thesynthax <kushagra1403@gmail.com>
Co-authored-by: thesynthax <kushagra1403@gmail.com>
---
 .../Components/QueryManagerBody.jsx           | 48 +++++++++++++++----
 .../QueryManager/QueryEditors/Workflows.jsx   | 14 ++++++
 2 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/frontend/src/AppBuilder/QueryManager/Components/QueryManagerBody.jsx b/frontend/src/AppBuilder/QueryManager/Components/QueryManagerBody.jsx
index 510d50131e..245d8efef8 100644
--- a/frontend/src/AppBuilder/QueryManager/Components/QueryManagerBody.jsx
+++ b/frontend/src/AppBuilder/QueryManager/Components/QueryManagerBody.jsx
@@ -163,6 +163,22 @@ export const BaseQueryManagerBody = ({ darkMode, activeTab, renderCopilot = () =
     updateDataQuery(options);
   };
 
+  let docLinkStatic = '';
+  switch (selectedDataSource?.kind) {
+      case 'restapi':
+        docLinkStatic = `https://docs.tooljet.com/docs/data-sources/restapi/querying-rest-api`;
+        break;
+      case 'tooljetdb':
+        docLinkStatic = `https://docs.tooljet.com/docs/tooljet-db/querying-tooljet-db`;
+        break;
+      case 'runjs':
+        docLinkStatic = `https://docs.tooljet.com/docs/data-sources/run-js`;
+        break;
+      case 'runpy':
+        docLinkStatic = `https://docs.tooljet.com/docs/data-sources/run-py`;
+        break;
+    }
+
   const renderQueryElement = () => {
     return (
       <div
@@ -176,14 +192,28 @@ export const BaseQueryManagerBody = ({ darkMode, activeTab, renderCopilot = () =
               selectedDataSource?.kind === 'runpy' ||
               selectedDataSource?.kind === 'tooljetdb' ||
               (selectedDataSource?.kind === 'restapi' && selectedDataSource?.type !== 'default')) && (
-              <ParameterList
-                parameters={options.parameters}
-                handleAddParameter={handleAddParameter}
-                handleParameterChange={handleParameterChange}
-                handleParameterRemove={handleParameterRemove}
-                darkMode={darkMode}
-                containerRef={paramListContainerRef}
-              />
+              <>
+                <div style={{ marginBottom: '2px' }}>
+                  {`To know more about querying ${selectedDataSource?.kind} data,`}
+                  &nbsp;
+                  <a
+                    href={docLinkStatic}
+                    target="_blank"
+                    style={{ marginLeft: '0px !important', color: 'hsl(226, 70.0%, 55.5%)', textDecoration: 'underline' }}
+                    rel="noreferrer"
+                  >
+                    {t('globals.readDocumentation', 'read documentation').toLowerCase()}
+                  </a>
+                </div>
+                <ParameterList
+                  parameters={options.parameters}
+                  handleAddParameter={handleAddParameter}
+                  handleParameterChange={handleParameterChange}
+                  handleParameterRemove={handleParameterRemove}
+                  darkMode={darkMode}
+                  containerRef={paramListContainerRef}
+                />
+              </>
             )}
         </div>
         <ElementToRender
@@ -314,7 +344,7 @@ export const BaseQueryManagerBody = ({ darkMode, activeTab, renderCopilot = () =
                 changeDataQuery(newDataSource);
               }}
             />
-            <div>
+            <div style={{ marginBottom: '2px' }}>
               {`To know more about querying ${selectedDataSource?.kind} data,`}
               &nbsp;
               <a
diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/Workflows.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/Workflows.jsx
index deadce634a..d76f20b9a1 100644
--- a/frontend/src/AppBuilder/QueryManager/QueryEditors/Workflows.jsx
+++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/Workflows.jsx
@@ -8,9 +8,11 @@ import useStore from '@/AppBuilder/_stores/store';
 import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
 import usePopoverObserver from '@/AppBuilder/_hooks/usePopoverObserver';
 import useWorkflowStore from '@/_stores/workflowStore';
+import { useTranslation } from 'react-i18next';
 
 export function Workflows({ options, optionsChanged, currentState }) {
   const { moduleId } = useModuleContext();
+  const { t } = useTranslation();
   const [workflowOptions, setWorkflowOptions] = useState([]);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [_selectedWorkflowId, setSelectedWorkflowId] = useState(undefined);
@@ -51,6 +53,18 @@ export function Workflows({ options, optionsChanged, currentState }) {
 
   return (
     <>
+      <div style={{ marginBottom: '2px' }}>
+        {`To know more about querying workflows data,`}
+        &nbsp;
+        <a
+          href={'https://docs.tooljet.ai/docs/workflows/how-to/trigger-workflow-from-app'}
+          target="_blank"
+          style={{ marginLeft: '0px !important', color: 'hsl(226, 70.0%, 55.5%)', textDecoration: 'underline' }}
+          rel="noreferrer"
+        >
+          {t('globals.readDocumentation', 'read documentation').toLowerCase()}
+        </a>
+      </div>
       <label className="mb-1">Workflow</label>
       <div data-cy="workflow-dropdown"></div>
       <Select

From beb8bcfc659d588f52d0efb211627860ce337b7f Mon Sep 17 00:00:00 2001
From: Priyansh Rai <111194704+priyxansh@users.noreply.github.com>
Date: Wed, 22 Oct 2025 13:59:18 +0530
Subject: [PATCH 097/157] Fix: Capitalisation inconsistencies in labels
 (#14174)

* fixed capitalization issue

Signed-off-by: thesynthax <kushagra1403@gmail.com>

* updated changes

Signed-off-by: thesynthax <kushagra1403@gmail.com>

* fix: standardize label casing and formatting in plugin manifests

* fix: standardize label casing in plugin manifests

---------

Signed-off-by: thesynthax <kushagra1403@gmail.com>
Co-authored-by: thesynthax <kushagra1403@gmail.com>
---
 .../plugins/awsredshift/lib/manifest.json     | 15 +++++++----
 .../plugins/engagespot/lib/manifest.json      | 27 +++++++++----------
 marketplace/plugins/plivo/lib/manifest.json   |  3 +--
 marketplace/plugins/portkey/lib/manifest.json |  4 +--
 .../plugins/supabase/lib/manifest.json        |  8 +++---
 .../plugins/weaviate/lib/manifest.json        | 22 +++++++++------
 plugins/packages/clickhouse/lib/manifest.json |  8 +++---
 plugins/packages/couchdb/lib/manifest.json    |  2 +-
 plugins/packages/databricks/lib/manifest.json | 10 +++----
 .../packages/elasticsearch/lib/manifest.json  | 12 ++++-----
 plugins/packages/mariadb/lib/manifest.json    | 14 +++++-----
 plugins/packages/mongodb/lib/manifest.json    | 22 +++++++--------
 plugins/packages/mssql/lib/manifest.json      |  6 ++---
 plugins/packages/oracledb/lib/manifest.json   |  8 +++---
 plugins/packages/redis/lib/manifest.json      | 12 ++++-----
 plugins/packages/restapi/lib/manifest.json    | 10 +++----
 plugins/packages/saphana/lib/manifest.json    |  4 +--
 plugins/packages/twilio/lib/manifest.json     |  6 ++---
 plugins/packages/typesense/lib/manifest.json  |  4 +--
 19 files changed, 104 insertions(+), 93 deletions(-)

diff --git a/marketplace/plugins/awsredshift/lib/manifest.json b/marketplace/plugins/awsredshift/lib/manifest.json
index 22115c69bb..04d942a636 100644
--- a/marketplace/plugins/awsredshift/lib/manifest.json
+++ b/marketplace/plugins/awsredshift/lib/manifest.json
@@ -40,7 +40,7 @@
     "database": {
       "value": "dev"
     },
-    "port":{
+    "port": {
       "value": "5439"
     }
   },
@@ -172,7 +172,7 @@
           "description": "Enter port"
         },
         "workgroup_name": {
-          "label": "Workgroup Name",
+          "label": "Workgroup name",
           "key": "workgroup_name",
           "type": "text",
           "description": "Enter workgroup name"
@@ -185,7 +185,6 @@
         }
       }
     },
-
     "iam_access_keys": {
       "access_key": {
         "label": "Access key",
@@ -201,5 +200,11 @@
       }
     }
   },
-  "required": ["region", "secret_key", "access_key", "database", "workgroup_name"]
-}
+  "required": [
+    "region",
+    "secret_key",
+    "access_key",
+    "database",
+    "workgroup_name"
+  ]
+}
\ No newline at end of file
diff --git a/marketplace/plugins/engagespot/lib/manifest.json b/marketplace/plugins/engagespot/lib/manifest.json
index 5aed731c55..3da05a8e26 100644
--- a/marketplace/plugins/engagespot/lib/manifest.json
+++ b/marketplace/plugins/engagespot/lib/manifest.json
@@ -1,4 +1,3 @@
-
 {
   "$schema": "https://raw.githubusercontent.com/ToolJet/ToolJet/develop/plugins/schemas/manifest.schema.json",
   "title": "Engagespot datasource",
@@ -13,15 +12,15 @@
       "rawData": {}
     },
     "options": {
-      "apiKey":{
+      "apiKey": {
         "type": "string"
       },
-      "apiSecret":{
+      "apiSecret": {
         "type": "string",
         "encrypted": true
       },
-      "signingKey":{
-        "type":"string"
+      "signingKey": {
+        "type": "string"
       },
       "endpoint": {
         "type": "string"
@@ -30,14 +29,14 @@
     "customTesting": false
   },
   "defaults": {
-    "apiKey":{
+    "apiKey": {
       "value": ""
     },
-    "apiSecret":{
+    "apiSecret": {
       "value": ""
     },
-    "signingKey":{
-      "value":""
+    "signingKey": {
+      "value": ""
     },
     "endpoint": {
       "value": "https://api.engagespot.com/v3"
@@ -48,25 +47,25 @@
   },
   "properties": {
     "apiKey": {
-      "label": "Api Key",
+      "label": "Api key",
       "key": "apiKey",
       "type": "text",
       "description": "The unique identifier of your engagespot app (X-ENGAGESPOT-API-KEY)"
     },
     "apiSecret": {
-      "label": "Api Secret",
+      "label": "Api secret",
       "key": "apiSecret",
       "type": "password",
       "description": "Engagespot Api secret key (X-ENGAGESPOT-API-SECRET)"
     },
     "signingKey": {
-      "label": "Signing Key",
+      "label": "Signing key",
       "key": "signingKey",
       "type": "text",
       "description": "The secret signing key that you'll use to sign your user's authentication tokens in engagespot"
     },
     "endpoint_enabled": {
-      "label": "Custom Endpoint",
+      "label": "Custom endpoint",
       "key": "endpoint_enabled",
       "type": "toggle",
       "description": "Toggle for endpoint_enabled"
@@ -76,7 +75,7 @@
       "type": "text",
       "description": "Enter custom endpoint",
       "controller": "endpoint_enabled"
-    } 
+    }
   },
   "required": [
     "Api Key",
diff --git a/marketplace/plugins/plivo/lib/manifest.json b/marketplace/plugins/plivo/lib/manifest.json
index fbc8b3e2ff..44a58fee32 100644
--- a/marketplace/plugins/plivo/lib/manifest.json
+++ b/marketplace/plugins/plivo/lib/manifest.json
@@ -1,4 +1,3 @@
-
 {
   "$schema": "https://raw.githubusercontent.com/ToolJet/ToolJet/develop/plugins/schemas/manifest.schema.json",
   "title": "Plivo datasource",
@@ -30,7 +29,7 @@
   },
   "properties": {
     "authToken": {
-      "label": "Auth Token",
+      "label": "Auth token",
       "key": "authToken",
       "type": "password",
       "description": "Auth Token for plivo",
diff --git a/marketplace/plugins/portkey/lib/manifest.json b/marketplace/plugins/portkey/lib/manifest.json
index 388f56b572..99dcf52995 100644
--- a/marketplace/plugins/portkey/lib/manifest.json
+++ b/marketplace/plugins/portkey/lib/manifest.json
@@ -31,14 +31,14 @@
   "defaults": {},
   "properties": {
     "apiKey": {
-      "label": "API Key",
+      "label": "API key",
       "key": "apiKey",
       "type": "password",
       "description": "Enter your Portkey API Key",
       "helpText": "How to obtain API Key: <a href='https://docs.portkey.ai/docs/api-reference/authentication#obtaining-your-api-key' target='_blank' rel='noreferrer'>See here</a>"
     },
     "virtualKey": {
-      "label": "Default Virtual Key",
+      "label": "Default virtual key",
       "key": "virtualKey",
       "type": "password",
       "description": "Enter your default Portkey Virtual Key",
diff --git a/marketplace/plugins/supabase/lib/manifest.json b/marketplace/plugins/supabase/lib/manifest.json
index 6e605f7d26..5bfeb8abb4 100644
--- a/marketplace/plugins/supabase/lib/manifest.json
+++ b/marketplace/plugins/supabase/lib/manifest.json
@@ -1,4 +1,3 @@
-
 {
   "$schema": "https://raw.githubusercontent.com/ToolJet/ToolJet/develop/plugins/schemas/manifest.schema.json",
   "title": "Supabase datasource",
@@ -31,12 +30,15 @@
       "description": "Supabase project url"
     },
     "service_role_secret": {
-      "label": "Service Role Secret",
+      "label": "Service role secret",
       "key": "service_role_secret",
       "type": "textarea",
       "encrypted": true,
       "description": "Enter service role key of supabase account"
     }
   },
-  "required": ["project_url", "service_role_secret"]
+  "required": [
+    "project_url",
+    "service_role_secret"
+  ]
 }
\ No newline at end of file
diff --git a/marketplace/plugins/weaviate/lib/manifest.json b/marketplace/plugins/weaviate/lib/manifest.json
index e1320d4119..8457e3e356 100644
--- a/marketplace/plugins/weaviate/lib/manifest.json
+++ b/marketplace/plugins/weaviate/lib/manifest.json
@@ -29,13 +29,19 @@
   "properties": {
     "connection_type": {
       "label": "Connection type",
-			"key": "connection_type",
-			"type": "dropdown-component-flip",
-			"description": "Single select dropdown for connection type",
-			"list": [
-				{ "value": "cloud", "name": "Cloud" },
-				{ "value": "local", "name": "Local" }
-			]
+      "key": "connection_type",
+      "type": "dropdown-component-flip",
+      "description": "Single select dropdown for connection type",
+      "list": [
+        {
+          "value": "cloud",
+          "name": "Cloud"
+        },
+        {
+          "value": "local",
+          "name": "Local"
+        }
+      ]
     },
     "cloud": {
       "instanceUrl": {
@@ -46,7 +52,7 @@
         "placeholder": "https://your-weaviate-instance.com"
       },
       "apiKey": {
-        "label": "API Key",
+        "label": "API key",
         "key": "apiKey",
         "type": "password",
         "description": "Enter your Weaviate API Key",
diff --git a/plugins/packages/clickhouse/lib/manifest.json b/plugins/packages/clickhouse/lib/manifest.json
index 96b683e20d..6c31ee4abe 100644
--- a/plugins/packages/clickhouse/lib/manifest.json
+++ b/plugins/packages/clickhouse/lib/manifest.json
@@ -52,7 +52,7 @@
       "description": "8123"
     },
     "database": {
-      "label": "Database Name",
+      "label": "Database name",
       "key": "database",
       "type": "text",
       "description": "database name"  
@@ -74,19 +74,19 @@
       "description": "Enter protocol"
     },
     "usePost": {
-      "label": "Use Post",
+      "label": "Use post",
       "key": "usePost",
       "type": "text",
       "description": "Enter true/false"
     },
     "trimQuery": {
-      "label": "Trim Query",
+      "label": "Trim query",
       "key": "trimQuery",
       "type": "text",
       "description": "Enter true/false"
     },
     "isUseGzip": {
-      "label": "Use Gzip",
+      "label": "Use gzip",
       "key": "isUseGzip",
       "type": "text",
       "description": "Enter true/false"
diff --git a/plugins/packages/couchdb/lib/manifest.json b/plugins/packages/couchdb/lib/manifest.json
index 00f92318d9..da65fac7ed 100644
--- a/plugins/packages/couchdb/lib/manifest.json
+++ b/plugins/packages/couchdb/lib/manifest.json
@@ -80,7 +80,7 @@
       "helpText": ""
     },
     "database": {
-      "label": "Database Name",
+      "label": "Database name",
       "key": "database",
       "type": "text",
       "description": "database name",
diff --git a/plugins/packages/databricks/lib/manifest.json b/plugins/packages/databricks/lib/manifest.json
index ba5a4787ab..388472206a 100644
--- a/plugins/packages/databricks/lib/manifest.json
+++ b/plugins/packages/databricks/lib/manifest.json
@@ -29,29 +29,29 @@
       "description": "443"
     },
     "http_path": {
-      "label": "HTTP Path",
+      "label": "HTTP path",
       "key": "http_path",
       "type": "text",
       "description": "/sql/2.0/warehouse/id"
     },
     "default_catalog": {
-      "label": "Default Catalog",
+      "label": "Default catalog",
       "key": "default_catalog",
       "type": "text",
       "description": "tooljet_metastore"
     },
     "default_schema": {
-      "label": "Default Schema",
+      "label": "Default schema",
       "key": "default_schema",
       "type": "text",
       "description": "default"
     },
     "personal_access_token": {
-      "label": "Personal Access Token",
+      "label": "Personal access token",
       "key": "personal_access_token",
       "type": "password",
       "description": "default"
     }
   },
   "required": ["host", "http_path", "personal_access_token"]
-}
\ No newline at end of file
+}
diff --git a/plugins/packages/elasticsearch/lib/manifest.json b/plugins/packages/elasticsearch/lib/manifest.json
index afad5ebb96..d8d3200edb 100644
--- a/plugins/packages/elasticsearch/lib/manifest.json
+++ b/plugins/packages/elasticsearch/lib/manifest.json
@@ -61,7 +61,7 @@
   },
   "properties": {
     "ssl_certificate": {
-      "label": "SSL Certificate",
+      "label": "SSL certificate",
       "key": "ssl_certificate",
       "type": "dropdown-component-flip",
       "description": "Single select dropdown for choosing certificates",
@@ -114,7 +114,7 @@
     },
     "ca_certificate": {
       "ca_cert": {
-        "label": "CA Cert",
+        "label": "CA cert",
         "key": "ca_cert",
         "type": "textarea",
         "encrypted": true,
@@ -123,21 +123,21 @@
     },
     "client_certificate": {
       "client_key": {
-        "label": "Client Key",
+        "label": "Client key",
         "key": "client_key",
         "type": "textarea",
         "encrypted": true,
         "description": "Enter client key"
       },
       "client_cert": {
-        "label": "Client Cert",
+        "label": "Client cert",
         "key": "client_cert",
         "type": "textarea",
         "encrypted": true,
         "description": "Enter client certificate"
       },
       "root_cert": {
-        "label": "Root Cert",
+        "label": "Root cert",
         "key": "root_cert",
         "type": "textarea",
         "encrypted": true,
@@ -152,4 +152,4 @@
     "port",
     "password"
   ]
-}
\ No newline at end of file
+}
diff --git a/plugins/packages/mariadb/lib/manifest.json b/plugins/packages/mariadb/lib/manifest.json
index 3d30bbda0a..a4e6287414 100644
--- a/plugins/packages/mariadb/lib/manifest.json
+++ b/plugins/packages/mariadb/lib/manifest.json
@@ -49,7 +49,7 @@
   },
   "properties": {
     "ssl_certificate": {
-      "label": "SSL Certificate",
+      "label": "SSL certificate",
       "key": "ssl_certificate",
       "type": "dropdown-component-flip",
       "description": "Single select dropdown for choosing certificates",
@@ -88,7 +88,7 @@
           "encrypted": true
         },
         "connectionLimit": {
-          "label": "Connection Limit",
+          "label": "Connection limit",
           "key": "connectionLimit",
           "type": "text",
           "description": "Enter connection limit"
@@ -115,7 +115,7 @@
     },
     "ca_certificate": {
       "ca": {
-        "label": "CA Cert",
+        "label": "CA cert",
         "key": "ca",
         "type": "textarea",
         "encrypted": true,
@@ -124,21 +124,21 @@
     },
     "self_signed": {
       "ca": {
-        "label": "Server Cert",
+        "label": "Server cert",
         "key": "ca",
         "type": "textarea",
         "encrypted": true,
         "description": "Enter client key"
       },
       "cert": {
-        "label": "Client Cert",
+        "label": "Client cert",
         "key": "cert",
         "type": "textarea",
         "encrypted": true,
         "description": "Enter client certificate"
       },
       "key": {
-        "label": "Client Key",
+        "label": "Client key",
         "key": "key",
         "type": "text",
         "encrypted": true,
@@ -153,4 +153,4 @@
     "database",
     "password"
   ]
-}
\ No newline at end of file
+}
diff --git a/plugins/packages/mongodb/lib/manifest.json b/plugins/packages/mongodb/lib/manifest.json
index 763c038dda..7063dbc9e1 100644
--- a/plugins/packages/mongodb/lib/manifest.json
+++ b/plugins/packages/mongodb/lib/manifest.json
@@ -49,7 +49,7 @@
     },
     "tls_certificate": {
       "type": "string",
-      "title": "TLS/SSL Certificate",
+      "title": "TLS/SSL certificate",
       "description": "Single select dropdown for choosing certificates",
       "enum": [
         "ca_certificate",
@@ -65,17 +65,17 @@
     },
     "ca_cert": {
       "type": "string",
-      "title": "CA Cert",
+      "title": "CA cert",
       "description": "Enter CA certificate"
     },
     "client_key": {
       "type": "string",
-      "title": "Client Key",
+      "title": "Client key",
       "description": "Enter client key"
     },
     "client_cert": {
       "type": "string",
-      "title": "Client Cert",
+      "title": "Client cert",
       "description": "Enter client certificate"
     }
   },
@@ -173,9 +173,9 @@
     },
     "manual": {
       "tls_certificate": {
+        "label": "TLS/SSL certificate",
         "$ref": "#/properties/tls_certificate",
         "key": "tls_certificate",
-        "label": "TLS/SSL Certificate",
         "description": "Single select dropdown for choosing certificates",
         "widget": "dropdown-component-flip",
         "list": [
@@ -210,9 +210,9 @@
             "required": true
           },
           "database": {
+            "label": "Database name",
             "$ref": "#/properties/database",
             "key": "database",
-            "label": "Database name",
             "description": "Name of the database",
             "widget": "text-v3"
           },
@@ -235,32 +235,32 @@
       },
       "ca_certificate": {
         "ca_cert": {
+          "label": "CA cert",
           "$ref": "#/properties/ca_cert",
           "key": "ca_cert",
-          "label": "CA Cert",
           "description": "Enter CA certificate",
           "widget": "password-v3-textarea"
         }
       },
       "client_certificate": {
         "client_key": {
+          "label": "Client key",
           "$ref": "#/properties/client_key",
           "key": "client_key",
-          "label": "Client Key",
           "description": "Enter client key",
           "widget": "password-v3-textarea"
         },
         "client_cert": {
+          "label": "Client cert",
           "$ref": "#/properties/client_cert",
           "key": "client_cert",
-          "label": "Client Cert",
           "description": "Enter client certificate",
           "widget": "password-v3-textarea"
         },
         "ca_cert": {
+          "label": "CA cert",
           "$ref": "#/properties/ca_cert",
           "key": "ca_cert",
-          "label": "CA Cert",
           "description": "Enter CA certificate",
           "widget": "password-v3-textarea"
         }
@@ -277,4 +277,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/plugins/packages/mssql/lib/manifest.json b/plugins/packages/mssql/lib/manifest.json
index 3783bd97be..199853739b 100644
--- a/plugins/packages/mssql/lib/manifest.json
+++ b/plugins/packages/mssql/lib/manifest.json
@@ -44,7 +44,7 @@
     },
     "connection_options": {
       "type": "array",
-      "title": "Connection Options",
+      "title": "Connection options",
       "description": "Connection options"
     },
     "azure": {
@@ -115,7 +115,7 @@
     "connection_options": {
       "$ref": "#/properties/connection_options",
       "key": "connection_options",
-      "label": "Connection Options",
+      "label": "Connection options",
       "widget": "react-component-headers"
     },
     "azure": {
@@ -126,4 +126,4 @@
       "widget": "toggle"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/plugins/packages/oracledb/lib/manifest.json b/plugins/packages/oracledb/lib/manifest.json
index e47cfd25c2..d379c9a94f 100644
--- a/plugins/packages/oracledb/lib/manifest.json
+++ b/plugins/packages/oracledb/lib/manifest.json
@@ -49,7 +49,7 @@
   },
   "properties": {
     "client_path_type": {
-      "label": "Client Library Location",
+      "label": "Client library location",
       "key": "client_path_type",
       "type": "dropdown-component-flip",
       "description": "Single select dropdown for client library",
@@ -77,7 +77,7 @@
           "description": "Enter port"
         },
         "database_type": {
-          "label": "SID / Service Name",
+          "label": "SID / Service name",
           "key": "database_type",
           "type": "dropdown",
           "description": "Type of the database",
@@ -93,7 +93,7 @@
           ]
         },
         "database": {
-          "label": "Database Name",
+          "label": "Database name",
           "key": "database",
           "type": "text",
           "description": "Name of the database"
@@ -128,7 +128,7 @@
     },
     "default": {
       "instant_client_version": {
-        "label": "Instant Client version",
+        "label": "Instant client version",
         "key": "instant_client_version",
         "type": "dropdown",
         "description": "Select Instant Client version",
diff --git a/plugins/packages/redis/lib/manifest.json b/plugins/packages/redis/lib/manifest.json
index a4c184b324..1c1fbcbf14 100644
--- a/plugins/packages/redis/lib/manifest.json
+++ b/plugins/packages/redis/lib/manifest.json
@@ -61,7 +61,7 @@
   },
   "properties": {
     "tls_certificate": {
-      "label": "TLS Certificate",
+      "label": "TLS certificate",
       "key": "tls_certificate",
       "type": "dropdown-component-flip",
       "description": "Single select dropdown for choosing certificates",
@@ -120,7 +120,7 @@
     },
     "ca_certificate": {
       "ca_cert": {
-        "label": "CA Cert",
+        "label": "CA cert",
         "key": "ca_cert",
         "type": "textarea",
         "encrypted": true,
@@ -129,21 +129,21 @@
     },
     "client_certificate": {
       "client_key": {
-        "label": "Client Key",
+        "label": "Client key",
         "key": "client_key",
         "type": "textarea",
         "encrypted": true,
         "description": "Enter client key"
       },
       "client_cert": {
-        "label": "Client Cert",
+        "label": "Client cert",
         "key": "client_cert",
         "type": "textarea",
         "encrypted": true,
         "description": "Enter client certificate"
       },
       "ca_cert": {
-        "label": "CA Cert",
+        "label": "CA cert",
         "key": "ca_cert",
         "type": "textarea",
         "encrypted": true,
@@ -157,4 +157,4 @@
     "port",
     "password"
   ]
-}
\ No newline at end of file
+}
diff --git a/plugins/packages/restapi/lib/manifest.json b/plugins/packages/restapi/lib/manifest.json
index 35d549bd75..150ae5a653 100644
--- a/plugins/packages/restapi/lib/manifest.json
+++ b/plugins/packages/restapi/lib/manifest.json
@@ -220,7 +220,7 @@
         "title": "SECURE SOCKETS LAYER",
         "inputs": {
           "ssl_certificate": {
-            "label": "SSL Certificate",
+            "label": "SSL certificate",
             "key": "ssl_certificate",
             "type": "dropdown-component-flip",
             "description": "Single select dropdown for choosing certificates",
@@ -241,7 +241,7 @@
           },
           "ca_certificate": {
             "ca_cert": {
-              "label": "CA Cert",
+              "label": "CA cert",
               "key": "ca_cert",
               "type": "textarea",
               "encrypted": true,
@@ -250,21 +250,21 @@
           },
           "client_certificate": {
             "client_key": {
-              "label": "Client Key",
+              "label": "Client key",
               "key": "client_key",
               "type": "textarea",
               "encrypted": true,
               "description": "Enter client key"
             },
             "client_cert": {
-              "label": "Client Cert",
+              "label": "Client cert",
               "key": "client_cert",
               "type": "textarea",
               "encrypted": true,
               "description": "Enter client certificate"
             },
             "ca_cert": {
-              "label": "CA Cert",
+              "label": "CA cert",
               "key": "ca_cert",
               "type": "textarea",
               "encrypted": true,
diff --git a/plugins/packages/saphana/lib/manifest.json b/plugins/packages/saphana/lib/manifest.json
index a743c2cdb3..7fee57d7ef 100644
--- a/plugins/packages/saphana/lib/manifest.json
+++ b/plugins/packages/saphana/lib/manifest.json
@@ -48,7 +48,7 @@
       "description": "Enter port"
     },
     "database": {
-      "label": "Database Name",
+      "label": "Database name",
       "key": "database",
       "type": "text",
       "description": "Name of the database"
@@ -72,4 +72,4 @@
     "username",
     "password"
   ]
-}
\ No newline at end of file
+}
diff --git a/plugins/packages/twilio/lib/manifest.json b/plugins/packages/twilio/lib/manifest.json
index 01ab58453d..c38a091199 100644
--- a/plugins/packages/twilio/lib/manifest.json
+++ b/plugins/packages/twilio/lib/manifest.json
@@ -32,7 +32,7 @@
   },
   "properties": {
     "auth_token": {
-      "label": "Auth Token",
+      "label": "Auth token",
       "key": "auth_token",
       "type": "password",
       "description": "Auth Token for Twilio",
@@ -46,7 +46,7 @@
       "helpText": "For generating Account SID, visit: <a href='https://console.twilio.com/' target='_blank' rel='noreferrer'>Twilio Console</a>"
     },
     "messaging_service_sid": {
-      "label": "Messaging Service SID",
+      "label": "Messaging service SID",
       "key": "messaging_service_sid",
       "type": "text",
       "description": "Messaging Service SID for Twilio",
@@ -58,4 +58,4 @@
     "account_sid",
     "messaging_service_sid"
   ]
-}
\ No newline at end of file
+}
diff --git a/plugins/packages/typesense/lib/manifest.json b/plugins/packages/typesense/lib/manifest.json
index 6ca14b8bac..1181a7f020 100644
--- a/plugins/packages/typesense/lib/manifest.json
+++ b/plugins/packages/typesense/lib/manifest.json
@@ -55,7 +55,7 @@
       "description": "Enter port"
     },
     "api_key": {
-      "label": "API Key",
+      "label": "API key",
       "key": "api_key",
       "type": "text",
       "description": "Enter API key",
@@ -84,4 +84,4 @@
     "api_key",
     "protocol"
   ]
-}
\ No newline at end of file
+}

From 03cc9b104835116f53d4386599e009337dd8580d Mon Sep 17 00:00:00 2001
From: Adish M <44204658+adishM98@users.noreply.github.com>
Date: Wed, 22 Oct 2025 14:20:39 +0530
Subject: [PATCH 098/157] =?UTF-8?q?=F0=9F=9A=80=20chore:=20update=20submod?=
 =?UTF-8?q?ules=20to=20latest=20lts-3.16=20after=20auto-merge=20(#14387)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/ee | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/ee b/frontend/ee
index fe64320fb8..785f4463c1 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit fe64320fb889e8040ac93ee284b089fd6e51e7a2
+Subproject commit 785f4463c1e22247849fc33704831e3e4e97df0c

From 03505b0174162636cd84cfe0b7f430786c8c1b56 Mon Sep 17 00:00:00 2001
From: Parth <108089718+parthy007@users.noreply.github.com>
Date: Wed, 22 Oct 2025 15:19:20 +0530
Subject: [PATCH 099/157] fix: token headers & client-auth dropdown (#14082)

---
 frontend/src/_ui/OAuth/GrantTypes.jsx         | 47 +++++------
 plugins/packages/common/lib/oauth.ts          | 30 +++++--
 plugins/packages/restapi/lib/manifest.json    |  2 +-
 ...58388314-UpdateRestApiClientAuthInOauth.ts | 84 +++++++++++++++++++
 .../src/modules/data-sources/util.service.ts  | 34 +++++---
 5 files changed, 150 insertions(+), 47 deletions(-)
 create mode 100644 server/data-migrations/1751258388314-UpdateRestApiClientAuthInOauth.ts

diff --git a/frontend/src/_ui/OAuth/GrantTypes.jsx b/frontend/src/_ui/OAuth/GrantTypes.jsx
index da564b415b..60e85a0ac0 100644
--- a/frontend/src/_ui/OAuth/GrantTypes.jsx
+++ b/frontend/src/_ui/OAuth/GrantTypes.jsx
@@ -19,7 +19,7 @@ const CommonOAuthFields = ({
   isFieldAllowed,
 }) => {
   const { access_token_url, access_token_custom_headers } = tokenConfig;
-  const { client_id, client_secret } = clientConfig;
+  const { client_id, client_secret, client_auth } = clientConfig;
   const { scopes } = authConfig;
   const { optionchanged, optionsChanged } = handlers;
   const { workspaceConstants } = workspaceConfig;
@@ -167,6 +167,23 @@ const CommonOAuthFields = ({
           />
         </div>
       )}
+      {isFieldAllowed('client_auth', 'authorization_code', oauth_configs) && (
+        <div className="col-md-12">
+          <label className="form-label mt-3" data-cy="label-client-authentication">
+            Client authentication
+          </label>
+          <Select
+            options={[
+              { name: 'Send as basic auth header', value: 'header' },
+              { name: 'Send client credentials in body ', value: 'body' },
+            ]}
+            value={client_auth}
+            onChange={(value) => optionchanged('client_auth', value)}
+            width={'100%'}
+            useMenuPortal={false}
+          />
+        </div>
+      )}
     </>
   );
 };
@@ -198,19 +215,10 @@ const ClientCredentialsFields = ({ authConfig, workspaceConfig, handlers, oauth_
   );
 };
 
-const AuthorizationCode = ({
-  authConfig,
-  clientConfig,
-  tokenConfig,
-  workspaceConfig,
-  handlers,
-  oauth_configs,
-  isFieldAllowed,
-}) => {
+const AuthorizationCode = ({ authConfig, tokenConfig, workspaceConfig, handlers, oauth_configs, isFieldAllowed }) => {
   const { optionchanged } = handlers;
   const { workspaceConstants } = workspaceConfig;
   const { custom_query_params, add_token_to, header_prefix } = tokenConfig;
-  const { client_auth } = clientConfig;
   const { auth_url, custom_auth_params, multiple_auth_enabled } = authConfig;
   return (
     <>
@@ -277,23 +285,6 @@ const AuthorizationCode = ({
           />
         </>
       )}
-      {isFieldAllowed('client_auth', 'authorization_code', oauth_configs) && (
-        <div className="col-md-12">
-          <label className="form-label mt-3" data-cy="label-client-authentication">
-            Client authentication
-          </label>
-          <Select
-            options={[
-              { name: 'Send as basic auth header', value: 'header' },
-              { name: 'Send client credentials in body ', value: 'body' },
-            ]}
-            value={client_auth}
-            onChange={(value) => optionchanged('client_auth', value)}
-            width={'100%'}
-            useMenuPortal={false}
-          />
-        </div>
-      )}
       {isFieldAllowed('custom_query_params', 'authorization_code', oauth_configs) && (
         <>
           <div className="row mt-3">
diff --git a/plugins/packages/common/lib/oauth.ts b/plugins/packages/common/lib/oauth.ts
index 2c603b8fb8..e6ae98e339 100644
--- a/plugins/packages/common/lib/oauth.ts
+++ b/plugins/packages/common/lib/oauth.ts
@@ -178,22 +178,36 @@ async function getTokenForClientCredentialsGrant(sourceOptions: any) {
   }
 
   const headersObject = sanitizeParams(sourceOptions.access_token_custom_headers);
+  const clientAuth = sourceOptions.client_auth?.toLowerCase();
 
   try {
-    const requestBody = new URLSearchParams({
+    const baseRequestBody = new URLSearchParams({
       grant_type: sourceOptions.grant_type || 'client_credentials',
-      client_id: sourceOptions.client_id,
-      client_secret: sourceOptions.client_secret,
       ...(sourceOptions.audience ? { audience: sourceOptions.audience } : {}),
       ...(sourceOptions.scopes ? { scope: sourceOptions.scopes } : {}),
     });
 
+    const headers = {
+      'Content-Type': 'application/x-www-form-urlencoded',
+      ...(Object.keys(headersObject).length > 0 && headersObject),
+    };
+
+    let bodyData;
+    if (clientAuth === 'header') {
+      const credentials = Buffer.from(`${sourceOptions.client_id}:${sourceOptions.client_secret}`).toString('base64');
+      headers['Authorization'] = `Basic ${credentials}`;
+      bodyData = baseRequestBody;
+    } else {
+      bodyData = {
+        ...baseRequestBody,
+        client_id: sourceOptions.client_id,
+        client_secret: sourceOptions.client_secret,
+      };
+    }
+
     const response = await got.post(sourceOptions.access_token_url, {
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-        ...(Object.keys(headersObject).length > 0 && headersObject),
-      },
-      body: requestBody.toString(),
+      headers,
+      form: bodyData,
       responseType: 'json',
     });
 
diff --git a/plugins/packages/restapi/lib/manifest.json b/plugins/packages/restapi/lib/manifest.json
index 150ae5a653..874b79920c 100644
--- a/plugins/packages/restapi/lib/manifest.json
+++ b/plugins/packages/restapi/lib/manifest.json
@@ -120,7 +120,7 @@
       "value": ""
     },
     "client_auth": {
-      "value": "header"
+      "value": "body"
     },
     "headers": {
       "value": [
diff --git a/server/data-migrations/1751258388314-UpdateRestApiClientAuthInOauth.ts b/server/data-migrations/1751258388314-UpdateRestApiClientAuthInOauth.ts
new file mode 100644
index 0000000000..db54aa6780
--- /dev/null
+++ b/server/data-migrations/1751258388314-UpdateRestApiClientAuthInOauth.ts
@@ -0,0 +1,84 @@
+import { EntityManager, MigrationInterface, QueryRunner } from 'typeorm';
+import { MigrationProgress } from '@helpers/migration.helper';
+import { processDataInBatches } from '@helpers/migration.helper';
+import { dbTransactionWrap } from '@helpers/database.helper';
+
+export class UpdateRestApiClientAuthInOauth1751258388314 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    const entityManager = queryRunner.manager;
+    const totalRecords = await entityManager.query(
+      `
+      SELECT COUNT(*)
+      FROM data_source_options dso
+      JOIN data_sources ds ON dso.data_source_id = ds.id
+      WHERE ds.kind = $1
+      AND dso.options->'auth_type'->>'value' = $2
+    `,
+      ['restapi', 'oauth2']
+    );
+
+    const totalCount = parseInt(totalRecords[0].count);
+    if (totalCount === 0) {
+      console.log('No records found to update for RestAPI client auth in OAuth.');
+      return;
+    }
+
+    await this.updateRestAPIClientAuthInOauth(entityManager, totalCount);
+  }
+
+  private async updateRestAPIClientAuthInOauth(entityManager: EntityManager, totalCount): Promise<void> {
+    return dbTransactionWrap(async (entityManager: EntityManager) => {
+      const migrationProgress = new MigrationProgress('UpdateRestApiClientAuthInOauth1750057586596', totalCount);
+      const batchSize = 100;
+
+      const fetchDataSourceOptionsInBatches = async (entityManager: EntityManager, skip: number, take: number) => {
+        return await entityManager.query(
+          `
+          SELECT dso.id, dso.options, ds.name, dso.environment_id
+          FROM data_source_options dso
+          JOIN data_sources ds ON dso.data_source_id = ds.id
+          WHERE ds.kind = $1
+          AND dso.options->'auth_type'->>'value' = $2
+          ORDER BY dso.id
+          LIMIT $3 OFFSET $4
+      `,
+          ['restapi', 'oauth2', take, skip]
+        );
+      };
+
+      const processDataSourceOptionsBatch = async (entityManager: EntityManager, dataSourceOptions: any[]) => {
+        for (const dataSourceOption of dataSourceOptions) {
+          const options = dataSourceOption.options;
+          if (options) {
+            const currentClientAuth = options?.client_auth?.value;
+
+            if (currentClientAuth === 'body') {
+              migrationProgress.show();
+              continue;
+            }
+
+            options.client_auth = { value: 'body', encrypted: false };
+            await entityManager.query(
+              `
+            UPDATE data_source_options
+            SET options = $1
+            WHERE id = $2
+        `,
+              [options, dataSourceOption.id]
+            );
+          }
+          migrationProgress.show();
+        }
+      };
+
+      await processDataInBatches(
+        entityManager,
+        fetchDataSourceOptionsInBatches,
+        processDataSourceOptionsBatch,
+        batchSize
+      );
+    }, entityManager);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {}
+}
diff --git a/server/src/modules/data-sources/util.service.ts b/server/src/modules/data-sources/util.service.ts
index 984465cfd4..07b06f0ebe 100644
--- a/server/src/modules/data-sources/util.service.ts
+++ b/server/src/modules/data-sources/util.service.ts
@@ -661,7 +661,6 @@ export class DataSourcesUtilService implements IDataSourcesUtilService {
     dataSource: DataSource
   ): Promise<any> {
     const tooljetHost = process.env.TOOLJET_HOST;
-    const isUrlEncoded = this.checkIfContentTypeIsURLenc(sourceOptions['access_token_custom_headers']);
     const accessTokenUrl = sourceOptions['access_token_url'];
     if (sourceOptions['oauth_type'] === 'tooljet_app') {
       const clientIdKey = this.fetchEnvVariables(dataSource.kind, 'CLIENT_ID');
@@ -679,27 +678,42 @@ export class DataSourcesUtilService implements IDataSourcesUtilService {
     const customParams = this.sanitizeCustomParams(sourceOptions['custom_auth_params']);
     const customAccessTokenHeaders = this.sanitizeCustomParams(sourceOptions['access_token_custom_headers']);
 
-    const bodyData = {
+    const baseBodyData = {
       code,
-      client_id: sourceOptions['client_id'],
-      client_secret: sourceOptions['client_secret'],
       grant_type: sourceOptions['grant_type'],
       redirect_uri: `${tooljetHost}/oauth2/authorize`,
       ...customParams,
     };
 
+    const headers = {
+      'Content-Type': 'application/x-www-form-urlencoded',
+      ...customAccessTokenHeaders,
+    };
+
+    let bodyData;
+    if (sourceOptions.client_auth.toLowerCase() === 'header') {
+      const credentials = Buffer.from(`${sourceOptions['client_id']}:${sourceOptions['client_secret']}`).toString(
+        'base64'
+      );
+      headers['Authorization'] = `Basic ${credentials}`;
+      bodyData = baseBodyData;
+    } else {
+      bodyData = {
+        ...baseBodyData,
+        client_id: sourceOptions['client_id'],
+        client_secret: sourceOptions['client_secret'],
+      };
+    }
+
     try {
       const response = await got(accessTokenUrl, {
         method: 'post',
-        headers: {
-          'Content-Type': isUrlEncoded ? 'application/x-www-form-urlencoded' : 'application/json',
-          ...customAccessTokenHeaders,
-        },
-        form: isUrlEncoded ? bodyData : undefined,
-        json: !isUrlEncoded ? bodyData : undefined,
+        headers,
+        form: bodyData,
       });
 
       const result = JSON.parse(response.body);
+
       return {
         ...(isMultiAuthEnabled ? { user_id: userId } : {}),
         access_token: result['access_token'],

From 8d132b86b0f3ec00ccbe8a67c29917fbadef5038 Mon Sep 17 00:00:00 2001
From: Adish M <44204658+adishM98@users.noreply.github.com>
Date: Wed, 22 Oct 2025 16:23:45 +0530
Subject: [PATCH 100/157] =?UTF-8?q?=F0=9F=9A=80=20chore:=20update=20submod?=
 =?UTF-8?q?ules=20to=20latest=20lts-3.16=20after=20auto-merge=20(#14388)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: johnsoncherian <57667706+johnsoncherian@users.noreply.github.com>
---
 frontend/ee | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/ee b/frontend/ee
index 76cf0eebb2..ce564ea825 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit 76cf0eebb287a6d40a2f03c6882a9de12f2762b4
+Subproject commit ce564ea8257c912431e9fa87c94655ee1c4b9481

From ab18cce16f0b8e20a84f1d7d06c7a6be6bfe049a Mon Sep 17 00:00:00 2001
From: emidhun <midhun752@gmail.com>
Date: Wed, 22 Oct 2025 16:53:46 +0530
Subject: [PATCH 101/157] Update data-cy of sidepanel and export button

---
 .../src/AppBuilder/LeftSidebar/GlobalSettings/AppExport.jsx | 2 +-
 .../src/AppBuilder/LeftSidebar/SidebarItem/SidebarItem.jsx  | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/AppExport.jsx b/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/AppExport.jsx
index 0bce2fb999..d63b6d1d5a 100644
--- a/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/AppExport.jsx
+++ b/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/AppExport.jsx
@@ -41,7 +41,7 @@ const AppExport = ({ darkMode }) => {
             setIsExportingApp(true);
             document.getElementById('maintenance-app-modal').click();
           }}
-          data-cy="button-user-status-change"
+          data-cy="export-app-button"
         >
           Export app
         </Button>
diff --git a/frontend/src/AppBuilder/LeftSidebar/SidebarItem/SidebarItem.jsx b/frontend/src/AppBuilder/LeftSidebar/SidebarItem/SidebarItem.jsx
index ea13d44733..d5ccef89e4 100644
--- a/frontend/src/AppBuilder/LeftSidebar/SidebarItem/SidebarItem.jsx
+++ b/frontend/src/AppBuilder/LeftSidebar/SidebarItem/SidebarItem.jsx
@@ -35,9 +35,8 @@ export const SidebarItem = forwardRef(
     const content = (
       <Button
         {...rest}
-        className={`${className} ${
-          selectedSidebarItem === icon && selectedSidebarItem !== 'comments' && 'sidebar-item--active'
-        } ${icon}-icon`}
+        className={`${className} ${selectedSidebarItem === icon && selectedSidebarItem !== 'comments' && 'sidebar-item--active'
+          } ${icon}-icon`}
         onClick={onClick && onClick}
         ref={ref}
         type="button"
@@ -45,6 +44,7 @@ export const SidebarItem = forwardRef(
         variant="ghost"
         size="default"
         iconOnly
+        data-cy={`left-sidebar-${icon?.toLowerCase() || 'unknown'}-button`}
       >
         {children && (
           <div className={'sidebar-svg-icon  position-relative'}>

From a79760a09b86dee124bbfbf6c1b92ff191cdbd63 Mon Sep 17 00:00:00 2001
From: emidhun <midhun752@gmail.com>
Date: Wed, 22 Oct 2025 16:54:20 +0530
Subject: [PATCH 102/157] Optimise import and export spec

---
 .../platform/ceTestcases/apps/appExport.cy.js | 150 +++------------
 .../platform/ceTestcases/apps/appImport.cy.js | 177 ++++++------------
 .../cypress/support/utils/exportImport.js     | 119 ++++++++++++
 3 files changed, 207 insertions(+), 239 deletions(-)

diff --git a/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appExport.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appExport.cy.js
index 13f0ae4847..140af39282 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appExport.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appExport.cy.js
@@ -1,7 +1,7 @@
 import { fake } from "Fixtures/fake";
 
 import { commonSelectors } from "Selectors/common";
-import { importSelectors } from "Selectors/exportImport";
+import { importSelectors, exportAppModalSelectors } from "Selectors/exportImport";
 import { commonText } from "Texts/common";
 import { exportAppModalText } from "Texts/exportImport";
 
@@ -9,9 +9,9 @@ import {
   clickOnExportButtonAndVerify,
   exportAllVersionsAndVerify,
   verifyElementsOfExportModal,
+  validateExportedAppStructure,
 } from "Support/utils/exportImport";
-
-import { selectAppCardOption, closeModal } from "Support/utils/common";
+import { selectAppCardOption, closeModal, deleteDownloadsFolder } from "Support/utils/common";
 
 describe("App Export", () => {
   const TEST_DATA = {
@@ -21,34 +21,30 @@ describe("App Export", () => {
     },
   };
 
-  let data;
-
-  data = {
+  const generateTestData = () => ({
     workspaceName: fake.firstName,
     workspaceSlug: fake.firstName.toLowerCase().replace(/\s+/g, "-"),
     appName: `${fake.companyName}-IE-App`,
     appReName: `${fake.companyName}-${fake.companyName}-IE-App`,
     dsName: fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", ""),
-  };
+  });
+
+  let data;
 
   beforeEach(() => {
-    data = {
-      workspaceName: fake.firstName,
-      workspaceSlug: fake.firstName.toLowerCase().replace(/\s+/g, "-"),
-      appName: `${fake.companyName}-IE-App`,
-      appReName: `${fake.companyName}-${fake.companyName}-IE-App`,
-      dsName: fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", ""),
-    };
+    data = generateTestData();
+
+    deleteDownloadsFolder();
     cy.exec("mkdir -p ./cypress/downloads/");
-    cy.exec("cd ./cypress/downloads/ && rm -rf *", { failOnNonZeroExit: false });
-    cy.exec("mkdir -p ./cypress/downloads/");
-    cy.wait(3000);
 
     cy.apiLogin();
     cy.apiCreateWorkspace(data.workspaceName, data.workspaceSlug);
   });
 
-  it("Verify the elements of export dialog box", () => {
+  it("should verify elements of export dialog box", () => {
+    cy.intercept("POST", "**/api/v2/resources/import").as("importApp");
+    cy.intercept("POST", "**/api/v2/resources/export").as("exportApp");
+
     cy.skipWalkthrough();
 
     cy.apiLogin();
@@ -56,33 +52,25 @@ describe("App Export", () => {
     cy.get(importSelectors.importOptionInput)
       .eq(0)
       .selectFile(TEST_DATA.appFiles.multiVersion, { force: true });
-    cy.wait(2000);
     cy.clearAndType(commonSelectors.appNameInput, data.appName);
     cy.get(importSelectors.importAppButton).click();
-    cy.wait(3000);
+    cy.wait("@importApp");
     cy.backToApps();
-    cy.reload()
-    cy.pause()
+    cy.reload();
 
-    // Select the app card option to export the app
     selectAppCardOption(
       data.appName,
       commonSelectors.appCardOptions(commonText.exportAppOption)
     );
 
-    // Verify the elements of the export modal
     verifyElementsOfExportModal("v3", ["v2", "v1"], [true, false, false]);
 
-    // Close the modal
     closeModal(exportAppModalText.modalCloseButton);
 
-    // Ensure the modal title is no longer visible
     cy.get(
       commonSelectors.modalTitle(exportAppModalText.selectVersionTitle)
     ).should("not.exist");
 
-    // Re-open the export modal and click the export button
-    cy.wait(2000);
     selectAppCardOption(
       data.appName,
       commonSelectors.appCardOptions(commonText.exportAppOption)
@@ -93,95 +81,24 @@ describe("App Export", () => {
       const downloadedAppExportFileName = result.stdout.split("\n")[0];
       const filePath = `./cypress/downloads/${downloadedAppExportFileName}`;
 
-      // Ensure the file name contains the expected app export name
       expect(downloadedAppExportFileName).to.contain(
         data.appName.toLowerCase()
       );
 
-      // Read and validate the exported JSON file
       cy.readFile(filePath).then((appData) => {
-        // Validate the app name
-        const appNameFromFile = appData.app[0].definition.appV2.name;
-        expect(appNameFromFile).to.equal(data.appName);
-
-        // Validate the schema for the student table in tooljetdb
-        const tooljetDatabase = appData.tooljet_database.find(
-          (db) => db.table_name === "student"
-        );
-        expect(tooljetDatabase).to.exist;
-        expect(tooljetDatabase.schema).to.exist;
-
-        // Validate components and queries
-        const components = appData.app[0].definition.appV2.components;
-
-        const text2Component = components.find(
-          (component) => component.name === "text2"
-        );
-        expect(text2Component).to.exist;
-        expect(text2Component.properties.text.value).to.equal(
-          "{{constants.pageHeader}}"
-        );
-
-        const textinput1 = components.find(
-          (component) => component.name === "textinput1"
-        );
-        expect(textinput1).to.exist;
-        expect(textinput1.properties.value.value).to.include("queries");
-
-        const textinput2 = components.find(
-          (component) => component.name === "textinput2"
-        );
-        expect(textinput2).to.exist;
-        expect(textinput2.properties.value.value).to.include("queries");
-
-        const textinput3 = components.find(
-          (component) => component.name === "textinput3"
-        );
-        expect(textinput3).to.exist;
-        expect(textinput3.properties.value.value).to.include("queries");
-
-        // Validate the data queries
-        const dataQueries = appData.app[0].definition.appV2.dataQueries;
-
-        const postgresqlQuery = dataQueries.find(
-          (query) => query.name === "postgresql1"
-        );
-        expect(postgresqlQuery).to.exist;
-        expect(postgresqlQuery.options.query).to.include(
-          "Select * from {{secrets.db_name}}"
-        );
-
-        const restapiQuery = dataQueries.find(
-          (query) => query.name === "restapi1"
-        );
-        expect(restapiQuery).to.exist;
-        expect(restapiQuery.options.url).to.equal(
-          "https://jsonplaceholder.typicode.com/users/1"
-        );
-
-        const tooljetdbQuery = dataQueries.find(
-          (query) => query.name === "tooljetdb1"
-        );
-        expect(tooljetdbQuery).to.exist;
-        expect(tooljetdbQuery.options.operation).to.equal("list_rows");
-
-        // Ensure appVersions exists
-        const appVersions = appData.app[0].definition.appV2.appVersions;
-        expect(appVersions).to.exist;
-
-        // Map and verify app version names
-        const versionNames = appVersions.map((version) => version.name);
-        expect(versionNames).to.include.members(["v1", "v2", "v3"]);
+        validateExportedAppStructure(appData, data.appName, {
+          expectedVersions: ["v1", "v2", "v3"],
+        });
       });
     });
 
-    cy.exec("cd ./cypress/downloads/ && rm -rf *");
+    deleteDownloadsFolder();
 
     selectAppCardOption(
       data.appName,
       commonSelectors.appCardOptions(commonText.exportAppOption)
     );
-    cy.get(`[data-cy="v1-radio-button"]`).check();
+    cy.get(exportAppModalSelectors.versionRadioButton("v3")).check();
     cy.get(
       commonSelectors.buttonSelector(exportAppModalText.exportSelectedVersion)
     ).click();
@@ -190,37 +107,32 @@ describe("App Export", () => {
       const downloadedAppExportFileName = result.stdout.split("\n")[0];
       const filePath = `./cypress/downloads/${downloadedAppExportFileName}`;
 
-      // Ensure the file name contains the expected app export name
       expect(downloadedAppExportFileName).to.contain(
         data.appName.toLowerCase()
       );
 
-      // Read and validate the exported JSON file
       cy.readFile(filePath).then((appData) => {
-        // Validate the app name
-        const appNameFromFile = appData.app[0].definition.appV2.name;
-        expect(appNameFromFile).to.equal(data.appName);
+        validateExportedAppStructure(appData, data.appName, {
+          validateVersions: false,
+        });
       });
     });
   });
 
-  it.only("Verify 'Export app' functionality of an application inside app editor", () => {
+  it("should verify export app functionality inside app editor", () => {
+    cy.intercept("POST", "**/api/v2/resources/export").as("exportApp");
+
     data.appName2 = `${fake.companyName}-App`;
     cy.apiCreateApp(data.appName2);
     cy.openApp(data.appName2);
 
     cy.dragAndDropWidget("Text Input", 200, 200);
 
-    cy.get('[data-cy="left-sidebar-settings-button"]').click();
-    cy.get('[data-cy="button-user-status-change"]').click();
+    cy.get(commonSelectors.leftSideBarSettingsButton).click();
+    cy.get(commonSelectors.buttonSelector("Export app")).click();
 
     verifyElementsOfExportModal("v1");
 
-    exportAllVersionsAndVerify(data.appName1, "v1");
+    exportAllVersionsAndVerify(data.appName2, "v1");
   });
-});
-
-it('.', function() {
-  cy.visit('localhost:8082')
-  
-});
+});
\ No newline at end of file
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appImport.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appImport.cy.js
index 5ea812c6b4..226776e2be 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appImport.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appImport.cy.js
@@ -2,12 +2,14 @@ import { fake } from "Fixtures/fake";
 import { commonSelectors, commonWidgetSelector } from "Selectors/common";
 import { appVersionSelectors, importSelectors } from "Selectors/exportImport";
 import { dashboardSelector } from "Selectors/dashboard";
-import { buttonText } from "Texts/button";
-
 import { importText } from "Texts/exportImport";
-import { importAndVerifyApp } from "Support/utils/exportImport";
+import {
+  importAndVerifyApp,
+  verifyImportModalElements,
+  setupDataSourceWithConstants,
+} from "Support/utils/exportImport";
 import { switchVersionAndVerify } from "Support/utils/version";
-import { renameApp, verifyAppName, verifyCurrentEnvironment, verifyCurrentVersion, addNewVersion, promoteEnv } from 'Support/utils/editor/editorHeaderOperations';
+import { renameApp } from 'Support/utils/editor/editorHeaderOperations';
 
 describe("App Import", () => {
   const TEST_DATA = {
@@ -20,17 +22,46 @@ describe("App Import", () => {
     },
   };
 
+  const generateTestData = () => ({
+    workspaceName: fake.firstName,
+    workspaceSlug: fake.firstName.toLowerCase().replace(/\s+/g, "-"),
+    appName: `${fake.companyName}-IE-App`,
+    appReName: `${fake.companyName}-${fake.companyName}-IE-App`,
+    dsName: fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", ""),
+  });
+
+  const setupWorkspaceConstants = (dsEnv) => {
+    cy.apiCreateWorkspaceConstant("pageHeader", "Import and Export", ["Global"], [dsEnv]);
+    cy.apiCreateWorkspaceConstant("db_name", "persons", ["Secret"], [dsEnv]);
+  };
+
+  const getDataSourceEnvironment = () => {
+    const edition = Cypress.env("environment");
+    return edition === "Community" ? "production" : "development";
+  };
+
+  const verifyAppNameInEditor = (expectedName) => {
+    cy.get('[data-cy="edit-app-name-button"]')
+      .should("be.visible")
+      .verifyVisibleElement("have.text", expectedName);
+  };
+
+  const setupCommunityOrEnterpriseDataSource = () => {
+    const edition = Cypress.env("environment");
+    if (edition === "Community" || edition === "Enterprise") {
+      const dsEnv = getDataSourceEnvironment();
+      setupDataSourceWithConstants(dsEnv);
+      setupWorkspaceConstants(dsEnv);
+      return dsEnv;
+    }
+    return null;
+  };
+
   let data;
 
   beforeEach(() => {
     cy.viewport(1400, 1400);
-    data = {
-      workspaceName: fake.firstName,
-      workspaceSlug: fake.firstName.toLowerCase().replace(/\s+/g, "-"),
-      appName: `${fake.companyName}-IE-App`,
-      appReName: `${fake.companyName}-${fake.companyName}-IE-App`,
-      dsName: fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", ""),
-    };
+    data = generateTestData();
 
     cy.apiLogin();
     cy.apiCreateWorkspace(data.workspaceName, data.workspaceSlug).then((workspace) => {
@@ -40,7 +71,6 @@ describe("App Import", () => {
     cy.visit(`${data.workspaceSlug}`);
   });
   it("should verify invalid import files", () => {
-
     cy.get(importSelectors.dropDownMenu).should("be.visible").click();
     cy.get(importSelectors.importOptionLabel).verifyVisibleElement(
       "have.text",
@@ -53,72 +83,33 @@ describe("App Import", () => {
       importText.couldNotImportAppToastMessage
     );
 
-    cy.wait(500);
-    cy.get(dashboardSelector.importAppButton).click();
+    cy.get(dashboardSelector.importAppButton).should("be.visible").click();
     importAndVerifyApp(
       TEST_DATA.invalidApp,
       "Could not import: SyntaxError: Expected ',' or '}' after property value in JSON at position 246 (line 11 column 13)"
     );
-
-
   });
 
   it("should verify app with multiple version", () => {
-
     cy.intercept("POST", "/api/v2/resources/import").as("importApp");
+
     cy.get(importSelectors.importOptionInput)
       .eq(0)
-      .selectFile(TEST_DATA.appFiles.multiVersion, {
-        force: true,
-      });
-    cy.wait(1500);
+      .selectFile(TEST_DATA.appFiles.multiVersion, { force: true });
 
-    cy.get(importSelectors.importAppTitle).verifyVisibleElement(
-      "have.text",
-      "Import app"
-    );
-    cy.get(commonSelectors.appNameLabel).verifyVisibleElement(
-      "have.text",
-      "App name"
-    );
-    cy.get(commonSelectors.appNameInput)
-      .should("be.visible")
-      .and("have.value", "three-versions");
-    cy.get(commonSelectors.appNameInfoLabel).verifyVisibleElement(
-      "have.text",
-      "App name must be unique and max 50 characters"
-    );
-    cy.get(commonSelectors.cancelButton)
-      .should("be.visible")
-      .and("have.text", "Cancel");
-    cy.get(commonSelectors.importAppButton).verifyVisibleElement(
-      "have.text",
-      "Import app"
-    );
+    verifyImportModalElements("three-versions");
 
     cy.get(importSelectors.importAppButton).click();
-    cy.get(".go3958317564")
+    cy.get(commonSelectors.toastMessage)
       .should("be.visible")
       .and("have.text", importText.appImportedToastMessage);
 
-    // Verify imported app
     cy.get(commonSelectors.toastCloseButton).click();
-    cy.wait(500);
-    cy.get('[data-cy="edit-app-name-button"]').verifyVisibleElement(
-      "have.text",
-      "three-versions"
-    );
+    verifyAppNameInEditor("three-versions");
     cy.get(appVersionSelectors.currentVersionField("v3")).should("be.visible");
 
-    //App editing is pending
-
     renameApp(data.appName);
-    cy.get('[data-cy="edit-app-name-button"]').verifyVisibleElement(
-      "have.text",
-      data.appName
-    );
-
-    // Verify initial widget states
+    verifyAppNameInEditor(data.appName);
 
     verifyCommonData({
       text2: "",
@@ -126,41 +117,13 @@ describe("App Import", () => {
       textInput2: "Leanne Graham",
     });
 
-    // cy.get(
-    //   commonWidgetSelector.draggableWidget("textInput3")
-    // ).verifyVisibleElement("have.value", "");
-
-    // Setup database and data sources
     cy.visit(`${data.workspaceSlug}/database`);
-    cy.get('[data-cy="student-table"]').verifyVisibleElement(
-      "have.text",
-      "student"
-    );
-
-    // cy.apiAddDataToTable("student", {
-    //   name: "Paramu",
-    //   country: "India",
-    //   state: "Kerala",
-    // });
+    cy.get('[data-cy="student-table"]').verifyVisibleElement("have.text", "student");
 
     cy.visit(`${data.workspaceSlug}/data-sources`);
     cy.get('[data-cy="postgresql-button"]').should("be.visible");
+    setupCommunityOrEnterpriseDataSource();
 
-    const edition = Cypress.env("environment");
-    if (edition === "Community" || edition === "Enterprise") {
-      const dsEnv = edition === "Community" ? "production" : "development";
-      cy.apiUpdateDataSource("postgresql", dsEnv, {
-        options: [{
-          key: "password",
-          value: Cypress.env("pg_password"),
-          encrypted: true,
-        }],
-      });
-      cy.apiCreateWorkspaceConstant("pageHeader", "Import and Export", ["Global"], [dsEnv]);
-      cy.apiCreateWorkspaceConstant("db_name", "persons", ["Secret"], [dsEnv]);
-    }
-
-    // Verify app after setup
     cy.wait("@importApp").then((interception) => {
       const appId = interception.response.body.imports.app[0].id;
       cy.log(`Imported app id: ${appId}`);
@@ -177,54 +140,28 @@ describe("App Import", () => {
       textInput1: "John",
       textInput2: "Leanne Graham",
     });
-    // cy.get(
-    //   commonWidgetSelector.draggableWidget("textInput3")
-    // ).verifyVisibleElement("have.value", "India");
 
     switchVersionAndVerify("v3", "v1");
-
     verifyCommonData({
       text2: "Import and Export",
       textInput1: "John",
       textInput2: "Leanne Graham",
     });
-
-    cy.wait(1000);
-    cy.backToApps();
-
-    // Test single version import
-
   });
 
   it("should verify app with single version", () => {
-
     cy.get(importSelectors.dropDownMenu).click();
-    const edition = Cypress.env("environment");
-    let dsEnv
-    if (edition === "Community" || edition === "Enterprise") {
-      dsEnv = edition === "Community" ? "production" : "development";
-      cy.apiCreateWorkspaceConstant("pageHeader", "Import and Export", ["Global"], [dsEnv]);
-      cy.apiCreateWorkspaceConstant("db_name", "persons", ["Secret"], [dsEnv]);
-    }
+    const dsEnv = setupCommunityOrEnterpriseDataSource();
 
     importAndVerifyApp(TEST_DATA.appFiles.singleVersion);
 
-    cy.get('[data-cy="edit-app-name-button"]').verifyVisibleElement(
-      "have.text",
-      "one_version"
-    );
-    cy.apiUpdateDataSource("postgresql", dsEnv, {
-      options: [{
-        key: "password",
-        value: Cypress.env("pg_password"),
-        encrypted: true,
-      }],
-    });
-
-    cy.reload()
-
+    verifyAppNameInEditor("one_version");
 
+    if (dsEnv) {
+      setupDataSourceWithConstants(dsEnv);
+    }
 
+    cy.reload();
     verifyCommonData({
       text2: "Import and Export",
       textInput1: "John",
diff --git a/cypress-tests/cypress/support/utils/exportImport.js b/cypress-tests/cypress/support/utils/exportImport.js
index 432a677f51..57b393d6ce 100644
--- a/cypress-tests/cypress/support/utils/exportImport.js
+++ b/cypress-tests/cypress/support/utils/exportImport.js
@@ -136,3 +136,122 @@ export const importAndVerifyApp = (filePath, expectedToast) => {
   }
 };
 
+export const verifyImportModalElements = (expectedAppName) => {
+  cy.get(importSelectors.importAppTitle).verifyVisibleElement("have.text", "Import app");
+  cy.get(commonSelectors.appNameLabel).verifyVisibleElement("have.text", "App name");
+  cy.get(commonSelectors.appNameInput)
+    .should("be.visible")
+    .and("have.value", expectedAppName);
+  cy.get(commonSelectors.appNameInfoLabel).verifyVisibleElement(
+    "have.text",
+    "App name must be unique and max 50 characters"
+  );
+  cy.get(commonSelectors.cancelButton)
+    .should("be.visible")
+    .and("have.text", "Cancel");
+  cy.get(commonSelectors.importAppButton).verifyVisibleElement("have.text", "Import app");
+};
+
+export const setupDataSourceWithConstants = (dsEnv, password = Cypress.env("pg_password")) => {
+  cy.apiUpdateDataSource("postgresql", dsEnv, {
+    options: [{
+      key: "password",
+      value: password,
+      encrypted: true,
+    }],
+  });
+};
+
+export const validateExportedAppStructure = (
+  appData,
+  expectedAppName,
+  options = {}
+) => {
+  const {
+    validateComponents = true,
+    validateQueries = true,
+    validateVersions = true,
+    validateTooljetDB = true,
+    expectedVersions = ["v1", "v2", "v3"],
+  } = options;
+
+  // Validate the app name
+  const appNameFromFile = appData.app[0].definition.appV2.name;
+  expect(appNameFromFile).to.equal(expectedAppName);
+
+  // Validate the schema for the student table in tooljetdb
+  if (validateTooljetDB) {
+    const tooljetDatabase = appData.tooljet_database.find(
+      (db) => db.table_name === "student"
+    );
+    expect(tooljetDatabase).to.exist;
+    expect(tooljetDatabase.schema).to.exist;
+  }
+
+  // Validate components
+  if (validateComponents) {
+    const components = appData.app[0].definition.appV2.components;
+
+    const text2Component = components.find(
+      (component) => component.name === "text2"
+    );
+    expect(text2Component).to.exist;
+    expect(text2Component.properties.text.value).to.equal(
+      "{{constants.pageHeader}}"
+    );
+
+    const textinput1 = components.find(
+      (component) => component.name === "textinput1"
+    );
+    expect(textinput1).to.exist;
+    expect(textinput1.properties.value.value).to.include("queries");
+
+    const textinput2 = components.find(
+      (component) => component.name === "textinput2"
+    );
+    expect(textinput2).to.exist;
+    expect(textinput2.properties.value.value).to.include("queries");
+
+    const textinput3 = components.find(
+      (component) => component.name === "textinput3"
+    );
+    cy.log(JSON.stringify(appData.app[0].definition.appV2.appVersions));
+    expect(textinput3).to.exist;
+    expect(textinput3.properties.value.value).to.include("queries");
+  }
+
+  // Validate the data queries
+  if (validateQueries) {
+    const dataQueries = appData.app[0].definition.appV2.dataQueries;
+
+    const postgresqlQuery = dataQueries.find(
+      (query) => query.name === "postgresql1"
+    );
+    expect(postgresqlQuery).to.exist;
+    expect(postgresqlQuery.options.query).to.include(
+      "Select * from {{secrets.db_name}}"
+    );
+
+    const restapiQuery = dataQueries.find((query) => query.name === "restapi1");
+    expect(restapiQuery).to.exist;
+    expect(restapiQuery.options.url).to.equal(
+      "https://jsonplaceholder.typicode.com/users/1"
+    );
+
+    const tooljetdbQuery = dataQueries.find(
+      (query) => query.name === "tooljetdb1"
+    );
+    expect(tooljetdbQuery).to.exist;
+    expect(tooljetdbQuery.options.operation).to.equal("list_rows");
+  }
+
+  // Validate app versions
+  if (validateVersions) {
+    const appVersions = appData.app[0].definition.appV2.appVersions;
+    expect(appVersions).to.exist;
+
+    const versionNames = appVersions.map((version) => version.name);
+    expect(versionNames).to.include.members(expectedVersions);
+  }
+};
+

From 0fc6e47bb3b97bfe402164122fae73c9847c6ede Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Wed, 22 Oct 2025 17:01:20 +0530
Subject: [PATCH 103/157] Fix: Component naming when user performs undo
 operation after component deletion

---
 .../_stores/slices/componentsSlice.js           | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/frontend/src/AppBuilder/_stores/slices/componentsSlice.js b/frontend/src/AppBuilder/_stores/slices/componentsSlice.js
index 56b1018574..19ac269350 100644
--- a/frontend/src/AppBuilder/_stores/slices/componentsSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/componentsSlice.js
@@ -185,6 +185,10 @@ export const createComponentsSlice = (set, get) => ({
       (state) => {
         oldName = state.modules[moduleId].pages[currentPageIndex].components[componentId].component.name;
         state.modules[moduleId].pages[currentPageIndex].components[componentId].component.name = newName;
+
+        if (state.modules[moduleId].pages[currentPageIndex].components[componentId].name) {
+          state.modules[moduleId].pages[currentPageIndex].components[componentId].name = newName;
+        }
       },
       false,
       'setComponentName'
@@ -2155,8 +2159,17 @@ export const createComponentsSlice = (set, get) => ({
         ...Object.fromEntries(acc.map((component) => [component.id, component])),
       };
 
-      const componentName =
-        componentDefinition.name || computeComponentName(componentDefinition.component.component, currentComponents);
+      const componentNameInDefinition = componentDefinition.component.name;
+
+      // Check if there is any existing component with the same name
+      const isNameValid = !Object.values(currentComponents).some(
+        (component) => component.component.name === componentNameInDefinition
+      );
+
+      // If name is valid then use the same name but if not then fallback to old flow and compute component name
+      const componentName = isNameValid
+        ? componentNameInDefinition
+        : computeComponentName(componentDefinition.component.component, currentComponents);
 
       const getComponentProperties = (componentDefinition) => {
         const properties = componentDefinition.component.definition?.properties;

From 249d7a11359fbf6b8a3ace0f970f88fa2c6c4abc Mon Sep 17 00:00:00 2001
From: Parth <108089718+parthy007@users.noreply.github.com>
Date: Wed, 22 Oct 2025 17:19:46 +0530
Subject: [PATCH 104/157] Feature: Validate and save datasource OAuth creds in
 multi-tenant mode (#14043)

* fix: change schema to hide save button & add default value

* enhance: Show connect button in UI at data-config

* fix: extract source_options correctly

enhance: add userID in cache logic for snowflake

* enhance: add backend logic to save tokens correctly

fix: change IDataSourcesUtilService interface

* fix: add read docs button for oauth plugins

fix: shrink the connect button

* fix: remove extra code and fix comments

* fix: generate cache key correctly
---
 frontend/src/_components/OAuthWrapper.jsx     |  91 ++++++++-----
 .../DataSourceManager/DataSourceManager.jsx   |   8 +-
 .../plugins/googlecalendar/lib/index.ts       |  21 ++-
 .../plugins/googlecalendar/lib/manifest.json  |  84 ++++--------
 marketplace/plugins/hubspot/lib/manifest.json |  15 ++-
 .../plugins/microsoft_graph/lib/manifest.json | 101 ++++++---------
 .../plugins/salesforce/lib/manifest.json      |   3 +-
 plugins/packages/snowflake/lib/index.ts       |  28 +++-
 .../data-sources/interfaces/IUtilService.ts   |  13 +-
 server/src/modules/data-sources/service.ts    |   4 +-
 .../src/modules/data-sources/util.service.ts  | 121 ++++++++++++------
 11 files changed, 267 insertions(+), 222 deletions(-)

diff --git a/frontend/src/_components/OAuthWrapper.jsx b/frontend/src/_components/OAuthWrapper.jsx
index a120c6a8ae..f6f8f251fb 100644
--- a/frontend/src/_components/OAuthWrapper.jsx
+++ b/frontend/src/_components/OAuthWrapper.jsx
@@ -7,6 +7,8 @@ import { toast } from 'react-hot-toast';
 import Button from '@/_ui/Button';
 import Input from '@/_ui/Input';
 import cx from 'classnames';
+import { Modal } from 'react-bootstrap';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
 
 const OAuthWrapper = ({
   optionchanged,
@@ -27,8 +29,7 @@ const OAuthWrapper = ({
   const needConnectionButton =
     selectedDataSource.kind !== 'openapi' &&
     options?.auth_type?.value === 'oauth2' &&
-    options?.grant_type?.value === 'authorization_code' &&
-    multiple_auth_enabled !== true;
+    options?.grant_type?.value === 'authorization_code';
   const dataSourceNameCapitalize = capitalize(
     selectedDataSource?.plugin?.manifestFile?.data?.source?.name || selectedDataSource?.kind
   );
@@ -37,6 +38,11 @@ const OAuthWrapper = ({
   const fullUrl = `${hostUrl}${subPathUrl ? subPathUrl : '/'}oauth2/authorize`;
   const redirectUri = fullUrl;
 
+  const docLink =
+    selectedDataSource?.pluginId && selectedDataSource.pluginId.trim() !== ''
+      ? `https://docs.tooljet.ai/docs/marketplace/plugins/marketplace-plugin-${selectedDataSource?.kind}/`
+      : `https://docs.tooljet.ai/docs/data-sources/${selectedDataSource?.kind}`;
+
   function authorizeWithProvider() {
     const provider = selectedDataSource?.kind;
     const plugin_id = selectedDataSource?.plugin?.id;
@@ -145,41 +151,68 @@ const OAuthWrapper = ({
             <div>
               <span className="form-check-label">Authentication required for all users</span>
               <span className="text-muted" style={{ fontSize: '12px' }}>
-                User will be redirected to OAuth flow once first query of this data source is run in an app.
+                Other users will be redirected to OAuth flow once first query of this data source is run in an app.
               </span>
             </div>
           </label>
         </div>
       )}
       {needConnectionButton && (
-        <div className="row mt-3">
-          <center>
-            {authStatus === 'waiting_for_token' && (
-              <div>
-                <Button
-                  className={`m2 ${isSaving ? ' loading' : ''}`}
-                  disabled={isSaving}
-                  onClick={() => saveDataSource()}
-                >
-                  {isSaving ? t('globals.saving', 'Saving...') : t('globals.saveDatasource', 'Save data source')}
-                </Button>
-              </div>
-            )}
-
-            {(!authStatus || authStatus === 'waiting_for_url') && (
-              <Button
-                className={cx('m2', { 'btn-loading': authStatus === 'waiting_for_url' })}
-                disabled={isSaving}
-                onClick={() => authorizeWithProvider()}
+        <Modal.Footer
+          style={{
+            marginTop: '32px',
+            borderTop: '1px solid var(--border-weak)',
+            marginLeft: '-24px',
+            marginRight: '-24px',
+            paddingLeft: '24px',
+            paddingRight: '24px',
+            paddingTop: '6px',
+            paddingBottom: 0,
+          }}
+        >
+          <>
+            <div className="col">
+              <SolidIcon name="logs" fill="#3E63DD" width="20" style={{ marginRight: '8px' }} />
+              <a
+                className="color-primary tj-docs-link tj-text-sm"
+                data-cy="link-read-documentation"
+                href={docLink}
+                target="_blank"
+                rel="noreferrer"
               >
-                {t(
-                  `${selectedDataSource.kind}.connect${dataSourceNameCapitalize}`,
-                  `Connect to ${dataSourceNameCapitalize}`
+                {t('globals.readDocumentation', 'Read documentation')}
+              </a>
+            </div>
+            <div className="col-auto row">
+              <center>
+                {authStatus === 'waiting_for_token' && (
+                  <div>
+                    <Button
+                      className={`m2 ${isSaving ? ' loading' : ''}`}
+                      disabled={isSaving}
+                      onClick={() => saveDataSource()}
+                    >
+                      {isSaving ? t('globals.saving', 'Saving...') : t('globals.saveDatasource', 'Save data source')}
+                    </Button>
+                  </div>
                 )}
-              </Button>
-            )}
-          </center>
-        </div>
+
+                {(!authStatus || authStatus === 'waiting_for_url') && (
+                  <Button
+                    className={cx('m2', { 'btn-loading': authStatus === 'waiting_for_url' })}
+                    disabled={isSaving}
+                    onClick={() => authorizeWithProvider()}
+                  >
+                    {t(
+                      `${selectedDataSource.kind}.connect${dataSourceNameCapitalize}`,
+                      `Connect to ${dataSourceNameCapitalize}`
+                    )}
+                  </Button>
+                )}
+              </center>
+            </div>
+          </>
+        </Modal.Footer>
       )}
     </div>
   );
diff --git a/frontend/src/modules/dataSources/components/DataSourceManager/DataSourceManager.jsx b/frontend/src/modules/dataSources/components/DataSourceManager/DataSourceManager.jsx
index e7d006ecf7..9ddc11fd85 100644
--- a/frontend/src/modules/dataSources/components/DataSourceManager/DataSourceManager.jsx
+++ b/frontend/src/modules/dataSources/components/DataSourceManager/DataSourceManager.jsx
@@ -1108,9 +1108,7 @@ class DataSourceManagerComponent extends React.Component {
                   shouldRenderFooterComponent &&
                   (!OAuthDs.includes(selectedDataSource?.kind) ||
                     !(
-                      options?.auth_type?.value === 'oauth2' &&
-                      options?.grant_type?.value === 'authorization_code' &&
-                      options?.multiple_auth_enabled?.value !== true
+                      options?.auth_type?.value === 'oauth2' && options?.grant_type?.value === 'authorization_code'
                     )) && (
                     <Modal.Footer style={sampleDBmodalFooterStyle} className="modal-footer-class">
                       {selectedDataSource && !isSampleDb && (
@@ -1241,9 +1239,7 @@ class DataSourceManagerComponent extends React.Component {
                   dataSourceMeta.customTesting &&
                   (!OAuthDs.includes(selectedDataSource?.kind) ||
                     !(
-                      options?.auth_type?.value === 'oauth2' &&
-                      options?.grant_type?.value === 'authorization_code' &&
-                      options?.multiple_auth_enabled?.value !== true
+                      options?.auth_type?.value === 'oauth2' && options?.grant_type?.value === 'authorization_code'
                     )) && (
                     <Modal.Footer>
                       <div className="col">
diff --git a/marketplace/plugins/googlecalendar/lib/index.ts b/marketplace/plugins/googlecalendar/lib/index.ts
index 71f26fdf69..e8fcb062c7 100644
--- a/marketplace/plugins/googlecalendar/lib/index.ts
+++ b/marketplace/plugins/googlecalendar/lib/index.ts
@@ -192,22 +192,19 @@ export default class GoogleCalendar implements QueryService {
     }
     let clientId = '';
     let clientSecret = '';
-    const oauth_type = source_options.find((item) => item.key === 'oauth_type')?.value;
+    const getOptionValue = (key: string) => {
+      if (Array.isArray(source_options)) {
+        return source_options.find((item) => item.key === key)?.value;
+      } else return source_options[key];
+    };
+
+    const oauth_type = getOptionValue('oauth_type');
     if (oauth_type === 'tooljet_app') {
       clientId = process.env.GOOGLE_CLIENT_ID;
       clientSecret = process.env.GOOGLE_CLIENT_SECRET;
     } else {
-      clientId = source_options.find((item) => item.key === 'client_id')?.value;
-      clientSecret = source_options.find((item) => item.key === 'client_secret')?.value;
-    }
-
-    for (const item of source_options) {
-      if (item.key === 'client_id') {
-        clientId = item.value;
-      }
-      if (item.key === 'client_secret') {
-        clientSecret = item.value;
-      }
+      clientId = getOptionValue('client_id');
+      clientSecret = getOptionValue('client_secret');
     }
 
     const accessTokenUrl = 'https://oauth2.googleapis.com/token';
diff --git a/marketplace/plugins/googlecalendar/lib/manifest.json b/marketplace/plugins/googlecalendar/lib/manifest.json
index a83d56e2b7..9601786169 100644
--- a/marketplace/plugins/googlecalendar/lib/manifest.json
+++ b/marketplace/plugins/googlecalendar/lib/manifest.json
@@ -1,10 +1,9 @@
-
 {
   "$schema": "https://raw.githubusercontent.com/ToolJet/ToolJet/develop/plugins/schemas/manifest.schema.json",
   "title": "Google Calendar",
   "description": "Integrate with Google Calendar API for event management",
   "type": "api",
-    "source": {
+  "source": {
     "name": "Google Calendar",
     "kind": "googlecalendar",
     "exposedVariables": {
@@ -18,50 +17,27 @@
         "encrypted": true
       }
     },
-    "customTesting": true
+    "customTesting": true,
+    "hideSave": true
   },
   "defaults": {
-    "username": {
-      "value": ""
-    },
-    "account": {
-      "value": ""
-    },
-    "password": {
-      "value": ""
-    },
-    "database": {
-      "value": ""
-    },
-    "schema": {
-      "value": ""
-    },
-    "warehouse": {
-      "value": ""
-    },
-    "role": {
-      "value": ""
-    },
     "redirect_url": {
-        "value": "http://localhost:8082/oauth2/authorize",
-        "encrypted": false
+      "value": ""
     },
     "auth_url": {
-        "value": "https://accounts.google.com/o/oauth2/v2/auth",
-        "encrypted": false
+      "value": "https://accounts.google.com/o/oauth2/v2/auth"
     },
     "allowed_auth_types": {
-        "value": "oauth2",
-        "encrypted": false
+      "value": "oauth2"
     },
     "auth_type": {
-        "value": "oauth2"
+      "value": "oauth2"
     },
     "grant_type": {
-        "value": "authorization_code"
+      "value": "authorization_code"
     },
     "scopes": {
-        "value": "https://www.googleapis.com/auth/calendar"
+      "value": "https://www.googleapis.com/auth/calendar"
     },
     "oauth_type": {
       "value": "custom_app"
@@ -72,29 +48,25 @@
   },
   "properties": {
     "oauth": {
-        "key": "oauth",
-        "type": "react-component-oauth",
-        "description": "A component for Google Calendar",
-        "oauth_configs": {
-          "allowed_field_groups": {
-            "authorization_code": [
-              "client_id",
-              "client_secret"
-            ],
-            "basic": [
-              "password",
-              "username"
-            ]
-          },
-          "allowed_auth_types": [
-            "oauth2"
-          ],
-          "allowed_grant_types": [
-            "authorization_code"
-          ],
-          "allowed_scope_field": false
-        }
+      "key": "oauth",
+      "type": "react-component-oauth",
+      "description": "A component for Google Calendar",
+      "oauth_configs": {
+        "allowed_field_groups": {
+          "authorization_code": [
+            "client_id",
+            "client_secret"
+          ]
+        },
+        "allowed_auth_types": [
+          "oauth2"
+        ],
+        "allowed_grant_types": [
+          "authorization_code"
+        ],
+        "allowed_scope_field": false
       }
-    },
+    }
+  },
   "required": []
 }
\ No newline at end of file
diff --git a/marketplace/plugins/hubspot/lib/manifest.json b/marketplace/plugins/hubspot/lib/manifest.json
index 29dc892b8f..c67d7f748b 100644
--- a/marketplace/plugins/hubspot/lib/manifest.json
+++ b/marketplace/plugins/hubspot/lib/manifest.json
@@ -1,4 +1,3 @@
-
 {
   "$schema": "https://raw.githubusercontent.com/ToolJet/ToolJet/develop/plugins/schemas/manifest.schema.json",
   "title": "HubSpot",
@@ -21,7 +20,8 @@
         "type": "string"
       }
     },
-    "customTesting": true
+    "customTesting": true,
+    "hideSave": true
   },
   "defaults": {
     "client_id": {
@@ -37,7 +37,7 @@
       "value": "https://api.hubapi.com/oauth/v1/token"
     },
     "redirect_url": {
-      "value": "http://localhost:8082/oauth2/authorize"
+      "value": ""
     },
     "auth_url": {
       "value": "https://app.hubspot.com/oauth/authorize"
@@ -52,10 +52,13 @@
       "value": "authorization_code"
     },
     "access_token_custom_headers": {
-        "value": [
-          ["Content-Type", "application/x-www-form-urlencoded"]
+      "value": [
+        [
+          "Content-Type",
+          "application/x-www-form-urlencoded"
         ]
-      },
+      ]
+    },
     "scopes": {
       "value": "account-info.security.read accounting actions analytics.behavioral_events.send automation automation.sequences.enrollments.write automation.sequences.read behavioral_events.event_definitions.read_write business-intelligence business_units_view.read cms.domains.read cms.domains.write cms.functions.read cms.functions.write cms.knowledge_base.articles.publish cms.knowledge_base.articles.read cms.knowledge_base.articles.write cms.knowledge_base.settings.read cms.knowledge_base.settings.write cms.membership.access_groups.read cms.membership.access_groups.write cms.performance.read collector.graphql_query.execute collector.graphql_schema.read communication_preferences.read communication_preferences.read_write communication_preferences.statuses.batch.read communication_preferences.statuses.batch.write communication_preferences.write content conversations.custom_channels.read conversations.custom_channels.write conversations.read conversations.visitor_identification.tokens.create conversations.write crm.dealsplits.read_write crm.export crm.extensions_calling_transcripts.read crm.extensions_calling_transcripts.write crm.import crm.lists.read crm.lists.write crm.objects.appointments.read crm.objects.appointments.write crm.objects.carts.read crm.objects.carts.write crm.objects.commercepayments.read crm.objects.commercepayments.write crm.objects.companies.read crm.objects.companies.write crm.objects.contacts.read crm.objects.contacts.write crm.objects.courses.read crm.objects.courses.write crm.objects.custom.read crm.objects.custom.write crm.objects.deals.read crm.objects.deals.write crm.objects.feedback_submissions.read crm.objects.goals.read crm.objects.goals.write crm.objects.invoices.read crm.objects.invoices.write crm.objects.leads.read crm.objects.leads.write crm.objects.line_items.read crm.objects.line_items.write crm.objects.listings.read crm.objects.listings.write crm.objects.marketing_events.read crm.objects.marketing_events.write crm.objects.orders.read crm.objects.orders.write crm.objects.owners.read crm.objects.partner-clients.read crm.objects.partner-clients.write crm.objects.partner-services.read crm.objects.partner-services.write crm.objects.products.read crm.objects.products.write crm.objects.quotes.read crm.objects.quotes.write crm.objects.services.read crm.objects.services.write crm.objects.subscriptions.read crm.objects.subscriptions.write crm.objects.users.read crm.objects.users.write crm.pipelines.orders.read crm.pipelines.orders.write crm.schemas.appointments.read crm.schemas.appointments.write crm.schemas.carts.read crm.schemas.carts.write crm.schemas.commercepayments.read crm.schemas.commercepayments.write crm.schemas.companies.read crm.schemas.companies.write crm.schemas.contacts.read crm.schemas.contacts.write crm.schemas.courses.read crm.schemas.courses.write crm.schemas.custom.read crm.schemas.deals.read crm.schemas.deals.write crm.schemas.invoices.read crm.schemas.invoices.write crm.schemas.line_items.read crm.schemas.listings.read crm.schemas.listings.write crm.schemas.orders.read crm.schemas.orders.write crm.schemas.quotes.read crm.schemas.services.read crm.schemas.services.write crm.schemas.subscriptions.read crm.schemas.subscriptions.write ctas.read e-commerce external_integrations.forms.access files files.ui_hidden.read forms forms-uploaded-files hubdb integration-sync marketing-email marketing.campaigns.read marketing.campaigns.revenue.read marketing.campaigns.write media_bridge.read media_bridge.write oauth record_images.signed_urls.read sales-email-read scheduler.meetings.meeting-link.read settings.billing.write settings.currencies.read settings.currencies.write settings.security.security_health.read settings.users.read settings.users.teams.read settings.users.teams.write settings.users.write social tax_rates.read tickets timeline transactional-email"
     }
diff --git a/marketplace/plugins/microsoft_graph/lib/manifest.json b/marketplace/plugins/microsoft_graph/lib/manifest.json
index 8724f80e30..0309816c07 100644
--- a/marketplace/plugins/microsoft_graph/lib/manifest.json
+++ b/marketplace/plugins/microsoft_graph/lib/manifest.json
@@ -1,4 +1,3 @@
-
 {
   "$schema": "https://raw.githubusercontent.com/ToolJet/ToolJet/develop/plugins/schemas/manifest.schema.json",
   "title": "Microsoft Graph",
@@ -24,68 +23,48 @@
         "encrypted": true
       }
     },
-    "customTesting": true
+    "customTesting": true,
+    "hideSave": true
   },
   "defaults": {
-      "username": {
-        "value": ""
-      },
-      "account": {
-        "value": ""
-      },
-      "password": {
-        "value": ""
-      },
-      "database": {
-        "value": ""
-      },
-      "schema": {
-        "value": ""
-      },
-      "warehouse": {
-        "value": ""
-      },
-      "role": {
-        "value": ""
-      },
-      "client_id": {
-          "value": ""
-      },
-      "client_secret": {
-        "value": ""
-      },
-      "tenant_id": {
-        "value": ""
-      },
-      "access_token_url": {
-        "value": "https://login.microsoftonline.com/{{tenant_id}}/oauth2/v2.0/token"
-      },
-      "redirect_url": {
-          "value": ""
-      },
-      "auth_url": {
-          "value": ""
-      },
-      "allowed_auth_types": {
-          "value": "oauth2"
-      },
-      "auth_type": {
-          "value": "oauth2"
-      },
-      "grant_type": {
-          "value": "authorization_code"
-      },
-      "scopes": {
-          "value": "https://graph.microsoft.com/.default offline_access"
-      },
-      "access_token_custom_headers": {
-        "value": [
-          ["Content-Type", "application/x-www-form-urlencoded"]
-        ]
-      },
-      "oauth_type": {
-        "value": "custom_app"
-      }
+    "client_id": {
+      "value": ""
+    },
+    "client_secret": {
+      "value": ""
+    },
+    "tenant_id": {
+      "value": ""
+    },
+    "access_token_url": {
+      "value": "https://login.microsoftonline.com/{{tenant_id}}/oauth2/v2.0/token"
+    },
+    "redirect_url": {
+      "value": ""
+    },
+    "auth_url": {
+      "value": ""
+    },
+    "allowed_auth_types": {
+      "value": "oauth2"
+    },
+    "auth_type": {
+      "value": "oauth2"
+    },
+    "grant_type": {
+      "value": "authorization_code"
+    },
+    "access_token_custom_headers": {
+      "value": [
+        ["Content-Type","application/x-www-form-urlencoded"]
+      ]
+    },
+    "scopes": {
+        "value": "https://graph.microsoft.com/.default offline_access"
+    },
+    "oauth_type": {
+      "value": "custom_app"
+    }
   },
   "properties": {
     "tenant_id": {
diff --git a/marketplace/plugins/salesforce/lib/manifest.json b/marketplace/plugins/salesforce/lib/manifest.json
index 60074bcace..34cb516375 100644
--- a/marketplace/plugins/salesforce/lib/manifest.json
+++ b/marketplace/plugins/salesforce/lib/manifest.json
@@ -39,7 +39,8 @@
         "type": "string"
       }
     },
-    "customTesting": true
+    "customTesting": true,
+    "hideSave": true
   },
   "defaults": {
     "redirect_url": {
diff --git a/plugins/packages/snowflake/lib/index.ts b/plugins/packages/snowflake/lib/index.ts
index 8f248a187f..e8e62cb2fe 100644
--- a/plugins/packages/snowflake/lib/index.ts
+++ b/plugins/packages/snowflake/lib/index.ts
@@ -154,7 +154,14 @@ export default class Snowflake implements QueryService {
         ['refresh_token', ''],
       ];
     }
-    const oauth_type = source_options.find((item) => item.key === 'oauth_type')?.value;
+
+    const getOptionValue = (key: string) => {
+      if (Array.isArray(source_options)) {
+        return source_options.find((item) => item.key === key)?.value;
+      } else return source_options[key];
+    };
+
+    const oauth_type = getOptionValue('oauth_type');
     let client_id = '';
     let client_secret = '';
 
@@ -162,13 +169,13 @@ export default class Snowflake implements QueryService {
       client_id = process.env.SNOWFLAKE_CLIENT_ID;
       client_secret = process.env.SNOWFLAKE_CLIENT_SECRET;
     } else {
-      client_id = source_options.find((item) => item.key === 'client_id')?.value;
-      client_secret = source_options.find((item) => item.key === 'client_secret')?.value;
+      client_id = getOptionValue('client_id');
+      client_secret = getOptionValue('client_secret');
     }
 
-    const access_token_url = source_options.find((item) => item.key === 'access_token_url')?.value;
-    const client_auth = source_options.find((item) => item.key === 'client_auth')?.value;
-    const custom_auth_params = sanitizeParams(source_options.find((item) => item.key === 'custom_auth_params')?.value);
+    const access_token_url = getOptionValue('access_token_url');
+    const client_auth = getOptionValue('client_auth');
+    const custom_auth_params = sanitizeParams(getOptionValue('custom_auth_params'));
 
     const host = process.env.TOOLJET_HOST;
     const subpath = process.env.SUB_PATH;
@@ -231,7 +238,14 @@ export default class Snowflake implements QueryService {
   ): Promise<any> {
     if (checkCache) {
       const optionsHash = generateSourceOptionsHash(sourceOptions);
-      const enhancedCacheKey = `${dataSourceId}_${optionsHash}`;
+      const userId = context?.user?.id;
+      let enhancedCacheKey = '';
+      if (sourceOptions.multiple_auth_enabled) {
+        enhancedCacheKey = `${dataSourceId}_${userId}_${optionsHash}`;
+      } else {
+        enhancedCacheKey = `${dataSourceId}_${optionsHash}`;
+      }
+
       let connection = await getCachedConnection(enhancedCacheKey, dataSourceUpdatedAt);
 
       if (connection && (await connection.isValidAsync())) {
diff --git a/server/src/modules/data-sources/interfaces/IUtilService.ts b/server/src/modules/data-sources/interfaces/IUtilService.ts
index 4e2df9e4e9..81c76b98ca 100644
--- a/server/src/modules/data-sources/interfaces/IUtilService.ts
+++ b/server/src/modules/data-sources/interfaces/IUtilService.ts
@@ -10,7 +10,12 @@ export interface IDataSourcesUtilService {
 
   parseOptionsForCreate(options: Array<object>, resetSecureData?: boolean, manager?: EntityManager): Promise<any>;
 
-  parseOptionsForUpdate(dataSource: DataSource, options: Array<object>, manager: EntityManager): Promise<any>;
+  parseOptionsForUpdate(
+    dataSource: DataSource,
+    options: Array<object>,
+    manager: EntityManager,
+    userId: string
+  ): Promise<any>;
 
   testConnection(testDataSourceDto: TestDataSourceDto, organization_id: string): Promise<object>;
 
@@ -28,7 +33,11 @@ export interface IDataSourcesUtilService {
     manager?: EntityManager
   ): Promise<void>;
 
-  parseOptionsForOauthDataSource(options: Array<object>, resetSecureData?: boolean): Promise<Array<object>>;
+  parseOptionsForOauthDataSource(
+    options: Array<object>,
+    resetSecureData?: boolean,
+    userId?: string
+  ): Promise<Array<object>>;
 
   resolveConstants(value: string, organizationId: string, environmentId: string, user?: User): Promise<string>;
 
diff --git a/server/src/modules/data-sources/service.ts b/server/src/modules/data-sources/service.ts
index 098135c86e..a54c2194cd 100644
--- a/server/src/modules/data-sources/service.ts
+++ b/server/src/modules/data-sources/service.ts
@@ -1,4 +1,4 @@
-import { BadRequestException, ForbiddenException, Injectable, UnauthorizedException } from '@nestjs/common';
+import { BadRequestException, Injectable, UnauthorizedException } from '@nestjs/common';
 import { DataSourcesRepository } from './repository';
 import { DataSourcesUtilService } from './util.service';
 import { User } from '@entities/user.entity';
@@ -148,7 +148,7 @@ export class DataSourcesService implements IDataSourcesService {
     const { name, options } = updateDataSourceDto;
     const { dataSourceId, environmentId } = updateOptions;
 
-    await this.dataSourcesUtilService.update(dataSourceId, user.organizationId, name, options, environmentId);
+    await this.dataSourcesUtilService.update(dataSourceId, user.organizationId, user.id, name, options, environmentId);
 
     // Setting data for audit logs
     RequestContext.setLocals(AUDIT_LOGS_REQUEST_CONTEXT_KEY, {
diff --git a/server/src/modules/data-sources/util.service.ts b/server/src/modules/data-sources/util.service.ts
index 07b06f0ebe..6cfbeb693e 100644
--- a/server/src/modules/data-sources/util.service.ts
+++ b/server/src/modules/data-sources/util.service.ts
@@ -135,7 +135,7 @@ export class DataSourcesUtilService implements IDataSourcesUtilService {
     }, manager);
   }
 
-  async parseOptionsForOauthDataSource(options: Array<object>, resetSecureData = false) {
+  async parseOptionsForOauthDataSource(options: Array<object>, resetSecureData = false, userId?: string) {
     const findOption = (opts: any[], key: string) => opts.find((opt) => opt['key'] === key);
 
     if (findOption(options, 'oauth2') && findOption(options, 'code')) {
@@ -158,13 +158,32 @@ export class DataSourcesUtilService implements IDataSourcesUtilService {
       }
       const accessDetails = await accessDetailsPromise;
 
-      for (const row of accessDetails) {
-        const option = {};
-        option['key'] = row[0];
-        option['value'] = row[1];
-        option['encrypted'] = true;
+      const isMultiAuthEnabled = findOption(options, 'multiple_auth_enabled')?.['value'];
+      if (isMultiAuthEnabled) {
+        const newTokenDataObj = { user_id: userId };
+        for (const [key, value] of accessDetails) {
+          newTokenDataObj[key] = value;
+        }
+        const existingTokenArray = findOption(options, 'token_data')?.['value'];
 
-        options.push(option);
+        const updatedTokenData = this.getCurrentToken(isMultiAuthEnabled, existingTokenArray, newTokenDataObj, userId);
+        options = options.filter((option) => !['provider', 'code', 'oauth2'].includes(option['key']));
+
+        options.push({
+          key: 'tokenData',
+          value: updatedTokenData,
+          encrypted: false,
+        });
+        return options;
+      } else {
+        for (const row of accessDetails) {
+          const option = {};
+          option['key'] = row[0];
+          option['value'] = row[1];
+          option['encrypted'] = true;
+
+          options.push(option);
+        }
       }
 
       options = options.filter((option) => !['provider', 'code', 'oauth2'].includes(option['key']));
@@ -176,6 +195,7 @@ export class DataSourcesUtilService implements IDataSourcesUtilService {
   async update(
     dataSourceId: string,
     organizationId: string,
+    userId: string,
     name: string,
     options: Array<object>,
     environmentId?: string
@@ -206,7 +226,7 @@ export class DataSourcesUtilService implements IDataSourcesUtilService {
             await this.appEnvironmentUtilService.getOptions(dataSourceId, organizationId, envToUpdate.id)
           ).options;
 
-          const newOptions = await this.parseOptionsForUpdate(dataSource, options, manager);
+          const newOptions = await this.parseOptionsForUpdate(dataSource, options, manager, userId);
           await this.appEnvironmentUtilService.updateOptions(newOptions, envToUpdate.id, dataSource.id, manager);
         } else {
           const allEnvs = await this.appEnvironmentUtilService.getAll(organizationId);
@@ -219,8 +239,7 @@ export class DataSourcesUtilService implements IDataSourcesUtilService {
             dataSource.options = (
               await this.appEnvironmentUtilService.getOptions(dataSourceId, organizationId, env.id)
             ).options;
-            const newOptions = await this.parseOptionsForUpdate(dataSource, options, manager);
-
+            const newOptions = await this.parseOptionsForUpdate(dataSource, options, manager, userId);
             await this.appEnvironmentUtilService.updateOptions(newOptions, env.id, dataSource.id, manager);
           }
         }
@@ -255,7 +274,7 @@ export class DataSourcesUtilService implements IDataSourcesUtilService {
     return decryptedOptions;
   }
 
-  async parseOptionsForUpdate(dataSource: DataSource, options: Array<object>, manager: EntityManager) {
+  async parseOptionsForUpdate(dataSource: DataSource, options: Array<object>, manager: EntityManager, userId?: string) {
     if (!options) return {};
 
     const resolvedOptions = [];
@@ -273,7 +292,7 @@ export class DataSourcesUtilService implements IDataSourcesUtilService {
       }
     }
 
-    const optionsWithOauth = await this.parseOptionsForOauthDataSource(resolvedOptions);
+    const optionsWithOauth = await this.parseOptionsForOauthDataSource(resolvedOptions, false, userId);
     const parsedOptions = {};
 
     if (dataSource?.options) {
@@ -517,6 +536,7 @@ export class DataSourcesUtilService implements IDataSourcesUtilService {
     return result;
   }
 
+  /* Handle auth flow starting from Querymanager */
   async authorizeOauth2(
     dataSource: DataSource,
     code: string,
@@ -527,32 +547,37 @@ export class DataSourcesUtilService implements IDataSourcesUtilService {
     const sourceOptions = await this.parseSourceOptions(dataSource.options, organizationId, environmentId);
     let tokenOptions: any;
     const isMultiAuthEnabled = dataSource.options['multiple_auth_enabled']?.value;
-    // Auth flow starts from datasource config page
     if (
-      !isMultiAuthEnabled &&
       ['googlesheets', 'slack', 'zendesk', 'salesforce', 'googlecalendar', 'snowflake', 'microsoft_graph'].includes(
         dataSource.kind
       )
     ) {
-      tokenOptions = await this.fetchAPITokenFromPlugins(dataSource, code, sourceOptions);
-    }
-    // Auth flow starts in query manager
-    else {
-      let newToken = {};
-
-      // Datasources using third party library for token generation
-      if (['salesforce'].includes(dataSource.kind)) {
-        const queryService = await this.pluginsServiceSelector.getService(dataSource.pluginId, dataSource.kind);
-        const accessDetails = await queryService.accessDetailsFrom(code, sourceOptions);
-        for (const [key, value] of accessDetails) {
-          newToken[key] = value;
-        }
-        if (isMultiAuthEnabled) {
-          newToken['user_id'] = userId;
-        }
+      const newTokenData = await this.fetchAPITokenFromPlugins(
+        dataSource,
+        code,
+        sourceOptions,
+        isMultiAuthEnabled,
+        userId
+      );
+      if (isMultiAuthEnabled) {
+        const updatedTokenData = this.getCurrentToken(
+          isMultiAuthEnabled,
+          dataSource.options['tokenData']?.value,
+          newTokenData,
+          userId
+        );
+        tokenOptions = [
+          {
+            key: 'tokenData',
+            value: updatedTokenData,
+            encrypted: false,
+          },
+        ];
       } else {
-        newToken = await this.fetchOAuthToken(sourceOptions, code, userId, isMultiAuthEnabled, dataSource);
+        tokenOptions = newTokenData;
       }
+    } else {
+      const newToken = await this.fetchOAuthToken(sourceOptions, code, userId, isMultiAuthEnabled, dataSource);
       const tokenData = this.getCurrentToken(
         isMultiAuthEnabled,
         dataSource.options['tokenData']?.value,
@@ -736,19 +761,35 @@ export class DataSourcesUtilService implements IDataSourcesUtilService {
     return JSON.stringify(errorObj);
   }
 
-  /* this function only for getting auth token for googlesheets and related plugins*/
-  async fetchAPITokenFromPlugins(dataSource: DataSource, code: string, sourceOptions: any) {
+  /* This function fetches auth token only for OAuth plugins */
+  async fetchAPITokenFromPlugins(
+    dataSource: DataSource,
+    code: string,
+    sourceOptions: any,
+    isMultiAuthEnabled: boolean,
+    userId: string
+  ) {
     const queryService = await this.pluginsServiceSelector.getService(dataSource.pluginId, dataSource.kind);
     const accessDetails = await queryService.accessDetailsFrom(code, sourceOptions);
     const options = [];
-    for (const row of accessDetails) {
-      const option = {};
-      option['key'] = row[0];
-      option['value'] = row[1];
-      option['encrypted'] = true;
-      options.push(option);
+
+    if (isMultiAuthEnabled) {
+      const tokenObject = { user_id: userId };
+      for (const [key, value] of accessDetails) {
+        tokenObject[key] = value;
+      }
+      return tokenObject;
+    } else {
+      for (const row of accessDetails) {
+        const option = {};
+        option['key'] = row[0];
+        option['value'] = row[1];
+        option['encrypted'] = true;
+
+        options.push(option);
+      }
+      return options;
     }
-    return options;
   }
 
   async parseSourceOptions(options: any, organizationId: string, environmentId: string, user?: User): Promise<object> {

From 6cff6693a82ab2056af189bc8f6896f6a595d2bc Mon Sep 17 00:00:00 2001
From: Yukti Goyal <yuktigoyal02@gmail.com>
Date: Wed, 22 Oct 2025 21:26:47 +0530
Subject: [PATCH 105/157] fixed review comments

---
 .../commands/platform/platformApiCommands.js  | 29 +++++++++++++++
 .../cypress/constants/selectors/dashboard.js  |  5 ---
 .../commonTestcases/workspace/dashboard.cy.js | 36 +++++++++----------
 .../workspace/homePageDashboard.cy.js         | 34 +++++++++---------
 4 files changed, 61 insertions(+), 43 deletions(-)

diff --git a/cypress-tests/cypress/commands/platform/platformApiCommands.js b/cypress-tests/cypress/commands/platform/platformApiCommands.js
index b600db4d99..ca90b0bf2c 100644
--- a/cypress-tests/cypress/commands/platform/platformApiCommands.js
+++ b/cypress-tests/cypress/commands/platform/platformApiCommands.js
@@ -189,6 +189,35 @@ Cypress.Commands.add("apiGetGroupId", (groupName) => {
         });
     });
 });
+Cypress.Commands.add("apiUpdateUserRole", (email, role) => {
+    return cy.task("dbConnection", {
+        dbconfig: Cypress.env("app_db"),
+        sql: `
+      SELECT id 
+      FROM users
+      WHERE email='${email}'
+      LIMIT 1;
+    `,
+    }).then((resp) => {
+        const userId = resp.rows[0]?.id;
+        if (!userId) throw new Error(`User with email ${email} not found`);
+        return userId;
+    }).then((userId) => {
+        return cy.getAuthHeaders().then((headers) => {
+            return cy.request({
+                method: "PUT",
+                url: `${Cypress.env("server_host")}/api/v2/group-permissions/role/user`,
+                headers: headers,
+                body: {
+                    newRole: role,
+                    userId: userId,
+                },
+            }).then((response) => {
+                expect(response.status).to.equal(200);
+            });
+        });
+    });
+});
 
 Cypress.Commands.add(
     "apiCreateGranularPermission",
diff --git a/cypress-tests/cypress/constants/selectors/dashboard.js b/cypress-tests/cypress/constants/selectors/dashboard.js
index d98da7d2f2..a7e8f1a817 100644
--- a/cypress-tests/cypress/constants/selectors/dashboard.js
+++ b/cypress-tests/cypress/constants/selectors/dashboard.js
@@ -72,11 +72,6 @@ export const dashboardSelector = {
   homePagePromptTextArea: '[data-cy="prompt-textarea"]',
   promptEnterButton: '[data-cy="prompt-enter-button"]',
   aiIcon: '[data-cy="ai-icon"]',
-  homePageAppIcon: '[data-cy="apps-icon"]',
-  homePageDatasourceIcon: '[data-cy="datasources-icon"]',
-  homePageWorkflowIcon: '[data-cy="workflows-icon"]',
-  homePageTemplateIcon: '[data-cy="templates-icon"]',
-
   homePageIcon: (iconName) => {
     return `[data-cy="${iconName}s-icon"]`;
   }
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/dashboard.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/dashboard.cy.js
index 798729ec48..6460707e3c 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/dashboard.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/dashboard.cy.js
@@ -31,21 +31,17 @@ describe("dashboard", () => {
       folderName: `${fake.companyName.toLowerCase()}-folder`,
       cloneAppName: `cloned-${fake.companyName}-App`,
       updatedFolderName: `new-${fake.companyName.toLowerCase()}-folder`,
-      workspaceName: fake.firstName,
-      workspaceSlug: fake.firstName.toLowerCase().replaceAll("[^A-Za-z]", ""),
     };
     cy.intercept("GET", "/api/library_apps").as("appLibrary");
     cy.intercept("DELETE", "/api/folders/*").as("folderDeleted");
-    cy.skipWalkthrough();
-
     cy.apiLogin();
-    cy.apiCreateWorkspace(data.workspaceName, data.workspaceSlug);
-    cy.apiLogout();
-    cy.apiLogin();
-    cy.visit(`${data.workspaceSlug}`);
   });
 
   it("should verify the elements on empty dashboard", () => {
+    cy.intercept("GET", "/api/apps*", {
+      fixture: 'intercept/emptyDashboard.json'
+    }).as("dashboardPage");
+
     cy.intercept("GET", "/api/metadata", {
       body: {
         installed_version: "2.9.2",
@@ -53,13 +49,13 @@ describe("dashboard", () => {
       },
     }).as("version");
 
+    cy.visit("/");
 
     cy.get(commonSelectors.workspaceName).verifyVisibleElement(
       "have.text",
-      data.workspaceName
+      "My workspace"
     );
-    cy.get(commonSelectors.workspaceName).click();
-    // cy.get(commonSelectors.editRectangleIcon).should("be.visible");
+
     cy.get(commonSelectors.appCreateButton).verifyVisibleElement(
       "have.text",
       "Create an app"
@@ -185,12 +181,11 @@ describe("dashboard", () => {
       desktop: { top: 100, left: 20 },
       mobile: { width: 8, height: 50 },
     };
-
+    cy.visit("/");
     cy.apiCreateApp(data.appName);
-    cy.visit(`${data.workspaceSlug}`);
 
-    cy.ifEnv(["Enterprise", "Cloud"], () => { cy.get('.basic-plan-migration-banner').invoke('css', 'display', 'none') });
-    cy.wait(2000);
+    // cy.ifEnv(["Enterprise", "Cloud"], () => { cy.get('.basic-plan-migration-banner').invoke('css', 'display', 'none') });
+    // cy.wait(2000);
     cy.get(commonSelectors.appCreationDetails).should("be.visible");
     cy.get(commonSelectors.appCard(data.appName)).should("be.visible");
     cy.get(commonSelectors.appTitle(data.appName)).verifyVisibleElement(
@@ -354,7 +349,7 @@ describe("dashboard", () => {
       desktop: { top: 100, left: 20 },
       mobile: { width: 8, height: 50 },
     };
-
+    cy.visit("/");
     cy.createApp(data.appName);
     cy.apiAddComponentToApp(data.appName, "text1", customLayout);
 
@@ -366,11 +361,11 @@ describe("dashboard", () => {
     );
 
     navigateToAppEditor(data.appName);
-    // cy.get(commonSelectors.canvas).should("contain", "text1");
     cy.get(".text-widget-section > div").should("be.visible");
     cy.backToApps();
     cy.wait("@appLibrary");
-
+    cy.ifEnv(["Enterprise", "Cloud"], () => { cy.get('.basic-plan-migration-banner').invoke('css', 'display', 'none') });
+    cy.wait(2000);
     cy.deleteApp(data.appName);
 
     cy.get(commonSelectors.appCard(data.appName)).should("not.exist");
@@ -381,7 +376,7 @@ describe("dashboard", () => {
       desktop: { top: 100, left: 20 },
       mobile: { width: 8, height: 50 },
     };
-
+    cy.visit("/");
     cy.createApp(data.appName);
     cy.apiAddComponentToApp(data.appName, "text1", customLayout);
     cy.backToApps();
@@ -490,7 +485,8 @@ describe("dashboard", () => {
     cy.get(dashboardSelector.folderName(data.updatedFolderName)).should(
       "not.exist"
     );
-
+    cy.ifEnv(["Enterprise", "Cloud"], () => { cy.get('.basic-plan-migration-banner').invoke('css', 'display', 'none') });
+    cy.wait(2000);
     cy.get(commonSelectors.allApplicationsLink).click();
     cy.deleteApp(data.appName);
 
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/homePageDashboard.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/homePageDashboard.cy.js
index 332656ae08..df21fe048d 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/homePageDashboard.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/homePageDashboard.cy.js
@@ -3,12 +3,11 @@ import { commonSelectors } from "Selectors/common";
 import { dashboardSelector } from "Selectors/dashboard";
 import { commonText } from "Texts/common";
 import { dashboardText } from "Texts/dashboard";
-import { inviteUserToWorkspace } from "Support/utils/manageUsers";
-import { logout } from "Support/utils/common";
-import { setupAndUpdateRole } from "Support/utils/manageGroups";
 
 describe("Home Page Dashboard Testcases", () => {
     let data = {};
+    const isEnterprise = Cypress.env("environment") === "Enterprise";
+
     before(function () {
         if (Cypress.env("environment") === "Community") {
             this.skip();
@@ -17,20 +16,12 @@ describe("Home Page Dashboard Testcases", () => {
     beforeEach(() => {
 
         data = {
-            workspaceName: fake.firstName,
-            workspaceSlug: fake.firstName.toLowerCase().replaceAll("[^A-Za-z]", ""),
             firstName: fake.firstName,
             email: fake.email.toLowerCase().replaceAll("[^A-Za-z]", ""),
         };
         cy.intercept("GET", "/api/library_apps").as("appLibrary");
-        cy.skipWalkthrough();
-
         cy.apiLogin();
-        cy.apiCreateWorkspace(data.workspaceName, data.workspaceSlug);
-        cy.apiLogout();
-        cy.apiLogin();
-        cy.visit(`${data.workspaceSlug}`);
-
+        cy.visit("/");
     });
 
     it("Should verify elements on home page dashboard", () => {
@@ -64,7 +55,7 @@ describe("Home Page Dashboard Testcases", () => {
 
         // Define card types
         const cardTypes = [
-            { type: 'app', title: dashboardText.appCardTitle, description: dashboardText.appCardDescription, url: `${data.workspaceSlug}` },
+            { type: 'app', title: dashboardText.appCardTitle, description: dashboardText.appCardDescription, url: "my-workspace" },
             { type: 'datasource', title: dashboardText.datasourceCardTitle, description: dashboardText.datasourceCardDescription, url: 'data-sources' },
             { type: 'workflow', title: dashboardText.workflowCardTitle, description: dashboardText.workflowCardDescription, url: 'workflows' },
             { type: 'template', title: dashboardText.templateCardTitle, description: dashboardText.templateCardDescription, url: '#' }
@@ -100,15 +91,22 @@ describe("Home Page Dashboard Testcases", () => {
 
     it("Should verify Home page accessibility for the specific role", () => {
         //Invite End-user
-        inviteUserToWorkspace(data.firstName, data.email);
+        cy.apiFullUserOnboarding(data.firstName, data.email);
+        cy.apiLogout();
+
+        cy.apiLogin(data.email);
+        cy.visit("/");
         cy.get(commonSelectors.homePageIcon).should("not.exist");
-        logout();
+        cy.apiLogout();
+
         cy.apiLogin();
-        cy.visit(`${data.workspaceSlug}`);
+        cy.visit("/");
 
         //Update role to Builder
-        setupAndUpdateRole("end-user", "builder", data.email);
-        logout();
+        cy.apiUpdateUserRole(data.email, "builder");
+        cy.apiLogout();
+
+        cy.visit("/");
         cy.appUILogin(data.email);
         cy.get(commonSelectors.homePageIcon).should("be.visible");
     });

From ed820aeb7bfc0ddaedd9630f485f8111d023701d Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Thu, 23 Oct 2025 00:28:08 +0530
Subject: [PATCH 106/157] Fix: Exposed variable for page index gets updated
 later and onPageChanged event runs before that in some cases

---
 .../Widgets/NewTable/_components/Footer/Footer.jsx       | 9 +--------
 .../Footer/_components/Pagination/Pagination.jsx         | 7 +------
 .../Footer/_components/Pagination/PaginationInput.jsx    | 3 +--
 .../TableExposedVariables/TableExposedVariables.jsx      | 3 ++-
 4 files changed, 5 insertions(+), 17 deletions(-)

diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/Footer.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/Footer.jsx
index a7d1485f04..7394a69227 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/Footer.jsx
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/Footer.jsx
@@ -86,14 +86,7 @@ export const Footer = memo(
               {editedRows.size > 0 && showBulkUpdateActions ? renderChangeSetUI() : renderRowCount()}
             </div>
             {enablePagination && (
-              <Pagination
-                id={id}
-                tableWidth={width}
-                pageIndex={pageIndex}
-                table={table}
-                pageCount={pageCount}
-                fireEvent={fireEvent}
-              />
+              <Pagination id={id} tableWidth={width} pageIndex={pageIndex} table={table} pageCount={pageCount} />
             )}
             <ControlButtons
               id={id}
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/Pagination.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/Pagination.jsx
index 4c0c4c0c14..a16b00a242 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/Pagination.jsx
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/Pagination.jsx
@@ -6,7 +6,7 @@ import { shallow } from 'zustand/shallow';
 
 // TODO: Need to replace all the default data
 
-export const Pagination = function Pagination({ id, pageIndex = 1, tableWidth, table, pageCount, fireEvent }) {
+export const Pagination = function Pagination({ id, pageIndex = 1, tableWidth, table, pageCount }) {
   const serverSidePagination = useTableStore((state) => state.getTableProperties(id)?.serverSidePagination, shallow);
   const enablePrevButton = useTableStore((state) => state.getTableProperties(id)?.enablePrevButton, shallow);
   const enableNextButton = useTableStore((state) => state.getTableProperties(id)?.enableNextButton, shallow);
@@ -17,12 +17,10 @@ export const Pagination = function Pagination({ id, pageIndex = 1, tableWidth, t
   const showGoToFirstAndLast = !serverSidePagination && tableWidth > 460;
 
   function goToNextPage() {
-    fireEvent('onPageChanged');
     table.nextPage();
   }
 
   function goToPreviousPage() {
-    fireEvent('onPageChanged');
     table.previousPage();
   }
 
@@ -33,7 +31,6 @@ export const Pagination = function Pagination({ id, pageIndex = 1, tableWidth, t
           {showGoToFirstAndLast && (
             <PaginationButton
               onClick={() => {
-                fireEvent('onPageChanged');
                 table.firstPage();
               }}
               disabled={!canGoToPreviousPage}
@@ -57,7 +54,6 @@ export const Pagination = function Pagination({ id, pageIndex = 1, tableWidth, t
           serverSidePagination={serverSidePagination}
           table={table}
           pageCount={pageCount}
-          fireEvent={fireEvent}
         />
 
         <div className="d-flex">
@@ -72,7 +68,6 @@ export const Pagination = function Pagination({ id, pageIndex = 1, tableWidth, t
           {showGoToFirstAndLast && (
             <PaginationButton
               onClick={() => {
-                fireEvent('onPageChanged');
                 table.lastPage();
               }}
               disabled={!canGoToNextPage}
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/PaginationInput.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/PaginationInput.jsx
index 07315f45c7..fa316fd4bc 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/PaginationInput.jsx
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/PaginationInput.jsx
@@ -1,6 +1,6 @@
 import React, { memo, useState, useEffect } from 'react';
 
-export const PaginationInput = memo(({ pageIndex, serverSidePagination, pageCount, table, fireEvent }) => {
+export const PaginationInput = memo(({ pageIndex, serverSidePagination, pageCount, table }) => {
   // Add local state to handle input value
   const [inputValue, setInputValue] = useState(pageIndex);
 
@@ -10,7 +10,6 @@ export const PaginationInput = memo(({ pageIndex, serverSidePagination, pageCoun
   }, [pageIndex]);
 
   function gotoPage(page) {
-    fireEvent('onPageChanged');
     if (!serverSidePagination) {
       table.setPageIndex(page - 1);
     }
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableExposedVariables/TableExposedVariables.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableExposedVariables/TableExposedVariables.jsx
index 513a2ba3c4..c9a729cd93 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableExposedVariables/TableExposedVariables.jsx
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableExposedVariables/TableExposedVariables.jsx
@@ -147,8 +147,9 @@ export const TableExposedVariables = ({
   // Expose page index
   useEffect(() => {
     setExposedVariables({ pageIndex });
+    fireEvent('onPageChanged');
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pageIndex, setExposedVariables]); // Didn't add mounted as it's not a dependency
+  }, [pageIndex, setExposedVariables, fireEvent]); // Didn't add mounted as it's not a dependency
 
   // Expose sort applied
   useEffect(() => {

From 6675b4ccd03e4bf6663ad735c5f2b8fb1f781780 Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Thu, 23 Oct 2025 00:31:01 +0530
Subject: [PATCH 107/157] version bump

---
 .version          | 2 +-
 frontend/.version | 2 +-
 server/.version   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.version b/.version
index d7ea6305e8..225bb985fb 100644
--- a/.version
+++ b/.version
@@ -1 +1 @@
-3.20.25-lts
+3.20.26-lts
diff --git a/frontend/.version b/frontend/.version
index d7ea6305e8..225bb985fb 100644
--- a/frontend/.version
+++ b/frontend/.version
@@ -1 +1 @@
-3.20.25-lts
+3.20.26-lts
diff --git a/server/.version b/server/.version
index d7ea6305e8..225bb985fb 100644
--- a/server/.version
+++ b/server/.version
@@ -1 +1 @@
-3.20.25-lts
+3.20.26-lts

From cb4efa4367d976106641e854d5a5d6882ab31566 Mon Sep 17 00:00:00 2001
From: Ganesh Kumar <ganesh8056234@gmail.com>
Date: Thu, 23 Oct 2025 12:11:07 +0530
Subject: [PATCH 108/157] added optional chaining for client authentication
 variable

---
 server/src/modules/data-sources/util.service.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/src/modules/data-sources/util.service.ts b/server/src/modules/data-sources/util.service.ts
index 6cfbeb693e..e1bd307c4f 100644
--- a/server/src/modules/data-sources/util.service.ts
+++ b/server/src/modules/data-sources/util.service.ts
@@ -716,7 +716,7 @@ export class DataSourcesUtilService implements IDataSourcesUtilService {
     };
 
     let bodyData;
-    if (sourceOptions.client_auth.toLowerCase() === 'header') {
+    if (sourceOptions.client_auth?.toLowerCase() === 'header') {
       const credentials = Buffer.from(`${sourceOptions['client_id']}:${sourceOptions['client_secret']}`).toString(
         'base64'
       );

From d9b5e267a16c732f381eaec9d8eff670fc1db4d2 Mon Sep 17 00:00:00 2001
From: Yukti Goyal <yuktigoyal02@gmail.com>
Date: Thu, 23 Oct 2025 12:25:39 +0530
Subject: [PATCH 109/157] resolved conflict

---
 cypress-tests/cypress/constants/selectors/common.js           | 2 +-
 .../platform/commonTestcases/workspace/dashboard.cy.js        | 2 +-
 .../commonTestcases/workspace/homePageDashboard.cy.js         | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/cypress-tests/cypress/constants/selectors/common.js b/cypress-tests/cypress/constants/selectors/common.js
index 57862218b6..75399fdb04 100644
--- a/cypress-tests/cypress/constants/selectors/common.js
+++ b/cypress-tests/cypress/constants/selectors/common.js
@@ -178,7 +178,7 @@ export const commonSelectors = {
   resetPasswordPageDescription: '[data-cy="reset-password-page-description"]',
   backToLoginButton: '[data-cy="back-to-login"]',
   // breadcrumbTitle: '[data-cy="app-header-label"]>>',
-  breadcrumbTitle: '[data-cy="breadcrumb-header-applications"]>>',
+  breadcrumbHeaderTitle: '[data-cy="breadcrumb-header-applications"]>>',
   // breadcrumbPageTitle: '[data-cy="app-header-label"]',
   breadcrumbPageTitle: '[data-cy="breadcrumb-page-title"]',
   labelFullNameInput: '[data-cy="name-label"]',
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/dashboard.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/dashboard.cy.js
index 6460707e3c..45135ebbc9 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/dashboard.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/dashboard.cy.js
@@ -124,7 +124,7 @@ describe("dashboard", () => {
       commonText.logoutLink
     );
 
-    cy.get(commonSelectors.breadcrumbTitle).should(($el) => {
+    cy.get(commonSelectors.breadcrumbHeaderTitle).should(($el) => {
       expect($el.contents().first().text().trim()).to.eq(
         commonText.breadcrumbApplications
       );
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/homePageDashboard.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/homePageDashboard.cy.js
index df21fe048d..b0ab5624e6 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/homePageDashboard.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/homePageDashboard.cy.js
@@ -27,7 +27,7 @@ describe("Home Page Dashboard Testcases", () => {
     it("Should verify elements on home page dashboard", () => {
 
         cy.get(commonSelectors.homePageIcon).click();
-        cy.get(commonSelectors.breadcrumbTitle).should(($el) => {
+        cy.get(commonSelectors.breadcrumbHeaderTitle).should(($el) => {
             expect($el.contents().first().text().trim()).to.eq(
                 commonText.breadcrumbHome
             );
@@ -106,8 +106,8 @@ describe("Home Page Dashboard Testcases", () => {
         cy.apiUpdateUserRole(data.email, "builder");
         cy.apiLogout();
 
+        cy.apiLogin(data.email);
         cy.visit("/");
-        cy.appUILogin(data.email);
         cy.get(commonSelectors.homePageIcon).should("be.visible");
     });
 });

From 018af473e70e85f0b149b58ff84b79da087ebfc1 Mon Sep 17 00:00:00 2001
From: adishM98 Bot <adish.madhu@gmail.com>
Date: Thu, 23 Oct 2025 14:30:33 +0530
Subject: [PATCH 110/157] Update URLs and descriptions in workflow files for
 clarity and consistency

---
 .github/workflows/cloud-frontend-gcp.yml  |  4 +-
 .github/workflows/cloud-frontend.yml      |  4 +-
 .github/workflows/deploy-to-stage.yml     | 61 ++++++++++++++++----
 .github/workflows/manual-docker-build.yml |  9 +--
 .github/workflows/update-test-system.yml  | 69 ++++++++++++-----------
 5 files changed, 95 insertions(+), 52 deletions(-)

diff --git a/.github/workflows/cloud-frontend-gcp.yml b/.github/workflows/cloud-frontend-gcp.yml
index a2133a762f..fceb991dff 100644
--- a/.github/workflows/cloud-frontend-gcp.yml
+++ b/.github/workflows/cloud-frontend-gcp.yml
@@ -119,7 +119,7 @@ jobs:
           TJDB_SQL_MODE_DISABLE: ${{ secrets.CLOUD_TJDB_SQL_MODE_DISABLE }}
           TOOLJET_SERVER_URL: ${{ secrets.CLOUD_TOOLJET_SERVER_URL }}
           TOOLJET_EDITION: cloud
-          WEBSITE_SIGNUP_URL: https://website-stage.tooljet.ai/ai-create-account
+          WEBSITE_SIGNUP_URL: https://website-stage.tooljet.ai/signup
 
       - name: 🚀 Deploy to Netlify
         run: |
@@ -138,5 +138,5 @@ jobs:
           SERVER_IP: ${{ secrets.CLOUD_SERVER_IP }}
           TJDB_SQL_MODE_DISABLE: ${{ secrets.CLOUD_TJDB_SQL_MODE_DISABLE }}
           TOOLJET_SERVER_URL: ${{ secrets.CLOUD_TOOLJET_SERVER_URL }}
-          WEBSITE_SIGNUP_URL: https://website-stage.tooljet.ai/ai-create-account
+          WEBSITE_SIGNUP_URL: https://website-stage.tooljet.ai/signup
           TOOLJET_EDITION: cloud
diff --git a/.github/workflows/cloud-frontend.yml b/.github/workflows/cloud-frontend.yml
index 067761700f..c40c12e4fd 100644
--- a/.github/workflows/cloud-frontend.yml
+++ b/.github/workflows/cloud-frontend.yml
@@ -123,7 +123,7 @@ jobs:
 
       - name: 🚀 Deploy to Netlify
         run: |
-          npm install -g netlify-cli@17.10.1
+          npm install -g netlify-cli
           netlify deploy --prod --dir=frontend/build --auth=$NETLIFY_AUTH_TOKEN --site=${{ secrets.CLOUD_PROD_NETLIFY_SITE_ID }}
         working-directory: repo
         env:
@@ -138,5 +138,5 @@ jobs:
           SERVER_IP: ${{ secrets.CLOUD_PROD_CLOUD_SERVER_IP }}
           TJDB_SQL_MODE_DISABLE: ${{ secrets.CLOUD_PROD_TJDB_SQL_MODE_DISABLE }}
           TOOLJET_SERVER_URL: ${{ secrets.CLOUD_PROD_TOOLJET_SERVER_URL }}
-          WEBSITE_SIGNUP_URL: https://tooljet.ai/ai-create-account
+          WEBSITE_SIGNUP_URL: https://www.tooljet.ai/create-account
           TOOLJET_EDITION: cloud
diff --git a/.github/workflows/deploy-to-stage.yml b/.github/workflows/deploy-to-stage.yml
index 99b9f930a7..c0354e5531 100644
--- a/.github/workflows/deploy-to-stage.yml
+++ b/.github/workflows/deploy-to-stage.yml
@@ -4,18 +4,18 @@ on:
   workflow_dispatch:
     inputs:
       branch_name:
-        description: 'Git branch to build from'
+        description: "Git branch to build from"
         required: true
-        default: 'main'
+        default: "lts-3.16"
       dockerfile_path:
-        description: 'Path to Dockerfile'
+        description: "Path to Dockerfile"
         required: true
-        default: './docker/LTS/cloud/cloud-server.Dockerfile'
+        default: "./docker/LTS/cloud/cloud-server.Dockerfile"
         type: choice
         options:
           - ./docker/LTS/cloud/cloud-server.Dockerfile
       docker_tag:
-        description: 'Docker tag suffix (e.g., cloud-staging-v14)'
+        description: "Docker tag suffix (e.g., cloud-staging-v14)"
         required: true
 
 jobs:
@@ -82,7 +82,7 @@ jobs:
             BRANCH_NAME=${{ github.event.inputs.branch_name }}
 
       - name: Show the full Docker tag
-        run: | 
+        run: |
           echo "✅ Docker image tagged as: $IMAGE_TAG"
 
       # Deploy to AKS
@@ -144,6 +144,7 @@ jobs:
       - name: 📥 Manual Git checkout with submodules
         run: |
           set -e
+
           BRANCH="${{ github.event.inputs.branch_name }}"
           REPO="https://x-access-token:${{ secrets.CUSTOM_GITHUB_TOKEN }}@github.com/${{ github.repository }}"
 
@@ -155,6 +156,11 @@ jobs:
           git clone --recurse-submodules --depth=1 --branch "$BRANCH" "$REPO" repo
           cd repo
 
+          echo "🔎 Main repo: verifying checkout"
+          MAIN_CURRENT=$(git rev-parse --abbrev-ref HEAD)
+          echo "✅ Main repo: successfully checked out branch $MAIN_CURRENT"
+          echo "📍 Main repo: current commit $(git rev-parse --short HEAD): $(git log -1 --pretty=%s)"
+
           echo "🔁 Updating submodules"
           git submodule update --init --recursive
 
@@ -162,13 +168,44 @@ jobs:
 
           BRANCH="$BRANCH" git submodule foreach --recursive bash -c '
             name="$sm_path"
-            echo "↪ $name: checking out branch $BRANCH"
+            echo ""
+            echo "Entering '\''$name'\''"
+            echo "↪ $name: trying to checkout branch '\''$BRANCH'\''"
+
             if git ls-remote --exit-code --heads origin "$BRANCH" >/dev/null; then
-              git fetch origin "$BRANCH:$BRANCH"
-              git checkout "$BRANCH"
+              git fetch origin "$BRANCH:$BRANCH" || {
+                echo "❌ $name: fetch failed for $BRANCH"
+                exit 1
+              }
+
+              PREV=$(git rev-parse --short HEAD || echo "unknown")
+              git checkout "$BRANCH" || {
+                echo "❌ $name: checkout failed for $BRANCH"
+                exit 1
+              }
+
+              echo "Previous HEAD position was $PREV: $(git log -1 --pretty=%s || echo 'unknown')"
+              echo "✅ $name: checked out branch $BRANCH"
             else
-              echo "⚠️ Branch not found, falling back to main"
-              git checkout main && git pull origin main
+              echo "⚠️ $name: branch '$BRANCH' not found on origin. Falling back to 'lts-3.16'"
+              PREV=$(git rev-parse --short HEAD || echo "unknown")
+              git fetch origin lts-3.16:lts-3.16 || {
+                echo "❌ $name: fetch failed for lts-3.16"
+                exit 1
+              }
+              git checkout lts-3.16 || {
+                echo "❌ $name: fallback to lts-3.16 failed"
+                exit 1
+              }
+              echo "Previous HEAD position was $PREV: $(git log -1 --pretty=%s || echo 'unknown')"
+              echo "✅ $name: now on branch lts-3.16"
+            fi
+
+            CURRENT=$(git rev-parse --abbrev-ref HEAD)
+            echo "🔎 $name: current branch = $CURRENT"
+            if [ "$CURRENT" != "$BRANCH" ] && [ "$CURRENT" != "lts-3.16" ]; then
+              echo "❌ $name: unexpected branch state — wanted '$BRANCH' or fallback 'lts-3.16', got '$CURRENT'"
+              exit 1
             fi
           '
 
@@ -181,7 +218,7 @@ jobs:
         run: npm install
         working-directory: repo
 
-      - name: 🛠️ Build project
+      - name: 🛠️ Build the project
         run: npm run build:plugins:prod && npm run build:frontend
         working-directory: repo
         env:
diff --git a/.github/workflows/manual-docker-build.yml b/.github/workflows/manual-docker-build.yml
index c2d8251318..960f970dfe 100644
--- a/.github/workflows/manual-docker-build.yml
+++ b/.github/workflows/manual-docker-build.yml
@@ -4,18 +4,19 @@ on:
   workflow_dispatch:
     inputs:
       branch_name:
-        description: 'Git branch to build from'
+        description: "Git branch to build from"
         required: true
-        default: 'main'
+        default: "main"
       dockerfile_path:
-        description: 'Path to Dockerfile'
+        description: "Path to Dockerfile"
         required: true
         type: choice
         options:
           - ./docker/LTS/ee/ee-production.Dockerfile
           - ./docker/pre-release/ee/ee-production.Dockerfile
+          - ./docker/LTS/cloud/cloud-server.Dockerfile
       docker_tag:
-        description: 'Docker tag suffix (e.g., pre-release-14)'
+        description: "Docker tag suffix (e.g., pre-release-14)"
         required: true
 
 jobs:
diff --git a/.github/workflows/update-test-system.yml b/.github/workflows/update-test-system.yml
index 81b8305f3c..cb95b20403 100644
--- a/.github/workflows/update-test-system.yml
+++ b/.github/workflows/update-test-system.yml
@@ -4,21 +4,21 @@ on:
   workflow_dispatch:
     inputs:
       branch_name:
-        description: 'Git branch to build from'
+        description: "Git branch to build from"
         required: true
-        default: 'main'
+        default: "main"
       dockerfile_path:
-        description: 'Select Dockerfile'
+        description: "Select Dockerfile"
         required: true
         type: choice
         options:
           - ./docker/LTS/ee/ee-production.Dockerfile
           - ./docker/pre-release/ee/ee-production.Dockerfile
       docker_tag:
-        description: 'Docker tag suffix (e.g., pre-release-14, 3.16-lts, etc.)'
+        description: "Docker tag suffix (e.g., pre-release-14, 3.16-lts, etc.)"
         required: true
       test_system:
-        description: 'Select test system'
+        description: "Select test system"
         required: true
         type: choice
         options:
@@ -52,24 +52,27 @@ jobs:
             "${{ secrets.ALLOWED_USER10_TEST_SYSTEM }}"
             "${{ secrets.ALLOWED_USER11_TEST_SYSTEM }}"
             "${{ secrets.ALLOWED_USER12_TEST_SYSTEM }}"
+            "${{ secrets.ALLOWED_USER13_TEST_SYSTEM }}"
+            "${{ secrets.ALLOWED_USER14_TEST_SYSTEM }}"
           )
-          
+
           current_user="${{ github.actor }}"
           authorized=false
-          
+
           for user in "${allowed_users[@]}"; do
             if [[ "$current_user" == "$user" ]]; then
               authorized=true
               break
             fi
           done
-          
+
           if [[ "$authorized" == "false" ]]; then
             echo "❌ User '$current_user' is not authorized to trigger this workflow."
             exit 1
           else
             echo "✅ User '$current_user' is authorized."
           fi
+
       - name: Checkout code
         uses: actions/checkout@v4
         with:
@@ -94,6 +97,7 @@ jobs:
           else
             echo "tag=tooljet/tj-osv:$input_tag" >> $GITHUB_OUTPUT
           fi
+
       - name: Build and Push Docker image
         uses: docker/build-push-action@v4
         with:
@@ -105,6 +109,7 @@ jobs:
           build-args: |
             CUSTOM_GITHUB_TOKEN=${{ secrets.CUSTOM_GITHUB_TOKEN }}
             BRANCH_NAME=${{ github.event.inputs.branch_name }}
+
       - name: Show the full Docker tag
         run: echo "✅ Docker image built and pushed:${{ steps.taggen.outputs.tag }}"
 
@@ -116,38 +121,39 @@ jobs:
         run: |
           test_system="${{ github.event.inputs.test_system }}"
           vm_host=$(echo '${{ secrets.VM_HOST_MAP_JSON }}' | jq -r --arg sys "$test_system" '.[$sys]')
-          
+
           if [[ -z "$vm_host" || "$vm_host" == "null" ]]; then
             echo "VM mapping not found for $test_system"
             exit 1
           fi
-          
+
           echo "host=$vm_host" >> $GITHUB_OUTPUT
+
       - name: Deploy to target environment
         run: |
           echo "$SSH_KEY" > key.pem
           chmod 600 key.pem
-          
+
           IMAGE_TAG="${{ steps.taggen.outputs.tag }}"
           TARGET_SYSTEM="${{ github.event.inputs.test_system }}"
-          
+
           # Debug: Show what we're deploying
           echo "DEBUG: IMAGE_TAG=$IMAGE_TAG"
           echo "DEBUG: TARGET_SYSTEM=$TARGET_SYSTEM"
-          
+
           ssh -o StrictHostKeyChecking=no -i key.pem $SSH_USER@${{ steps.vmhost.outputs.host }} << EOF
           set -e
-          
+
           IMAGE_TAG="$IMAGE_TAG"
           TARGET_SYSTEM="$TARGET_SYSTEM"
-          
+
           cd ~
           echo "📁 Finding correct deployment directory"
-          
+
           # Debug: Show variables on remote host
           echo "Debug on remote: IMAGE_TAG=\$IMAGE_TAG"
           echo "Debug on remote: TARGET_SYSTEM=\$TARGET_SYSTEM"
-          
+
           if [[ "\$TARGET_SYSTEM" == *-3.16-lts ]]; then
             echo "Detected LTS system: \$TARGET_SYSTEM"
             echo "🔍 Searching for LTS directories..."
@@ -178,39 +184,39 @@ jobs:
             cd ~
             echo "✅ Now in directory: \$(pwd)"
           fi
-          
+
           echo "🔐 Docker login"
           echo "${{ secrets.DOCKER_PASSWORD }}" | sudo docker login --username "${{ secrets.DOCKER_USERNAME }}" --password-stdin
-          
+
           echo "current image"
           cat .env | grep TOOLJET_IMAGE
-          
+
           echo "📦 Reading current TOOLJET_IMAGE from .env"
           CURRENT_IMAGE=\$(grep '^TOOLJET_IMAGE=' .env | cut -d '=' -f2- | tr -d '"' | tr -d "'")
           echo "Found CURRENT_IMAGE: \$CURRENT_IMAGE"
-          
+
           echo "🛑 Stopping containers"
           sudo docker-compose down
-          
+
           echo "📝 Updating .env with new image"
           sudo sed -i "s|^TOOLJET_IMAGE=.*|TOOLJET_IMAGE=\$IMAGE_TAG|" .env
-          
+
           echo "📥 Pulling new image: \$IMAGE_TAG"
           if [ -z "\$IMAGE_TAG" ]; then
             echo "❌ IMAGE_TAG is empty!"
             exit 1
           fi
           sudo docker pull "\$IMAGE_TAG"
-          
+
           echo "🚀 Starting container in background"
           sudo docker-compose up -d
-          
+
           # Wait for ToolJet to start and show success message
           echo "⏳ Waiting for ToolJet to start (timeout: 300 seconds)..."
           SUCCESS_FOUND=false
           TIMEOUT=300
           ELAPSED=0
-          
+
           while [ \$ELAPSED -lt \$TIMEOUT ]; do
             # Check for success message in logs
             if sudo docker-compose logs 2>/dev/null | grep -qE "🚀 TOOLJET APPLICATION STARTED SUCCESSFULLY|Ready to use at http://localhost:82 🚀|Ready to use at http://localhost:80"; then
@@ -223,7 +229,7 @@ jobs:
             sleep 10
             ELAPSED=\$((ELAPSED + 10))
           done
-          
+
           if [ "\$SUCCESS_FOUND" = false ]; then
             echo "❌ Timeout reached without finding success logs"
             echo "📄 Showing current logs for troubleshooting..."
@@ -244,20 +250,19 @@ jobs:
             echo "✅ Rollback completed!"
             exit 1
           fi
-          
+
           echo "✅ Deployment successful!"
-          
+
           echo "📌 Storing successful deployment info in .env"
           sudo sed -i "/^OLD_IMAGE=/d" .env
           echo "OLD_IMAGE=\$CURRENT_IMAGE" | sudo tee -a .env
           echo "📄 Final application logs:"
           sudo docker-compose logs --tail=50
-          
+
           echo "🧹 Pruning old Docker images"
           sudo docker image prune -a -f
-          
+
           EOF
         env:
           SSH_USER: ${{ secrets.AZURE_VM_USER }}
           SSH_KEY: ${{ secrets.AZURE_VM_KEY }}
-          

From d1f62405a4e5a36aa4148657b6b07ea96614f85a Mon Sep 17 00:00:00 2001
From: parthy007 <parthadhikari1812@gmail.com>
Date: Thu, 23 Oct 2025 15:44:51 +0530
Subject: [PATCH 111/157] fix: configure body correctly for token call

fix: add hubspot in querymanager auth flow
---
 plugins/packages/common/lib/oauth.ts            |  6 +++---
 server/src/modules/data-sources/util.service.ts | 13 ++++++++++---
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/plugins/packages/common/lib/oauth.ts b/plugins/packages/common/lib/oauth.ts
index e6ae98e339..c9074f321b 100644
--- a/plugins/packages/common/lib/oauth.ts
+++ b/plugins/packages/common/lib/oauth.ts
@@ -181,11 +181,11 @@ async function getTokenForClientCredentialsGrant(sourceOptions: any) {
   const clientAuth = sourceOptions.client_auth?.toLowerCase();
 
   try {
-    const baseRequestBody = new URLSearchParams({
+    const baseRequestBody = {
       grant_type: sourceOptions.grant_type || 'client_credentials',
       ...(sourceOptions.audience ? { audience: sourceOptions.audience } : {}),
       ...(sourceOptions.scopes ? { scope: sourceOptions.scopes } : {}),
-    });
+    };
 
     const headers = {
       'Content-Type': 'application/x-www-form-urlencoded',
@@ -196,7 +196,7 @@ async function getTokenForClientCredentialsGrant(sourceOptions: any) {
     if (clientAuth === 'header') {
       const credentials = Buffer.from(`${sourceOptions.client_id}:${sourceOptions.client_secret}`).toString('base64');
       headers['Authorization'] = `Basic ${credentials}`;
-      bodyData = baseRequestBody;
+      bodyData = new URLSearchParams(baseRequestBody);
     } else {
       bodyData = {
         ...baseRequestBody,
diff --git a/server/src/modules/data-sources/util.service.ts b/server/src/modules/data-sources/util.service.ts
index e1bd307c4f..b4df1f994d 100644
--- a/server/src/modules/data-sources/util.service.ts
+++ b/server/src/modules/data-sources/util.service.ts
@@ -548,9 +548,16 @@ export class DataSourcesUtilService implements IDataSourcesUtilService {
     let tokenOptions: any;
     const isMultiAuthEnabled = dataSource.options['multiple_auth_enabled']?.value;
     if (
-      ['googlesheets', 'slack', 'zendesk', 'salesforce', 'googlecalendar', 'snowflake', 'microsoft_graph'].includes(
-        dataSource.kind
-      )
+      [
+        'googlesheets',
+        'slack',
+        'zendesk',
+        'salesforce',
+        'googlecalendar',
+        'snowflake',
+        'microsoft_graph',
+        'hubspot',
+      ].includes(dataSource.kind)
     ) {
       const newTokenData = await this.fetchAPITokenFromPlugins(
         dataSource,

From 81cba0f64ba8475457811d234a0effe5077cbe6a Mon Sep 17 00:00:00 2001
From: gsmithun4 <gsmithun4@gmail.com>
Date: Thu, 23 Oct 2025 22:44:33 +0530
Subject: [PATCH 112/157] chore: update version to 3.20.26-lts

---
 .version          | 2 +-
 frontend/.version | 2 +-
 server/.version   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.version b/.version
index d7ea6305e8..225bb985fb 100644
--- a/.version
+++ b/.version
@@ -1 +1 @@
-3.20.25-lts
+3.20.26-lts
diff --git a/frontend/.version b/frontend/.version
index d7ea6305e8..225bb985fb 100644
--- a/frontend/.version
+++ b/frontend/.version
@@ -1 +1 @@
-3.20.25-lts
+3.20.26-lts
diff --git a/server/.version b/server/.version
index d7ea6305e8..225bb985fb 100644
--- a/server/.version
+++ b/server/.version
@@ -1 +1 @@
-3.20.25-lts
+3.20.26-lts

From 8b6b9a5492e918f22f4b8c202aef9e148b009451 Mon Sep 17 00:00:00 2001
From: emidhun <midhun752@gmail.com>
Date: Fri, 24 Oct 2025 12:07:24 +0530
Subject: [PATCH 113/157] test: optimize Cypress configuration for better
 performance

- Disable code coverage to reduce overhead
- Set numTestsKeptInMemory to 0 for better memory management
- Reduce redirectionLimit from 5 to 3
- Enable experimentalMemoryManagement
- Remove deprecated experimentalModfyObstructiveThirdPartyCode
---
 cypress-tests/cypress.config.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/cypress-tests/cypress.config.js b/cypress-tests/cypress.config.js
index 53b86c4c53..f683253b50 100644
--- a/cypress-tests/cypress.config.js
+++ b/cypress-tests/cypress.config.js
@@ -110,18 +110,20 @@ module.exports = defineConfig({
       return config;
     },
     experimentalRunAllSpecs: true,
-    experimentalModfyObstructiveThirdPartyCode: true,
     baseUrl: "http://localhost:8082",
     specPattern: "cypress/e2e/happyPath/**/*.cy.js",
     downloadsFolder: "cypress/downloads",
-    numTestsKeptInMemory: 1,
-    redirectionLimit: 5,
+    numTestsKeptInMemory: 0,
+    redirectionLimit: 3,
     trashAssetsBeforeRuns: true,
     experimentalMemoryManagement: true,
-    coverage: true,
-    codeCoverageTasksRegistered: true,
+    coverage: false,
+    codeCoverageTasksRegistered: false,
     video: false,
     videoUploadOnPasses: false,
-    experimentalStudio: true,
+    // experimentalStudio: true,
+    // experimentalPromptCommand: true,
+
+    // projectId: "ca6324a0-4210-4f7e-846a-71ca2766ca4",
   },
 });

From 19a22e9e98770d615c0d3535205ce7213e86f105 Mon Sep 17 00:00:00 2001
From: emidhun <midhun752@gmail.com>
Date: Fri, 24 Oct 2025 12:07:33 +0530
Subject: [PATCH 114/157] test: improve Cypress custom commands reliability

- Add visibility check and force click to clearAndType command
- Add scrollIntoView to createApp command for better element visibility
- Add workspaceSlug parameter to defaultWorkspaceLogin for flexibility
- Remove unused commented code
---
 cypress-tests/cypress/commands/commands.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/cypress-tests/cypress/commands/commands.js b/cypress-tests/cypress/commands/commands.js
index 6894f12075..d6fddab825 100644
--- a/cypress-tests/cypress/commands/commands.js
+++ b/cypress-tests/cypress/commands/commands.js
@@ -17,7 +17,7 @@ const API_ENDPOINT =
 
 Cypress.Commands.add(
   "appUILogin",
-  (email = "dev@tooljet.io", password = "password") => {
+  (email = "dev@tooljet.io", password = "password", status = 'success', toast = '') => {
     cy.clearAndType(onboardingSelectors.loginEmailInput, email);
     cy.clearAndType(onboardingSelectors.loginPasswordInput, password);
     cy.get(onboardingSelectors.signInButton).click();
@@ -27,7 +27,7 @@ Cypress.Commands.add(
 );
 
 Cypress.Commands.add("clearAndType", (selector, text) => {
-  cy.get(selector).type(`{selectall}{backspace}${text}`);
+  cy.get(selector).should("be.visible", { timeout: 10000 }).click({ force: true }).type(`{selectall}{backspace}${text}`);
 });
 
 Cypress.Commands.add("forceClickOnCanvas", () => {
@@ -66,7 +66,7 @@ Cypress.Commands.add("createApp", (appName) => {
       : commonSelectors.appCreateButton;
 
   cy.get("body").then(($title) => {
-    cy.get(getAppButtonSelector($title)).click();
+    cy.get(getAppButtonSelector($title)).scrollIntoView().click();
     cy.clearAndType('[data-cy="app-name-input"]', appName);
     cy.get('[data-cy="create-app"]').click();
   });
@@ -421,7 +421,7 @@ Cypress.Commands.add("getPosition", (componentName) => {
   );
 });
 
-Cypress.Commands.add("defaultWorkspaceLogin", () => {
+Cypress.Commands.add("defaultWorkspaceLogin", (workspaceSlug = 'my-workspace',) => {
   // cy.task("dbConnection", {
   //   dbconfig: Cypress.env("app_db"),
   //   sql: `
@@ -432,10 +432,9 @@ Cypress.Commands.add("defaultWorkspaceLogin", () => {
   cy.apiLogin(
     "dev@tooljet.io",
     "password",
-    // workspaceId,
     // "/my-workspace"
   ).then(() => {
-    cy.visit("/");
+    cy.visit(`/${workspaceSlug}`);
     cy.wait(2000);
     cy.get(commonSelectors.homePageLogo, { timeout: 10000 });
   });

From 2df44db00b8d5fc2556d2283e43f3540928675ce Mon Sep 17 00:00:00 2001
From: emidhun <midhun752@gmail.com>
Date: Fri, 24 Oct 2025 12:07:50 +0530
Subject: [PATCH 115/157] test: update selectors for improved test stability

- Add previewSettings, modalConfirmButton, and rightSidebarPlusButton selectors
- Update createNewVersionButton selector to use :last pseudo-selector
---
 cypress-tests/cypress/constants/selectors/common.js       | 3 +++
 cypress-tests/cypress/constants/selectors/exportImport.js | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/cypress-tests/cypress/constants/selectors/common.js b/cypress-tests/cypress/constants/selectors/common.js
index 5bffc17390..003e84bafb 100644
--- a/cypress-tests/cypress/constants/selectors/common.js
+++ b/cypress-tests/cypress/constants/selectors/common.js
@@ -268,6 +268,7 @@ export const commonSelectors = {
   chooseFromTemplateButton: '[data-cy="choose-from-template-button"]',
   CreateAppFromTemplateButton: '[data-cy="create-new-app-from-template-title"]',
   settingsIcon: '[data-cy="settings-icon"]',
+  previewSettings: '[data-cy="preview-settings"]',
   marketplaceOption: '[data-cy="marketplace-option"]',
   backToAppOption: '[data-cy="back-to-app-option"]',
   databaseOption: '[data-cy="database-option"]',
@@ -281,6 +282,8 @@ export const commonSelectors = {
   defaultModalTitle: '[data-cy="modal-title"]',
   workspaceConstantsIcon: '[data-cy="icon-workspace-constants"]',
   confirmationButton: '[data-cy="confirmation-button"]',
+  modalConfirmButton: '[data-cy="modal-confirm-button"]',
+  rightSidebarPlusButton: '[data-cy="right-sidebar-plus-button"]',
 
   textField: (fieldName) => {
     return `[data-cy="${cyParamName(fieldName)}-text-field"]`;
diff --git a/cypress-tests/cypress/constants/selectors/exportImport.js b/cypress-tests/cypress/constants/selectors/exportImport.js
index 5df2652253..869f75cefe 100644
--- a/cypress-tests/cypress/constants/selectors/exportImport.js
+++ b/cypress-tests/cypress/constants/selectors/exportImport.js
@@ -14,7 +14,7 @@ export const appVersionSelectors = {
   versionNameInputField: '[data-cy="version-name-input-field"]',
   createVersionFromLabel: '[data-cy="create-version-from-label"]',
   createVersionInputField: '[data-cy="create-version-from-input-field"]',
-  createNewVersionButton: '[data-cy="create-new-version-button"]',
+  createNewVersionButton: '[data-cy="create-new-version-button"]:last',
   appVersionContentList: ".react-select__menu-list",
 };
 export const exportAppModalSelectors = {

From 78703585ae905e88320fd31baf928287af7cc0c4 Mon Sep 17 00:00:00 2001
From: emidhun <midhun752@gmail.com>
Date: Fri, 24 Oct 2025 12:08:03 +0530
Subject: [PATCH 116/157] test: enhance utility functions for better test
 reliability

- Add .first() selector to handle multiple button matches in verifyModal
- Add wait time before environment selection in selectEnv
- Use .first() selectors in version navigation functions
- Add openPreviewSettings helper function
- Add wait for appDs intercept in switchVersionAndVerify
---
 cypress-tests/cypress/support/utils/common.js      |  2 +-
 .../cypress/support/utils/platform/multiEnv.js     |  1 +
 cypress-tests/cypress/support/utils/version.js     | 14 ++++++++++----
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/cypress-tests/cypress/support/utils/common.js b/cypress-tests/cypress/support/utils/common.js
index e91a001c38..408dec2fee 100644
--- a/cypress-tests/cypress/support/utils/common.js
+++ b/cypress-tests/cypress/support/utils/common.js
@@ -128,7 +128,7 @@ export const verifyModal = (title, buttonText, inputFiledSelector) => {
   cy.get(commonSelectors.buttonSelector(commonText.cancelButton))
     .should("be.visible")
     .and("have.text", commonText.cancelButton);
-  cy.get(commonSelectors.buttonSelector(buttonText))
+  cy.get(commonSelectors.buttonSelector(buttonText)).first()
     .should("be.visible")
     .and("have.text", buttonText);
 
diff --git a/cypress-tests/cypress/support/utils/platform/multiEnv.js b/cypress-tests/cypress/support/utils/platform/multiEnv.js
index be72c3ae53..10207eea6e 100644
--- a/cypress-tests/cypress/support/utils/platform/multiEnv.js
+++ b/cypress-tests/cypress/support/utils/platform/multiEnv.js
@@ -109,6 +109,7 @@ export const selectEnv = (envName) => {
     };
 
     if (isValidEnvName(envName)) {
+        cy.wait(1000)
         cy.get('[data-cy="list-current-env-name"]').click();
         cy.wait(500)
         const envSelector = `${multiEnvSelector.envNameList}:eq(${envIndex})`;
diff --git a/cypress-tests/cypress/support/utils/version.js b/cypress-tests/cypress/support/utils/version.js
index e8011f299d..a4c37312bd 100644
--- a/cypress-tests/cypress/support/utils/version.js
+++ b/cypress-tests/cypress/support/utils/version.js
@@ -12,8 +12,8 @@ import { appPromote } from "./platform/multiEnv";
 
 export const navigateToCreateNewVersionModal = (value) => {
   cy.get(appVersionSelectors.appVersionLabel).click();
-  cy.contains(appVersionText.createNewVersion).should("be.visible");
-  cy.contains(appVersionText.createNewVersion).click();
+  cy.contains(appVersionText.createNewVersion).first().should("be.visible");
+  cy.contains(appVersionText.createNewVersion).first().click();
 };
 
 export const navigateToEditVersionModal = (value) => {
@@ -47,7 +47,7 @@ export const verifyElementsOfCreateNewVersionModal = (version = []) => {
   );
   cy.get(
     commonSelectors.buttonSelector(appVersionText.createNewVersion)
-  ).verifyVisibleElement("have.text", appVersionText.createNewVersion);
+  ).first().verifyVisibleElement("have.text", appVersionText.createNewVersion);
   cy.get(commonSelectors.buttonSelector(commonText.cancelButton))
     .should("be.visible")
     .and("have.text", commonText.cancelButton);
@@ -112,7 +112,7 @@ export const verifyDuplicateVersion = (newVersion = [], version) => {
   cy.get(appVersionSelectors.createVersionInputField).click();
   cy.contains(`[id*="react-select-"]`, version).click();
   cy.clearAndType(appVersionSelectors.versionNameInputField, newVersion[0]);
-  cy.get(appVersionSelectors.createNewVersionButton).click();
+  cy.get(appVersionSelectors.createNewVersionButton).first().click();
   cy.verifyToastMessage(
     commonSelectors.toastMessage,
     appVersionText.versionNameAlreadyExists
@@ -159,4 +159,10 @@ export const switchVersionAndVerify = (currentVersion, newVersion) => {
     .should("be.visible")
     .click();
   cy.get(".app-version-name").contains(newVersion).click();
+  cy.wait('@appDs')
+
+};
+
+export const openPreviewSettings = () => {
+  cy.get(commonSelectors.previewSettings).should("be.visible").click();
 };

From 1ab65ca79818758b90fa129ea6bae8d078bd58a6 Mon Sep 17 00:00:00 2001
From: emidhun <midhun752@gmail.com>
Date: Fri, 24 Oct 2025 12:08:12 +0530
Subject: [PATCH 117/157] test: refactor version test spec for better
 organization

- Add new appVersion.cy.js with optimized test structure
- Remove old version.cy.js file
---
 .../apps/{version.cy.js => appVersion.cy.js}  | 148 ++++++------------
 1 file changed, 50 insertions(+), 98 deletions(-)
 rename cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/{version.cy.js => appVersion.cy.js} (66%)

diff --git a/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/version.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appVersion.cy.js
similarity index 66%
rename from cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/version.cy.js
rename to cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appVersion.cy.js
index 433d74b05e..7ce9997c42 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/version.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appVersion.cy.js
@@ -11,6 +11,7 @@ import {
   verifyElementsOfCreateNewVersionModal,
   navigateToEditVersionModal,
   switchVersionAndVerify,
+  openPreviewSettings,
 } from "Support/utils/version";
 import { appVersionSelectors } from "Selectors/exportImport";
 import { editVersionSelectors } from "Selectors/version";
@@ -27,48 +28,48 @@ import { createRestAPIQuery } from "Support/utils/dataSource";
 import { deleteQuery } from "Support/utils/queries";
 import { selectEnv, appPromote } from "Support/utils/platform/multiEnv";
 describe("App Version", () => {
+  const generateTestData = () => ({
+    appName: `${fake.companyName}-Version-App`,
+    datasourceName: fake.firstName.toLowerCase(),
+    query1: fake.firstName.toLowerCase(),
+    query2: fake.firstName.toLowerCase(),
+  });
+
+  const verifyWidget = (selector, assertion, expectedValue) => {
+    cy.get(commonWidgetSelector.draggableWidget(selector))
+      .verifyVisibleElement(assertion, expectedValue);
+  };
+
   let data;
 
-  let currentVersion = "";
-  let newVersion = [];
-  let versionFrom = "";
-
   beforeEach(() => {
-    data = {
-      appName: `${fake.companyName}-Version-App`,
-      datasourceName: fake.firstName.toLowerCase(),
-      query1: fake.firstName.toLowerCase(),
-      query2: fake.firstName.toLowerCase(),
-    };
+    data = generateTestData();
 
     cy.defaultWorkspaceLogin();
     cy.apiCreateApp(data.appName);
     cy.openApp();
     cy.viewport(1400, 1400);
-
   });
 
   it("should verify basic version management operations", () => {
-    // Version modal verification
     cy.get(appVersionSelectors.appVersionLabel).should("be.visible");
     navigateToCreateNewVersionModal("v1");
     verifyElementsOfCreateNewVersionModal(["v1"]);
 
-    // Empty version name validation
     navigateToCreateNewVersionModal("v1");
-    cy.get('[data-cy="create-new-version-button"]').click();
+    cy.get(appVersionSelectors.createNewVersionButton).click();
+    cy.get(appVersionSelectors.createNewVersionButton).click();
+
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
       "Version name should not be empty"
     );
 
-    cy.wait(2000);
+    cy.get(appVersionSelectors.createVersionTitle).should("not.exist");
 
-    // Duplicate version name check
     verifyDuplicateVersion(["v1"], "v1");
     closeModal(commonText.closeButton);
 
-    // Version edit modal verification
     navigateToEditVersionModal("v1");
     verifyModal(
       editVersionText.editVersionTitle,
@@ -76,45 +77,39 @@ describe("App Version", () => {
       editVersionSelectors.versionNameInputField
     );
     closeModal(commonText.closeButton);
-    cy.wait(1000);
+    cy.get(editVersionSelectors.editVersionTitle).should("not.exist");
 
-    // Version editing
     editVersionAndVerify(
       "v1",
       ["v2"],
       editVersionText.VersionNameUpdatedToastMessage
     );
 
-    // Component operations in version
     verifyComponentinrightpannel("table");
+    cy.get(commonSelectors.rightSidebarPlusButton).click();
     cy.dragAndDropWidget("text");
     cy.waitForAutoSave();
 
-    // New version creation
     navigateToCreateNewVersionModal("v2");
     createNewVersion(["v3"], "v2");
     cy.waitForAutoSave();
     verifyComponentinrightpannel("table");
 
-    // Component deletion
     deleteComponentAndVerify("text1");
     cy.waitForAutoSave();
-    cy.wait(2000);
+    cy.get(commonWidgetSelector.draggableWidget("text1")).should("not.exist");
 
-    // Version deletion
     deleteVersionAndVerify(
       "v3",
       onlydeleteVersionText.deleteToastMessage("v3")
     );
     cy.get(appVersionSelectors.currentVersionField("v2")).should("be.visible");
-    cy.wait(3000);
+    cy.get(appVersionSelectors.currentVersionField("v3")).should("not.exist");
 
-    // cy.reload();
     cy.get(commonWidgetSelector.draggableWidget("text1")).should("be.visible", {
       timeout: 10000,
     });
 
-    // Preview and release verification
     cy.openInCurrentTab(commonWidgetSelector.previewButton);
 
     cy.ifEnv("Community", () => {
@@ -135,7 +130,6 @@ describe("App Version", () => {
   });
 
   it("should verify version management with components and queries", () => {
-    // Initial setup with component and datasource
     cy.apiCreateGDS(
       `${Cypress.env("server_host")}/api/data-sources`,
       data.datasourceName,
@@ -157,20 +151,15 @@ describe("App Version", () => {
       appPromote("development", "production");
     });
 
-    // Version v2 creation and verification and v2 is created from v1 production environment
     navigateToCreateNewVersionModal("v1");
     createNewVersion(["v2"], "v1");
-    cy.get(commonWidgetSelector.draggableWidget("text1")).verifyVisibleElement(
-      "have.text",
-      "Leanne Graham"
-    );
+    verifyWidget("text1", "have.text", "Leanne Graham");
     cy.get(`[data-cy="list-query-${data.query1}"]`).should("be.visible");
 
-    // Modify v2 with new components and queries
     deleteComponentAndVerify("text1");
     cy.waitForAutoSave();
     deleteQuery(data.query1);
-    cy.get('[data-cy="modal-confirm-button"]').click();
+    cy.get(commonSelectors.modalConfirmButton).click();
     createRestAPIQuery(data.query2, data.datasourceName, "", "", "/2", true);
     cy.apiAddComponentToApp(
       data.appName,
@@ -181,7 +170,6 @@ describe("App Version", () => {
     );
     cy.waitForAutoSave();
 
-    // Version creation and state verification
     const versionChecks = [
       {
         create: { version: "v3", from: "v2" },
@@ -210,29 +198,21 @@ describe("App Version", () => {
       navigateToCreateNewVersionModal(check.create.from);
       createNewVersion([check.create.version], check.create.from);
       cy.waitForAutoSave();
-      cy.wait(1000);
-      if (check.verify.component.value) {
-        cy.get(
-          commonWidgetSelector.draggableWidget(check.verify.component.selector)
-        ).verifyVisibleElement("have.value", check.verify.component.value);
-      } else {
-        cy.get(
-          commonWidgetSelector.draggableWidget(check.verify.component.selector)
-        ).verifyVisibleElement("have.text", check.verify.component.text);
-      }
-      cy.get(`[data-cy="list-query-${check.verify.query}"]`).should(
-        "be.visible"
-      );
+      cy.get(appVersionSelectors.currentVersionField(check.create.version)).should("be.visible");
+
+      const assertion = check.verify.component.value ? "have.value" : "have.text";
+      const expected = check.verify.component.value || check.verify.component.text;
+      verifyWidget(check.verify.component.selector, assertion, expected);
+
+      cy.get(`[data-cy="list-query-${check.verify.query}"]`).should("be.visible");
     });
 
-    // Release and version state verification
     releasedVersionAndVerify("v5");
     cy.get(appVersionSelectors.currentVersionField("v5")).should(
       "have.class",
       "color-light-green"
     );
 
-    // Version switching and component verification
     cy.ifEnv("Enterprise", () => {
       selectEnv("development");
     });
@@ -242,13 +222,9 @@ describe("App Version", () => {
       "not.have.class",
       "color-light-green"
     );
-    cy.get(commonWidgetSelector.draggableWidget("text1")).verifyVisibleElement(
-      "have.text",
-      "Leanne Graham"
-    );
+    verifyWidget("text1", "have.text", "Leanne Graham");
     cy.get(`[data-cy="list-query-${data.query1}"]`).should("be.visible");
 
-    // Preview and version switching verification
     cy.openInCurrentTab(commonWidgetSelector.previewButton);
 
     cy.ifEnv("Community", () => {
@@ -258,17 +234,12 @@ describe("App Version", () => {
       cy.url().should("include", "/home?env=development&version=v4");
     });
 
-    cy.get(commonWidgetSelector.draggableWidget("text1")).verifyVisibleElement(
-      "have.text",
-      "Leanne Graham"
-    );
+    verifyWidget("text1", "have.text", "Leanne Graham");
 
-    cy.get('[data-cy="preview-settings"]').click();
+    openPreviewSettings();
     switchVersionAndVerify("v4", "v5");
 
-    cy.get(
-      commonWidgetSelector.draggableWidget("textInput")
-    ).verifyVisibleElement("have.value", "Ervin Howell");
+    verifyWidget("textInput", "have.value", "Ervin Howell");
 
     cy.ifEnv("Enterprise", () => {
       cy.openApp(
@@ -281,62 +252,43 @@ describe("App Version", () => {
       navigateToCreateNewVersionModal("v5");
       createNewVersion(["v6"], "v5");
       cy.waitForAutoSave();
-      cy.wait(1000);
+      cy.get(appVersionSelectors.currentVersionField("v6")).should("be.visible");
 
       appPromote("development", "staging");
-      cy.get(
-        commonWidgetSelector.draggableWidget("textInput")
-      ).verifyVisibleElement("have.value", "Ervin Howell");
+      verifyWidget("textInput", "have.value", "Ervin Howell");
       cy.get(`[data-cy="list-query-${data.query2}"]`).should("be.visible");
 
       appPromote("staging", "production");
 
-      cy.get(
-        commonWidgetSelector.draggableWidget("textInput")
-      ).verifyVisibleElement("have.value", "Ervin Howell");
+      verifyWidget("textInput", "have.value", "Ervin Howell");
       cy.get(`[data-cy="list-query-${data.query2}"]`).should("be.visible");
 
       cy.openInCurrentTab(commonWidgetSelector.previewButton);
-      cy.get(
-        commonWidgetSelector.draggableWidget("textInput")
-      ).verifyVisibleElement("have.value", "Ervin Howell");
+      verifyWidget("textInput", "have.value", "Ervin Howell");
       cy.url().should("include", "/home?env=production&version=v6");
 
-      cy.wait(1000);
-
-      cy.get('[data-cy="preview-settings"]').click();
+      openPreviewSettings();
       switchVersionAndVerify("v6", "v1");
 
-      cy.get(
-        commonWidgetSelector.draggableWidget("text1")
-      ).verifyVisibleElement("have.text", "Leanne Graham");
-      // url bug
-      // cy.url().should("include", "/home?env=production&version=v1");
-      cy.wait(1000);
-      cy.get('[data-cy="preview-settings"]').click();
+      verifyWidget("text1", "have.text", "Leanne Graham");
+
+      openPreviewSettings();
       switchVersionAndVerify("v1", "v6");
 
-      cy.wait(1000);
-      cy.get('[data-cy="preview-settings"]').click();
+      openPreviewSettings();
+      cy.forceClickOnCanvas();
+      openPreviewSettings();
       selectEnv("staging");
 
-      cy.get(
-        commonWidgetSelector.draggableWidget("textInput")
-      ).verifyVisibleElement("have.value", "Ervin Howell");
-      // cy.url().should("include", "/home?env=staging&version=v6");
+      verifyWidget("textInput", "have.value", "Ervin Howell");
 
-
-      cy.wait(1000);
-      cy.get('[data-cy="preview-settings"]').click();
+      openPreviewSettings();
       selectEnv("development");
 
-      cy.wait(1000);
-      cy.get('[data-cy="preview-settings"]').click();
+      openPreviewSettings();
       switchVersionAndVerify("v6", "v1");
 
-      cy.get(
-        commonWidgetSelector.draggableWidget("text1")
-      ).verifyVisibleElement("have.text", "Leanne Graham");
+      verifyWidget("text1", "have.text", "Leanne Graham");
     });
   });
 });

From 6ef9c79df1da22fa95bd088efcda5fe4b8c7ff2b Mon Sep 17 00:00:00 2001
From: emidhun <midhun752@gmail.com>
Date: Fri, 24 Oct 2025 12:08:20 +0530
Subject: [PATCH 118/157] test: update private and public apps test spec

- Optimize test assertions and selectors
- Improve test reliability and performance
---
 .../apps/privateAndpublicApps.cy.js           | 267 +++++-------------
 1 file changed, 68 insertions(+), 199 deletions(-)

diff --git a/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/privateAndpublicApps.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/privateAndpublicApps.cy.js
index a1e3ffadc5..7a76c20316 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/privateAndpublicApps.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/privateAndpublicApps.cy.js
@@ -5,7 +5,7 @@ import { inviteUserToWorkspace } from "Support/utils/manageUsers";
 import { setSignupStatus } from "Support/utils/manageSSO";
 import { onboardingSelectors } from "Selectors/onboarding";
 import { commonText } from "Texts/common";
-import { userSignUp, addNewUser } from "Support/utils/onboarding";
+import { userSignUp } from "Support/utils/onboarding";
 import {
   setUpSlug,
   setupAppWithSlug,
@@ -21,35 +21,38 @@ describe(
     retries: { runMode: 2 },
   },
   () => {
+    const generateTestData = () => ({
+      appName: `${fake.companyName} P P App`,
+      slug: `${fake.companyName} P P App`.toLowerCase().replace(/\s+/g, "-"),
+      firstName: fake.firstName,
+      email: fake.email.toLowerCase(),
+      workspaceName: fake.firstName,
+      workspaceSlug: fake.firstName.toLowerCase().replace(/\s+/g, "-"),
+    });
+
+    const verifyWidget = (widgetName) => {
+      cy.get(commonWidgetSelector.draggableWidget(widgetName)).should("be.visible");
+    };
+
+    const getAppUrl = (slug) => `${Cypress.config("baseUrl")}/applications/${slug}`;
+
     let data;
 
     beforeEach(() => {
-      data = {
-        appName: `${fake.companyName} P P App`,
-        slug: `${fake.companyName} P P App`.toLowerCase().replace(/\s+/g, "-"),
-        firstName: fake.firstName,
-        email: fake.email.toLowerCase(),
-        workspaceName: fake.firstName,
-        workspaceSlug: fake.firstName.toLowerCase().replace(/\s+/g, "-"),
-      };
-
+      data = generateTestData();
       cy.defaultWorkspaceLogin();
       cy.skipWalkthrough();
     });
 
-    it("Verify private and public app share functionality", () => {
+    it("should verify private and public app share functionality", () => {
       cy.apiCreateApp(data.appName);
       cy.openApp();
-      cy.apiAddComponentToApp(data.appName, "text1");
+      cy.dragAndDropWidget("text", 500, 500);
 
-      // Check unreleased version state
-      cy.get('[data-cy="share-button-link"]>span').should("be.visible").click();
-      cy.contains("This version has not been released yet").should(
-        "be.visible"
-      );
+      cy.get(commonWidgetSelector.shareAppButton).should("be.visible").click();
+      cy.contains("This version has not been released yet").should("be.visible");
       cy.get(commonWidgetSelector.modalCloseButton).click();
 
-      // Release and verify share modal
       releaseApp();
       cy.get(commonWidgetSelector.shareAppButton).click();
       for (const elements in commonWidgetSelector.shareModalElements) {
@@ -61,7 +64,6 @@ describe(
         );
       }
 
-      // Verify share modal elements
       const shareModalSelectors = [
         "copyAppLinkButton",
         "makePublicAppToggle",
@@ -73,9 +75,8 @@ describe(
         cy.get(commonWidgetSelector[selector]).should("be.visible");
       });
 
-      // Configure and verify slug
       cy.clearAndType(commonWidgetSelector.appNameSlugInput, data.slug);
-      cy.get('[data-cy="app-slug-accepted-label"]')
+      cy.get(commonSelectors.appSlugAccept)
         .should("be.visible")
         .and("have.text", "Slug accepted!");
 
@@ -83,24 +84,14 @@ describe(
       cy.forceClickOnCanvas();
       cy.backToApps();
 
-      // Test private access
       logout();
 
-      cy.visitSlug({
-        actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
-      });
+      cy.visitSlug({ actualUrl: getAppUrl(data.slug) });
 
-      cy.get(onboardingSelectors.signInButton, { timeout: 20000 }).should(
-        "be.visible"
-      );
-      cy.wait(2000);
+      cy.get(onboardingSelectors.signInButton, { timeout: 20000 }).should("be.visible");
       cy.appUILogin();
-      cy.get(commonWidgetSelector.draggableWidget("text1")).should(
-        "be.visible"
-      );
+      verifyWidget("text1");
 
-      // Test public access
-      // cy.get(commonSelectors.viewerPageLogo).click();
       cy.openApp(
         "appSlug",
         Cypress.env("workspaceId"),
@@ -113,75 +104,39 @@ describe(
       cy.backToApps();
 
       logout();
-      cy.visitSlug({
-        actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
-      });
-      cy.get(commonWidgetSelector.draggableWidget("text1")).should(
-        "be.visible"
-      );
+      cy.visitSlug({ actualUrl: getAppUrl(data.slug) });
+      verifyWidget("text1");
     });
 
-    it("Verify app private and public app visibility for the same workspace user", () => {
+    it("should verify app private and public app visibility for the same workspace user", () => {
       setupAppWithSlug(data.appName, data.slug);
 
       inviteUserToWorkspace(data.firstName, data.email);
       logout();
-      cy.visit("/");
-      cy.wait(2000);
-      cy.get(onboardingSelectors.signInButton, { timeout: 20000 }).should(
-        "be.visible"
-      );
-
-      // Test private access
-      cy.visitSlug({
-        actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
-      });
+      cy.get(onboardingSelectors.signInButton, { timeout: 20000 }).should("be.visible");
 
+      cy.visitSlug({ actualUrl: getAppUrl(data.slug) });
       cy.wait(2000);
       cy.appUILogin(data.email, "password");
+      verifyWidget("text1");
 
-      cy.get(commonWidgetSelector.draggableWidget("text1")).should(
-        "be.visible"
-      );
+      cy.visitSlug({ actualUrl: getAppUrl(data.slug) });
+      verifyWidget("text1");
 
-      // Test with private app valid session
-      cy.visitSlug({
-        actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
-      });
-      cy.get(commonWidgetSelector.draggableWidget("text1")).should(
-        "be.visible"
-      );
-
-      // cy.get(commonSelectors.viewerPageLogo).click();
-
-      // Test public access
       cy.defaultWorkspaceLogin();
-      cy.wait(1000);
       cy.apiMakeAppPublic();
       logout();
-      cy.wait(1000);
-      cy.get(onboardingSelectors.signInButton, { timeout: 20000 }).should(
-        "be.visible"
-      );
+      cy.get(onboardingSelectors.signInButton, { timeout: 20000 }).should("be.visible");
 
-      cy.visitSlug({
-        actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
-      });
-      cy.get(commonWidgetSelector.draggableWidget("text1")).should(
-        "be.visible"
-      );
+      cy.visitSlug({ actualUrl: getAppUrl(data.slug) });
+      verifyWidget("text1");
 
-      // Test with public app with valid session
       cy.apiLogin(data.email, "password");
-      cy.visitSlug({
-        actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
-      });
-      cy.get(commonWidgetSelector.draggableWidget("text1")).should(
-        "be.visible"
-      );
+      cy.visitSlug({ actualUrl: getAppUrl(data.slug) });
+      verifyWidget("text1");
     });
 
-    it("Verify app private and public app visibility for the same instance user", () => {
+    it("should verify app private and public app visibility for the same instance user", () => {
       setupAppWithSlug(data.appName, data.slug);
 
       cy.apiLogout();
@@ -189,61 +144,44 @@ describe(
         InstanceSSO(true, true, true);
       });
       userSignUp(data.firstName, data.email, data.workspaceName);
-      cy.wait(1000);
-      cy.visitSlug({
-        actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
-      });
+      cy.visitSlug({ actualUrl: getAppUrl(data.slug) });
 
       cy.visit("/");
       logout();
 
-      // Test public access
       cy.defaultWorkspaceLogin();
       cy.apiMakeAppPublic();
       logout();
 
-      cy.wait(1000);
-      cy.get(onboardingSelectors.signInButton, { timeout: 20000 }).should(
-        "be.visible"
-      );
+      cy.get(onboardingSelectors.signInButton, { timeout: 20000 }).should("be.visible");
 
-      cy.visitSlug({
-        actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
-      });
-      cy.get(commonWidgetSelector.draggableWidget("text1")).should(
-        "be.visible"
-      );
+      cy.visitSlug({ actualUrl: getAppUrl(data.slug) });
+      verifyWidget("text1");
 
-      // Verify public app with valid session
       cy.apiLogin(data.email, "password");
-      cy.visitSlug({
-        actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
-      });
-      cy.get(commonWidgetSelector.draggableWidget("text1")).should(
-        "be.visible"
-      );
+      cy.visitSlug({ actualUrl: getAppUrl(data.slug) });
+      verifyWidget("text1");
     });
 
-    it("Should redirect to workspace login and handle signup flow of existing and non-existing user", () => {
+    it.skip("should redirect to workspace login and handle signup flow of existing and non-existing user", () => {
       setSignupStatus(true);
       setupAppWithSlug(data.appName, data.slug);
 
+
+      cy.visitSlug({ actualUrl: getAppUrl(data.slug) });
+      verifyWidget("text1");
+
+      // cy.get(commonSelectors.workspaceName).verifyVisibleElement(
+      //   "have.text",
+      //   "My workspace"
+      // );
       cy.apiLogout();
-      cy.visitSlug({
-        actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
-      });
-
-      cy.get(commonSelectors.workspaceName).verifyVisibleElement(
-        "have.text",
-        "My workspace"
-      );
-
-      // Test signup flow
+      cy.visitSlug({ actualUrl: getAppUrl(data.slug) });
       cy.intercept("POST", "/api/onboarding/signup").as("signup");
       cy.get(commonSelectors.createAnAccountLink).click();
-      cy.wait(3000);
+      cy.wait(2000);
       cy.clearAndType(commonSelectors.inputFieldFullName, data.firstName);
-      cy.clearAndType(commonSelectors.inputFieldEmailAddress, data.email);
+      cy.clearAndType('[data-cy="email-input"]', data.email);
       cy.clearAndType(onboardingSelectors.loginPasswordInput, "password");
       cy.get(commonSelectors.signUpButton).click();
 
@@ -251,23 +189,12 @@ describe(
         expect(interception.response.statusCode).to.eq(201);
       });
 
-      // Process invitation
       onboardUserFromAppLink(data.email, data.slug);
-
-      cy.get(commonWidgetSelector.draggableWidget("text1")).should(
-        "be.visible"
-      );
-
-      // cy.get('[data-cy="viewer-page-logo"]').click();
-      cy.visit("/my-workspace");
-      cy.wait(2000);
+      verifyWidget("text1");
+      cy.visit("/");
       logout();
-      cy.wait(1000);
-      cy.get(onboardingSelectors.signInButton, { timeout: 20000 }).should(
-        "be.visible"
-      );
+      cy.get(onboardingSelectors.signInButton, { timeout: 20000 }).should("be.visible");
 
-      // Setup new workspace and app
       cy.defaultWorkspaceLogin();
       cy.apiCreateWorkspace(data.workspaceName, data.workspaceSlug);
       cy.apiLogout();
@@ -276,21 +203,18 @@ describe(
       setSignupStatus(true, data.workspaceName);
 
       data.slug = fake.firstName.toLowerCase().replace(/\s+/g, "-");
-
+      cy.reload()
       cy.createApp(data.appName);
 
-      cy.wait(2000);
       cy.dragAndDropWidget("Text", 500, 500);
       releaseApp();
       setUpSlug(data.slug);
       cy.forceClickOnCanvas();
       cy.backToApps();
 
-      // Test signup flow in new workspace
       cy.apiLogout();
-      cy.visitSlug({
-        actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
-      });
+      cy.visitSlug({ actualUrl: getAppUrl(data.slug) });
+      cy.log("Visiting app URL: ", getAppUrl(data.slug));
 
       cy.get(commonSelectors.workspaceName).verifyVisibleElement(
         "have.text",
@@ -298,9 +222,8 @@ describe(
       );
 
       cy.get(commonSelectors.createAnAccountLink).click();
-      cy.wait(3000);
       cy.clearAndType(commonSelectors.inputFieldFullName, data.firstName);
-      cy.clearAndType(commonSelectors.inputFieldEmailAddress, data.email);
+      cy.clearAndType('[data-cy="email-input"]', data.email);
       cy.clearAndType(onboardingSelectors.loginPasswordInput, "password");
       cy.get(commonSelectors.signUpButton).click();
       cy.wait("@signup").then((interception) => {
@@ -308,12 +231,10 @@ describe(
       });
 
       onboardUserFromAppLink(data.email, data.slug, data.workspaceName, false);
-      cy.get(commonWidgetSelector.draggableWidget("text1")).should(
-        "be.visible"
-      );
+      verifyWidget("text1");
     });
 
-    it("Should verify restricted app access", () => {
+    it.only("should verify restricted app access", () => {
       data.workspaceName = fake.firstName;
       data.workspaceSlug = fake.firstName.toLowerCase().replace(/\s+/g, "-");
 
@@ -330,65 +251,13 @@ describe(
 
       inviteUserToWorkspace(data.firstName, data.email);
 
-      // Verify restricted access
-      cy.visitSlug({
-        actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
-      });
+      cy.visitSlug({ actualUrl: getAppUrl(data.slug) });
       verifyRestrictedAccess();
-      cy.get('[data-cy="back-to-home-button"]').click();
+      cy.get(commonSelectors.backToHomeButton).click();
       cy.get(commonSelectors.homePageLogo).should("be.visible");
 
       cy.apiLogout();
     });
 
-    it.skip("Should verify private app access for different workspace users", () => {
-      const firstName1 = fake.firstName;
-      const email1 = fake.email.toLowerCase();
-      const permissionName = fake.firstName.toLowerCase(); // Defined but not used in original
-      const urls = {
-        editor: `${Cypress.config("baseUrl")}/my-workspace/apps/${data.slug}/home`,
-        preview: `${Cypress.config("baseUrl")}/applications/${data.slug}/home?version=v1`,
-        released: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
-      };
-
-      // Setup workspace and app
-      cy.apiCreateWorkspace(data.workspaceName, data.workspaceSlug);
-      cy.apiLogout();
-      cy.apiLogin();
-      cy.visit(`${data.workspaceSlug}`);
-      setupAppWithSlug(data.appName, data.slug);
-
-      // Invite workspace user
-      addNewUser(data.firstName, data.email);
-      cy.wait(500);
-
-      // Verify access restrictions
-      cy.visitSlug({ actualUrl: urls.editor });
-      verifyRestrictedAccess();
-      cy.get('[data-cy="back-to-home-button"]').click();
-      cy.get(commonSelectors.homePageLogo).should("be.visible");
-
-      cy.visitSlug({ actualUrl: urls.preview });
-
-      // Switch users and verify access
-      cy.apiLogout();
-      cy.apiLogin();
-      cy.apiDeleteGranularPermission("end-user");
-
-      cy.apiLogin(data.email, "password");
-      cy.visitSlug({ actualUrl: urls.editor });
-      verifyRestrictedAccess();
-      cy.get('[data-cy="back-to-home-button"]').click();
-      cy.get(commonSelectors.homePageLogo).should("be.visible");
-      cy.visitSlug({ actualUrl: urls.preview });
-
-      cy.apiLogout();
-
-      // Test with new user
-      userSignUp(firstName1, email1, data.workspaceName);
-      cy.visitSlug({ actualUrl: urls.editor });
-      cy.visitSlug({ actualUrl: urls.preview });
-      cy.visitSlug({ actualUrl: urls.released });
-    });
   }
 );

From 47158cfa97c41e682b935cfa474217f12915a42e Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Fri, 24 Oct 2025 14:43:30 +0530
Subject: [PATCH 119/157] Fix: onPageChanged event getting triggered on page
 load and when page is set using CSA

---
 .../TableExposedVariables/TableExposedVariables.jsx      | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableExposedVariables/TableExposedVariables.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableExposedVariables/TableExposedVariables.jsx
index c9a729cd93..947fa3f855 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableExposedVariables/TableExposedVariables.jsx
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableExposedVariables/TableExposedVariables.jsx
@@ -69,6 +69,7 @@ export const TableExposedVariables = ({
   };
 
   const prevSortingLength = useRef(null);
+  const skipPageEvent = useRef(false);
 
   const getColumnName = useCallback(
     (columnId) => {
@@ -147,7 +148,10 @@ export const TableExposedVariables = ({
   // Expose page index
   useEffect(() => {
     setExposedVariables({ pageIndex });
-    fireEvent('onPageChanged');
+
+    // Don't fire onPageChanged event incase the page was changed using setPage CSA to maintain backward compatibility
+    if (!skipPageEvent.current) mounted && fireEvent('onPageChanged');
+    else skipPageEvent.current = false; // reset the flag
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pageIndex, setExposedVariables, fireEvent]); // Didn't add mounted as it's not a dependency
 
@@ -218,9 +222,10 @@ export const TableExposedVariables = ({
     function setPage(targetPageIndex = 1) {
       setExposedVariables({ pageIndex: targetPageIndex });
       setPageIndex(targetPageIndex - 1);
+      skipPageEvent.current = true;
     }
     setExposedVariables({ setPage });
-  }, [setPageIndex, setExposedVariables]);
+  }, [setPageIndex, setExposedVariables, skipPageEvent]);
 
   useEffect(() => {
     if (selectedRows.length === 0 && allowSelection && !showBulkSelector) {

From 2f015503f03273e13b8e8aec3e89027f9a5bf5d5 Mon Sep 17 00:00:00 2001
From: ajith-k-v <ajith.jaban@gmail.com>
Date: Fri, 24 Oct 2025 18:57:37 +0530
Subject: [PATCH 120/157] Add data-cy attribute for query card options

---
 .../src/AppBuilder/QueryPanel/QueryCard.jsx   | 32 +++++++++----------
 .../AppBuilder/QueryPanel/QueryCardMenu.jsx   |  2 +-
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/frontend/src/AppBuilder/QueryPanel/QueryCard.jsx b/frontend/src/AppBuilder/QueryPanel/QueryCard.jsx
index 53bb9f9f85..a788dcc95d 100644
--- a/frontend/src/AppBuilder/QueryPanel/QueryCard.jsx
+++ b/frontend/src/AppBuilder/QueryPanel/QueryCard.jsx
@@ -122,11 +122,7 @@ export const QueryCard = ({ dataQuery, darkMode = false, localDs }) => {
         </div>
         <div className="col query-row-query-name">
           {isRenaming ? (
-            <QueryRenameInput
-              dataQuery={dataQuery}
-              darkMode={darkMode}
-              onUpdate={updateQueryName}
-            />
+            <QueryRenameInput dataQuery={dataQuery} darkMode={darkMode} onUpdate={updateQueryName} />
           ) : (
             <div className="query-name" data-cy={`list-query-${dataQuery.name.toLowerCase()}`}>
               <span
@@ -163,18 +159,20 @@ export const QueryCard = ({ dataQuery, darkMode = false, localDs }) => {
             </div>
           )}
         </div>
-        {!shouldFreeze && <div className={`col-auto query-rename-delete-btn ${isQuerySelected ? 'd-flex' : 'd-none'}`}>
-          <ButtonComponent
-            iconOnly
-            leadingIcon="morevertical01"
-            onClick={(e) => toggleQueryHandlerMenu(true, `query-handler-menu-${dataQuery?.id}`)}
-            size="small"
-            variant="outline"
-            className=""
-            id={`query-handler-menu-${dataQuery?.id}`}
-            data-cy={`delete-query-${dataQuery.name.toLowerCase()}`}
-          />
-        </div>}
+        {!shouldFreeze && (
+          <div className={`col-auto query-rename-delete-btn ${isQuerySelected ? 'd-flex' : 'd-none'}`}>
+            <ButtonComponent
+              iconOnly
+              leadingIcon="morevertical01"
+              onClick={(e) => toggleQueryHandlerMenu(true, `query-handler-menu-${dataQuery?.id}`)}
+              size="small"
+              variant="outline"
+              className=""
+              id={`query-handler-menu-${dataQuery?.id}`}
+              data-cy={`query-handler-menu-${dataQuery.name.toLowerCase()}`}
+            />
+          </div>
+        )}
       </div>
       <Confirm
         show={isDeleting}
diff --git a/frontend/src/AppBuilder/QueryPanel/QueryCardMenu.jsx b/frontend/src/AppBuilder/QueryPanel/QueryCardMenu.jsx
index b94b5c3f4e..41b40b7c69 100644
--- a/frontend/src/AppBuilder/QueryPanel/QueryCardMenu.jsx
+++ b/frontend/src/AppBuilder/QueryPanel/QueryCardMenu.jsx
@@ -149,7 +149,7 @@ const QueryCardMenu = ({ darkMode }) => {
             {QUERY_MENU_OPTIONS.map((option) => {
               const optionBody = (
                 <div
-                  data-cy={`component-inspector-${String(option?.value).toLowerCase()}-button`}
+                  data-cy={`query-card-${String(option?.value).toLowerCase()}-button`}
                   className="list-item-popover-option"
                   key={option?.value}
                   onClick={(e) => {

From 8e340d096cbdd9ca08b7b4fe7a05eb31517eabdf Mon Sep 17 00:00:00 2001
From: Mekhla Asopa <dadhichmekhla@gmail.com>
Date: Fri, 24 Oct 2025 20:41:08 +0530
Subject: [PATCH 121/157] added verification test case for license

---
 .../cypress/constants/selectors/license.js    |  71 ++++++
 .../cypress/constants/texts/common.js         |  21 ++
 .../cypress/constants/texts/license.js        |  68 ++++++
 .../licensing/licensingHappyPath.cy.js        | 202 ++++++++++++++++
 .../cypress/fixtures/license/license.json     |  24 ++
 cypress-tests/cypress/support/utils/common.js |   7 +
 .../cypress/support/utils/license.js          | 224 ++++++++++++++++++
 .../cypress/support/utils/manageUsers.js      |   9 +-
 .../BaseManageGroupPermissions.jsx            |   7 +-
 .../BaseWorkspaceDropDown.jsx                 |   4 +-
 10 files changed, 629 insertions(+), 8 deletions(-)
 create mode 100644 cypress-tests/cypress/constants/selectors/license.js
 create mode 100644 cypress-tests/cypress/constants/texts/license.js
 create mode 100644 cypress-tests/cypress/e2e/happyPath/platform/eeTestcases/licensing/licensingHappyPath.cy.js
 create mode 100644 cypress-tests/cypress/fixtures/license/license.json
 create mode 100644 cypress-tests/cypress/support/utils/license.js

diff --git a/cypress-tests/cypress/constants/selectors/license.js b/cypress-tests/cypress/constants/selectors/license.js
new file mode 100644
index 0000000000..f1f47c374d
--- /dev/null
+++ b/cypress-tests/cypress/constants/selectors/license.js
@@ -0,0 +1,71 @@
+export const cyParamName = (paramName = "") => {
+  return String(paramName).toLowerCase().replace(/\s+/g, "-");
+};
+
+export const cyParamNameCamelCase = (paramName = "") => {
+  return paramName
+    .replace(/[^a-zA-Z0-9\s]/g, "")
+    .toLowerCase()
+    .replace(/\s+(\w)/g, (_, c) => c.toUpperCase());
+};
+
+export const licenseSelectors = {
+  comparePlansText: '[data-cy="compare-plans-button"]',
+  listOfItems: (itemName) => {
+    return `[data-cy="${cyParamName(itemName)}-list-item"]`;
+  },
+  tabTitle: (tabName) => {
+    return `[data-cy="${cyParamNameCamelCase(tabName)}-tab-title"]`;
+  },
+  subTab: (subTabName) => {
+    return `[data-cy="${cyParamName(subTabName)}-sub-tab"]`;
+  },
+  numberOfTextLabel: (label) => {
+    return `[data-cy="number-of-${cyParamName(label)}-label"]`;
+  },
+  inputField: (fieldName) => {
+    return `[data-cy="${cyParamName(fieldName)}-field"]`;
+  },
+  label: (labelName) => {
+    return `[data-cy="${cyParamName(labelName)}-label"]`;
+  },
+  paidFeatureButton: '[data-cy="paid-feature-button"]',
+  warningIcon: '[data-cy="warning-icon"]',
+  noDomainLinkedLabel: '[data-cy="no-domain-header"]',
+  noDomainInfoText: '[data-cy="no-domain-info-text"]',
+  licenseOption: '[data-cy="license-list-item"]',
+  licenseKeyOption: '[data-cy="license-key-list-item"]',
+  limitOption: '[data-cy="limits-list-item"]',
+  accessOption: '[data-cy="access-list-item"]',
+  domainOption: '[data-cy="domain-list-item"]',
+  licenseKeyTitle: '[data-cy="licenseKey-tab-title"]',
+  licenseLabel: '[data-cy="license-label"]',
+  updateButton: '[data-cy="update-button"]',
+  limitsTabTitle: '[data-cy="limits-tab-title"]',
+  appsTab: '[data-cy="apps-sub-tab"]',
+  noOfAppsLabel: '[data-cy="number-of-apps-label"]',
+  noOfAppsfield: '[data-cy="apps-field"]',
+  workspaceTab: '[data-cy="workspaces-sub-tab"]',
+  noOfworkspaceLabel: '[data-cy="number-of-workspaces-label"]',
+  noOfWorkspacefield: '[data-cy="workspaces-field"]',
+  usersTab: '[data-cy="users-sub-tab"]',
+  noOfTotalUsersLabel: '[data-cy="number-of-total-users-label"]',
+  noOfTotalUsersfield: '[data-cy="total-users-field"]',
+  noOfBuildersLabel: '[data-cy="number-of-builders-label"]',
+  noOfBuildersfield: '[data-cy="builders-field"]',
+  noOfEndUsersLabel: '[data-cy="number-of-end-users-label"]',
+  noOfEndUsersfield: '[data-cy="end-users-field"]',
+  noOfSuperAdminLabel: '[data-cy="number-of-super-admins-label"]',
+  noOfSuperAdminfield: '[data-cy="super-admins-field"]',
+  tablesTab: '[data-cy="tables-sub-tab"]',
+  noOfTablesLabel: '[data-cy="number-of-tables-label"]',
+  noOfTablesfield: '[data-cy="tables-field"]',
+  expiryStatus: '[data-cy="license-expiry-status"]',
+  licenseTextArea: '[data-cy="license-text-area"]',
+  paidFeatureButton: '[data-cy="paid-feature-button"]',
+  accessTabTitle: '[data-cy="access-tab-title"]',
+  enterpriseGradientIcon: '[data-cy="enterprise-gradient-icon"]',
+  warningInfoText: '[data-cy="warning-info-text"]',
+  lockGradientIcon: '[data-cy="lock-gradient"]',
+  dsGradientIcon: '[data-cy="datasource-gradient"]',
+};
diff --git a/cypress-tests/cypress/constants/texts/common.js b/cypress-tests/cypress/constants/texts/common.js
index 996de524bf..eb2070f0fc 100644
--- a/cypress-tests/cypress/constants/texts/common.js
+++ b/cypress-tests/cypress/constants/texts/common.js
@@ -263,3 +263,24 @@ export const widgetValue = (widgetName) => {
 export const customValidation = (name, message) => {
   return ["{{", `components.${name}.value ? true : '${message}'}}`];
 };
+
+export const settingsText = {
+  settingsHeader: "Settings",
+  allUsersListItem: "All Users",
+  allWorkspacesListItem: "All workspaces",
+  manageInstanceSettingsListItem: "Manage instance settings",
+  whiteLabellingListItem: "White labelling",
+  instanceLoginListItem: "Instance login",
+  emailProtocolListItem: "Email protocol (SMTP)",
+  licenseListItem: "License",
+};
+
+export const workspaceSettingsText = {
+  WorkspaceSettingsHeader: "Workspace settings",
+  usersListItem: "Users",
+  groupsListItem: "Groups",
+  workspaceLoginListItem: "Workspace login",
+  customStylesListItem: "Custom styles",
+  configureGitSyncListItem: "Configure git sync",
+  themesListItem: "Themes",
+};
diff --git a/cypress-tests/cypress/constants/texts/license.js b/cypress-tests/cypress/constants/texts/license.js
new file mode 100644
index 0000000000..8e847cc08b
--- /dev/null
+++ b/cypress-tests/cypress/constants/texts/license.js
@@ -0,0 +1,68 @@
+export const licenseText = {
+  comparePlansText: "Compare plans",
+  license: "License",
+  licenseOverviewTitle: "License overview",
+  licenseKeyLabel: "License Key",
+  limitsTabTitle: "Limits",
+  accessTabTitle: "Access",
+  domainTabTitle: "Domain",
+  updateButton: "Update",
+
+  licenseKeyTab: {
+    licenseKeyTabTitle: "License Key",
+    licenseLabel: "License",
+    enterLicenseKeyPlaceholder: "Enter license key",
+  },
+
+  limitsTab: {
+    aiCreditsSubTab: "AI credits",
+    appsSubTab: "Apps",
+    workspacesSubTab: "Workspaces",
+    usersSubTab: "Users",
+    workflowsSubTab: "Workflows",
+    tablesSubTab: "Tables",
+  },
+
+  aiCreditsSubTab: {
+    monthlyRecurringLabel: "Monthly recurring",
+    addOnCreditsLabel: "Add on credits",
+  },
+
+  appsSubTab: {
+    noOfAppsLabel: "Number of Apps",
+  },
+
+  workspacesSubTab: {
+    noOfWorkspacesLabel: "Number of Workspaces",
+  },
+
+  usersSubTab: {
+    noOfTotalUsersLabel: "Number of Total Users",
+    noOfBuildersLabel: "Number of Builders",
+    noOfEndUsersLabel: "Number of End Users",
+    noOfSuperAdminsLabel: "Number of Super Admins",
+  },
+
+  workflowsSubTab: {
+    noOfWorkflowsLabel: "Number of Workflows",
+  },
+
+  tablesSubTab: {
+    noOfTablesLabel: "Number of Tables",
+  },
+
+  accessTab: {
+    openIDConnectLabel: "Open ID Connect",
+    apiKeyLabel: "Audit Logs",
+    ldapLabel: "LDAP",
+    samlLabel: "SAML",
+    customStylesLabel: "Custom styles",
+    multiEnvironmentLabel: "Multi-Environment",
+    gitSyncLabel: "GitSync",
+  },
+
+  domainTab: {
+    noDomainLinkedLabel: "No Domain Linked",
+    noDomainInfoText: "Please contact ToolJet team to link your domain",
+  },
+};
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/eeTestcases/licensing/licensingHappyPath.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/eeTestcases/licensing/licensingHappyPath.cy.js
new file mode 100644
index 0000000000..310b645d10
--- /dev/null
+++ b/cypress-tests/cypress/e2e/happyPath/platform/eeTestcases/licensing/licensingHappyPath.cy.js
@@ -0,0 +1,202 @@
+import { commonSelectors } from "Selectors/common";
+import { commonText, settingsText, workspaceSettingsText } from "Texts/common";
+import { fake } from "Fixtures/fake";
+import { licenseText } from "Texts/license";
+import { licenseSelectors } from "Selectors/license";
+import { usersSelector } from "Selectors/manageUsers";
+import {
+  switchTabs,
+  verifylicenseTab,
+  verifySubTabs,
+  verifyAccessTab,
+  verifyDomainTab,
+  verifyResourceLimit,
+  verifyTooltip,
+} from "Support/utils/license";
+import * as common from "Support/utils/common";
+import { dashboardSelector } from "../../../../../constants/selectors/dashboard";
+import { navigateToEditUser } from "Support/utils/manageUsers";
+import {
+  instanceSettingsSelector,
+  whiteLabellingSelectors,
+} from "Selectors/eeCommon";
+import { workflowSelector } from "Selectors/workflows";
+
+describe("License Page", () => {
+  const data = {};
+
+  beforeEach(() => {
+    cy.apiLogin();
+    cy.visit("/");
+  });
+
+  it("Should verify license page elements with the basic plan ", () => {
+    common.navigateToSettingPage();
+    cy.get(licenseSelectors.listOfItems(licenseText.license)).click();
+
+    cy.contains(licenseText.licenseOverviewTitle).should("be.visible");
+    cy.get(commonSelectors.breadcrumbPageTitle).should(
+      "have.text",
+      licenseText.license
+    );
+    cy.get(licenseSelectors.comparePlansText)
+      .should("be.visible")
+      .and("contain.text", licenseText.comparePlansText);
+
+    switchTabs(licenseText.licenseKeyLabel);
+    verifylicenseTab();
+
+    switchTabs(licenseText.limitsTabTitle);
+    verifySubTabs(
+      licenseText.limitsTab.aiCreditsSubTab,
+      licenseText.aiCreditsSubTab,
+      {
+        "Monthly recurring": "0/0",
+        "Add on credits": "0/0",
+      }
+    );
+    verifySubTabs(licenseText.limitsTab.appsSubTab, licenseText.appsSubTab, {
+      "Number of Apps": "1/2",
+    });
+    verifySubTabs(
+      licenseText.limitsTab.workspacesSubTab,
+      licenseText.workspacesSubTab,
+      {
+        "Number of Workspaces": "1/1",
+      }
+    );
+    verifySubTabs(licenseText.limitsTab.usersSubTab, licenseText.usersSubTab, {
+      "Number of Total Users": "1/52",
+      "Number of Builders": "1/2",
+      "Number of End Users": "0/50",
+      "Number of Super Admins": "1/1",
+    });
+    verifySubTabs(
+      licenseText.limitsTab.workflowsSubTab,
+      licenseText.workflowsSubTab,
+      {
+        "Number of Workflows": "0/2",
+      }
+    );
+    verifySubTabs(
+      licenseText.limitsTab.tablesSubTab,
+      licenseText.tablesSubTab,
+      {
+        "Number of Tables": "Unlimited",
+      }
+    );
+
+    switchTabs(licenseText.accessTabTitle);
+    verifyAccessTab();
+
+    switchTabs(licenseText.domainTabTitle);
+    verifyDomainTab();
+  });
+
+  it.only("Should verify banners and tooltips with the basic plan ", () => {
+    cy.get(commonSelectors.workspaceName).click();
+
+    cy.get('[data-cy="workspace-count"]').should("be.visible");
+    verifyResourceLimit("workspaces", "basic");
+
+    cy.get(dashboardSelector.homePageContent).click();
+    verifyResourceLimit("apps", "basic");
+
+    // cy.get(workflowSelector.globalWorkFlowsIcon).click();
+    // verifyResourceLimit("workflow", "basic");
+
+    common.navigateToManageUsers();
+    cy.get(usersSelector.buttonAddUsers).click();
+    verifyResourceLimit("builders", "basic", "usage");
+
+    cy.reload();
+
+    common.navigateToManageGroups();
+    cy.get('[data-cy="create-new-group-button"]').should("be.disabled");
+    verifyTooltip(
+      '[data-cy="create-new-group-button"]',
+      "Custom groups are available only in paid plans",
+      true
+    );
+
+    verifyResourceLimit(
+      "custom-groups",
+      "basic",
+      "custom-groups",
+      "Custom groups & permissions are paid features"
+    );
+
+    cy.get(
+      licenseSelectors.listOfItems(workspaceSettingsText.customStylesListItem)
+    ).click();
+    cy.get('[data-cy="modal-close"]').click();
+    cy.get(licenseSelectors.paidFeatureButton).should("be.visible");
+
+    cy.get(
+      licenseSelectors.listOfItems(
+        workspaceSettingsText.configureGitSyncListItem
+      )
+    ).click();
+    cy.get(licenseSelectors.paidFeatureButton).should("be.visible");
+
+    cy.get(
+      licenseSelectors.listOfItems(workspaceSettingsText.themesListItem)
+    ).click();
+    verifyResourceLimit(
+      "custom-themes",
+      "basic",
+      "custom-themes",
+      "Custom themes is our paid feature. Upgrade to a paid plan to add and customize themes."
+    );
+
+    common.navigateToSettingPage();
+    cy.get(licenseSelectors.listOfItems(settingsText.allUsersListItem)).click({
+      force: true,
+    });
+    navigateToEditUser(commonText.email);
+    verifyResourceLimit(
+      "edit-user",
+      "basic",
+      "edit-user",
+      "Edit user details with our paid plans. For more,"
+    );
+
+    cy.reload();
+    cy.get(
+      licenseSelectors.listOfItems(settingsText.manageInstanceSettingsListItem)
+    ).click();
+    cy.get(licenseSelectors.paidFeatureButton).should("be.visible");
+    cy.get(instanceSettingsSelector.allowWorkspaceToggle).should("be.disabled");
+    cy.get(
+      licenseSelectors.listOfItems(settingsText.whiteLabellingListItem)
+    ).click();
+    cy.get(licenseSelectors.paidFeatureButton).should("be.visible");
+    cy.get(whiteLabellingSelectors.appLogoInput).should("be.disabled");
+
+    cy.get(commonSelectors.workspaceConstantsIcon).click();
+    verifyTooltip(
+      licenseSelectors.listOfItems("staging"),
+      "Multi-environments are available only in paid plans",
+      true
+    );
+    verifyTooltip(
+      licenseSelectors.listOfItems("production"),
+      "Multi-environments are available only in paid plans",
+      true
+    );
+    cy.get(commonSelectors.dashboardIcon).click();
+    cy.apiCreateApp(`${fake.companyName}-license-App`);
+    cy.openApp();
+    cy.get('[data-cy="list-current-env-name"]').click();
+    verifyTooltip(
+      '[data-cy="env-name-dropdown"] :nth-child(1)',
+      "Multi-environments are available only in paid plans",
+      true
+    );
+    verifyTooltip(
+      '[data-cy="env-name-dropdown"] :nth-child(2)',
+      "Multi-environments are available only in paid plans",
+      true
+    );
+  });
+});
diff --git a/cypress-tests/cypress/fixtures/license/license.json b/cypress-tests/cypress/fixtures/license/license.json
new file mode 100644
index 0000000000..0b53c42c4f
--- /dev/null
+++ b/cypress-tests/cypress/fixtures/license/license.json
@@ -0,0 +1,24 @@
+{
+  "basic": {
+    "planName": "Basic",
+    "Apps": 2,
+    "Workspaces": 1,
+    "Total Users": 52,
+    "Builders": 2,
+    "End Users": 50,
+    "Super Admins": 1,
+    "Workflows": 2,
+    "Tables": "Unlimited"
+  },
+  "enterprise": {
+    "planName": "Enterprise",
+    "Apps": 3,
+    "Workspaces": 2,
+    "Total Users": 3,
+    "Builders": 2,
+    "End Users": 1,
+    "Super Admins": 1,
+    "Workflows": 2,
+    "Tables": 2
+  }
+}
diff --git a/cypress-tests/cypress/support/utils/common.js b/cypress-tests/cypress/support/utils/common.js
index fa7d24ff42..7f262fcff5 100644
--- a/cypress-tests/cypress/support/utils/common.js
+++ b/cypress-tests/cypress/support/utils/common.js
@@ -7,6 +7,7 @@ import {
 import { profileSelector } from "Selectors/profile";
 import { appPromote } from "Support/utils/platform/multiEnv";
 import { commonText, path } from "Texts/common";
+import { commonEeSelectors } from "Selectors/eeCommon";
 
 export const navigateToProfile = () => {
   cy.get(commonSelectors.settingsIcon).click();
@@ -252,3 +253,9 @@ export const fillInputField = (data) => {
     cy.get(inputSelector).type(`{selectall}{backspace}${value}`);
   });
 };
+
+export const navigateToSettingPage = () => {
+  cy.get(commonSelectors.settingsIcon).click();
+  cy.get(commonEeSelectors.instanceSettingIcon).click();
+  cy.get(commonSelectors.pageSectionHeader).should("be.visible");
+};
diff --git a/cypress-tests/cypress/support/utils/license.js b/cypress-tests/cypress/support/utils/license.js
new file mode 100644
index 0000000000..9a7c74d17a
--- /dev/null
+++ b/cypress-tests/cypress/support/utils/license.js
@@ -0,0 +1,224 @@
+import { licenseSelectors } from "Selectors/license";
+import { licenseText } from "Texts/license";
+
+export const switchTabs = (tabTitle) => {
+  cy.get(licenseSelectors.listOfItems(tabTitle)).should("be.visible").click();
+  cy.get(licenseSelectors.tabTitle(tabTitle)).should("have.text", tabTitle);
+};
+
+export const verifylicenseTab = () => {
+  cy.get(licenseSelectors.label(licenseText.licenseKeyTab.licenseLabel)).should(
+    "be.visible"
+  );
+  cy.get(licenseSelectors.licenseTextArea).should(
+    "have.attr",
+    "placeholder",
+    licenseText.licenseKeyTab.enterLicenseKeyPlaceholder
+  );
+};
+
+export const verifySubTabs = (subTabName, subTabDataObj, valuesObj) => {
+  const subTabData = Object.values(subTabDataObj);
+
+  cy.get(licenseSelectors.subTab(subTabName))
+    .verifyVisibleElement("have.text", subTabName)
+    .click();
+
+  subTabData.forEach((label) => {
+    const displayLabel = /^Number of\s+/i.test(label)
+      ? label.replace(/^Number of\s+/i, "")
+      : label;
+
+    cy.get(
+      licenseSelectors.numberOfTextLabel(displayLabel)
+    ).verifyVisibleElement("have.text", label);
+
+    if (valuesObj && valuesObj[displayLabel] !== undefined) {
+      cy.get(licenseSelectors.inputField(displayLabel)).verifyVisibleElement(
+        "have.value",
+        valuesObj[displayLabel]
+      );
+    }
+  });
+};
+
+export const verifyAccessTab = () => {
+  const accessTabLabels = Object.values(licenseText.accessTab);
+  accessTabLabels.forEach((accessTabLabel) => {
+    cy.get(licenseSelectors.label(accessTabLabel)).verifyVisibleElement(
+      "have.text",
+      accessTabLabel
+    );
+    cy.get(licenseSelectors.label(accessTabLabel))
+      .next('[data-cy="circular-toggle-disabled-icon"]')
+      .should("be.visible");
+  });
+};
+
+export const verifyDomainTab = () => {
+  cy.get(licenseSelectors.warningIcon).should("be.visible");
+  cy.get(licenseSelectors.noDomainLinkedLabel).verifyVisibleElement(
+    "have.text",
+    licenseText.domainTab.noDomainLinkedLabel
+  );
+  cy.get(licenseSelectors.noDomainInfoText).verifyVisibleElement(
+    "have.text",
+    licenseText.domainTab.noDomainInfoText
+  );
+};
+
+export const verifyTooltip = (
+  selector,
+  expectedTooltip,
+  isDisabled = false
+) => {
+  const hoverTarget = isDisabled ? cy.get(selector).parent() : cy.get(selector);
+  hoverTarget.trigger("mouseover");
+
+  cy.get(".tooltip", { timeout: 1000 })
+    .should("be.visible")
+    .and("contain.text", expectedTooltip);
+
+  hoverTarget.trigger("mouseout");
+};
+
+const normalizeText = (text) =>
+  text
+    .trim()
+    .replace(/[\u00A0\s]+/g, " ")
+    .replace(/[\u2018\u2019]/g, "'")
+    .replace(/[\u201C\u201D]/g, '"');
+
+const verifyLimitUI = (
+  type,
+  baseLabel,
+  headingSelector,
+  infoSelector,
+  limit
+) => {
+  cy.get(headingSelector)
+    .invoke("text")
+    .then((headingText) => {
+      cy.log(`Heading: ${headingText}`);
+      cy.get(infoSelector)
+        .invoke("text")
+        .then((infoText) => {
+          cy.log(`Info: ${infoText}`);
+
+          const ratioMatch = headingText.match(/(\d+)\/(\d+)/);
+
+          if (ratioMatch) {
+            const [_, currentCount, headingLimit] = ratioMatch.map(Number);
+            cy.log(`Current ${type}: ${currentCount}`);
+
+            expect(headingLimit).to.equal(limit);
+            expect(headingText).to.match(
+              new RegExp(`${baseLabel}\\s+limit\\s+nearing`, "i")
+            );
+            expect(infoText).to.match(/nearing/i);
+          } else {
+            expect(headingText).to.match(
+              new RegExp(`${baseLabel}\\s+limit\\s+reached`, "i")
+            );
+            expect(infoText).to.contain(
+              `reached your limit for number of ${type}`
+            );
+          }
+        });
+    });
+};
+
+const verifyFeatureBanner = (cyPrefix, expectedHeading = null) => {
+  const isSmallBanner = cyPrefix === "edit-user";
+  const headingSelector = isSmallBanner
+    ? '[data-cy="license-banner-heading"]'
+    : `[data-cy="${cyPrefix}-limit-heading"]`;
+  const infoSelector = isSmallBanner
+    ? '[data-cy="license-banner-info"]'
+    : `[data-cy="${cyPrefix}-limit-info"]`;
+
+  cy.get(headingSelector)
+    .should("be.visible")
+    .invoke("text")
+    .then((headingText) => {
+      const actual = normalizeText(headingText);
+      if (expectedHeading) {
+        const expected = normalizeText(expectedHeading);
+        expect(actual).to.equal(expected);
+      }
+    });
+  cy.get("body").then(($body) => {
+    if ($body.find(infoSelector).length > 0) {
+      cy.get(infoSelector).then(($el) => {
+        const text = $el.text().trim();
+        if ($el.is(":visible") && text) cy.log(`Feature banner info: ${text}`);
+        else cy.log("Info element empty or hidden — OK");
+      });
+    }
+  });
+};
+
+const getLimitFromPlan = (planName, type) => {
+  return cy.fixture("license/license.json").then((licenseData) => {
+    const planKey = planName.toLowerCase();
+    const plan = licenseData[planKey];
+    expect(plan, `Plan "${planName}" should exist in license.json`).to.not.be
+      .undefined;
+
+    const resourceKeyMap = {
+      workspaces: "Workspaces",
+      apps: "Apps",
+      tables: "Tables",
+      workflows: "Workflows",
+      users: "Total Users",
+      builders: "Builders",
+      endusers: "End Users",
+      superadmins: "Super Admins",
+    };
+
+    const resourceKey = resourceKeyMap[type];
+    if (!resourceKey) return cy.wrap(null);
+
+    const limit = plan[resourceKey];
+    expect(limit, `Limit for "${resourceKey}" should exist in ${planName} plan`)
+      .to.not.be.undefined;
+
+    cy.log(`Using limit from ${planName} plan: ${resourceKey} = ${limit}`);
+    return cy.wrap(limit);
+  });
+};
+
+export const verifyResourceLimit = (
+  resourceType,
+  limitOrPlan = null,
+  dataCyPrefix = null,
+  expectedHeading = null
+) => {
+  const type = resourceType.toLowerCase().trim();
+  const cyPrefix = dataCyPrefix || type;
+  const typeCapitalized = type.charAt(0).toUpperCase() + type.slice(1);
+  const baseLabel = typeCapitalized.slice(0, -1);
+  const headingSelector = `[data-cy="${cyPrefix}-limit-heading"]`;
+  const infoSelector = `[data-cy="${cyPrefix}-limit-info"]`;
+
+  const isNumber = typeof limitOrPlan === "number";
+  const planName = isNumber ? null : limitOrPlan;
+
+  if (isNumber) {
+    return verifyLimitUI(
+      type,
+      baseLabel,
+      headingSelector,
+      infoSelector,
+      limitOrPlan
+    );
+  }
+
+  getLimitFromPlan(planName, type).then((limit) => {
+    if (limit === null) {
+      verifyFeatureBanner(cyPrefix, expectedHeading);
+    } else {
+      verifyLimitUI(type, baseLabel, headingSelector, infoSelector, limit);
+    }
+  });
+};
diff --git a/cypress-tests/cypress/support/utils/manageUsers.js b/cypress-tests/cypress/support/utils/manageUsers.js
index b52f4cefc0..26d8ad7a18 100644
--- a/cypress-tests/cypress/support/utils/manageUsers.js
+++ b/cypress-tests/cypress/support/utils/manageUsers.js
@@ -480,7 +480,11 @@ export const openEditUserDetails = (
 
   verifyUserStatusAndMetadata(email, activeStatusText, expectedMetadata);
 
-  cy.contains("td", email)
+  navigateToEditUser(email);
+};
+ 
+export const navigateToEditUser = (email) => {
+ cy.contains("td", email)
     .parent()
     .within(() => {
       cy.get('[data-cy="user-actions-button"]').click();
@@ -489,6 +493,3 @@ export const openEditUserDetails = (
     .verifyVisibleElement("have.text", "Edit user details")
     .click();
 };
-
-
-
diff --git a/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGroupPermissions/BaseManageGroupPermissions.jsx b/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGroupPermissions/BaseManageGroupPermissions.jsx
index 8768b56e95..029dab6cbd 100644
--- a/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGroupPermissions/BaseManageGroupPermissions.jsx
+++ b/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGroupPermissions/BaseManageGroupPermissions.jsx
@@ -21,7 +21,7 @@ import _ from 'lodash';
 import posthogHelper from '@/modules/common/helpers/posthogHelper';
 
 class BaseManageGroupPermissions extends React.Component {
-  constructor (props) {
+  constructor(props) {
     super(props);
 
     this.state = {
@@ -50,7 +50,7 @@ class BaseManageGroupPermissions extends React.Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     this.fetchGroups();
   }
 
@@ -381,7 +381,7 @@ class BaseManageGroupPermissions extends React.Component {
       });
   };
 
-  render () {
+  render() {
     const {
       isLoading,
       showNewGroupForm,
@@ -846,6 +846,7 @@ class BaseManageGroupPermissions extends React.Component {
                     classes="group-banner"
                     size="xsmall"
                     type={featureAccess?.licenseStatus?.licenseType}
+                    bannerType="custom-groups"
                     customMessage={'Custom groups & permissions are paid features'}
                     showCustomGroupBanner={true}
                   />
diff --git a/frontend/src/modules/common/components/BaseWorkspaceDropDown/BaseWorkspaceDropDown.jsx b/frontend/src/modules/common/components/BaseWorkspaceDropDown/BaseWorkspaceDropDown.jsx
index fbbe09e50b..240e8ca78e 100644
--- a/frontend/src/modules/common/components/BaseWorkspaceDropDown/BaseWorkspaceDropDown.jsx
+++ b/frontend/src/modules/common/components/BaseWorkspaceDropDown/BaseWorkspaceDropDown.jsx
@@ -22,7 +22,9 @@ function BaseWorkspaceDropDown({ ...props }) {
         >
           <div className="org-custom-select-header-wrap" style={{ padding: '8px 12px' }}>
             <div className="row cursor-pointer d-flex align-items-center">
-              <div className="col-9 select-header-font">Workspaces ({menuProps.options.length})</div>
+              <div className="col-9 select-header-font" data-cy="workspace-count">
+                Workspaces ({menuProps.options.length})
+              </div>
               <div className="col-3">
                 <WorkspaceActions
                   super_admin={super_admin}

From 5146df55fe13b2b15aff98dd857bcc2d4e4cde5a Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Mon, 27 Oct 2025 15:07:52 +0530
Subject: [PATCH 122/157] Fix: On first drop, component name is not following
 traditional naming convention

---
 .../AppBuilder/_stores/slices/componentsSlice.js   | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/AppBuilder/_stores/slices/componentsSlice.js b/frontend/src/AppBuilder/_stores/slices/componentsSlice.js
index 19ac269350..f7b9d5b4ca 100644
--- a/frontend/src/AppBuilder/_stores/slices/componentsSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/componentsSlice.js
@@ -2159,16 +2159,20 @@ export const createComponentsSlice = (set, get) => ({
         ...Object.fromEntries(acc.map((component) => [component.id, component])),
       };
 
-      const componentNameInDefinition = componentDefinition.component.name;
+      // When component is dropped on canvas for the first time
+      // In default component definition, .name holds the correct computed name for eg. button1
+      // Whereas .component.name holds the default component name without any computation for eg. Button
+      // Also .name is undefined when we reload app and fetch components from the backend. Hence below mentioned OR condition
+      const initialComponentName = componentDefinition.name || componentDefinition.component.name;
 
       // Check if there is any existing component with the same name
-      const isNameValid = !Object.values(currentComponents).some(
-        (component) => component.component.name === componentNameInDefinition
+      const isExistingName = Object.values(currentComponents).some(
+        (component) => component.component.name === initialComponentName
       );
 
       // If name is valid then use the same name but if not then fallback to old flow and compute component name
-      const componentName = isNameValid
-        ? componentNameInDefinition
+      const componentName = !isExistingName
+        ? initialComponentName
         : computeComponentName(componentDefinition.component.component, currentComponents);
 
       const getComponentProperties = (componentDefinition) => {

From 031085ff9d28c06d6459ab2ac0e9e335edc09c67 Mon Sep 17 00:00:00 2001
From: adishM98 Bot <adish.madhu@gmail.com>
Date: Mon, 27 Oct 2025 16:18:55 +0530
Subject: [PATCH 123/157] fix(ci): Resolve disk space issues in Cypress
 Platform workflow

---
 .github/workflows/cypress-platform.yml | 45 +++++++++++++++++++++++---
 1 file changed, 40 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/cypress-platform.yml b/.github/workflows/cypress-platform.yml
index 0a3970533b..9e3e2405f2 100644
--- a/.github/workflows/cypress-platform.yml
+++ b/.github/workflows/cypress-platform.yml
@@ -37,6 +37,29 @@ jobs:
           echo "Labels: ${{ toJSON(github.event.pull_request.labels.*.name) }}"
           echo "Matrix edition: ${{ matrix.edition }}"
 
+      - name: Free up disk space
+        run: |
+          echo "Available disk space before cleanup:"
+          df -h
+
+          # Remove unnecessary packages
+          sudo apt-get remove -y '^aspnetcore-.*' '^dotnet-.*' '^llvm-.*' '^php.*' '^mongodb-.*' '^mysql-.*' azure-cli google-cloud-sdk hhvm google-chrome-stable firefox powershell mono-devel || true
+          sudo apt-get autoremove -y
+          sudo apt-get clean
+
+          # Remove large directories
+          sudo rm -rf /usr/share/dotnet
+          sudo rm -rf /usr/local/lib/android
+          sudo rm -rf /opt/ghc
+          sudo rm -rf /usr/local/share/boost
+          sudo rm -rf "$AGENT_TOOLSDIRECTORY"
+
+          # Clean Docker
+          docker system prune -af --volumes
+
+          echo "Available disk space after cleanup:"
+          df -h
+
       - name: Checkout
         uses: actions/checkout@v3
         with:
@@ -119,7 +142,10 @@ jobs:
           echo "LICENSE_KEY=${{ secrets.RENDER_LICENSE_KEY }}" >> .env
 
       - name: clean up old docker containers
-        run: docker system prune -af
+        run: |
+          docker system prune -af --volumes
+          echo "Disk space after Docker cleanup:"
+          df -h
 
       - name: Pulling the docker-compose file
         run: curl -LO https://tooljet-test.s3.us-west-1.amazonaws.com/docker-compose.yaml && mkdir postgres_data
@@ -181,7 +207,7 @@ jobs:
           fi
 
           echo "✅ Server is ready!"
-          
+
       - name: Test database connection
         run: |
           # Wait for database to be ready
@@ -421,7 +447,10 @@ jobs:
           echo "LICENSE_KEY=${{ secrets.RENDER_LICENSE_KEY }}" >> .env
 
       - name: clean up old docker containers
-        run: docker system prune -af
+        run: |
+          docker system prune -af --volumes
+          echo "Disk space after Docker cleanup:"
+          df -h
 
       - name: Pulling the docker-compose file
         run: curl -LO https://tooljet-test.s3.us-west-1.amazonaws.com/docker-compose.yaml && mkdir postgres_data
@@ -607,7 +636,10 @@ jobs:
           echo "LICENSE_KEY=${{ secrets.RENDER_LICENSE_KEY }}" >> .env
 
       - name: clean up old docker containers
-        run: docker system prune -af
+        run: |
+          docker system prune -af --volumes
+          echo "Disk space after Docker cleanup:"
+          df -h
 
       - name: Pulling the docker-compose file
         run: curl -LO https://tooljet-test.s3.us-west-1.amazonaws.com/docker-compose.yaml && mkdir postgres_data
@@ -805,7 +837,10 @@ jobs:
           echo "LICENSE_KEY=${{ secrets.RENDER_LICENSE_KEY }}" >> .env
 
       - name: clean up old docker containers
-        run: docker system prune -af
+        run: |
+          docker system prune -af --volumes
+          echo "Disk space after Docker cleanup:"
+          df -h
 
       - name: Pulling the docker-compose file
         run: curl -LO https://tooljet-test.s3.us-west-1.amazonaws.com/docker-compose.yaml && mkdir postgres_data

From 88dd7afbd28761554373d0eb1cd10de62759cb01 Mon Sep 17 00:00:00 2001
From: emidhun <midhun752@gmail.com>
Date: Mon, 27 Oct 2025 19:05:28 +0530
Subject: [PATCH 124/157] Optimise import final it block

---
 cypress-tests/cypress/commands/commands.js    |   2 +-
 .../apps/privateAndpublicApps.cy.js           | 109 ++++++++----------
 cypress-tests/cypress/support/utils/apps.js   |  10 +-
 3 files changed, 56 insertions(+), 65 deletions(-)

diff --git a/cypress-tests/cypress/commands/commands.js b/cypress-tests/cypress/commands/commands.js
index d6fddab825..94f1d2ebb1 100644
--- a/cypress-tests/cypress/commands/commands.js
+++ b/cypress-tests/cypress/commands/commands.js
@@ -66,7 +66,7 @@ Cypress.Commands.add("createApp", (appName) => {
       : commonSelectors.appCreateButton;
 
   cy.get("body").then(($title) => {
-    cy.get(getAppButtonSelector($title)).scrollIntoView().click();
+    cy.get(getAppButtonSelector($title)).scrollIntoView().click({ force: true });//workaround for cypress dashboard click issue
     cy.clearAndType('[data-cy="app-name-input"]', appName);
     cy.get('[data-cy="create-app"]').click();
   });
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/privateAndpublicApps.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/privateAndpublicApps.cy.js
index 7a76c20316..a79bc9d7ec 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/privateAndpublicApps.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/privateAndpublicApps.cy.js
@@ -1,7 +1,7 @@
 import { commonSelectors, commonWidgetSelector } from "Selectors/common";
 import { fake } from "Fixtures/fake";
 import { logout, releaseApp } from "Support/utils/common";
-import { inviteUserToWorkspace } from "Support/utils/manageUsers";
+import { inviteUserToWorkspace, fetchAndVisitInviteLinkViaMH } from "Support/utils/manageUsers";
 import { setSignupStatus } from "Support/utils/manageSSO";
 import { onboardingSelectors } from "Selectors/onboarding";
 import { commonText } from "Texts/common";
@@ -28,6 +28,14 @@ describe(
       email: fake.email.toLowerCase(),
       workspaceName: fake.firstName,
       workspaceSlug: fake.firstName.toLowerCase().replace(/\s+/g, "-"),
+      appPublicSlug: `${fake.companyName} Public App`
+        .toLowerCase()
+        .replace(/\s+/g, "-"),
+      appPublicName: `${fake.companyName} Public App`,
+      appPrivateSlug: `${fake.companyName} Private App`
+        .toLowerCase()
+        .replace(/\s+/g, "-"),
+      appPrivateName: `${fake.companyName} Private App`,
     });
 
     const verifyWidget = (widgetName) => {
@@ -163,78 +171,58 @@ describe(
       verifyWidget("text1");
     });
 
-    it.skip("should redirect to workspace login and handle signup flow of existing and non-existing user", () => {
-      setSignupStatus(true);
-      setupAppWithSlug(data.appName, data.slug);
-
-
-      cy.visitSlug({ actualUrl: getAppUrl(data.slug) });
-      verifyWidget("text1");
-
-      // cy.get(commonSelectors.workspaceName).verifyVisibleElement(
-      //   "have.text",
-      //   "My workspace"
-      // );
-      cy.apiLogout();
-      cy.visitSlug({ actualUrl: getAppUrl(data.slug) });
+    it("should redirect to workspace login and handle signup flow of existing and non-existing user", () => {
       cy.intercept("POST", "/api/onboarding/signup").as("signup");
-      cy.get(commonSelectors.createAnAccountLink).click();
-      cy.wait(2000);
+      cy.intercept('GET', '**/api/white-labelling').as('whiteLabelling');
+
+      cy.apiUserInvite(`${data.firstName}_invited`, `invited_${data.email}`);
+
+      setSignupStatus(true);
+      setupAppWithSlug(data.appPublicName, data.appPublicSlug, 'public');
+      const publicAppId = Cypress.env("appId");
+      cy.apiMakeAppPublic(publicAppId);
+      setupAppWithSlug(data.appPrivateName, data.appPrivateSlug);
+      cy.visitSlug({ actualUrl: getAppUrl(data.slug) })
+
+      cy.visitSlug({ actualUrl: getAppUrl(data.appPublicSlug) });
+      verifyWidget('public')
+
+      cy.visitSlug({ actualUrl: getAppUrl(data.appPrivateSlug) });
+      verifyWidget('private')
+
+      cy.apiLogout();
+
+      cy.visitSlug({ actualUrl: getAppUrl(data.appPublicSlug) });
+      verifyWidget('public')
+
+      cy.visitSlug({ actualUrl: getAppUrl(data.appPrivateSlug) });
+      cy.wait('@whiteLabelling');
+
+      cy.get(commonSelectors.createAnAccountLink, { timeout: 20000 }).click();
+
+      cy.get(onboardingSelectors.loginPasswordInput).should("be.visible").click({ force: true });
       cy.clearAndType(commonSelectors.inputFieldFullName, data.firstName);
       cy.clearAndType('[data-cy="email-input"]', data.email);
       cy.clearAndType(onboardingSelectors.loginPasswordInput, "password");
       cy.get(commonSelectors.signUpButton).click();
+      cy.wait('@signup');
+      cy.get(`[data-cy="resend-verification-email-button"]`).should("be.visible");
 
-      cy.wait("@signup").then((interception) => {
-        expect(interception.response.statusCode).to.eq(201);
-      });
+      fetchAndVisitInviteLinkViaMH(data.email);
+      verifyWidget('private')
 
-      onboardUserFromAppLink(data.email, data.slug);
-      verifyWidget("text1");
-      cy.visit("/");
-      logout();
-      cy.get(onboardingSelectors.signInButton, { timeout: 20000 }).should("be.visible");
+      // cy.apiLogout();
 
-      cy.defaultWorkspaceLogin();
-      cy.apiCreateWorkspace(data.workspaceName, data.workspaceSlug);
-      cy.apiLogout();
-      cy.apiLogin();
-      cy.visit(`${data.workspaceSlug}`);
-      setSignupStatus(true, data.workspaceName);
+      // cy.visitSlug({ actualUrl: getAppUrl(data.appPrivateSlug) })
+      // cy.get(onboardingSelectors.loginPasswordInput).should("be.visible").click({ force: true });
+      // cy.clearAndType('[data-cy="email-input"]', `invited_${data.email}`);
+      // cy.clearAndType(onboardingSelectors.loginPasswordInput, "password");
 
-      data.slug = fake.firstName.toLowerCase().replace(/\s+/g, "-");
-      cy.reload()
-      cy.createApp(data.appName);
 
-      cy.dragAndDropWidget("Text", 500, 500);
-      releaseApp();
-      setUpSlug(data.slug);
-      cy.forceClickOnCanvas();
-      cy.backToApps();
 
-      cy.apiLogout();
-      cy.visitSlug({ actualUrl: getAppUrl(data.slug) });
-      cy.log("Visiting app URL: ", getAppUrl(data.slug));
-
-      cy.get(commonSelectors.workspaceName).verifyVisibleElement(
-        "have.text",
-        data.workspaceName
-      );
-
-      cy.get(commonSelectors.createAnAccountLink).click();
-      cy.clearAndType(commonSelectors.inputFieldFullName, data.firstName);
-      cy.clearAndType('[data-cy="email-input"]', data.email);
-      cy.clearAndType(onboardingSelectors.loginPasswordInput, "password");
-      cy.get(commonSelectors.signUpButton).click();
-      cy.wait("@signup").then((interception) => {
-        expect(interception.response.statusCode).to.eq(201);
-      });
-
-      onboardUserFromAppLink(data.email, data.slug, data.workspaceName, false);
-      verifyWidget("text1");
     });
 
-    it.only("should verify restricted app access", () => {
+    it("should verify restricted app access", () => {
       data.workspaceName = fake.firstName;
       data.workspaceSlug = fake.firstName.toLowerCase().replace(/\s+/g, "-");
 
@@ -251,7 +239,6 @@ describe(
 
       inviteUserToWorkspace(data.firstName, data.email);
 
-      cy.visitSlug({ actualUrl: getAppUrl(data.slug) });
       verifyRestrictedAccess();
       cy.get(commonSelectors.backToHomeButton).click();
       cy.get(commonSelectors.homePageLogo).should("be.visible");
diff --git a/cypress-tests/cypress/support/utils/apps.js b/cypress-tests/cypress/support/utils/apps.js
index 01bae4f42a..5f2848025c 100644
--- a/cypress-tests/cypress/support/utils/apps.js
+++ b/cypress-tests/cypress/support/utils/apps.js
@@ -76,16 +76,20 @@ export const setUpSlug = (slug) => {
   cy.get(commonWidgetSelector.modalCloseButton).click();
 };
 
-export const setupAppWithSlug = (appName, slug) => {
+export const setupAppWithSlug = (appName, slug, appType = 'private') => {
+  const defaultLayout = {
+    desktop: { top: 90, left: 9, width: 6, height: 40 },
+    mobile: { top: 90, left: 9, width: 6, height: 40 },
+  };
   cy.apiCreateApp(appName);
-  cy.apiAddComponentToApp(appName, "text1");
+  cy.apiAddComponentToApp(appName, appType, defaultLayout, "Text", appType);
 
   cy.ifEnv("Enterprise", () => {
     cy.openApp(
       "",
       Cypress.env("workspaceId"),
       Cypress.env("appId"),
-      commonWidgetSelector.draggableWidget("text1")
+      commonWidgetSelector.draggableWidget(appType)
     );
     appPromote("development", "production");
   });

From 77d007b9bb323dad3ffccc768e2aabb169c7d29b Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Mon, 27 Oct 2025 19:17:55 +0530
Subject: [PATCH 125/157] Fix: Re-implement flag logic for triggering fire
 event only when the page is changed using pagination buttons and input in
 table footer

---
 .../NewTable/_components/Footer/Footer.jsx        | 10 +++++++++-
 .../Footer/_components/Pagination/Pagination.jsx  | 14 +++++++++++++-
 .../_components/Pagination/PaginationInput.jsx    |  3 ++-
 .../_components/TableContainer/TableContainer.jsx |  3 +++
 .../TableExposedVariables.jsx                     | 15 +++++++++------
 5 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/Footer.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/Footer.jsx
index 7394a69227..f8438376d0 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/Footer.jsx
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/Footer.jsx
@@ -27,6 +27,7 @@ export const Footer = memo(
     pageCount,
     dataLength,
     columnVisibility, // Passed to trigger a re-render when columnVisibility changes
+    paginationBtnClicked,
   }) => {
     const isFooterVisible = useTableStore((state) => state.getFooterVisibility(id), shallow);
     const loadingState = useTableStore((state) => state.getLoadingState(id), shallow);
@@ -86,7 +87,14 @@ export const Footer = memo(
               {editedRows.size > 0 && showBulkUpdateActions ? renderChangeSetUI() : renderRowCount()}
             </div>
             {enablePagination && (
-              <Pagination id={id} tableWidth={width} pageIndex={pageIndex} table={table} pageCount={pageCount} />
+              <Pagination
+                id={id}
+                tableWidth={width}
+                pageIndex={pageIndex}
+                table={table}
+                pageCount={pageCount}
+                paginationBtnClicked={paginationBtnClicked}
+              />
             )}
             <ControlButtons
               id={id}
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/Pagination.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/Pagination.jsx
index a16b00a242..9c21b9df74 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/Pagination.jsx
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/Pagination.jsx
@@ -6,7 +6,14 @@ import { shallow } from 'zustand/shallow';
 
 // TODO: Need to replace all the default data
 
-export const Pagination = function Pagination({ id, pageIndex = 1, tableWidth, table, pageCount }) {
+export const Pagination = function Pagination({
+  id,
+  pageIndex = 1,
+  tableWidth,
+  table,
+  pageCount,
+  paginationBtnClicked,
+}) {
   const serverSidePagination = useTableStore((state) => state.getTableProperties(id)?.serverSidePagination, shallow);
   const enablePrevButton = useTableStore((state) => state.getTableProperties(id)?.enablePrevButton, shallow);
   const enableNextButton = useTableStore((state) => state.getTableProperties(id)?.enableNextButton, shallow);
@@ -17,10 +24,12 @@ export const Pagination = function Pagination({ id, pageIndex = 1, tableWidth, t
   const showGoToFirstAndLast = !serverSidePagination && tableWidth > 460;
 
   function goToNextPage() {
+    paginationBtnClicked.current = true;
     table.nextPage();
   }
 
   function goToPreviousPage() {
+    paginationBtnClicked.current = true;
     table.previousPage();
   }
 
@@ -31,6 +40,7 @@ export const Pagination = function Pagination({ id, pageIndex = 1, tableWidth, t
           {showGoToFirstAndLast && (
             <PaginationButton
               onClick={() => {
+                paginationBtnClicked.current = true;
                 table.firstPage();
               }}
               disabled={!canGoToPreviousPage}
@@ -54,6 +64,7 @@ export const Pagination = function Pagination({ id, pageIndex = 1, tableWidth, t
           serverSidePagination={serverSidePagination}
           table={table}
           pageCount={pageCount}
+          paginationBtnClicked={paginationBtnClicked}
         />
 
         <div className="d-flex">
@@ -68,6 +79,7 @@ export const Pagination = function Pagination({ id, pageIndex = 1, tableWidth, t
           {showGoToFirstAndLast && (
             <PaginationButton
               onClick={() => {
+                paginationBtnClicked.current = true;
                 table.lastPage();
               }}
               disabled={!canGoToNextPage}
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/PaginationInput.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/PaginationInput.jsx
index fa316fd4bc..90159a9039 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/PaginationInput.jsx
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/PaginationInput.jsx
@@ -1,6 +1,6 @@
 import React, { memo, useState, useEffect } from 'react';
 
-export const PaginationInput = memo(({ pageIndex, serverSidePagination, pageCount, table }) => {
+export const PaginationInput = memo(({ pageIndex, serverSidePagination, pageCount, table, paginationBtnClicked }) => {
   // Add local state to handle input value
   const [inputValue, setInputValue] = useState(pageIndex);
 
@@ -11,6 +11,7 @@ export const PaginationInput = memo(({ pageIndex, serverSidePagination, pageCoun
 
   function gotoPage(page) {
     if (!serverSidePagination) {
+      paginationBtnClicked.current = true;
       table.setPageIndex(page - 1);
     }
   }
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableContainer/TableContainer.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableContainer/TableContainer.jsx
index a29b0e0b34..95ce6d96a8 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableContainer/TableContainer.jsx
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableContainer/TableContainer.jsx
@@ -43,6 +43,7 @@ export const TableContainer = ({
   const [globalFilter, setGlobalFilter] = useState('');
   const lastClickedRowRef = useRef({});
   const tableBodyRef = useRef(null);
+  const paginationBtnClicked = useRef(false); // flag to indicate when page is changed using the pagination buttons or pagination input in table footer
 
   const handleCellValueChange = useCallback(
     (index, name, value, row) => {
@@ -146,6 +147,7 @@ export const TableContainer = ({
         pageIndex={pagination.pageIndex + 1}
         lastClickedRowRef={lastClickedRowRef}
         hasDataChanged={hasDataChanged}
+        paginationBtnClicked={paginationBtnClicked}
       />
       <Header
         id={id}
@@ -186,6 +188,7 @@ export const TableContainer = ({
         pageCount={table.getPageCount()}
         dataLength={table.getFilteredRowModel().rows.length}
         columnVisibility={columnVisibility} // Passed to trigger a re-render when columnVisibility changes
+        paginationBtnClicked={paginationBtnClicked}
       />
     </>
   );
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableExposedVariables/TableExposedVariables.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableExposedVariables/TableExposedVariables.jsx
index 947fa3f855..6db997bdce 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableExposedVariables/TableExposedVariables.jsx
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableExposedVariables/TableExposedVariables.jsx
@@ -20,6 +20,7 @@ export const TableExposedVariables = ({
   pageIndex = 1,
   lastClickedRowRef,
   hasDataChanged,
+  paginationBtnClicked,
 }) => {
   const { moduleId } = useModuleContext();
   const editedRows = useTableStore((state) => state.getAllEditedRows(id), shallow);
@@ -69,7 +70,6 @@ export const TableExposedVariables = ({
   };
 
   const prevSortingLength = useRef(null);
-  const skipPageEvent = useRef(false);
 
   const getColumnName = useCallback(
     (columnId) => {
@@ -149,9 +149,13 @@ export const TableExposedVariables = ({
   useEffect(() => {
     setExposedVariables({ pageIndex });
 
-    // Don't fire onPageChanged event incase the page was changed using setPage CSA to maintain backward compatibility
-    if (!skipPageEvent.current) mounted && fireEvent('onPageChanged');
-    else skipPageEvent.current = false; // reset the flag
+    // Fire onPageChanged event only when the page was changed using pagination buttons and input in table footer,
+    // not when using setPage CSA to maintain backward compatibility
+    if (paginationBtnClicked.current) {
+      mounted && fireEvent('onPageChanged');
+    }
+    paginationBtnClicked.current = false; // reset the flag
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pageIndex, setExposedVariables, fireEvent]); // Didn't add mounted as it's not a dependency
 
@@ -222,10 +226,9 @@ export const TableExposedVariables = ({
     function setPage(targetPageIndex = 1) {
       setExposedVariables({ pageIndex: targetPageIndex });
       setPageIndex(targetPageIndex - 1);
-      skipPageEvent.current = true;
     }
     setExposedVariables({ setPage });
-  }, [setPageIndex, setExposedVariables, skipPageEvent]);
+  }, [setPageIndex, setExposedVariables]);
 
   useEffect(() => {
     if (selectedRows.length === 0 && allowSelection && !showBulkSelector) {

From 85136cf0985229a2c2494a1edfacdd0dc6572dec Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Mon, 27 Oct 2025 19:23:47 +0530
Subject: [PATCH 126/157] version bump

---
 .version          | 2 +-
 frontend/.version | 2 +-
 server/.version   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.version b/.version
index 225bb985fb..53447500c2 100644
--- a/.version
+++ b/.version
@@ -1 +1 @@
-3.20.26-lts
+3.20.27-lts
diff --git a/frontend/.version b/frontend/.version
index 225bb985fb..53447500c2 100644
--- a/frontend/.version
+++ b/frontend/.version
@@ -1 +1 @@
-3.20.26-lts
+3.20.27-lts
diff --git a/server/.version b/server/.version
index 225bb985fb..53447500c2 100644
--- a/server/.version
+++ b/server/.version
@@ -1 +1 @@
-3.20.26-lts
+3.20.27-lts

From 1938d3c4d448e6a257121f184e81a3d291b39a47 Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Mon, 27 Oct 2025 20:05:13 +0530
Subject: [PATCH 127/157] Fix: Hide header on mobile view incase the header,
 logo and navigation menu are toggled off

---
 .../src/AppBuilder/Viewer/MobileHeader.jsx    | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/frontend/src/AppBuilder/Viewer/MobileHeader.jsx b/frontend/src/AppBuilder/Viewer/MobileHeader.jsx
index 15033b4510..542d3e4de2 100644
--- a/frontend/src/AppBuilder/Viewer/MobileHeader.jsx
+++ b/frontend/src/AppBuilder/Viewer/MobileHeader.jsx
@@ -36,7 +36,7 @@ const MobileHeader = ({
   const pageSettings = useStore((state) => state.pageSettings);
   const { definition: { properties = {} } = {} } = pageSettings ?? {};
   const isPagesSidebarHidden = useStore((state) => state.getPagesSidebarVisibility('canvas'), shallow);
-  const { showOnMobile } = properties ?? {};
+  const { showOnMobile, hideLogo, hideHeader } = properties ?? {};
 
   // Fetch the version parameter from the query string
   const searchParams = new URLSearchParams(window.location.search);
@@ -128,17 +128,19 @@ const MobileHeader = ({
           {_renderPreviewSettings()}
         </Header>
       )}
-      <Header
-        styles={{
-          height: '46px',
-        }}
-        className={'mobile-nav-container'}
-      >
-        <div className="d-flex w-100">
-          {!isPagesSidebarHidden && showOnMobile && _renderMobileNavigationMenu()}
-          <span style={{ flexGrow: 1, width: '100%' }}>{_renderAppNameAndLogo()}</span>
-        </div>
-      </Header>
+      {(!isPagesSidebarHidden || !hideLogo || !hideHeader) && (
+        <Header
+          styles={{
+            height: '46px',
+          }}
+          className={'mobile-nav-container'}
+        >
+          <div className="d-flex w-100">
+            {!isPagesSidebarHidden && showOnMobile && _renderMobileNavigationMenu()}
+            {!hideLogo && <span style={{ flexGrow: 1, width: '100%' }}>{_renderAppNameAndLogo()}</span>}
+          </div>
+        </Header>
+      )}
     </div>
   );
 };

From de952ea550f5686ce68933a6cb9380873edab338 Mon Sep 17 00:00:00 2001
From: Ganesh Kumar <40178541+ganesh8056@users.noreply.github.com>
Date: Mon, 27 Oct 2025 20:07:58 +0530
Subject: [PATCH 128/157] Hotfix: Ensure that the Gemini plugin test connection
 uses the latest Gemini model. (#14397)

* submodule ref updated

* fix for test connection in Gemini plugin

* bump version to 3.20.27-lts across all components

---------

Co-authored-by: gsmithun4 <gsmithun4@gmail.com>
---
 .version                                |  2 +-
 frontend/.version                       |  2 +-
 marketplace/plugins/gemini/lib/index.ts | 12 ++++++------
 server/.version                         |  2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/.version b/.version
index 225bb985fb..53447500c2 100644
--- a/.version
+++ b/.version
@@ -1 +1 @@
-3.20.26-lts
+3.20.27-lts
diff --git a/frontend/.version b/frontend/.version
index 225bb985fb..53447500c2 100644
--- a/frontend/.version
+++ b/frontend/.version
@@ -1 +1 @@
-3.20.26-lts
+3.20.27-lts
diff --git a/marketplace/plugins/gemini/lib/index.ts b/marketplace/plugins/gemini/lib/index.ts
index b64f830373..d492d5a918 100644
--- a/marketplace/plugins/gemini/lib/index.ts
+++ b/marketplace/plugins/gemini/lib/index.ts
@@ -25,10 +25,10 @@ export default class GeminiService implements QueryService {
       }
     } catch (error: any) {
       console.error('Error in Gemini query:', error);
-    
+
       let errorMessage = 'Unknown error occurred';
       let errorDetails: any = {};
-    
+
       if (error && typeof error === 'object') {
         try {
           errorMessage = error.message || error.response?.data?.error?.message || 'Unknown error';
@@ -41,9 +41,9 @@ export default class GeminiService implements QueryService {
           console.error('Failed to parse Gemini error response:', parseError);
         }
       }
-    
+
       throw new QueryError('Query could not be completed', errorMessage, errorDetails);
-    }   
+    }
 
     return {
       status: 'ok',
@@ -60,7 +60,7 @@ export default class GeminiService implements QueryService {
 
     const options: QueryOptions = {
       operation: Operation.TextGeneration,
-      model: 'models/gemini-1.5-flash',
+      model: 'models/gemini-2.0-flash-exp',
       system_prompt: 'Test system prompt',
       prompt: 'This is a test prompt to generate some text.',
       max_tokens: 100,
@@ -92,4 +92,4 @@ export default class GeminiService implements QueryService {
 
     return new GoogleGenerativeAI(apiKey);
   }
-}
\ No newline at end of file
+}
diff --git a/server/.version b/server/.version
index 225bb985fb..53447500c2 100644
--- a/server/.version
+++ b/server/.version
@@ -1 +1 @@
-3.20.26-lts
+3.20.27-lts

From 751c42f5119299df371d2c14b7471669961e969d Mon Sep 17 00:00:00 2001
From: Adish M <44204658+adishM98@users.noreply.github.com>
Date: Mon, 27 Oct 2025 20:12:05 +0530
Subject: [PATCH 129/157] =?UTF-8?q?=F0=9F=9A=80=20chore:=20update=20submod?=
 =?UTF-8?q?ules=20to=20latest=20lts-3.16=20after=20auto-merge=20(#14422)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: gsmithun4 <3417097+gsmithun4@users.noreply.github.com>
---
 frontend/ee | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/ee b/frontend/ee
index ce564ea825..76991a2686 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit ce564ea8257c912431e9fa87c94655ee1c4b9481
+Subproject commit 76991a2686d3f924b97f105af100e1f2a61de3e5

From 081ae143b04bffe86538181bdd5059fcc401f415 Mon Sep 17 00:00:00 2001
From: emidhun <midhun752@gmail.com>
Date: Tue, 28 Oct 2025 12:40:30 +0530
Subject: [PATCH 130/157] Fix existing appSlug

---
 .../platform/ceTestcases/apps/appSlug.cy.js   | 78 ++++++-------------
 1 file changed, 25 insertions(+), 53 deletions(-)

diff --git a/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appSlug.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appSlug.cy.js
index c4a2c674ff..6ee125e012 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appSlug.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/appSlug.cy.js
@@ -1,53 +1,40 @@
-import { commonSelectors, commonWidgetSelector } from "Selectors/common";
 import { fake } from "Fixtures/fake";
-import { releaseApp } from "Support/utils/common";
+import { commonSelectors, commonWidgetSelector } from "Selectors/common";
 import {
+  resolveHost,
   verifySlugValidations,
   verifySuccessfulSlugUpdate,
   verifyURLs,
-  resolveHost,
 } from "Support/utils/apps";
-import { appPromote } from "Support/utils/platform/multiEnv";
+import { releaseApp } from "Support/utils/common";
 
 describe("App Slug", () => {
-  const data = {};
-  const host = resolveHost();
-
-  beforeEach(() => {
-    data.slug = `${fake.companyName.toLowerCase()}-app`;
-    data.appName = `${fake.companyName} App`;
-    cy.defaultWorkspaceLogin();
+  const generateTestData = () => ({
+    slug: `${fake.companyName.toLowerCase()}-app`,
+    appName: `${fake.companyName} App`,
   });
 
-  before(() => {
-    data.appName = `${fake.companyName} App`;
+  const host = resolveHost();
+  let data;
+
+  beforeEach(() => {
+    data = generateTestData();
     cy.apiLogin();
+    cy.skipWalkthrough();
     cy.apiCreateApp(data.appName);
-    cy.wait(1000);
-    cy.apiLogout();
+    cy.openApp()
   });
 
   it("Verify app slug cases in global settings", () => {
-    const workspaceId = Cypress.env("workspaceId");
-    const appId = Cypress.env("appId");
-    const appUrl = `${host}/${Cypress.env("workspaceId")}/apps/${Cypress.env("appId")}/`;
 
-    cy.apiLogin();
-    cy.skipWalkthrough();
 
-    cy.visit(appUrl);
-    cy.url().then((url) => {
-      if (url !== appUrl) {
-        cy.visit(appUrl);
-      }
-    });
-    cy.url().should("eq", appUrl);
 
-    cy.wait(1000);
+    cy.url().should("eq", `${host}/${Cypress.env("workspaceId")}/apps/${Cypress.env("appId")}/`);
+
+    cy.get('[data-cy="query-manager-toggle-button"]', { timeout: 20000 }).should("be.visible").click();
 
     cy.get(commonSelectors.leftSideBarSettingsButton).click();
 
-    // Verify initial state
     cy.get(commonWidgetSelector.appSlugLabel).verifyVisibleElement(
       "have.text",
       "Unique app slug"
@@ -68,26 +55,21 @@ describe("App Slug", () => {
 
     cy.get(commonWidgetSelector.appLinkField).verifyVisibleElement(
       "have.text",
-      `${host}/${workspaceId}/apps/${appId}`
+      `${host}/${Cypress.env("workspaceId")}/apps/${Cypress.env("appId")}`
     );
 
-    // Validate all error cases
     verifySlugValidations(commonWidgetSelector.appSlugInput);
 
-    // Verify successful slug update
     cy.clearAndType(commonWidgetSelector.appSlugInput, data.slug);
-    verifySuccessfulSlugUpdate(workspaceId, data.slug);
+    verifySuccessfulSlugUpdate(Cypress.env("workspaceId"), data.slug);
 
-    // Verify persistence
     cy.get('[data-cy="left-sidebar-debugger-button"]').click();
     cy.get(commonSelectors.leftSideBarSettingsButton).click();
     cy.get(commonWidgetSelector.appSlugInput).should("have.value", data.slug);
 
-    // Release and verify URLs
     releaseApp();
-    verifyURLs(workspaceId, data.slug, true);
+    verifyURLs(Cypress.env("workspaceId"), data.slug, true);
 
-    // Verify duplicate slug validation
     cy.visit("/my-workspace");
     cy.apiCreateApp(data.slug);
     cy.openApp("my-workspace");
@@ -101,20 +83,14 @@ describe("App Slug", () => {
   });
 
   it("Verify app slug cases in share modal", () => {
-    cy.apiLogin();
-    const workspaceId = Cypress.env("workspaceId");
 
-    cy.apiCreateApp(data.appName);
-    cy.openApp("my-workspace");
 
-    // Set up initial slug
     cy.get(commonSelectors.leftSideBarSettingsButton).click();
     cy.get(commonWidgetSelector.appSlugInput).clear();
     cy.clearAndType(commonWidgetSelector.appSlugInput, data.slug);
 
     releaseApp();
 
-    // Verify share modal
     cy.get(commonWidgetSelector.shareAppButton).click();
     cy.get(commonWidgetSelector.appLink).verifyVisibleElement(
       "have.text",
@@ -125,12 +101,11 @@ describe("App Slug", () => {
       data.slug
     );
 
-    // Validate all error cases in share modal
     verifySlugValidations(commonWidgetSelector.appNameSlugInput);
 
-    cy.wait(500);
     cy.clearAndType(commonWidgetSelector.appNameSlugInput, data.slug);
     cy.get('[data-cy="app-slug-info-label"]')
+      .should("be.visible")
       .invoke("text")
       .then((text) => {
         expect(text.trim()).to.eq(
@@ -138,26 +113,23 @@ describe("App Slug", () => {
         );
       });
 
-    // Verify successful slug update in share modal
-    data.slug = `${fake.companyName.toLowerCase()}-app`;
-    cy.clearAndType(commonWidgetSelector.appNameSlugInput, data.slug);
+    const newSlug = `${fake.companyName.toLowerCase()}-app`;
+    cy.clearAndType(commonWidgetSelector.appNameSlugInput, newSlug);
     cy.get('[data-cy="app-slug-accepted-label"]').verifyVisibleElement(
       "have.text",
       "Slug accepted!"
     );
 
-    // Close modal and verify URLs
     cy.get(commonWidgetSelector.modalCloseButton).click();
-    verifyURLs(workspaceId, data.slug, true);
+    verifyURLs(Cypress.env("workspaceId"), newSlug, true);
 
-    // Verify duplicate slug validation in share modal
     cy.visit("/my-workspace");
-    cy.apiCreateApp(data.slug);
+    cy.apiCreateApp(newSlug);
     cy.openApp("my-workspace");
 
     releaseApp();
     cy.get(commonWidgetSelector.shareAppButton).click();
-    cy.clearAndType(commonWidgetSelector.appNameSlugInput, data.slug);
+    cy.clearAndType(commonWidgetSelector.appNameSlugInput, newSlug);
     cy.get(commonWidgetSelector.appSlugErrorLabel).verifyVisibleElement(
       "have.text",
       "This app slug is already taken."

From 28acf2b51a484a99e82835796c0318012dcbc91f Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Tue, 28 Oct 2025 16:14:59 +0530
Subject: [PATCH 131/157] Update submodule reference

---
 frontend/ee | 2 +-
 server/ee   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/ee b/frontend/ee
index ce564ea825..76991a2686 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit ce564ea8257c912431e9fa87c94655ee1c4b9481
+Subproject commit 76991a2686d3f924b97f105af100e1f2a61de3e5
diff --git a/server/ee b/server/ee
index 1baf0c1f3b..62010f545d 160000
--- a/server/ee
+++ b/server/ee
@@ -1 +1 @@
-Subproject commit 1baf0c1f3b340048971548bd0b744e3be143df2b
+Subproject commit 62010f545d4b079027f96ddb4b791cc5c7e00334

From e5487b5fdc9f07dd9da4161f3a4a888634150709 Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Tue, 28 Oct 2025 16:17:01 +0530
Subject: [PATCH 132/157] version bump

---
 .version          | 2 +-
 frontend/.version | 2 +-
 server/.version   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.version b/.version
index 53447500c2..c3f7ac12c1 100644
--- a/.version
+++ b/.version
@@ -1 +1 @@
-3.20.27-lts
+3.20.28-lts
diff --git a/frontend/.version b/frontend/.version
index 53447500c2..c3f7ac12c1 100644
--- a/frontend/.version
+++ b/frontend/.version
@@ -1 +1 @@
-3.20.27-lts
+3.20.28-lts
diff --git a/server/.version b/server/.version
index 53447500c2..c3f7ac12c1 100644
--- a/server/.version
+++ b/server/.version
@@ -1 +1 @@
-3.20.27-lts
+3.20.28-lts

From 7de59007f88d7345a4c6ca70392780911152d653 Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Tue, 28 Oct 2025 17:33:31 +0530
Subject: [PATCH 133/157] Revert "Fix: Hide header on mobile view incase the
 header, logo and navigation menu are toggled off"

This reverts commit 1938d3c4d448e6a257121f184e81a3d291b39a47.
---
 .../src/AppBuilder/Viewer/MobileHeader.jsx    | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/frontend/src/AppBuilder/Viewer/MobileHeader.jsx b/frontend/src/AppBuilder/Viewer/MobileHeader.jsx
index 542d3e4de2..15033b4510 100644
--- a/frontend/src/AppBuilder/Viewer/MobileHeader.jsx
+++ b/frontend/src/AppBuilder/Viewer/MobileHeader.jsx
@@ -36,7 +36,7 @@ const MobileHeader = ({
   const pageSettings = useStore((state) => state.pageSettings);
   const { definition: { properties = {} } = {} } = pageSettings ?? {};
   const isPagesSidebarHidden = useStore((state) => state.getPagesSidebarVisibility('canvas'), shallow);
-  const { showOnMobile, hideLogo, hideHeader } = properties ?? {};
+  const { showOnMobile } = properties ?? {};
 
   // Fetch the version parameter from the query string
   const searchParams = new URLSearchParams(window.location.search);
@@ -128,19 +128,17 @@ const MobileHeader = ({
           {_renderPreviewSettings()}
         </Header>
       )}
-      {(!isPagesSidebarHidden || !hideLogo || !hideHeader) && (
-        <Header
-          styles={{
-            height: '46px',
-          }}
-          className={'mobile-nav-container'}
-        >
-          <div className="d-flex w-100">
-            {!isPagesSidebarHidden && showOnMobile && _renderMobileNavigationMenu()}
-            {!hideLogo && <span style={{ flexGrow: 1, width: '100%' }}>{_renderAppNameAndLogo()}</span>}
-          </div>
-        </Header>
-      )}
+      <Header
+        styles={{
+          height: '46px',
+        }}
+        className={'mobile-nav-container'}
+      >
+        <div className="d-flex w-100">
+          {!isPagesSidebarHidden && showOnMobile && _renderMobileNavigationMenu()}
+          <span style={{ flexGrow: 1, width: '100%' }}>{_renderAppNameAndLogo()}</span>
+        </div>
+      </Header>
     </div>
   );
 };

From 526cbbfb86494c2e5ce5d97f3d1ecb524c999f60 Mon Sep 17 00:00:00 2001
From: Mekhla Asopa <dadhichmekhla@gmail.com>
Date: Tue, 28 Oct 2025 17:36:49 +0530
Subject: [PATCH 134/157] updated selectors and method

---
 .../cypress/constants/selectors/license.js    | 11 ++++++
 .../licensing/licensingHappyPath.cy.js        | 39 +++++++++++++------
 .../cypress/support/utils/license.js          | 24 ++++++------
 3 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/cypress-tests/cypress/constants/selectors/license.js b/cypress-tests/cypress/constants/selectors/license.js
index f1f47c374d..861102a818 100644
--- a/cypress-tests/cypress/constants/selectors/license.js
+++ b/cypress-tests/cypress/constants/selectors/license.js
@@ -29,6 +29,17 @@ export const licenseSelectors = {
   label: (labelName) => {
     return `[data-cy="${cyParamName(labelName)}-label"]`;
   },
+
+  limitInfo: (type) => {
+    return `[data-cy="${cyParamName(type)}-limit-info"]`;
+  },
+  limitHeading: (type) => {
+    return `[data-cy="${cyParamName(type)}-limit-heading"]`;
+  },
+
+  circularToggleDisabledIcon: '[data-cy="circular-toggle-disabled-icon"]',
+  licenseBannerHeading: '[data-cy="license-banner-heading"]',
+  licenseBannerInfo: '[data-cy="license-banner-info"]',
   paidFeatureButton: '[data-cy="paid-feature-button"]',
   warningIcon: '[data-cy="warning-icon"]',
   noDomainLinkedLabel: '[data-cy="no-domain-header"]',
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/eeTestcases/licensing/licensingHappyPath.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/eeTestcases/licensing/licensingHappyPath.cy.js
index 310b645d10..a4eab32ad9 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/eeTestcases/licensing/licensingHappyPath.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/eeTestcases/licensing/licensingHappyPath.cy.js
@@ -21,6 +21,7 @@ import {
   whiteLabellingSelectors,
 } from "Selectors/eeCommon";
 import { workflowSelector } from "Selectors/workflows";
+import { commonEeSelectors } from "Selectors/eeCommon";
 
 describe("License Page", () => {
   const data = {};
@@ -93,7 +94,7 @@ describe("License Page", () => {
     verifyDomainTab();
   });
 
-  it.only("Should verify banners and tooltips with the basic plan ", () => {
+  it("Should verify banners and tooltips with the basic plan ", () => {
     cy.get(commonSelectors.workspaceName).click();
 
     cy.get('[data-cy="workspace-count"]').should("be.visible");
@@ -184,19 +185,35 @@ describe("License Page", () => {
       "Multi-environments are available only in paid plans",
       true
     );
+
     cy.get(commonSelectors.dashboardIcon).click();
-    cy.apiCreateApp(`${fake.companyName}-license-App`);
-    cy.openApp();
-    cy.get('[data-cy="list-current-env-name"]').click();
+    cy.get(commonSelectors.settingsIcon).click();
     verifyTooltip(
-      '[data-cy="env-name-dropdown"] :nth-child(1)',
-      "Multi-environments are available only in paid plans",
-      true
-    );
-    verifyTooltip(
-      '[data-cy="env-name-dropdown"] :nth-child(2)',
-      "Multi-environments are available only in paid plans",
+      commonEeSelectors.auditLogIcon,
+      "Audit logs are available only in paid plans",
       true
     );
+
+    // cy.apiCreateApp(`${fake.companyName}-license-App`);
+    // cy.openApp();
+
+    // cy.get('[data-cy="list-current-env-name"]').click();
+    // cy.get('[data-cy="env-name-list"]')
+    //   .eq(1)
+    //   .within(() => {
+    //     verifyTooltip(
+    //       '[data-cy="env-name-dropdown"]',
+    //       "Multi-environments are available only in paid plans"
+    //     );
+    //   });
+
+    // cy.get('[data-cy="env-name-list"]')
+    //   .eq(2)
+    //   .within(() => {
+    //     verifyTooltip(
+    //       '[data-cy="env-name-dropdown"]',
+    //       "Multi-environments are available only in paid plans"
+    //     );
+    //   });
   });
 });
diff --git a/cypress-tests/cypress/support/utils/license.js b/cypress-tests/cypress/support/utils/license.js
index 9a7c74d17a..d7cda09ed2 100644
--- a/cypress-tests/cypress/support/utils/license.js
+++ b/cypress-tests/cypress/support/utils/license.js
@@ -50,7 +50,7 @@ export const verifyAccessTab = () => {
       accessTabLabel
     );
     cy.get(licenseSelectors.label(accessTabLabel))
-      .next('[data-cy="circular-toggle-disabled-icon"]')
+      .next(licenseSelectors.circularToggleDisabledIcon)
       .should("be.visible");
   });
 };
@@ -72,14 +72,15 @@ export const verifyTooltip = (
   expectedTooltip,
   isDisabled = false
 ) => {
-  const hoverTarget = isDisabled ? cy.get(selector).parent() : cy.get(selector);
-  hoverTarget.trigger("mouseover");
+  const hoverTarget = isDisabled
+    ? cy.get(selector).parent().trigger("mouseover", { force: true })
+    : cy.get(selector).trigger("mouseover", { force: true });
 
-  cy.get(".tooltip", { timeout: 1000 })
+  cy.get(".tooltip", { timeout: 3000 })
     .should("be.visible")
     .and("contain.text", expectedTooltip);
 
-  hoverTarget.trigger("mouseout");
+  hoverTarget.trigger("mouseout", { force: true });
 };
 
 const normalizeText = (text) =>
@@ -131,11 +132,11 @@ const verifyLimitUI = (
 const verifyFeatureBanner = (cyPrefix, expectedHeading = null) => {
   const isSmallBanner = cyPrefix === "edit-user";
   const headingSelector = isSmallBanner
-    ? '[data-cy="license-banner-heading"]'
-    : `[data-cy="${cyPrefix}-limit-heading"]`;
+    ? licenseSelectors.licenseBannerHeading
+    : licenseSelectors.limitHeading(cyPrefix);
   const infoSelector = isSmallBanner
-    ? '[data-cy="license-banner-info"]'
-    : `[data-cy="${cyPrefix}-limit-info"]`;
+    ? licenseSelectors.licenseBannerInfo
+    : licenseSelectors.limitInfo(cyPrefix);
 
   cy.get(headingSelector)
     .should("be.visible")
@@ -152,7 +153,6 @@ const verifyFeatureBanner = (cyPrefix, expectedHeading = null) => {
       cy.get(infoSelector).then(($el) => {
         const text = $el.text().trim();
         if ($el.is(":visible") && text) cy.log(`Feature banner info: ${text}`);
-        else cy.log("Info element empty or hidden — OK");
       });
     }
   });
@@ -198,8 +198,8 @@ export const verifyResourceLimit = (
   const cyPrefix = dataCyPrefix || type;
   const typeCapitalized = type.charAt(0).toUpperCase() + type.slice(1);
   const baseLabel = typeCapitalized.slice(0, -1);
-  const headingSelector = `[data-cy="${cyPrefix}-limit-heading"]`;
-  const infoSelector = `[data-cy="${cyPrefix}-limit-info"]`;
+  const headingSelector = licenseSelectors.limitHeading(cyPrefix);
+  const infoSelector = licenseSelectors.limitInfo(cyPrefix);
 
   const isNumber = typeof limitOrPlan === "number";
   const planName = isNumber ? null : limitOrPlan;

From 061a8824bf32ff228c83ac03e8cd1470551a6c6f Mon Sep 17 00:00:00 2001
From: Adish M <44204658+adishM98@users.noreply.github.com>
Date: Tue, 28 Oct 2025 17:52:51 +0530
Subject: [PATCH 135/157] Replace docker/build-push-action with direct docker
 commands for building and pushing images in Cypress workflow (#14430)

---
 .github/workflows/cypress-platform.yml | 244 +++++++++++++++----------
 1 file changed, 152 insertions(+), 92 deletions(-)

diff --git a/.github/workflows/cypress-platform.yml b/.github/workflows/cypress-platform.yml
index 9e3e2405f2..680fe00884 100644
--- a/.github/workflows/cypress-platform.yml
+++ b/.github/workflows/cypress-platform.yml
@@ -79,32 +79,47 @@ jobs:
 
       - name: Build CE Docker image
         if: matrix.edition == 'ce'
-        uses: docker/build-push-action@v4
-        with:
-          context: .
-          file: docker/ce-production.Dockerfile
-          push: true
-          tags: tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}-ce
-          platforms: linux/amd64
-        env:
-          DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
-          DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
+        run: |
+          echo "Building CE Docker image..."
+          docker buildx build \
+            --platform=linux/amd64 \
+            -f docker/ce-production.Dockerfile \
+            -t tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}-ce \
+            --no-cache \
+            --load \
+            .
+
+          echo "Pushing CE Docker image..."
+          docker push tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}-ce
+
+          echo "Cleaning up build cache..."
+          docker builder prune -af
+
+          echo "Disk space after build:"
+          df -h
 
       - name: Build EE Docker image
         if: matrix.edition == 'ee'
-        uses: docker/build-push-action@v4
-        with:
-          context: .
-          build-args: |
-            CUSTOM_GITHUB_TOKEN=${{ secrets.CUSTOM_GITHUB_TOKEN }}
-            BRANCH_NAME=${{ github.event.pull_request.head.ref }}
-          file: cypress-tests/cypress-lts.Dockerfile
-          push: true
-          tags: tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}-ee
-          platforms: linux/amd64
-        env:
-          DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
-          DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
+        run: |
+          echo "Building EE Docker image..."
+          docker buildx build \
+            --platform=linux/amd64 \
+            -f cypress-tests/cypress-lts.Dockerfile \
+            --build-arg CUSTOM_GITHUB_TOKEN=${{ secrets.CUSTOM_GITHUB_TOKEN }} \
+            --build-arg BRANCH_NAME=${{ github.event.pull_request.head.ref }} \
+            -t tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}-ee \
+            --no-cache \
+            --load \
+            .
+
+          echo "Pushing EE Docker image..."
+          docker push tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}-ee
+
+          echo "Cleaning up build cache..."
+          docker builder prune -af
+
+          echo "Disk space after build:"
+          df -h
 
       - name: Set up environment variables
         run: |
@@ -382,32 +397,47 @@ jobs:
 
       - name: Build CE Docker image
         if: matrix.edition == 'ce'
-        uses: docker/build-push-action@v4
-        with:
-          context: .
-          file: docker/ce-production.Dockerfile
-          push: true
-          tags: tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}-ce
-          platforms: linux/amd64
-        env:
-          DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
-          DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
+        run: |
+          echo "Building CE Docker image..."
+          docker buildx build \
+            --platform=linux/amd64 \
+            -f docker/ce-production.Dockerfile \
+            -t tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}-ce \
+            --no-cache \
+            --load \
+            .
+
+          echo "Pushing CE Docker image..."
+          docker push tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}-ce
+
+          echo "Cleaning up build cache..."
+          docker builder prune -af
+
+          echo "Disk space after build:"
+          df -h
 
       - name: Build EE Docker image
         if: matrix.edition == 'ee'
-        uses: docker/build-push-action@v4
-        with:
-          context: .
-          build-args: |
-            CUSTOM_GITHUB_TOKEN=${{ secrets.CUSTOM_GITHUB_TOKEN }}
-            BRANCH_NAME=${{ github.event.pull_request.head.ref }}
-          file: cypress-tests/cypress-lts.Dockerfile
-          push: true
-          tags: tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}-ee
-          platforms: linux/amd64
-        env:
-          DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
-          DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
+        run: |
+          echo "Building EE Docker image..."
+          docker buildx build \
+            --platform=linux/amd64 \
+            -f cypress-tests/cypress-lts.Dockerfile \
+            --build-arg CUSTOM_GITHUB_TOKEN=${{ secrets.CUSTOM_GITHUB_TOKEN }} \
+            --build-arg BRANCH_NAME=${{ github.event.pull_request.head.ref }} \
+            -t tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}-ee \
+            --no-cache \
+            --load \
+            .
+
+          echo "Pushing EE Docker image..."
+          docker push tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}-ee
+
+          echo "Cleaning up build cache..."
+          docker builder prune -af
+
+          echo "Disk space after build:"
+          df -h
 
       - name: Set up environment variables
         run: |
@@ -571,32 +601,47 @@ jobs:
 
       - name: Build CE Docker image
         if: matrix.edition == 'ce'
-        uses: docker/build-push-action@v4
-        with:
-          context: .
-          file: docker/ce-production.Dockerfile
-          push: true
-          tags: tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}-ce
-          platforms: linux/amd64
-        env:
-          DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
-          DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
+        run: |
+          echo "Building CE Docker image..."
+          docker buildx build \
+            --platform=linux/amd64 \
+            -f docker/ce-production.Dockerfile \
+            -t tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}-ce \
+            --no-cache \
+            --load \
+            .
+
+          echo "Pushing CE Docker image..."
+          docker push tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}-ce
+
+          echo "Cleaning up build cache..."
+          docker builder prune -af
+
+          echo "Disk space after build:"
+          df -h
 
       - name: Build EE Docker image
         if: matrix.edition == 'ee'
-        uses: docker/build-push-action@v4
-        with:
-          context: .
-          build-args: |
-            CUSTOM_GITHUB_TOKEN=${{ secrets.CUSTOM_GITHUB_TOKEN }}
-            BRANCH_NAME=${{ github.event.pull_request.head.ref }}
-          file: cypress-tests/cypress-lts.Dockerfile
-          push: true
-          tags: tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}-ee
-          platforms: linux/amd64
-        env:
-          DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
-          DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
+        run: |
+          echo "Building EE Docker image..."
+          docker buildx build \
+            --platform=linux/amd64 \
+            -f cypress-tests/cypress-lts.Dockerfile \
+            --build-arg CUSTOM_GITHUB_TOKEN=${{ secrets.CUSTOM_GITHUB_TOKEN }} \
+            --build-arg BRANCH_NAME=${{ github.event.pull_request.head.ref }} \
+            -t tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}-ee \
+            --no-cache \
+            --load \
+            .
+
+          echo "Pushing EE Docker image..."
+          docker push tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}-ee
+
+          echo "Cleaning up build cache..."
+          docker builder prune -af
+
+          echo "Disk space after build:"
+          df -h
 
       - name: Set up environment variables
         run: |
@@ -773,32 +818,47 @@ jobs:
 
       - name: Build CE Docker image
         if: matrix.edition == 'ce'
-        uses: docker/build-push-action@v4
-        with:
-          context: .
-          file: docker/ce-production.Dockerfile
-          push: true
-          tags: tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}-ce
-          platforms: linux/amd64
-        env:
-          DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
-          DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
+        run: |
+          echo "Building CE Docker image..."
+          docker buildx build \
+            --platform=linux/amd64 \
+            -f docker/ce-production.Dockerfile \
+            -t tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}-ce \
+            --no-cache \
+            --load \
+            .
+
+          echo "Pushing CE Docker image..."
+          docker push tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}-ce
+
+          echo "Cleaning up build cache..."
+          docker builder prune -af
+
+          echo "Disk space after build:"
+          df -h
 
       - name: Build EE Docker image
         if: matrix.edition == 'ee'
-        uses: docker/build-push-action@v4
-        with:
-          context: .
-          build-args: |
-            CUSTOM_GITHUB_TOKEN=${{ secrets.CUSTOM_GITHUB_TOKEN }}
-            BRANCH_NAME=${{ github.event.pull_request.head.ref }}
-          file: cypress-tests/cypress-lts.Dockerfile
-          push: true
-          tags: tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}-ee
-          platforms: linux/amd64
-        env:
-          DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
-          DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
+        run: |
+          echo "Building EE Docker image..."
+          docker buildx build \
+            --platform=linux/amd64 \
+            -f cypress-tests/cypress-lts.Dockerfile \
+            --build-arg CUSTOM_GITHUB_TOKEN=${{ secrets.CUSTOM_GITHUB_TOKEN }} \
+            --build-arg BRANCH_NAME=${{ github.event.pull_request.head.ref }} \
+            -t tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}-ee \
+            --no-cache \
+            --load \
+            .
+
+          echo "Pushing EE Docker image..."
+          docker push tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}-ee
+
+          echo "Cleaning up build cache..."
+          docker builder prune -af
+
+          echo "Disk space after build:"
+          df -h
 
       - name: Set up environment variables
         run: |

From c416fe323f50d033be2729399e2464a4ff8f256a Mon Sep 17 00:00:00 2001
From: Adish M <44204658+adishM98@users.noreply.github.com>
Date: Tue, 28 Oct 2025 17:54:51 +0530
Subject: [PATCH 136/157] =?UTF-8?q?=F0=9F=9A=80=20chore:=20update=20submod?=
 =?UTF-8?q?ules=20to=20latest=20lts-3.16=20after=20auto-merge=20(#14432)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/ee | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/ee b/server/ee
index 1baf0c1f3b..62010f545d 160000
--- a/server/ee
+++ b/server/ee
@@ -1 +1 @@
-Subproject commit 1baf0c1f3b340048971548bd0b744e3be143df2b
+Subproject commit 62010f545d4b079027f96ddb4b791cc5c7e00334

From 644ab2253cfdf30b807bdd38780812f2dd05dad7 Mon Sep 17 00:00:00 2001
From: Rohan Lahori <64496391+rohanlahori@users.noreply.github.com>
Date: Tue, 28 Oct 2025 18:31:38 +0530
Subject: [PATCH 137/157] Added extra flags to get disabled sso also (#14429)

---
 server/src/modules/login-configs/service.ts      | 11 ++++++++---
 server/src/modules/login-configs/util.service.ts | 14 ++++++++++++++
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/server/src/modules/login-configs/service.ts b/server/src/modules/login-configs/service.ts
index 08d2d3c032..26cf069690 100644
--- a/server/src/modules/login-configs/service.ts
+++ b/server/src/modules/login-configs/service.ts
@@ -38,9 +38,14 @@ export class LoginConfigsService implements ILoginConfigsService {
     }
 
     try {
-      // Fetch organization details with SSO configs
-      const result = await this.loginConfigsUtilService.fetchOrganizationDetails(organizationId, [true], true, true);
-      return result;
+      // Fetch organization details, ensuring organization ID and relevant data are always returned
+      const result = await this.loginConfigsUtilService.fetchOrganizationDetails(
+        organizationId,
+        [true, false],
+        true,
+        true
+      );
+      return this.loginConfigsUtilService.removeDisabledSsoConfigs(result);
     } catch (error) {
       this.logger.error('Error fetching organization details', error);
     }
diff --git a/server/src/modules/login-configs/util.service.ts b/server/src/modules/login-configs/util.service.ts
index 7c1c92850e..9c3387bba9 100644
--- a/server/src/modules/login-configs/util.service.ts
+++ b/server/src/modules/login-configs/util.service.ts
@@ -181,4 +181,18 @@ export class LoginConfigsUtilService implements ILoginConfigsUtilService {
   async validateAndUpdateSystemParams(params: any): Promise<void> {
     throw new Error('Method not implemented.');
   }
+  // Loop through all SSO config entries and remove any that are disabled
+  removeDisabledSsoConfigs(result) {
+    if (!result || Object.keys(result).length === 0) {
+      return result;
+    }
+
+    for (const key in result) {
+      if (result[key]?.enabled === false) {
+        delete result[key];
+      }
+    }
+
+    return result;
+  }
 }

From 95e7d07736a979cfc6026179c5949dffe15f3cdc Mon Sep 17 00:00:00 2001
From: Rudhra Deep Biswas <98055396+rudeUltra@users.noreply.github.com>
Date: Tue, 28 Oct 2025 18:32:46 +0530
Subject: [PATCH 138/157] LDAP Package fix (#14404)

---
 server/package-lock.json                      | 301 ++++++------------
 server/package.json                           |   2 +-
 .../auth/oauth/util-services/ldap.service.ts  |   4 +-
 3 files changed, 94 insertions(+), 213 deletions(-)

diff --git a/server/package-lock.json b/server/package-lock.json
index cd3886929a..c989058be2 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -78,7 +78,7 @@
         "js-base64": "^3.7.2",
         "jsonrepair": "^3.12.0",
         "jszip": "^3.10.1",
-        "ldapjs": "^3.0.7",
+        "ldapts": "^8.0.9",
         "lodash": "^4.17.21",
         "module-from-string": "^3.3.1",
         "moment": "^2.29.4",
@@ -4413,101 +4413,6 @@
       "integrity": "sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==",
       "license": "MIT"
     },
-    "node_modules/@ldapjs/asn1": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@ldapjs/asn1/-/asn1-2.0.0.tgz",
-      "integrity": "sha512-G9+DkEOirNgdPmD0I8nu57ygQJKOOgFEMKknEuQvIHbGLwP3ny1mY+OTUYLCbCaGJP4sox5eYgBJRuSUpnAddA==",
-      "deprecated": "This package has been decomissioned. See https://github.com/ldapjs/node-ldapjs/blob/8ffd0bc9c149088a10ec4c1ec6a18450f76ad05d/README.md",
-      "license": "MIT"
-    },
-    "node_modules/@ldapjs/attribute": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@ldapjs/attribute/-/attribute-1.0.0.tgz",
-      "integrity": "sha512-ptMl2d/5xJ0q+RgmnqOi3Zgwk/TMJYG7dYMC0Keko+yZU6n+oFM59MjQOUht5pxJeS4FWrImhu/LebX24vJNRQ==",
-      "deprecated": "This package has been decomissioned. See https://github.com/ldapjs/node-ldapjs/blob/8ffd0bc9c149088a10ec4c1ec6a18450f76ad05d/README.md",
-      "license": "MIT",
-      "dependencies": {
-        "@ldapjs/asn1": "2.0.0",
-        "@ldapjs/protocol": "^1.2.1",
-        "process-warning": "^2.1.0"
-      }
-    },
-    "node_modules/@ldapjs/change": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@ldapjs/change/-/change-1.0.0.tgz",
-      "integrity": "sha512-EOQNFH1RIku3M1s0OAJOzGfAohuFYXFY4s73wOhRm4KFGhmQQ7MChOh2YtYu9Kwgvuq1B0xKciXVzHCGkB5V+Q==",
-      "deprecated": "This package has been decomissioned. See https://github.com/ldapjs/node-ldapjs/blob/8ffd0bc9c149088a10ec4c1ec6a18450f76ad05d/README.md",
-      "license": "MIT",
-      "dependencies": {
-        "@ldapjs/asn1": "2.0.0",
-        "@ldapjs/attribute": "1.0.0"
-      }
-    },
-    "node_modules/@ldapjs/controls": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@ldapjs/controls/-/controls-2.1.0.tgz",
-      "integrity": "sha512-2pFdD1yRC9V9hXfAWvCCO2RRWK9OdIEcJIos/9cCVP9O4k72BY1bLDQQ4KpUoJnl4y/JoD4iFgM+YWT3IfITWw==",
-      "deprecated": "This package has been decomissioned. See https://github.com/ldapjs/node-ldapjs/blob/8ffd0bc9c149088a10ec4c1ec6a18450f76ad05d/README.md",
-      "license": "MIT",
-      "dependencies": {
-        "@ldapjs/asn1": "^1.2.0",
-        "@ldapjs/protocol": "^1.2.1"
-      }
-    },
-    "node_modules/@ldapjs/controls/node_modules/@ldapjs/asn1": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@ldapjs/asn1/-/asn1-1.2.0.tgz",
-      "integrity": "sha512-KX/qQJ2xxzvO2/WOvr1UdQ+8P5dVvuOLk/C9b1bIkXxZss8BaR28njXdPgFCpj5aHaf1t8PmuVnea+N9YG9YMw==",
-      "deprecated": "This package has been decomissioned. See https://github.com/ldapjs/node-ldapjs/blob/8ffd0bc9c149088a10ec4c1ec6a18450f76ad05d/README.md",
-      "license": "MIT"
-    },
-    "node_modules/@ldapjs/dn": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@ldapjs/dn/-/dn-1.1.0.tgz",
-      "integrity": "sha512-R72zH5ZeBj/Fujf/yBu78YzpJjJXG46YHFo5E4W1EqfNpo1UsVPqdLrRMXeKIsJT3x9dJVIfR6OpzgINlKpi0A==",
-      "deprecated": "This package has been decomissioned. See https://github.com/ldapjs/node-ldapjs/blob/8ffd0bc9c149088a10ec4c1ec6a18450f76ad05d/README.md",
-      "license": "MIT",
-      "dependencies": {
-        "@ldapjs/asn1": "2.0.0",
-        "process-warning": "^2.1.0"
-      }
-    },
-    "node_modules/@ldapjs/filter": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@ldapjs/filter/-/filter-2.1.1.tgz",
-      "integrity": "sha512-TwPK5eEgNdUO1ABPBUQabcZ+h9heDORE4V9WNZqCtYLKc06+6+UAJ3IAbr0L0bYTnkkWC/JEQD2F+zAFsuikNw==",
-      "deprecated": "This package has been decomissioned. See https://github.com/ldapjs/node-ldapjs/blob/8ffd0bc9c149088a10ec4c1ec6a18450f76ad05d/README.md",
-      "license": "MIT",
-      "dependencies": {
-        "@ldapjs/asn1": "2.0.0",
-        "@ldapjs/protocol": "^1.2.1",
-        "process-warning": "^2.1.0"
-      }
-    },
-    "node_modules/@ldapjs/messages": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@ldapjs/messages/-/messages-1.3.0.tgz",
-      "integrity": "sha512-K7xZpXJ21bj92jS35wtRbdcNrwmxAtPwy4myeh9duy/eR3xQKvikVycbdWVzkYEAVE5Ce520VXNOwCHjomjCZw==",
-      "deprecated": "This package has been decomissioned. See https://github.com/ldapjs/node-ldapjs/blob/8ffd0bc9c149088a10ec4c1ec6a18450f76ad05d/README.md",
-      "license": "MIT",
-      "dependencies": {
-        "@ldapjs/asn1": "^2.0.0",
-        "@ldapjs/attribute": "^1.0.0",
-        "@ldapjs/change": "^1.0.0",
-        "@ldapjs/controls": "^2.1.0",
-        "@ldapjs/dn": "^1.1.0",
-        "@ldapjs/filter": "^2.1.1",
-        "@ldapjs/protocol": "^1.2.1",
-        "process-warning": "^2.2.0"
-      }
-    },
-    "node_modules/@ldapjs/protocol": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@ldapjs/protocol/-/protocol-1.2.1.tgz",
-      "integrity": "sha512-O89xFDLW2gBoZWNXuXpBSM32/KealKCTb3JGtJdtUQc7RjAk8XzrRgyz02cPAwGKwKPxy0ivuC7UP9bmN87egQ==",
-      "deprecated": "This package has been decomissioned. See https://github.com/ldapjs/node-ldapjs/blob/8ffd0bc9c149088a10ec4c1ec6a18450f76ad05d/README.md",
-      "license": "MIT"
-    },
     "node_modules/@lukeed/csprng": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@lukeed/csprng/-/csprng-1.1.0.tgz",
@@ -8773,7 +8678,6 @@
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/@types/asn1/-/asn1-0.2.4.tgz",
       "integrity": "sha512-V91DSJ2l0h0gRhVP4oBfBzRBN9lAbPUkGDMCnwedqPKX2d84aAMc9CulOvxdw1f7DfEYx99afab+Rsm3e52jhA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/node": "*"
@@ -10342,12 +10246,6 @@
       "license": "MIT",
       "optional": true
     },
-    "node_modules/abstract-logging": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/abstract-logging/-/abstract-logging-2.0.1.tgz",
-      "integrity": "sha512-2BjRTZxTPvheOvGbBslFSYOUkr+SjPtOnrLP33f+VIWLzezQpZcqVg7ja3L4dBXmzzgwT+a029jRx5PCi3JuiA==",
-      "license": "MIT"
-    },
     "node_modules/accepts": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
@@ -10863,18 +10761,6 @@
         "node": ">= 10.0.0"
       }
     },
-    "node_modules/backoff": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/backoff/-/backoff-2.5.0.tgz",
-      "integrity": "sha512-wC5ihrnUXmR2douXmXLCe5O3zg3GKIyvRi/hi58a/XyRxVI+3/yM0PYueQOZXPXQ9pxBislYkw+sF9b7C/RuMA==",
-      "license": "MIT",
-      "dependencies": {
-        "precond": "0.2"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -13677,15 +13563,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/extsprintf": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.4.1.tgz",
-      "integrity": "sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA==",
-      "engines": [
-        "node >=0.6.0"
-      ],
-      "license": "MIT"
-    },
     "node_modules/fast-content-type-parse": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/fast-content-type-parse/-/fast-content-type-parse-3.0.0.tgz",
@@ -17349,27 +17226,91 @@
       "integrity": "sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A==",
       "license": "MIT"
     },
-    "node_modules/ldapjs": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/ldapjs/-/ldapjs-3.0.7.tgz",
-      "integrity": "sha512-1ky+WrN+4CFMuoekUOv7Y1037XWdjKpu0xAPwSP+9KdvmV9PG+qOKlssDV6a+U32apwxdD3is/BZcWOYzN30cg==",
-      "deprecated": "This package has been decomissioned. See https://github.com/ldapjs/node-ldapjs/blob/8ffd0bc9c149088a10ec4c1ec6a18450f76ad05d/README.md",
+    "node_modules/ldapts": {
+      "version": "8.0.9",
+      "resolved": "https://registry.npmjs.org/ldapts/-/ldapts-8.0.9.tgz",
+      "integrity": "sha512-6UwfVFUX0Yp5XFY8ST0p9sytpmHGNm32GehI/dq4HuA3pL5kh0AceHBSfowv+cutIJFQnfBZmBo/6cnj87JDqA==",
       "license": "MIT",
       "dependencies": {
-        "@ldapjs/asn1": "^2.0.0",
-        "@ldapjs/attribute": "^1.0.0",
-        "@ldapjs/change": "^1.0.0",
-        "@ldapjs/controls": "^2.1.0",
-        "@ldapjs/dn": "^1.1.0",
-        "@ldapjs/filter": "^2.1.1",
-        "@ldapjs/messages": "^1.3.0",
-        "@ldapjs/protocol": "^1.2.1",
-        "abstract-logging": "^2.0.1",
-        "assert-plus": "^1.0.0",
-        "backoff": "^2.5.0",
-        "once": "^1.4.0",
-        "vasync": "^2.2.1",
-        "verror": "^1.10.1"
+        "@types/asn1": ">=0.2.4",
+        "asn1": "0.2.6",
+        "debug": "4.4.1",
+        "strict-event-emitter-types": "2.0.0",
+        "uuid": "11.1.0",
+        "whatwg-url": "14.2.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/ldapts/node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ldapts/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/ldapts/node_modules/tr46": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.1.1.tgz",
+      "integrity": "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==",
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/ldapts/node_modules/uuid": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
+      "integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/esm/bin/uuid"
+      }
+    },
+    "node_modules/ldapts/node_modules/webidl-conversions": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/ldapts/node_modules/whatwg-url": {
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.2.0.tgz",
+      "integrity": "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==",
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "^5.1.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
       }
     },
     "node_modules/leac": {
@@ -19948,14 +19889,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/precond": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/precond/-/precond-0.2.3.tgz",
-      "integrity": "sha512-QCYG84SgGyGzqJ/vlMsxeXd/pgL/I94ixdNFyh1PusWmTCyVfPJjZ1K1jvHtsbfnXQs2TSkEP2fR7QiMZAnKFQ==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -20102,12 +20035,6 @@
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
       "license": "MIT"
     },
-    "node_modules/process-warning": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/process-warning/-/process-warning-2.3.2.tgz",
-      "integrity": "sha512-n9wh8tvBe5sFmsqlg+XQhaQLumwpqoAUruLwjCopgTmUBjJ/fjtBsJzKleCaIGBOMXYEhp1YfKl4d7rJ5ZKJGA==",
-      "license": "MIT"
-    },
     "node_modules/prom-client": {
       "version": "15.1.3",
       "resolved": "https://registry.npmjs.org/prom-client/-/prom-client-15.1.3.tgz",
@@ -21828,6 +21755,12 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/strict-event-emitter-types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strict-event-emitter-types/-/strict-event-emitter-types-2.0.0.tgz",
+      "integrity": "sha512-Nk/brWYpD85WlOgzw5h173aci0Teyv8YdIAEtV+N88nDB0dLlazZyJMIsN6eo1/AR61l+p6CJTG1JIyFaoNEEA==",
+      "license": "ISC"
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -23445,58 +23378,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/vasync": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/vasync/-/vasync-2.2.1.tgz",
-      "integrity": "sha512-Hq72JaTpcTFdWiNA4Y22Amej2GH3BFmBaKPPlDZ4/oC8HNn2ISHLkFrJU4Ds8R3jcUi7oo5Y9jcMHKjES+N9wQ==",
-      "engines": [
-        "node >=0.6.0"
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "verror": "1.10.0"
-      }
-    },
-    "node_modules/vasync/node_modules/core-util-is": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
-      "license": "MIT"
-    },
-    "node_modules/vasync/node_modules/verror": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
-      "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
-      "engines": [
-        "node >=0.6.0"
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "assert-plus": "^1.0.0",
-        "core-util-is": "1.0.2",
-        "extsprintf": "^1.2.0"
-      }
-    },
-    "node_modules/verror": {
-      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.1.tgz",
-      "integrity": "sha512-veufcmxri4e3XSrT0xwfUR7kguIkaxBeosDg00yDWhk49wdwkSUrvvsm7nc75e1PUyvIeZj6nS8VQRYz2/S4Xg==",
-      "license": "MIT",
-      "dependencies": {
-        "assert-plus": "^1.0.0",
-        "core-util-is": "1.0.2",
-        "extsprintf": "^1.2.0"
-      },
-      "engines": {
-        "node": ">=0.6.0"
-      }
-    },
-    "node_modules/verror/node_modules/core-util-is": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
-      "license": "MIT"
-    },
     "node_modules/void-elements": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
@@ -24234,4 +24115,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/server/package.json b/server/package.json
index 23f46809a7..fd56fd13a9 100644
--- a/server/package.json
+++ b/server/package.json
@@ -116,7 +116,7 @@
     "js-base64": "^3.7.2",
     "jsonrepair": "^3.12.0",
     "jszip": "^3.10.1",
-    "ldapjs": "^3.0.7",
+    "ldapts": "^8.0.9",
     "lodash": "^4.17.21",
     "module-from-string": "^3.3.1",
     "moment": "^2.29.4",
diff --git a/server/src/modules/auth/oauth/util-services/ldap.service.ts b/server/src/modules/auth/oauth/util-services/ldap.service.ts
index 2d19e67629..6673e16189 100644
--- a/server/src/modules/auth/oauth/util-services/ldap.service.ts
+++ b/server/src/modules/auth/oauth/util-services/ldap.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@nestjs/common';
 import { ILdapService } from '../interfaces/ILdapService';
 import UserResponse from '../models/user_response';
-import { SearchOptions, Client } from 'ldapjs';
+import { SearchOptions, Client } from 'ldapts';
 
 @Injectable()
 export class LdapService implements ILdapService {
@@ -17,7 +17,7 @@ export class LdapService implements ILdapService {
     throw new Error('Method not implemented');
   }
 
-  async search(dn: string, options: SearchOptions, client: Client, callback: any): Promise<void> {
+  async search(dn: string, options: SearchOptions, client: Client): Promise<any> {
     throw new Error('Method not implemented');
   }
 }

From 2b9160073f0ac8d41ba36487ac25821532512027 Mon Sep 17 00:00:00 2001
From: Adish M <44204658+adishM98@users.noreply.github.com>
Date: Tue, 28 Oct 2025 18:33:41 +0530
Subject: [PATCH 139/157] =?UTF-8?q?=F0=9F=9A=80=20chore:=20update=20submod?=
 =?UTF-8?q?ules=20to=20latest=20lts-3.16=20after=20auto-merge=20(#14433)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: gsmithun4 <3417097+gsmithun4@users.noreply.github.com>
---
 server/ee | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/ee b/server/ee
index 62010f545d..281ebda361 160000
--- a/server/ee
+++ b/server/ee
@@ -1 +1 @@
-Subproject commit 62010f545d4b079027f96ddb4b791cc5c7e00334
+Subproject commit 281ebda36158bd5688e4f2b1b49db0d298bb0ac5

From e1940220ee7e0389f12185c2a9d2b418851ebffa Mon Sep 17 00:00:00 2001
From: Adish M <44204658+adishM98@users.noreply.github.com>
Date: Tue, 28 Oct 2025 18:34:45 +0530
Subject: [PATCH 140/157] =?UTF-8?q?=F0=9F=9A=80=20chore:=20update=20submod?=
 =?UTF-8?q?ules=20to=20latest=20lts-3.16=20after=20auto-merge=20(#14434)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: gsmithun4 <3417097+gsmithun4@users.noreply.github.com>

From b1301a12b8d41714e62ae5baf3a2cffbb6202021 Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Mon, 27 Oct 2025 20:05:13 +0530
Subject: [PATCH 141/157] Fix: Hide header on mobile view incase the header,
 logo and navigation menu are toggled off

---
 .../src/AppBuilder/Viewer/MobileHeader.jsx    | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/frontend/src/AppBuilder/Viewer/MobileHeader.jsx b/frontend/src/AppBuilder/Viewer/MobileHeader.jsx
index 15033b4510..542d3e4de2 100644
--- a/frontend/src/AppBuilder/Viewer/MobileHeader.jsx
+++ b/frontend/src/AppBuilder/Viewer/MobileHeader.jsx
@@ -36,7 +36,7 @@ const MobileHeader = ({
   const pageSettings = useStore((state) => state.pageSettings);
   const { definition: { properties = {} } = {} } = pageSettings ?? {};
   const isPagesSidebarHidden = useStore((state) => state.getPagesSidebarVisibility('canvas'), shallow);
-  const { showOnMobile } = properties ?? {};
+  const { showOnMobile, hideLogo, hideHeader } = properties ?? {};
 
   // Fetch the version parameter from the query string
   const searchParams = new URLSearchParams(window.location.search);
@@ -128,17 +128,19 @@ const MobileHeader = ({
           {_renderPreviewSettings()}
         </Header>
       )}
-      <Header
-        styles={{
-          height: '46px',
-        }}
-        className={'mobile-nav-container'}
-      >
-        <div className="d-flex w-100">
-          {!isPagesSidebarHidden && showOnMobile && _renderMobileNavigationMenu()}
-          <span style={{ flexGrow: 1, width: '100%' }}>{_renderAppNameAndLogo()}</span>
-        </div>
-      </Header>
+      {(!isPagesSidebarHidden || !hideLogo || !hideHeader) && (
+        <Header
+          styles={{
+            height: '46px',
+          }}
+          className={'mobile-nav-container'}
+        >
+          <div className="d-flex w-100">
+            {!isPagesSidebarHidden && showOnMobile && _renderMobileNavigationMenu()}
+            {!hideLogo && <span style={{ flexGrow: 1, width: '100%' }}>{_renderAppNameAndLogo()}</span>}
+          </div>
+        </Header>
+      )}
     </div>
   );
 };

From 51626979a6a01ac4b384c8a58275f47088edad77 Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Wed, 29 Oct 2025 01:18:52 +0530
Subject: [PATCH 142/157] Fix: rowData not getting resolved inside dynamic
 options for select and new multiselect column type in Table component

---
 .../NewTable/_utils/generateColumnsData.js    | 43 +++++++++----------
 1 file changed, 20 insertions(+), 23 deletions(-)

diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_utils/generateColumnsData.js b/frontend/src/AppBuilder/Widgets/NewTable/_utils/generateColumnsData.js
index a72886edc5..39ca1597da 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_utils/generateColumnsData.js
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_utils/generateColumnsData.js
@@ -64,25 +64,6 @@ export default function generateColumnsData({
         }));
       }
 
-      // Handle select and multiselect options
-      let useDynamicOptions = false;
-      if (columnType === 'select' || columnType === 'newMultiSelect') {
-        useDynamicOptions = getResolvedValue(column?.useDynamicOptions);
-        if (useDynamicOptions) {
-          const dynamicOptions = getResolvedValue(column?.dynamicOptions || []);
-          columnOptions.selectOptions = Array.isArray(dynamicOptions) ? dynamicOptions : [];
-        } else {
-          const options = column?.options ?? [];
-          columnOptions.selectOptions =
-            options?.map((option) => ({
-              label: option.label,
-              value: option.value,
-              optionColor: option.optionColor,
-              labelColor: option.labelColor,
-            })) ?? [];
-        }
-      }
-
       // Handle disabled dates
       const disabledDates = getResolvedValue(column.disabledDates);
       const parseInUnixTimestamp = getResolvedValue(column.parseInUnixTimestamp);
@@ -220,7 +201,24 @@ export default function generateColumnsData({
               );
 
             case 'select':
-            case 'newMultiSelect':
+            case 'newMultiSelect': {
+              // Handle select and multiselect options
+              let useDynamicOptions = false;
+              useDynamicOptions = getResolvedValue(column?.useDynamicOptions);
+              if (useDynamicOptions) {
+                const dynamicOptions = getResolvedValue(column?.dynamicOptions || [], { cellValue, rowData });
+                columnOptions.selectOptions = Array.isArray(dynamicOptions) ? dynamicOptions : [];
+              } else {
+                const options = column?.options ?? [];
+                columnOptions.selectOptions =
+                  options?.map((option) => ({
+                    label: option.label,
+                    value: option.value,
+                    optionColor: option.optionColor,
+                    labelColor: option.labelColor,
+                  })) ?? [];
+              }
+
               return (
                 <CustomSelectColumn
                   options={columnOptions.selectOptions}
@@ -231,9 +229,7 @@ export default function generateColumnsData({
                   containerWidth={columnSize}
                   defaultOptionsList={column?.defaultOptionsList || []}
                   optionsLoadingState={
-                    getResolvedValue(column?.useDynamicOptions) && getResolvedValue(column?.optionsLoadingState)
-                      ? true
-                      : false
+                    useDynamicOptions && getResolvedValue(column?.optionsLoadingState) ? true : false
                   }
                   autoAssignColors={autoAssignColors}
                   isEditable={isEditable}
@@ -246,6 +242,7 @@ export default function generateColumnsData({
                   id={id}
                 />
               );
+            }
 
             case 'badge':
             case 'badges':

From 54cd390762e97d6aacb2611368ef923492b40fc7 Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Wed, 29 Oct 2025 02:13:32 +0530
Subject: [PATCH 143/157] Fix: Show header outside the page menu too in mobile
 view

---
 .../src/AppBuilder/Viewer/MobileHeader.jsx    | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/frontend/src/AppBuilder/Viewer/MobileHeader.jsx b/frontend/src/AppBuilder/Viewer/MobileHeader.jsx
index 542d3e4de2..1f5e9c3dd0 100644
--- a/frontend/src/AppBuilder/Viewer/MobileHeader.jsx
+++ b/frontend/src/AppBuilder/Viewer/MobileHeader.jsx
@@ -12,6 +12,7 @@ import MobileNavigationMenu from './MobileNavigationMenu';
 import useStore from '@/AppBuilder/_stores/store';
 import AppLogo from '@/_components/AppLogo';
 import { resolveReferences } from '@/_helpers/utils';
+import OverflowTooltip from '@/_components/OverflowTooltip';
 
 const MobileHeader = ({
   showHeader,
@@ -36,7 +37,7 @@ const MobileHeader = ({
   const pageSettings = useStore((state) => state.pageSettings);
   const { definition: { properties = {} } = {} } = pageSettings ?? {};
   const isPagesSidebarHidden = useStore((state) => state.getPagesSidebarVisibility('canvas'), shallow);
-  const { showOnMobile, hideLogo, hideHeader } = properties ?? {};
+  const { showOnMobile, name, hideLogo, hideHeader } = properties ?? {};
 
   // Fetch the version parameter from the query string
   const searchParams = new URLSearchParams(window.location.search);
@@ -44,17 +45,27 @@ const MobileHeader = ({
 
   const _renderAppNameAndLogo = () => (
     <div
-      className={classNames('d-flex', 'align-items-center', 'justify-content-center')}
+      className={classNames('d-flex h-100', 'align-items-center', 'justify-content-center')}
       style={{ visibility: showHeader || isReleasedVersionId ? 'visible' : 'hidden' }}
     >
       <h1 className="navbar-brand d-none-navbar-horizontal p-0">
         <Link
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '6px',
+          }}
           data-cy="viewer-page-logo"
           onClick={() => {
             redirectToDashboard();
           }}
         >
-          <AppLogo isLoadingFromHeader={false} viewer={true} />
+          {!hideLogo && <AppLogo isLoadingFromHeader={false} viewer={true} />}
+          {!hideHeader && (
+            <div className="d-flex align-items-center app-title">
+              <OverflowTooltip>{name?.trim() ? name : appName}</OverflowTooltip>
+            </div>
+          )}
         </Link>
       </h1>
     </div>
@@ -137,7 +148,7 @@ const MobileHeader = ({
         >
           <div className="d-flex w-100">
             {!isPagesSidebarHidden && showOnMobile && _renderMobileNavigationMenu()}
-            {!hideLogo && <span style={{ flexGrow: 1, width: '100%' }}>{_renderAppNameAndLogo()}</span>}
+            <span style={{ flexGrow: 1, width: '100%' }}>{_renderAppNameAndLogo()}</span>
           </div>
         </Header>
       )}

From bfd1bed622955e59a73f230f345e7a79002c516a Mon Sep 17 00:00:00 2001
From: Devanshu Rastogi <devanshu.rastogi05@gmail.com>
Date: Wed, 29 Oct 2025 02:25:44 +0530
Subject: [PATCH 144/157] Update
 frontend/src/AppBuilder/Widgets/NewTable/_utils/generateColumnsData.js

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 .../AppBuilder/Widgets/NewTable/_utils/generateColumnsData.js  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_utils/generateColumnsData.js b/frontend/src/AppBuilder/Widgets/NewTable/_utils/generateColumnsData.js
index 39ca1597da..3deeab8ef6 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_utils/generateColumnsData.js
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_utils/generateColumnsData.js
@@ -203,8 +203,7 @@ export default function generateColumnsData({
             case 'select':
             case 'newMultiSelect': {
               // Handle select and multiselect options
-              let useDynamicOptions = false;
-              useDynamicOptions = getResolvedValue(column?.useDynamicOptions);
+              let useDynamicOptions = getResolvedValue(column?.useDynamicOptions);
               if (useDynamicOptions) {
                 const dynamicOptions = getResolvedValue(column?.dynamicOptions || [], { cellValue, rowData });
                 columnOptions.selectOptions = Array.isArray(dynamicOptions) ? dynamicOptions : [];

From 81bd972d1f14e71d2ac64ac3dcc6733e2fc359ab Mon Sep 17 00:00:00 2001
From: Adish M <44204658+adishM98@users.noreply.github.com>
Date: Wed, 29 Oct 2025 11:55:48 +0530
Subject: [PATCH 145/157] =?UTF-8?q?=F0=9F=9A=80=20chore:=20update=20submod?=
 =?UTF-8?q?ules=20to=20latest=20lts-3.16=20after=20auto-merge=20(#14443)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/ee | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/ee b/frontend/ee
index 76991a2686..5665f90bec 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit 76991a2686d3f924b97f105af100e1f2a61de3e5
+Subproject commit 5665f90bec58cca14138945852835db8e0bde9cd

From d0da581d5e0f6ebe9cfd935039361f107c1d92c3 Mon Sep 17 00:00:00 2001
From: Adish M <44204658+adishM98@users.noreply.github.com>
Date: Wed, 29 Oct 2025 12:55:42 +0530
Subject: [PATCH 146/157] Feat: Add Cloudflare cache purge to cloud frontend
 deployment workflow (#14395)

* feat: add Cloudflare cache purge step to deployment workflows

* enhance Cloudflare cache purge step with user authorization and specific URLs

* enhance Cloudflare cache purge step with user authorization and specific URLs
---
 .github/workflows/cloud-frontend-gcp.yml | 47 ++++++++++++++++++++++++
 .github/workflows/cloud-frontend.yml     | 47 ++++++++++++++++++++++++
 2 files changed, 94 insertions(+)

diff --git a/.github/workflows/cloud-frontend-gcp.yml b/.github/workflows/cloud-frontend-gcp.yml
index fceb991dff..f3119c4ac1 100644
--- a/.github/workflows/cloud-frontend-gcp.yml
+++ b/.github/workflows/cloud-frontend-gcp.yml
@@ -140,3 +140,50 @@ jobs:
           TOOLJET_SERVER_URL: ${{ secrets.CLOUD_TOOLJET_SERVER_URL }}
           WEBSITE_SIGNUP_URL: https://website-stage.tooljet.ai/signup
           TOOLJET_EDITION: cloud
+
+  Purge_Cloudflare_Cache:
+    needs: deploy
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: ✅ Check user authorization
+        run: |
+          allowed_user1=${{ secrets.ALLOWED_USER1_USERNAME }}
+          allowed_user2=${{ secrets.ALLOWED_USER2_USERNAME }}
+          allowed_user3=${{ secrets.ALLOWED_USER3_USERNAME }}
+
+          if [[ "${{ github.actor }}" != "$allowed_user1" && \
+                "${{ github.actor }}" != "$allowed_user2" && \
+                "${{ github.actor }}" != "$allowed_user3" ]]; then
+            echo "❌ User '${{ github.actor }}' is not authorized to trigger this workflow."
+            exit 1
+          else
+            echo "✅ User '${{ github.actor }}' is authorized."
+          fi
+
+      - name: 🧹 Purge Cloudflare Cache
+        continue-on-error: true
+        run: |
+          echo "🔄 Purging Cloudflare cache for specific URLs..."
+          response=$(curl -s -w "\n%{http_code}" -X POST \
+            "https://api.cloudflare.com/client/v4/zones/${{ secrets.CLOUDFLARE_ZONE_ID_PROD }}/purge_cache" \
+            -H "Authorization: Bearer ${{ secrets.CLOUDFLARE_API_TOKEN_PROD }}" \
+            -H "Content-Type: application/json" \
+            --data '{
+              "files": [
+                "${{ secrets.CLOUDFLARE_CONFIG_URL_STAGE }}",
+                "${{ secrets.CLOUDFLARE_METADATA_URL_STAGE }}"
+              ]
+            }')
+
+          http_code=$(echo "$response" | tail -n1)
+          body=$(echo "$response" | sed '$d')
+
+          if [ "$http_code" = "200" ]; then
+            echo "✅ Cloudflare cache purged successfully for specified URLs"
+            echo "$body"
+          else
+            echo "⚠️ Cloudflare cache purge failed with status code: $http_code"
+            echo "$body"
+            exit 1
+          fi
diff --git a/.github/workflows/cloud-frontend.yml b/.github/workflows/cloud-frontend.yml
index c40c12e4fd..b09bf07733 100644
--- a/.github/workflows/cloud-frontend.yml
+++ b/.github/workflows/cloud-frontend.yml
@@ -140,3 +140,50 @@ jobs:
           TOOLJET_SERVER_URL: ${{ secrets.CLOUD_PROD_TOOLJET_SERVER_URL }}
           WEBSITE_SIGNUP_URL: https://www.tooljet.ai/create-account
           TOOLJET_EDITION: cloud
+
+  Purge_Cloudflare_Cache:
+    needs: deploy
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: ✅ Check user authorization
+        run: |
+          allowed_user1=${{ secrets.ALLOWED_USER1_USERNAME }}
+          allowed_user2=${{ secrets.ALLOWED_USER2_USERNAME }}
+          allowed_user3=${{ secrets.ALLOWED_USER3_USERNAME }}
+
+          if [[ "${{ github.actor }}" != "$allowed_user1" && \
+                "${{ github.actor }}" != "$allowed_user2" && \
+                "${{ github.actor }}" != "$allowed_user3" ]]; then
+            echo "❌ User '${{ github.actor }}' is not authorized to trigger this workflow."
+            exit 1
+          else
+            echo "✅ User '${{ github.actor }}' is authorized."
+          fi
+
+      - name: 🧹 Purge Cloudflare Cache
+        continue-on-error: true
+        run: |
+          echo "🔄 Purging Cloudflare cache for specific URLs..."
+          response=$(curl -s -w "\n%{http_code}" -X POST \
+            "https://api.cloudflare.com/client/v4/zones/${{ secrets.CLOUDFLARE_ZONE_ID_PROD }}/purge_cache" \
+            -H "Authorization: Bearer ${{ secrets.CLOUDFLARE_API_TOKEN_PROD }}" \
+            -H "Content-Type: application/json" \
+            --data '{
+              "files": [
+                "${{ secrets.CLOUDFLARE_CONFIG_URL_PROD }}",
+                "${{ secrets.CLOUDFLARE_METADATA_URL_PROD }}"
+              ]
+            }')
+
+          http_code=$(echo "$response" | tail -n1)
+          body=$(echo "$response" | sed '$d')
+
+          if [ "$http_code" = "200" ]; then
+            echo "✅ Cloudflare cache purged successfully for specified URLs"
+            echo "$body"
+          else
+            echo "⚠️ Cloudflare cache purge failed with status code: $http_code"
+            echo "$body"
+            exit 1
+          fi

From e06abc4b5bad27cb07cd4d7815c56b63b22e12b6 Mon Sep 17 00:00:00 2001
From: Adish M <44204658+adishM98@users.noreply.github.com>
Date: Wed, 29 Oct 2025 12:57:36 +0530
Subject: [PATCH 147/157] feat(otel): Add request-based active and concurrent
 user metrics tracking (#14330)

* feat(otel): Add request-based active and concurrent user metrics tracking

* remove legacy active users tracking and related metrics

* Enhance active user tracking with configurable activity window and proactive cleanup

* add organization_id to user_sessions and update tracing imports

* update session termination logic to use user object and remove organization_id from user_sessions

* remove session metrics decrement logic from terminateAllSessions method

* remove session count logic from terminateAllSessions method
---
 server/src/modules/session/controller.ts      |   2 +-
 .../modules/session/interfaces/IService.ts    |   2 +-
 .../src/modules/session/jwt/jwt.strategy.ts   |  15 +
 server/src/modules/session/service.ts         |  27 +-
 server/src/modules/session/util.service.ts    |  28 +-
 server/src/otel/tracing.ts                    | 364 ++++++++++++++++--
 server/tsconfig.json                          |   3 +
 7 files changed, 408 insertions(+), 33 deletions(-)

diff --git a/server/src/modules/session/controller.ts b/server/src/modules/session/controller.ts
index 7d037c51a6..81e6f46b63 100644
--- a/server/src/modules/session/controller.ts
+++ b/server/src/modules/session/controller.ts
@@ -24,7 +24,7 @@ export class SessionController implements ISessionController {
   @Get('logout')
   @InitFeature(FEATURE_KEY.LOG_OUT)
   async terminateUserSession(@User() user: UserEntity, @Res({ passthrough: true }) response: Response): Promise<void> {
-    await this.sessionService.terminateSession(user.id, user.sessionId, response);
+    await this.sessionService.terminateSession(user, user.sessionId, response);
     return;
   }
 
diff --git a/server/src/modules/session/interfaces/IService.ts b/server/src/modules/session/interfaces/IService.ts
index 14d3411a0f..2308967380 100644
--- a/server/src/modules/session/interfaces/IService.ts
+++ b/server/src/modules/session/interfaces/IService.ts
@@ -13,7 +13,7 @@ export interface ISessionService {
 
   createSession(userId: string, device: string, manager?: EntityManager): Promise<UserSessions>;
 
-  terminateSession(userId: string, sessionId: string, response: Response): Promise<void>;
+  terminateSession(user: User, sessionId: string, response: Response): Promise<void>;
 
   findActiveUser(email: string): Promise<User>;
 
diff --git a/server/src/modules/session/jwt/jwt.strategy.ts b/server/src/modules/session/jwt/jwt.strategy.ts
index ebf2fea386..483b05d672 100644
--- a/server/src/modules/session/jwt/jwt.strategy.ts
+++ b/server/src/modules/session/jwt/jwt.strategy.ts
@@ -10,6 +10,7 @@ import { SessionUtilService } from '../util.service';
 import { JWTPayload } from '../types';
 import { UserSessionRepository } from '@modules/session/repository';
 import { TransactionLogger } from '@modules/logging/service';
+import { trackUserActivity } from '@otel/tracing';
 
 @Injectable()
 export class JwtStrategy extends PassportStrategy(Strategy) {
@@ -112,6 +113,20 @@ export class JwtStrategy extends PassportStrategy(Strategy) {
         user.sessionId = payload.sessionId;
         user.tjApiSource = payload.tj_api_source;
         if (isInviteSession) user.invitedOrganizationId = payload.invitedOrganizationId;
+
+        // Track user activity for metrics (every authenticated request)
+        if (user.organizationId && user.id) {
+          try {
+            trackUserActivity({
+              workspaceId: user.organizationId,
+              userId: user.id,
+              sessionId: payload.sessionId,
+            });
+          } catch (error) {
+            // Don't let metrics tracking failures affect authentication
+            console.error('Error tracking user activity:', error);
+          }
+        }
       }
 
       return user;
diff --git a/server/src/modules/session/service.ts b/server/src/modules/session/service.ts
index 83de2980f8..875d3dc0c1 100644
--- a/server/src/modules/session/service.ts
+++ b/server/src/modules/session/service.ts
@@ -21,6 +21,7 @@ import { fullName, generateOrgInviteURL, isSuperAdmin } from '@helpers/utils.hel
 import { decamelizeKeys } from 'humps';
 import { RequestContext } from '@modules/request-context/service';
 import { AUDIT_LOGS_REQUEST_CONTEXT_KEY } from '@modules/app/constants';
+import { decrementActiveSessions, decrementConcurrentUsers } from '@otel/tracing';
 
 @Injectable()
 export class SessionService {
@@ -32,17 +33,31 @@ export class SessionService {
     protected readonly organizationUserRepository: OrganizationUsersRepository
   ) {}
 
-  async terminateSession(userId: string, sessionId: string, response: Response): Promise<void> {
+  async terminateSession(user: User, sessionId: string, response: Response): Promise<void> {
     response.clearCookie('tj_auth_token');
     await dbTransactionWrap(async (manager: EntityManager) => {
-      await manager.delete(UserSessions, { id: sessionId, userId });
-      const user = await manager.findOneOrFail(User, {
-        where: { id: userId },
-      });
+      await manager.delete(UserSessions, { id: sessionId, userId: user.id });
+
+      // Decrement metrics
+      try {
+        decrementActiveSessions({
+          userId: user.id,
+          sessionType: 'user',
+        });
+
+        if (user?.organizationId) {
+          decrementConcurrentUsers({
+            workspaceId: user.organizationId,
+            userId: user.id,
+          });
+        }
+      } catch (error) {
+        console.error('Error decrementing session metrics:', error);
+      }
 
       const auditLogData = {
         userId: user.id,
-        organizationId: user.defaultOrganizationId,
+        organizationId: user.organizationId,
         resourceId: user.id,
         resourceName: user.email,
       };
diff --git a/server/src/modules/session/util.service.ts b/server/src/modules/session/util.service.ts
index f691c08d80..deb0109d65 100644
--- a/server/src/modules/session/util.service.ts
+++ b/server/src/modules/session/util.service.ts
@@ -29,6 +29,7 @@ import { EncryptionService } from '@modules/encryption/service';
 import { OnboardingStatus } from '@modules/onboarding/constants';
 import { RequestContext } from '@modules/request-context/service';
 import { SessionType } from '@modules/external-apis/constants';
+import { incrementActiveSessions, incrementConcurrentUsers, decrementActiveSessions, decrementConcurrentUsers } from '@otel/tracing';
 
 @Injectable()
 export class SessionUtilService {
@@ -125,6 +126,19 @@ export class SessionUtilService {
       const permissionData = await this.getPermissionDataToAuthorize(user, manager);
       const noActiveWorkspaces = await this.checkUserWorkspaceStatus(user.id, manager);
 
+      // Track concurrent users if a new session was created and organization is available
+      if (loggedInUser?.id !== user.id && !isPatLogin && organization?.id) {
+        try {
+          incrementConcurrentUsers({
+            workspaceId: organization.id as string,
+            userId: user.id,
+            userRole: permissionData.admin ? 'admin' : 'member',
+          });
+        } catch (error) {
+          console.error('Error incrementing concurrent users metric:', error);
+        }
+      }
+
       const responsePayload = {
         organizationId: organization?.id,
         organization: organization?.name,
@@ -253,7 +267,7 @@ export class SessionUtilService {
 
   async createSession(userId: string, device: string, manager?: EntityManager): Promise<UserSessions> {
     return await dbTransactionWrap(async (manager: EntityManager) => {
-      return await manager.save(
+      const session = await manager.save(
         manager.create(UserSessions, {
           userId,
           device,
@@ -262,6 +276,18 @@ export class SessionUtilService {
           lastLoggedIn: new Date(),
         })
       );
+
+      // Increment active sessions counter
+      try {
+        incrementActiveSessions({
+          userId,
+          sessionType: 'user',
+        });
+      } catch (error) {
+        console.error('Error incrementing active sessions metric:', error);
+      }
+
+      return session;
     }, manager);
   }
 
diff --git a/server/src/otel/tracing.ts b/server/src/otel/tracing.ts
index 5c1ee9752f..3066a49a96 100644
--- a/server/src/otel/tracing.ts
+++ b/server/src/otel/tracing.ts
@@ -130,9 +130,84 @@ export const sdk = new NodeSDK({
 // Custom metrics
 let meter: any;
 let apiHitCounter: any;
-let activeUsersGauge: any;
 let apiDurationHistogram: any;
-const activeUsers = new Map<string, number>(); // userId -> lastSeenTimestamp
+let concurrentUsersCounter: any;
+let activeSessionsCounter: any;
+let concurrentUsersGauge: any;
+let sessionsActiveGauge: any;
+
+// Track active users per workspace with last activity timestamp
+// Key format: "workspaceId:userId", Value: { lastSeen: timestamp, role: string }
+const activeUsersByWorkspace = new Map<string, { lastSeen: number; role?: string; sessionId?: string }>();
+
+// Track active sessions per workspace with last activity timestamp
+// Key format: "workspaceId:sessionId", Value: { lastSeen: timestamp, userId: string, role?: string }
+const activeSessionsByWorkspace = new Map<string, { lastSeen: number; userId: string; role?: string }>();
+
+// Configurable activity window - default 5 minutes
+const ACTIVITY_WINDOW_MINUTES = parseInt(process.env.OTEL_ACTIVE_USER_WINDOW_MINUTES || '5', 10);
+// Validate and constrain between 1 and 60 minutes
+const ACTIVE_USER_WINDOW_MS = Math.max(1, Math.min(60, ACTIVITY_WINDOW_MINUTES)) * 60 * 1000;
+const CLEANUP_INTERVAL_MS = 60 * 1000; // Run cleanup every 1 minute
+const MAX_TRACKED_USERS = parseInt(process.env.OTEL_MAX_TRACKED_USERS || '10000', 10);
+
+let cleanupInterval: NodeJS.Timeout | null = null;
+
+// Proactive cleanup of inactive users and sessions
+const cleanupInactiveUsers = () => {
+  try {
+    const now = Date.now();
+    const cutoffTime = now - ACTIVE_USER_WINDOW_MS * 2; // Inactive for 2x the window
+    let cleanedUsers = 0;
+    let cleanedSessions = 0;
+
+    // Cleanup users: Collect entries to delete (don't modify during iteration)
+    const usersToDelete: string[] = [];
+    for (const [key, data] of activeUsersByWorkspace.entries()) {
+      if (data.lastSeen < cutoffTime) {
+        usersToDelete.push(key);
+      }
+    }
+
+    // Delete collected user entries
+    for (const key of usersToDelete) {
+      activeUsersByWorkspace.delete(key);
+      cleanedUsers++;
+    }
+
+    // Cleanup sessions: Collect entries to delete
+    const sessionsToDelete: string[] = [];
+    for (const [key, data] of activeSessionsByWorkspace.entries()) {
+      if (data.lastSeen < cutoffTime) {
+        sessionsToDelete.push(key);
+      }
+    }
+
+    // Delete collected session entries
+    for (const key of sessionsToDelete) {
+      activeSessionsByWorkspace.delete(key);
+      cleanedSessions++;
+    }
+
+    if ((cleanedUsers > 0 || cleanedSessions > 0) && process.env.OTEL_LOG_LEVEL === 'debug') {
+      console.log(
+        `[OTEL] Cleaned up ${cleanedUsers} inactive user entries and ${cleanedSessions} inactive session entries from memory`
+      );
+    }
+
+    // Log memory stats if debug enabled
+    if (process.env.OTEL_LOG_LEVEL === 'debug') {
+      const totalUsers = activeUsersByWorkspace.size;
+      const totalSessions = activeSessionsByWorkspace.size;
+      const memoryEstimateMB = (((totalUsers + totalSessions) * 100) / (1024 * 1024)).toFixed(2);
+      console.log(
+        `[OTEL] Active tracking: ${totalUsers} users, ${totalSessions} sessions (~${memoryEstimateMB} MB), window: ${ACTIVITY_WINDOW_MINUTES}min`
+      );
+    }
+  } catch (error) {
+    console.error('[OTEL] Error during cleanup:', error);
+  }
+};
 
 // Initialize custom metrics
 const initializeCustomMetrics = () => {
@@ -144,25 +219,131 @@ const initializeCustomMetrics = () => {
     unit: '1',
   });
 
-  // Gauge for active users
-  activeUsersGauge = meter.createObservableGauge('active.users', {
-    description: 'Number of currently active users (active in last 5 minutes)',
-    unit: '1',
+  // UpDownCounter for concurrent users (login/logout based)
+  concurrentUsersCounter = meter.createUpDownCounter('users.concurrent', {
+    description: 'Number of concurrent users by workspace (login/logout based)',
+    unit: '{users}',
   });
 
-  activeUsersGauge.addCallback((observableResult: any) => {
-    // Clean up inactive users (not seen in last 5 minutes)
-    const now = Date.now();
-    const fiveMinutesAgo = now - 5 * 60 * 1000;
+  // UpDownCounter for active sessions
+  activeSessionsCounter = meter.createUpDownCounter('sessions.active', {
+    description: 'Number of active user sessions',
+    unit: '{sessions}',
+  });
 
-    for (const [userId, lastSeen] of activeUsers.entries()) {
-      if (lastSeen < fiveMinutesAgo) {
-        activeUsers.delete(userId);
+  // ObservableGauge for request-based concurrent users
+  concurrentUsersGauge = meter.createObservableGauge('users.concurrent.active', {
+    description: 'Number of concurrent users by workspace based on request activity in last 5 minutes',
+    unit: '{users}',
+  });
+
+  concurrentUsersGauge.addCallback((observableResult: any) => {
+    try {
+      const now = Date.now();
+      const cutoffTime = now - ACTIVE_USER_WINDOW_MS;
+
+      // Group active users by workspace
+      const usersByWorkspace = new Map<string, Set<string>>();
+      const entriesToDelete: string[] = [];
+
+      // First pass: collect inactive entries and group active ones (don't modify during iteration)
+      for (const [key, data] of activeUsersByWorkspace.entries()) {
+        if (data.lastSeen < cutoffTime) {
+          entriesToDelete.push(key);
+        } else {
+          const [workspaceId, userId] = key.split(':');
+          if (!usersByWorkspace.has(workspaceId)) {
+            usersByWorkspace.set(workspaceId, new Set());
+          }
+          usersByWorkspace.get(workspaceId)!.add(userId);
+        }
       }
-    }
 
-    // Report current count of active users
-    observableResult.observe(activeUsers.size);
+      // Second pass: delete inactive entries
+      for (const key of entriesToDelete) {
+        activeUsersByWorkspace.delete(key);
+      }
+
+      // Report metrics for each workspace
+      for (const [workspaceId, users] of usersByWorkspace.entries()) {
+        // Report workspace-level aggregate
+        observableResult.observe(users.size, {
+          'workspace.id': workspaceId,
+          'metric_type': 'workspace_total',
+        });
+
+        // Report individual user metrics
+        for (const userId of users) {
+          observableResult.observe(1, {
+            'workspace.id': workspaceId,
+            'user.id': userId,
+            'metric_type': 'per_user',
+          });
+        }
+      }
+
+      // Also report total active users across all workspaces
+      const totalUniqueUsers = new Set<string>();
+      for (const key of activeUsersByWorkspace.keys()) {
+        const userId = key.split(':')[1];
+        if (userId) totalUniqueUsers.add(userId);
+      }
+      observableResult.observe(totalUniqueUsers.size, {
+        'workspace.id': 'all',
+        'metric_type': 'workspace_total',
+      });
+    } catch (error) {
+      console.error('[OTEL] Error in concurrentUsersGauge callback:', error);
+    }
+  });
+
+  // ObservableGauge for request-based concurrent sessions
+  sessionsActiveGauge = meter.createObservableGauge('sessions.concurrent.active', {
+    description: 'Number of concurrent sessions by workspace based on request activity',
+    unit: '{sessions}',
+  });
+
+  sessionsActiveGauge.addCallback((observableResult: any) => {
+    try {
+      const now = Date.now();
+      const cutoffTime = now - ACTIVE_USER_WINDOW_MS;
+
+      // Group active sessions by workspace
+      const sessionsByWorkspace = new Map<string, Set<string>>();
+      const entriesToDelete: string[] = [];
+
+      // First pass: collect inactive entries and group active ones (don't modify during iteration)
+      for (const [key, data] of activeSessionsByWorkspace.entries()) {
+        if (data.lastSeen < cutoffTime) {
+          entriesToDelete.push(key);
+        } else {
+          const [workspaceId, sessionId] = key.split(':');
+          if (!sessionsByWorkspace.has(workspaceId)) {
+            sessionsByWorkspace.set(workspaceId, new Set());
+          }
+          sessionsByWorkspace.get(workspaceId)!.add(sessionId);
+        }
+      }
+
+      // Second pass: delete inactive entries
+      for (const key of entriesToDelete) {
+        activeSessionsByWorkspace.delete(key);
+      }
+
+      // Report metrics for each workspace
+      for (const [workspaceId, sessions] of sessionsByWorkspace.entries()) {
+        observableResult.observe(sessions.size, {
+          'workspace.id': workspaceId,
+        });
+      }
+
+      // Also report total active sessions across all workspaces
+      observableResult.observe(activeSessionsByWorkspace.size, {
+        'workspace.id': 'all',
+      });
+    } catch (error) {
+      console.error('[OTEL] Error in sessionsActiveGauge callback:', error);
+    }
   });
 
   // Histogram for API duration
@@ -192,13 +373,6 @@ export const otelMiddleware = (req: any, res: any, next: () => void, ...args: an
       });
     }
 
-    // Track active users (using session or user ID if available)
-    const userId = req.user?.id || req.session?.userId || req.headers['x-user-id'];
-    if (userId) {
-      // Update last seen timestamp for this user
-      activeUsers.set(userId, Date.now());
-    }
-
     const originalJson = res.json;
     res.json = function (body: any) {
       const statusCode = res.statusCode;
@@ -224,6 +398,12 @@ export const otelMiddleware = (req: any, res: any, next: () => void, ...args: an
 };
 
 process.on('SIGTERM', () => {
+  // Clear cleanup interval
+  if (cleanupInterval) {
+    clearInterval(cleanupInterval);
+    cleanupInterval = null;
+  }
+
   if (sdk) {
     sdk
       .shutdown()
@@ -239,12 +419,148 @@ export const startOpenTelemetry = async (): Promise<void> => {
   try {
     await sdk.start();
     initializeCustomMetrics();
+
+    // Start proactive cleanup interval
+    cleanupInterval = setInterval(cleanupInactiveUsers, CLEANUP_INTERVAL_MS);
+
     console.log('OpenTelemetry instrumentation initialized');
-    console.log('Custom metrics initialized: api.hits, active.users, api.duration');
+    console.log(
+      'Custom metrics initialized: api.hits, api.duration, users.concurrent, sessions.active, users.concurrent.active, sessions.concurrent.active'
+    );
+    console.log(`Active user tracking window: ${ACTIVITY_WINDOW_MINUTES} minutes`);
   } catch (error) {
     console.error('Error initializing OpenTelemetry instrumentation', error);
     throw error;
   }
 };
 
+// Helper function to track user activity on each authenticated request
+export const trackUserActivity = (attributes: {
+  workspaceId: string;
+  userId: string;
+  sessionId?: string;
+  userRole?: string;
+}) => {
+  try {
+    // Validate required fields
+    if (!attributes?.workspaceId || !attributes?.userId) {
+      if (process.env.OTEL_LOG_LEVEL === 'debug') {
+        console.warn('[OTEL] Invalid user activity attributes:', attributes);
+      }
+      return;
+    }
+
+    // Sanitize and limit lengths to prevent memory issues
+    const workspaceId = String(attributes.workspaceId).slice(0, 100);
+    const userId = String(attributes.userId).slice(0, 100);
+    const sessionId = attributes.sessionId ? String(attributes.sessionId).slice(0, 100) : undefined;
+
+    const now = Date.now();
+
+    // Track unique users (workspaceId:userId)
+    const userKey = `${workspaceId}:${userId}`;
+
+    // Safety cap to prevent unbounded memory growth for users
+    if (activeUsersByWorkspace.size >= MAX_TRACKED_USERS && !activeUsersByWorkspace.has(userKey)) {
+      const oldestKey = activeUsersByWorkspace.keys().next().value;
+      if (oldestKey) {
+        activeUsersByWorkspace.delete(oldestKey);
+        if (process.env.OTEL_LOG_LEVEL === 'debug') {
+          console.warn('[OTEL] Max tracked users reached, removed oldest entry');
+        }
+      }
+    }
+
+    activeUsersByWorkspace.set(userKey, {
+      lastSeen: now,
+      role: attributes.userRole,
+      sessionId: sessionId,
+    });
+
+    // Track unique sessions (workspaceId:sessionId) if sessionId is provided
+    if (sessionId) {
+      const sessionKey = `${workspaceId}:${sessionId}`;
+
+      // Safety cap to prevent unbounded memory growth for sessions
+      if (activeSessionsByWorkspace.size >= MAX_TRACKED_USERS && !activeSessionsByWorkspace.has(sessionKey)) {
+        const oldestKey = activeSessionsByWorkspace.keys().next().value;
+        if (oldestKey) {
+          activeSessionsByWorkspace.delete(oldestKey);
+          if (process.env.OTEL_LOG_LEVEL === 'debug') {
+            console.warn('[OTEL] Max tracked sessions reached, removed oldest entry');
+          }
+        }
+      }
+
+      activeSessionsByWorkspace.set(sessionKey, {
+        lastSeen: now,
+        userId: userId,
+        role: attributes.userRole,
+      });
+    }
+  } catch (error) {
+    if (process.env.OTEL_LOG_LEVEL === 'debug') {
+      console.error('[OTEL] Error tracking user activity:', error);
+    }
+    // Don't throw - metric collection should never break the app
+  }
+};
+
+// Helper functions for user metrics tracking
+export const incrementConcurrentUsers = (attributes: {
+  workspaceId?: string;
+  userId?: string;
+  userRole?: string;
+}) => {
+  if (concurrentUsersCounter) {
+    const metricAttributes: any = {};
+    if (attributes.workspaceId) metricAttributes['workspace.id'] = attributes.workspaceId;
+    if (attributes.userRole) metricAttributes['user.role'] = attributes.userRole;
+
+    concurrentUsersCounter.add(1, metricAttributes);
+  }
+};
+
+export const decrementConcurrentUsers = (attributes: {
+  workspaceId?: string;
+  userId?: string;
+  userRole?: string;
+}) => {
+  if (concurrentUsersCounter) {
+    const metricAttributes: any = {};
+    if (attributes.workspaceId) metricAttributes['workspace.id'] = attributes.workspaceId;
+    if (attributes.userRole) metricAttributes['user.role'] = attributes.userRole;
+
+    concurrentUsersCounter.add(-1, metricAttributes);
+  }
+};
+
+export const incrementActiveSessions = (attributes: {
+  workspaceId?: string;
+  userId?: string;
+  sessionType?: string;
+}) => {
+  if (activeSessionsCounter) {
+    const metricAttributes: any = {};
+    if (attributes.workspaceId) metricAttributes['workspace.id'] = attributes.workspaceId;
+    if (attributes.sessionType) metricAttributes['session.type'] = attributes.sessionType;
+
+    activeSessionsCounter.add(1, metricAttributes);
+  }
+};
+
+export const decrementActiveSessions = (attributes: {
+  workspaceId?: string;
+  userId?: string;
+  sessionType?: string;
+}) => {
+  if (activeSessionsCounter) {
+    const metricAttributes: any = {};
+    if (attributes.workspaceId) metricAttributes['workspace.id'] = attributes.workspaceId;
+    if (attributes.sessionType) metricAttributes['session.type'] = attributes.sessionType;
+
+    activeSessionsCounter.add(-1, metricAttributes);
+  }
+};
+
 export default sdk;
diff --git a/server/tsconfig.json b/server/tsconfig.json
index cfcc76168c..beae129eff 100644
--- a/server/tsconfig.json
+++ b/server/tsconfig.json
@@ -35,6 +35,9 @@
       "@helpers/*": [
         "src/helpers/*"
       ],
+      "@otel/*": [
+        "src/otel/*"
+      ],
     },
   },
   "exclude": [

From 1bb412220ef999faa8d9d9ad8207184a444fd9bf Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Thu, 30 Oct 2025 12:56:52 +0530
Subject: [PATCH 148/157] Delete .cursor/mcp.json

---
 .cursor/mcp.json | 11 -----------
 1 file changed, 11 deletions(-)
 delete mode 100644 .cursor/mcp.json

diff --git a/.cursor/mcp.json b/.cursor/mcp.json
deleted file mode 100644
index bd98b4ff83..0000000000
--- a/.cursor/mcp.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "mcpServers": {
-    "shadcn": {
-      "command": "npx",
-      "args": [
-        "shadcn@latest",
-        "mcp"
-      ]
-    }
-  }
-}

From d30b6813ec96e59287d6b372acc7604b3ac77a0f Mon Sep 17 00:00:00 2001
From: Parth <108089718+parthy007@users.noreply.github.com>
Date: Fri, 31 Oct 2025 15:13:53 +0530
Subject: [PATCH 149/157] Fix: SSO login failure (#14467)

* fix: correct SSO config filtering logic for instance-level authentication

* chore: Update submodule hash
---
 server/ee                                |  2 +-
 server/src/modules/auth/oauth/service.ts | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/server/ee b/server/ee
index 281ebda361..6e64d18a46 160000
--- a/server/ee
+++ b/server/ee
@@ -1 +1 @@
-Subproject commit 281ebda36158bd5688e4f2b1b49db0d298bb0ac5
+Subproject commit 6e64d18a4675fd030cbd8eb46f095a8b813d0d50
diff --git a/server/src/modules/auth/oauth/service.ts b/server/src/modules/auth/oauth/service.ts
index b6b6ea2644..43b013ed97 100644
--- a/server/src/modules/auth/oauth/service.ts
+++ b/server/src/modules/auth/oauth/service.ts
@@ -87,8 +87,14 @@ export class OauthService implements IOAuthService {
       organization = ssoConfigs?.organization;
     } else if (isInstanceSSOOrganizationLogin) {
       // Instance SSO login from organization login page
-      organization = await this.loginConfigsUtilService.fetchOrganizationDetails(organizationId, [true], false, true);
-      ssoConfigs = organization?.ssoConfigs?.find((conf) => conf.sso === ssoType);
+      organization = await this.loginConfigsUtilService.fetchOrganizationDetails(
+        organizationId,
+        [true, false],
+        false,
+        true
+      );
+      organization.ssoConfigs = this.loginConfigsUtilService.removeDisabledSsoConfigs(organization?.ssoConfigs);
+      ssoConfigs = organization?.ssoConfigs?.find((conf) => conf?.sso === ssoType);
     } else if (isInstanceSSOLogin) {
       // Instance SSO login from common login page
       ssoConfigs = await this.authUtilService.getInstanceSSOConfigsOfType(ssoType);

From 0db3e2a72e36bf17a53dbabb256c3ed09928da56 Mon Sep 17 00:00:00 2001
From: Adish M <44204658+adishM98@users.noreply.github.com>
Date: Fri, 31 Oct 2025 15:15:51 +0530
Subject: [PATCH 150/157] =?UTF-8?q?=F0=9F=9A=80=20chore:=20update=20submod?=
 =?UTF-8?q?ules=20to=20latest=20lts-3.16=20after=20auto-merge=20(#14479)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: gsmithun4 <3417097+gsmithun4@users.noreply.github.com>
---
 server/ee | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/ee b/server/ee
index 6e64d18a46..2e20b4b6b2 160000
--- a/server/ee
+++ b/server/ee
@@ -1 +1 @@
-Subproject commit 6e64d18a4675fd030cbd8eb46f095a8b813d0d50
+Subproject commit 2e20b4b6b28a984c3fd09d64f00f606b56dd532f

From 346e26867f07b9aa61ba9f6364987ed85827ee0e Mon Sep 17 00:00:00 2001
From: Parth <108089718+parthy007@users.noreply.github.com>
Date: Fri, 31 Oct 2025 15:29:20 +0530
Subject: [PATCH 151/157] Feat: OIDC PKCE flow  (#14407)

* feat: Add client config interface

* chore: update submodule hashes

* refactor: Fix interface name

chore: submodule hashes

* chore: Add data migration for adding grant-type

* fix: Change height & fontSize of dropdown

* chore: update submodule hash

* chore: update submodule hash

* resolve conflicts

* chore: update version to 3.20.29-lts across all components

---------

Co-authored-by: gsmithun4 <gsmithun4@gmail.com>
---
 .version                                      |  2 +-
 frontend/.version                             |  2 +-
 frontend/ee                                   |  2 +-
 frontend/src/_ui/Select/styles.js             |  2 +
 server/.version                               |  2 +-
 ...761556597329-AddGrantTypeKeyInSSOConfig.ts | 96 +++++++++++++++++++
 server/ee                                     |  2 +-
 server/src/modules/auth/types/index.ts        |  7 ++
 8 files changed, 110 insertions(+), 5 deletions(-)
 create mode 100644 server/data-migrations/1761556597329-AddGrantTypeKeyInSSOConfig.ts

diff --git a/.version b/.version
index c3f7ac12c1..e1b4165710 100644
--- a/.version
+++ b/.version
@@ -1 +1 @@
-3.20.28-lts
+3.20.29-lts
diff --git a/frontend/.version b/frontend/.version
index c3f7ac12c1..e1b4165710 100644
--- a/frontend/.version
+++ b/frontend/.version
@@ -1 +1 @@
-3.20.28-lts
+3.20.29-lts
diff --git a/frontend/ee b/frontend/ee
index 5665f90bec..7cfcb38fc1 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit 5665f90bec58cca14138945852835db8e0bde9cd
+Subproject commit 7cfcb38fc16571927e5a1445c87b7ed59e83c8e2
diff --git a/frontend/src/_ui/Select/styles.js b/frontend/src/_ui/Select/styles.js
index 899e3a58f1..d9d444f82a 100644
--- a/frontend/src/_ui/Select/styles.js
+++ b/frontend/src/_ui/Select/styles.js
@@ -61,6 +61,7 @@ export default function styles(darkMode, width = 224, height = 32, styles = {},
       padding: '10px 12px', // adjust padding to vertically center the text
       display: 'flex',
       alignItems: 'center',
+      fontSize: styles.fontSize ?? '12px',
     }),
     placeholder: (provided) => ({
       ...provided,
@@ -69,6 +70,7 @@ export default function styles(darkMode, width = 224, height = 32, styles = {},
     singleValue: (provided) => ({
       ...provided,
       color: darkMode ? '#fff' : '#232e3c',
+      fontSize: styles.fontSize ?? '12px',
     }),
     menuPortal: (provided) => ({ ...provided, zIndex: 2000 }),
   };
diff --git a/server/.version b/server/.version
index c3f7ac12c1..e1b4165710 100644
--- a/server/.version
+++ b/server/.version
@@ -1 +1 @@
-3.20.28-lts
+3.20.29-lts
diff --git a/server/data-migrations/1761556597329-AddGrantTypeKeyInSSOConfig.ts b/server/data-migrations/1761556597329-AddGrantTypeKeyInSSOConfig.ts
new file mode 100644
index 0000000000..3f748b5e27
--- /dev/null
+++ b/server/data-migrations/1761556597329-AddGrantTypeKeyInSSOConfig.ts
@@ -0,0 +1,96 @@
+import { dbTransactionWrap } from '@helpers/database.helper';
+import { MigrationProgress, processDataInBatches } from '@helpers/migration.helper';
+import { EntityManager, MigrationInterface, QueryRunner } from 'typeorm';
+
+export class AddGrantTypeKeyInSSOConfig1761556597329 implements MigrationInterface {
+  private readonly SSO_TYPE = 'openid';
+  private readonly BATCH_SIZE = 100;
+
+  private async getTotalCount(entityManager: EntityManager): Promise<number> {
+    const totalRecords = await entityManager.query(
+      `
+      SELECT COUNT(*)
+      FROM sso_configs
+      WHERE sso = $1
+    `,
+      [this.SSO_TYPE]
+    );
+    return parseInt(totalRecords[0].count, 10);
+  }
+
+  private fetchSSOConfigsBatch = async (entityManager: EntityManager, skip: number, take: number): Promise<any[]> => {
+    return await entityManager.query(
+      `
+        SELECT id, configs
+        FROM sso_configs
+        WHERE sso = $1
+        ORDER BY id
+        LIMIT $2 OFFSET $3
+      `,
+      [this.SSO_TYPE, take, skip]
+    );
+  };
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    const entityManager = queryRunner.manager;
+    const totalCount = await this.getTotalCount(entityManager);
+
+    if (totalCount === 0) return;
+
+    await dbTransactionWrap(async (entityManager: EntityManager) => {
+      const migrationProgress = new MigrationProgress('AddGrantTypeKeyInSSOConfig1761556597329', totalCount);
+
+      const processBatch = async (entityManager: EntityManager, ssoConfigs: any[]) => {
+        for (const ssoConfig of ssoConfigs) {
+          const configs = ssoConfig.configs;
+          if (configs && !configs.grant_type) {
+            configs.grant_type = 'authorization_code';
+
+            await entityManager.query(
+              `
+              UPDATE sso_configs
+              SET configs = $1
+              WHERE id = $2
+            `,
+              [configs, ssoConfig.id]
+            );
+          }
+          migrationProgress.show();
+        }
+      };
+      await processDataInBatches(entityManager, this.fetchSSOConfigsBatch, processBatch, this.BATCH_SIZE);
+    }, entityManager);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    const entityManager = queryRunner.manager;
+    const totalCount = await this.getTotalCount(entityManager);
+
+    if (totalCount === 0) return;
+
+    await dbTransactionWrap(async (entityManager: EntityManager) => {
+      const migrationProgress = new MigrationProgress('AddGrantTypeKeyInSSOConfig1761556597329', totalCount);
+
+      const processBatch = async (entityManager: EntityManager, ssoConfigs: any[]) => {
+        for (const ssoConfig of ssoConfigs) {
+          const configs = ssoConfig.configs;
+          if (configs && configs.grant_type) {
+            delete configs.grant_type;
+
+            await entityManager.query(
+              `
+              UPDATE sso_configs
+              SET configs = $1
+              WHERE id = $2
+            `,
+              [configs, ssoConfig.id]
+            );
+          }
+          migrationProgress.show();
+        }
+      };
+
+      await processDataInBatches(entityManager, this.fetchSSOConfigsBatch, processBatch, this.BATCH_SIZE);
+    });
+  }
+}
diff --git a/server/ee b/server/ee
index 2e20b4b6b2..6f507336a2 160000
--- a/server/ee
+++ b/server/ee
@@ -1 +1 @@
-Subproject commit 2e20b4b6b28a984c3fd09d64f00f606b56dd532f
+Subproject commit 6f507336a229c0542ca95d77d54e6e31cbf2a068
diff --git a/server/src/modules/auth/types/index.ts b/server/src/modules/auth/types/index.ts
index 351d1655e5..888124f1b7 100644
--- a/server/src/modules/auth/types/index.ts
+++ b/server/src/modules/auth/types/index.ts
@@ -1,6 +1,7 @@
 import { FEATURE_KEY } from '../constants';
 import { FeatureConfig } from '@modules/app/types';
 import { MODULES } from '@modules/app/constants/modules';
+import { ClientMetadata } from 'openid-client';
 
 export interface Features {
   [FEATURE_KEY.LOGIN]: FeatureConfig;
@@ -25,3 +26,9 @@ export interface Features {
 export interface FeaturesConfig {
   [MODULES.AUTH]: Features;
 }
+
+export interface OidcClientConfig extends Partial<ClientMetadata> {
+  client_id: string;
+  client_secret?: string;
+  redirect_uris: string[];
+}

From 64a393e083798625cedf3cf1d9ed14102b100f7b Mon Sep 17 00:00:00 2001
From: Adish M <44204658+adishM98@users.noreply.github.com>
Date: Fri, 31 Oct 2025 15:31:20 +0530
Subject: [PATCH 152/157] =?UTF-8?q?=F0=9F=9A=80=20chore:=20update=20submod?=
 =?UTF-8?q?ules=20to=20latest=20lts-3.16=20after=20auto-merge=20(#14480)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: gsmithun4 <3417097+gsmithun4@users.noreply.github.com>
---
 frontend/ee | 2 +-
 server/ee   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/ee b/frontend/ee
index 7cfcb38fc1..cf06015535 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit 7cfcb38fc16571927e5a1445c87b7ed59e83c8e2
+Subproject commit cf06015535b8ca1199f9c5432e9bc5ac93825050
diff --git a/server/ee b/server/ee
index 6f507336a2..f5b3532855 160000
--- a/server/ee
+++ b/server/ee
@@ -1 +1 @@
-Subproject commit 6f507336a229c0542ca95d77d54e6e31cbf2a068
+Subproject commit f5b3532855ef39cf7cc41a0fcd7fd4785bfacd29

From d29b08d1a975aee98f7689b953f312565e57d15c Mon Sep 17 00:00:00 2001
From: Rudhra Deep Biswas <98055396+rudeUltra@users.noreply.github.com>
Date: Fri, 31 Oct 2025 15:54:42 +0530
Subject: [PATCH 153/157] Licensing Features (#14337)

* plan

* modules and customGroup

* builder roggle

* role name

* struct

* fix

* sus

* field fix

* create app btn

* module visible

* refactor: update license validation logic and improve feature access checks

* app module

* feat: Added modules support for public apps

* refactor: migrate license management to a new store and update related components

* workflow enabled

* feat: integrate license validation into Viewer component and remove deprecated license check

* Revert "feat: integrate license validation into Viewer component and remove deprecated license check"

This reverts commit b4b5218079323c809137e4fd0133f20767f4d470.

* Revert "refactor: migrate license management to a new store and update related components"

This reverts commit cd2936bb1238cd47930ae43104e56b43c81d1368.

* chore: update subproject commit reference in server/ee

* fix

* style

* feat: add module access validation in AppBuilder and update subproject references

* refactor: remove debug statements from AppBuilder component

* chore: update subproject commit reference in frontend/ee

* chore: update subproject commit references in frontend and server directories

---------

Co-authored-by: Kavin Venkatachalam <kavin.saratha@gmail.com>
Co-authored-by: Johnson Cherian <johnsonc.dev@gmail.com>
Co-authored-by: gsmithun4 <gsmithun4@gmail.com>
---
 frontend/ee                                   |   2 +-
 frontend/src/AppBuilder/AppBuilder.jsx        |  12 +-
 .../AppCanvas/ConfigHandle/ConfigHandle.jsx   |   6 +-
 frontend/src/AppBuilder/Viewer/Viewer.jsx     |   2 +-
 frontend/src/AppBuilder/_hooks/useAppData.js  |  19 +--
 .../AppBuilder/_stores/slices/licenseSlice.js |   3 +
 frontend/src/HomePage/AppCard.jsx             |   6 +-
 frontend/src/HomePage/AppList.jsx             |   1 +
 frontend/src/HomePage/HomePage.jsx            |  25 +++-
 frontend/src/LicenseTooltip/index.jsx         |   1 +
 frontend/src/_stores/licenseStore.js          |   7 +-
 frontend/src/_styles/license.scss             |   1 +
 .../BaseManageGroupPermissions.jsx            |   4 +-
 server/ee                                     |   2 +-
 .../group-permissions/constants/features.ts   |   6 +-
 .../util-services/license.util.service.ts     |   3 +
 .../modules/group-permissions/util.service.ts |   4 +-
 .../modules/licensing/configs/LicenseBase.ts  | 130 ++++++++++++++++++
 .../modules/licensing/constants/PlanTerms.ts  |  20 +++
 .../src/modules/licensing/constants/index.ts  |   8 ++
 server/src/modules/licensing/helper.ts        |  16 +++
 .../src/modules/licensing/interfaces/terms.ts |  21 +++
 .../src/modules/modules/constants/feature.ts  |  12 +-
 23 files changed, 272 insertions(+), 39 deletions(-)

diff --git a/frontend/ee b/frontend/ee
index cf06015535..7cfcb38fc1 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit cf06015535b8ca1199f9c5432e9bc5ac93825050
+Subproject commit 7cfcb38fc16571927e5a1445c87b7ed59e83c8e2
diff --git a/frontend/src/AppBuilder/AppBuilder.jsx b/frontend/src/AppBuilder/AppBuilder.jsx
index ab117b2a95..69386b9679 100644
--- a/frontend/src/AppBuilder/AppBuilder.jsx
+++ b/frontend/src/AppBuilder/AppBuilder.jsx
@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import React, { Suspense, useEffect } from 'react';
 import useStore from '@/AppBuilder/_stores/store';
 import useAppData from '@/AppBuilder/_hooks/useAppData';
 import { TJLoader } from '@/_ui/TJLoader/TJLoader';
@@ -16,6 +16,7 @@ import Popups from './Popups';
 import { ModuleProvider } from '@/AppBuilder/_contexts/ModuleContext';
 import RightSidebarToggle from '@/AppBuilder/RightSideBar/RightSidebarToggle';
 import { shallow } from 'zustand/shallow';
+import { useNavigate } from 'react-router-dom';
 
 import ArtifactPreview from './ArtifactPreview';
 
@@ -30,10 +31,13 @@ export const Editor = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
   useAppData(appId, moduleId, darkMode);
   const isEditorLoading = useStore((state) => state.loaderStore.modules[moduleId].isEditorLoading, shallow);
   const currentMode = useStore((state) => state.modeStore.modules[moduleId].currentMode, shallow);
+  const hasModuleAccess = useStore((state) => state.license.featureAccess?.modulesEnabled);
   const isModuleEditor = appType === 'module';
+  console.log("isModuleEditor", isModuleEditor);
 
   const updateIsTJDarkMode = useStore((state) => state.updateIsTJDarkMode, shallow);
   const appBuilderMode = useStore((state) => state.appStore.modules[moduleId]?.app?.appBuilderMode ?? 'visual');
+  const navigate = useNavigate();
 
   const isUserInZeroToOneFlow = appBuilderMode === 'ai';
 
@@ -42,6 +46,12 @@ export const Editor = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
     switchDarkMode(newMode);
   };
 
+  useEffect(() => {
+    if (hasModuleAccess === false && isModuleEditor) {
+      navigate('/error/restricted');
+    }
+  }, [hasModuleAccess, isModuleEditor]);
+
   //TODO: This can be added to the mode slice and set based on the mode
   if (isEditorLoading) {
     return (
diff --git a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
index f3aa693cf4..d0428309f1 100644
--- a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
@@ -28,7 +28,7 @@ export const ConfigHandle = ({
   subContainerIndex,
 }) => {
   const { moduleId } = useModuleContext();
-  const isLicenseValid = useStore((state) => state.isLicenseValid(), shallow);
+  const isModulesEnabled = useStore((state) => state.license.featureAccess?.modulesEnabled, shallow);
   const shouldFreeze = useStore((state) => state.getShouldFreeze());
   const componentName = useStore((state) => state.getComponentDefinition(id, moduleId)?.component?.name || '', shallow);
   const isMultipleComponentsSelected = useStore(
@@ -219,11 +219,11 @@ export const ConfigHandle = ({
         )}
       </span>
       {/* Tooltip for invalid license on ModuleViewer */}
-      {!isLicenseValid && componentType === 'ModuleViewer' && (
+      {(componentType === 'ModuleViewer' || componentType === 'ModuleContainer') && !isModulesEnabled && (
         <Tooltip
           id={`invalid-license-modules-${componentName?.toLowerCase()}`}
           className="tooltip"
-          isOpen={_showHandle && componentType === 'ModuleViewer'}
+          isOpen={_showHandle && (componentType === 'ModuleViewer' || componentType === 'ModuleContainer')}
           style={{ textAlign: 'center' }}
         />
       )}
diff --git a/frontend/src/AppBuilder/Viewer/Viewer.jsx b/frontend/src/AppBuilder/Viewer/Viewer.jsx
index 3e3bf8c8e4..8e07ff72d3 100644
--- a/frontend/src/AppBuilder/Viewer/Viewer.jsx
+++ b/frontend/src/AppBuilder/Viewer/Viewer.jsx
@@ -278,7 +278,7 @@ export const Viewer = ({
                                 darkMode={darkMode}
                               />
                             </div>
-                            {isLicenseNotValid && isAppLoaded && <TooljetBanner isDarkMode={darkMode} />}
+                            {isLicenseNotValid && isAppLoaded && !moduleMode && <TooljetBanner isDarkMode={darkMode} />}
                             {isMobilePreviewMode && <div className="hide-drawer-transition" style={{ right: 0 }}></div>}
                             {isMobilePreviewMode && <div className="hide-drawer-transition" style={{ left: 0 }}></div>}
                           </div>
diff --git a/frontend/src/AppBuilder/_hooks/useAppData.js b/frontend/src/AppBuilder/_hooks/useAppData.js
index 8281cb6e4b..b570f8017e 100644
--- a/frontend/src/AppBuilder/_hooks/useAppData.js
+++ b/frontend/src/AppBuilder/_hooks/useAppData.js
@@ -22,7 +22,7 @@ import queryString from 'query-string';
 import { distinctUntilChanged } from 'rxjs';
 import { baseTheme, convertAllKeysToSnakeCase } from '../_stores/utils';
 import { getPreviewQueryParams } from '@/_helpers/routes';
-import { useLocation, useMatch, useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import { useMounted } from '@/_hooks/use-mount';
 import useThemeAccess from './useThemeAccess';
 import toast from 'react-hot-toast';
@@ -126,7 +126,7 @@ const useAppData = (
   const setSelectedSidebarItem = useStore((state) => state.setSelectedSidebarItem);
   const toggleLeftSidebar = useStore((state) => state.toggleLeftSidebar);
   const pathParams = useParams();
-  const slug = moduleMode ? '' : pathParams?.slug;
+  let slug = pathParams?.slug;
 
   const previousVersion = usePrevious(currentVersionId);
   const events = useStore((state) => state.eventsSlice.module[moduleId]?.events || []);
@@ -231,17 +231,13 @@ const useAppData = (
     }
     let appDataPromise;
     const queryParams = moduleMode ? {} : getPreviewQueryParams();
-    const isPublicAccess = moduleMode
-      ? false
-      : (currentSession?.load_app && currentSession?.authentication_failed) ||
-        (!queryParams.version && mode !== 'edit');
+    const isPublicAccess =
+      (currentSession?.load_app && currentSession?.authentication_failed) || (!queryParams.version && mode !== 'edit');
     const isPreviewForVersion = (mode !== 'edit' && queryParams.version) || isPublicAccess;
 
     if (moduleMode) {
       const moduleDefinition = getModuleDefinition(appId);
       if (moduleDefinition) {
-        // clean up the module definition from the store
-        deleteModuleDefinition(appId);
         appDataPromise = Promise.resolve(moduleDefinition);
       } else {
         appDataPromise = appService.fetchApp(appId);
@@ -286,7 +282,12 @@ const useAppData = (
         if (mode !== 'edit') {
           try {
             const queryParams = { slug: slug };
-            const viewerEnvironment = await appEnvironmentService.getEnvironment(environmentId, queryParams);
+
+            const viewerEnvironment =
+              moduleMode && isPublicAccess
+                ? { environment: { id: environmentId, name: 'development' } } // This needs to be replaced once the environment is implemented for modules
+                : await appEnvironmentService.getEnvironment(environmentId, queryParams);
+
             editorEnvironment = {
               id: viewerEnvironment?.environment?.id,
               name: viewerEnvironment?.environment?.name,
diff --git a/frontend/src/AppBuilder/_stores/slices/licenseSlice.js b/frontend/src/AppBuilder/_stores/slices/licenseSlice.js
index bf98065077..4be2332abc 100644
--- a/frontend/src/AppBuilder/_stores/slices/licenseSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/licenseSlice.js
@@ -25,4 +25,7 @@ export const createLicenseSlice = (set, get) => ({
     }
     return false;
   },
+  isFeatureAccessible: (featureName) => {
+    return get().license.featureAccess?.[featureName] ?? false;
+  },
 });
diff --git a/frontend/src/HomePage/AppCard.jsx b/frontend/src/HomePage/AppCard.jsx
index de73d50f1a..bf28ac4a2f 100644
--- a/frontend/src/HomePage/AppCard.jsx
+++ b/frontend/src/HomePage/AppCard.jsx
@@ -209,13 +209,13 @@ export default function AppCard({
 
   return (
     <ToolTip
-      message="Modules are available only on paid plans"
+      message="Modules are not available on your current plan."
       placement="bottom"
-      show={appType === 'module' && props.basicPlan}
+      show={appType === 'module' && !props.moduleEnabled}
     >
       <div className="card homepage-app-card card--clickable" ref={cardRef}>
         <div
-          className={appType === 'module' && props.basicPlan ? 'disabled-module' : ''}
+          className={appType === 'module' && !props.moduleEnabled ? 'disabled-module' : ''}
           key={app?.id}
           ref={hoverRef}
           data-cy={`${app?.name?.toLowerCase().replace(/\s+/g, '-')}-card`}
diff --git a/frontend/src/HomePage/AppList.jsx b/frontend/src/HomePage/AppList.jsx
index e0669e1dee..5f60a83202 100644
--- a/frontend/src/HomePage/AppList.jsx
+++ b/frontend/src/HomePage/AppList.jsx
@@ -43,6 +43,7 @@ const AppList = (props) => {
                     appActionModal={props.appActionModal}
                     appType={props.appType}
                     basicPlan={props?.basicPlan || false}
+                    moduleEnabled={props?.moduleEnabled || false}
                   />
                 </div>
               );
diff --git a/frontend/src/HomePage/HomePage.jsx b/frontend/src/HomePage/HomePage.jsx
index 5be3db9c9b..be68ae28c5 100644
--- a/frontend/src/HomePage/HomePage.jsx
+++ b/frontend/src/HomePage/HomePage.jsx
@@ -686,7 +686,7 @@ class HomePageComponent extends React.Component {
         default:
           return false;
       }
-    } else {
+    } else if (this.props.appType === 'front-end') {
       const canUpdateApp =
         app_group_permissions &&
         (app_group_permissions.is_all_editable || app_group_permissions.editable_apps_id.includes(app?.id));
@@ -707,6 +707,9 @@ class HomePageComponent extends React.Component {
         default:
           return false;
       }
+    } else {
+      // Module permissions return true if builder
+      return currentSession?.role?.name === 'builder' || currentSession?.super_admin || currentSession?.admin;
     }
   }
 
@@ -1241,18 +1244,27 @@ class HomePageComponent extends React.Component {
     }
 
     const invalidLicense = featureAccess?.licenseStatus?.isExpired || !featureAccess?.licenseStatus?.isLicenseValid;
+    const moduleEnabled = featureAccess?.modulesEnabled || false;
     const deleteModuleText =
       'This action will permanently delete the module from all connected applications. This cannot be reversed. Confirm deletion?';
 
     const getDisabledState = () => {
       if (this.props.appType === 'module') {
-        return invalidLicense;
+        return !moduleEnabled;
       } else if (this.props.appType === 'front-end') {
         return appsLimit?.percentage >= 100;
       } else {
         return this.hasWorkflowLimitReached();
       }
     };
+
+    const showCreateAppButtonTooltip = () => {
+      if (this.props.appType === 'module') {
+        return true;
+      } else {
+        return this.canCreateApp();
+      }
+    };
     const modalConfigs = {
       create: {
         modalType: 'create',
@@ -1679,7 +1691,7 @@ class HomePageComponent extends React.Component {
           <div className="row gx-0">
             <div className="home-page-sidebar col p-0">
               <div className="create-new-app-license-wrapper">
-                {this.canCreateApp() && (
+                {showCreateAppButtonTooltip() && (
                   <LicenseTooltip
                     limits={appsLimit}
                     feature={
@@ -1902,7 +1914,7 @@ class HomePageComponent extends React.Component {
                       </div>
 
                       <ButtonSolid
-                        disabled={invalidLicense}
+                        disabled={!moduleEnabled}
                         leftIcon="folderdownload"
                         isLoading={false}
                         onClick={this.openCreateAppModal}
@@ -1911,8 +1923,8 @@ class HomePageComponent extends React.Component {
                         variant="tertiary"
                       >
                         <ToolTip
-                          show={invalidLicense}
-                          message="Modules are available only on paid plans"
+                          show={!moduleEnabled}
+                          message="Modules are not available on your current plan."
                           placement="bottom"
                         >
                           <label style={{ visibility: isImportingApp ? 'hidden' : 'visible' }} data-cy="create-module">
@@ -1948,6 +1960,7 @@ class HomePageComponent extends React.Component {
                     removeAppFromFolder={this.removeAppFromFolder}
                     appType={this.props.appType}
                     basicPlan={invalidLicense}
+                    moduleEnabled={moduleEnabled}
                     appSearchKey={this.state.appSearchKey}
                   />
                 )}
diff --git a/frontend/src/LicenseTooltip/index.jsx b/frontend/src/LicenseTooltip/index.jsx
index d7eeefe24d..15dd3dab24 100644
--- a/frontend/src/LicenseTooltip/index.jsx
+++ b/frontend/src/LicenseTooltip/index.jsx
@@ -26,6 +26,7 @@ const LicenseTooltip = ({
     'Import from git': 'gitSync',
     GitSync: 'gitSync',
     'Custom themes': 'customThemes',
+    'Custom groups': 'customGroups',
   };
 
   const generateMessage = () => {
diff --git a/frontend/src/_stores/licenseStore.js b/frontend/src/_stores/licenseStore.js
index 990ea502df..6e2c2b1f08 100644
--- a/frontend/src/_stores/licenseStore.js
+++ b/frontend/src/_stores/licenseStore.js
@@ -24,7 +24,12 @@ export const useLicenseStore = create(
         checkModuleAccess: () => {
           // Check if user is an end-user; if so, do not give module access
           const currentSession = authenticationService.currentSessionValue;
-          if (!currentSession?.user_permissions?.app_create && !currentSession?.super_admin && !currentSession?.admin) {
+          if (
+            !currentSession?.user_permissions?.app_create &&
+            !currentSession?.super_admin &&
+            !currentSession?.admin &&
+            currentSession?.role?.name !== 'builder'
+          ) {
             set({ hasModuleAccess: false, moduleAccessLoading: false });
           } else {
             set({ hasModuleAccess: true, moduleAccessLoading: false });
diff --git a/frontend/src/_styles/license.scss b/frontend/src/_styles/license.scss
index 6b5572b793..6fa54bd899 100644
--- a/frontend/src/_styles/license.scss
+++ b/frontend/src/_styles/license.scss
@@ -137,6 +137,7 @@
                 display: grid;
                 grid-template-columns: 1fr 1fr;
                 padding: 30px 40px;
+                padding-left: 20px;
 
                 .title {
                     color: var(--slate11);
diff --git a/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGroupPermissions/BaseManageGroupPermissions.jsx b/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGroupPermissions/BaseManageGroupPermissions.jsx
index 029dab6cbd..89fad384e9 100644
--- a/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGroupPermissions/BaseManageGroupPermissions.jsx
+++ b/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGroupPermissions/BaseManageGroupPermissions.jsx
@@ -568,7 +568,7 @@ class BaseManageGroupPermissions extends React.Component {
                   noTooltipIfValid={true}
                   isAvailable={isFeatureEnabled}
                   placement={'bottom'}
-                  customMessage={'Custom groups are available only in paid plans'}
+                  customMessage={'Custom groups are not available in your plan'}
                 >
                   <ButtonSolid
                     className="btn btn-primary create-new-group-button"
@@ -748,7 +748,7 @@ class BaseManageGroupPermissions extends React.Component {
                             noTooltipIfValid={true}
                             isAvailable={isFeatureEnabled}
                             placement={'right'}
-                            customMessage={'Custom groups are available only in paid plans'}
+                            customMessage={'Custom groups are not available in your plan'}
                           >
                             <ButtonSolid
                               onClick={(e) => {
diff --git a/server/ee b/server/ee
index f5b3532855..6f507336a2 160000
--- a/server/ee
+++ b/server/ee
@@ -1 +1 @@
-Subproject commit f5b3532855ef39cf7cc41a0fcd7fd4785bfacd29
+Subproject commit 6f507336a229c0542ca95d77d54e6e31cbf2a068
diff --git a/server/src/modules/group-permissions/constants/features.ts b/server/src/modules/group-permissions/constants/features.ts
index e15d93bb52..8872b9b8e3 100644
--- a/server/src/modules/group-permissions/constants/features.ts
+++ b/server/src/modules/group-permissions/constants/features.ts
@@ -10,11 +10,11 @@ export const FEATURES_EE: FeaturesConfig = {
       auditLogsKey: 'USER_ADD_TO_GROUP',
     },
     [FEATURE_KEY.CREATE]: {
-      license: LICENSE_FIELD.VALID,
+      license: LICENSE_FIELD.CUSTOM_GROUPS,
       auditLogsKey: 'GROUP_PERMISSION_CREATE',
     },
     [FEATURE_KEY.DELETE]: {
-      license: LICENSE_FIELD.VALID,
+      license: LICENSE_FIELD.CUSTOM_GROUPS,
       auditLogsKey: 'GROUP_PERMISSION_DELETE',
     },
     [FEATURE_KEY.DELETE_GROUP_USER]: {
@@ -22,7 +22,7 @@ export const FEATURES_EE: FeaturesConfig = {
       auditLogsKey: 'USER_REMOVE_FROM_GROUP',
     },
     [FEATURE_KEY.DUPLICATE]: {
-      license: LICENSE_FIELD.VALID,
+      license: LICENSE_FIELD.CUSTOM_GROUPS,
       auditLogsKey: 'GROUP_PERMISSION_DUPLICATE',
     },
     [FEATURE_KEY.GET_ADDABLE_USERS]: {
diff --git a/server/src/modules/group-permissions/util-services/license.util.service.ts b/server/src/modules/group-permissions/util-services/license.util.service.ts
index 4fc3f15626..b3dabd8f4c 100644
--- a/server/src/modules/group-permissions/util-services/license.util.service.ts
+++ b/server/src/modules/group-permissions/util-services/license.util.service.ts
@@ -4,4 +4,7 @@ export class GroupPermissionLicenseUtilService implements IGroupPermissionsLicen
   async isValidLicense(organizationId?: string): Promise<boolean> {
     return true;
   }
+  async isFeatureEnabled(organizationId?: string): Promise<boolean> {
+    return true;
+  }
 }
diff --git a/server/src/modules/group-permissions/util.service.ts b/server/src/modules/group-permissions/util.service.ts
index 762fb5f688..b1ead10b9a 100644
--- a/server/src/modules/group-permissions/util.service.ts
+++ b/server/src/modules/group-permissions/util.service.ts
@@ -296,7 +296,7 @@ export class GroupPermissionsUtilService implements IGroupPermissionsUtilService
 
   async getAllGroupByOrganization(organizationId: string): Promise<GetUsersResponse> {
     return await dbTransactionWrap(async (manager: EntityManager) => {
-      const isLicenseValid = await this.licenseUtilService.isValidLicense(organizationId);
+      const isFeatureEnabled = await this.licenseUtilService.isFeatureEnabled(organizationId);
       const result = await manager.findAndCount(GroupPermissions, {
         where: { organizationId },
         order: { type: 'DESC' },
@@ -305,7 +305,7 @@ export class GroupPermissionsUtilService implements IGroupPermissionsUtilService
         groupPermissions: result[0],
         length: result[1],
       };
-      if (!isLicenseValid) {
+      if (!isFeatureEnabled) {
         response.groupPermissions?.forEach((gp) => {
           if (gp.type === GROUP_PERMISSIONS_TYPE.CUSTOM_GROUP) {
             gp.disabled = true;
diff --git a/server/src/modules/licensing/configs/LicenseBase.ts b/server/src/modules/licensing/configs/LicenseBase.ts
index 65357d3330..0bf7132d61 100644
--- a/server/src/modules/licensing/configs/LicenseBase.ts
+++ b/server/src/modules/licensing/configs/LicenseBase.ts
@@ -42,7 +42,12 @@ export default class LicenseBase {
   private _isExternalApis: boolean;
   private _isAppWhiteLabelling: boolean;
   private _plan: string;
+  private _isCustomGroups: boolean;
+  private _modules: object;
+  private _permissions: object;
+  private _app: object;
   private BASIC_PLAN_TERMS: Partial<Terms>;
+  private _isModulesEnabled: boolean;
 
   constructor(
     BASIC_PLAN_TERMS?: Partial<Terms>,
@@ -104,6 +109,11 @@ export default class LicenseBase {
     this._workspaceId = licenseData?.workspaceId;
     this._features = licenseData?.features;
     this._ai = licenseData?.ai;
+    this._modules = licenseData?.modules;
+    this._isModulesEnabled = licenseData?.modules?.enabled;
+    this._permissions = licenseData?.permissions;
+    this._app = licenseData?.app;
+    this._isCustomGroups = this.getPermissionValue('customGroups');
 
     // Features
     this._isAuditLogs = this.getFeatureValue('auditLogs');
@@ -133,7 +143,107 @@ export default class LicenseBase {
     }
     return true;
   }
+  private getPermissionValue(key: string) {
+    if (!this._permissions) {
+      return true;
+    }
+    if (this._permissions[key] === false) {
+      return false;
+    }
+    if (this._isFlexiblePlan && !this._permissions[key]) {
+      return false;
+    }
+    return true;
+  }
 
+  public get customGroups(): boolean {
+    if (this.IsBasicPlan) {
+      return !!this.BASIC_PLAN_TERMS.permissions?.customGroups;
+    }
+    return this._isCustomGroups;
+  }
+
+  public get modules(): object {
+    if (this.IsBasicPlan) {
+      return this.BASIC_PLAN_TERMS.modules;
+    }
+    if (!this._modules) {
+      return {
+        enabled: true,
+      }; //Not passed set to true for older licenses and trial
+    }
+    return this._modules;
+  }
+
+  public get appPermissionComponent(): boolean {
+    if (this.IsBasicPlan) {
+      return !!this.BASIC_PLAN_TERMS.app?.permissions?.component;
+    }
+    if (!this._app) {
+      return true; //Not passed set to true for older licenses and trial
+    }
+    return !!this._app['permissions']?.component;
+  }
+
+  public get appPermissionQuery(): boolean {
+    if (this.IsBasicPlan) {
+      return !!this.BASIC_PLAN_TERMS.app?.permissions?.query;
+    }
+    if (!this._app) {
+      return true; //Not passed set to true for older licenses and trial
+    }
+    return !!this._app['permissions']?.query;
+  }
+
+  public get appPermissionPages(): boolean {
+    if (this.IsBasicPlan) {
+      return !!this.BASIC_PLAN_TERMS.app?.permissions?.pages;
+    }
+    if (!this._app) {
+      return true; //Not passed set to true for older licenses and trial
+    }
+    return !!this._app['permissions']?.pages;
+  }
+
+  public get appPagesEnabled(): boolean {
+    if (this.IsBasicPlan) {
+      return !!this.BASIC_PLAN_TERMS.app?.pages?.enabled;
+    }
+    if (!this._app) {
+      return true; //Not passed set to true for older licenses and trial
+    }
+    return !!this._app['pages']?.enabled;
+  }
+
+  public get appPagesHeaderAndLogoEnabled(): boolean {
+    if (this.IsBasicPlan) {
+      return !!this.BASIC_PLAN_TERMS.app?.pages?.features?.appHeaderAndLogo;
+    }
+    if (!this._app) {
+      return true; //Not passed set to true for older licenses and trial
+    }
+    return !!this._app['pages']?.features?.appHeaderAndLogo;
+  }
+
+  public get appPagesAddNavGroupEnabled(): boolean {
+    if (this.IsBasicPlan) {
+      return !!this.BASIC_PLAN_TERMS.app?.pages?.features?.addNavGroup;
+    }
+    if (!this._app) {
+      return true; //Not passed set to true for older licenses and trial
+    }
+    return !!this._app['pages']?.features?.addNavGroup;
+  }
+
+  public get moduleEnabled(): boolean {
+    if (this.IsBasicPlan) {
+      return !!this.BASIC_PLAN_TERMS.modules?.enabled;
+    }
+    if (!this._modules) {
+      return true; //Not passed set to true for older licenses and trial
+    }
+    return !!this._isModulesEnabled;
+  }
   public get plan(): string {
     if (this.IsBasicPlan) {
       return;
@@ -364,6 +474,15 @@ export default class LicenseBase {
       comments: this.comments,
       ai: this.aiFeature,
       appWhiteLabelling: this.appWhiteLabelling,
+      modulesEnabled: this.moduleEnabled,
+      customGroups: this.customGroups,
+      appPagesAddNavGroupEnabled: this.appPagesAddNavGroupEnabled,
+      appPagesHeaderAndLogoEnabled: this.appPagesHeaderAndLogoEnabled,
+      appPagesEnabled: this.appPagesEnabled,
+      appPermissionComponent: this.appPermissionComponent,
+      appPermissionQuery: this.appPermissionQuery,
+      appPermissionPages: this.appPermissionPages,
+      workflowsEnabled: this.getWorkflowsEnabled(),
     };
   }
 
@@ -416,4 +535,15 @@ export default class LicenseBase {
     }
     return this._workflows ?? WORKFLOW_TEAM_PLAN_TERMS.workflows;
   }
+
+  public getWorkflowsEnabled(): boolean {
+    if (this.IsBasicPlan) {
+      return !!this.BASIC_PLAN_TERMS.workflows?.enabled;
+    }
+    // If "enabled" is undefined or missing, return true
+    if (this._workflows?.['enabled'] === undefined) {
+      return true;
+    }
+    return !!this._workflows?.['enabled'];
+  }
 }
diff --git a/server/src/modules/licensing/constants/PlanTerms.ts b/server/src/modules/licensing/constants/PlanTerms.ts
index 0c1791f7bc..de47ccbf03 100644
--- a/server/src/modules/licensing/constants/PlanTerms.ts
+++ b/server/src/modules/licensing/constants/PlanTerms.ts
@@ -44,6 +44,26 @@ export const BASIC_PLAN_TERMS: Partial<Terms> = {
   auditLogs: {
     maximumDays: 0,
   },
+  app: {
+    pages: {
+      enabled: false,
+      features: {
+        appHeaderAndLogo: false,
+        addNavGroup: false,
+      },
+    },
+    permissions: {
+      component: false,
+      query: false,
+      pages: false,
+    },
+  },
+  modules: {
+    enabled: false,
+  },
+  permissions: {
+    customGroups: false,
+  },
 };
 
 export const BASIC_PLAN_SETTINGS = {
diff --git a/server/src/modules/licensing/constants/index.ts b/server/src/modules/licensing/constants/index.ts
index f19ce102b8..de08c18a77 100644
--- a/server/src/modules/licensing/constants/index.ts
+++ b/server/src/modules/licensing/constants/index.ts
@@ -123,6 +123,14 @@ export enum LICENSE_FIELD {
   AI_FEATURE = 'aiEnabled',
   EXTERNAL_API = 'externalApiEnabled',
   PLAN = 'plan',
+  MODULES = 'modulesEnabled',
+  CUSTOM_GROUPS = 'customGroupsEnabled',
+  APP_PAGES_ENABLED = 'appPagesEnabled',
+  APP_PAGES_HEADER_AND_LOGO = 'appPagesHeaderAndLogoEnabled',
+  APP_PAGES_NAV_GROUP = 'appPagesAddNavGroupEnabled',
+  APP_PERMISSIONS_COMPONENT = 'appPermissionComponentEnabled',
+  APP_PERMISSIONS_QUERY = 'appPermissionQueryEnabled',
+  APP_PERMISSIONS_PAGES = 'appPermissionPagesEnabled',
 }
 
 export enum LICENSE_LIMITS_LABEL {
diff --git a/server/src/modules/licensing/helper.ts b/server/src/modules/licensing/helper.ts
index f0830d5b64..61b0da79a3 100644
--- a/server/src/modules/licensing/helper.ts
+++ b/server/src/modules/licensing/helper.ts
@@ -118,6 +118,22 @@ export function getLicenseFieldValue(type: LICENSE_FIELD, licenseInstance: Licen
 
     case LICENSE_FIELD.PLAN:
       return licenseInstance.plan;
+    case LICENSE_FIELD.MODULES:
+      return licenseInstance.moduleEnabled;
+    case LICENSE_FIELD.CUSTOM_GROUPS:
+      return licenseInstance.customGroups;
+    case LICENSE_FIELD.APP_PERMISSIONS_COMPONENT:
+      return licenseInstance.appPermissionComponent;
+    case LICENSE_FIELD.APP_PERMISSIONS_QUERY:
+      return licenseInstance.appPermissionQuery;
+    case LICENSE_FIELD.APP_PERMISSIONS_PAGES:
+      return licenseInstance.appPermissionPages;
+    case LICENSE_FIELD.APP_PAGES_ENABLED:
+      return licenseInstance.appPagesEnabled;
+    case LICENSE_FIELD.APP_PAGES_HEADER_AND_LOGO:
+      return licenseInstance.appPagesHeaderAndLogoEnabled;
+    case LICENSE_FIELD.APP_PAGES_NAV_GROUP:
+      return licenseInstance.appPagesAddNavGroupEnabled;
 
     default:
       return licenseInstance.terms;
diff --git a/server/src/modules/licensing/interfaces/terms.ts b/server/src/modules/licensing/interfaces/terms.ts
index 62462d8a4d..a79ae0cb16 100644
--- a/server/src/modules/licensing/interfaces/terms.ts
+++ b/server/src/modules/licensing/interfaces/terms.ts
@@ -40,6 +40,26 @@ export interface Terms {
   auditLogs?: {
     maximumDays?: number | string;
   };
+  app?: {
+    pages: {
+      enabled: boolean;
+      features: {
+        appHeaderAndLogo: boolean;
+        addNavGroup: boolean;
+      };
+    };
+    permissions: {
+      component: boolean;
+      query: boolean;
+      pages: boolean;
+    };
+  };
+  modules?: {
+    enabled: boolean;
+  };
+  permissions?: {
+    customGroups: boolean;
+  };
   meta?: {
     customerName?: string;
     generatedFrom?: 'API';
@@ -47,6 +67,7 @@ export interface Terms {
     createdBy?: string;
   };
   workflows?: {
+    enabled?: boolean;
     execution_timeout?: number;
     workspace?: {
       total?: number | string;
diff --git a/server/src/modules/modules/constants/feature.ts b/server/src/modules/modules/constants/feature.ts
index c02f911b81..633ab22eab 100644
--- a/server/src/modules/modules/constants/feature.ts
+++ b/server/src/modules/modules/constants/feature.ts
@@ -6,22 +6,22 @@ import { FeaturesConfig } from '../types';
 export const FEATURES: FeaturesConfig = {
   [MODULES.MODULES]: {
     [FEATURE_KEY.CREATE_MODULE]: {
-      license: LICENSE_FIELD.VALID,
+      license: LICENSE_FIELD.MODULES,
     },
     [FEATURE_KEY.DELETE_MODULE]: {
-      license: LICENSE_FIELD.VALID,
+      license: LICENSE_FIELD.MODULES,
     },
     [FEATURE_KEY.UPDATE_MODULE]: {
-      license: LICENSE_FIELD.VALID,
+      license: LICENSE_FIELD.MODULES,
     },
     [FEATURE_KEY.IMPORT_MODULE]: {
-      license: LICENSE_FIELD.VALID,
+      license: LICENSE_FIELD.MODULES,
     },
     [FEATURE_KEY.EXORT_MODULE]: {
-      license: LICENSE_FIELD.VALID,
+      license: LICENSE_FIELD.MODULES,
     },
     [FEATURE_KEY.CLONE_MODULE]: {
-      license: LICENSE_FIELD.VALID,
+      license: LICENSE_FIELD.MODULES,
     },
   },
 };

From 636b2d6b5219dce684fbf755eb0f40004eecc58e Mon Sep 17 00:00:00 2001
From: Adish M <44204658+adishM98@users.noreply.github.com>
Date: Fri, 31 Oct 2025 15:56:46 +0530
Subject: [PATCH 154/157] =?UTF-8?q?=F0=9F=9A=80=20chore:=20update=20submod?=
 =?UTF-8?q?ules=20to=20latest=20lts-3.16=20after=20auto-merge=20(#14481)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: gsmithun4 <3417097+gsmithun4@users.noreply.github.com>
---
 frontend/ee | 2 +-
 server/ee   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/ee b/frontend/ee
index 7cfcb38fc1..1e40a2e500 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit 7cfcb38fc16571927e5a1445c87b7ed59e83c8e2
+Subproject commit 1e40a2e500636d5f900f707cccd0d9ee1f372069
diff --git a/server/ee b/server/ee
index 6f507336a2..54e5830377 160000
--- a/server/ee
+++ b/server/ee
@@ -1 +1 @@
-Subproject commit 6f507336a229c0542ca95d77d54e6e31cbf2a068
+Subproject commit 54e58303778894b2b23fc3fb3732364b797c3d53

From 550b7a9bb70d722079d481dfe90e3bd97130020d Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Fri, 31 Oct 2025 18:49:30 +0530
Subject: [PATCH 155/157] Update submodule ref

---
 frontend/ee | 2 +-
 server/ee   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/ee b/frontend/ee
index 76991a2686..1e40a2e500 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit 76991a2686d3f924b97f105af100e1f2a61de3e5
+Subproject commit 1e40a2e500636d5f900f707cccd0d9ee1f372069
diff --git a/server/ee b/server/ee
index 281ebda361..54e5830377 160000
--- a/server/ee
+++ b/server/ee
@@ -1 +1 @@
-Subproject commit 281ebda36158bd5688e4f2b1b49db0d298bb0ac5
+Subproject commit 54e58303778894b2b23fc3fb3732364b797c3d53

From 637467428351c24dd58169f2e1965ddaba8fc43d Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Fri, 31 Oct 2025 19:23:02 +0530
Subject: [PATCH 156/157] version bump

---
 .version          | 2 +-
 frontend/.version | 2 +-
 server/.version   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.version b/.version
index e1b4165710..8f1ee24bff 100644
--- a/.version
+++ b/.version
@@ -1 +1 @@
-3.20.29-lts
+3.20.30-lts
diff --git a/frontend/.version b/frontend/.version
index e1b4165710..8f1ee24bff 100644
--- a/frontend/.version
+++ b/frontend/.version
@@ -1 +1 @@
-3.20.29-lts
+3.20.30-lts
diff --git a/server/.version b/server/.version
index e1b4165710..8f1ee24bff 100644
--- a/server/.version
+++ b/server/.version
@@ -1 +1 @@
-3.20.29-lts
+3.20.30-lts

From 618a3ff3957d71ac21ff3b62df618de2d3e486a9 Mon Sep 17 00:00:00 2001
From: Adish M <44204658+adishM98@users.noreply.github.com>
Date: Mon, 3 Nov 2025 10:45:15 +0530
Subject: [PATCH 157/157] Fix command syntax for starting the server (#14485)

---
 deploy/ec2/ee/setup_app | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/deploy/ec2/ee/setup_app b/deploy/ec2/ee/setup_app
index 2c3233000d..2defef26c8 100755
--- a/deploy/ec2/ee/setup_app
+++ b/deploy/ec2/ee/setup_app
@@ -170,7 +170,7 @@ fi
 
 TOOLJET_EDTION=ee npm --prefix server run db:setup
 
-if sudo -E systemctl start nest && && sudo journalctl -u nest -f
+if sudo -E systemctl start nest && sudo journalctl -u nest -f
 then
   echo "The app will be served at ${TOOLJET_HOST}"
 else