Merge pull request #2135 from bcgov/feat/kc-gold-integration

Feat: kc gold integration

.circleci/config.yml

@@ -215,7 +215,6 @@ jobs:
             source ~/.bashrc
             pushd schema
             ./data/deploy-data.sh -prod
-            sqitch verify
             popd
       - run:
           name: regenerate schema via introspection

.tool-versions

@@ -1,4 +1,4 @@
-nodejs 14.17.5
+nodejs 14.21.1
 yarn 1.22.19
 postgres 14.0
 python 3.9.2

app/.env.example

@@ -9,6 +9,8 @@ HOST=<host address>
 GGIRCS_HOST=<ggircs URL>
 METABASE_HOST=<metabase URL>
 
+KC_CLIENT_SECRET=<keycloak client secret> #pragma: allowlist secret
+
 # true if we want the mocks database schema to be deployed, false otherwise
 ENABLE_DB_MOCKS=<true or false>
 ENABLE_DB_MOCKS_COOKIES_ONLY=<true or false>

app/components/Layout/Header.tsx

@@ -120,15 +120,10 @@ const HeaderLayout: React.FunctionComponent<Props> = ({
               isRegistered && userProfileDropdown
             ) : (
               <>
-                <li>
-                  <Link href="/register">
-                    <a className="nav-button">Register</a>
-                  </Link>
-                </li>
                 <li>
                   <LoginButton>
                     <button className="nav-button" type="submit">
-                      Login
+                      Login (IDIR)
                     </button>
                   </LoginButton>
                 </li>

app/components/LoginButton.tsx

@@ -4,10 +4,10 @@ import { Form } from "react-bootstrap";
 
 const LoginForm: React.FunctionComponent = ({ children }) => {
   const router = useRouter();
-  let loginURI = "/login";
+  let loginURI = "/login?kc_idp_hint=idir";
 
   if (router.query.redirectTo)
-    loginURI += `?redirectTo=${encodeURIComponent(
+    loginURI += `&redirectTo=${encodeURIComponent(
       router.query.redirectTo as string
     )}`;
 

app/containers/RegistrationLoginButtons.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import { Col, Card, Button } from "react-bootstrap";
-import LoginButton from "../components/LoginButton";
+import { Col, Card } from "react-bootstrap";
 import { createFragmentContainer, graphql } from "react-relay";
 import { RegistrationLoginButtons_query } from "RegistrationLoginButtons_query.graphql";
 import { dateTimeFormat } from "functions/formatDates";
@@ -46,20 +45,9 @@ export const RegistrationLoginButtonsComponent: React.FunctionComponent<Props> =
             Apply for the CleanBC Industrial Incentive Program (CIIP)
           </Card.Title>
           {cardText}
-          <a
-            href="/register"
-            style={{ padding: "15px", display: "block" }}
-            className="btn btn-primary btn-lg"
-          >
-            Register and Apply
-          </a>
         </Card.Body>
       </Card>
-      <LoginButton>
-        <Button className="login-link" type="submit" variant="outline-dark">
-          Already have an account? Click here to login.
-        </Button>
-      </LoginButton>
+
       <style jsx global>{`
         .login-link {
           padding: 20px;

app/containers/User/UserForm.tsx

@@ -1,9 +1,9 @@
-import React, { useState } from "react";
+import React, { useMemo } from "react";
 import { createFragmentContainer, graphql, RelayProp } from "react-relay";
 import JsonSchemaForm, { IChangeEvent, AjvError } from "@rjsf/core";
 import { JSONSchema7 } from "json-schema";
 import { UserForm_user } from "UserForm_user.graphql";
-import createUserMutation from "mutations/user/createUserMutation";
+import createOrUpdateUserMutation from "mutations/user/createOrUpdateUserMutation";
 import updateUserMutation from "mutations/user/updateUserMutation";
 import FormArrayFieldTemplate from "containers/Forms/FormArrayFieldTemplate";
 import FormFieldTemplate from "containers/Forms/FormFieldTemplate";
@@ -13,7 +13,6 @@ import { customTransformErrors } from "functions/customTransformErrors";
 interface Props {
   user?: UserForm_user;
   relay: RelayProp;
-  uuid?: string;
   defaultGivenName?: string;
   defaultFamilyName?: string;
   defaultEmail?: string;
@@ -37,7 +36,6 @@ const transformErrors = (errors: AjvError[]) => {
 
 const UserForm: React.FunctionComponent<Props> = ({
   user,
-  uuid,
   defaultGivenName,
   defaultFamilyName,
   defaultEmail,
@@ -46,20 +44,13 @@ const UserForm: React.FunctionComponent<Props> = ({
 }) => {
   const handleChange = async (e: IChangeEvent<UserForm_user>) => {
     if (user) {
-      const {
-        firstName,
-        lastName,
-        emailAddress,
-        phoneNumber,
-        occupation,
-      } = e.formData;
+      const { firstName, lastName, phoneNumber, occupation } = e.formData;
       await updateUserMutation(relay.environment, {
         input: {
           id: user.id,
           ciipUserPatch: {
             firstName,
             lastName,
-            emailAddress,
             phoneNumber,
             occupation,
           },
@@ -70,62 +61,68 @@ const UserForm: React.FunctionComponent<Props> = ({
 
   const handleSubmit = async (e: IChangeEvent<UserForm_user>) => {
     if (user) await handleChange(e);
-    else
-      await createUserMutation(relay.environment, {
+    else {
+      const { firstName, lastName, phoneNumber, occupation } = e.formData;
+      await createOrUpdateUserMutation(relay.environment, {
         input: {
-          ciipUser: {
-            ...e.formData,
-            uuid,
-          },
+          firstName,
+          lastName,
+          phoneNumber,
+          occupation,
         },
       });
+    }
     onSubmit();
   };
 
-  const [userSchema] = useState<JSONSchema7>({
-    type: "object",
-    properties: {
-      firstName: {
-        type: "string",
-        title: "First Name",
-        default: defaultGivenName,
-      },
-      lastName: {
-        type: "string",
-        title: "Last Name",
-        default: defaultFamilyName,
-      },
-      emailAddress: {
-        type: "string",
-        title: "Email Address",
-        default: defaultEmail,
-        format: "email",
-      },
-      phoneNumber: {
-        type: "string",
-        title: "Phone Number",
-        format: "phoneNumber",
-      },
-      occupation: {
-        type: "string",
-        title: "Occupation",
+  const userSchema: JSONSchema7 = useMemo(
+    () => ({
+      type: "object",
+      properties: {
+        firstName: {
+          type: "string",
+          title: "First Name",
+          default: defaultGivenName,
+        },
+        lastName: {
+          type: "string",
+          title: "Last Name",
+          default: defaultFamilyName,
+        },
+        emailAddress: {
+          type: "string",
+          title: "Email Address",
+          default: defaultEmail,
+          format: "email",
+        },
+        phoneNumber: {
+          type: "string",
+          title: "Phone Number",
+          format: "phoneNumber",
+        },
+        occupation: {
+          type: "string",
+          title: "Occupation",
+        },
       },
+      required: ["firstName", "lastName", "phoneNumber", "occupation"],
+    }),
+    [defaultGivenName, defaultFamilyName, defaultEmail]
+  );
+
+  const uiSchema = {
+    emailAddress: {
+      "ui:disabled": true,
     },
-    required: [
-      "firstName",
-      "lastName",
-      "emailAddress",
-      "phoneNumber",
-      "occupation",
-    ],
-  });
+  };
 
   return (
     <JsonSchemaForm
       omitExtraData
       liveOmit
       liveValidate
       schema={userSchema}
+      uiSchema={uiSchema}
       customFormats={customFormats}
       transformErrors={transformErrors}
       formData={user}

app/cypress/integration/index.spec.js

@@ -5,14 +5,14 @@ describe("The index page", () => {
 
     cy.visit("/");
     cy.get("#page-content");
-    cy.get("header").contains("Register");
-    cy.get("header").contains("Login");
+    cy.get("header").contains("Register").should("not.exist");
+    cy.get("header").contains("Login (IDIR)");
     cy.get("header").happoScreenshot({ component: "Header" });
     cy.get("footer").happoScreenshot({ component: "Footer" });
-    cy.get("#page-content").contains("Register and Apply");
-    cy.get("#page-content").contains(
-      "Already have an account? Click here to login."
-    );
+    cy.get("#page-content").contains("Register and Apply").should("not.exist");
+    cy.get("#page-content")
+      .contains("Already have an account? Click here to login.")
+      .should("not.exist");
 
     cy.contains("Jan 23, 1991");
     cy.get("body").happoScreenshot({ component: "Index Page" });

app/cypress/integration/login-redirects.spec.js

@@ -43,9 +43,7 @@ function testRedirectsForScopedPages(scope, pages) {
 
       cy.mockLogin(scope);
 
-      // As the SSO login page won't open in a frame in Cypress, the final redirect must be
-      // tested indirectly as though we're following the auth callback:
-      cy.visit(`/login?redirectTo=${encodeURIComponent(url)}`);
+      cy.visit(url);
       cy.url().should("include", url);
     });
   });
@@ -62,11 +60,3 @@ describe("Successful redirection of authenticated pages through login", () => {
     testRedirectsForScopedPages(scope, AUTHENTICATED_PAGES[scope])
   );
 });
-
-describe("When failing the keycloak authorization", () => {
-  it("should redirect to the 403 page", () => {
-    // Any request with the auth_callback=1 query param will be routed through the keycloak middleware
-    cy.visit("/login?auth_callback=1");
-    cy.url().should("include", "/403");
-  });
-});

app/mutations/user/createOrUpdateUserMutation.ts

@@ -0,0 +1,32 @@
+import { graphql } from "react-relay";
+import {
+  createOrUpdateUserMutation as createOrUpdateUserMutationType,
+  createOrUpdateUserMutationVariables,
+} from "__generated__/createOrUpdateUserMutation.graphql";
+import RelayModernEnvironment from "relay-runtime/lib/store/RelayModernEnvironment";
+import BaseMutation from "mutations/BaseMutation";
+
+const mutation = graphql`
+  mutation createOrUpdateUserMutation($input: CreateOrUpdateCiipUserInput!) {
+    createOrUpdateCiipUser(input: $input) {
+      ciipUser {
+        firstName
+        lastName
+        emailAddress
+        occupation
+        phoneNumber
+      }
+    }
+  }
+`;
+
+const createOrUpdateUserMutation = async (
+  environment: RelayModernEnvironment,
+  variables: createOrUpdateUserMutationVariables
+) => {
+  return new BaseMutation<createOrUpdateUserMutationType>(
+    "create-or-update-ciip-user-mutation"
+  ).performMutation(environment, mutation, variables);
+};
+
+export default createOrUpdateUserMutation;

app/package.json

@@ -27,12 +27,13 @@
     "lint": "eslint --ext .js,.jsx,.ts,.tsx ."
   },
   "engines": {
-    "node": "14.17.5",
+    "node": "14.21.1",
     "yarn": "1.22.19"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@bcgov-cas/sso-express": "^3.2.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.31",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.16",
@@ -61,13 +62,13 @@
     "isomorphic-fetch": "^3.0.0",
     "js-file-download": "^0.4.12",
     "json-schema": "^0.4.0",
-    "keycloak-connect": "^10.0.0",
     "lightship": "^6.7.2",
     "lodash.throttle": "^4.1.1",
     "moment-timezone": "^0.5.35",
     "morgan": "^1.10.0",
     "next": "^12.1.0",
     "nodemailer": "^6.6.1",
+    "openid-client": "5",
     "pg": "^8.2.0",
     "postgraphile": "^4.11.0",
     "postgraphile-log-consola": "^1.0.1",