#464 Home page among many other things

API/Backend/Config/uuids.js

@@ -9,13 +9,17 @@ const populateUUIDs = (config) => {
 
   // Track of all of the previously defined UUIDs (i.e. ignore the UUIDs of the newly added layers)
   Utils.traverseLayers(config.layers, (layer) => {
-    if (layer.uuid != null && !layer.proposed_uuid) {
+    if (
+      layer.uuid != null &&
+      typeof layer.uuid !== "number" &&
+      !layer.proposed_uuid
+    ) {
       definedUUIDs.push(layer.uuid);
     }
   });
 
   Utils.traverseLayers(config.layers, (layer) => {
-    if (layer.uuid == null) {
+    if (layer.uuid == null || typeof layer.uuid === "number") {
       layer.uuid = uuidv4();
       newlyAddedUUIDs.push({
         name: layer.name,

configure/src/components/Main/Main.js

@@ -37,6 +37,7 @@ import UserInterface from "../Tabs/UserInterface/UserInterface";
 import APITokens from "../../pages/APITokens/APITokens";
 import GeoDatasets from "../../pages/GeoDatasets/GeoDatasets";
 import Datasets from "../../pages/Datasets/Datasets";
+import WebHooks from "../../pages/WebHooks/WebHooks";
 
 const useStyles = makeStyles((theme) => ({
   Main: {
@@ -163,6 +164,9 @@ export default function Main() {
     case "api_tokens":
       Page = <APITokens />;
       break;
+    case "webhooks":
+      Page = <WebHooks />;
+      break;
     default:
   }
 

configure/src/components/Panel/Modals/NewMissionModal/NewMissionModal.js

@@ -76,7 +76,6 @@ const useStyles = makeStyles((theme) => ({
   subtitle: {
     fontSize: "14px !important",
     width: "100%",
-    textAlign: "right",
     marginBottom: "8px !important",
     color: theme.palette.swatches.grey[300],
     letterSpacing: "0.2px",
@@ -129,7 +128,10 @@ const NewMissionModal = (props) => {
 
     calls.api(
       "add",
-      null,
+      {
+        mission: missionName,
+        makedir: createDir,
+      },
       (res) => {
         calls.api(
           "missions",

configure/src/components/Panel/Panel.js

@@ -6,7 +6,12 @@ import mmgisLogo from "../../images/mmgis.png";
 
 import clsx from "clsx";
 
-import { setMission, setModal, setPage } from "../../core/ConfigureStore";
+import {
+  setConfiguration,
+  setMission,
+  setModal,
+  setPage,
+} from "../../core/ConfigureStore";
 
 import NewMissionModal from "./Modals/NewMissionModal/NewMissionModal";
 
@@ -177,6 +182,7 @@ export default function Panel() {
             disableElevation
             startIcon={<ShapeLineIcon size="small" />}
             onClick={() => {
+              dispatch(setMission(null));
               dispatch(setPage({ page: "geodatasets" }));
             }}
           >
@@ -188,6 +194,7 @@ export default function Panel() {
             disableElevation
             startIcon={<TextSnippetIcon size="small" />}
             onClick={() => {
+              dispatch(setMission(null));
               dispatch(setPage({ page: "datasets" }));
             }}
           >
@@ -199,6 +206,7 @@ export default function Panel() {
             disableElevation
             startIcon={<KeyIcon size="small" />}
             onClick={() => {
+              dispatch(setMission(null));
               dispatch(setPage({ page: "api_tokens" }));
             }}
           >
@@ -210,6 +218,7 @@ export default function Panel() {
             disableElevation
             startIcon={<PhishingIcon size="small" />}
             onClick={() => {
+              dispatch(setMission(null));
               dispatch(setPage({ page: "webhooks" }));
             }}
           >

configure/src/components/SaveBar/Modals/PreviewModal/PreviewModal.js

@@ -154,7 +154,11 @@ const PreviewModal = (props) => {
         <div className={c.flexBetween}>
           <div className={c.flexBetween}>
             <PreviewIcon className={c.backgroundIcon} />
-            <div className={c.title}>Previewing Changes</div>
+            <div className={c.title}>
+              {modal?.customConfig != null
+                ? `Previewing Configuration v${modal.version}`
+                : "Previewing Changes"}
+            </div>
           </div>
           <IconButton
             className={c.closeIcon}
@@ -167,7 +171,7 @@ const PreviewModal = (props) => {
         </div>
       </DialogTitle>
       <DialogContent className={c.content}>
-        <MMGIS configuration={configuration} />
+        <MMGIS configuration={modal?.customConfig || configuration} />
       </DialogContent>
     </Dialog>
   );

configure/src/components/Tabs/Home/Home.js

@@ -4,60 +4,193 @@ import { setVersions } from "./HomeSlice";
 import { makeStyles } from "@mui/styles";
 
 import { calls } from "../../../core/calls";
+import { downloadObject } from "../../../core/utils";
 import Maker from "../../../core/Maker";
-import { setSnackBarText } from "../../../core/ConfigureStore";
+import { setSnackBarText, setModal } from "../../../core/ConfigureStore";
+
+import Versions from "./Versions";
+
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+
+import BrowserUpdatedIcon from "@mui/icons-material/BrowserUpdated";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import UploadIcon from "@mui/icons-material/Upload";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
 
 import config from "../../../metaconfigs/tab-home-config.json";
+import UploadConfigModal from "./Modals/UploadConfigModal/UploadConfigModal";
+import CloneConfigModal from "./Modals/CloneConfigModal/CloneConfigModal";
+import DeleteConfigModal from "./Modals/DeleteConfigModal/DeleteConfigModal";
 
 const useStyles = makeStyles((theme) => ({
   Home: {
     width: "100%",
     display: "flex",
+    flexFlow: "column",
     background: theme.palette.swatches.grey[1000],
     padding: "0px 32px 64px 32px",
     boxSizing: "border-box",
     backgroundImage: "url(configure/build/gridlines.png)",
   },
+  top: {
+    display: "flex",
+    justifyContent: "space-between",
+    margin: "20px 0px 8px 0px",
+  },
+  title: {
+    letterSpacing: "2px",
+    color: theme.palette.swatches.p[0],
+    textShadow: `0px 2px 1px ${theme.palette.swatches.grey[300]}`,
+    fontSize: "48px",
+    margin: 0,
+  },
+  right: {
+    display: "flex",
+  },
+  exportIcon: {
+    color: `${theme.palette.swatches.p[11]} !important`,
+    width: "40px",
+    height: "40px",
+    margin: "9px !important",
+  },
+  uploadIcon: {
+    width: "40px",
+    height: "40px",
+    margin: "9px !important",
+  },
+  cloneIcon: {
+    color: `${theme.palette.accent.main} !important`,
+    width: "40px",
+    height: "40px",
+    margin: "9px !important",
+  },
+  deleteIcon: {
+    color: `${theme.palette.swatches.red[500]} !important`,
+    width: "40px",
+    height: "40px",
+    margin: "9px !important",
+  },
 }));
 
 export default function Home() {
   const c = useStyles();
 
   const dispatch = useDispatch();
   const mission = useSelector((state) => state.core.mission);
-  const versions = useSelector((state) => state.home.versions);
+  const configuration = useSelector((state) => state.core.configuration);
 
-  useEffect(() => {
+  const queryVersions = () => {
     if (mission != null)
       calls.api(
         "versions",
         { mission: mission },
         (res) => {
+          const v = res?.versions || [];
+          if (v.length > 0) v[v.length - 1].current = true;
           dispatch(setVersions(res?.versions || []));
         },
         (res) => {
           dispatch(
             setSnackBarText({
-              text: res?.message || "Failed to get history for mission.",
+              text:
+                res?.message || "Failed to get the history for the mission.",
               severity: "error",
             })
           );
         }
       );
-  }, [dispatch, mission]);
+  };
+
+  const handleExport = () => {
+    downloadObject(configuration, `${mission}_WORKING_config`, ".json");
+    dispatch(
+      setSnackBarText({
+        text: "Successfully exported working Configuration JSON.",
+        severity: "success",
+      })
+    );
+  };
+  const handleUpload = () => {
+    dispatch(
+      setModal({
+        name: "uploadConfig",
+      })
+    );
+  };
+  const handleClone = () => {
+    dispatch(
+      setModal({
+        name: "cloneConfig",
+      })
+    );
+  };
+  const handleDelete = () => {
+    dispatch(
+      setModal({
+        name: "deleteConfig",
+      })
+    );
+  };
 
   return (
-    <div className={c.Home}>
-      <ul style={{ display: "none" }}>
-        {versions.map((v) => {
-          return (
-            <li>
-              {v.version} - {v.createdAt}
-            </li>
-          );
-        })}
-      </ul>
-      <Maker config={config} />
-    </div>
+    <>
+      <div className={c.Home}>
+        <div className={c.top}>
+          <h2 className={c.title}>{mission}</h2>
+          <div className={c.right}>
+            <Tooltip
+              title={"Export Unsaved Config.JSON"}
+              placement="bottom"
+              arrow
+            >
+              <IconButton
+                className={c.exportIcon}
+                title="Export Unsaved"
+                aria-label="export unsaved"
+                onClick={handleExport}
+              >
+                <BrowserUpdatedIcon fontSize="medium" />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title={"Upload Config.JSON"} placement="bottom" arrow>
+              <IconButton
+                className={c.uploadIcon}
+                title="Upload"
+                aria-label="upload"
+                onClick={handleUpload}
+              >
+                <UploadIcon fontSize="medium" />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title={"Clone Mission"} placement="bottom" arrow>
+              <IconButton
+                className={c.cloneIcon}
+                title="Clone"
+                aria-label="clone"
+                onClick={handleClone}
+              >
+                <ContentCopyIcon fontSize="medium" />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title={"Delete Mission"} placement="bottom" arrow>
+              <IconButton
+                className={c.deleteIcon}
+                title="Delete"
+                aria-label="delete"
+                onClick={handleDelete}
+              >
+                <DeleteForeverIcon fontSize="medium" />
+              </IconButton>
+            </Tooltip>
+          </div>
+        </div>
+        <Versions queryVersions={queryVersions} />
+        <Maker config={config} />
+      </div>
+      <UploadConfigModal queryVersions={queryVersions} />
+      <CloneConfigModal />
+      <DeleteConfigModal />
+    </>
   );
 }