diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/utils.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/utils.ts index 6aca43aea37..7db54d70941 100644 --- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/utils.ts +++ b/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 => ({ diff --git a/workspaces/ballerina/ballerina-visualizer/src/Context.tsx b/workspaces/ballerina/ballerina-visualizer/src/Context.tsx index 2bc0f1e6d44..0723b48dc93 100644 --- a/workspaces/ballerina/ballerina-visualizer/src/Context.tsx +++ b/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([]); + + 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 + {children} + ; +} + +export const useModalStack = () => useContext(ModalStackContext); \ No newline at end of file diff --git a/workspaces/ballerina/ballerina-visualizer/src/MainPanel.tsx b/workspaces/ballerina/ballerina-visualizer/src/MainPanel.tsx index 9bcdc913020..727f9fa50d0 100644 --- a/workspaces/ballerina/ballerina-visualizer/src/MainPanel.tsx +++ b/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(); const [navActive, setNavActive] = useState(true); const [showHome, setShowHome] = useState(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(); + setViewComponent(); 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 ( <> {/* {navActive && } */} - {showOverlay && setShowOverlay(false)} />} + {(showOverlay || modalStack.length > 0) && } {viewComponent && {viewComponent}} {!viewComponent && ( @@ -609,9 +615,14 @@ const MainPanel = () => { {sidePanel !== "EMPTY" && sidePanel === "ADD_ACTION" && ( )} + { + modalStack.map((modal) => ( + handlePopupClose(modal.id)} key={modal.id} width={modal.width} height={modal.height}>{modal.modal} + )) + } ); -}; +}; export default MainPanel; diff --git a/workspaces/ballerina/ballerina-visualizer/src/components/Popup/Form/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/components/Popup/Form/index.tsx new file mode 100644 index 00000000000..ea7f8d7ed4c --- /dev/null +++ b/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 ( + + + + + {title} + + + + +
{children}
+ + + ) +} diff --git a/workspaces/ballerina/ballerina-visualizer/src/components/Popup/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/components/Popup/index.tsx new file mode 100644 index 00000000000..f2aded9a4db --- /dev/null +++ b/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 = ({ + children, + onClose, + width, + height, + title +}) => { + + + return ( + + + {children} + + + ); +}; + +export default Popup; diff --git a/workspaces/ballerina/ballerina-visualizer/src/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/index.tsx index cff2990ee9b..4a90b3f110a 100644 --- a/workspaces/ballerina/ballerina-visualizer/src/index.tsx +++ b/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( - - - - - + + + + + + + ); } diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/AddConnectionWizard/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/AddConnectionWizard/index.tsx index e04f50bdd1e..4df877bdf7f 100644 --- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/AddConnectionWizard/index.tsx +++ b/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} /> diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/ConnectorView/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/ConnectorView/index.tsx index b7e04db9d39..f04d8b9c6cd 100644 --- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/ConnectorView/index.tsx +++ b/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) { - + {selectedConnectorCategory === "CurrentOrg" && ( {'Organization\'s Connectors'} diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGenerator/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGenerator/index.tsx index 2812d334dfd..f7e36d6ee47 100644 --- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGenerator/index.tsx +++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGenerator/index.tsx @@ -280,6 +280,10 @@ export const FormGenerator = forwardRef(func }); } + const resetStack = () => { + setStack([getDefaultValue()]); + } + const setRefetchForCurrentModal = (shouldRefetch: boolean) => { setRefetchStates((prev) => { const newStates = [...prev]; @@ -453,9 +457,9 @@ export const FormGenerator = forwardRef(func popTypeStack(); return; } - stack[0].type = undefined + resetStack(); } - setTypeEditorState({ isOpen: state }); + setTypeEditorState({ ...typeEditorState, isOpen: state }); } const handleUpdateImports = (key: string, imports: Imports, codedata?: CodeData) => { @@ -717,10 +721,6 @@ export const FormGenerator = forwardRef(func handleExpressionEditorCancel(); }; - const onTypeEditorClosed = () => { - setTypeEditorState({ isOpen: stack.length !== 0 }); - }; - const onTypeChange = async (type: Type) => { const updatedFields = fields.map((field) => { if (field.key === typeEditorState.fieldKey) { @@ -730,7 +730,6 @@ export const FormGenerator = forwardRef(func }); handleSelectedTypeByName(type.name); setFields(updatedFields); - setTypeEditorState({ isOpen: true }); }; const handleGetHelperPane = ( @@ -862,21 +861,12 @@ export const FormGenerator = forwardRef(func importsCodedataRef.current = {}; }; - const handleTypeCreate = (typeName?: string) => { - try { - setTypeEditorState({ isOpen: stack.length !== 0, newTypeValue: typeName, fieldKey: typeEditorState.fieldKey }); - popTypeStack() - } catch (e) { - console.error(e) - } - }; - const onSaveType = (type: Type) => { if (stack.length > 0) { setRefetchForCurrentModal(true); popTypeStack(); } - setTypeEditorState({ isOpen: stack.length !== 1 }); + setTypeEditorState({ ...typeEditorState, isOpen: stack.length !== 1 }); } /** @@ -948,10 +938,10 @@ export const FormGenerator = forwardRef(func updateRecordTypeFields(type); }; - const getNewTypeCreateForm = () => { - pushTypeStack({ + const getDefaultValue = () => { + return ({ type: { - name: "", + name: "MyType", members: [] as Member[], editable: true, metadata: { @@ -967,10 +957,10 @@ export const FormGenerator = forwardRef(func }, isDirty: false }) - setTypeEditorState({ - isOpen: true, - newTypeValue: "" - }) + } + + const getNewTypeCreateForm = () => { + pushTypeStack(getDefaultValue()); } // handle if node form @@ -1130,7 +1120,7 @@ export const FormGenerator = forwardRef(func isGraphql={isGraphql} onTypeChange={onTypeChange} onSaveType={onSaveType} - onTypeCreate={handleTypeCreate} + onTypeCreate={()=>{}} isPopupTypeForm={true} getNewTypeCreateForm={getNewTypeCreateForm} refetchTypes={refetchStates[i]} @@ -1211,7 +1201,7 @@ export const FormGenerator = forwardRef(func isGraphql={isGraphql} onTypeChange={onTypeChange} onSaveType={onSaveType} - onTypeCreate={handleTypeCreate} + onTypeCreate={()=>{}} getNewTypeCreateForm={getNewTypeCreateForm} refetchTypes={refetchStates[i]} /> diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGeneratorNew/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGeneratorNew/index.tsx index cc2c314a665..c1d4b0bdf7c 100644 --- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGeneratorNew/index.tsx +++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGeneratorNew/index.tsx @@ -168,6 +168,24 @@ export function FormGeneratorNew(props: FormProps) { setRefetchStates((prev) => [...prev, false]); }; + const resetStack = () => { + setStack([{ + type: defaultType(), + isDirty: false + }]); + } + + useEffect(() => { + const tempStack = [...stack]; + const firstItem = tempStack[0]; + if (firstItem) { + firstItem.type = defaultType(); + tempStack[0] = firstItem; + setStack(tempStack); + return; + } + }, [typeEditorState.field]); + const popTypeStack = () => { setStack((prev) => { const newStack = prev.slice(0, -1); @@ -218,7 +236,7 @@ export function FormGeneratorNew(props: FormProps) { }; const defaultType = (): Type => { - if (typeEditorState.field?.type === 'PARAM_MANAGER') { + if (!isGraphqlEditor || typeEditorState.field?.type === 'PARAM_MANAGER') { return { name: typeEditorState.newTypeValue || "MyType", editable: true, @@ -588,8 +606,11 @@ export function FormGeneratorNew(props: FormProps) { const handleCreateNewType = (typeName: string) => { onTypeCreate(); setTypeEditorState({ isOpen: true, newTypeValue: typeName, field: formField }); + resetStack(); } + console.log("#STACK", stack); + const handleCloseCompletions = () => { debouncedGetVisibleTypes.cancel(); handleExpressionEditorCancel(); @@ -614,8 +635,8 @@ export function FormGeneratorNew(props: FormProps) { }); } - const handleTypeChange = async (type: Type) => { - setTypeEditorState({ isOpen: true }); + const handleTypeChange = async (type: Type,) => { + setTypeEditorState({ ...typeEditorState, isOpen: true }); if (typeEditorState.field) { const updatedFields = fieldsValues.map(field => { @@ -624,6 +645,7 @@ export function FormGeneratorNew(props: FormProps) { if (typeEditorState.field.type === 'PARAM_MANAGER' && field.type === 'PARAM_MANAGER' && field.paramManagerProps.formFields + && stack.length === 1 ) { return { ...field, @@ -657,12 +679,12 @@ export function FormGeneratorNew(props: FormProps) { return updatedField; }); setFields(updatedFields); - setTypeEditorState({ - isOpen, - field: editingField, - newTypeValue: newType - ? (typeof newType === 'string' ? newType : (newType as NodeProperties)?.type || newType) - : f[editingField?.key] + setTypeEditorState({ + isOpen, + field: editingField, + newTypeValue: newType + ? (typeof newType === 'string' ? newType : (newType as NodeProperties)?.type || newType) + : f[editingField?.key] }); }; @@ -686,7 +708,7 @@ export function FormGeneratorNew(props: FormProps) { } const onCloseTypeEditor = () => { - setTypeEditorState({ isOpen: false }); + setTypeEditorState({ ...typeEditorState, isOpen: false }); }; const handleTypeEditorStateChange = (state: boolean) => { @@ -695,14 +717,14 @@ export function FormGeneratorNew(props: FormProps) { popTypeStack(); return; } - stack[0].type = undefined + resetStack(); } - setTypeEditorState({ isOpen: state }); + setTypeEditorState({ ...typeEditorState, isOpen: state }); } const getNewTypeCreateForm = () => { pushTypeStack({ - type: defaultType(), + type: defaultType(), isDirty: false }) } @@ -712,7 +734,7 @@ export function FormGeneratorNew(props: FormProps) { setRefetchForCurrentModal(true); popTypeStack(); } - setTypeEditorState({ isOpen: stack.length !== 1 }); + setTypeEditorState({ ...typeEditorState, isOpen: stack.length !== 1 }); } const extractArgsFromFunction = async (value: string, property: ExpressionProperty, cursorPosition: number) => { @@ -771,10 +793,6 @@ export function FormGeneratorNew(props: FormProps) { importsCodedataRef.current = {}; }; - const handleTypeCreate = (typeName?: string) => { - setTypeEditorState({ isOpen: true, newTypeValue: typeName, field: typeEditorState.field }); - }; - // default form return ( @@ -818,30 +836,30 @@ export function FormGeneratorNew(props: FormProps) { title="Create New Type" openState={typeEditorState.isOpen} setOpenState={handleTypeEditorStateChange}> -
- {stack.slice(0, i + 1).slice(0, i + 1).length > 1 && ( +
+ {stack.slice(0, i + 1).length > 1 && ( {stack.slice(0, i + 1).map((stackItem, index) => ( {index > 0 && /} - {stackItem?.type?.name || "New Type"} + {stackItem?.type?.name || "NewType"} ))} )} { }} getNewTypeCreateForm={getNewTypeCreateForm} refetchTypes={refetchStates[i]} - isGraphql={isGraphqlEditor} />
) diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/FooterButtons.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/FooterButtons.tsx index eee7dddce3f..bb6f7839fd2 100644 --- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/FooterButtons.tsx +++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/FooterButtons.tsx @@ -46,7 +46,7 @@ type FooterButtonProps = { const FooterButtons = (props: FooterButtonProps) => { const { onClick, startIcon, title, sx } = props; return ( -
+
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/VariableTypeIndicator.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/VariableTypeIndicator.tsx index 4364333639a..99e8c30653e 100644 --- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/VariableTypeIndicator.tsx +++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/VariableTypeIndicator.tsx @@ -18,6 +18,7 @@ import styled from "@emotion/styled"; import { VSCodeTag } from "@vscode/webview-ui-toolkit/react"; +import { ThemeColors } from "@wso2/ui-toolkit"; export const VariableTypeIndicator = styled(VSCodeTag)` ::part(control) { @@ -27,5 +28,15 @@ export const VariableTypeIndicator = styled(VSCodeTag)` display: flex; align-items: center; justify-content: center; + max-width: 60px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding: 0px 2px; + } + + &:hover::part(control) { + background-color: ${ThemeColors.PRIMARY}; + cursor: pointer; } `; diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Configurables.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Configurables.tsx index f1c6c57190a..cf2e821c7b4 100644 --- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Configurables.tsx +++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Configurables.tsx @@ -27,6 +27,7 @@ import DynamicModal from "../../../../components/Modal"; import FooterButtons from "../Components/FooterButtons"; import FormGenerator from "../../Forms/FormGenerator"; import { URI, Utils } from "vscode-uri"; +import { POPUP_IDS, useModalStack } from "../../../../Context"; type ConfigVariablesState = { [category: string]: { @@ -45,6 +46,7 @@ type ConfigurablesPageProps = { anchorRef: React.RefObject; fileName: string; targetLineRange: LineRange; + onClose?: () => void; } type AddNewConfigFormProps = { @@ -53,18 +55,19 @@ type AddNewConfigFormProps = { } export const Configurables = (props: ConfigurablesPageProps) => { - const { onChange, anchorRef, fileName, targetLineRange } = props; + const { onChange, onClose, fileName, targetLineRange } = props; const { rpcClient } = useRpcContext(); const [configVariables, setConfigVariables] = useState({}); const [errorMessage, setErrorMessage] = useState(''); - const [isModalOpen, setIsModalOpen] = useState(false); const [configVarNode, setCofigVarNode] = useState(); const [isSaving, setIsSaving] = useState(false); const [packageInfo, setPackageInfo] = useState(); const [isImportEnv, setIsImportEnv] = useState(false); const [projectPathUri, setProjectPathUri] = useState(); + const { addModal, closeModal } = useModalStack(); + useEffect(() => { const fetchNode = async () => { const node = await rpcClient.getBIDiagramRpcClient().getConfigVariableNodeTemplate({ @@ -122,12 +125,8 @@ export const Configurables = (props: ConfigurablesPageProps) => { setErrorMessage(errorMsg); }; - const handleFormClose = () => { - setIsModalOpen(false) - } - const handleSave = async (node: FlowNode) => { - setIsModalOpen(false); + closeModal(POPUP_IDS.CONFIGURABLES); //TODO: Need to disable the form before saving and move form close to finally block setIsSaving(true); await rpcClient.getBIDiagramRpcClient().updateConfigVariablesV2({ @@ -156,38 +155,22 @@ export const Configurables = (props: ConfigurablesPageProps) => { onChange(name, true) } - const AddNewForms = (props: AddNewConfigFormProps) => { - return ( - - - { - setIsImportEnv(props.isImportEnv) - }} - /> - - { }} - isInModal={true} - /> - - ) + const handleAddNewConfigurable = () => { + addModal( + { }} + isInModal={true} + />, POPUP_IDS.CONFIGURABLES, "New Configurable", 600) + + onClose && onClose(); } return ( @@ -251,10 +234,7 @@ export const Configurables = (props: ConfigurablesPageProps) => { -
- - {/* */} -
+
) } diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Functions.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Functions.tsx index 0e26d822ca5..38cf7177143 100644 --- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Functions.tsx +++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Functions.tsx @@ -35,6 +35,7 @@ import FooterButtons from "../Components/FooterButtons"; import DynamicModal from "../../../../components/Modal"; import { URI, Utils } from "vscode-uri"; import { FunctionFormStatic } from "../../FunctionFormStatic"; +import { POPUP_IDS, useModalStack } from "../../../../Context"; type FunctionsPageProps = { fieldKey: string; @@ -66,7 +67,8 @@ export const FunctionsPage = ({ const [functionInfo, setFunctionInfo] = useState(undefined); const [libraryBrowserInfo, setLibraryBrowserInfo] = useState(undefined); const [projectUri, setProjectUri] = useState(''); - const [isModalOpen, setIsModalOpen] = useState(false); + + const { addModal , closeModal} = useModalStack(); @@ -163,12 +165,31 @@ export const FunctionsPage = ({ } }; + const handleFunctionSave = (value: string) => { + onChange(value); + closeModal(POPUP_IDS.FUNCTION); + onClose(); + } + const handleFunctionItemSelect = async (item: HelperPaneCompletionItem) => { const { value, cursorOffset } = await onFunctionItemSelect(item); onChange({ value, cursorOffset }); onClose(); }; + const handleNewFunctionClick = () => { + addModal( + , POPUP_IDS.FUNCTION, "New Function", 600, 400); + onClose(); + } + return (
-
- - - - - - +
+ setIsLibraryBrowserOpen(true)} />
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Variables.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Variables.tsx index f6c58f25dc2..ea8c9004c80 100644 --- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Variables.tsx +++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Variables.tsx @@ -22,15 +22,15 @@ import { SlidingPaneNavContainer } from "@wso2/ui-toolkit/lib/components/Express import { useRpcContext } from "@wso2/ballerina-rpc-client" import { ExpressionProperty, FlowNode, LineRange, RecordTypeField } from "@wso2/ballerina-core" import { Codicon, CompletionItem, Divider, getIcon, HelperPaneCustom, SearchBox, ThemeColors, Typography } from "@wso2/ui-toolkit" -import { useEffect, useMemo, useRef, useState } from "react" -import { getPropertyFromFormField, HelperPaneVariableInfo, useFieldContext } from "@wso2/ballerina-side-panel" +import { useEffect, useMemo, useRef, useState } from "react" +import { getPropertyFromFormField, useFieldContext } from "@wso2/ballerina-side-panel" import FooterButtons from "../Components/FooterButtons" -import DynamicModal from "../../../../components/Modal" import { FormGenerator } from "../../Forms/FormGenerator" import { ScrollableContainer } from "../Components/ScrollableContainer" import { FormSubmitOptions } from "../../FlowDiagram" import { URI } from "vscode-uri" import styled from "@emotion/styled" +import { POPUP_IDS, useModalStack } from "../../../../Context" type VariablesPageProps = { fileName: string; @@ -45,6 +45,7 @@ type VariablesPageProps = { recordTypeField?: RecordTypeField; isInModal?: boolean; handleRetrieveCompletions: (value: string, property: ExpressionProperty, offset: number, triggerCharacter?: string) => Promise; + onClose?: () => void; } type VariableItemProps = { @@ -63,7 +64,7 @@ const VariableItem = ({ item, onItemSelect, onMoreIconClick }: VariableItemProps onClick={() => onItemSelect(item.label)} data sx={{ - maxHeight: isHovered ? "none" : "32px" + maxHeight: isHovered ? "none" : "32px" }} endIcon={ { @@ -78,10 +79,10 @@ const VariableItem = ({ item, onItemSelect, onMoreIconClick }: VariableItemProps > {getIcon(item.kind)} - { - const { fileName, targetLineRange, onChange, anchorRef, handleOnFormSubmit, selectedType, filteredCompletions, currentValue, recordTypeField, isInModal, handleRetrieveCompletions } = props; + const { fileName, targetLineRange, onChange, onClose, handleOnFormSubmit, selectedType, filteredCompletions, currentValue, recordTypeField, isInModal, handleRetrieveCompletions } = props; const [searchValue, setSearchValue] = useState(""); const { rpcClient } = useRpcContext(); const [isLoading, setIsLoading] = useState(false); @@ -123,6 +123,7 @@ export const Variables = (props: VariablesPageProps) => { label: "Variables", replaceText: "" }]); + const { addModal, closeModal } = useModalStack() const { field, triggerCharacters } = useFieldContext(); @@ -152,6 +153,7 @@ export const Variables = (props: VariablesPageProps) => { : ""; newNodeNameRef.current = varName; handleOnFormSubmit?.(updatedNode, false, { shouldCloseSidePanel: false, shouldUpdateTargetLine: true }); + closeModal(POPUP_IDS.VARIABLE); if (isModalOpen) { setIsModalOpen(false) } @@ -160,7 +162,7 @@ export const Variables = (props: VariablesPageProps) => { const methods = filteredCompletions.filter((completion) => completion.kind === "function") const dropdownItems = - currentValue.length >0 + currentValue.length > 0 ? fields.concat(methods) : fields; @@ -179,6 +181,22 @@ export const Variables = (props: VariablesPageProps) => { onChange(value, false); } + const handleAddNewVariable = () => { + addModal( + { }} + isInModal={true} + />, POPUP_IDS.VARIABLE,"New Variable", 600); + onClose && onClose(); + } const handleVariablesMoreIconClick = (value: string) => { const newBreadCrumSteps = [...breadCrumbSteps, { label: value, @@ -189,10 +207,10 @@ export const Variables = (props: VariablesPageProps) => { } const handleBreadCrumbItemClicked = (step: BreadCrumbStep) => { - const replaceText = step.replaceText === ''? step.replaceText : step.replaceText + '.'; + const replaceText = step.replaceText === '' ? step.replaceText : step.replaceText + '.'; onChange(replaceText, true); const index = breadCrumbSteps.findIndex(item => item.label === step.label); - const newSteps = index !== -1 ? breadCrumbSteps.slice(0, index+1) : breadCrumbSteps; + const newSteps = index !== -1 ? breadCrumbSteps.slice(0, index + 1) : breadCrumbSteps; setBreadCrumbSteps(newSteps); } @@ -336,32 +354,7 @@ export const Variables = (props: VariablesPageProps) => { - {!isInModal && -
- - - - - { }} - isInModal={true} - /> - -
} + {isInModal ? null :
}
) } diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/index.tsx index 791d2f32ab4..f39861874a6 100644 --- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/index.tsx +++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/index.tsx @@ -339,6 +339,7 @@ const HelperPaneNewEl = ({ recordTypeField={recordTypeField} isInModal={isInModal} handleRetrieveCompletions={handleRetrieveCompletions} + onClose={onClose} /> @@ -378,6 +379,7 @@ const HelperPaneNewEl = ({ onChange={handleChange} targetLineRange={targetLineRange} isInModal={isInModal} + onClose={onClose} /> diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/TypeEditor/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/TypeEditor/index.tsx index f3e4da2b1e4..bc4ce4fc7cb 100644 --- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/TypeEditor/index.tsx +++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/TypeEditor/index.tsx @@ -53,7 +53,7 @@ type FormTypeEditorProps = { }; export const FormTypeEditor = (props: FormTypeEditorProps) => { - const { type, onTypeChange, newType, newTypeValue, isGraphql, onCloseCompletions, onTypeCreate, getNewTypeCreateForm, onSaveType, refetchTypes, isPopupTypeForm } = props; + const { type, onTypeChange, newType, newTypeValue, isGraphql, onCloseCompletions, getNewTypeCreateForm, onSaveType, refetchTypes, isPopupTypeForm } = props; const { rpcClient } = useRpcContext(); const [filePath, setFilePath] = useState(undefined); diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/index.tsx index 63b32253f64..a69fa1daffc 100644 --- a/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/index.tsx +++ b/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/index.tsx @@ -37,7 +37,6 @@ import { ViewContent, Typography, Icon, - BreadcrumbContainer, } from "@wso2/ui-toolkit"; import styled from "@emotion/styled"; import { GraphqlServiceEditor } from "./GraphqlServiceEditor"; @@ -47,9 +46,9 @@ import { TopNavigationBar } from "../../components/TopNavigationBar"; import { TitleBar } from "../../components/TitleBar"; import { GraphqlObjectViewer } from "./ObjectViewer"; import { FormTypeEditor } from "../BI/TypeEditor"; +import { EditorContext, StackItem } from "@wso2/type-editor"; import DynamicModal from "../../components/Modal"; -import { BreadcrumbItem, BreadcrumbSeparator } from "../BI/Forms/FormGenerator"; -import { StackItem } from "@wso2/type-editor"; +import { BreadcrumbContainer, BreadcrumbItem, BreadcrumbSeparator } from "../BI/Forms/FormGenerator"; import React from "react"; const SpinnerContainer = styled.div` @@ -78,11 +77,6 @@ const Path = styled.span` font-size: 13px; `; -interface TypeEditorState { - isOpen: boolean; - fieldKey?: string; // Optional, to store the key of the field being edited - newTypeValue?: string; -} interface GraphQLDiagramProps { filePath: string; position: NodePosition; @@ -98,13 +92,12 @@ export function GraphQLDiagram(props: GraphQLDiagramProps) { const [isTypeEditorOpen, setIsTypeEditorOpen] = useState(false); const [editingType, setEditingType] = useState(); const [focusedNodeId, setFocusedNodeId] = useState(undefined); - const [typeEditorState, setTypeEditorState] = useState({ isOpen: false, newTypeValue: "" }); - //stack for recursive type creation const [stack, setStack] = useState([{ isDirty: false, type: undefined }]); + const [refetchStates, setRefetchStates] = useState([false]); const pushTypeStack = (item: StackItem) => { @@ -138,12 +131,8 @@ export function GraphQLDiagram(props: GraphQLDiagramProps) { }); }; - const peekTypeStack = (): StackItem | null => { - return stack.length > 0 ? stack[stack.length - 1] : null; - }; - const replaceTop = (item: StackItem) => { - if (stack.length === 0) return; + if (stack.length <= 1) return; setStack((prev) => { const newStack = [...prev]; newStack[newStack.length - 1] = item; @@ -151,69 +140,10 @@ export function GraphQLDiagram(props: GraphQLDiagramProps) { }); } - const setRefetchForCurrentModal = (shouldRefetch: boolean) => { - setRefetchStates((prev) => { - const newStates = [...prev]; - if (newStates.length > 0) { - newStates[newStates.length - 1] = shouldRefetch; - } - return newStates; - }); - }; - - const onSaveType = (type: Type) => { - if (stack.length > 0) { - setRefetchForCurrentModal(true); - popTypeStack(); - } - setTypeEditorState({ isOpen: stack.length !== 1 }); - } - - const handleTypeEditorStateChange = (state: boolean) => { - if (!state) { - if (stack.length > 1) { - popTypeStack(); - return; - } - } - setTypeEditorState({ isOpen: state }); - } - - const handleTypeCreate = (typeName?: string) => { - try { - setTypeEditorState({ isOpen: stack.length !== 0, newTypeValue: typeName, fieldKey: typeEditorState.fieldKey }); - popTypeStack() - } catch (e) { - console.error(e) - } + const peekTypeStack = (): StackItem | null => { + return stack.length > 0 ? stack[stack.length - 1] : null; }; - - const getNewTypeCreateForm = () => { - pushTypeStack({ - type: { - name: "", - members: [] as Member[], - editable: true, - metadata: { - description: "", - label: "" - }, - properties: {}, - codedata: { - node: "RECORD" as TypeNodeKind - }, - includes: [] as string[], - allowAdditionalFields: false - }, - isDirty: false - }) - setTypeEditorState({ - isOpen: true, - newTypeValue: "" - }) - } - // Helper function to convert TypeNodeKind to display name const getTypeKindDisplayName = (typeNodeKind?: TypeNodeKind): string => { switch (typeNodeKind) { @@ -396,6 +326,58 @@ export function GraphQLDiagram(props: GraphQLDiagramProps) { }); }; + const createNewType = (): Type => ({ + name: "", + members: [] as Member[], + editable: true, + metadata: { + description: "", + label: "" + }, + properties: {}, + codedata: { + node: "RECORD" as TypeNodeKind + }, + includes: [] as string[], + allowAdditionalFields: false + }); + + const setRefetchForCurrentModal = (shouldRefetch: boolean) => { + setRefetchStates((prev) => { + const newStates = [...prev]; + if (newStates.length > 0) { + newStates[newStates.length - 1] = shouldRefetch; + } + return newStates; + }); + }; + + const onSaveType = () => { + if (stack.length > 0) { + setRefetchForCurrentModal(true); + popTypeStack(); + } + setIsTypeEditorOpen(stack.length !== 1); + } + + const getNewTypeCreateForm = () => { + pushTypeStack({ + type: createNewType(), + isDirty: false + }); + setIsTypeEditorOpen(true); + } + + const handleTypeEditorStateChange = (state: boolean) => { + if (!state) { + if (stack.length > 1) { + popTypeStack(); + return; + } + } + setIsTypeEditorOpen(state); + } + return ( <> @@ -467,43 +449,66 @@ export function GraphQLDiagram(props: GraphQLDiagramProps) { /> )} {isTypeEditorOpen && editingType && editingType.codedata.node !== "CLASS" && ( - <> - { - stack.map((item, i) => + { }} + onSaveType={onSaveType} + getNewTypeCreateForm={getNewTypeCreateForm} + refetchTypes={true} /> + + )} + + {stack.slice(1).map((item, i) => { + return ( +
- {stack.slice(0, i + 1).map((stackItem, index) => ( + {stack.slice(1, i + 2).map((stackItem, index) => ( {index > 0 && /} - {stackItem?.type?.name || "New Type"} + {stackItem?.type?.name || "NewType"} ))} { }} onSaveType={onSaveType} - onTypeCreate={handleTypeCreate} getNewTypeCreateForm={getNewTypeCreateForm} - refetchTypes={refetchStates[i]} + refetchTypes={refetchStates[i + 1]} />
- ) - } - )} + + ) + })} + {isTypeEditorOpen && editingType && editingType.codedata.node === "CLASS" && ( { - if (stack.length === 0) return; + if (stack.length <= 1) return; setStack((prev) => { const newStack = [...prev]; newStack[newStack.length - 1] = item; @@ -117,15 +117,6 @@ export function TypeDiagram(props: TypeDiagramProps) { }); } - const replaceFirst = (item: StackItem) => { - if (stack.length === 0) return; - setStack((prev) => { - const newStack = [...prev]; - newStack[0] = item; - return newStack; - }); - } - useEffect(() => { if (!typesModel) { return; @@ -194,10 +185,6 @@ export function TypeDiagram(props: TypeDiagramProps) { popTypeStack(); return; } - setStack([{ - isDirty: false, - type: undefined - }]) } setTypeEditorState((prevState) => ({ ...prevState, @@ -211,10 +198,8 @@ export function TypeDiagram(props: TypeDiagramProps) { popTypeStack(); } setTypeEditorState({ - editingTypeId: undefined, - editingType: undefined, - isTypeCreatorOpen: stack.length !== 1, - newTypeName: undefined, + ...typeEditorState, + isTypeCreatorOpen: stack.length !== 1, }); } @@ -240,10 +225,8 @@ export function TypeDiagram(props: TypeDiagramProps) { isDirty: false }); setTypeEditorState({ + ...typeEditorState, isTypeCreatorOpen: true, - editingTypeId: undefined, - newTypeName: "", - editingType: undefined, }) } @@ -311,6 +294,7 @@ export function TypeDiagram(props: TypeDiagramProps) { } setTypeEditorState((prevState) => ({ ...prevState, + isTypeCreatorOpen: true, editingType: type, editingTypeId: typeId, })); @@ -386,6 +370,27 @@ export function TypeDiagram(props: TypeDiagramProps) { }]) }; + const findSelectedType = (typeId: string): Type => { + if (!typeId) { + return { + name: typeEditorState.newTypeName ?? "MyType", + editable: true, + metadata: { + label: "", + description: "", + }, + codedata: { + node: "RECORD", + }, + properties: {}, + members: [], + includes: [] as string[], + allowAdditionalFields: false + }; + } + return typesModel.find((type: Type) => type.name === typeId); + }; + const onFocusedNodeIdChange = (typeId: string) => { setFocusedNodeId(typeId); onTypeEditorClosed(); @@ -404,10 +409,8 @@ export function TypeDiagram(props: TypeDiagramProps) { return; } setTypeEditorState({ - editingTypeId: undefined, - editingType: undefined, - isTypeCreatorOpen: false, - newTypeName: undefined, + ...typeEditorState, + isTypeCreatorOpen: true, }); }; @@ -429,15 +432,6 @@ export function TypeDiagram(props: TypeDiagramProps) { } }; - const handleTypeCreate = (typeName?: string) => { - setTypeEditorState((prevState) => ({ - ...prevState, - isTypeCreatorOpen: true, - editingTypeId: undefined, - newTypeName: typeName, - })); - }; - const handleNodeSelect = (nodeId: string) => { setFocusedNodeId(nodeId); }; @@ -502,32 +496,28 @@ export function TypeDiagram(props: TypeDiagramProps) { {/* Panel for editing and creating types */} - - {(typeEditorState.editingTypeId || typeEditorState.isTypeCreatorOpen) && typeEditorState.editingType?.codedata?.node !== "CLASS" && ( - - - - )} - + + { }} + isPopupTypeForm={false} + onSaveType={onSaveType} + getNewTypeCreateForm={getNewTypeCreateForm} + refetchTypes={true} + /> + {stack.slice(1).map((item, i) => { @@ -557,7 +547,7 @@ export function TypeDiagram(props: TypeDiagramProps) { newType={peekTypeStack()?.isDirty} isPopupTypeForm={true} onTypeChange={onTypeChange} - onTypeCreate={handleTypeCreate} + onTypeCreate={() => { }} onSaveType={onSaveType} getNewTypeCreateForm={getNewTypeCreateForm} refetchTypes={refetchStates[i + 1]} diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/api-services/ai-chat-service.spec.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/api-services/ai-chat-service.spec.ts index 4cb7e41adbc..cca330a9fbb 100644 --- a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/api-services/ai-chat-service.spec.ts +++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/api-services/ai-chat-service.spec.ts @@ -47,10 +47,14 @@ export default function createTests() { } }); await form.submit('Create'); + console.log('AI Chat Agent creation form submitted'); + // Wait until the create button is detached + await artifactWebView.getByRole('button', { name: 'Creating' }).waitFor({ state: 'detached' }); + await artifactWebView.getByRole('button', { name: 'Creating...' }).waitFor({ state: 'detached', timeout: 240000 }); // Check if the diagram canvas is visible const diagramCanvas = artifactWebView.locator('#bi-diagram-canvas'); - await diagramCanvas.waitFor({ state: 'visible', timeout: 30000 }); + await diagramCanvas.waitFor({ state: 'visible', timeout: 240000 }); const diagramTitle = artifactWebView.locator('h2', { hasText: 'AI Chat Agent' }); await diagramTitle.waitFor(); diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/api-services/graphql-service.spec.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/api-services/graphql-service.spec.ts index a6d3be13f64..a992fc1fbd7 100644 --- a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/api-services/graphql-service.spec.ts +++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/api-services/graphql-service.spec.ts @@ -107,12 +107,15 @@ export default function createTests() { test('Add types and arguments to GraphQL Service', async ({ }, testInfo) => { const testAttempt = testInfo.retry + 1; console.log('Adding types and arguments in test attempt: ', testAttempt); + console.log('Adding Query'); await graphqlServiceUtils.clickButtonByTestId('graphql-add-mutation-btn'); + console.log('Clicked on Add Mutation button'); await graphqlServiceUtils.addArgumentToGraphQLService(); + console.log('Added argument to the mutation'); await graphqlServiceUtils.createInputObjectFromScratch(); + console.log('Created input object from scratch'); await graphqlServiceUtils.addOutputObject(); - await artifactWebView.getByRole('textbox', { name: 'Field Name*The name of the' }).fill(TEST_DATA.mutation[1].name); await artifactWebView.getByRole('button', { name: 'Save' }).click(); await graphqlServiceUtils.closePanel(); diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/api-services/graphqlUtils.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/api-services/graphqlUtils.ts index ee4751ae9d8..ffe0b38dfad 100644 --- a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/api-services/graphqlUtils.ts +++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/api-services/graphqlUtils.ts @@ -90,11 +90,15 @@ export class GraphQLServiceUtils { const fieldTypeBox = this.webView.getByRole('textbox', { name: fieldType.label }); await this.waitForElement(fieldTypeBox); await fieldTypeBox.fill(fieldType.value); + console.log(`Filled ${fieldType.label} with value: ${fieldType.value}`); // Wait a short moment to allow UI to register the value await this.page.waitForTimeout(10000); - const fieldDefaultCompletion = this.webView.getByTestId('add-type-completion'); + const fieldDefaultCompletion = this.webView.getByRole('button', { name: ` ${fieldType.value}`, exact: true }); await this.waitForElement(fieldDefaultCompletion); + console.log(`Field default completion is visible: ${await fieldDefaultCompletion.isVisible()}`); + // Click on Field Type label to move focus out of the input box + await this.webView.getByText(fieldType.label).click(); // TODO: https://github.com/wso2/product-ballerina-integrator/issues/917 if (await fieldDefaultCompletion.isVisible()) { @@ -117,10 +121,12 @@ export class GraphQLServiceUtils { async addOutputObject() { const createFromScratchTab = this.webView.getByTestId('create-from-scratch-tab'); await this.webView.getByRole('textbox', { name: 'Field Type' }).click(); + console.log('Clicked on Field Type textbox'); await this.webView.getByText('Create New Type').click(); const form = new Form(this.page, 'WSO2 Integrator: BI', this.webView); await form.switchToFormView(false, this.webView); + console.log('Switched to form view for creating new type'); await form.fill({ values: { 'Name': { @@ -133,9 +139,12 @@ export class GraphQLServiceUtils { } } }); + console.log('Filled form for new output object type'); const typeEditorUtils = new TypeEditorUtils(this.page, this.webView); await typeEditorUtils.addFunction("function1", "string"); + console.log('Added function to the new type'); await this.webView.getByTestId('type-create-save').getByRole('button', { name: 'Save' }).click(); + console.log('Saved the new output object type'); } async createInputObjectFromScratch() { @@ -164,8 +173,10 @@ export class GraphQLServiceUtils { async addArgumentToGraphQLService() { await this.webView.getByText('Add Argument').click(); await this.webView.getByRole('textbox', { name: 'Argument Type' }).click(); - await this.webView.getByTitle('string', { exact: true }).click(); + await this.webView.getByRole('button', { name: ' string', exact: true }).click(); + await this.webView.getByText('Argument Type*').click(); await this.webView.getByRole('textbox', { name: 'Argument Name*The name of the' }).fill(TEST_DATA.mutation[1].arguments[0].name); + await this.webView.getByText('Argument Name*').click(); await this.webView.getByRole('button', { name: 'Add' }).click(); } diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/api-services/tcp-service.spec.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/api-services/tcp-service.spec.ts index 81ce1722079..8166ba59350 100644 --- a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/api-services/tcp-service.spec.ts +++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/api-services/tcp-service.spec.ts @@ -41,6 +41,7 @@ export default function createTests() { const listenerPort = `6060`; const form = new Form(page.page, 'WSO2 Integrator: BI', artifactWebView); await form.switchToFormView(false, artifactWebView); + console.log('Filling TCP Service form'); await form.fill({ values: { 'Name*The name of the listener': { @@ -50,10 +51,12 @@ export default function createTests() { 'localPort': { type: 'textarea', value: listenerPort, + additionalProps: { clickLabel: true } } } }); - await form.submit('Next'); + console.log('Submitting TCP Service form'); + await form.submit('Next', true); const selectedListener = artifactWebView.locator(`[current-value="${listenerName}"]`); await selectedListener.waitFor(); @@ -62,7 +65,7 @@ export default function createTests() { const configTitle = artifactWebView.locator('h3', { hasText: 'TCP Service Configuration' }); await configTitle.waitFor(); - await form.submit('Create'); + await form.submit('Create', true); const context = artifactWebView.locator(`text="onConnect"`); await context.waitFor(); @@ -94,7 +97,7 @@ export default function createTests() { const selectedListener = artifactWebView.locator(`[current-value="${listenerName}"]`); await selectedListener.waitFor(); - await form.submit('Save'); + await form.submit('Save', true); const context = artifactWebView.locator(`text="onConnect"`); await context.waitFor(); diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/configuration/configuration.spec.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/configuration/configuration.spec.ts index c3c6d689d7f..01ca0ad4ae4 100644 --- a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/configuration/configuration.spec.ts +++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/configuration/configuration.spec.ts @@ -46,9 +46,6 @@ export default function createTests() { // Verify Configurable Variables view await configEditor.verifyPageLoaded(); - // Create a new configurable variable - await configEditor.addNewConfigurableVariable(); - // Fill the form fields const form = new Form(page.page, 'WSO2 Integrator: BI', configurationWebView); await form.switchToFormView(false, configurationWebView); @@ -60,11 +57,13 @@ export default function createTests() { }, 'Variable Type': { type: 'textarea', - value: 'int' + value: 'int', + additionalProps: { clickLabel: true } }, 'Default Value': { type: 'textarea', - value: '100' + value: '100', + additionalProps: { clickLabel: true } } } }); @@ -83,7 +82,8 @@ export default function createTests() { values: { 'Default Value': { type: 'textarea', - value: '200' + value: '200', + additionalProps: { clickLabel: true } } } }); @@ -107,7 +107,8 @@ export default function createTests() { }, 'Variable Type': { type: 'textarea', - value: 'string' + value: 'string', + additionalProps: { clickLabel: true } } } }); @@ -127,7 +128,8 @@ export default function createTests() { }, 'Variable Type': { type: 'textarea', - value: 'string' + value: 'string', + additionalProps: { clickLabel: true } } } }); diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/event-integrations/azure.spec.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/event-integrations/azure.spec.ts index 581a2acc081..24b99831ed3 100644 --- a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/event-integrations/azure.spec.ts +++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/event-integrations/azure.spec.ts @@ -49,14 +49,16 @@ export default function createTests() { 'connectionString': { type: 'textarea', value: '"Endpoint=sb://test.servicebus.windows.net/;SharedAccessKeyName=RootManageSharedAccessKey;SharedAccessKey=test"', + additionalProps: { clickLabel: true } }, 'entityConfig': { type: 'textarea', value: `{ queueName: "testQueue" }`, + additionalProps: { clickLabel: true } } } }); - await form.submit('Next'); + await form.submit('Next', true); // Check for title const configTitle = artifactWebView.locator('h3', { hasText: 'Azure Service Bus Event Handler Configuration' }); diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/event-integrations/kafka.spec.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/event-integrations/kafka.spec.ts index f7e4efe11cb..e5d7b0fde7c 100644 --- a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/event-integrations/kafka.spec.ts +++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/event-integrations/kafka.spec.ts @@ -50,10 +50,11 @@ export default function createTests() { 'bootstrapServers': { type: 'textarea', value: bootstrapServers, + additionalProps: { clickLabel: true } } } }); - await form.submit('Next'); + await form.submit('Next', true); // Check for title const configTitle = artifactWebView.locator('h3', { hasText: 'Kafka Event Handler Configuration' }); @@ -62,7 +63,7 @@ export default function createTests() { const selectedListener = artifactWebView.locator(`[current-value="${listenerName}"]`); await selectedListener.waitFor(); - await form.submit('Create'); + await form.submit('Create', true); const onConsumerRecord = artifactWebView.locator(`text="onConsumerRecord"`); await onConsumerRecord.waitFor(); diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/event-integrations/mqtt.spec.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/event-integrations/mqtt.spec.ts index 3be62b17187..85041e244c6 100644 --- a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/event-integrations/mqtt.spec.ts +++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/event-integrations/mqtt.spec.ts @@ -49,18 +49,21 @@ export default function createTests() { 'serverUri': { type: 'textarea', value: `"tcp://localhost:1883"`, + additionalProps: { clickLabel: true } }, 'clientId': { type: 'textarea', value: `"clientId${testAttempt}"`, + additionalProps: { clickLabel: true } }, 'subscriptions': { type: 'textarea', value: `"testTopic"`, + additionalProps: { clickLabel: true } } } }); - await form.submit('Next'); + await form.submit('Next', true); // Check for title const configTitle = artifactWebView.locator('h3', { hasText: 'MQTT Event Handler Configuration' }); diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/event-integrations/rabbitmq.spec.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/event-integrations/rabbitmq.spec.ts index 4159c7505b4..8f9dd4d7334 100644 --- a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/event-integrations/rabbitmq.spec.ts +++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/event-integrations/rabbitmq.spec.ts @@ -49,14 +49,16 @@ export default function createTests() { 'host': { type: 'textarea', value: `"localhost"`, + additionalProps: { clickLabel: true } }, 'port': { type: 'textarea', value: '5676', + additionalProps: { clickLabel: true } } } }); - await form.submit('Next'); + await form.submit('Next', true); // Check for title const configTitle = artifactWebView.locator('h3', { hasText: 'RabbitMQ Event Handler Configuration' }); @@ -74,7 +76,7 @@ export default function createTests() { } }); - await form.submit('Create'); + await form.submit('Create', true); const onMessage = artifactWebView.locator(`text="onMessage"`); await onMessage.waitFor(); diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/event-integrations/salesforce.spec.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/event-integrations/salesforce.spec.ts index 0b0f9b49eca..fe245089338 100644 --- a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/event-integrations/salesforce.spec.ts +++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/event-integrations/salesforce.spec.ts @@ -49,14 +49,15 @@ export default function createTests() { 'auth': { type: 'textarea', value: `{ username: "test", password: "test" }`, + additionalProps: { clickLabel: true } } } }); - await form.submit('Next'); + await form.submit('Next', true); // Check for title const configTitle = artifactWebView.locator('h3', { hasText: 'Salesforce Event Handler Configuration' }); - await configTitle.waitFor(); + await configTitle.waitFor({ timeout: 90000 }); const selectedListener = artifactWebView.locator(`[current-value="${listenerName}"]`); await selectedListener.waitFor(); @@ -100,7 +101,7 @@ export default function createTests() { await form.switchToFormView(false, artifactWebView); const configTitle = artifactWebView.locator('h3', { hasText: 'Salesforce Event Handler Configuration' }); - await configTitle.waitFor(); + await configTitle.waitFor({ timeout: 90000 }); const selectedListener = artifactWebView.locator(`[current-value="${listenerName}"]`); await selectedListener.waitFor(); diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/file-integrations/directory.spec.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/file-integrations/directory.spec.ts index e1eabaff7f1..4aa832770da 100644 --- a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/file-integrations/directory.spec.ts +++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/file-integrations/directory.spec.ts @@ -49,14 +49,15 @@ export default function createTests() { 'path': { type: 'textarea', value: '"/tmp/wso2/bi/sample"', + additionalProps: { clickLabel: true } } } }); - await form.submit('Next'); + await form.submit('Next', true); // Check for title const configTitle = artifactWebView.locator('h3', { hasText: 'Directory Service Configuration' }); - await configTitle.waitFor(); + await configTitle.waitFor({ timeout: 90000 }); const selectedListener = artifactWebView.locator(`[current-value="${listenerName}"]`); await selectedListener.waitFor(); diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/import-integration/import-integration.spec.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/import-integration/import-integration.spec.ts index c52ffaa65cb..99177dd24c1 100644 --- a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/import-integration/import-integration.spec.ts +++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/import-integration/import-integration.spec.ts @@ -53,12 +53,12 @@ export default function createTests() { console.log('Testing Import Integration navigation in test attempt: ', testAttempt); // Look for the Import External Integration button on the welcome page - const importButton = webview.getByText('Import External Integration'); + const importButton = webview.getByRole('button', { name: ' Import External Integration' }); await importButton.waitFor({ timeout: 30000 }); - await importButton.click(); + await importButton.click({ force: true }); // Verify we're navigated to the import integration form - const importTitle = webview.locator('h1', { hasText: 'Migrate External Integration' }); + const importTitle = webview.getByRole('heading', { name: 'Migrate External Integration' }); await importTitle.waitFor({ timeout: 30000 }); }); @@ -73,7 +73,7 @@ export default function createTests() { // Select TIBCO integration card const tibcoCard = webview.locator('[id$="-integration-card"]').filter({ hasText: 'TIBCO' }).first(); - await tibcoCard.click(); + await tibcoCard.click({ force: true }); console.log('Selected TIBCO migration tool'); // After selecting a tool, project folder selection should appear @@ -121,7 +121,7 @@ export default function createTests() { } console.log('✓ Start Migration button is enabled, clicking it'); - await startMigrationButton.click(); + await startMigrationButton.click({ force: true }); // Wait for migration to start - look for progress indicators or success messages await page.page.waitForTimeout(2000); @@ -148,7 +148,7 @@ export default function createTests() { // Click the Next button to proceed to project configuration const nextButton = webview.getByRole('button', { name: 'Next' }); await nextButton.waitFor({ timeout: 10000 }); - await nextButton.click(); + await nextButton.click({ force: true }); console.log('✓ Clicked Next button to proceed to project configuration'); // Wait for the project configuration form to appear @@ -166,11 +166,11 @@ export default function createTests() { const form = new Form(page.page, 'WSO2 Integrator: BI', webview); await form.fill({ values: { - 'Integration Name': { + 'Integration Name*': { type: 'input', value: `TibcoMigration${testAttempt}` }, - 'Change': { + 'Select Path': { type: 'file', value: migrationOutputPath } @@ -178,11 +178,11 @@ export default function createTests() { }); console.log('✓ Integration name and project location set'); - page.page.waitForTimeout(1000); + await page.page.waitForTimeout(1000); // Wait a moment until Create and Open Project button is enabled // Click the Create and Open Project button const createProjectButton = webview.getByRole('button', { name: 'Create and Open Project' }); - await createProjectButton.waitFor(); + await createProjectButton.waitFor({ timeout: 60000 }); // Verify button is enabled const isDisabled = await createProjectButton.isDisabled(); @@ -191,7 +191,7 @@ export default function createTests() { } console.log('✓ Create and Open Project button is enabled, clicking it'); - await createProjectButton.click(); + await createProjectButton.click({ force: true }); await page.page.waitForTimeout(5000); diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/other-artifacts/connection.spec.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/other-artifacts/connection.spec.ts index 045fc6e4ed8..a65050eb2a7 100644 --- a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/other-artifacts/connection.spec.ts +++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/other-artifacts/connection.spec.ts @@ -49,6 +49,7 @@ export default function createTests() { 'Url': { type: 'textarea', value: '"https://foo.bar/baz"', + additionalProps: { clickLabel: true } }, 'Connection Name*Name of the connection': { type: 'input', diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/other-artifacts/data-mapper.spec.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/other-artifacts/data-mapper.spec.ts index 11d5a4c319b..4bd5e99dc29 100644 --- a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/other-artifacts/data-mapper.spec.ts +++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/other-artifacts/data-mapper.spec.ts @@ -75,6 +75,7 @@ export default function createTests() { 'Return Type': { type: 'textarea', value: 'string', + additionalProps: { clickLabel: true } } } }); diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/other-artifacts/function.spec.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/other-artifacts/function.spec.ts index 392b250c33c..ab87ba4c617 100644 --- a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/other-artifacts/function.spec.ts +++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/other-artifacts/function.spec.ts @@ -75,6 +75,7 @@ export default function createTests() { 'Return Type': { type: 'textarea', value: 'string', + additionalProps: { clickLabel: true } } } }); diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/other-artifacts/np.spec.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/other-artifacts/np.spec.ts index c54318048da..77aea89a927 100644 --- a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/other-artifacts/np.spec.ts +++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/other-artifacts/np.spec.ts @@ -75,6 +75,7 @@ export default function createTests() { 'Return Type': { type: 'textarea', value: 'string', + additionalProps: { clickLabel: true } } } }); diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/test.list.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/test.list.ts index 1dba4db0b66..62d265337de 100644 --- a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/test.list.ts +++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/test.list.ts @@ -42,7 +42,6 @@ import directoryIntegration from './file-integrations/directory.spec'; import functionArtifact from './other-artifacts/function.spec'; import naturalFunctionArtifact from './other-artifacts/np.spec'; -import dataMapperArtifact from './other-artifacts/data-mapper.spec'; import typeDiagramArtifact from './other-artifacts/type.spec'; import connectionArtifact from './other-artifacts/connection.spec'; @@ -68,7 +67,7 @@ test.describe(aiChatService); // <----Integration as API Test----> test.describe(httpService); -test.describe(graphqlService); +test.describe(graphqlService); // TODO: This tests is failing fix it test.describe(tcpService); // <----Event Integration Test----> @@ -86,12 +85,12 @@ test.describe(directoryIntegration); // <----Other Artifacts Test----> test.describe(functionArtifact); -test.describe(naturalFunctionArtifact); -test.describe(dataMapperArtifact); // TODO: Fix this test -test.describe(typeDiagramArtifact); // TODO: Fix this test +// test.describe(naturalFunctionArtifact); // TODO: Enable this once the ballerina version is switchable +// test.describe(dataMapperArtifact); // TODO: Enable this later once tests are improved +test.describe(typeDiagramArtifact); test.describe(connectionArtifact); -test.describe(configuration); // TODO: Fix this test -test.describe(typeTest); +test.describe(configuration); // TODO: This tests is failing due to https://github.com/wso2/product-ballerina-integrator/issues/1231. Enable after fixing the issue. +test.describe(typeTest); // TODO: This tests is failing due to https://github.com/wso2/product-ballerina-integrator/issues/1222. Enable after fixing the issue. // <----Import Integration Test----> test.describe(importIntegration); diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/type/TypeEditorUtils.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/type/TypeEditorUtils.ts index ff9c0ea6020..04c0c120220 100644 --- a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/type/TypeEditorUtils.ts +++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/type/TypeEditorUtils.ts @@ -17,7 +17,7 @@ */ import { Frame, Locator, Page } from '@playwright/test'; -import { Form } from '@wso2/playwright-vscode-tester'; +import { Form, switchToIFrame } from '@wso2/playwright-vscode-tester'; /** * Utility class for type editor test operations @@ -45,11 +45,26 @@ export class TypeEditorUtils { /** * Fill a type field (double-click and type) */ - async fillTypeField(index: number = 0, value: string): Promise { + async fillTypeField(index: number = 0, value: string, title?: string): Promise { const field = this.webView.locator('[data-testid="type-field"]').nth(index); await this.waitForElement(field); await field.dblclick(); await field.type(value); + let iframe; + try { + // This is due to an implementation issue with the type dropdown in the type editor + iframe = await switchToIFrame('WSO2 Integrator: BI', this.page); + if (!iframe) { + throw new Error('WSO2 Integrator: BI iframe not found'); + } + await iframe.getByRole('button', { name: ` ${value}`, exact: true }).click(); + } catch (error) { + console.error('Error switching to iframe:', error); + throw error; + } + if (title) { + await iframe.getByText(title).click(); + } } /** @@ -89,16 +104,18 @@ export class TypeEditorUtils { const lastIndex = fieldCount - 1; await this.fillIdentifierField(lastIndex, fieldName); - await this.fillTypeField(lastIndex, fieldType); + await this.fillTypeField(lastIndex, fieldType, 'Fields'); } /** * Add a function to service class */ - async addFunction(functionName: string, returnType: string): Promise { + async addFunction(functionName: string, returnType: string, sectionName?: string): Promise { + console.log(`Adding function: ${functionName} with return type: ${returnType}`); const addButton = this.webView.locator('[data-testid="function-add-button"]'); await this.waitForElement(addButton); await addButton.click(); + console.log('Clicked Add Function button'); // Fill the newly added function (last in the form) const identifierFields = this.webView.locator('[data-testid="identifier-field"]'); @@ -107,7 +124,9 @@ export class TypeEditorUtils { const lastIndex = fieldCount - 1; await this.fillIdentifierField(lastIndex, functionName); - await this.fillTypeField(lastIndex, returnType); + console.log(`Filled function name: ${functionName}`); + await this.fillTypeField(lastIndex, returnType, sectionName); + console.log(`Filled return type: ${returnType}`); } /** @@ -223,7 +242,7 @@ export class TypeEditorUtils { // Fill union types for (let i = 0; i < types.length; i++) { - await this.fillTypeField(i, types[i]); + await this.fillTypeField(i, types[i], 'Members'); } return form; @@ -250,7 +269,7 @@ export class TypeEditorUtils { // Add functions for (const func of functions) { - await this.addFunction(func.name, func.returnType); + await this.addFunction(func.name, func.returnType, 'Resource Methods'); } return form; diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/utils.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/utils.ts index cb66b9c6315..9d775133799 100644 --- a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/utils.ts +++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/utils.ts @@ -62,7 +62,15 @@ export async function toggleNotifications(disable: boolean) { export async function setupBallerinaIntegrator() { await page.selectSidebarItem('WSO2 Integrator: BI'); - const webview = await getWebview('WSO2 Integrator: BI', page); + console.log('Selecting WSO2 Integrator: BI sidebar item'); + let webview; + try { + webview = await switchToIFrame('WSO2 Integrator: BI', page.page, 20000); + } catch (error) { + console.log('Failed to get webview on first attempt, retrying...'); + await page.selectSidebarItem('WSO2 Integrator: BI'); + webview = await getWebview('WSO2 Integrator: BI', page); + } if (!webview) { throw new Error('WSO2 Integrator: BI webview not found'); } @@ -192,6 +200,18 @@ export function initMigrationTest() { test.beforeAll(async ({ }, testInfo) => { console.log(`>>> Starting migration tests. Title: ${testInfo.title}, Attempt: ${testInfo.retry + 1}`); console.log('Setting up BI extension for migration testing'); + if (!existsSync(path.join(newProjectPath, 'testProject'))) { + if (fs.existsSync(newProjectPath)) { + fs.rmSync(newProjectPath, { recursive: true }); + } + fs.mkdirSync(newProjectPath, { recursive: true }); + console.log('Starting VSCode'); + } else { + console.log('Resuming VSCode'); + await resumeVSCode(); + await page.page.waitForLoadState(); + await toggleNotifications(true); + } await initVSCode(); await page.page.waitForLoadState(); await toggleNotifications(true); @@ -207,7 +227,6 @@ export function initMigrationTest() { if (!webview) { throw new Error('WSO2 Integrator: BI webview not found'); } - console.log('Migration test runner started'); }); } diff --git a/workspaces/common-libs/playwright-vscode-tester/src/components/Form.ts b/workspaces/common-libs/playwright-vscode-tester/src/components/Form.ts index 2f173c9b51e..1acfde8261a 100644 --- a/workspaces/common-libs/playwright-vscode-tester/src/components/Form.ts +++ b/workspaces/common-libs/playwright-vscode-tester/src/components/Form.ts @@ -76,10 +76,14 @@ export class Form { await cancelBtn.click(); } - public async submit(btnText: string = "Create") { + public async submit(btnText: string = "Create", forceClick: boolean = false) { const submitBtn = await getVsCodeButton(this.container, btnText, "primary"); expect(await submitBtn.isEnabled()).toBeTruthy(); - await submitBtn.click(); + if (forceClick) { + await submitBtn.click({ force: true }); + } else { + await submitBtn.click(); + } } public async fill(props: FormFillProps) { @@ -98,6 +102,9 @@ export class Form { case 'textarea': { const input = this.container.locator(`textarea[aria-label="${key}"]`); await input.fill(data.value); + if (data.additionalProps?.clickLabel) { + await this.container.locator(`label:text("${key}")`).click(); + } break; } case 'dropdown': { diff --git a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/SlidingPane/index.tsx b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/SlidingPane/index.tsx index 53a8b666fa0..51e64aef2cb 100644 --- a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/SlidingPane/index.tsx +++ b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/SlidingPane/index.tsx @@ -95,7 +95,7 @@ export const SlidingWindow = ({ children }: SlidingWindowProps) => { getParams: getParams, isInitialRender: isInitialRender }}> - + {children} @@ -108,7 +108,7 @@ export const SlidingPaneContainer = styled.div<{ index: number; isCurrent?: bool flex-direction: column; transition: ${({ clearAnimations }: { clearAnimations: boolean }) => clearAnimations ? 'none' : 'transform 0.3s ease-in-out, height 0.3s ease-in-out'}; - transform: ${({ index, isInitialRender }: { index: number, isInitialRender?: React.MutableRefObject }) => + transform: ${({ index, isInitialRender }: { index: number, isInitialRender?: React.MutableRefObject }) => isInitialRender?.current ? 'none' : `translateX(${index * 100}%)`}; `; @@ -225,33 +225,27 @@ export const SlidingPaneNavContainer = ({ children, to, data, endIcon, onClick, } return ( - - { - if (onClick) { - onClick(); - } else { - handleNavigation(); - } - }} - > -
-
- {children} -
- { - endIcon ? ( - <>{endIcon} - ) : to ? ( -
- -
- ) : null - } + { + if (onClick) { + onClick(); + } else { + handleNavigation(); + } + }} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} ref={ref} style={sx}> +
+
+ {children}
- + { + endIcon ? ( + <>{endIcon} + ) : to ? ( +
+ +
+ ) : null + } +
) } @@ -291,7 +285,7 @@ export const SlidingPaneHeader = ({ children }: { children: ReactNode }) => {
- + {children}