Merge pull request #1147 from bcgov/dev

chore: release

.dockerignore

@@ -25,3 +25,4 @@ CONTRIBUTING.md
 LICENSE
 *.lock
 node_modules
+.env

.github/workflows/e2e-smoke-test.yaml

@@ -0,0 +1,39 @@
+name: E2E Smoke Test
+
+on:
+  workflow_dispatch:
+    inputs:
+      logLevel:
+        description: 'Log level'
+        required: true
+        default: 'warning'
+        type: choice
+        options:
+          - info
+          - warning
+          - debug
+  # Only trigger, when the build workflow succeeded
+  workflow_run:
+    workflows:
+      - Terraform
+    branches:
+      - dev
+    types:
+      - completed
+
+jobs:
+  trigger-remote-workflow:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Start Test in sso-requests-e2e repo
+        if: ${{ github.event.workflow_run.conclusion == 'success' }}
+        env:
+          GITHUB_CONTEXT: ${{ toJSON(github) }}
+        run: |
+          echo "$GITHUB_CONTEXT"
+          curl \
+            -X POST \
+            -H "Accept: application/vnd.github+json" \
+            -H "Authorization: token ${{ secrets.GH_ACCESS_TOKEN }}" \
+            https://api.github.com/repos/bcgov/sso-requests-e2e/actions/workflows/main-e2e.yml/dispatches \
+            -d '{"ref":"main", "inputs":{"smoketest":"true"}}'

.github/workflows/test.yml

@@ -51,7 +51,7 @@ jobs:
 
       - name: Run frontend unit tests
         run: |
-          yarn test
+          yarn test --coverage
           yarn build
         working-directory: ./app
 
@@ -70,9 +70,21 @@ jobs:
           PGUSER: postgres
           DATABASE_URL: 'postgresql://localhost:5432/ssorequests_test'
         run: |
-          yarn test
+          yarn test --coverage
         working-directory: ./lambda
 
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v4.0.1
+        env:
+          slug: bcgov/sso-requests
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          file: ./app/coverage/lcov.info, ./lambda/coverage/lcov.info
+          flags: unitests
+          name: codecov
+          fail_ci_if_error: false
+          verbose: true
+
   commitlint:
     runs-on: ubuntu-20.04
     steps:

Dockerfile

@@ -5,40 +5,10 @@ RUN apt-get update && apt-get install curl make -y \
 
 WORKDIR /app
 
-COPY ./*.json ./
+COPY . .
 
-RUN yarn install
+RUN make app_install
 
-COPY ./app/*.json ./app/
-
-RUN yarn --cwd ./app install
-
-COPY ./lambda/*.json ./lambda/
-
-RUN yarn --cwd ./lambda install
-
-COPY ./lambda/shared/*.json ./lambda/shared/
-
-RUN yarn --cwd ./lambda/shared install
-
-COPY ./lambda/app/*.json ./lambda/app/
-
-RUN yarn --cwd ./lambda/app install
-
-COPY ./lambda/actions/*.json ./lambda/actions/
-
-RUN yarn --cwd ./lambda/actions install
-
-COPY ./lambda/db/*.json ./lambda/db/
-
-RUN yarn --cwd ./lambda/db install
-
-COPY ./lambda/scheduler/*.json ./lambda/scheduler/
-
-RUN yarn --cwd ./lambda/scheduler install
-
-COPY ./localserver/*.json ./localserver/
-
-RUN yarn --cwd ./localserver install
+RUN make server_install
 
 ENTRYPOINT [ "yarn", "--cwd", "./localserver", "dev"]

Dockerfile.tf-modules

@@ -0,0 +1,13 @@
+FROM docker.io/hashicorp/terraform:latest
+
+RUN apk add --no-cache curl
+
+# Set working directory
+WORKDIR /terraform
+
+COPY /local/terraform/ .
+COPY /local/tf-migration-entrypoint.sh /tmp/tf-migration-entrypoint.sh
+
+RUN chmod +x /tmp/tf-migration-entrypoint.sh
+
+ENTRYPOINT ["/tmp/tf-migration-entrypoint.sh"]

README.md

@@ -1,6 +1,6 @@
 # sso-requests
 
-![Lifecycle:Stable](https://img.shields.io/badge/Lifecycle-Stable-97ca00)
+![Lifecycle:Stable](https://img.shields.io/badge/Lifecycle-Stable-97ca00) [![codecov](https://codecov.io/gh/bcgov/sso-requests/graph/badge.svg?token=CAJYE46GZV)](https://codecov.io/gh/bcgov/sso-requests)
 
 The request process workflow tool for the RedHat SSO Dev Exchange service
 

app/components/Carousel.tsx

@@ -0,0 +1,100 @@
+import { ReactNode, useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import useWindowDimensions from '@app/hooks/useWindowDimensions';
+
+interface Props {
+  viewableItems: number;
+  children: ReactNode[];
+}
+
+const Container = styled.div<{ viewableItems: number; index: number; totalItems: number }>`
+  width: 100%;
+  .outer-window {
+    padding: 1em 0;
+    width: 100%;
+    overflow-x: hidden;
+    white-space: nowrap;
+    .inner-window {
+      transform: translate(-${(props) => (100 / props.viewableItems) * props.index}%);
+      transition: transform 400ms ease-in-out;
+      .item-container {
+        display: inline-block;
+        vertical-align: top;
+        width: calc(100% / ${(props) => props.viewableItems});
+        padding: 0 0.5em;
+        white-space: wrap;
+      }
+    }
+  }
+
+  .controls {
+    text-align: center;
+    margin: 1em 0;
+
+    .arrow-left {
+      margin-right: 0.5em;
+      cursor: ${(props) => (props.index === 0 ? 'not-allowed' : 'pointer')};
+      color: ${(props) => (props.index === 0 ? 'grey' : '#036')};
+    }
+
+    .arrow-right {
+      margin-left: 0.5em;
+      cursor: ${(props) => (props.index === props.totalItems - props.viewableItems ? 'not-allowed' : 'pointer')};
+      color: ${(props) => (props.index === props.totalItems - props.viewableItems ? 'grey' : '#036')};
+    }
+  }
+`;
+
+export default function Carousel({ viewableItems, children }: Readonly<Props>) {
+  const [carouselIndex, setCarouselIndex] = useState(0);
+  const { width } = useWindowDimensions();
+
+  const moveCarousel = (direction: 'left' | 'right') => {
+    if (direction === 'left') {
+      if (carouselIndex <= 0) return;
+      setCarouselIndex(carouselIndex - 1);
+    } else {
+      if (carouselIndex >= children.length - viewableItems) return;
+      setCarouselIndex(carouselIndex + 1);
+    }
+  };
+
+  useEffect(() => {
+    // Adjust index if browser width changes
+    if (carouselIndex >= children.length - viewableItems) {
+      setCarouselIndex(children.length - viewableItems);
+    }
+  }, [width]);
+
+  return (
+    <Container viewableItems={viewableItems} index={carouselIndex} totalItems={children.length}>
+      <div className="outer-window">
+        <div className="inner-window">
+          {children.map((child) => (
+            <div className="item-container" key={(child as any).key}>
+              {child}
+            </div>
+          ))}
+        </div>
+      </div>
+      {children.length > viewableItems && (
+        <div className="controls">
+          <FontAwesomeIcon
+            icon={faChevronLeft}
+            size="2x"
+            className="arrow arrow-left"
+            onClick={() => moveCarousel('left')}
+          />
+          <FontAwesomeIcon
+            icon={faChevronRight}
+            size="2x"
+            className="arrow arrow-right"
+            onClick={() => moveCarousel('right')}
+          />
+        </div>
+      )}
+    </Container>
+  );
+}

app/components/Testimonial.tsx

@@ -0,0 +1,90 @@
+import { ITestimonial } from '@app/interfaces/Testimonial';
+import styled from 'styled-components';
+import { faStar, faStarHalf } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+interface Props {
+  testimonial: ITestimonial;
+}
+
+const Card = styled.div`
+  border-radius: 1em;
+  background: #f2f8ff;
+  padding: 1em;
+  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .ratings {
+    display: flex;
+    margin-bottom: 0.5em;
+  }
+
+  .title {
+    font-weight: bold;
+  }
+
+  .author {
+    .name {
+      font-weight: bold;
+    }
+  }
+
+  .seperator {
+    margin: 1em 0;
+    padding: 0;
+    background-color: black;
+    height: 1px;
+  }
+`;
+
+const MAX_RATING = 5;
+
+const HalfStarContainer = styled.span`
+  position: relative;
+  * {
+    position: absolute;
+  }
+`;
+
+const HalfStar = () => {
+  return (
+    <HalfStarContainer>
+      <FontAwesomeIcon color="gold" icon={faStarHalf} size="lg" fill="grey" />
+      <FontAwesomeIcon color="grey" icon={faStarHalf} size="lg" transform={{ flipX: true }} />
+    </HalfStarContainer>
+  );
+};
+
+export default function Testimonial({ testimonial }: Readonly<Props>) {
+  const hasHalfRating = testimonial.rating % 1 === 0.5;
+
+  const ratings = Array.from(Array(Math.floor(testimonial.rating)).keys());
+  const emptyRatings = Array.from(Array(MAX_RATING - Math.ceil(testimonial.rating)).keys());
+
+  return (
+    <Card>
+      <div className="ratings">
+        {ratings.map((i) => (
+          <FontAwesomeIcon key={i} color="gold" icon={faStar} size="lg" />
+        ))}
+        {hasHalfRating && <HalfStar />}
+        {emptyRatings.map((i) => (
+          <FontAwesomeIcon key={i} color="grey" icon={faStar} size="lg" />
+        ))}
+      </div>
+
+      <p className="title">&quot;{testimonial.title}&quot;</p>
+
+      <div className="body">{testimonial.body}</div>
+
+      <div className="author">
+        <hr className="seperator" />
+        <span className="name">{testimonial.author.name}</span> |{' '}
+        <span className="position">{testimonial.author.title}</span>
+      </div>
+    </Card>
+  );
+}

app/form-components/FormTemplate.tsx

@@ -184,10 +184,10 @@ function FormTemplate({ currentUser, request, alert }: Props) {
     const processed = { ...newData, devIdps };
 
     if (newData.protocol !== 'saml') {
-      if (formData.protocol !== newData.protocol) processed.clientId = null;
-      processed.devSamlLogoutPostBindingUri = null;
-      processed.testSamlLogoutPostBindingUri = null;
-      processed.prodSamlLogoutPostBindingUri = null;
+      if (formData.protocol !== newData.protocol) processed.clientId = '';
+      processed.devSamlLogoutPostBindingUri = '';
+      processed.testSamlLogoutPostBindingUri = '';
+      processed.prodSamlLogoutPostBindingUri = '';
     }
 
     if (newData.authType !== 'browser-login') processed.publicAccess = false;

app/form-components/team-form/TeamMembersForm.tsx

@@ -8,7 +8,7 @@ import { faPlusCircle, faMinusCircle, faStar } from '@fortawesome/free-solid-svg
 import { User, LoggedInUser } from 'interfaces/team';
 import ErrorText from 'components/ErrorText';
 import Link from '@button-inc/bcgov-theme/Link';
-import { wikiURL } from '@app/utils/constants';
+import { formatWikiURL } from '@app/utils/constants';
 
 const Container = styled.div`
   display: grid;
@@ -161,7 +161,7 @@ function TeamMembersForm({ errors, members, setMembers, allowDelete = true, curr
         <br />
         <div>
           <span className="underline">
-            <Link external href={`${wikiURL}/CSS-App-My-Teams#ive-created-a-team-now-what`}>
+            <Link external href={formatWikiURL('CSS-App-My-Teams#ive-created-a-team-now-what')}>
               View a detailed breakdown of roles on our wiki page
             </Link>
           </span>

app/hooks/useWindowDimensions.tsx

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+
+function getWindowDimensions() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height,
+  };
+}
+
+export default function useWindowDimensions() {
+  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return windowDimensions;
+}