Add support for a system notification that can be configured in the admin

Author: keianhzo

src/ui/EditorContainer.js

@@ -42,6 +42,7 @@ import defaultTemplateUrl from "./../assets/templates/crater.spoke";
 import tutorialTemplateUrl from "./../assets/templates/tutorial.spoke";
 
 import { TERMS, PRIVACY } from "../constants";
+import NotificationDialog from "./dialogs/NotificationDialog";
 
 const StyledEditorContainer = styled.div`
   display: flex;
@@ -104,23 +105,39 @@ class EditorContainer extends Component {
     const projectId = match.params.projectId;
     const queryParams = new URLSearchParams(location.search);
 
-    if (projectId === "new") {
-      if (queryParams.has("template")) {
-        this.loadProjectTemplate(queryParams.get("template"));
-      } else if (queryParams.has("sceneId")) {
-        this.loadScene(queryParams.get("sceneId"));
+    const load = () => {
+      if (projectId === "new") {
+        if (queryParams.has("template")) {
+          this.loadProjectTemplate(queryParams.get("template"));
+        } else if (queryParams.has("sceneId")) {
+          this.loadScene(queryParams.get("sceneId"));
+        } else {
+          this.loadProjectTemplate(defaultTemplateUrl);
+        }
+      } else if (projectId === "tutorial") {
+        this.loadProjectTemplate(tutorialTemplateUrl, true);
       } else {
-        this.loadProjectTemplate(defaultTemplateUrl);
+        this.loadProject(projectId);
       }
-    } else if (projectId === "tutorial") {
-      this.loadProjectTemplate(tutorialTemplateUrl, true);
-    } else {
-      this.loadProject(projectId);
-    }
 
-    if (projectId === "tutorial") {
-      trackEvent("Tutorial Start");
-      this.setState({ onboardingContext: { enabled: true } });
+      if (projectId === "tutorial") {
+        trackEvent("Tutorial Start");
+        this.setState({ onboardingContext: { enabled: true } });
+      }
+    };
+
+    const features = window.APP_CONFIG;
+    if (features["show_global_notification"]) {
+      this.showDialog(NotificationDialog, {
+        title: "Admin notification",
+        message: features["global_notification_body"],
+        link: features["global_notification_link"],
+        onClosed: load,
+        onConfirm: load,
+        onCancel: null
+      });
+    } else {
+      load();
     }
   }
 

src/ui/dialogs/NotificationDialog.js

@@ -0,0 +1,56 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import Dialog, { DialogContent } from "./Dialog";
+import styled from "styled-components";
+import { Button } from "../inputs/Button";
+
+const NotificationDialogContainer = styled(Dialog)`
+  max-width: 600px;
+
+  ${DialogContent} {
+    padding: 0;
+  }
+`;
+
+const NotificationMessage = styled.code`
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 16px;
+  color: ${props => props.theme.red};
+`;
+
+export default class NotificationDialog extends Component {
+  componentDidMount() {}
+
+  openLink = () => {
+    window.open(this.props.link);
+    this.props.onClosed();
+  };
+
+  renderBottomNav() {
+    return this.props.link ? <Button onClick={this.openLink}>Learn More</Button> : null;
+  }
+
+  render() {
+    const { message, onClosed, ...props } = this.props;
+
+    return (
+      <NotificationDialogContainer {...props} bottomNav={this.renderBottomNav()}>
+        <NotificationMessage>{message}</NotificationMessage>
+      </NotificationDialogContainer>
+    );
+  }
+}
+
+NotificationDialog.propTypes = {
+  title: PropTypes.string.isRequired,
+  message: PropTypes.string.isRequired,
+  link: PropTypes.string,
+  onClosed: PropTypes.func
+};
+
+NotificationDialog.defaultProps = {
+  title: "Notification"
+};

src/ui/layout/Notification.js

@@ -0,0 +1,60 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+
+const NotificationContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const StyledNotification = styled.div`
+  min-height: 24px;
+  margin: 1em 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.1em;
+  padding: 1em;
+  border-radius: 6px;
+  background-color: ${props => props.theme.red};
+`;
+
+const Content = styled.span`
+  max-width: 50vw;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+const ViewMore = styled.div`
+  text-align: center;
+  margin-left: 1em;
+  a {
+    color: ${props => props.theme.blue};
+  }
+`;
+
+export default class Notification extends Component {
+  render() {
+    const { body, link } = this.props;
+    return (
+      <NotificationContainer>
+        <StyledNotification>
+          <Content>{body}</Content>
+          <ViewMore>
+            <a href={link} target="_blank" rel="noopener noreferrer">
+              Learn more
+            </a>
+          </ViewMore>
+        </StyledNotification>
+      </NotificationContainer>
+    );
+  }
+}
+
+Notification.propTypes = {
+  body: PropTypes.string.isRequired,
+  link: PropTypes.string,
+  onClosed: PropTypes.func
+};

src/ui/projects/ProjectsPage.js

@@ -18,6 +18,7 @@ import { Link } from "react-router-dom";
 import LatestUpdate from "../whats-new/LatestUpdate";
 import { connectMenu, ContextMenu, MenuItem } from "../layout/ContextMenu";
 import styled from "styled-components";
+import Notification from "../layout/Notification";
 
 export const ProjectsSection = styled.section`
   padding-bottom: 100px;
@@ -87,7 +88,10 @@ class ProjectsPage extends Component {
       scenes: [],
       loading: isAuthenticated,
       isAuthenticated,
-      error: null
+      error: null,
+      showGlobalNotification: false,
+      globalNotificationBody: null,
+      globalNotificationLink: null
     };
   }
 
@@ -122,6 +126,15 @@ class ProjectsPage extends Component {
           this.setState({ error, loading: false });
         });
     }
+
+    const features = window.APP_CONFIG && window.APP_CONFIG["features"];
+    if (features) {
+      this.setState({
+        showGlobalNotification: features["show_global_notification"],
+        globalNotificationBody: features["global_notification_body"],
+        globalNotificationLink: features["global_notification_link"]
+      });
+    }
   }
 
   onDeleteProject = project => {
@@ -172,6 +185,9 @@ class ProjectsPage extends Component {
                 <h1>Projects</h1>
               </ProjectsHeader>
               <ProjectGridContainer>
+                {this.state.showGlobalNotification && (
+                  <Notification body={this.state.globalNotificationBody} link={this.state.globalNotificationLink} />
+                )}
                 <ProjectGridHeader>
                   <ProjectGridHeaderRow></ProjectGridHeaderRow>
                   <ProjectGridHeaderRow>