feat(messageView): issues/320 app-level maintenance mode (#379)

package.json

@@ -84,7 +84,7 @@
     "@patternfly/react-styles": "4.5.0",
     "@patternfly/react-table": "4.12.1",
     "@patternfly/react-tokens": "4.6.0",
-    "@redhat-cloud-services/frontend-components": "2.3.11",
+    "@redhat-cloud-services/frontend-components": "2.3.13",
     "@redhat-cloud-services/frontend-components-notifications": "2.1.1",
     "@redhat-cloud-services/frontend-components-utilities": "2.1.0",
     "axios": "^0.19.2",

public/locales/en-US.json

@@ -2,7 +2,8 @@
   "curiosity-auth": {
     "pending": "Authenticating...",
     "authorizedTitle": "You do not have access to {{appName}}.",
-    "authorizedCopy": "Contact your organization administrator for more information."
+    "authorizedCopy": "Contact your organization administrator for more information.",
+    "maintenanceCopy": "We are currently undergoing scheduled maintenance and will be back shortly. Thank you for your patience."
   },
   "curiosity-graph": {
     "cardHeading": "CPU usage",

src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap

@@ -104,69 +104,80 @@ exports[`Authentication Component should render a non-connected component error:
         <section
           className="pf-c-page__main-section curiosity"
         >
-          <EmptyState
-            className="fadein"
+          <PageSection
             key=".1"
-            variant="full"
           >
-            <div
-              className="pf-c-empty-state fadein"
-            >
-              <div
-                className="pf-c-empty-state__content"
+            <Section>
+              <section
+                className=""
               >
-                <EmptyStateIcon
-                  icon={[Function]}
-                >
-                  <LockIcon
-                    aria-hidden="true"
-                    className="pf-c-empty-state__icon"
-                    color="currentColor"
-                    noVerticalAlign={false}
-                    size="sm"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      aria-labelledby={null}
-                      className="pf-c-empty-state__icon"
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      style={
-                        Object {
-                          "verticalAlign": "-0.125em",
-                        }
-                      }
-                      viewBox="0 0 448 512"
-                      width="1em"
-                    >
-                      <path
-                        d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"
-                        transform=""
-                      />
-                    </svg>
-                  </LockIcon>
-                </EmptyStateIcon>
-                <Title
-                  headingLevel="h2"
-                  size="lg"
+                 
+                <EmptyState
+                  className="fadein"
+                  variant="full"
                 >
-                  <h2
-                    className="pf-c-title pf-m-lg"
-                  >
-                    t(curiosity-auth.authorizedTitle, [object Object])
-                  </h2>
-                </Title>
-                <EmptyStateBody>
                   <div
-                    className="pf-c-empty-state__body"
+                    className="pf-c-empty-state fadein"
                   >
-                    t(curiosity-auth.authorizedCopy, ...)
+                    <div
+                      className="pf-c-empty-state__content"
+                    >
+                      <EmptyStateIcon
+                        icon={[Function]}
+                      >
+                        <LockIcon
+                          aria-hidden="true"
+                          className="pf-c-empty-state__icon"
+                          color="currentColor"
+                          noVerticalAlign={false}
+                          size="sm"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            aria-labelledby={null}
+                            className="pf-c-empty-state__icon"
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            style={
+                              Object {
+                                "verticalAlign": "-0.125em",
+                              }
+                            }
+                            viewBox="0 0 448 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"
+                              transform=""
+                            />
+                          </svg>
+                        </LockIcon>
+                      </EmptyStateIcon>
+                      <Title
+                        headingLevel="h2"
+                        size="lg"
+                      >
+                        <h2
+                          className="pf-c-title pf-m-lg"
+                        >
+                          t(curiosity-auth.authorizedTitle, [object Object])
+                        </h2>
+                      </Title>
+                      <EmptyStateBody>
+                        <div
+                          className="pf-c-empty-state__body"
+                        >
+                          t(curiosity-auth.authorizedCopy, ...)
+                        </div>
+                      </EmptyStateBody>
+                    </div>
                   </div>
-                </EmptyStateBody>
-              </div>
-            </div>
-          </EmptyState>
+                </EmptyState>
+                 
+              </section>
+            </Section>
+          </PageSection>
         </section>
       </PageSection>
     </PageLayout>

src/components/authentication/authentication.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { BinocularsIcon, LockIcon } from '@patternfly/react-icons';
+import { Maintenance } from '@redhat-cloud-services/frontend-components/components/Maintenance';
 import { connectRouter, reduxActions, reduxSelectors } from '../../redux';
 import { rhsmApiTypes } from '../../types';
 import { helpers } from '../../common';
@@ -52,6 +53,14 @@ class Authentication extends Component {
   render() {
     const { children, session, t } = this.props;
 
+    if (helpers.UI_DISABLED) {
+      return (
+        <MessageView>
+          <Maintenance description={t('curiosity-auth.maintenanceCopy', '...')} />
+        </MessageView>
+      );
+    }
+
     if (session.authorized) {
       return <React.Fragment>{children}</React.Fragment>;
     }

src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap

@@ -25,6 +25,10 @@ Array [
   Object {
     "file": "./src/components/authentication/authentication.js",
     "keys": Array [
+      Object {
+        "key": "curiosity-auth.maintenanceCopy",
+        "match": "t('curiosity-auth.maintenanceCopy', '...')",
+      },
       Object {
         "key": "curiosity-auth.pending",
         "match": "t('curiosity-auth.pending', '...')",

src/components/messageView/__tests__/__snapshots__/messageView.test.js.snap

@@ -8,10 +8,12 @@ exports[`MessageView Component should have fallback conditions for all props: fa
   >
     Subscription Watch
   </PageHeader>
-  <EmptyState
-    className="fadein"
-    variant="full"
-  />
+  <PageSection>
+    <EmptyState
+      className="fadein"
+      variant="full"
+    />
+  </PageSection>
 </PageLayout>
 `;
 
@@ -23,22 +25,38 @@ exports[`MessageView Component should render a non-connected component: non-conn
   >
     Subscription Watch
   </PageHeader>
-  <EmptyState
-    className="fadein"
-    variant="full"
-  >
-    <EmptyStateIcon
-      icon={[Function]}
-    />
-    <Title
-      headingLevel="h2"
-      size="lg"
+  <PageSection>
+    <EmptyState
+      className="fadein"
+      variant="full"
     >
-      lorem
-    </Title>
-    <EmptyStateBody>
-      ipsum
-    </EmptyStateBody>
-  </EmptyState>
+      <EmptyStateIcon
+        icon={[Function]}
+      />
+      <Title
+        headingLevel="h2"
+        size="lg"
+      >
+        lorem
+      </Title>
+      <EmptyStateBody>
+        ipsum
+      </EmptyStateBody>
+    </EmptyState>
+  </PageSection>
+</PageLayout>
+`;
+
+exports[`MessageView Component should render children when provided: children display 1`] = `
+<PageLayout>
+  <PageHeader
+    t={[Function]}
+    viewId={null}
+  >
+    Subscription Watch
+  </PageHeader>
+  <PageSection>
+    child content
+  </PageSection>
 </PageLayout>
 `;

src/components/messageView/__tests__/messageView.test.js

@@ -21,4 +21,11 @@ describe('MessageView Component', () => {
     const component = shallow(<MessageView {...props} />);
     expect(component).toMatchSnapshot('fallback display');
   });
+
+  it('should render children when provided', () => {
+    const props = { children: 'child content' };
+
+    const component = shallow(<MessageView {...props} />);
+    expect(component).toMatchSnapshot('children display');
+  });
 });

src/components/messageView/messageView.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { EmptyState, EmptyStateBody, EmptyStateIcon, EmptyStateVariant, Title } from '@patternfly/react-core';
-import { PageLayout, PageHeader } from '../pageLayout/pageLayout';
+import { PageLayout, PageHeader, PageSection } from '../pageLayout/pageLayout';
 import { helpers } from '../../common';
 
 /**
@@ -11,33 +11,39 @@ import { helpers } from '../../common';
  * Render a message view.
  *
  * @param {object} props
+ * @param {Node} props.children
  * @param {Node|Function} props.icon
  * @param {string} props.message
  * @param {string} props.pageTitle
  * @param {string} props.title
  * @returns {Node}
  */
-const MessageView = ({ icon, message, pageTitle, title }) => (
+const MessageView = ({ children, icon, message, pageTitle, title }) => (
   <PageLayout>
     <PageHeader>{pageTitle || helpers.UI_DISPLAY_NAME}</PageHeader>
-    <EmptyState variant={EmptyStateVariant.full} className="fadein">
-      {icon && <EmptyStateIcon icon={icon} />}
-      {title && (
-        <Title headingLevel="h2" size="lg">
-          {title}
-        </Title>
+    <PageSection>
+      {children ?? (
+        <EmptyState variant={EmptyStateVariant.full} className="fadein">
+          {icon && <EmptyStateIcon icon={icon} />}
+          {title && (
+            <Title headingLevel="h2" size="lg">
+              {title}
+            </Title>
+          )}
+          {message && <EmptyStateBody>{message}</EmptyStateBody>}
+        </EmptyState>
       )}
-      {message && <EmptyStateBody>{message}</EmptyStateBody>}
-    </EmptyState>
+    </PageSection>
   </PageLayout>
 );
 
 /**
  * Prop types.
  *
- * @type {{icon: Node|Function, message: string, title: string}}
+ * @type {{children: Node, icon: Node|Function, message: string, pageTitle: string, title: string}}
  */
 MessageView.propTypes = {
+  children: PropTypes.node,
   icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   message: PropTypes.string,
   pageTitle: PropTypes.string,
@@ -47,9 +53,10 @@ MessageView.propTypes = {
 /**
  * Default props.
  *
- * @type {{icon: null, message: null, title: null}}
+ * @type {{children: null, icon: null, message: null, pageTitle: null, title: null}}
  */
 MessageView.defaultProps = {
+  children: null,
   icon: null,
   message: null,
   pageTitle: null,

yarn.lock

@@ -1619,10 +1619,10 @@
     commander ">=2.20.0"
     react-content-loader ">=3.4.1"
 
-"@redhat-cloud-services/[email protected].11":
-  version "2.3.11"
-  resolved "https://registry.yarnpkg.com/@redhat-cloud-services/frontend-components/-/frontend-components-2.3.11.tgz#1761687b4a46b894a47493b848abb3064ca4cb83"
-  integrity sha512-EHw+u7/1MZkfpvyqaiyIblxI4Rsh1osGfZUwPm7hiJAOMOUCnpk1jrrzSiC6QORuiAUJ0aSnCRgVAnb3RduPxw==
+"@redhat-cloud-services/[email protected].13":
+  version "2.3.13"
+  resolved "https://registry.yarnpkg.com/@redhat-cloud-services/frontend-components/-/frontend-components-2.3.13.tgz#fdabf74ab34bce19c4e78868b31758a77aa519f6"
+  integrity sha512-W1/oLdeeRjwRoH9vl+HdEjiBvgbu12K0QDYhzYscy+29KBk3Dwp+s3oir2I5F/+QKzexJTPlgc+a4CKXcbz2pg==
   dependencies:
     "@redhat-cloud-services/frontend-components-utilities" "*"
     sanitize-html "^1.25.0"