Merge pull request #176 from code0-tech/feat/#172

nicosammito · web-flow · commit 3f1d463cc788 · 2026-04-16T14:46:59.000+02:00
Add data attribute for end to end testing
diff --git a/src/packages/ce/src/flow/components/FlowCreateDialogComponent.tsx b/src/packages/ce/src/flow/components/FlowCreateDialogComponent.tsx
@@ -203,7 +203,8 @@ export const FlowCreateDialogComponent: React.FC<FlowCreateDialogComponentProps>
                         <InputDescription>You can choose a trigger here</InputDescription>
                         <Menu>
                             <MenuTrigger asChild>
-                                <Button w={"100%"}
+                                <Button data-qa-selector={"flow-create-trigger-select"}
+                                        w={"100%"}
                                         color={inputs.getInputProps("flowTypeId").formValidation?.valid ? "tertiary" : "error"}
                                         style={{justifyContent: "start"}}>
                                     {selectedFlowTypeId ?
@@ -221,7 +222,7 @@ export const FlowCreateDialogComponent: React.FC<FlowCreateDialogComponentProps>
 
                                             const DisplayIcon = icon(flowType?.displayIcon as IconString)
 
-                                            return <MenuItem key={flowType.id} onSelect={() => {
+                                            return <MenuItem data-qa-selector={"flow-create-trigger-select-item"} key={flowType.id} onSelect={() => {
                                                 inputs.getInputProps("flowTypeId").formValidation?.setValue(flowType.id)
                                                 setSelectedFlowTypeId(flowType.id)
                                             }}>
@@ -253,6 +254,7 @@ export const FlowCreateDialogComponent: React.FC<FlowCreateDialogComponentProps>
                             <InputMessage>{inputs.getInputProps("flowTypeId").formValidation?.notValidMessage!}</InputMessage> : null}
                         <Spacing spacing={"md"}/>
                         <FlowNameInputComponent
+                            data-qa-selector={"flow-create-name"}
                             description={"You can choose a name here and only use alphanumeric names."}
                             title={"Name of the flow"}
                             {...inputs.getInputProps("name")}/>
@@ -261,7 +263,7 @@ export const FlowCreateDialogComponent: React.FC<FlowCreateDialogComponentProps>
                             <DialogClose asChild>
                                 <Button color={"tertiary"} variant={"filled"}>No, go back!</Button>
                             </DialogClose>
-                            <Button color={"success"} variant={"filled"} onClick={validate}>Yes, create!</Button>
+                            <Button data-qa-selector={"flow-create-send"} color={"success"} variant={"filled"} onClick={validate}>Yes, create!</Button>
                         </Flex>
                     </>
                 )}
diff --git a/src/packages/ce/src/flow/components/panels/FlowPanelControlComponent.tsx b/src/packages/ce/src/flow/components/panels/FlowPanelControlComponent.tsx
@@ -67,11 +67,12 @@ export const FlowPanelControlComponent: React.FC<FlowPanelControlComponentProps>
         }
     }, [flowId, flowService, flowStore, activeTab])
 
-    return <Panel position={"bottom-center"}>
+    return <Panel position={"bottom-center"} data-qa-selector={"flow-builder-control-panel"}>
         <ButtonGroup style={{textWrap: "nowrap"}}>
             <Tooltip>
                 <TooltipTrigger asChild>
-                    <Button disabled={!activeTab || !(activeTab?.content?.props.flowId as Flow['id'])}
+                    <Button data-qa-selector={"flow-builder-control-panel-delete"}
+                            disabled={!activeTab || !(activeTab?.content?.props.flowId as Flow['id'])}
                             onClick={deleteActiveNode}
                             paddingSize={"xxs"}
                             variant={"filled"}
@@ -88,7 +89,8 @@ export const FlowPanelControlComponent: React.FC<FlowPanelControlComponentProps>
             <FunctionSuggestionMenuComponent suggestions={result}
                                              onSuggestionSelect={addNodeToFlow}
                                              triggerContent={
-                                     <Button disabled={!activeTab}
+                                     <Button data-qa-selector={"flow-builder-control-panel-add"}
+                                             disabled={!activeTab}
                                              paddingSize={"xxs"}
                                              variant={"filled"}
                                              color={"secondary"}>
diff --git a/src/packages/ce/src/flow/views/FlowFolderView.tsx b/src/packages/ce/src/flow/views/FlowFolderView.tsx
@@ -79,7 +79,7 @@ export const FlowFolderView: React.FC = () => {
         <Layout layoutGap={"0.7rem"} showLayoutSplitter={false} topContent={
             <Flex style={{flexDirection: "column", gap: "0.7rem"}}>
                 <Flex style={{gap: "0.35rem"}} align={"center"} justify={"space-between"}>
-                    <Button color={"tertiary"} paddingSize={"xxs"} style={{textWrap: "nowrap"}} onClick={() => {
+                    <Button data-qa-selector={"flow-send"} color={"tertiary"} paddingSize={"xxs"} style={{textWrap: "nowrap"}} onClick={() => {
                         setCreateDialogOpen(true)
                         setFlowTypeId(undefined)
                     }}>
diff --git a/src/packages/ce/src/function/components/files/FunctionFileDefaultComponent.tsx b/src/packages/ce/src/function/components/files/FunctionFileDefaultComponent.tsx
@@ -152,7 +152,8 @@ export const FunctionFileDefaultComponent: React.FC<FunctionFileDefaultComponent
 
             return <div>
                 {/*@ts-ignore*/}
-                <DataTypeInputComponent flowId={flowId}
+                <DataTypeInputComponent data-qa-selector={"flow-builder-parameter"}
+                                        flowId={flowId}
                                         nodeId={node.id}
                                         parameterIndex={index}
                                         title={title}
diff --git a/src/packages/ce/src/function/components/files/FunctionFileTriggerComponent.tsx b/src/packages/ce/src/function/components/files/FunctionFileTriggerComponent.tsx
@@ -140,7 +140,8 @@ export const FunctionFileTriggerComponent: React.FC<FunctionFileTriggerComponent
 
             return <div>
                 {/*@ts-ignore*/}
-                <DataTypeInputComponent flowId={instance.id}
+                <DataTypeInputComponent data-qa-selector={"flow-builder-setting"}
+                                        flowId={instance.id}
                                         nodeId={undefined}
                                         parameterIndex={index}
                                         title={title}
diff --git a/src/packages/ce/src/function/components/files/FunctionFilesComponent.tsx b/src/packages/ce/src/function/components/files/FunctionFilesComponent.tsx
@@ -160,7 +160,8 @@ export const FunctionFilesComponent: React.FC<FunctionFilesComponentProps> = (pr
             </FileTabsList>}>
                 <>
                     {fileTabsService.values().map((tab: FileTabsView) => (
-                        <FileTabsContent display={tab.active ? "block" : "none"}
+                        <FileTabsContent data-qa-selector={"flow-builder-file-content"}
+                                         display={tab.active ? "block" : "none"}
                                          key={`content-${tab.id}`}
                                          value={tab.id!}>
                             {tab.content}
diff --git a/src/packages/ce/src/function/components/nodes/FunctionNodeDefaultComponent.tsx b/src/packages/ce/src/function/components/nodes/FunctionNodeDefaultComponent.tsx
@@ -161,6 +161,7 @@ export const FunctionNodeDefaultComponent: React.FC<FunctionNodeDefaultComponent
 
     return (
         <Card
+            data-qa-selector={"flow-builder-node"}
             key={id}
             data-flow-refernce={id}
             paddingSize={"xs"}
diff --git a/src/packages/ce/src/function/components/nodes/FunctionNodeTriggerComponent.tsx b/src/packages/ce/src/function/components/nodes/FunctionNodeTriggerComponent.tsx
@@ -77,7 +77,8 @@ export const FunctionNodeTriggerComponent: React.FC<FunctionNodeTriggerComponent
 
     }, [flowStore, activeTabId, data.flowId])
 
-    return <Card variant={"normal"}
+    return <Card data-qa-selector={"flow-builder-trigger"}
+                 variant={"normal"}
                  color={"info"}
                  paddingSize={"xs"}
                  key={id}
diff --git a/src/packages/ce/src/function/components/suggestion/FunctionSuggestionMenuComponent.tsx b/src/packages/ce/src/function/components/suggestion/FunctionSuggestionMenuComponent.tsx
@@ -34,7 +34,7 @@ export const FunctionSuggestionMenuComponent: React.FC<FunctionSuggestionMenuCom
             {triggerContent}
         </MenuTrigger>
         <MenuPortal>
-            <InputSuggestionMenuContent align={"center"} color={"secondary"}>
+            <InputSuggestionMenuContent align={"center"} color={"secondary"} data-qa-selector={"flow-builder-suggestions"}>
                 <FunctionSuggestionSearchBarComponent onType={event => {
 
                     if (event.key === "ArrowDown") {
diff --git a/src/packages/ce/src/namespace/pages/NamespaceProjectsCreatePage.tsx b/src/packages/ce/src/namespace/pages/NamespaceProjectsCreatePage.tsx
@@ -75,13 +75,15 @@ export const NamespaceProjectsCreatePage: React.FC = () => {
                     Global runtimes are shared runtimes that can be used across multiple organizations.
                 </Text>
                 <Spacing spacing={"xl"}/>
-                <TextInput required
+                <TextInput data-qa-selector={"dashboard-namespace-project-create-name"}
+                           required
                            title={"Name"}
                            description={"Provide a simple project name"}
                            placeholder={"E.g. User management"}
                            {...inputs.getInputProps("name")}/>
                 <Spacing spacing={"xl"}/>
-                <TextInput required
+                <TextInput data-qa-selector={"dashboard-namespace-project-create-description"}
+                           required
                            title={"Description"}
                            description={"Provide a simple project description"}
                            placeholder={"E.g. Manage and authenticate users with rest routes"}
@@ -93,7 +95,7 @@ export const NamespaceProjectsCreatePage: React.FC = () => {
                             Go back to projects
                         </Button>
                     </Link>
-                    <Button color={"success"} onClick={validate}>
+                    <Button data-qa-selector={"dashboard-namespace-project-create-send"} color={"success"} onClick={validate}>
                         Create project
                     </Button>
                 </Flex>
diff --git a/src/packages/ce/src/organization/pages/OrganizationCreatePage.tsx b/src/packages/ce/src/organization/pages/OrganizationCreatePage.tsx
@@ -47,7 +47,8 @@ export const OrganizationCreatePage = () => {
                     Organizations are helpfully if managing a group of users and plenty of projects.
                 </Text>
                 <Spacing spacing={"xl"}/>
-                <TextInput required
+                <TextInput data-qa-selector={"dashboard-organization-create-name"}
+                           required
                            title={"Name"}
                            description={"Provide a simple organization name"}
                            placeholder={"E.g. CodeZero"}
@@ -59,7 +60,7 @@ export const OrganizationCreatePage = () => {
                             Go back to organizations
                         </Button>
                     </Link>
-                    <Button color={"success"} onClick={validate}>
+                    <Button data-qa-selector={"dashboard-organization-create-send"} color={"success"} onClick={validate}>
                         Create organization
                     </Button>
                 </Flex>
diff --git a/src/packages/ce/src/runtime/pages/RuntimeCreatePage.tsx b/src/packages/ce/src/runtime/pages/RuntimeCreatePage.tsx
@@ -98,13 +98,15 @@ export const RuntimeCreatePage: React.FC = () => {
                 <Spacing spacing={"xl"}/>
                 {!token ? (
                     <>
-                        <TextInput required
+                        <TextInput data-qa-selector={"dashboard-runtime-create-name"}
+                                   required
                                    title={"Name"}
                                    description={"Provide a simple runtime name"}
                                    placeholder={"E.g. CodeZero Runtime #1"}
                                    {...inputs.getInputProps("name")}/>
                         <Spacing spacing={"xl"}/>
-                        <TextInput required
+                        <TextInput data-qa-selector={"dashboard-runtime-create-description"}
+                                   required
                                    title={"Description"}
                                    description={"Provide a simple runtime description"}
                                    placeholder={"E.g. CodeZero main http runtime"}
@@ -113,7 +115,8 @@ export const RuntimeCreatePage: React.FC = () => {
                     </>
                 ) : (
                     <>
-                        <TextInput required
+                        <TextInput data-qa-selector={"dashboard-runtime-create-token"}
+                                   required
                                    title={"Copy token"}
                                    value={token}
                                    description={"This token is used to link your runtime to our internal system."}/>
@@ -127,7 +130,7 @@ export const RuntimeCreatePage: React.FC = () => {
                         </Button>
                     </Link>
                     {!token ? (
-                        <Button color={"success"} onClick={validate}>
+                        <Button data-qa-selector={"dashboard-runtime-create-send"} color={"success"} onClick={validate}>
                             Create runtime
                         </Button>
                     ) : null}
diff --git a/src/packages/ce/src/user/pages/UserEmailVerificationPage.tsx b/src/packages/ce/src/user/pages/UserEmailVerificationPage.tsx
@@ -46,9 +46,9 @@ export const UserEmailVerificationPage: React.FC = () => {
         <Text mb={1.3} size={"md"} hierarchy={"tertiary"} display={"block"}>
             Build high-class workflows, endpoints and software without coding
         </Text>
-        <TextInput placeholder={"Code"} {...inputs.getInputProps("code")}/>
+        <TextInput data-qa-selector={"auth-email-code"} placeholder={"Code"} {...inputs.getInputProps("code")}/>
         <div style={{marginBottom: "1.3rem"}}/>
-        <Button color={"info"} w={"100%"} mb={1.3} onClick={validate}>
+        <Button data-qa-selector={"auth-email-send"} color={"info"} w={"100%"} mb={1.3} onClick={validate}>
             Verify
         </Button>
         <Text display={"flex"} hierarchy={"tertiary"} size={"md"}>
diff --git a/src/packages/ce/src/user/pages/UserForgotPasswordPage.tsx b/src/packages/ce/src/user/pages/UserForgotPasswordPage.tsx
@@ -46,9 +46,9 @@ export const UserForgotPasswordPage: React.FC = () => {
         <Text mb={1.3} size={"md"} hierarchy={"tertiary"} display={"block"}>
             Build high-class workflows, endpoints and software without coding
         </Text>
-        <EmailInput placeholder={"Email"} {...inputs.getInputProps("email")}/>
+        <EmailInput data-qa-selector={"auth-password-email"} placeholder={"Email"} {...inputs.getInputProps("email")}/>
         <div style={{marginBottom: "1.3rem"}}/>
-        <Button color={"info"} w={"100%"} mb={1.3} onClick={validate}>
+        <Button data-qa-selector={"auth-password-send"} color={"info"} w={"100%"} mb={1.3} onClick={validate}>
             Send reset token
         </Button>
         <Text display={"flex"} hierarchy={"tertiary"} size={"md"}>
diff --git a/src/packages/ce/src/user/pages/UserLoginPage.tsx b/src/packages/ce/src/user/pages/UserLoginPage.tsx
@@ -94,12 +94,12 @@ export const UserLoginPage: React.FC = () => {
                 <Spacing spacing={"xl"}/>
             </>
         ) : null}
-        <EmailInput placeholder={"Email"} {...inputs.getInputProps("email")}/>
+        <EmailInput data-qa-selector={"auth-login-email"} placeholder={"Email"} {...inputs.getInputProps("email")}/>
         <div style={{marginBottom: "1.3rem"}}/>
-        <PasswordInput placeholder={"Password"}
+        <PasswordInput data-qa-selector={"auth-login-password"} placeholder={"Password"}
                        {...inputs.getInputProps("password")}/>
         <div style={{marginBottom: "1.3rem"}}/>
-        <Button color={"success"} w={"100%"} mb={1.3} onClick={validate}>
+        <Button data-qa-selector={"auth-login-send"} color={"success"} w={"100%"} mb={1.3} onClick={validate}>
             Login
         </Button>
         <Link href={`/password?${query.toString()}`}>
diff --git a/src/packages/ce/src/user/pages/UserRegistrationPage.tsx b/src/packages/ce/src/user/pages/UserRegistrationPage.tsx
@@ -86,21 +86,21 @@ export const UserRegistrationPage: React.FC = () => {
         </Text>
         <Flex style={{gap: "1.3rem"}}>
             {/**@ts-ignore**/}
-            <EmailInput wrapperComponent={{style: {flex: 1}}} placeholder={"Email"} {...inputs.getInputProps("email")}/>
+            <EmailInput data-qa-selector={"auth-register-email"} wrapperComponent={{style: {flex: 1}}} placeholder={"Email"} {...inputs.getInputProps("email")}/>
             {/**@ts-ignore**/}
-            <TextInput wrapperComponent={{style: {flex: 1}}} placeholder={"Username"}
+            <TextInput data-qa-selector={"auth-register-username"} wrapperComponent={{style: {flex: 1}}} placeholder={"Username"}
                        w={"100%"} {...inputs.getInputProps("username")}/>
         </Flex>
         <div style={{marginBottom: "1.3rem"}}/>
-        <PasswordInput placeholder={"Password"}
+        <PasswordInput data-qa-selector={"auth-register-password"} placeholder={"Password"}
                        onChange={() => validate("password")}
                        {...inputs.getInputProps("password")}/>
         <div style={{marginBottom: "1.3rem"}}/>
-        <PasswordInput placeholder={"Repeat password"}
+        <PasswordInput data-qa-selector={"auth-register-repeat-password"} placeholder={"Repeat password"}
                        onChange={() => validate("repeatPassword")}
                        {...inputs.getInputProps("repeatPassword")}/>
         <div style={{marginBottom: "1.3rem"}}/>
-        <Button color={"info"} w={"100%"} mb={1.3} onClick={validate}>
+        <Button data-qa-selector={"auth-register-send"} color={"info"} w={"100%"} mb={1.3} onClick={validate}>
             Sign up
         </Button>
         <Text display={"flex"} hierarchy={"tertiary"} size={"md"}>
diff --git a/src/packages/ce/src/user/pages/UserResetPasswordPage.tsx b/src/packages/ce/src/user/pages/UserResetPasswordPage.tsx
@@ -72,17 +72,17 @@ export const UserResetPasswordPage: React.FC = () => {
                 <Spacing spacing={"xl"}/>
             </>
         ) : null}
-        <TextInput placeholder={"Code"} {...inputs.getInputProps("code")}/>
+        <TextInput data-qa-selector={"auth-password-reset-code"} placeholder={"Code"} {...inputs.getInputProps("code")}/>
         <div style={{marginBottom: "1.3rem"}}/>
-        <PasswordInput placeholder={"Password"}
+        <PasswordInput data-qa-selector={"auth-password-reset-password"} placeholder={"Password"}
                        onChange={() => validate("password")}
                        {...inputs.getInputProps("password")}/>
         <div style={{marginBottom: "1.3rem"}}/>
-        <PasswordInput placeholder={"Repeat password"}
+        <PasswordInput data-qa-selector={"auth-password-reset-repeat-password"} placeholder={"Repeat password"}
                        onChange={() => validate("repeatPassword")}
                        {...inputs.getInputProps("repeatPassword")}/>
         <div style={{marginBottom: "1.3rem"}}/>
-        <Button color={"info"} w={"100%"} mb={1.3} onClick={validate}>
+        <Button data-qa-selector={"auth-password-reset-send"} color={"info"} w={"100%"} mb={1.3} onClick={validate}>
             Reset password
         </Button>
         <Text display={"flex"} hierarchy={"tertiary"} size={"md"}>
