ui: Review tests following to solutions navbar integration

Refs: #3104

eve/main.yml

@@ -1176,6 +1176,9 @@ stages:
         application:
           context: 'ui'
           dockerfile: eve/workers/pod-integration-tests/ui/app.Dockerfile
+        shell-ui:
+          context: 'shell-ui'
+          dockerfile: eve/workers/pod-integration-tests/ui/shell-ui.Dockerfile
     steps:
       - Git: *git_pull
       - ShellCommand:
@@ -1189,7 +1192,7 @@ stages:
           name: Install Cypress and its dependencies
           workdir: build/ui
           command: |
-            PKGS="cypress cypress-cucumber-preprocessor cypress-wait-until"
+            PKGS="cypress cypress-cucumber-preprocessor cypress-wait-until @testing-library/cypress"
             for pkg in $PKGS; do
               npm install --no-save --no-package-lock $pkg@$(node -p \
                 -e "require('./package-lock.json').dependencies['$pkg'].version" \

eve/workers/pod-integration-tests/ui/pod.yaml

@@ -3,6 +3,39 @@ kind: Pod
 metadata:
   name: "metalk8s-integration-tests-ui"
 spec:
+  initContainers:
+  - name: shell-ui
+    image: {{ images['shell-ui'] }}
+    resources:
+      requests:
+        cpu: 250m
+        memory: 200Mi
+      limits:
+        cpu: 350m
+        memory: 300Mi
+    command: ["/bin/sh"]
+    args: 
+      - -c
+      - |
+        mkdir -p /etc/metalk8s/shell-ui
+        cat > /etc/metalk8s/shell-ui/config.json <<EOF
+        {
+          "docUrl": "/docs",
+          "oidc": {
+            "providerUrl": "/oidc",
+            "redirectUrl": "/",
+            "clientId": "metalk8s-ui",
+            "responseType": "id_token",
+            "scopes": "openid profile email groups offline_access audience:server:client_id:oidc-auth-client"
+          }
+        }
+        EOF
+        cd /usr/share/nginx/html
+        /entrypoint.sh echo 'entrypoint'
+        cp -r /usr/share/nginx/html/ /tmp/shell-ui-files
+    volumeMounts:
+      - name: shell-ui-files
+        mountPath: /tmp/shell-ui-files
   containers:
   - name: worker
     image: {{ images['worker'] }}
@@ -18,6 +51,9 @@ spec:
     volumeMounts:
       - name: worker-workspace
         mountPath: /home/eve/workspace
+      - name: debug
+        mountPath: /tmp/debug
+
   - name: application
     image: {{ images['application'] }}
     resources:
@@ -27,12 +63,25 @@ spec:
       limits:
         cpu: 350m
         memory: 300Mi
-    command: ["nginx"]
-    args: ["-g", "daemon off;"]
+    command: ["/bin/sh"]
+    args: 
+      - -c
+      - |
+        cp -r /tmp/shell-ui-files/ /usr/share/nginx/html/
+        nginx -g 'daemon off;' 2>&1 > /tmp/debug/nginx.logs
     ports:
     - containerPort: 80
       name: http
       protocol: TCP
+    volumeMounts:
+      - name: shell-ui-files
+        mountPath: /tmp/shell-ui-files
+      - name: debug
+        mountPath: /tmp/debug
   volumes:
+    - name: debug
+      emptyDir: {}
     - name: worker-workspace
       emptyDir: {}
+    - name: shell-ui-files
+      emptyDir: {}

eve/workers/pod-integration-tests/ui/shell-ui.Dockerfile

@@ -0,0 +1,48 @@
+FROM centos:7
+
+ENV LANG=en_US.utf8
+
+RUN curl -sL https://rpm.nodesource.com/setup_12.x | bash -
+RUN yum install -y --setopt=skip_missing_names_on_install=False \
+        epel-release \
+        && \
+    yum install -y --setopt=skip_missing_names_on_install=False \
+        git \
+        nginx \
+        nodejs
+
+COPY shell-ui-docker-entrypoint.sh /docker-entrypoint.sh
+RUN chmod +x /docker-entrypoint.sh
+
+COPY entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
+
+ENTRYPOINT [ "/entrypoint.sh" ]
+
+COPY conf/nginx.conf /etc/nginx/conf.d/default.conf
+RUN rm -rf /usr/share/nginx/html/*
+
+# UI build (cannot use build stages for now) {{{
+
+RUN adduser -u 1000 --home /home/node node
+
+USER node
+WORKDIR /home/node
+
+COPY package.json package-lock.json /home/node/
+
+RUN npm ci
+
+COPY webpack.*.js babel.config.js .flowconfig /home/node/
+COPY src /home/node/src/
+
+RUN npm run build
+
+USER root
+
+# }}}
+
+RUN mkdir -p /usr/share/nginx/html/shell
+RUN cp -r dist/* /usr/share/nginx/html/shell
+
+CMD ["nginx", "-g", "daemon off;"]

shell-ui/shell-ui-docker-entrypoint.sh

@@ -0,0 +1,2 @@
+#!/bin/sh
+exec "$@"

ui/cypress/fixtures/config.json

@@ -4,7 +4,7 @@
     "url_prometheus": "/api/prometheus",
     "url_grafana": "/grafana",
     "url_oidc_provider": "/oidc",
-    "url_redirect": "/oauth2/callback",
+    "url_redirect": "/",
     "url_doc": "/docs",
     "url_alertmanager": "/api/alertmanager"
-}
+}

ui/cypress/integration/e2e/common/login.js

@@ -12,7 +12,7 @@ Given('I am logged in', () => {
   cy.location('pathname').should('eq', '/oidc/auth');
 
   //click "Login with email" button when DEX "alwaysShowLoginScreen" is true
-  cy.get('.theme-form-row button').click();
+  cy.findByText(/Log in with Email/i).click();
 
   const email = Cypress.env('email');
   const userName = Cypress.env('username');
@@ -24,7 +24,7 @@ Given('I am logged in', () => {
   cy.get('button').click();
 
   //Check if the login is successfull and we going back to the UI
-  cy.location('pathname').should('eq', '/oauth2/callback');
+  cy.location('pathname').should('eq', '/');
   cy.server();
   cy.route('POST', '/api/salt/login').as('saltAuthentication');
   const timeOut = {
@@ -33,16 +33,18 @@ Given('I am logged in', () => {
   };
   cy.wait('@saltAuthentication', timeOut);
 
-  cy.get('[data-cy="user_dropdown"] .trigger > .sc-trigger-text').should(
+  cy.findByRole('navigation').should(
     'contain',
     userName,
   );
 });
 
 Then('I log out', () => {
-  cy.get('[data-cy="user_dropdown"] .trigger > .sc-trigger-text').click();
-  cy.get('[data-cy="logout_button"]').click();
-
+  const userName = Cypress.env('username');
+  cy.findByRole('navigation').within(() => {
+    cy.findByText(userName).click();
+    cy.findByText(/log out/i).click();
+  })
   //Check if we are redirected to the DEX login page
   cy.location('pathname').should('eq', '/oidc/auth');
 });

ui/cypress/support/commands.js

@@ -24,6 +24,8 @@
 // -- This is will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
 import 'cypress-wait-until';
+import '@testing-library/cypress/add-commands'
+
 
 import {
   EMPTY_QUERY_RANGE_RESULT,

ui/cypress/support/index.js

@@ -15,6 +15,14 @@
 
 import './commands';
 
+beforeEach(() =>{
+  // TODO figure out why CI is raising "clearImmediate is not defined" whereas everything goes well locally
+  window.clearImmediate = {};
+  cy.window().then((win) => {
+    win.clearImmediate = {};
+  });
+})
+
 afterEach(() => {
   // Redirect to empty page to cancel all requests in progress
   cy.window().then((win) => {

ui/package.json

@@ -75,6 +75,7 @@
     "@babel/plugin-proposal-optional-chaining": "^7.2.0",
     "@babel/preset-flow": "^7.0.0",
     "@redux-saga/testing-utils": "^1.0.2",
+    "@testing-library/cypress": "^7.0.3",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.3",
     "@testing-library/react-hooks": "^3.4.2",