Schema start wizard

src/apps/schema/src/app/main.js

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { Switch, Route, useRouteMatch } from "react-router-dom";
+import { Switch, Route, useRouteMatch, Redirect } from "react-router-dom";
 import { WithLoader } from "@zesty-io/core/WithLoader";
 
 import { SchemaNav } from "./components/Nav";
@@ -13,6 +13,7 @@ import { fetchSettings } from "shell/store/settings";
 import { notify } from "shell/store/notifications";
 
 import styles from "./main.less";
+import { SchemaCreateWizard } from "./views/SchemaCreateWizard";
 export default function SchemaBuilder() {
   const match = useRouteMatch("/schema/start");
   const showNav = match && match.isExact;
@@ -45,7 +46,7 @@ export default function SchemaBuilder() {
       width="100vw"
       height="100vh"
     >
-      <Route path="/schema/start" component={GettingStarted} />
+      <Route path="/schema/start" component={SchemaCreateWizard} />
       <section className={styles.SchemaBuilder}>
         {!showNav ? <SchemaNav nav={navSchema} /> : ""}
         <div className={styles.SchemaMain}>

src/apps/schema/src/app/views/SchemaCreateWizard.tsx

@@ -0,0 +1,195 @@
+import { useEffect, useState } from "react";
+import {
+  Box,
+  Button,
+  Backdrop,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  Typography,
+  ListItemButton,
+  ListItemText,
+  DialogActions,
+  CircularProgress,
+} from "@mui/material";
+import { theme } from "@zesty-io/material";
+import { ThemeProvider } from "@mui/material/styles";
+import EditIcon from "@mui/icons-material/Edit";
+import winnerPanel from "../../../../../../public/images/winnerPanel.svg";
+import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
+import NewspaperRoundedIcon from "@mui/icons-material/NewspaperRounded";
+import WebRoundedIcon from "@mui/icons-material/WebRounded";
+import { useCreateContentModelFromTemplateMutation } from "../../../../../shell/services/instance";
+import { AppState } from "../../../../../shell/store/types";
+import { useSelector, useDispatch } from "react-redux";
+import { fetchModels } from "../../../../../shell/store/models";
+import { notify } from "../../../../../shell/store/notifications";
+import { useHistory } from "react-router";
+
+const templates = [
+  {
+    title: "Blog",
+    description:
+      "Perfect for blogging with title, body content, feature image, and category fields.",
+    repository: "https://github.com/zesty-io/module-boostrap-5.2-blog",
+    // This variable is used to determine which content model should be used to create the content item
+    mainName: "module_blog",
+    icon: <NewspaperRoundedIcon color="action" />,
+  },
+  // {
+  //   title: "E Commerce",
+  //   description: "A schema consisting of models for products, and categories.",
+  //   repository: "https://github.com/zesty-io/module-bootstrap-5.2-products",
+  //   icon: <ShoppingCartIcon color="action" />,
+  //   mainName: "",
+  // },
+  // {
+  //   title: "Documentation",
+  //   description:
+  //     "Perfect for writing official docs for your product or developers.",
+  // },
+  {
+    title: "Landing Page",
+    description:
+      "A simple landing page with fields for a hero, feature, and footer section.",
+    repository: "https://github.com/zesty-io/module-bootstrap-5.2-landing-page",
+    icon: <WebRoundedIcon color="action" />,
+    mainName: "module_modern_business",
+  },
+];
+
+export const SchemaCreateWizard = () => {
+  const history = useHistory();
+  const instance = useSelector((state: AppState) => state.instance);
+  const models = useSelector((state: AppState) => state.models);
+  const dispatch = useDispatch();
+  const [selectedTemplateIndex, setSelectedTemplateIndex] = useState(null);
+  const [createContentModelFromTemplate, { isLoading, isSuccess }] =
+    useCreateContentModelFromTemplateMutation();
+
+  const handleNext = () => {
+    createContentModelFromTemplate({
+      instance_zuid: instance.ZUID,
+      repository: templates[selectedTemplateIndex].repository,
+      parent_zuid: "0",
+    })
+      .unwrap()
+      .then((res) => dispatch(fetchModels()))
+      .catch((res) => {
+        dispatch(notify({ kind: "error", message: res?.data?.message }));
+      });
+  };
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Box width="100%" height="100%"></Box>
+      <Backdrop open={isLoading} sx={{ flexDirection: "column" }}>
+        <CircularProgress />
+        <Typography sx={{ mt: 2 }} variant="h4" color="common.white">
+          Creating Model
+        </Typography>
+      </Backdrop>
+      <Dialog
+        open={!isLoading && !isSuccess}
+        PaperProps={{
+          sx: {
+            borderRadius: "8px",
+            minWidth: "640px",
+          },
+        }}
+      >
+        <DialogTitle>
+          Select a Schema Collections
+          <Typography color="text.secondary">
+            Start from one of our many schema collections to better understand
+            our product
+          </Typography>
+        </DialogTitle>
+        <DialogContent dividers>
+          <Box display="flex" flexWrap="wrap" gap={2} mt={3}>
+            {templates.map((template, index) => (
+              <ListItemButton
+                key={index}
+                selected={selectedTemplateIndex === index}
+                onClick={() => setSelectedTemplateIndex(index)}
+                sx={{
+                  border: (theme) =>
+                    `1px solid ${
+                      selectedTemplateIndex === index
+                        ? theme.palette.primary.main
+                        : theme.palette.border
+                    }`,
+                  borderRadius: "4px",
+                  p: 2,
+                  maxWidth: "282px",
+                  alignItems: "flex-start",
+                  flexDirection: "column",
+                  svg: {
+                    color: selectedTemplateIndex === index && "primary.main",
+                  },
+                }}
+              >
+                <Box>{template.icon}</Box>
+                <ListItemText
+                  primary={template.title}
+                  secondary={template.description}
+                  primaryTypographyProps={{ fontWeight: 700, variant: "body2" }}
+                  secondaryTypographyProps={{ color: "text.secondary" }}
+                />
+              </ListItemButton>
+            ))}
+          </Box>
+        </DialogContent>
+        <DialogActions sx={{ pt: 2 }}>
+          <Button
+            variant="contained"
+            onClick={handleNext}
+            disabled={selectedTemplateIndex === null}
+          >
+            Next
+          </Button>
+        </DialogActions>
+      </Dialog>
+      <Dialog
+        open={!isLoading && isSuccess}
+        PaperProps={{
+          sx: {
+            borderRadius: "8px",
+            minWidth: "640px",
+          },
+        }}
+      >
+        <Box height="100%" textAlign="center" sx={{ py: 4, px: 8 }}>
+          <img width="240px" height="160px" src={winnerPanel} />
+          <Typography variant="h1" fontWeight={600} sx={{ mt: 3 }}>
+            Your Models for Your {templates[selectedTemplateIndex]?.title} are
+            Now Built!
+          </Typography>
+          <Button
+            variant="contained"
+            sx={{ mt: 3 }}
+            startIcon={<EditIcon />}
+            onClick={() =>
+              history.push(
+                `/content/${
+                  Object.values(models).find(
+                    (model: any) =>
+                      model.name === templates[selectedTemplateIndex].mainName
+                    // @ts-ignore
+                  )?.ZUID
+                }/new`
+              )
+            }
+          >
+            Enter a Content Entry
+          </Button>
+          {/* <Box width="240px" p={2} sx={{backgroundColor: 'grey.50'}}>
+            <Typography variant="h6" fontWeight={600}>
+            Your Model has the following fields:
+            </Typography>
+          </Box> */}
+        </Box>
+      </Dialog>
+    </ThemeProvider>
+  );
+};

src/index.html

@@ -63,7 +63,7 @@
 
     <link
       rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Mulish"
+      href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700"
     />
 
     <style type="text/css">

src/shell/app.config.js

@@ -22,6 +22,7 @@ module.exports = {
       "https://us-central1-zesty-prod.cloudfunctions.net/authenticateGoogleAnalytics",
     SERVICE_GOOGLE_ANALYTICS_READ:
       "https://us-central1-zesty-prod.cloudfunctions.net/googleAnalyticsGetPageViews",
+    SERVICE_INSTANCE_INSTALLER: "https://installer-xytrmaqk4a-uc.a.run.app",
 
     // FIXME: This is a workaround to solve for the FieldTypeImage dependence on this object path reference
     service: {
@@ -66,6 +67,7 @@ module.exports = {
       "https://us-central1-zesty-stage.cloudfunctions.net/authenticateGoogleAnalytics",
     SERVICE_GOOGLE_ANALYTICS_READ:
       "https://us-central1-zesty-stage.cloudfunctions.net/googleAnalyticsGetPageViews",
+    SERVICE_INSTANCE_INSTALLER: "https://installer-m3rbwjxm5q-uc.a.run.app",
 
     URL_MANAGER: ".manager.stage.zesty.io",
     URL_MANAGER_PROTOCOL: "https://",
@@ -105,6 +107,7 @@ module.exports = {
       "https://us-central1-zesty-dev.cloudfunctions.net/authenticateGoogleAnalytics",
     SERVICE_GOOGLE_ANALYTICS_READ:
       "https://us-central1-zesty-dev.cloudfunctions.net/googleAnalyticsGetPageViews",
+    SERVICE_INSTANCE_INSTALLER: "https://installer-m3rbwjxm5q-uc.a.run.app",
 
     // FIXME: This is a workaround to solve for the FieldTypeImage dependence on this object path reference
     service: {
@@ -146,6 +149,7 @@ module.exports = {
       "https://us-central1-zesty-dev.cloudfunctions.net/authenticateGoogleAnalytics",
     SERVICE_GOOGLE_ANALYTICS_READ:
       "https://us-central1-zesty-dev.cloudfunctions.net/googleAnalyticsGetPageViews",
+    SERVICE_INSTANCE_INSTALLER: "https://installer-m3rbwjxm5q-uc.a.run.app",
 
     // FIXME: This is a workaround to solve for the FieldTypeImage dependence on this object path reference
     service: {

src/shell/components/global-notifications/GlobalNotifications.less

@@ -43,7 +43,8 @@
     padding: 10px;
     min-width: 200px;
     max-width: 500px;
-    z-index: 100;
+    // Matches MUI Snackbar z-index
+    z-index: 1400;
     width: fit-content;
     display: flex;
     align-items: center;

src/shell/services/instance.ts

@@ -12,7 +12,7 @@ export const instanceApi = createApi({
     baseUrl: `${__CONFIG__.API_INSTANCE_PROTOCOL}${instanceZUID}${__CONFIG__.API_INSTANCE}`,
     prepareHeaders,
   }),
-  tagTypes: ["ItemPublishing"],
+  tagTypes: ["ItemPublishing", "ContentModels"],
   endpoints: (builder) => ({
     getItemPublishings: builder.query<
       Publishing[],
@@ -103,6 +103,18 @@ export const instanceApi = createApi({
       query: () => `env/langs/all`,
       transformResponse: getResponseData,
     }),
+    createContentModelFromTemplate: builder.mutation<
+      any,
+      { instance_zuid: string; repository: string; parent_zuid: string }
+    >({
+      query: (body) => ({
+        // @ts-ignore
+        url: `${CONFIG.SERVICE_INSTANCE_INSTALLER}/install/model`,
+        method: "POST",
+        body,
+      }),
+      invalidatesTags: ["ContentModels"],
+    }),
   }),
 });
 
@@ -118,4 +130,5 @@ export const {
   useGetContentModelItemsQuery,
   useGetContentItemPublishingsQuery,
   useGetLangsMappingQuery,
+  useCreateContentModelFromTemplateMutation,
 } = instanceApi;