[GEN-1927]: Cypress test for onboarding-flow (#1930) (#1931)

This pull request includes several changes aimed at improving the
frontend codebase and updating the Cypress end-to-end testing
configuration. The most important changes include adding unique IDs to
various components, updating Cypress configuration and tests, and
removing an outdated script.

Improvements to frontend components:

*
[`frontend/webapp/containers/main/destinations/destination-modal/choose-destination-body/destinations-list/destination-list-item/index.tsx`](diffhunk://#diff-0111152ee1a677294919adfc934717a9e3f9d1cfa99362d49660ed218f12ae18L95-R95):
Added unique IDs to `ListItem` components for better identification.
*
[`frontend/webapp/containers/main/destinations/destination-modal/choose-destination-body/destinations-list/index.tsx`](diffhunk://#diff-0fc3893b30022c16fec91cb64d38fa36de0dc4e8eabbbbb7a3b94701b45a4badL52-R52):
Updated the key for `DestinationListItem` to use `categoryItem.type`
instead of `categoryItem.displayName`.
*
[`frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-fast/sources-list/index.tsx`](diffhunk://#diff-6b67649d370d208941f4e5a78c0c9de2f5b9b65fd49e0ede8ef57066982450aaL139-R139):
Added unique IDs to `Group` components for better identification.
*
[`frontend/webapp/reuseable-components/no-data-found/index.tsx`](diffhunk://#diff-6807c50cee51d35309adcaaab02fdb295cdde0392d6d0e010c0e602a21ae244fL37-R37):
Added an ID to the `Container` component for better identification.

Updates to Cypress configuration and tests:

*
[`frontend/webapp/cypress.config.ts`](diffhunk://#diff-324fc1c28a87dedafd74a9513d1c38b2ab26e47a3c5e9a9a9e1b74dce75e0aa2R3-R9):
Set the `baseUrl` to use a variable for easier configuration.
*
[`frontend/webapp/cypress/e2e/connection.cy.ts`](diffhunk://#diff-dfc1066bf4c3d7d672402ac7c804872b2500bcdb7f9c1736628b4a7e710b0647R1-R10):
Added a new test to verify the frontend and backend connections using
GraphQL.
*
[`frontend/webapp/cypress/e2e/onboarding.cy.ts`](diffhunk://#diff-709b703b03f6676250de6b700a4d517e5d5622ad788d1f574aa2489527d77fc7L2-R26):
Updated onboarding tests to include checks for the existence of a
"default" namespace and the "Jaeger" destination.

Removal of outdated script:

*
[`tests/common/odigos_ui.sh`](diffhunk://#diff-16f3e24ddc9ddd226f571aea7b04628df0c0917d6bf2577465b0b2654c94e124L1-L125):
Removed the old script for managing the Odigos UI.

Updates to package scripts:

*
[`frontend/webapp/package.json`](diffhunk://#diff-ccf6337b0064354343f900ffd8b4ee91aa8cd014f3292548a800ad3dac39c1f4L6-R10):
Updated Cypress-related scripts and removed unnecessary build scripts.
[[1]](diffhunk://#diff-ccf6337b0064354343f900ffd8b4ee91aa8cd014f3292548a800ad3dac39c1f4L6-R10)
[[2]](diffhunk://#diff-ccf6337b0064354343f900ffd8b4ee91aa8cd014f3292548a800ad3dac39c1f4L42-R38)

Changes to end-to-end test configuration:

*
[`tests/e2e/ui/chainsaw-test.yaml`](diffhunk://#diff-755f1b6537d52a2a2e4be3c1e17d296567f0b9e43c396b3c552a8dff9851a2bbL4-R56):
Updated the test configuration to use the Odigos CLI for installing and
starting the UI, and to run Cypress tests.

frontend/webapp/.gitignore

@@ -33,4 +33,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
 .DS_Store
+*.pid
+*.log

frontend/webapp/containers/main/destinations/destination-modal/choose-destination-body/destinations-list/destination-list-item/index.tsx

@@ -92,7 +92,7 @@ export const DestinationListItem: React.FC<DestinationListItemProps> = ({ item,
   };
 
   return (
-    <ListItem onClick={() => onSelect(item)}>
+    <ListItem id={`destination-${item.type}`} onClick={() => onSelect(item)}>
       <ListItemContent>
         <DestinationIconWrapper>
           <Image src={item.imageUrl} width={20} height={20} alt='destination' />

frontend/webapp/containers/main/destinations/destination-modal/choose-destination-body/destinations-list/index.tsx

@@ -49,7 +49,7 @@ const DestinationsList: React.FC<DestinationsListProps> = ({ items, setSelectedI
         <ListsWrapper key={`category-${item.name}`}>
           <SectionTitle size='small' title={capitalizeFirstLetter(item.name)} description={item.description} />
           {item.items.map((categoryItem) => (
-            <DestinationListItem key={`destination-${categoryItem.displayName}`} item={categoryItem} onSelect={setSelectedItems} />
+            <DestinationListItem key={`destination-${categoryItem.type}`} item={categoryItem} onSelect={setSelectedItems} />
           ))}
         </ListsWrapper>
       );

frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-fast/sources-list/index.tsx

@@ -136,7 +136,7 @@ export const SourcesList: React.FC<Props> = ({
         const hasFilteredSources = !!filtered.length;
 
         return (
-          <Group key={`namespace-${namespace}`} $selected={isNamespaceAllSourcesSelected} $isOpen={isNamespaceSelected && hasFilteredSources}>
+          <Group id={`namespace-${namespace}`} key={`namespace-${namespace}`} $selected={isNamespaceAllSourcesSelected} $isOpen={isNamespaceSelected && hasFilteredSources}>
             <NamespaceItem $selected={isNamespaceAllSourcesSelected} onClick={() => onSelectNamespace(namespace)}>
               <FlexRow>
                 <Checkbox disabled={namespaceLoaded && !isNamespaceCanSelect} initialValue={isNamespaceAllSourcesSelected} onChange={(bool) => onSelectAll(bool, namespace)} />

frontend/webapp/cypress.config.ts

@@ -1,10 +1,12 @@
 import Cypress from 'cypress';
 
+const PORT = 3000;
+const BASE_URL = `http://localhost:${PORT}`;
+
 const config: Cypress.ConfigOptions = {
   e2e: {
-    // this uses the "production" build, if you want to use the "development" build, you can use "port=3000" instead
-    baseUrl: 'http://localhost:3001',
     setupNodeEvents(on, config) {},
+    baseUrl: BASE_URL,
     supportFile: false,
     waitForAnimations: true,
   },

frontend/webapp/cypress/e2e/01-connection.cy.ts

@@ -0,0 +1,13 @@
+describe('Root Connection', () => {
+  it('Should fetch a config with GraphQL. A redirect of any kind confirms Frontend + Backend connections.', () => {
+    cy.intercept('/graphql').as('gql');
+    cy.visit('/');
+
+    cy.wait('@gql').then(() => {
+      cy.location().should((loc) => {
+        // If GraphQL failed to fetch the config, the app will remain on "/", thereby failing the test.
+        expect(loc.pathname).to.be.oneOf(['/choose-sources', '/overview']);
+      });
+    });
+  });
+});

frontend/webapp/cypress/e2e/02-onboarding.cy.ts

@@ -0,0 +1,43 @@
+import { ROUTES } from '../../utils/constants/routes';
+
+describe('Onboarding', () => {
+  it('Should contain at least a "default" namespace', () => {
+    cy.intercept('/graphql').as('gql');
+    cy.visit(ROUTES.CHOOSE_SOURCES);
+
+    cy.wait('@gql').then(() => {
+      expect('#namespace-default').to.exist;
+    });
+  });
+
+  it('Should contain at least a "Jaeger" destination', () => {
+    cy.intercept('/graphql').as('gql');
+    cy.visit(ROUTES.CHOOSE_DESTINATION);
+
+    cy.wait('@gql').then(() => {
+      cy.contains('button', 'ADD DESTINATION').click();
+      expect('#destination-jaeger').to.exist;
+    });
+  });
+
+  it('Should autocomplete the "Jaeger" destination', () => {
+    cy.intercept('/graphql').as('gql');
+    cy.visit(ROUTES.CHOOSE_DESTINATION);
+
+    cy.wait('@gql').then(() => {
+      cy.contains('button', 'ADD DESTINATION').click();
+      cy.get('#destination-jaeger').click();
+      expect('#JAEGER_URL').to.not.be.empty;
+    });
+  });
+
+  it('Should allow the user to pass every step, and end-up on the "Overview" page.', () => {
+    cy.visit(ROUTES.CHOOSE_SOURCES);
+
+    cy.contains('button', 'NEXT').click();
+    cy.location('pathname').should('eq', ROUTES.CHOOSE_DESTINATION);
+
+    cy.contains('button', 'DONE').click();
+    cy.location('pathname').should('eq', ROUTES.OVERVIEW);
+  });
+});

frontend/webapp/package.json

@@ -3,15 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "back:build": "cd .. && go build -o ./odigos-backend",
-    "back:start": "cd .. && ./odigos-backend --port 8085 --debug --address 0.0.0.0",
-    "predev": "rm -rf .next",
     "dev": "next dev",
-    "prebuild": "rm -rf out",
     "build": "next build",
     "start": "next start",
     "lint": "next lint --fix",
-    "cy": "cypress run --e2e -q",
+    "cy:run": "cypress run --e2e -q",
     "cy:open": "cypress open --e2e -b electron"
   },
   "dependencies": {
@@ -34,11 +30,10 @@
     "@types/react-dom": "18.3.1",
     "autoprefixer": "^10.4.20",
     "babel-plugin-styled-components": "^2.1.4",
-    "cypress": "^13.16.0",
+    "cypress": "^13.16.1",
     "eslint": "9.15.0",
     "eslint-config-next": "15.0.3",
     "postcss": "^8.4.49",
     "typescript": "5.6.3"
-  },
-  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  }
 }

frontend/webapp/reuseable-components/input/index.tsx

@@ -115,7 +115,7 @@ const Button = styled.button`
 
 // Wrap Input with forwardRef to handle the ref prop
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ icon, buttonLabel, onButtonClick, hasError, errorMessage, title, tooltip, required, initialValue, onChange, type = 'text', ...props }, ref) => {
+  ({ icon, buttonLabel, onButtonClick, hasError, errorMessage, title, tooltip, required, initialValue, onChange, type = 'text', name, ...props }, ref) => {
     const isSecret = type === 'password';
     const [revealSecret, setRevealSecret] = useState(false);
     const [value, setValue] = useState<string>(initialValue || '');
@@ -144,6 +144,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
 
           <StyledInput
             ref={ref} // Pass ref to the StyledInput
+            id={name}
+            name={name}
             $hasIcon={!!icon || isSecret}
             value={value}
             onChange={handleInputChange}

frontend/webapp/reuseable-components/no-data-found/index.tsx

@@ -34,7 +34,7 @@ const Container = styled.div`
 
 const NoDataFound: React.FC<NoDataFoundProps> = ({ title = 'No data found', subTitle = 'Check your search phrase and try one more time' }) => {
   return (
-    <Container>
+    <Container id='no-data'>
       <TitleWrapper>
         <Image src='/icons/common/no-data-found.svg' alt='no-found' width={16} height={16} />
         <Title>{title}</Title>

frontend/webapp/reuseable-components/textarea/index.tsx

@@ -79,7 +79,7 @@ const StyledTextArea = styled.textarea`
   }
 `;
 
-const TextArea: React.FC<TextAreaProps> = ({ errorMessage, title, tooltip, required, onChange, ...props }) => {
+const TextArea: React.FC<TextAreaProps> = ({ errorMessage, title, tooltip, required, onChange, name, ...props }) => {
   const ref = useRef<HTMLTextAreaElement>(null);
 
   const resize = () => {
@@ -97,6 +97,8 @@ const TextArea: React.FC<TextAreaProps> = ({ errorMessage, title, tooltip, requi
       <InputWrapper $disabled={props.disabled} $hasError={!!errorMessage} $isActive={!!props.autoFocus}>
         <StyledTextArea
           ref={ref}
+          id={name}
+          name={name}
           onFocus={resize}
           onBlur={resize}
           onChange={(e) => {

frontend/webapp/yarn.lock

@@ -3123,10 +3123,10 @@ [email protected], csstype@^3.0.2, csstype@^3.1.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
-cypress@^13.16.0:
-  version "13.16.0"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.16.0.tgz#7674ca33941f9da58f15fd4e3456856d87730970"
-  integrity sha512-g6XcwqnvzXrqiBQR/5gN+QsyRmKRhls1y5E42fyOvsmU7JuY+wM6uHJWj4ZPttjabzbnRvxcik2WemR8+xT6FA==
+cypress@^13.16.1:
+  version "13.16.1"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.16.1.tgz#82e776f6ad2037ccce6b6feabed768615c476258"
+  integrity sha512-17FtCaz0cx7ssWYKXzGB0Vub8xHwpVPr+iPt2fHhLMDhVAPVrplD+rTQsZUsfb19LVBn5iwkEUFjQ1yVVJXsLA==
   dependencies:
     "@cypress/request" "^3.0.6"
     "@cypress/xvfb" "^1.2.4"