Release/3.0.4

cds-snc · May 5, 2023 · 805fcd1 · 805fcd1
2 parents e9358eb + 4da0eff
commit 805fcd1
Show file tree

Hide file tree

Showing 25 changed files with 219 additions and 262 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.0.4] 2023-05-05
+
+### Fixed
+
+- Expanding question inputs in form builder
+- Language toggle not appearing on first page visit
+
 ## [3.0.3] 2023-05-03
 
 ### Fixed

diff --git a/VERSION b/VERSION
@@ -1 +1 @@
-3.0.3
+3.0.4
diff --git a/components/form-builder/app/SetResponseDelivery.tsx b/components/form-builder/app/SetResponseDelivery.tsx
@@ -229,7 +229,7 @@ export const SetResponseDelivery = () => {
               {t("settingsResponseDelivery.selectClassification")}
             </p>
             <p className="inline-block mb-5 p-3 bg-purple-200 font-bold text-sm">
-              {t("beforePublishMessage")}
+              {t("settingsResponseDelivery.beforePublishMessage")}
             </p>
             <select
               disabled={isPublished}

diff --git a/components/form-builder/app/edit/Edit.tsx b/components/form-builder/app/edit/Edit.tsx
@@ -95,15 +95,19 @@ export const Edit = () => {
             <label htmlFor="formTitle" className="visually-hidden" {...getLocalizationAttribute()}>
               {t("formTitle")}
             </label>
-            <ExpandingInput
-              id="formTitle"
-              ref={titleInput}
-              placeholder={t("placeHolderFormTitle")}
-              value={value}
-              onChange={updateValue}
-              onBlur={updateName}
-              {...getLocalizationAttribute()}
-            />
+            <div className="mb-4 my-2">
+              <ExpandingInput
+                id="formTitle"
+                wrapperClassName="w-full laptop:w-3/4 mt-2 laptop:mt-0 font-bold laptop:text-3xl"
+                className="font-bold laptop:text-3xl"
+                ref={titleInput}
+                placeholder={t("placeHolderFormTitle")}
+                value={value}
+                onChange={updateValue}
+                onBlur={updateName}
+                {...getLocalizationAttribute()}
+              />
+            </div>
             <p className="text-sm mb-4">{t("startFormIntro")}</p>
           </>
         }

diff --git a/components/form-builder/app/edit/RefsContext.tsx b/components/form-builder/app/edit/RefsContext.tsx
@@ -1,13 +1,13 @@
 import React, { createContext, useContext, useRef, RefObject } from "react";
 
 interface RefsContextType {
-  refs?: RefObject<HTMLInputElement[]> | undefined;
+  refs?: RefObject<HTMLTextAreaElement[]> | undefined;
 }
 
 const RefsContext = createContext<RefsContextType>({});
 
 export function RefsProvider({ children }: { children: React.ReactNode }) {
-  const refs = useRef<HTMLInputElement[]>([]);
+  const refs = useRef<HTMLTextAreaElement[]>([]);
 
   return <RefsContext.Provider value={{ refs }}>{children}</RefsContext.Provider>;
 }

diff --git a/components/form-builder/app/edit/elements/question/QuestionInput.tsx b/components/form-builder/app/edit/elements/question/QuestionInput.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "next-i18next";
 import debounce from "lodash.debounce";
 
-import { Input } from "@formbuilder/app/shared";
+import { ExpandingInput } from "@formbuilder/app/shared";
 import { Language } from "@formbuilder/types";
 import { useTemplateStore } from "@formbuilder/store";
 import { useRefsContext } from "@formbuilder/app/edit/RefsContext";
@@ -24,7 +24,7 @@ export const QuestionInput = ({
   const [value, setValue] = useState(initialValue);
 
   const { refs } = useRefsContext();
-  const getRef = (element: HTMLInputElement) => {
+  const getRef = (element: HTMLTextAreaElement) => {
     if (!refs || !refs.current || !element || !id) {
       return;
     }
@@ -73,17 +73,17 @@ export const QuestionInput = ({
   );
 
   return (
-    <Input
+    <ExpandingInput
       ref={getRef}
       type="text"
       id={`item-${id}`}
       name={`item${index}`}
       placeholder={t("question")}
-      className="w-full"
+      wrapperClassName="w-full font-bold text-base"
+      className="font-bold text-base"
       value={value}
       describedBy={describedById ?? undefined}
-      onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateValue(index, e.target.value)}
-      theme="title"
+      onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => updateValue(index, e.target.value)}
       {...getLocalizationAttribute()}
     />
   );

diff --git a/components/form-builder/app/shared/ExpandingInput.tsx b/components/form-builder/app/shared/ExpandingInput.tsx
@@ -4,6 +4,8 @@ interface Props {
   id: string;
   name?: string;
   type?: string;
+  wrapperClassName?: string;
+  className?: string;
   placeholder?: string;
   describedBy?: string;
   value: string | number;
@@ -29,18 +31,20 @@ const ExpandingInput = React.forwardRef<Ref, Props>((props, ref) => {
     isInvalid = false,
     lang,
     onBlur,
+    wrapperClassName,
+    className,
   } = props;
 
   return (
     <div
-      className="input-sizer stacked w-full laptop:w-3/4 mt-2 laptop:mt-0 mb-4 my-2 "
+      className={`input-sizer stacked border-solid border-black border-b-1.5 ${wrapperClassName}`}
       data-value={value}
     >
       <textarea
         rows={1}
         maxLength={2000}
         id={id}
-        className="text-base font-bold border-b-1.5 border-black-default border-solid focus:bg-gray-default focus:outline-0 !font-sans"
+        className={` focus:bg-gray-default focus:outline-0 !font-sans ${className} overflow-y-visible`}
         name={name}
         aria-describedby={describedBy}
         aria-invalid={isInvalid ? true : false}

diff --git a/components/form-builder/app/translate/Translate.tsx b/components/form-builder/app/translate/Translate.tsx
@@ -135,11 +135,10 @@ export const Translate = () => {
                 <LanguageLabel id="form-title-en-language" lang={primaryLanguage}>
                   <>{t(primaryLanguage)}</>
                 </LanguageLabel>
-                <input
+                <textarea
                   className="w-full p-4 h-full focus:outline-blue-focus"
                   id="form-title-en"
                   aria-describedby="form-title-en-language"
-                  type="text"
                   value={form[localizeField(LocalizedFormProperties.TITLE, primaryLanguage)]}
                   onChange={(e) => {
                     updateField(
@@ -157,11 +156,10 @@ export const Translate = () => {
                 <LanguageLabel id="form-title-fr-language" lang={secondaryLanguage}>
                   <>{t(secondaryLanguage)}</>
                 </LanguageLabel>
-                <input
+                <textarea
                   className="w-full p-4 h-full focus:outline-blue-focus"
                   id="form-title-fr"
                   aria-describedby="form-title-fr-language"
-                  type="text"
                   value={form[localizeField(LocalizedFormProperties.TITLE, secondaryLanguage)]}
                   onChange={(e) => {
                     updateField(

diff --git a/components/globals/LanguageToggle.tsx b/components/globals/LanguageToggle.tsx
@@ -1,25 +1,16 @@
-import React, { useEffect, useRef } from "react";
+import React from "react";
 import { useTranslation } from "next-i18next";
 import { useRouter } from "next/router";
 import { StyledLink } from "./StyledLink/StyledLink";
 
 const LanguageToggle = () => {
   const { t, i18n } = useTranslation("common");
   const locale = i18n.language;
-  const loading = useRef(true);
-  const { isReady, asPath } = useRouter();
-
-  useEffect(() => {
-    if (isReady) {
-      loading.current = false;
-    }
-  }, [isReady]);
-
-  if (loading.current) return null;
+  const { pathname } = useRouter();
 
   return (
     <StyledLink
-      href={asPath}
+      href={pathname}
       className="text-base text-right"
       locale={locale === "en" ? "fr" : "en"}
       ariaLabel={`${t("lang-toggle")}: ${locale == "en" ? "Français" : "English"}`}

diff --git a/cypress/e2e/form-builder/add-elements.cy.js b/cypress/e2e/form-builder/add-elements.cy.js
@@ -40,9 +40,7 @@ describe("Test FormBuilder Add Elements", () => {
     cy.get('[data-testid="textField"]').click();
     cy.get("button").contains("Select block").click();
 
-    cy.get('[id="item-1"]')
-      .should("have.attr", "type", "text")
-      .should("have.attr", "placeholder", "Question");
+    cy.get('[id="item-1"]').should("have.attr", "placeholder", "Question");
 
     cy.get(".example-text").should("contain", "Short answer");
   });
@@ -54,9 +52,7 @@ describe("Test FormBuilder Add Elements", () => {
     cy.get('[data-testid="textArea"]').click();
     cy.get("button").contains("Select block").click();
 
-    cy.get('[id="item-1"]')
-      .should("have.attr", "type", "text")
-      .should("have.attr", "placeholder", "Question");
+    cy.get('[id="item-1"]').should("have.attr", "placeholder", "Question");
 
     cy.get(".example-text").should("contain", "Long answer text");
   });
@@ -68,9 +64,7 @@ describe("Test FormBuilder Add Elements", () => {
     cy.get('[data-testid="radio"]').click();
     cy.get("button").contains("Select block").click();
 
-    cy.get('[id="item-1"]')
-      .should("have.attr", "type", "text")
-      .should("have.attr", "placeholder", "Question");
+    cy.get('[id="item-1"]').should("have.attr", "placeholder", "Question");
 
     cy.get('[id="option--1--1"]')
       .should("have.attr", "type", "text")
@@ -86,13 +80,9 @@ describe("Test FormBuilder Add Elements", () => {
     cy.get('[data-testid="checkbox"]').click();
     cy.get("button").contains("Select block").click();
 
-    cy.get('[id="item-1"]')
-      .should("have.attr", "type", "text")
-      .should("have.attr", "placeholder", "Question");
+    cy.get('[id="item-1"]').should("have.attr", "placeholder", "Question");
 
-    cy.get('[id="option--1--1"]')
-      .should("have.attr", "type", "text")
-      .should("have.attr", "placeholder", "Option 1");
+    cy.get('[id="option--1--1"]').should("have.attr", "placeholder", "Option 1");
 
     cy.get(".example-text").should("contain", "Multiple choice");
   });
@@ -104,13 +94,9 @@ describe("Test FormBuilder Add Elements", () => {
     cy.get('[data-testid="dropdown"]').click();
     cy.get("button").contains("Select block").click();
 
-    cy.get('[id="item-1"]')
-      .should("have.attr", "type", "text")
-      .should("have.attr", "placeholder", "Question");
+    cy.get('[id="item-1"]').should("have.attr", "placeholder", "Question");
 
-    cy.get('[id="option--1--1"]')
-      .should("have.attr", "type", "text")
-      .should("have.attr", "placeholder", "Option 1");
+    cy.get('[id="option--1--1"]').should("have.attr", "placeholder", "Option 1");
 
     cy.get(".example-text").should("contain", "Dropdown");
   });
@@ -122,9 +108,7 @@ describe("Test FormBuilder Add Elements", () => {
     cy.get('[data-testid="date"]').click();
     cy.get("button").contains("Select block").click();
 
-    cy.get('[id="item-1"]')
-      .should("have.attr", "type", "text")
-      .should("have.attr", "placeholder", "Question");
+    cy.get('[id="item-1"]').should("have.attr", "placeholder", "Question");
 
     cy.get('[data-testid="description-text"]').should(
       "contain",
@@ -140,9 +124,7 @@ describe("Test FormBuilder Add Elements", () => {
     cy.get('[data-testid="number"]').click();
     cy.get("button").contains("Select block").click();
 
-    cy.get('[id="item-1"]')
-      .should("have.attr", "type", "text")
-      .should("have.attr", "placeholder", "Question");
+    cy.get('[id="item-1"]').should("have.attr", "placeholder", "Question");
 
     cy.get('[data-testid="description-text"]').should("contain", "Only enter numbers");
     cy.get('[data-testid="number"]').should("contain", "0123456789");

diff --git a/cypress/e2e/form-builder/autocomplete.cy.js b/cypress/e2e/form-builder/autocomplete.cy.js
@@ -65,16 +65,14 @@ describe("Test FormBuilder autocomplete props", () => {
   });
 
   autocompleteOptions.forEach((option) => {
-    it(`Adds a TextInput with ${option[0]} autocomplete`, () => {
+    it(`Adds a TextAreaInput with ${option[0]} autocomplete`, () => {
       cy.visit("/form-builder/edit");
       cy.get("button").contains("Add").click();
 
       cy.get('[data-testid="textField"]').click();
       cy.get("button").contains("Select block").click();
 
-      cy.get('[id="item-1"]')
-        .should("have.attr", "type", "text")
-        .should("have.attr", "placeholder", "Question");
+      cy.get('[id="item-1"]').should("have.attr", "placeholder", "Question");
 
       cy.get(".example-text").should("contain", "Short answer");
 

diff --git a/lib/middleware/cors.ts b/lib/middleware/cors.ts
@@ -57,7 +57,7 @@ export const cors = ({
       return { next: true };
     } catch (e) {
       logMessage.error(e as Error);
-      res.status(500).json({ error: "Malformed API Request" });
+      res.status(400).json({ error: "Malformed API Request" });
       return { next: false };
     }
   };

diff --git a/lib/middleware/csrfProtected.ts b/lib/middleware/csrfProtected.ts
@@ -4,27 +4,22 @@ import { getCsrfToken } from "next-auth/react";
 
 export const csrfProtected = (protectedMethods: string[]): MiddlewareRequest => {
   return async (req: NextApiRequest, res: NextApiResponse): Promise<MiddlewareReturn> => {
-    try {
-      if (isProtected(req, protectedMethods)) {
-        // Need to remove body from NextApiRequest due to Next-Auth bug
-        // Next-Auth sets the method Call based on if a Body is present on the request.
-        // This causes issues with CSRF protection so only required arguments are passed.
-        const clonedReq = { body: undefined, headers: req.headers };
+    if (isProtected(req, protectedMethods)) {
+      // Need to remove body from NextApiRequest due to Next-Auth bug
+      // Next-Auth sets the method Call based on if a Body is present on the request.
+      // This causes issues with CSRF protection so only required arguments are passed.
+      const clonedReq = { body: undefined, headers: req.headers };
 
-        const csrfToken = await getCsrfToken({ req: clonedReq });
-        if (csrfToken && csrfToken === req.headers["x-csrf-token"]) {
-          return { next: true };
-        } else {
-          res.status(403).json({ error: "Access Denied" });
-          return { next: false };
-        }
-      } else {
-        //allow unrestricted method
+      const csrfToken = await getCsrfToken({ req: clonedReq }).catch(() => null);
+      if (csrfToken && csrfToken === req.headers["x-csrf-token"]) {
         return { next: true };
+      } else {
+        res.status(403).json({ error: "Access Denied" });
+        return { next: false };
       }
-    } catch (error) {
-      res.status(500).json({ error: "Malformed API Request" });
-      return { next: false };
+    } else {
+      //allow unrestricted method
+      return { next: true };
     }
   };
 };