From 5978be1d4cd49c176c928e2bf5a851107ea32d02 Mon Sep 17 00:00:00 2001 From: reesercollins <10563996+reesercollins@users.noreply.github.com> Date: Tue, 7 Jun 2022 13:40:02 -0400 Subject: [PATCH 1/9] Added environment tag and relevant tests --- .../src/views/components/Menu.test.tsx | 13 +++++++++++++ superset-frontend/src/views/components/Menu.tsx | 13 ++++++++++++- .../src/views/components/MenuRight.tsx | 7 +++++++ superset-frontend/src/views/components/types.ts | 4 ++++ superset/config.py | 14 ++++++++++++++ superset/views/base.py | 8 ++++++++ 6 files changed, 58 insertions(+), 1 deletion(-) diff --git a/superset-frontend/src/views/components/Menu.test.tsx b/superset-frontend/src/views/components/Menu.test.tsx index a80a43a22f02c..33044c1b3e3a4 100644 --- a/superset-frontend/src/views/components/Menu.test.tsx +++ b/superset-frontend/src/views/components/Menu.test.tsx @@ -176,6 +176,10 @@ const mockedProps = { tooltip: '', text: '', }, + environment_tag: { + text: 'Production', + color: '#000', + }, navbar_right: { show_watermark: false, bug_report_url: '/report/', @@ -270,6 +274,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(, { 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 index 3cc61f5243057..86502c5276e59 100644 --- a/superset-frontend/src/views/components/Menu.tsx +++ b/superset-frontend/src/views/components/Menu.tsx @@ -62,6 +62,10 @@ export interface MenuProps { brand: BrandProps; navbar_right: NavBarProps; settings: MenuObjectProps[]; + environment_tag: { + text: string; + color: string; + }; }; isFrontendRoute?: (path?: string) => boolean; } @@ -199,7 +203,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('horizontal'); @@ -323,6 +333,7 @@ export function Menu({ settings={settings} navbarRight={navbarRight} isFrontendRoute={isFrontendRoute} + environmentTag={environmentTag} /> diff --git a/superset-frontend/src/views/components/MenuRight.tsx b/superset-frontend/src/views/components/MenuRight.tsx index 4c34b883491c4..8d7fd2ceaeeec 100644 --- a/superset-frontend/src/views/components/MenuRight.tsx +++ b/superset-frontend/src/views/components/MenuRight.tsx @@ -42,6 +42,7 @@ import { RightMenuProps, } from './types'; import { MenuObjectProps } from './Menu'; +import { Tag } from 'antd'; const versionInfoStyles = (theme: SupersetTheme) => css` padding: ${theme.gridUnit * 1.5}px ${theme.gridUnit * 4}px @@ -86,6 +87,7 @@ const RightMenu = ({ settings, navbarRight, isFrontendRoute, + environmentTag, }: RightMenuProps) => { const user = useSelector( state => state.user, @@ -259,6 +261,11 @@ const RightMenu = ({ dbEngine={engine} /> )} + {environmentTag.text && ( + + {environmentTag.text} + + )} boolean; + environmentTag: { + text: string; + color: string; + }; } export enum GlobalMenuDataOptions { diff --git a/superset/config.py b/superset/config.py index 8a5ec248fb8a3..efaf582e35bae 100644 --- a/superset/config.py +++ b/superset/config.py @@ -1289,6 +1289,20 @@ def SQL_QUERY_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. +ENVIRONMENT_TAG_CONFIG = { + "variable": "FLASK_ENV", + "values": { + "development": { + "color": "#c73d2e", + "text": "Development", + }, + "production": { + "color": "#039dfc", + "text": "Production", + }, + }, +} # ------------------------------------------------------------------- # * WARNING: STOP EDITING HERE * diff --git a/superset/views/base.py b/superset/views/base.py index 9460b8d1aee69..160043358935b 100644 --- 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 @@ -310,6 +311,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": { @@ -319,6 +326,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), From 34018db09e8e933869ce78005b9716bed05d77a8 Mon Sep 17 00:00:00 2001 From: reesercollins <10563996+reesercollins@users.noreply.github.com> Date: Wed, 8 Jun 2022 16:58:33 -0400 Subject: [PATCH 2/9] Reorganize imports --- superset-frontend/src/views/components/MenuRight.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/views/components/MenuRight.tsx b/superset-frontend/src/views/components/MenuRight.tsx index 8d7fd2ceaeeec..bd8c63c5ea2ff 100644 --- a/superset-frontend/src/views/components/MenuRight.tsx +++ b/superset-frontend/src/views/components/MenuRight.tsx @@ -33,6 +33,7 @@ import Icons from 'src/components/Icons'; import findPermission, { isUserAdmin } from 'src/dashboard/util/findPermission'; import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes'; import { RootState } from 'src/dashboard/types'; +import { Tag } from 'antd'; import LanguagePicker from './LanguagePicker'; import DatabaseModal from '../CRUD/data/database/DatabaseModal'; import { uploadUserPerms } from '../CRUD/utils'; @@ -42,7 +43,6 @@ import { RightMenuProps, } from './types'; import { MenuObjectProps } from './Menu'; -import { Tag } from 'antd'; const versionInfoStyles = (theme: SupersetTheme) => css` padding: ${theme.gridUnit * 1.5}px ${theme.gridUnit * 4}px From cb212a5678da9d303c13db83a36759c72e73a628 Mon Sep 17 00:00:00 2001 From: reesercollins <10563996+reesercollins@users.noreply.github.com> Date: Thu, 9 Jun 2022 08:46:48 -0400 Subject: [PATCH 3/9] Prevent errors when config value not set --- superset/views/base.py | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/superset/views/base.py b/superset/views/base.py index 160043358935b..f3e391b8b956a 100644 --- a/superset/views/base.py +++ b/superset/views/base.py @@ -311,12 +311,18 @@ 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 {} - ) + 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": { From 9c86a876be9c7c2740ca80ff606d0ff5ea162d20 Mon Sep 17 00:00:00 2001 From: Reese <10563996+reesercollins@users.noreply.github.com> Date: Wed, 15 Jun 2022 17:17:18 -0400 Subject: [PATCH 4/9] Default production tag to be hidden --- superset/config.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/superset/config.py b/superset/config.py index efaf582e35bae..ba913ff6c025f 100644 --- a/superset/config.py +++ b/superset/config.py @@ -1298,8 +1298,8 @@ def SQL_QUERY_MUTATOR( # pylint: disable=invalid-name,unused-argument "text": "Development", }, "production": { - "color": "#039dfc", - "text": "Production", + "color": "", + "text": "", }, }, } From 9e72f3d9d33e1d3d43f44999110b25de02be851d Mon Sep 17 00:00:00 2001 From: reesercollins <10563996+reesercollins@users.noreply.github.com> Date: Tue, 21 Jun 2022 11:04:14 -0400 Subject: [PATCH 5/9] Change tag to Label component --- .../src/views/components/MenuRight.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/superset-frontend/src/views/components/MenuRight.tsx b/superset-frontend/src/views/components/MenuRight.tsx index 179301e926940..888d72c87459b 100644 --- a/superset-frontend/src/views/components/MenuRight.tsx +++ b/superset-frontend/src/views/components/MenuRight.tsx @@ -32,10 +32,9 @@ import { 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, { isUserAdmin } from 'src/dashboard/util/findPermission'; import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes'; -import { RootState } from 'src/dashboard/types'; -import { Tag } from 'antd'; import LanguagePicker from './LanguagePicker'; import DatabaseModal from '../CRUD/data/database/DatabaseModal'; import { uploadUserPerms } from '../CRUD/utils'; @@ -45,6 +44,7 @@ import { RightMenuProps, } from './types'; import { MenuObjectProps } from './Menu'; +import { RootState } from 'src/dashboard/types'; const versionInfoStyles = (theme: SupersetTheme) => css` padding: ${theme.gridUnit * 1.5}px ${theme.gridUnit * 4}px @@ -82,6 +82,10 @@ 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 = ({ @@ -270,9 +274,9 @@ const RightMenu = ({ /> )} {environmentTag.text && ( - - {environmentTag.text} - + )} Date: Tue, 21 Jun 2022 12:42:08 -0400 Subject: [PATCH 6/9] Fix import order --- superset-frontend/src/views/components/MenuRight.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/views/components/MenuRight.tsx b/superset-frontend/src/views/components/MenuRight.tsx index 888d72c87459b..3e4a3c7b08860 100644 --- a/superset-frontend/src/views/components/MenuRight.tsx +++ b/superset-frontend/src/views/components/MenuRight.tsx @@ -35,6 +35,7 @@ import Icons from 'src/components/Icons'; import Label from 'src/components/Label'; import findPermission, { isUserAdmin } from 'src/dashboard/util/findPermission'; import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes'; +import { RootState } from 'src/dashboard/types'; import LanguagePicker from './LanguagePicker'; import DatabaseModal from '../CRUD/data/database/DatabaseModal'; import { uploadUserPerms } from '../CRUD/utils'; @@ -44,7 +45,6 @@ import { RightMenuProps, } from './types'; import { MenuObjectProps } from './Menu'; -import { RootState } from 'src/dashboard/types'; const versionInfoStyles = (theme: SupersetTheme) => css` padding: ${theme.gridUnit * 1.5}px ${theme.gridUnit * 4}px From b2eaf7c4f5e71357222d15ccc3bba94742797bbb Mon Sep 17 00:00:00 2001 From: reesercollins <10563996+reesercollins@users.noreply.github.com> Date: Thu, 28 Jul 2022 14:11:46 -0400 Subject: [PATCH 7/9] Allow tag to be colored with theme --- .../src/views/components/RightMenu.tsx | 14 +++++++++++++- superset/config.py | 3 ++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/superset-frontend/src/views/components/RightMenu.tsx b/superset-frontend/src/views/components/RightMenu.tsx index 88da407ac6d83..8e32d9c113267 100644 --- a/superset-frontend/src/views/components/RightMenu.tsx +++ b/superset-frontend/src/views/components/RightMenu.tsx @@ -29,6 +29,7 @@ import { SupersetTheme, SupersetClient, getExtensionsRegistry, + useTheme, } from '@superset-ui/core'; import { MainNav as Menu } from 'src/components/Menu'; import { Tooltip } from 'src/components/Tooltip'; @@ -268,6 +269,8 @@ const RightMenu = ({ const handleDatabaseAdd = () => setQuery({ databaseAdded: true }); + const theme = useTheme(); + return ( {canDatabase && ( @@ -279,7 +282,16 @@ const RightMenu = ({ /> )} {environmentTag.text && ( -