[MDS-5402] Added fontawesome icon to homepage + added utility to fetch and configure fontawesome pro access key

.github/workflows/core-web.build.deploy.dev.yaml

@@ -30,7 +30,7 @@ jobs:
       #   continue-on-error: true
       - name: Build n Tag
         run: |
-          docker build -t ${{ env.NAME }}:${{ env.INITIAL_TAG }} . -f ${{ env.CONTEXT }}Dockerfile.ci
+          docker build --build-arg FONT_AWESOME_PACKAGE_TOKEN=${{ secrets.FONT_AWESOME_PACKAGE_TOKEN }} -t ${{ env.NAME }}:${{ env.INITIAL_TAG }} . -f ${{ env.CONTEXT }}Dockerfile.ci
           docker tag ${{ env.NAME }}:${{ env.INITIAL_TAG }} ${{ secrets.CLUSTER_REGISTRY }}/${{ secrets.NS_TOOLS }}/${{ env.NAME }}:${{ env.INITIAL_TAG }}
           docker tag ${{ env.NAME }}:${{ env.INITIAL_TAG }} ${{ secrets.CLUSTER_REGISTRY }}/${{ secrets.NS_TOOLS }}/${{ env.NAME }}:${{ env.TAG }}
       - name: Push

.github/workflows/core-web.unit.yaml

@@ -28,6 +28,9 @@ jobs:
       - name: Upgrade yarn
         run: npm install -g yarn
 
+      - name: Set Fontawesome token
+        run: yarn config set 'npmScopes["fortawesome"].npmAuthToken' "${{ secrets.FONT_AWESOME_PACKAGE_TOKEN }}"
+
       - name: Install Dependencies
         run: yarn install
 

.yarnrc.yml

@@ -2,6 +2,11 @@ nmHoistingLimits: none
 
 nodeLinker: node-modules
 
+npmScopes:
+  fortawesome:
+    npmAlwaysAuth: true
+    npmRegistryServer: "https://npm.fontawesome.com/"
+
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
     spec: "@yarnpkg/plugin-workspace-tools"

bin/setenv.sh

@@ -15,10 +15,70 @@ filesystem-provider
 minespace-web
 tusd
 "
+
+bold=$(tput bold)
+normal=$(tput sgr0)
+
+# Install openshift cli - use on linux systems only
+function installOc() {
+    wget https://github.com/okd-project/okd/releases/download/4.13.0-0.okd-2023-09-03-082426/openshift-client-linux-4.13.0-0.okd-2023-09-03-082426.tar.gz
+    tar -xvf openshift-client-linux-4.13.0-0.okd-2023-09-03-082426.tar.gz
+    sudo mv oc /usr/bin
+}
+
+# Retrieves FontAwesome secret from openshift and configures yarn to use it when installing fontawesome packages.
+function loadExternalSecrets() {
+    OC_CLI=$(which oc)
+    OC_ACCESS=$(oc get project | grep 4c2ba9-dev)
+
+    if [ "$OC_CLI" = "" ]; then
+        VALID=0
+        echo -e "Could not find oc binary."
+        echo -e "Make sure you download the OpenShift cli binary (oc) from https://github.com/openshift/okd/releases ?"
+
+        if [ "$CODESPACES" = "true" ]; then
+            echo -e "${bold}Do you want to download and install oc? (only accepts 'yes')${normal}"
+            read INSTALL_OC
+
+            if [ "$INSTALL_OC" = "yes" ]; then
+                installOc
+            else
+                exit 1
+            fi
+            else
+                exit 1;
+        fi
+    fi
+
+    if [ "$OC_ACCESS" = "" ]; then
+        VALID=0
+        echo -e "Could not connect to openshift project. Have you requested access to the MDS project set with license plate 4c2ba9 from your local DevOps?"
+        echo -e "If you're totally new to BCGov then you'll need to request access to the org via https://just-ask-web-bdec76-prod.apps.silver.devops.gov.bc.ca/\n\n"
+        echo -e "If you already have access, click here to generate a token and paste it into the terminal: ${bold}https://oauth-openshift.apps.silver.devops.gov.bc.ca/oauth/token/request${normal}\n\n"
+        echo -e "${bold}...Paste Token Here...${normal}"
+        read OC_TOKEN
+
+        # Log in to openshift and verify that you have access
+        oc login --token=$OC_TOKEN --server=https://api.silver.devops.gov.bc.ca:6443
+        OC_ACCESS=$(oc get project | grep 4c2ba9-dev)
+        if [ "$OC_ACCESS" = "" ]; then
+            echo -e "You still don't have access to the 4c2ba9-dev namespace"
+            exit 1
+        fi
+    fi
+
+    # Read FONT_AWESOME_PACKAGE_TOKEN from local-dev-secrets ocp secret
+    FONT_AWESOME_PACKAGE_TOKEN=$(kubectl get secret local-dev-secrets --namespace 4c2ba9-dev -o go-template='{{.data.FONT_AWESOME_PACKAGE_TOKEN | base64decode}}')
+
+    # Update yarn config with token
+    yarn config set 'npmScopes["fortawesome"].npmAuthToken' "$FONT_AWESOME_PACKAGE_TOKEN" -H
+
+}
+
 if [ -z "$INPUT" ];
     then
         echo "This command can be destructive if you have valid .env's in place and run this multiple times!"
-        echo "Continue? (only accepts 'yes')"
+        echo "${bold}Continue? (only accepts 'yes')${normal}"
         read INPUT
 fi
 
@@ -31,6 +91,15 @@ then
         cp $SERVICES_PATH/$S/.env-example $SERVICES_PATH/$S/.env
     done
     echo ".env files setup!"
-else
-    echo "Cancelled!"
-fi
+fi
+
+if [ -z "$LOAD_EXTERNAL" ];
+    then
+        echo "${bold}Do you want to load secrets from OpenShift for development purposes? (only accepts 'yes')${normal}"
+        read LOAD_EXTERNAL
+fi
+
+if [ "$LOAD_EXTERNAL" = "yes" ];
+    then
+        loadExternalSecrets
+fi

services/core-web/package.json

@@ -10,6 +10,10 @@
     "@babel/runtime": "7.15.3",
     "@babel/runtime-corejs3": "7.15.3",
     "@datapunt/matomo-tracker-react": "0.1.5",
+    "@fortawesome/fontawesome-pro": "6.4.2",
+    "@fortawesome/fontawesome-svg-core": "6.4.2",
+    "@fortawesome/pro-light-svg-icons": "6.4.2",
+    "@fortawesome/react-fontawesome": "0.2.0",
     "@hot-loader/react-dom": "16.13.0",
     "@mds/common": "0.1.0",
     "@react-keycloak/web": "3.4.0",

services/core-web/src/components/homepage/HomeTopLinks.tsx

@@ -2,15 +2,17 @@ import React from "react";
 import { useHistory } from "react-router-dom";
 
 import * as routes from "@/constants/routes";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { Button, Typography, Row } from "antd";
 import {
-  ExclamationCircleOutlined,
-  ReconciliationOutlined,
-  RotateRightOutlined,
-  ProjectOutlined,
-  HeatMapOutlined,
-} from "@ant-design/icons";
+  faTrianglePersonDigging,
+  faBrakeWarning,
+  faDiamondTurnRight,
+  faClipboardList,
+  faMountains,
+} from "@fortawesome/pro-light-svg-icons";
+
+import { Button, Typography, Row } from "antd";
 
 interface HomeLinkButtonProps {
   title: string;
@@ -42,31 +44,31 @@ const HomeTopLinks = () => {
       title: "Notices of Work",
       route: routes.NOTICE_OF_WORK_APPLICATIONS.route,
       key: "now",
-      icon: HeatMapOutlined,
+      icon: () => <FontAwesomeIcon icon={faTrianglePersonDigging} />,
     },
     {
       title: "Incidents",
       route: routes.INCIDENTS_DASHBOARD.route,
       key: "incidents",
-      icon: ExclamationCircleOutlined,
+      icon: () => <FontAwesomeIcon icon={faBrakeWarning} />,
     },
     {
       title: "Variances",
       route: routes.VARIANCE_DASHBOARD.route,
       key: "variances",
-      icon: RotateRightOutlined,
+      icon: () => <FontAwesomeIcon icon={faDiamondTurnRight} />,
     },
     {
       title: "Reports",
       route: routes.REPORTS_DASHBOARD.route,
       key: "reports",
-      icon: ReconciliationOutlined,
+      icon: () => <FontAwesomeIcon icon={faClipboardList} />,
     },
     {
       title: "Major Projects",
       route: routes.MAJOR_PROJECTS_DASHBOARD.route,
       key: "major-projects",
-      icon: ProjectOutlined,
+      icon: () => <FontAwesomeIcon icon={faMountains} />,
     },
   ];
   return (

services/core-web/src/styles/components/HomePage.scss

@@ -36,7 +36,7 @@
     border-color: $violet;
     color: $darkest-grey;
 
-    .home-link-button-icon {
+    svg {
       color: $hover-violet;
     }
   }
@@ -52,9 +52,10 @@
     gap: 8px;
   }
 
-  .home-link-button-icon {
+  svg {
     color: $violet;
-    font-size: 24px;
+    font-size: 36px;
+    line-height: 24px;
   }
 }
 

yarn.lock

@@ -1822,6 +1822,50 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fortawesome/fontawesome-common-types@npm:6.4.2":
+  version: 6.4.2
+  resolution: "@fortawesome/fontawesome-common-types@npm:6.4.2::__archiveUrl=https%3A%2F%2Fnpm.fontawesome.com%2F%40fortawesome%2Ffontawesome-common-types%2F-%2F6.4.2%2Ffontawesome-common-types-6.4.2.tgz"
+  checksum: 4a22932bd0cac65be1d35b739624f366b6c247b60eb5b8f66218957f54ce1cae56e2a20ea88789ede45d1e1c0c1014f160e01c1752122ec174ad0823e60f94bf
+  languageName: node
+  linkType: hard
+
+"@fortawesome/fontawesome-pro@npm:6.4.2":
+  version: 6.4.2
+  resolution: "@fortawesome/fontawesome-pro@npm:6.4.2::__archiveUrl=https%3A%2F%2Fnpm.fontawesome.com%2F%40fortawesome%2Ffontawesome-pro%2F-%2F6.4.2%2Ffontawesome-pro-6.4.2.tgz"
+  checksum: 8af23532c35c189ef9b5a6d6fc59e8ede0446f0e26dc80fe5665d69c6694f0195b906bf0d9b041276ca29cb274080abc946b89c3e89e41498149b184ff207180
+  languageName: node
+  linkType: hard
+
+"@fortawesome/fontawesome-svg-core@npm:6.4.2":
+  version: 6.4.2
+  resolution: "@fortawesome/fontawesome-svg-core@npm:6.4.2::__archiveUrl=https%3A%2F%2Fnpm.fontawesome.com%2F%40fortawesome%2Ffontawesome-svg-core%2F-%2F6.4.2%2Ffontawesome-svg-core-6.4.2.tgz"
+  dependencies:
+    "@fortawesome/fontawesome-common-types": 6.4.2
+  checksum: 0c0ecd9058883b128127e2b281c983ba6272be38a17577aaa2293ada58e9b1538357fe44430ded508d49ae3f5cc55aa720a0448d2b9d99689bb912d786f034e5
+  languageName: node
+  linkType: hard
+
+"@fortawesome/pro-light-svg-icons@npm:6.4.2":
+  version: 6.4.2
+  resolution: "@fortawesome/pro-light-svg-icons@npm:6.4.2::__archiveUrl=https%3A%2F%2Fnpm.fontawesome.com%2F%40fortawesome%2Fpro-light-svg-icons%2F-%2F6.4.2%2Fpro-light-svg-icons-6.4.2.tgz"
+  dependencies:
+    "@fortawesome/fontawesome-common-types": 6.4.2
+  checksum: 92ed30d302980cab64fa1738731fbfec9efb4502737968489b0b781471d52711fba31b1098b54b6840bff5ba7382a29447f9a5a65e438d4fcb1c534d3daaea56
+  languageName: node
+  linkType: hard
+
+"@fortawesome/react-fontawesome@npm:0.2.0":
+  version: 0.2.0
+  resolution: "@fortawesome/react-fontawesome@npm:0.2.0::__archiveUrl=https%3A%2F%2Fnpm.fontawesome.com%2F%40fortawesome%2Freact-fontawesome%2F-%2F0.2.0%2Freact-fontawesome-0.2.0.tgz"
+  dependencies:
+    prop-types: ^15.8.1
+  peerDependencies:
+    "@fortawesome/fontawesome-svg-core": ~1 || ~6
+    react: ">=16.3"
+  checksum: f652a0c2172e7b209e2d9e7e511f9b8c17abad85f55e0bd09bb1175ea1927693215da47eb6cd95b1f3a23bd124368553c677907fa76cb17c5093afc1fcffe338
+  languageName: node
+  linkType: hard
+
 "@hot-loader/react-dom@npm:16.13.0":
   version: 16.13.0
   resolution: "@hot-loader/react-dom@npm:16.13.0"
@@ -2202,6 +2246,10 @@ __metadata:
     "@babel/runtime": 7.15.3
     "@babel/runtime-corejs3": 7.15.3
     "@datapunt/matomo-tracker-react": 0.1.5
+    "@fortawesome/fontawesome-pro": 6.4.2
+    "@fortawesome/fontawesome-svg-core": 6.4.2
+    "@fortawesome/pro-light-svg-icons": 6.4.2
+    "@fortawesome/react-fontawesome": 0.2.0
     "@hot-loader/react-dom": 16.13.0
     "@mds/common": 0.1.0
     "@react-keycloak/web": 3.4.0