feat: dashboard banner (#547)

Author: Cahllagerfeld

src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedHeader.tsx

@@ -40,6 +40,7 @@ import { WorkspacePopup } from './workspacePopup';
 import ReactTooltip from 'react-tooltip';
 import { Breadcrumbs } from '../../Breadcrumbs';
 import DeploymentBanner from './DeploymentBanner';
+import DashboardBanner from './DashboardBanner';
 
 export const AuthenticatedHeader: React.FC<{
   breadcrumb?: Array<any>;
@@ -55,6 +56,8 @@ export const AuthenticatedHeader: React.FC<{
   const [popupOpen, setPopupOpen] = useState<boolean>(false);
   const [createPopupOpen, setCreatePopupOpen] = useState<boolean>(false);
 
+  const authScheme = useSelector(serverInfoSelectors.getAuthScheme);
+
   const dispatch = useDispatch();
 
   const { push } = usePushRoute();
@@ -144,7 +147,8 @@ export const AuthenticatedHeader: React.FC<{
 
   return (
     <>
-      {deploymentType === 'local' && <DeploymentBanner />}
+      {deploymentType === 'local' && <DeploymentBanner />}{' '}
+      {authScheme !== 'EXTERNAL' && <DashboardBanner />}
       {createPopupOpen && <WorkspacePopup setPopupOpen={setCreatePopupOpen} />}
       <FlexBox
         paddingHorizontal="lg"

src/ui/layouts/common/layouts/AuthenticatedLayout/DashboardBanner/index.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import styles from './styles.module.scss';
+import { dashboardKey } from './service';
+import { icons } from '../../../../../components';
+
+function DashboardBanner() {
+  const [isDashboardBannerDismissed, setDashboardDismissed] = useState(
+    !!sessionStorage.getItem(dashboardKey),
+  );
+
+  if (isDashboardBannerDismissed) return null;
+  return (
+    <aside className={styles.deploymentBanner}>
+      <p className={styles.deploymentBanner__paragraph}>
+        This dashboard interface will soon be updated. Click{' '}
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://www.zenml.io/cloud"
+        >
+          here
+        </a>{' '}
+        for a preview!
+      </p>
+      <button
+        className={styles.deploymentBanner__close}
+        onClick={() => {
+          sessionStorage.setItem(dashboardKey, 'true');
+          setDashboardDismissed(true);
+        }}
+      >
+        <icons.close />
+      </button>
+    </aside>
+  );
+}
+
+export default DashboardBanner;

src/ui/layouts/common/layouts/AuthenticatedLayout/DashboardBanner/service.ts

@@ -0,0 +1 @@
+export const dashboardKey = 'dashboard-banner-dismissed';

src/ui/layouts/common/layouts/AuthenticatedLayout/DashboardBanner/styles.module.scss

@@ -0,0 +1,36 @@
+@import '../../../../../globalStyles';
+
+.deploymentBanner {
+  width: 100%;
+  background-color: #f1ebfe;
+  font-size: 16px;
+  display: flex;
+  color: #0d061d;
+  font-family: Rubik;
+  padding: 0.5rem 16px;
+  justify-content: space-between;
+  align-items: center;
+
+  &__paragraph {
+    text-align: center;
+    margin: 0;
+    flex: 1;
+  }
+  &__close {
+    padding: 0;
+    margin: 0;
+    border: none;
+    background: none;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    outline: none;
+  }
+}
+
+@media (max-width: $md-breakpoint) {
+  .deploymentBanner {
+    padding: 0.5rem 1rem;
+    font-size: 14px;
+  }
+}

src/ui/layouts/common/layouts/AuthenticatedLayout/DeploymentBanner/styles.module.scss

@@ -1,27 +1,25 @@
 @import '../../../../../globalStyles';
 
 .deploymentBanner {
-    width: 100%;
-    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
-    background-color: #FEFACB;
-    font-size: 16px;
-    display: flex;
-    font-family: Rubik;
-    padding: .5rem 0;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    
-    &__paragraph {
-        text-align: center;
-        margin: 0
-    }
+  width: 100%;
+  background-color: #fefacb;
+  font-size: 16px;
+  display: flex;
+  font-family: Rubik;
+  padding: 0.5rem 0;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
 
+  &__paragraph {
+    text-align: center;
+    margin: 0;
+  }
 }
 
 @media (max-width: $md-breakpoint) {
-    .deploymentBanner {
-        padding: .5rem 1rem;
-        font-size: 14px;
-    }
+  .deploymentBanner {
+    padding: 0.5rem 1rem;
+    font-size: 14px;
+  }
 }