chore: import keycloak-js

Makefile

@@ -1,7 +1,7 @@
 # upstream
 CI_BUILD_TAG ?= lagoon-ui
 CORE_REPO=https://github.com/uselagoon/lagoon.git
-CORE_TREEISH=main
+CORE_TREEISH=keycloak-26
 CYPRESS_BASE=cypress/base:20.13.1
 
 LAGOON_CORE_IMAGE_REPO=testlagoon
@@ -15,6 +15,15 @@ yarn-start-ui:
     && yarn build \
     && yarn start \
 
+.PHONY: start
+start:
+	export GRAPHQL_API=http://localhost:3000/graphql \
+	&& export KEYCLOAK_API=http://localhost:8088/auth \
+	&& export NODE_ENV=production \
+	&& export NODE_PORT=3003 \
+	&& export LAGOON_UI_TOURS_ENABLED=disabled \
+	&& docker compose -p $(CI_BUILD_TAG) --compatibility up --build -d ui
+
 # run-cypress:
 .PHONY: start-ui
 start-ui: development-api
@@ -59,4 +68,18 @@ development-api-down:
 .PHONY: down
 down:
 	$(MAKE) development-api-down
-	docker compose -p $(CI_BUILD_TAG) --compatibility down -v --remove-orphans
+	docker compose -p $(CI_BUILD_TAG) --compatibility down -v --remove-orphans
+
+.PHONY: local-dev-yarn
+local-dev-yarn:
+	$(MAKE) local-dev-yarn-stop
+	docker run --name local-dev-yarn -d -v ${PWD}:/app uselagoon/node-20-builder
+	docker exec local-dev-yarn bash -c "yarn install --frozen-lockfile"
+	docker exec local-dev-yarn bash -c "yarn build"
+	docker exec -it local-dev-yarn bash
+	$(MAKE) local-dev-yarn-stop
+
+.PHONY: local-dev-yarn-stop
+local-dev-yarn-stop:
+	docker stop local-dev-yarn || true
+	docker rm local-dev-yarn || true

cypress/e2e/organizations/groups.cy.ts

@@ -13,25 +13,31 @@ describe('Organization Groups page', () => {
       aliasMutation(req, 'addGroupToOrganization');
     });
     registerIdleHandler('groupQuery');
+    registerIdleHandler('idle');
 
     cy.login(Cypress.env('user_platformowner'), Cypress.env('user_platformowner'));
     cy.visit(`${Cypress.env('url')}/organizations/lagoon-demo-organization/groups`);
   });
 
   it('Adds a group', () => {
+    cy.waitForNetworkIdle('@idle', 1000);
     group.doAddGroup(testData.organizations.groups.newGroupName, testData.organizations.groups.newGroupName2);
   });
 
   it('Searches groups', () => {
+    cy.waitForNetworkIdle('@idle', 1000);
     group.doGroupSearch(testData.organizations.groups.newGroupName, testData.organizations.groups.newGroupName2);
   });
 
   it('Adds a member to a group', () => {
+    cy.waitForNetworkIdle('@idle', 1000);
     group.doAddMemberToGroup(testData.organizations.users.email, testData.organizations.groups.newGroupName);
   });
 
   it('Deletes groups', () => {
+    cy.waitForNetworkIdle('@idle', 1000);
     group.doDeleteGroup(testData.organizations.groups.newGroupName);
+    cy.waitForNetworkIdle('@idle', 1000);
     group.doDeleteGroup(testData.organizations.groups.newGroupName2);
   });
 });

cypress/e2e/organizations/notifications.cy.ts

@@ -22,29 +22,34 @@ describe('Org Notifications page', () => {
   });
 
   it('Adds Slack notification', () => {
+    cy.waitForNetworkIdle('@idle', 1000);
     const slackData = testData.organizations.notifications.slack;
 
     notifications.doAddNotification('slack', slackData);
   });
   it('Adds Rocketchat notification', () => {
+    cy.waitForNetworkIdle('@idle', 1000);
     const rocketData = testData.organizations.notifications.rocketChat;
     notifications.doAddNotification('rocketChat', rocketData);
   });
   it('Adds Teams notification', () => {
+    cy.waitForNetworkIdle('@idle', 1000);
     const teamsData = testData.organizations.notifications.teams;
     notifications.doAddNotification('teams', teamsData);
   });
   it('Adds Email notification', () => {
+    cy.waitForNetworkIdle('@idle', 1000);
     const emailData = testData.organizations.notifications.email;
     notifications.doAddNotification('email', emailData);
   });
   it('Adds Webhook notification', () => {
+    cy.waitForNetworkIdle('@idle', 1000);
     const webhookData = testData.organizations.notifications.webhook;
     notifications.doAddNotification('webhook', webhookData);
   });
 
   it('Edits notification', () => {
-    cy.waitForNetworkIdle('@idle', 500);
+    cy.waitForNetworkIdle('@idle', 1000);
     notifications.doEditNotification();
   });
 
@@ -57,15 +62,16 @@ describe('Org Notifications page', () => {
       slack: { name: slackName },
     } = testData.organizations.notifications;
 
-    cy.waitForNetworkIdle('@idle', 500);
+    cy.waitForNetworkIdle('@idle', 1000);
     notifications.doDeleteNotification(webhooknName);
-    cy.waitForNetworkIdle('@idle', 500);
+    cy.waitForNetworkIdle('@idle', 1000);
     notifications.doDeleteNotification(emailName);
-    cy.waitForNetworkIdle('@idle', 500);
+    cy.waitForNetworkIdle('@idle', 1000);
     notifications.doDeleteNotification(teamsName);
-    cy.waitForNetworkIdle('@idle', 500);
+    cy.waitForNetworkIdle('@idle', 1000);
     notifications.doDeleteNotification(rocketChatName);
-    cy.waitForNetworkIdle('@idle', 500);
+    cy.waitForNetworkIdle('@idle', 1000);
     notifications.doDeleteNotification(slackName);
+    cy.waitForNetworkIdle('@idle', 1000);
   });
 });

cypress/e2e/organizations/users.cy.ts

@@ -10,34 +10,41 @@ describe('Org Users page', () => {
   beforeEach(() => {
     cy.login(Cypress.env('user_platformowner'), Cypress.env('user_platformowner'));
     cy.visit(`${Cypress.env('url')}/organizations/lagoon-demo-organization/users`);
+    registerIdleHandler('idle');
+    cy.waitForNetworkIdle('@idle', 1000);
 
     cy.intercept('POST', Cypress.env('api'), req => {
       aliasQuery(req, 'getOrganization');
       aliasMutation(req, 'addUserToGroup');
       aliasMutation(req, 'removeUserFromGroup');
       aliasMutation(req, 'addGroupToOrganization');
     });
-    registerIdleHandler('idle');
+    cy.waitForNetworkIdle('@idle', 1000);
   });
 
   it('Creates a group', () => {
     cy.visit(`${Cypress.env('url')}/organizations/lagoon-demo-organization/groups`);
+    cy.waitForNetworkIdle('@idle', 1000);
     group.doAddGroup(testData.organizations.groups.newGroupName, testData.organizations.groups.newGroupName2);
   });
 
   it('Adds a user to the group', () => {
+    cy.waitForNetworkIdle('@idle', 1000);
     users.doAddUser(testData.organizations.users.email);
   });
 
   it('Deletes user', () => {
-    cy.waitForNetworkIdle('@idle', 500);
+    cy.waitForNetworkIdle('@idle', 1000);
     users.doDeleteUser(testData.organizations.users.email);
   });
 
   after(() => {
+    cy.waitForNetworkIdle('@idle', 1000);
     cy.visit(`${Cypress.env('url')}/organizations/lagoon-demo-organization/groups`);
+    cy.waitForNetworkIdle('@idle', 1000);
     registerIdleHandler('groupQuery');
     group.doDeleteGroup(testData.organizations.groups.newGroupName);
+    cy.waitForNetworkIdle('@idle', 1000);
     group.doDeleteGroup(testData.organizations.groups.newGroupName2);
   });
 });

cypress/e2e/rbac/maintainer.cy.ts

@@ -108,9 +108,7 @@ describe('MAINTAINER permission test suites', () => {
 
       variable.doDeleteVariable(name);
 
-      cy.intercept('POST', Cypress.env('api')).as('deleteRequest');
-
-      cy.wait('@deleteRequest');
+      cy.waitForNetworkIdle('@idle', 500);
 
       cy.contains('No Project variables set').should('exist');
     });

cypress/e2e/rbac/organizations/orgAdmin.cy.ts

@@ -101,6 +101,7 @@ orgAdmin.forEach(admin => {
     });
 
     it('Navigates to a project, adds a group and notifications', () => {
+      cy.waitForNetworkIdle('@idle', 1000);
       cy.visit(
         `${Cypress.env('url')}/organizations/lagoon-demo-organization/projects/${
           testData.organizations.project.projectName

cypress/e2e/rbac/organizations/orgViewer.cy.ts

@@ -62,7 +62,7 @@ describe(`Organizations ORGVIEWER journey`, () => {
     project.doFailedaddProject(testData.organizations.project);
   });
 
-  it('Navigates to notifications and fails to create any - no permission for ORVIEWER', () => {
+  it('Navigates to notifications and fails to create any - no permission for ORGVIEWER', () => {
     cy.intercept('POST', Cypress.env('api'), req => {
       aliasMutation(req, 'addNotificationSlack');
       aliasMutation(req, 'UpdateNotificationSlack');
@@ -91,6 +91,7 @@ describe(`Organizations ORGVIEWER journey`, () => {
   });
 
   it('Navigates to a project, fails to add a group or notifications - no permission for ORGVIEWER', () => {
+    cy.waitForNetworkIdle('@idle', 1000);
     cy.visit(`${Cypress.env('url')}/organizations/lagoon-demo-organization/projects/lagoon-demo-org`);
 
     cy.getBySel('addGroupToProject').click();

cypress/e2e/rbac/organizations/platformAndOrgOwnerJourney.cy.ts

@@ -102,6 +102,7 @@ orgownerAndPlatformOwner.forEach(owner => {
     });
 
     it('Navigates to a project, adds a group and notifications', () => {
+      cy.waitForNetworkIdle('@idle', 1000);
       cy.visit(
         `${Cypress.env('url')}/organizations/lagoon-demo-organization/projects/${
           testData.organizations.project.projectName
@@ -141,6 +142,8 @@ orgownerAndPlatformOwner.forEach(owner => {
       group.doDeleteGroup(testData.organizations.groups.newGroupName);
       cy.wait('@gqldeleteGroupMutation');
 
+      cy.waitForNetworkIdle('@idle', 500);
+
       group.doDeleteGroup(testData.organizations.groups.newGroupName2);
       cy.wait('@gqldeleteGroupMutation');
 

cypress/support/actions/organizations/GroupsAction.ts

@@ -6,9 +6,11 @@ export default class GroupAction {
   doAddGroup(newGroup1: string, newGroup2: string) {
     groupRepo.getAddGroupBtn('addNewGroup').click();
     groupRepo.getGroupNameInput().type(newGroup1);
+    cy.waitForNetworkIdle('@idle', 1000);
     groupRepo.getAddGroupSubmitBtn().click();
 
     cy.wait(['@gqladdGroupToOrganizationMutation', '@gqlgetOrganizationQuery']);
+    cy.waitForNetworkIdle('@idle', 1000);
     cy.getBySel('table-row').should('contain', newGroup1);
 
     cy.log('Add another');
@@ -19,6 +21,7 @@ export default class GroupAction {
     groupRepo.getAddGroupSubmitBtn().click();
 
     cy.wait(['@gqladdGroupToOrganizationMutation', '@gqlgetOrganizationQuery']);
+    cy.waitForNetworkIdle('@idle', 1000);
 
     cy.getBySel('table-row').should('contain', newGroup2);
   }
@@ -76,9 +79,7 @@ export default class GroupAction {
     groupRepo.getDeleteGroupBtn('deleteGroup').first().click();
     cy.getBySel('confirm').click();
 
-    cy.intercept('POST', Cypress.env('api')).as('deleteGroup');
-    cy.wait('@deleteGroup');
-    cy.waitForNetworkIdle('@groupQuery', 500);
+    cy.waitForNetworkIdle('@idle', 1000);
 
     cy.getBySel('label-text').each($span => {
       const text = $span.text();

cypress/support/actions/organizations/NotificationsAction.ts

@@ -56,6 +56,7 @@ export default class NotificationsAction {
     cy.getBySel('addNotifBtn').click();
 
     cy.wait(`@gqladdNotification${getMutationName(notifType)}Mutation`);
+    cy.waitForNetworkIdle('@idle', 1000);
 
     // notification name
     cy.getBySel('notification-row').should('include.text', notificationData.name);

package.json

@@ -56,6 +56,7 @@
     "graphql": "^16.8.1",
     "graphql-tag": "^2.10.0",
     "isomorphic-unfetch": "^4.0.2",
+    "keycloak-js": "^26.0.7",
     "moment": "^2.22.2",
     "moment-duration-format": "^2.2.2",
     "next": "^14.2.2",

src/lib/withKeycloak.js

@@ -2,6 +2,7 @@ import React from 'react';
 
 import getConfig from 'next/config';
 
+import Keycloak from 'keycloak-js';
 import { queryStringToObject } from 'lib/util';
 
 const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();

src/pages/_document.js

@@ -50,7 +50,6 @@ class MyDocument extends Document {
     return (
       <Html>
         <Head>
-          <Script src={`${publicRuntimeConfig.KEYCLOAK_API}/js/keycloak.js`} strategy="beforeInteractive" />
           <Plugins hook="head" />
         </Head>
         <body>

yarn.lock

@@ -10279,6 +10279,11 @@ jsprim@^2.0.2:
     object.assign "^4.1.4"
     object.values "^1.1.6"
 
+keycloak-js@^26.0.7:
+  version "26.0.7"
+  resolved "https://registry.yarnpkg.com/keycloak-js/-/keycloak-js-26.0.7.tgz#2025256f7c519df654240648052ea06344e2377e"
+  integrity sha512-vKCk1ISMiouYRLjMzi5fKp58RnYxKEBS29BoDgVfYwVW94IXchj9jLqBvIet31VD1v79l3WaWT+WMX7fH8O4wA==
+
 keyv@^4.5.3:
   version "4.5.4"
   resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"