Merge branch 'main' into design/admin-panel

.github/workflows/s3-backup.yml

@@ -35,5 +35,5 @@ jobs:
     - name: Notify Slack channel if this job failed
       if: ${{ failure() }}
       run: |
-        json='{"text":"S3 backup failed in <https://github.com/'${{ github.repository }}'>!"}'
+        json='{"text":"S3 backup failed in <https://github.com/${{ github.repository }}>!"}'
         curl -X POST -H 'Content-type: application/json' --data "$json"  ${{ secrets.SLACK_NOTIFY_WEBHOOK }}

.github/workflows/test_endpoints.yaml

@@ -58,7 +58,7 @@ jobs:
         echo "PYTHONPATH=/github/workspace/env/site-packages:${{ env.PYTHONPATH}}" >> $GITHUB_ENV
 
     - name: Checks for new endpoints against AWS WAF rules
-      uses: cds-snc/notification-utils/.github/actions/waffles@53.0.3
+      uses: cds-snc/notification-utils/.github/actions/waffles@53.1.0
       with:
         app-loc: '/github/workspace'
         app-libs: '/github/workspace/env/site-packages'

app/assets/javascripts/fontawesome.js

@@ -10,12 +10,14 @@ import { faCheck } from "@fortawesome/free-solid-svg-icons/faCheck";
 import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons/faArrowUpRightFromSquare";
 import { faPlus } from "@fortawesome/free-solid-svg-icons/faPlus";
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons/faArrowRight";
+import { faArrowLeft } from "@fortawesome/free-solid-svg-icons/faArrowLeft";
 import { faAngleDown } from "@fortawesome/free-solid-svg-icons/faAngleDown";
 import { faCircleQuestion } from "@fortawesome/free-solid-svg-icons/faCircleQuestion";
 import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
 import { faCircleExclamation } from "@fortawesome/free-solid-svg-icons/faCircleExclamation";
 import { faCircleCheck } from "@fortawesome/free-solid-svg-icons/faCircleCheck";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { faPaperPlane } from "@fortawesome/free-solid-svg-icons";
 import { faXmark } from "@fortawesome/free-solid-svg-icons/faXMark";
 import { faTag } from "@fortawesome/free-solid-svg-icons/faTag";
 
@@ -26,12 +28,14 @@ let FontAwesomeIconLoader = () => {
     faArrowUpRightFromSquare,
     faPlus,
     faArrowRight,
+    faArrowLeft,
     faAngleDown,
     faCircleQuestion,
     faTriangleExclamation,
     faCircleExclamation,
     faCircleCheck,
     faInfoCircle,
+    faPaperPlane,
     faXmark,
     faTag,
   ]);

app/assets/javascripts/moreMenu.js

@@ -53,8 +53,11 @@
     // Substract another one to account for the "Plus" item
     fitCount = Math.floor((elemWidth / varWidth) * ctr) - 2;
 
-    // Reset display and width on all menu items.
-    $menuItems.children().css({ display: "flex", width: "auto" });
+    // Reset display and width on all menu items. Except "More menu"
+    $menuItems
+      .children()
+      .not("#more-menu")
+      .css({ display: "flex", width: "auto" });
 
     // Get the menu items that don't fit in the limited space, if any,
     // make sure to exclude the 'More' menu itself though.
@@ -84,7 +87,7 @@
       // in the menu anymore.
       collectedSet.css({ display: "none", width: "0" });
       // Make sure we are displaying the More menu when it contains items.
-      $moreMenu.css({ display: moreMenuDisplay, width: moreMenuWidth });
+      $moreMenu.css({ width: moreMenuWidth });
       // Need to adjust re-alignment..
       $moreMenuItems.children().removeClass();
       $moreMenuItems.children().addClass("text-right px-5");

app/assets/javascripts/scheduler/App.js

@@ -28,9 +28,7 @@ export const App = () => {
         <ErrorMessage />
         <p className="messageTextStyle">{translate("select_date")}</p>
         <div className="schedule">
-          <div>
-            <Calendar />
-          </div>
+          <Calendar />
           <DateTime />
           <SetDateTime />
         </div>

app/assets/javascripts/scheduler/Calendar/Weeks.js

@@ -11,6 +11,10 @@ export const Weeks = () => {
       id="Calendar-dates"
       onKeyDown={(event) => {
         const key = event.key.replace("Arrow", "");
+        // Prevent up and down scrolling with arrows
+        if (key.match(/Up|Down/)) {
+          event.preventDefault();
+        }
         onKeyDown({ key, dispatch });
       }}
       aria-label={translate("calendar_dates")}

app/assets/javascripts/scheduler/Calendar/YearMonth.js

@@ -61,7 +61,7 @@ export const YearMonth = () => {
         }}
         disabled={prevMonthEnabled(date, firstAvailableDate) ? false : true}
       >
-        ❮
+        <i aria-hidden="true" class="fa-solid fa-arrow-left"></i>
       </button>
       <div className="Nav--month">{dayjs(date).format("MMMM")}</div>
       <button
@@ -80,7 +80,7 @@ export const YearMonth = () => {
         }}
         disabled={nextMonthEnabled(date, lastAvailableDate) ? false : true}
       >
-        &#10095;
+        <i aria-hidden="true" class="fa-solid fa-arrow-right"></i>
       </button>
     </section>
   );

app/assets/javascripts/scheduler/Calendar/_util.js

@@ -90,6 +90,7 @@ export const beforeFirstDayInMonth = (state) => {
     // state.date is the YYYY-MM-DD on the calendar display not the current date
     const newMonth = dayjs(state.date)
       .subtract(1, "month")
+      .endOf("month")
       .format("YYYY-MM-DD");
 
     if (dayjs(newMonth).isBefore(yearMonthDay(state.firstAvailableDate))) {
@@ -107,7 +108,11 @@ export const beforeFirstDayInMonth = (state) => {
 
 export const afterLastDayInMonth = (state) => {
   if (Number(state.focusedDayNum) === Number(state.lastDay)) {
-    const newMonth = dayjs(state.date).add(1, "month").format("YYYY-MM-DD");
+    // Create a new date by adding one month, and setting date to the 1st of the added month
+    const newMonth = dayjs(state.date)
+      .add(1, "month")
+      .date(1)
+      .format("YYYY-MM-DD");
 
     if (dayjs(newMonth).isAfter(yearMonthDay(state.lastAvailableDate))) {
       return { updateMessage: "at_end_of_calendar" };
@@ -121,10 +126,14 @@ export const afterLastDayInMonth = (state) => {
 
 export const getNextDay = (day, state, direction) => {
   if (day <= 0) {
+    console.log("get date before", day, state, direction);
+
     return beforeFirstDayInMonth(state);
   }
 
-  if (direction != "left" && day > state.lastDay) {
+  if (direction !== "left" && Number(day) > Number(state.lastDay)) {
+    console.log("get date after", day, state, direction);
+
     return afterLastDayInMonth(state);
   }
 

app/assets/javascripts/scheduler/Confirmation/Confirmation.js

@@ -15,18 +15,21 @@ export const Confirmation = () => {
       : dayjs(date).format("h:mm A");
 
   return selected.length > 0 && time ? (
-    <div>
-      <div className="confirmation set">
+    <div className="confirmation set">
+      <i
+        aria-hidden="true"
+        class="confirmationIcon fa-xl fa-solid fa-paper-plane"
+      ></i>
+
+      <div className="confirmationMessage">
         <p>{translate("message_will_be_sent")}</p>
-        <p>
-          <strong>
+        <p className="confirmationTime">
+          <time datetime={date}>
             {translate("date_prefix")}
             {dayjs(date).format(translate("date_format"))} {translate("at")}{" "}
             {timeFormat}, {translate("local_time_suffix")}
-          </strong>
+          </time>
         </p>
-      </div>
-      <div>
         <p>{translate("cancel")}</p>
       </div>
     </div>