diff --git a/src/apps/schema/src/appRevamp/components/FieldList.tsx b/src/apps/schema/src/appRevamp/components/FieldList.tsx index 4d362909e2..66a68f57a7 100644 --- a/src/apps/schema/src/appRevamp/components/FieldList.tsx +++ b/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(); const { id } = params; const [search, setSearch] = useState(""); @@ -175,6 +178,7 @@ export const FieldList = () => { variant="outlined" startIcon={} fullWidth + onClick={onNewFieldModalClick} > Add Another Field to {model?.label} diff --git a/src/apps/schema/src/appRevamp/components/ModelHeader/index.tsx b/src/apps/schema/src/appRevamp/components/ModelHeader/index.tsx index 34c8ac5723..bed16a6a53 100644 --- a/src/apps/schema/src/appRevamp/components/ModelHeader/index.tsx +++ b/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(); const { id } = params; const { data: models } = useGetContentModelsQuery(); @@ -58,7 +58,7 @@ export const ModelHeader = () => { size="small" variant="contained" startIcon={} - onClick={() => setAddFieldModalOpen(true)} + onClick={onNewFieldModalClick} disabled={!isFieldsLoaded} > Add Field @@ -103,9 +103,6 @@ export const ModelHeader = () => { - {isAddFieldModalOpen && ( - - )} ); }; diff --git a/src/apps/schema/src/appRevamp/views/Model.tsx b/src/apps/schema/src/appRevamp/views/Model.tsx index 59127eb553..f27981217f 100644 --- a/src/apps/schema/src/appRevamp/views/Model.tsx +++ b/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(); const { id } = params; return ( - + setAddFieldModalOpen(true)} /> - } /> + ( + setAddFieldModalOpen(true)} + /> + )} + /> { /> + {isAddFieldModalOpen && ( + + )} ); };