preview env beta badge (#4306)

dashboard/src/main/home/cluster-dashboard/preview-environments/v2/PreviewEnvs.tsx

@@ -1,22 +1,23 @@
-import React, { useState, useContext } from "react";
+import React, { useContext, useState } from "react";
 import styled from "styled-components";
 import { match } from "ts-pattern";
 
+import ClusterProvisioningPlaceholder from "components/ClusterProvisioningPlaceholder";
 import Loading from "components/Loading";
+import Container from "components/porter/Container";
+import DashboardPlaceholder from "components/porter/DashboardPlaceholder";
+import ShowIntercomButton from "components/porter/ShowIntercomButton";
 import Spacer from "components/porter/Spacer";
+import Text from "components/porter/Text";
 import TabSelector from "components/TabSelector";
 import { useDeploymentTargetList } from "lib/hooks/useDeploymentTarget";
 
+import { Context } from "shared/Context";
 import prGrad from "assets/pr-grad.svg";
 
 import DashboardHeader from "../../DashboardHeader";
 import { ConfigurableAppList } from "./ConfigurableAppList";
 import PreviewEnvGrid from "./PreviewEnvGrid";
-import { Context } from "shared/Context";
-import ClusterProvisioningPlaceholder from "components/ClusterProvisioningPlaceholder";
-import DashboardPlaceholder from "components/porter/DashboardPlaceholder";
-import Text from "components/porter/Text";
-import ShowIntercomButton from "components/porter/ShowIntercomButton";
 
 const tabs = ["environments", "config"] as const;
 export type ValidTab = (typeof tabs)[number];
@@ -109,14 +110,20 @@ const PreviewEnvs: React.FC = () => {
         <Spacer y={1} />
         {renderTab()}
       </>
-    )
-  }
+    );
+  };
 
   return (
     <StyledAppDashboard>
       <DashboardHeader
         image={prGrad}
-        title="Preview apps"
+        title={
+          <Container row>
+            Preview apps
+            <Spacer inline x={1} />
+            <Badge>Beta</Badge>
+          </Container>
+        }
         capitalize={false}
         description="Preview apps are created for each pull request. They are automatically deleted when the pull request is closed."
         disableLineBreak
@@ -129,6 +136,15 @@ const PreviewEnvs: React.FC = () => {
 
 export default PreviewEnvs;
 
+const Badge = styled.div`
+  background: linear-gradient(60deg, #4b366d 0%, #6475b9 100%);
+  color: white;
+  border-radius: 3px;
+  padding: 2px 5px;
+  margin-right: -5px;
+  font-size: 13px;
+`;
+
 const StyledAppDashboard = styled.div`
   width: 100%;
   height: 100%;

dashboard/src/main/home/sidebar/ClusterSection.tsx

@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from "react";
-
-import styled from "styled-components";
-import { ClusterType, ProjectType } from "shared/types";
 import { Tooltip } from "@material-ui/core";
+import styled from "styled-components";
 
-import settings from "assets/settings.svg";
+import { type ClusterType, type ProjectType } from "shared/types";
 import job from "assets/job-bold.png";
-import web from "assets/web-bold.png";
+import settings from "assets/settings.svg";
 import sliders from "assets/sliders.svg";
+import web from "assets/web-bold.png";
 
 import SidebarLink from "./SidebarLink";
 
@@ -35,25 +34,25 @@ export const ClusterSection: React.FC<Props> = ({
   }, [currentCluster]);
 
   useEffect(() => {
-    console.log("clearing cache")
+    console.log("clearing cache");
     navigator.serviceWorker.getRegistrations().then((registrations) => {
       registrations.forEach((registration) => {
         registration.unregister();
       });
     });
-    caches.keys().then((keyList) => {
-      return Promise.all(
-        keyList.map((key) => {
-          return caches.delete(key);
+    caches.keys().then(async (keyList) => {
+      return await Promise.all(
+        keyList.map(async (key) => {
+          return await caches.delete(key);
         })
       );
     });
-    
+
     setIsExpanded(false);
   }, [currentProject]);
 
   const renderClusterContent = (cluster: any) => {
-    let clusterId = cluster.id;
+    const clusterId = cluster.id;
 
     if (currentCluster && isExpanded) {
       return (
@@ -166,7 +165,9 @@ export const ClusterSection: React.FC<Props> = ({
   return (
     <>
       <ClusterSelector
-        onClick={() => setIsExpanded(!isExpanded)}
+        onClick={() => {
+          setIsExpanded(!isExpanded);
+        }}
         active={
           !isExpanded &&
           cluster.id === currentCluster.id &&
@@ -245,7 +246,11 @@ export const ClusterSection: React.FC<Props> = ({
           <Spacer />
         </LinkWrapper>
       </ClusterSelector>
-      <div onClick={() => setCurrentCluster(cluster)}>
+      <div
+        onClick={() => {
+          setCurrentCluster(cluster);
+        }}
+      >
         {renderClusterContent(cluster)}
       </div>
     </>
@@ -328,7 +333,7 @@ const NavButton = styled(SidebarLink)`
   margin-left: 39px;
   padding: 0 30px 2px 8px;
   font-size: 13px;
-  color: ${props => props.theme.text.primary};
+  color: ${(props) => props.theme.text.primary};
   cursor: ${(props: { disabled?: boolean }) =>
     props.disabled ? "not-allowed" : "pointer"};
 

dashboard/src/main/home/sidebar/Sidebar.tsx

@@ -328,7 +328,9 @@ class Sidebar extends Component<PropsType, StateType> {
                   <Img src={addOns} />
                   Add-ons
                 </Container>
-                {currentProject.sandbox_enabled && <Image size={15} src={lock} />}
+                {currentProject.sandbox_enabled && (
+                  <Image size={15} src={lock} />
+                )}
               </Container>
             </NavButton>
 
@@ -343,7 +345,9 @@ class Sidebar extends Component<PropsType, StateType> {
                   <Img src={sliders} />
                   Env groups
                 </Container>
-                {currentProject.sandbox_enabled && <Image size={15} src={lock} />}
+                {currentProject.sandbox_enabled && (
+                  <Image size={15} src={lock} />
+                )}
               </Container>
             </NavButton>
             <NavButton
@@ -363,11 +367,13 @@ class Sidebar extends Component<PropsType, StateType> {
               )}
             >
               <Container row spaced style={{ width: "100%" }}>
-                  <Container row>
-                    <Img src={infra} />
-                    Infrastructure
-                  </Container>
-                  {currentProject.sandbox_enabled && <Image size={15} src={lock} />}
+                <Container row>
+                  <Img src={infra} />
+                  Infrastructure
+                </Container>
+                {currentProject.sandbox_enabled && (
+                  <Image size={15} src={lock} />
+                )}
               </Container>
             </NavButton>
             <NavButton path="/preview-environments">
@@ -376,9 +382,11 @@ class Sidebar extends Component<PropsType, StateType> {
                   <Img src={pr_icon} />
                   Preview apps
                 </Container>
-                {(currentProject.sandbox_enabled ||
-                  !currentProject.preview_envs_enabled) && (
+                {currentProject.sandbox_enabled ||
+                !currentProject.preview_envs_enabled ? (
                   <Image size={15} src={lock} />
+                ) : (
+                  <Badge>Beta</Badge>
                 )}
               </Container>
             </NavButton>
@@ -396,17 +404,18 @@ class Sidebar extends Component<PropsType, StateType> {
               </Container>
             </NavButton>
 
-            {!currentProject.sandbox_enabled && this.props.isAuthorized("integrations", "", [
-              "get",
-              "create",
-              "update",
-              "delete",
-            ]) && (
-              <NavButton path={"/integrations"}>
-                <Img src={integrations} />
-                Integrations
-              </NavButton>
-            )}
+            {!currentProject.sandbox_enabled &&
+              this.props.isAuthorized("integrations", "", [
+                "get",
+                "create",
+                "update",
+                "delete",
+              ]) && (
+                <NavButton path={"/integrations"}>
+                  <Img src={integrations} />
+                  Integrations
+                </NavButton>
+              )}
 
             {this.props.isAuthorized("settings", "", [
               "get",
@@ -462,6 +471,15 @@ Sidebar.contextType = Context;
 
 export default withRouter(withAuth(Sidebar));
 
+const Badge = styled.div`
+  background: linear-gradient(60deg, #4b366d 0%, #6475b9 100%);
+  color: white;
+  border-radius: 3px;
+  padding: 2px 5px;
+  margin-right: -5px;
+  font-size: 13px;
+`;
+
 const ScrollWrapper = styled.div`
   overflow-y: auto;
   padding-bottom: 25px;