feat: Message bar incident/maintenance name (#1335)

* feat: Docs automatically generated files * refactor: Message banner incident/maintenance message displays name * chore: Remove testing materials * chore: Remove testing materials * Revert "chore: Remove testing materials" This reverts commit ab5f9e9. * Revert "refactor: Message banner incident/maintenance message displays name" This reverts commit 7359dbe. * Revert "feat: Docs automatically generated files" This reverts commit 26ad9ca. * refactor: Message banner incident/maintenance message displays name * chore: Remove testing materials
web3-storage · Jun 13, 2022 · 0e4ec06 · 0e4ec06
1 parent 345c171
commit 0e4ec06
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 37 deletions.
diff --git a/packages/website/components/loading/loading.js b/packages/website/components/loading/loading.js
@@ -18,8 +18,8 @@ export const SpinnerColor = {
 /**
  * @param {Object} [props]
  * @param {string} [props.className]
- * @param {SpinnerSize} [props.size]
- * @param {SpinnerColor} [props.color]
+ * @param {string} [props.size]
+ * @param {string} [props.color]
  */
 const Loading = ({ className, size, color }) => (
   <div className={clsx(className, styles.loading)}>
@@ -28,6 +28,7 @@ const Loading = ({ className, size, color }) => (
 );
 
 Loading.defaultProps = {
+  className: '',
   size: SpinnerSize.LARGE,
   color: SpinnerColor.GRADIENT,
 };

diff --git a/packages/website/components/messagebanner/messagebanner.js b/packages/website/components/messagebanner/messagebanner.js
@@ -11,58 +11,61 @@ import GeneralPageData from '../../content/pages/general.json';
 // ===================================================================== Exports
 export default function MessageBanner() {
   const marketingPrompt = GeneralPageData.message_banner.content;
-  const maintenceAlert = GeneralPageData.message_banner.maintenceAlert;
-  let link = GeneralPageData.message_banner.url;
-
-  const [bannerHeight, setBannerHeight] = useState('unset');
-  const [bannerContent, setBannerContent] = useState(marketingPrompt);
   const messageBannerRef = useRef(/** @type {any} */ (null));
+  const [bannerHeight, setBannerHeight] = useState('unset');
+  const [bannerContent, setBannerContent] = useState({
+    html: GeneralPageData.message_banner.content,
+    url: GeneralPageData.message_banner.url,
+  });
 
   const { data: statusPageData, error: statusPageError } = useQuery('get-statuspage-summary', () =>
     getStatusPageSummary()
   );
-
-  let maintenanceMessage = '';
-
   const incidents = statusPageData?.incidents || [];
-
   const scheduledMaintenances = (statusPageData?.scheduled_maintenances || []).filter(
     (/** @type {{ status: string; }} */ maintenance) => maintenance.status !== 'completed'
   );
   const { data: apiVersionData, error: apiVersionError } = useQuery('get-version', () => getVersion(), {
     enabled: (statusPageData && scheduledMaintenances.length === 0) || statusPageError !== null,
   });
 
-  if (incidents.length > 0) {
-    maintenanceMessage = incidents?.[0].incident_updates?.[0]?.body;
-  } else if (scheduledMaintenances.length > 0) {
-    maintenanceMessage = scheduledMaintenances?.[0].incident_updates?.[0]?.body;
-  }
-
-  if (apiVersionData && apiVersionData.mode !== 'rw' && !maintenanceMessage) {
-    maintenanceMessage = maintenceAlert;
-  }
-
   if (statusPageError) {
     console.error(statusPageError);
   }
   if (apiVersionError) {
     console.error(apiVersionError);
   }
 
-  if (maintenanceMessage && bannerContent !== maintenanceMessage) {
-    setBannerContent(maintenanceMessage);
+  if (incidents.length > 0) {
+    if (bannerContent.html !== incidents[0].name) {
+      setBannerContent({ html: incidents[0].name, url: incidents[0].shortlink });
+    }
+  } else if (scheduledMaintenances.length > 0) {
+    if (bannerContent.html !== scheduledMaintenances[0].name) {
+      setBannerContent({ html: scheduledMaintenances[0].name, url: scheduledMaintenances[0].shortlink });
+    }
+  }
+  if (
+    apiVersionData &&
+    apiVersionData.mode !== 'rw' &&
+    (bannerContent.html === '' || bannerContent.html === undefined)
+  ) {
+    if (bannerContent.html !== GeneralPageData.message_banner.maintenceAlert) {
+      setBannerContent({ html: GeneralPageData.message_banner.maintenceAlert, url: '' });
+    }
   }
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
-      const oldMessage = localStorage.getItem('web3StorageBannerMessage');
+      const oldMessage = /** @type {string} */ (
+        localStorage.getItem('web3StorageBannerMessage') ? localStorage.getItem('web3StorageBannerMessage') : ''
+      );
       const oldDate = /** @type {string} */ (
         localStorage.getItem('web3StorageBannerClickDate') ? localStorage.getItem('web3StorageBannerClickDate') : '0'
       );
       const elapsedTime = Date.now() - parseInt(oldDate);
 
-      if (bannerContent === oldMessage && elapsedTime < 604800000) {
+      if (bannerContent.html === oldMessage && elapsedTime < 604800000) {
         setBannerHeight('0px');
       } else {
         const resize = () => {
@@ -76,50 +79,49 @@ export default function MessageBanner() {
         return () => window.removeEventListener('resize', resize);
       }
     }
-  }, [bannerContent, marketingPrompt]);
+  }, [bannerContent]);
 
   const messageBannerClick = useCallback(
     message => {
       if (typeof window !== 'undefined') {
         localStorage.setItem('web3StorageBannerMessage', message);
         localStorage.setItem('web3StorageBannerClickDate', Date.now().toString());
       }
-      if (marketingPrompt === bannerContent) {
+      if (message === bannerContent.html) {
         setBannerHeight('0px');
       }
     },
-    [marketingPrompt, bannerContent]
+    [bannerContent]
   );
 
-  const CustomElement = marketingPrompt === bannerContent ? 'a' : 'div';
-
   return (
     <section id="section_message-banner" style={{ height: bannerHeight }}>
       <div ref={messageBannerRef} className={clsx('message-banner-wrapper', bannerHeight === '0px' ? 'mb-hidden' : '')}>
         <div className="grid-noGutter">
           <div className="col">
             <div className="message-banner-container">
-              <CustomElement
-                href={link}
+              <a
+                href={bannerContent.url}
                 target="_blank"
                 className={clsx(
                   'message-banner-content',
-                  marketingPrompt !== bannerContent ? 'banner-alert' : '',
-                  bannerContent.length > 120 ? 'mb-reduced-fontsize' : ''
+                  marketingPrompt !== bannerContent.html ? 'banner-alert' : '',
+                  bannerContent.html.length > 120 ? 'mb-reduced-fontsize' : '',
+                  bannerContent.url === '' || bannerContent.url === undefined ? 'disabled' : ''
                 )}
-                dangerouslySetInnerHTML={{ __html: bannerContent }}
+                dangerouslySetInnerHTML={{ __html: bannerContent.html }}
                 onClick={() => messageBannerClick(marketingPrompt)}
                 onKeyPress={() => messageBannerClick(marketingPrompt)}
                 rel="noreferrer"
-              ></CustomElement>
+              ></a>
             </div>
           </div>
         </div>
 
         <button
           className={clsx(
             'message-banner-close-button',
-            marketingPrompt !== bannerContent || bannerHeight === '0px' ? 'hide-banner-close' : ''
+            marketingPrompt !== bannerContent.html || bannerHeight === '0px' ? 'hide-banner-close' : ''
           )}
           onClick={() => messageBannerClick(marketingPrompt)}
           onKeyPress={() => messageBannerClick(marketingPrompt)}

diff --git a/packages/website/components/messagebanner/messagebanner.scss b/packages/website/components/messagebanner/messagebanner.scss
@@ -68,6 +68,11 @@
   &.mb-reduced-fontsize {
     @include fontSize_Tiny;
   }
+
+  &.disabled {
+    pointer-events: none;
+    cursor: default;
+  }
 }
 
 .message-banner-close-button {