Merge branch 'main' into adjust-max-repeating-sets

Author: timarney

app/(gcforms)/[locale]/(app administration)/admin/(with nav)/accounts/[id]/manage-user-features/components/client/AddUserFeatureModal.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "@i18n/client";
 import { useState } from "react";
 import { AppUser } from "@lib/types/user-types";
 import { setUserFlags } from "../../actions";
-
+import { useSession } from "next-auth/react";
 import { UserFeatureFlags, UserFeatureFlagKeys } from "@lib/cache/types";
 
 export const AddUserFeatureModal = ({
@@ -19,6 +19,7 @@ export const AddUserFeatureModal = ({
   const { t } = useTranslation("admin-flags");
   const [showModal, setShowModal] = useState(false);
   const [selectedFlags, setSelectedFlags] = useState<string[]>([]);
+  const { update: updateSession } = useSession();
 
   // Filter the list of flags to only include user level feature flags
   const availableFeatureFlags = flags.filter((flag) =>
@@ -31,10 +32,11 @@ export const AddUserFeatureModal = ({
     );
   };
 
-  const handleAdd = () => {
-    setUserFlags(formUser.id, selectedFlags);
+  const handleAdd = async () => {
+    await setUserFlags(formUser.id, selectedFlags);
     setShowModal(false);
     setSelectedFlags([]);
+    await updateSession();
   };
 
   const handleCancel = () => {

app/(gcforms)/[locale]/(app administration)/admin/(with nav)/accounts/[id]/manage-user-features/components/client/RemoveFeatureButton.tsx

@@ -3,12 +3,15 @@ import { Button } from "@clientComponents/globals";
 import { AppUser } from "@lib/types/user-types";
 import { useTranslation } from "@i18n/client";
 import { removeUserFlag } from "../../actions";
+import { useSession } from "next-auth/react";
 
 export const RemoveFeatureButton = ({ formUser, flag }: { formUser: AppUser; flag: string }) => {
   const { t } = useTranslation("admin-flags");
+  const { update: updateSession } = useSession();
 
   const handleRemove = async () => {
     await removeUserFlag(formUser.id, flag);
+    await updateSession();
   };
 
   return (

app/(gcforms)/[locale]/(form administration)/form-builder/Start.tsx

@@ -13,6 +13,8 @@ import { validateTemplateSize } from "@lib/utils/validateTemplateSize";
 import { ga } from "@lib/client/clientHelpers";
 import { validateUniqueQuestionIds } from "@lib/utils/validateUniqueQuestionIds";
 import { transformFormProperties } from "@lib/store/helpers/elements/transformFormProperties";
+import { BetaComponentsError, checkForBetaComponents } from "@lib/validation/betaCheck";
+import { useFeatureFlags } from "@lib/hooks/useFeatureFlags";
 
 export const Start = () => {
   const {
@@ -26,6 +28,7 @@ export const Start = () => {
   }));
 
   const [errors, setErrors] = useState<errorMessage[]>();
+  const { getFlag } = useFeatureFlags();
 
   // Prevent prototype pollution in JSON.parse https://stackoverflow.com/a/63927372
   const cleaner = (key: string, value: string) =>
@@ -78,10 +81,18 @@ export const Start = () => {
           return;
         }
 
-        importTemplate(data);
+        try {
+          checkForBetaComponents(data.elements, getFlag);
 
-        ga("open_form_file");
-        router.push(`/${language}/form-builder/0000/preview`);
+          importTemplate(data);
+
+          ga("open_form_file");
+          router.push(`/${language}/form-builder/0000/preview`);
+        } catch (e) {
+          if (e instanceof BetaComponentsError) {
+            setErrors([{ message: t("beta.loadingError") }]);
+          }
+        }
       };
     } catch (e) {
       if (e instanceof Error) {
@@ -99,9 +110,11 @@ export const Start = () => {
       <div role="alert">
         {errors && (
           <div className="m-auto mb-8 flex w-5/12 bg-red-100 p-6">
-            <WarningIcon />
             <div>
-              <h3 className="mb-2 ml-6 mt-1">{t("failedToReadFormFile")}</h3>
+              <WarningIcon className="mt-1" />
+            </div>
+            <div>
+              <h3 className="mb-2 ml-6">{t("failedToReadFormFile")}</h3>
               <ul className="mb-4 list-none pl-6">
                 {errors.map((error, index) => {
                   return (

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/components/elements/element-dialog/descriptions/FileInput.tsx

@@ -53,8 +53,8 @@ export const FileInputTrialDescription = () => {
         <li>
           <Link href={link}>{t("addElementDialog.fileInputWithApi.trialFeature.bullet1")}</Link>
         </li>
+        <li>{t("addElementDialog.fileInputWithApi.trialFeature.bullet2")}</li>
         <li>{t("addElementDialog.fileInputWithApi.trialFeature.bullet3")}</li>
-        <li>{t("addElementDialog.fileInputWithApi.trialFeature.bullet4")}</li>
       </ul>
     </div>
   );

app/(gcforms)/[locale]/(form administration)/form-builder/actions.ts

@@ -62,8 +62,6 @@ export const createOrUpdateTemplate = AuthenticatedAction(
     error?: string;
   }> => {
     try {
-      revalidatePath("/[locale]/forms", "page");
-
       if (id) {
         return await updateTemplate({
           id,
@@ -88,6 +86,9 @@ export const createOrUpdateTemplate = AuthenticatedAction(
       if (!formRecord) {
         throw new Error("Failed to create template");
       }
+      // revalidatePath must be at the end of a function.  It leverages the error object to trigger
+      // and internal refresh and can have awkward results if used before an error is thrown by a following fn.
+      revalidatePath("/[locale]/forms", "page");
 
       return { formRecord: { id: formRecord.id, updatedAt: formRecord.updatedAt } };
     } catch (_) {

app/(gcforms)/[locale]/(form filler)/id/[...props]/actions.ts

@@ -56,7 +56,7 @@ export async function submitForm(
 
     const hCaptchaBlockingMode = await checkOne(FeatureFlags.hCaptcha);
     // Skip hCaptcha verification for form-builder Preview (drafts)
-    if (template?.isPublished) {
+    if (template?.isPublished && process.env.APP_ENV !== "test") {
       // hCaptcha runs regardless but only block submissions if the feature flag is enabled
       const captchaVerified = await verifyHCaptchaToken(captchaToken || "");
       if (hCaptchaBlockingMode && !captchaVerified) {

app/(gcforms)/[locale]/(user authentication)/auth/mfa/components/client/MFAForm.tsx

@@ -13,7 +13,7 @@ import { ToastContainer } from "@formBuilder/components/shared/Toast";
 import { useFocusIt } from "@lib/hooks/useFocusIt";
 import { Loader } from "@clientComponents/globals/Loader";
 import { useRouter } from "next/navigation";
-import { updateSessionProvider } from "@lib/hooks/auth/updateSessionProvider";
+import { useSession } from "next-auth/react";
 
 export const MFAForm = () => {
   const {
@@ -30,6 +30,7 @@ export const MFAForm = () => {
   const [isReady, setIsReady] = useState(false);
   const [isSubmittingStep1, setIsSubmittingStep1] = useState(false);
   const [isSubmittingStep2, setIsSubmittingStep2] = useState(false);
+  const { update: sessionUpdate } = useSession();
 
   const authToken = useRef<{ email?: string; authenticationFlowToken?: string }>({});
 
@@ -52,7 +53,7 @@ export const MFAForm = () => {
     if (mfaState.success) {
       setIsSubmittingStep2(true);
       // Let the Session Provider know that the user has been authenticated
-      updateSessionProvider();
+      sessionUpdate();
       sessionStorage.removeItem("authFlowToken");
       const result = await getRedirectPath(language);
       if (result.callback) router.push(result.callback);

app/(gcforms)/[locale]/(user authentication)/auth/policy/components/client/AcceptButton.tsx

@@ -7,6 +7,36 @@ import { useState } from "react";
 import { useSession } from "next-auth/react";
 import { SubmitButton } from "@clientComponents/globals/Buttons/SubmitButton";
 
+// Needed for Cypress E2E testing for some reason
+// The broadcast should be called as part of the useSession update() fn but doesn't seem to be registering
+
+let broadcastChannel: BroadcastChannel | null = null;
+
+function broadcast() {
+  if (typeof BroadcastChannel === "undefined") {
+    return {
+      postMessage: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    };
+  }
+
+  if (broadcastChannel === null) {
+    broadcastChannel = new BroadcastChannel("next-auth");
+  }
+
+  return broadcastChannel;
+}
+
+export const updateSessionProvider = () => {
+  broadcast().postMessage({
+    event: "session",
+    data: { trigger: "getSession" },
+  });
+};
+
+// End of code needed for Cypress Testing
+
 export const AcceptButton = () => {
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
@@ -29,6 +59,9 @@ export const AcceptButton = () => {
       user: { acceptableUse: true },
     });
 
+    // Needed for cypress e2e testing
+    updateSessionProvider();
+
     if (session?.user.newlyRegistered) {
       router.push(`/${language}/auth/account-created`);
     } else {

app/(gcforms)/[locale]/layout.tsx

@@ -1,18 +1,11 @@
 import { auth } from "@lib/auth";
 import { ClientContexts } from "@clientComponents/globals/ClientContexts";
 import { ReactHydrationCheck } from "@clientComponents/globals";
-import { getSomeFlags } from "@lib/cache/flags";
-import { FeatureFlags } from "@lib/cache/types";
+import { checkAll } from "@lib/cache/flags";
 
 export default async function Layout({ children }: { children: React.ReactNode }) {
   const session = await auth();
-  const featureFlags = await getSomeFlags([
-    FeatureFlags.addressComplete,
-    FeatureFlags.formTimer,
-    FeatureFlags.hCaptcha,
-    FeatureFlags.topBanner,
-    FeatureFlags.fileUpload,
-  ]);
+  const featureFlags = await checkAll();
 
   return (
     <>

components/clientComponents/forms/FormattedDate/FormattedDate.cy.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Formik } from "formik";
 import { FormattedDate } from "./FormattedDate";
+import { DateFormat } from "./types";
 
 describe("<FormattedDate />", () => {
   it("mounts", () => {
@@ -106,7 +107,7 @@ describe("<FormattedDate />", () => {
           throw new Error("Function not implemented.");
         }}
       >
-        <FormattedDate name="formattedDate" dateFormat="XXXX-XX-XX" />
+        <FormattedDate name="formattedDate" dateFormat={"XXXX-XX-XX" as unknown as DateFormat} />
       </Formik>
     );