Change: Apollo Client update

.storybook/decorators/ApiConnection.js

@@ -1,13 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { ApolloProvider } from 'react-apollo';
 
 import getConfig from 'next/config';
 
-import { ApolloProvider as ApolloHooksProvider } from '@apollo/react-hooks';
+import { ApolloClient, ApolloProvider, InMemoryCache, createHttpLink } from '@apollo/client';
 import { action } from '@storybook/addon-actions';
-import { InMemoryCache } from 'apollo-cache-inmemory';
-import { ApolloClient } from 'apollo-client';
-import { createHttpLink } from 'apollo-link-http';
 
 import { AuthContext } from '../../src/lib/Authenticator';
 
@@ -64,9 +60,7 @@ const withMockAuth = Story => {
   return (
     <AuthContext.Provider value={auth}>
       <ApolloProvider client={client}>
-        <ApolloHooksProvider client={client}>
-          <Story />
-        </ApolloHooksProvider>
+        <Story />
       </ApolloProvider>
     </AuthContext.Provider>
   );

cypress/e2e/rbac/developer.cy.ts

@@ -8,7 +8,7 @@ import SettingAction from 'cypress/support/actions/settings/SettingsAction';
 import TaskAction from 'cypress/support/actions/task/TaskAction';
 import TasksAction from 'cypress/support/actions/tasks/TasksAction';
 import VariablesAction from 'cypress/support/actions/variables/VariablesAction';
-import { aliasMutation, registerIdleHandler } from 'cypress/utils/aliasQuery';
+import { aliasMutation, aliasQuery, registerIdleHandler } from 'cypress/utils/aliasQuery';
 
 const project = new ProjectAction();
 
@@ -71,21 +71,20 @@ describe('DEVELOPER permission test suites', () => {
     it('Fails to add a variable - no permission for DEVELOPER', () => {
       cy.visit(`${Cypress.env('url')}/projects/lagoon-demo/project-variables`);
 
+      registerIdleHandler('idle');
+      cy.waitForNetworkIdle('@idle', 500);
       cy.intercept('POST', Cypress.env('api'), req => {
-        aliasMutation(req, 'addEnvVariable');
+        aliasQuery(req, 'getProject');
       });
-      registerIdleHandler('idle');
 
       const { name, value } = testData.variables[0];
 
-      cy.waitForNetworkIdle('@idle', 500);
-
-      variable.doAddVariable(name, value);
+      variable.doAddVariable(name, value, 'developer');
 
-      cy.wait('@gqladdEnvVariableMutation').then(interception => {
+      cy.wait('@gqlgetProjectQuery').then(interception => {
         expect(interception.response?.statusCode).to.eq(200);
 
-        const errorMessage = 'Unauthorized: You don\'t have permission to "project:add" on "env_var"';
+        const errorMessage = 'Unauthorized: You don\'t have permission to "project:viewValue" on "env_var"';
         expect(interception.response?.body).to.have.property('errors');
 
         cy.wrap(interception.response?.body.errors[0]).should('deep.include', { message: errorMessage });

cypress/e2e/rbac/guest.cy.ts

@@ -8,7 +8,7 @@ import SettingAction from 'cypress/support/actions/settings/SettingsAction';
 import TaskAction from 'cypress/support/actions/task/TaskAction';
 import TasksAction from 'cypress/support/actions/tasks/TasksAction';
 import VariablesAction from 'cypress/support/actions/variables/VariablesAction';
-import { aliasMutation, registerIdleHandler } from 'cypress/utils/aliasQuery';
+import { aliasMutation, aliasQuery, registerIdleHandler } from 'cypress/utils/aliasQuery';
 
 const project = new ProjectAction();
 
@@ -71,21 +71,19 @@ describe('GUEST permission test suites', () => {
       cy.visit(`${Cypress.env('url')}/projects/lagoon-demo/project-variables`);
 
       registerIdleHandler('idle');
-
+      cy.waitForNetworkIdle('@idle', 500);
       cy.intercept('POST', Cypress.env('api'), req => {
-        aliasMutation(req, 'addEnvVariable');
+        aliasQuery(req, 'getProject');
       });
 
       const { name, value } = testData.variables[0];
 
-      cy.waitForNetworkIdle('@idle', 500);
-
-      variable.doAddVariable(name, value);
+      variable.doAddVariable(name, value, 'guest');
 
-      cy.wait('@gqladdEnvVariableMutation').then(interception => {
+      cy.wait('@gqlgetProjectQuery').then(interception => {
         expect(interception.response?.statusCode).to.eq(200);
 
-        const errorMessage = 'Unauthorized: You don\'t have permission to "project:add" on "env_var"';
+        const errorMessage = 'Unauthorized: You don\'t have permission to "project:viewValue" on "env_var"';
         expect(interception.response?.body).to.have.property('errors');
 
         cy.wrap(interception.response?.body.errors[0]).should('deep.include', { message: errorMessage });
@@ -181,7 +179,7 @@ describe('GUEST permission test suites', () => {
 
       cy.waitForNetworkIdle('@idle', 500);
 
-      const errMessage = 'Error: GraphQL error: Unauthorized: You don\'t have permission to "view" on "backup"';
+      const errMessage = 'ApolloError: Unauthorized: You don\'t have permission to "view" on "backup"';
 
       cy.get('main').should('exist').find('p').should('exist').and('have.text', errMessage);
     });

cypress/e2e/rbac/reporter.cy.ts

@@ -7,7 +7,7 @@ import SettingAction from 'cypress/support/actions/settings/SettingsAction';
 import TaskAction from 'cypress/support/actions/task/TaskAction';
 import TasksAction from 'cypress/support/actions/tasks/TasksAction';
 import VariablesAction from 'cypress/support/actions/variables/VariablesAction';
-import { aliasMutation, registerIdleHandler } from 'cypress/utils/aliasQuery';
+import { aliasMutation, aliasQuery, registerIdleHandler } from 'cypress/utils/aliasQuery';
 
 const project = new ProjectAction();
 
@@ -68,21 +68,19 @@ describe('REPORTER permission test suites', () => {
       cy.visit(`${Cypress.env('url')}/projects/lagoon-demo/project-variables`);
 
       registerIdleHandler('idle');
-
+      cy.waitForNetworkIdle('@idle', 500);
       cy.intercept('POST', Cypress.env('api'), req => {
-        aliasMutation(req, 'addEnvVariable');
+        aliasQuery(req, 'getProject');
       });
 
       const { name, value } = testData.variables[0];
 
-      cy.waitForNetworkIdle('@idle', 500);
-
-      variable.doAddVariable(name, value);
+      variable.doAddVariable(name, value, 'reporter');
 
-      cy.wait('@gqladdEnvVariableMutation').then(interception => {
+      cy.wait('@gqlgetProjectQuery').then(interception => {
         expect(interception.response?.statusCode).to.eq(200);
 
-        const errorMessage = 'Unauthorized: You don\'t have permission to "project:add" on "env_var"';
+        const errorMessage = 'Unauthorized: You don\'t have permission to "project:viewValue" on "env_var"';
         expect(interception.response?.body).to.have.property('errors');
 
         cy.wrap(interception.response?.body.errors[0]).should('deep.include', { message: errorMessage });
@@ -181,7 +179,7 @@ describe('REPORTER permission test suites', () => {
 
       cy.waitForNetworkIdle('@idle', 500);
 
-      const errMessage = 'Error: GraphQL error: Unauthorized: You don\'t have permission to "view" on "backup"';
+      const errMessage = 'ApolloError: Unauthorized: You don\'t have permission to "view" on "backup"';
 
       cy.get('main').should('exist').find('p').should('exist').and('have.text', errMessage);
     });

cypress/support/actions/envOverview/EnvOverviewAction.ts

@@ -14,7 +14,7 @@ export default class EnvOverviewAction {
   doSourceCheck() {
     environment.getSource().should($anchorTag => {
       expect($anchorTag).to.have.attr('target', '_blank');
-      expect($anchorTag).to.have.attr('href', 'https:////git@example.com/lagoon-demo/tree/main');
+      expect($anchorTag).to.have.attr('href', 'https://example.com/git/lagoon-demo/tree/main');
     });
   }
 
@@ -56,8 +56,6 @@ export default class EnvOverviewAction {
       cy.wrap(interception.response?.body.errors[0]).should('deep.include', { message: errorMessage });
     });
 
-    const UiError = 'GraphQL error: ' + errorMessage;
-
-    environment.getDeleteInfo().invoke('text').should('eq', UiError);
+    environment.getDeleteInfo().invoke('text').should('eq', errorMessage);
   }
 }

cypress/support/actions/project/ProjectAction.ts

@@ -54,11 +54,8 @@ export default class ProjectAction {
     project.getSubmitBtn().click();
 
     project
-      .getErrorModal()
+      .getErrorNotification()
       .should('exist')
-      .should(
-        'include.text',
-        'GraphQL error: Unauthorized: You don\'t have permission to "deploy:development" on "environment"'
-      );
+      .should('include.text', 'Unauthorized: You don\'t have permission to "deploy:development" on "environment"');
   }
 }

cypress/support/actions/task/TaskAction.ts

@@ -10,7 +10,13 @@ export default class TaskAction {
 
     cy.get(`[id^="react-select-"][id$=-option-4]`).click();
 
-    cy.getBySel('task-row').getBySel('pending').click();
+    cy.get('body').then(body => {
+      if (body.find('[data-cy="task-row"] [data-cy="pending"]').length > 0) {
+        cy.getBySel('task-row').getBySel('pending').first().click();
+      } else {
+        cy.getBySel('task-row').getBySel('new').first().click();
+      }
+    });
   }
   doCancelTask() {
     task.getCancelBtn().first().click();

cypress/support/actions/variables/VariablesAction.ts

@@ -15,16 +15,18 @@ export default class VariablesAction {
     environment.getEnvDataRows().getBySel('showhide-toggle').click({ multiple: true, force: true });
   }
 
-  doAddVariable(name: string, value: string) {
+  doAddVariable(name: string, value: string, permission: string = '') {
     environment.getAddButton().first().click();
 
-    cy.get('.react-select__indicator').click({ force: true });
-    cy.get('#react-select-2-option-1').click();
+    if (permission === '') {
+      cy.get('.react-select__indicator').click({ force: true });
+      cy.get('#react-select-2-option-1').click();
 
-    cy.getBySel('varName').focus().type(name);
-    cy.getBySel('varValue').focus().type(value);
+      cy.getBySel('varName').focus().type(name);
+      cy.getBySel('varValue').focus().type(value);
 
-    cy.getBySel('add-variable').click();
+      cy.getBySel('add-variable').click();
+    }
   }
 
   doDeleteVariable(name: string) {

cypress/utils/aliasQuery.ts

@@ -20,7 +20,7 @@ export const aliasMutation = (req: CyHttpMessages.IncomingHttpRequest, operation
 export const registerIdleHandler = (alias: string) => {
   cy.waitForNetworkIdlePrepare({
     method: 'POST',
-    pattern: '*',
+    pattern: 'http',
     alias,
   });
 };

package.json

@@ -26,17 +26,12 @@
   "dependencies": {
     "@ant-design/cssinjs": "^1.17.0",
     "@ant-design/icons": "^5.1.4",
-    "@apollo/react-hooks": "^3.1.5",
+    "@apollo/client": "^3.0.0",
     "@emotion/core": "^11.0.0",
     "@emotion/styled": "^11.10.6",
     "@storybook/preview-api": "^8.6.12",
     "antd": "^5.9.3",
-    "apollo-cache-inmemory": "^1.3.9",
-    "apollo-client": "^2.4.5",
-    "apollo-link": "^1.2.3",
-    "apollo-link-error": "^1.1.1",
-    "apollo-link-http": "^1.5.5",
-    "apollo-link-ws": "^1.0.10",
+    "apollo-upload-client": "^17.0.0",
     "babel-plugin-styled-components": "^2.0.7",
     "bootstrap": "^5.2.3",
     "colors": "^1.4.0",
@@ -54,6 +49,7 @@
     "git-url-parse": "14.0.0",
     "graphql": "^16.8.1",
     "graphql-tag": "^2.10.0",
+    "graphql-ws": "^6.0.4",
     "isomorphic-unfetch": "^4.0.2",
     "keycloak-js": "^26.0.7",
     "moment": "^2.22.2",
@@ -82,7 +78,6 @@
     "resize-observer-polyfill": "^1.5.1",
     "styled-components": "^6.1.8",
     "stylis": "^4.0.0",
-    "subscriptions-transport-ws": "^0.11.0",
     "svg-inline-loader": "^0.8.0",
     "webpack": "5.89.0"
   },
@@ -116,8 +111,8 @@
     "babel-loader": "^9.1.2",
     "babel-plugin-macros": "^3.1.0",
     "chromatic": "^10.2.0",
-    "cypress": "13.7.1",
-    "cypress-network-idle": "^1.14.2",
+    "cypress": "14.4.1",
+    "cypress-network-idle": "^1.15.0",
     "eslint-plugin-storybook": "^0.12.0",
     "faker": "^6.6.6",
     "msw": "^2.7.6",

src/components/AddTask/components/DrushArchiveDump.js

@@ -1,7 +1,7 @@
-import React from 'react';
-import { Mutation } from 'react-apollo';
+import React, { useEffect } from 'react';
 import ReactSelect from 'react-select';
 
+import { useMutation } from '@apollo/client';
 import Button from 'components/Button';
 import gql from 'graphql-tag';
 
@@ -23,47 +23,45 @@ const taskDrushArchiveDump = gql`
   }
 `;
 
-const DrushArchiveDump = ({ pageEnvironment, onCompleted, onError, onNewTask }) => (
-  <Mutation
-    mutation={taskDrushArchiveDump}
-    onCompleted={onCompleted}
-    onError={onError}
-    variables={{
-      environment: pageEnvironment.id,
-    }}
-  >
-    {(taskDrushArchiveDump, { loading, data }) => {
-      if (data) {
-        onNewTask();
-      }
-      return (
-        <SelectWrapper>
-          <div className="envSelect">
-            <label id="dest-env">Environment:</label>
-            <ReactSelect
-              aria-labelledby="dest-env"
-              name="dest-environment"
-              value={{
-                label: pageEnvironment.name,
-                value: pageEnvironment.id,
-              }}
-              options={[
-                {
-                  label: pageEnvironment.name,
-                  value: pageEnvironment.id,
-                },
-              ]}
-              isDisabled
-              required
-            />
-          </div>
-          <Button testId="task-btn" action={taskDrushArchiveDump} disabled={loading}>
-            {loading ? <span className="loader"></span> : 'Run task'}
-          </Button>
-        </SelectWrapper>
-      );
-    }}
-  </Mutation>
-);
+const DrushArchiveDump = ({ pageEnvironment, onCompleted, onError, onNewTask }) => {
+  const [drushArchiveDump, { loading, data }] = useMutation(taskDrushArchiveDump, {
+    variables: { environment: pageEnvironment.id },
+    onCompleted,
+    onError,
+  });
+
+  useEffect(() => {
+    if (data) {
+      onNewTask();
+    }
+  }, [data, onNewTask]);
+
+  return (
+    <SelectWrapper>
+      <div className="envSelect">
+        <label id="dest-env">Environment:</label>
+        <ReactSelect
+          aria-labelledby="dest-env"
+          name="dest-environment"
+          value={{
+            label: pageEnvironment.name,
+            value: pageEnvironment.id,
+          }}
+          options={[
+            {
+              label: pageEnvironment.name,
+              value: pageEnvironment.id,
+            },
+          ]}
+          isDisabled
+          required
+        />
+      </div>
+      <Button testId="task-btn" action={drushArchiveDump} disabled={loading}>
+        {loading ? <span className="loader"></span> : 'Run task'}
+      </Button>
+    </SelectWrapper>
+  );
+};
 
 export default DrushArchiveDump;