Added environment tag (#152)

* Added environment tag and relevant tests

* Reorganize imports

superset-frontend/src/views/components/Menu.test.tsx

@@ -175,6 +175,10 @@ const mockedProps = {
  tooltip: '',
  text: '',
  },
+ environment_tag: {
+ text: 'Production',
+ color: '#000',
+ },
  navbar_right: {
  show_watermark: false,
  bug_report_url: '/report/',
@@ -264,6 +268,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 {

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;
 }
@@ -189,7 +193,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');
@@ -313,6 +323,7 @@ export function Menu({
  settings={settings}
  navbarRight={navbarRight}
  isFrontendRoute={isFrontendRoute}
+ environmentTag={environmentTag}
  />
  </Col>
  </Row>

superset-frontend/src/views/components/MenuRight.tsx

@@ -24,6 +24,7 @@ import Icons from 'src/components/Icons';
 import findPermission from 'src/dashboard/util/findPermission';
 import { useSelector } from 'react-redux';
 import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
+import { Tag } from 'antd';
 import LanguagePicker from './LanguagePicker';
 import DatabaseModal from '../CRUD/data/database/DatabaseModal';
 import { uploadUserPerms } from '../CRUD/utils';
@@ -68,6 +69,7 @@ const RightMenu = ({
  settings,
  navbarRight,
  isFrontendRoute,
+ environmentTag,
 }: RightMenuProps) => {
  const { roles } = useSelector<any, UserWithPermissionsAndRoles>(
  state => state.user,
@@ -182,6 +184,11 @@ const RightMenu = ({
  show={showModal}
  dbEngine={engine}
  />
+ {environmentTag.text && (
+ <Tag css={{ borderRadius: '500px' }} color={environmentTag.color}>
+ {environmentTag.text}
+ </Tag>
+ )}
  <Menu selectable={false} mode="horizontal" onClick={handleMenuSelection}>
  {!navbarRight.user_is_anonymous && showActionDropdown && (
  <SubMenu

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 {

superset/config.py

@@ -1371,6 +1371,21 @@ def SQL_QUERY_MUTATOR( # pylint: disable=invalid-name,unused-argument
 # Set to False to only allow viewing own recent activity
 ENABLE_BROAD_ACTIVITY_ACCESS = True
 
+# Configuration for environment tag shown on the navbar. Setting 'text' to '' will hide the tag.
+ENVIRONMENT_TAG_CONFIG = {
+ "variable": "FLASK_ENV",
+ "values": {
+ "development": {
+ "color": "#c73d2e",
+ "text": "Development",
+ },
+ "production": {
+ "color": "#039dfc",
+ "text": "Production",
+ },
+ },
+}
+
 # -------------------------------------------------------------------
 # * WARNING: STOP EDITING HERE *
 # -------------------------------------------------------------------

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, TYPE_CHECKING, Union
@@ -311,6 +312,12 @@ def menu_data() -> Dict[str, Any]:
  if callable(brand_text):
  brand_text = brand_text()
  build_number = appbuilder.app.config["BUILD_NUMBER"]
+ environment_tag = (
+ appbuilder.app.config["ENVIRONMENT_TAG_CONFIG"]["values"][
+ os.environ.get(appbuilder.app.config["ENVIRONMENT_TAG_CONFIG"]["variable"])
+ ]
+ or {}
+ )
  return {
  "menu": menu,
  "brand": {
@@ -321,6 +328,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),