feat: Environment tag (#20295)

* Added environment tag and relevant tests * Reorganize imports * Prevent errors when config value not set * Default production tag to be hidden * Change tag to Label component * Fix import order * Allow tag to be colored with theme * Use theme for tag border radius Co-authored-by: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com> * Fix styling Co-authored-by: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com>
apache · Aug 26, 2022 · 25cc789 · 25cc789
1 parent 16032ed
commit 25cc789
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 1 deletion.
diff --git a/superset-frontend/src/views/components/Menu.test.tsx b/superset-frontend/src/views/components/Menu.test.tsx
@@ -178,6 +178,10 @@ const mockedProps = {
       tooltip: '',
       text: '',
     },
+    environment_tag: {
+      text: 'Production',
+      color: '#000',
+    },
     navbar_right: {
       show_watermark: false,
       bug_report_url: '/report/',
@@ -284,6 +288,15 @@ test('should render the brand', () => {
   expect(image).toHaveAttribute('src', icon);
 });
 
+test('should render the environment tag', () => {
+  useSelectorMock.mockReturnValue({ roles: user.roles });
+  const {
+    data: { environment_tag },
+  } = mockedProps;
+  render(<Menu {...mockedProps} />, { useRedux: true });
+  expect(screen.getByText(environment_tag.text)).toBeInTheDocument();
+});
+
 test('should render all the top navbar menu items', () => {
   useSelectorMock.mockReturnValue({ roles: user.roles });
   const {

diff --git a/superset-frontend/src/views/components/Menu.tsx b/superset-frontend/src/views/components/Menu.tsx
@@ -63,6 +63,10 @@ export interface MenuProps {
     brand: BrandProps;
     navbar_right: NavBarProps;
     settings: MenuObjectProps[];
+    environment_tag: {
+      text: string;
+      color: string;
+    };
   };
   isFrontendRoute?: (path?: string) => boolean;
 }
@@ -200,7 +204,13 @@ const { SubMenu } = DropdownMenu;
 const { useBreakpoint } = Grid;
 
 export function Menu({
-  data: { menu, brand, navbar_right: navbarRight, settings },
+  data: {
+    menu,
+    brand,
+    navbar_right: navbarRight,
+    settings,
+    environment_tag: environmentTag,
+  },
   isFrontendRoute = () => false,
 }: MenuProps) {
   const [showMenu, setMenu] = useState<MenuMode>('horizontal');
@@ -330,6 +340,7 @@ export function Menu({
             settings={settings}
             navbarRight={navbarRight}
             isFrontendRoute={isFrontendRoute}
+            environmentTag={environmentTag}
           />
         </Col>
       </Row>

diff --git a/superset-frontend/src/views/components/RightMenu.tsx b/superset-frontend/src/views/components/RightMenu.tsx
@@ -29,10 +29,12 @@ import {
   SupersetTheme,
   SupersetClient,
   getExtensionsRegistry,
+  useTheme,
 } from '@superset-ui/core';
 import { MainNav as Menu } from 'src/components/Menu';
 import { Tooltip } from 'src/components/Tooltip';
 import Icons from 'src/components/Icons';
+import Label from 'src/components/Label';
 import { findPermission } from 'src/utils/findPermission';
 import { isUserAdmin } from 'src/dashboard/util/permissionUtils';
 import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
@@ -85,13 +87,18 @@ const StyledAnchor = styled.a`
   padding-left: ${({ theme }) => theme.gridUnit}px;
 `;
 
+const tagStyles = (theme: SupersetTheme) => css`
+  color: ${theme.colors.grayscale.light5};
+`;
+
 const { SubMenu } = Menu;
 
 const RightMenu = ({
   align,
   settings,
   navbarRight,
   isFrontendRoute,
+  environmentTag,
   setQuery,
 }: RightMenuProps & {
   setQuery: ({ databaseAdded }: { databaseAdded: boolean }) => void;
@@ -262,6 +269,8 @@ const RightMenu = ({
 
   const handleDatabaseAdd = () => setQuery({ databaseAdded: true });
 
+  const theme = useTheme();
+
   return (
     <StyledDiv align={align}>
       {canDatabase && (
@@ -272,6 +281,20 @@ const RightMenu = ({
           onDatabaseAdd={handleDatabaseAdd}
         />
       )}
+      {environmentTag.text && (
+        <Label
+          css={{ borderRadius: `${theme.gridUnit * 125}px` }}
+          color={
+            /^#(?:[0-9a-f]{3}){1,2}$/i.test(environmentTag.color)
+              ? environmentTag.color
+              : environmentTag.color
+                  .split('.')
+                  .reduce((o, i) => o[i], theme.colors)
+          }
+        >
+          <span css={tagStyles}>{environmentTag.text}</span>
+        </Label>
+      )}
       <Menu
         selectable={false}
         mode="horizontal"

diff --git a/superset-frontend/src/views/components/types.ts b/superset-frontend/src/views/components/types.ts
@@ -31,6 +31,10 @@ export interface RightMenuProps {
   settings: MenuObjectProps[];
   navbarRight: NavBarProps;
   isFrontendRoute: (path?: string) => boolean;
+  environmentTag: {
+    text: string;
+    color: string;
+  };
 }
 
 export enum GlobalMenuDataOptions {

diff --git a/superset/config.py b/superset/config.py
@@ -1342,6 +1342,21 @@ def EMAIL_HEADER_MUTATOR(  # pylint: disable=invalid-name,unused-argument
     "port": internet_port,
 }
 
+# Configuration for environment tag shown on the navbar. Setting 'text' to '' will hide the tag.
+# 'color' can either be a hex color code, or a dot-indexed theme color (e.g. error.base)
+ENVIRONMENT_TAG_CONFIG = {
+    "variable": "FLASK_ENV",
+    "values": {
+        "development": {
+            "color": "error.base",
+            "text": "Development",
+        },
+        "production": {
+            "color": "",
+            "text": "",
+        },
+    },
+}
 
 # -------------------------------------------------------------------
 # *                WARNING:  STOP EDITING  HERE                    *

diff --git a/superset/views/base.py b/superset/views/base.py
@@ -17,6 +17,7 @@
 import dataclasses
 import functools
 import logging
+import os
 import traceback
 from datetime import datetime
 from typing import Any, Callable, cast, Dict, List, Optional, Union
@@ -307,6 +308,18 @@ def menu_data() -> Dict[str, Any]:
     if callable(brand_text):
         brand_text = brand_text()
     build_number = appbuilder.app.config["BUILD_NUMBER"]
+    try:
+        environment_tag = (
+            appbuilder.app.config["ENVIRONMENT_TAG_CONFIG"]["values"][
+                os.environ.get(
+                    appbuilder.app.config["ENVIRONMENT_TAG_CONFIG"]["variable"]
+                )
+            ]
+            or {}
+        )
+    except KeyError:
+        environment_tag = {}
+
     return {
         "menu": menu,
         "brand": {
@@ -316,6 +329,7 @@ def menu_data() -> Dict[str, Any]:
             "tooltip": appbuilder.app.config["LOGO_TOOLTIP"],
             "text": brand_text,
         },
+        "environment_tag": environment_tag,
         "navbar_right": {
             # show the watermark if the default app icon has been overriden
             "show_watermark": ("superset-logo-horiz" not in appbuilder.app_icon),