Merge queued PRs from quick-merge branch to main branch

workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/utils.ts

@@ -112,12 +112,18 @@ export async function updateSourceCodeIteratively(updateSourceCodeRequest: Updat
         return await updateSourceCode(updateSourceCodeRequest);
     }
 
-    // need to prioritize if file path ends with functions.bal or data_mappings.bal
+    // TODO: Remove this once the designModelService/publishArtifacts API supports simultaneous file changes
     filePaths.sort((a, b) => {
-        // Prioritize files ending with functions.bal or data_mappings.bal
-        const aEndsWithFunctions = (a.endsWith("functions.bal") || a.endsWith("data_mappings.bal")) ? 1 : 0;
-        const bEndsWithFunctions = (b.endsWith("functions.bal") || b.endsWith("data_mappings.bal")) ? 1 : 0;
-        return bEndsWithFunctions - aEndsWithFunctions; // Sort descending
+        // Priority: functions.bal > data_mappings.bal > any other file
+        const getPriority = (filePath: string): number => {
+            if (filePath.endsWith("functions.bal")) return 2;
+            if (filePath.endsWith("data_mappings.bal")) return 1;
+            return 0;
+        };
+
+        const aPriority = getPriority(a);
+        const bPriority = getPriority(b);
+        return bPriority - aPriority; // Sort descending (highest priority first)
     });
 
     const requests: UpdateSourceCodeRequest[] = filePaths.map(filePath => ({

workspaces/ballerina/ballerina-visualizer/src/Context.tsx

@@ -132,3 +132,53 @@ export function VisualizerContextProvider({ children }: { children: ReactNode })
 }
 
 export const useVisualizerContext = () => useContext(VisualizerContext);
+
+export const POPUP_IDS = {
+  VARIABLE: "VARIABLE",
+  FUNCTION: "FUNCTION",
+  CONFIGURABLES: "CONFIGURABLES",
+} as const;
+
+type ModalStackItem = {
+    modal: ReactNode;
+    id: string;
+    title: string;
+    height?: number;
+    width?: number;
+}
+
+interface ModalStackContext {
+    modalStack: ModalStackItem[];
+    addModal: (modal: ReactNode, id: string, title: string, height?: number, width?: number) => void;
+    popModal: () => void;
+    closeModal: (id: string) => void;
+}
+
+export const ModalStackContext = createContext({
+    modalStack: [],
+    addModal: (modal: ReactNode, id: string, title: string, height?: number, width?: number) => { },
+    popModal: () => { },
+    closeModal: (id: string) => { },
+} as ModalStackContext);
+
+export const ModalStackProvider = ({children}: {children: ReactNode}) => {
+    const [modalStack, setModalStack] = useState<ModalStackItem[]>([]);
+
+    const addModal = (modal: ReactNode, id: string, title: string, height?: number, width?: number) => {
+        setModalStack((prevStack) => [...prevStack, { modal, id, title, height, width }]);
+    };
+
+    const popModal = () => {
+        setModalStack((prevStack) => prevStack.slice(0, -1));
+    };
+
+    const closeModal = (id: string) => {
+        setModalStack((prevStack) => prevStack.filter((item) => item.id !== id));
+    };
+
+    return <ModalStackContext.Provider value={{ modalStack, addModal, popModal, closeModal }}>
+        {children}
+    </ModalStackContext.Provider>;
+}
+
+export const useModalStack = () => useContext(ModalStackContext);

workspaces/ballerina/ballerina-visualizer/src/MainPanel.tsx

@@ -51,7 +51,7 @@ import { handleRedo, handleUndo } from "./utils/utils";
 import { STKindChecker } from "@wso2/syntax-tree";
 import { URI, Utils } from "vscode-uri";
 import { ThemeColors, Typography } from "@wso2/ui-toolkit";
-import { PanelType, useVisualizerContext } from "./Context";
+import { PanelType, useModalStack, useVisualizerContext } from "./Context";
 import { ConstructPanel } from "./views/ConstructPanel";
 import { EditPanel } from "./views/EditPanel";
 import { RecordEditor } from "./views/RecordEditor/RecordEditor";
@@ -76,6 +76,7 @@ import { BallerinaUpdateView } from "./views/BI/BallerinaUpdateView";
 import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
 import { DataMapper } from "./views/DataMapper";
 import { ImportIntegration } from "./views/BI/ImportIntegration";
+import Popup from "./components/Popup";
 
 const globalStyles = css`
     *,
@@ -189,6 +190,7 @@ const LoadingText = styled.div`
 const MainPanel = () => {
     const { rpcClient } = useRpcContext();
     const { sidePanel, setSidePanel, popupMessage, setPopupMessage, activePanel, showOverlay, setShowOverlay } = useVisualizerContext();
+    const {modalStack, closeModal} = useModalStack()
     const [viewComponent, setViewComponent] = useState<React.ReactNode>();
     const [navActive, setNavActive] = useState<boolean>(true);
     const [showHome, setShowHome] = useState<boolean>(true);
@@ -415,7 +417,7 @@ const MainPanel = () => {
                     case MACHINE_VIEW.GraphQLDiagram:
                         const getProjectStructure = await rpcClient.getBIDiagramRpcClient().getProjectStructure();
                         const entryPoint = getProjectStructure.directoryMap[DIRECTORY_MAP.SERVICE].find((service: ProjectStructureArtifactResponse) => service.name === value?.identifier);
-                        setViewComponent(<GraphQLDiagram serviceIdentifier={value?.identifier} filePath={value?.documentUri} position={entryPoint?.position} projectUri={value?.projectUri} />);
+                        setViewComponent(<GraphQLDiagram serviceIdentifier={value?.identifier} filePath={value?.documentUri} position={entryPoint?.position ?? value?.position} projectUri={value?.projectUri} />);
                         break;
                     case MACHINE_VIEW.BallerinaUpdateView:
                         setNavActive(false);
@@ -558,12 +560,16 @@ const MainPanel = () => {
             .openView({ type: EVENT_TYPE.CLOSE_VIEW, location: { view: null, recentIdentifier: parent?.recentIdentifier, artifactType: parent?.artifactType }, isPopup: true });
     };
 
+    const handlePopupClose = (id: string) => {
+        closeModal(id);
+    }
+
     return (
         <>
             <Global styles={globalStyles} />
             <VisualizerContainer>
                 {/* {navActive && <NavigationBar showHome={showHome} />} */}
-                {showOverlay && <Overlay onClick={() => setShowOverlay(false)} />}
+                {(showOverlay || modalStack.length > 0) && <Overlay/>}
                 {viewComponent && <ComponentViewWrapper>{viewComponent}</ComponentViewWrapper>}
                 {!viewComponent && (
                     <ComponentViewWrapper>
@@ -609,9 +615,14 @@ const MainPanel = () => {
                 {sidePanel !== "EMPTY" && sidePanel === "ADD_ACTION" && (
                     <EndpointList stSymbolInfo={getSymbolInfo()} applyModifications={applyModifications} />
                 )}
+                {
+                    modalStack.map((modal) => (
+                       <Popup title={modal.title} onClose={() => handlePopupClose(modal.id)} key={modal.id} width={modal.width} height={modal.height}>{modal.modal}</Popup>
+                    ))
+                }
             </VisualizerContainer>
         </>
     );
-};
+};  
 
 export default MainPanel;

workspaces/ballerina/ballerina-visualizer/src/components/Popup/Form/index.tsx

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import styled from "@emotion/styled";
+import { Codicon, Divider, Typography } from "@wso2/ui-toolkit";
+import { ThemeColors } from "@wso2/ui-toolkit/lib/styles/Theme";
+
+const PopupFormContainer = styled.div`
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 30000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;
+
+const PopupFormBox = styled.div<{ width?: number; height?: number }>`
+  width: ${({ width }: { width?: number }) => (width ? `${width}px` : 'auto')};
+  height: ${({ height }: { height?: number }) => (height ? `${height}px` : 'auto')};
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow-y: hidden;
+  padding: 16px;
+  border-radius: 3px;
+  background-color: ${ThemeColors.SURFACE_DIM};
+  box-shadow: 0 3px 8px rgb(0 0 0 / 0.2);
+    z-index: 30001;
+`;
+
+const PopupFormHeader = styled.header`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-inline: 16px;
+`;
+
+export type PopupFormProps = {
+    width?: number;
+    height?: number;
+    title: string;
+    children: React.ReactNode;
+    onClose?: () => void;
+};
+
+export const PopupForm = (props: PopupFormProps) => {
+    const { width, height, title, children, onClose } = props;
+
+    return (
+        <PopupFormContainer>
+            <PopupFormBox width={width} height={height}>
+                <PopupFormHeader>
+                    <Typography variant="h2" sx={{ margin: 0 }}>
+                        {title}
+                    </Typography>
+                     <Codicon name="close" onClick={onClose} />
+                </PopupFormHeader>
+                <Divider />
+                <div>{children}</div>
+            </PopupFormBox>
+        </PopupFormContainer>
+    )
+}

workspaces/ballerina/ballerina-visualizer/src/components/Popup/index.tsx

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { ReactNode } from "react";
+import styled from "@emotion/styled";
+import { PopupForm } from "./Form";
+
+export type PopupProps = {
+    children: ReactNode;
+    onClose?: () => void;
+    width?: number;
+    height?: number;
+    title: string;
+};
+
+const PopupContentContainer = styled.div`
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 30000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;
+
+
+
+const Popup: React.FC<PopupProps> = ({
+    children,
+    onClose,
+    width,
+    height,
+    title
+}) => {
+
+
+    return (
+        <PopupContentContainer>
+            <PopupForm onClose={onClose} height={height} width={width} title={title}>
+                {children}
+            </PopupForm>
+        </PopupContentContainer>
+    );
+};
+
+export default Popup;

workspaces/ballerina/ballerina-visualizer/src/index.tsx

@@ -20,7 +20,7 @@ import React from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createRoot } from "react-dom/client";
 import { Visualizer } from "./Visualizer";
-import { VisualizerContextProvider, RpcContextProvider } from "./Context";
+import { VisualizerContextProvider, RpcContextProvider, ModalStackProvider } from "./Context";
 import { clearDiagramZoomAndPosition } from "./utils/bi";
 
 const queryClient = new QueryClient({
@@ -41,11 +41,13 @@ export function renderWebview(mode: string, target: HTMLElement) {
     const root = createRoot(target);
     root.render(
         <VisualizerContextProvider>
-            <RpcContextProvider>
-                <QueryClientProvider client={queryClient}>
-                    <Visualizer mode={mode} />
-                </QueryClientProvider>
-            </RpcContextProvider>
+            <ModalStackProvider>
+                <RpcContextProvider>
+                    <QueryClientProvider client={queryClient}>
+                        <Visualizer mode={mode} />
+                    </QueryClientProvider>
+                </RpcContextProvider>
+            </ModalStackProvider>
         </VisualizerContextProvider>
     );
 }

workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/AddConnectionWizard/index.tsx

@@ -369,6 +369,7 @@ export function AddConnectionWizard(props: AddConnectionWizardProps) {
                             onSelectConnector={handleOnSelectConnector}
                             onAddGeneratedConnector={handleOnAddGeneratedConnector}
                             onClose={onClose}
+                            isPopupView={true}
                         />
                     </PopupContainer>
                 </>

workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/ConnectorView/index.tsx

@@ -44,14 +44,13 @@ const Container = styled.div`
     flex-direction: column;
 `;
 
-const ListContainer = styled.div<{ isHalfView?: boolean }>`
+const ListContainer = styled.div<{ isPopupView?: boolean }>`
     display: flex;
     flex-direction: column;
     gap: 8px;
     margin-top: 16px;
     margin-left: 20px;
-    height: ${(props: { isHalfView: boolean }) => (props.isHalfView ? "30vh" : "calc(100vh - 200px)")};
-    overflow-y: scroll;
+    height: ${(props: { isPopupView: boolean }) => (props.isPopupView ? "30vh" : "calc(100vh - 200px)")};
 `;
 
 const GridContainer = styled.div<{ isHalfView?: boolean }>`
@@ -99,6 +98,7 @@ interface ConnectorViewProps {
     onClose?: () => void;
     hideTitle?: boolean;
     openCustomConnectorView?: boolean;
+    isPopupView?: boolean;
 }
 
 export function ConnectorView(props: ConnectorViewProps) {
@@ -110,6 +110,7 @@ export function ConnectorView(props: ConnectorViewProps) {
         onClose,
         hideTitle,
         openCustomConnectorView,
+        isPopupView
     } = props;
     const { rpcClient } = useRpcContext();
 
@@ -401,7 +402,7 @@ export function ConnectorView(props: ConnectorViewProps) {
                             </TreeViewItemContent>
                         </TreeViewItem>
                     </div>
-                    <ListContainer isHalfView={hideTitle}>
+                    <ListContainer isPopupView={isPopupView}>
                         {selectedConnectorCategory === "CurrentOrg" && (
                             <LabelRow>
                                 <Typography variant="h3">{'Organization\'s Connectors'}</Typography>