chore: use server action for bulk loader (#4877)

* move bulk loader to server action

Dockerfile

@@ -47,7 +47,6 @@ COPY prisma ./prisma
 COPY flag_initialization ./flag_initialization
 COPY --from=build /src/node_modules ./node_modules
 COPY --from=build /src/.next ./.next
-COPY form-builder-templates ./form-builder-templates
 
 
 

Dockerfile.pr

@@ -53,7 +53,6 @@ COPY package.json yarn.lock .yarnrc.yml next.config.mjs ./
 COPY .yarn ./.yarn
 COPY public ./public
 COPY prisma ./prisma
-COPY form-builder-templates ./form-builder-templates
 COPY bin/pr-review-entrypoint.sh ./entrypoint.sh
 # Update to latest yarn version
 RUN corepack enable && yarn set version berry

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

@@ -1,5 +1,7 @@
 "use server";
 
+import { promises as fs } from "fs";
+
 import { AuthenticatedAction } from "@lib/actions";
 import { getAbility } from "@lib/privileges";
 import {
@@ -26,6 +28,7 @@ import { serverTranslation } from "@i18n";
 import { revalidatePath } from "next/cache";
 import { checkOne } from "@lib/cache/flags";
 import { isValidDateString } from "@lib/utils/date/isValidDateString";
+import { allowedTemplates, TemplateTypes } from "@lib/utils/form-builder";
 
 export type CreateOrUpdateTemplateType = {
   id?: string;
@@ -405,3 +408,23 @@ export const getTranslatedDynamicRowProperties = async () => {
 export async function checkFlag(id: string) {
   return checkOne(id);
 }
+
+export const loadBlockTemplate = async ({
+  type,
+}: {
+  type: TemplateTypes;
+}): Promise<{
+  data?: [];
+  error?: string;
+}> => {
+  try {
+    if (!allowedTemplates.includes(type)) {
+      throw new Error("Invalid template type");
+    }
+    const dir = "public/static/templates";
+    const fileContents = await fs.readFile(dir + `/${type}.json`, "utf8");
+    return { data: JSON.parse(fileContents) };
+  } catch (error) {
+    return { data: [], error: (error as Error).message };
+  }
+};

lib/hooks/form-builder/useHandleAdd.tsx

@@ -2,8 +2,8 @@
 import { useCallback } from "react";
 import { FormElementTypes } from "@lib/types";
 import { useTemplateStore } from "@lib/store/useTemplateStore";
-import { blockLoader, LoaderType } from "../../utils/form-builder/blockLoader";
-import { allowedTemplates } from "@lib/utils/form-builder";
+import { blockLoader } from "../../utils/form-builder/blockLoader";
+import { allowedTemplates, TemplateTypes } from "@lib/utils/form-builder";
 import {
   defaultField,
   createElement,
@@ -16,6 +16,8 @@ import {
   getTranslatedDynamicRowProperties,
 } from "@formBuilder/actions";
 import { useTreeRef } from "@formBuilder/components/shared/right-panel/treeview/provider/TreeRefProvider";
+import { toast } from "@formBuilder/components/shared/Toast";
+import { useTranslation } from "@i18n/client";
 
 export const useHandleAdd = () => {
   const { add, addSubItem, setChangeKey } = useTemplateStore((s) => ({
@@ -24,6 +26,8 @@ export const useHandleAdd = () => {
     setChangeKey: s.setChangeKey,
   }));
 
+  const { t } = useTranslation("form-builder");
+
   const { treeView } = useTreeRef();
 
   const groupId = useGroupStore((state) => state.id);
@@ -52,16 +56,21 @@ export const useHandleAdd = () => {
     return item;
   }, []);
 
+  const loadError = t("failedToReadFormFile");
+
   /* Note this callback is also in ElementPanel */
   const handleAddElement = useCallback(
     async (index: number, type?: FormElementTypes) => {
       let id;
 
-      if (allowedTemplates.includes(type as LoaderType)) {
-        blockLoader(type as LoaderType, index, async (data, position) => {
-          // Note add() returns the element id -- we're not using it yet
-          id = await add(position, data.type, data, groupId);
-        });
+      if (allowedTemplates.includes(type as TemplateTypes)) {
+        try {
+          await blockLoader(type as TemplateTypes, index, async (data, position) => {
+            id = await add(position, data.type, data, groupId);
+          });
+        } catch (e) {
+          toast.error(loadError);
+        }
         return id;
       }
 
@@ -93,12 +102,16 @@ export const useHandleAdd = () => {
       const closeAll = new CustomEvent("close-all-panel-menus");
       window && window.dispatchEvent(closeAll);
 
-      if (allowedTemplates.includes(type as LoaderType)) {
-        blockLoader(type as LoaderType, subIndex, (data, position) => {
-          id = addSubItem(elId, position, data.type, data);
-          setChangeKey(String(new Date().getTime())); //Force a re-render
-        });
-        return id;
+      if (allowedTemplates.includes(type as TemplateTypes)) {
+        try {
+          blockLoader(type as TemplateTypes, subIndex, (data, position) => {
+            id = addSubItem(elId, position, data.type, data);
+            setChangeKey(String(new Date().getTime())); //Force a re-render
+          });
+          return id;
+        } catch (e) {
+          toast.error(loadError);
+        }
       }
 
       const item = await create(type as FormElementTypes);