Schema: Wire add field at end of model

src/apps/schema/src/appRevamp/components/FieldList.tsx

@@ -24,7 +24,10 @@ type Params = {
   id: string;
 };
 
-export const FieldList = () => {
+interface Props {
+  onNewFieldModalClick: () => void;
+}
+export const FieldList = ({ onNewFieldModalClick }: Props) => {
   const params = useParams<Params>();
   const { id } = params;
   const [search, setSearch] = useState("");
@@ -175,6 +178,7 @@ export const FieldList = () => {
                 variant="outlined"
                 startIcon={<AddRoundedIcon />}
                 fullWidth
+                onClick={onNewFieldModalClick}
               >
                 Add Another Field to {model?.label}
               </Button>

src/apps/schema/src/appRevamp/components/ModelHeader/index.tsx

@@ -11,8 +11,6 @@ import moment from "moment";
 import SplitscreenRoundedIcon from "@mui/icons-material/SplitscreenRounded";
 import RemoveRedEyeRoundedIcon from "@mui/icons-material/RemoveRedEyeRounded";
 
-import { AddFieldModal } from "../AddFieldModal";
-
 type Params = {
   id: string;
 };
@@ -23,8 +21,10 @@ const modelTypeName = {
   dataset: "Headless Data Item",
 };
 
-export const ModelHeader = () => {
-  const [isAddFieldModalOpen, setAddFieldModalOpen] = useState(false);
+interface Props {
+  onNewFieldModalClick: () => void;
+}
+export const ModelHeader = ({ onNewFieldModalClick }: Props) => {
   const params = useParams<Params>();
   const { id } = params;
   const { data: models } = useGetContentModelsQuery();
@@ -58,7 +58,7 @@ export const ModelHeader = () => {
                 size="small"
                 variant="contained"
                 startIcon={<AddRoundedIcon />}
-                onClick={() => setAddFieldModalOpen(true)}
+                onClick={onNewFieldModalClick}
                 disabled={!isFieldsLoaded}
               >
                 Add Field
@@ -103,9 +103,6 @@ export const ModelHeader = () => {
           </Tabs>
         </Box>
       </Box>
-      {isAddFieldModalOpen && (
-        <AddFieldModal mode="fields_list" onModalClose={setAddFieldModalOpen} />
-      )}
     </>
   );
 };

src/apps/schema/src/appRevamp/views/Model.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { Box } from "@mui/material";
 import { Redirect, Route, Switch, useParams, useHistory } from "react-router";
 import { useGetContentModelsQuery } from "../../../../../shell/services/instance";
@@ -9,15 +10,24 @@ type Params = {
   id: string;
 };
 export const Model = () => {
+  const [isAddFieldModalOpen, setAddFieldModalOpen] = useState(false);
   const history = useHistory();
   const params = useParams<Params>();
   const { id } = params;
 
   return (
     <Box flex="1" display="flex" height="100%" flexDirection="column">
-      <ModelHeader />
+      <ModelHeader onNewFieldModalClick={() => setAddFieldModalOpen(true)} />
       <Switch>
-        <Route exact path="/schema/:id/fields" render={() => <FieldList />} />
+        <Route
+          exact
+          path="/schema/:id/fields"
+          render={() => (
+            <FieldList
+              onNewFieldModalClick={() => setAddFieldModalOpen(true)}
+            />
+          )}
+        />
         <Route
           exact
           path="/schema/:id/fields/:fieldId"
@@ -35,6 +45,9 @@ export const Model = () => {
         />
         <Redirect to="/schema/:id/fields" />
       </Switch>
+      {isAddFieldModalOpen && (
+        <AddFieldModal mode="fields_list" onModalClose={setAddFieldModalOpen} />
+      )}
     </Box>
   );
 };