fix(app-form-builder): force array check before mapping arrays

Author: brunozoric

packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditFieldDialog.tsx

@@ -1,26 +1,27 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import cloneDeep from "lodash/cloneDeep";
 import { css } from "emotion";
 import styled from "@emotion/styled";
 import {
     Dialog,
-    DialogContent,
-    DialogTitle,
-    DialogCancel,
     DialogActions,
-    DialogButton
+    DialogButton,
+    DialogCancel,
+    DialogContent,
+    DialogTitle
 } from "@webiny/ui/Dialog";
 import { Form, FormOnSubmit } from "@webiny/form";
 import { plugins } from "@webiny/plugins";
-import { Tabs, Tab } from "@webiny/ui/Tabs";
+import { Tab, Tabs } from "@webiny/ui/Tabs";
 import GeneralTab from "./EditFieldDialog/GeneralTab";
 import ValidatorsTab from "./EditFieldDialog/ValidatorsTab";
 import FieldTypeSelector from "./EditFieldDialog/FieldTypeSelector";
 import { i18n } from "@webiny/app/i18n";
-const t = i18n.namespace("FormEditor.EditFieldDialog");
 import { useFormEditor } from "../../Context";
 import { FbBuilderFieldPlugin, FbFormModelField } from "~/types";
 
+const t = i18n.namespace("FormEditor.EditFieldDialog");
+
 const dialogBody = css({
     "&.webiny-ui-dialog__content": {
         width: 875,

packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditTab.tsx

@@ -21,7 +21,7 @@ export const EditTab = () => {
     return (
         <EditContainer>
             <FieldErrors errors={errors} />
-            {data.steps.map((formStep: FbFormStep, index: number) => (
+            {(data.steps || []).map((formStep: FbFormStep, index: number) => (
                 <EditTabStep
                     key={`edit-tab-step${index}`}
                     formStep={formStep}

packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/FormStep/FormStepWithFields.tsx

@@ -10,7 +10,7 @@ export interface FormStepWithFieldsProps {
 export const FormStepWithFields = ({ fields, formStep }: FormStepWithFieldsProps) => {
     return (
         <React.Fragment>
-            {fields.map((row, rowIndex) => (
+            {(fields || []).map((row, rowIndex) => (
                 <FormStepRow
                     key={`row-${rowIndex}`}
                     row={row}

packages/app-form-builder/src/admin/plugins/formDetails/formSubmissions/FormSubmissionsList/FormSubmissionsList.tsx

@@ -107,10 +107,10 @@ export const FormSubmissionsList = ({ form }: FormSubmissionsListProps) => {
                         pagination: true
                     }}
                 >
-                    {({ data = [] }: { data: FbFormSubmissionData[] }) => (
+                    {({ data }: { data: FbFormSubmissionData[] }) => (
                         <>
                             <Scrollbar onScrollFrame={scrollFrame => loadMoreOnScroll(scrollFrame)}>
-                                {data.map(submission => {
+                                {(data || []).map(submission => {
                                     const submittedOn = submission.meta
                                         ? new Date(submission.meta.submittedOn)
                                         : new Date();

packages/app-form-builder/src/admin/views/Forms/FormsDataList.tsx

@@ -283,9 +283,9 @@ const FormsDataList = (props: FormsDataListProps) => {
             modalOverlay={formsDataListModalOverlay}
             modalOverlayAction={<DataListModalOverlayAction icon={<FilterIcon />} />}
         >
-            {({ data = [] }: { data: FbFormModel[] }) => (
+            {({ data }: { data: FbFormModel[] | null }) => (
                 <List data-testid="default-data-list">
-                    {data.map(form => {
+                    {(data || []).map(form => {
                         const name = form.createdBy.displayName;
                         return (
                             <ListItem

packages/app-form-builder/src/page-builder/admin/plugins/components/FormElementAdvancedSettings.tsx

@@ -1,6 +1,5 @@
 import React, { useMemo } from "react";
 import { useLazyQuery, useQuery } from "@apollo/react-hooks";
-import get from "lodash/get";
 import { Cell, Grid } from "@webiny/ui/Grid";
 import { Alert } from "@webiny/ui/Alert";
 import { AutoComplete } from "@webiny/ui/AutoComplete";
@@ -20,7 +19,6 @@ import {
     ListFormsQueryResponse
 } from "./graphql";
 import { BindComponent, FormOnSubmit } from "@webiny/form";
-import { FbRevisionModel } from "~/types";
 
 const FormOptionsWrapper = styled("div")({
     minHeight: 250
@@ -96,10 +94,10 @@ const FormElementAdvancedSettings = ({ Bind, submit, data }: FormElementAdvanced
             value: null
         };
 
-        if (getQuery.data) {
-            const publishedRevisions = (
-                get(getQuery, "data.formBuilder.getFormRevisions.data") as FbRevisionModel[]
-            ).filter(revision => revision.published);
+        if (getQuery.data?.formBuilder?.getFormRevisions?.data) {
+            const publishedRevisions = getQuery.data.formBuilder.getFormRevisions.data.filter(
+                revision => revision.published
+            );
             output.options = publishedRevisions.map(item => ({
                 id: item.id,
                 name: `${item.name} (version ${item.version})`