feat: add explore-logo

superset-frontend/packages/superset-ui-core/src/style/index.tsx

@@ -156,6 +156,7 @@ const defaultTheme = {
   transitionTiming: 0.3,
   gridUnit: 4,
   brandIconMaxWidth: 37,
+  brandIconExploreMaxWidth: 150,
 };
 
 export type SupersetTheme = typeof defaultTheme;

superset-frontend/src/constants.ts

@@ -167,6 +167,7 @@ export const DEFAULT_COMMON_BOOTSTRAP_DATA: CommonBootstrapData = {
     brand: {
       path: '',
       icon: '',
+      explore_icon: '',
       alt: '',
       tooltip: '',
       text: '',

superset-frontend/src/features/home/Menu.test.tsx

@@ -172,6 +172,7 @@ const mockedProps = {
     brand: {
       path: '/superset/welcome/',
       icon: '/static/assets/images/superset-logo-horiz.png',
+      explore_icon: '/static/assets/images/explore-logo.png',
       alt: 'Superset',
       width: '126',
       tooltip: '',

superset-frontend/src/features/home/Menu.tsx

@@ -52,6 +52,33 @@ const StyledHeader = styled.header`
       .caret {
         display: none;
       }
+      .navbar-brand-explore-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+      .navbar-brand-explore {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        /* must be exactly the height of the Antd navbar */
+        min-height: 50px;
+        padding: ${theme.gridUnit}px
+          ${theme.gridUnit * 2}px
+          ${theme.gridUnit}px
+          ${theme.gridUnit * 4}px;
+        max-width: ${theme.gridUnit * theme.brandIconExploreMaxWidth}px;
+        img {
+          height: 100%;
+          object-fit: contain;
+        }
+        &:focus {
+          border-color: transparent;
+        }
+        &:focus-visible {
+          border-color: ${theme.colors.primary.dark1};
+        }
+      }
       .navbar-brand {
         display: flex;
         flex-direction: column;
@@ -242,6 +269,11 @@ export function Menu({
   };
   return (
     <StyledHeader className="top" id="main-menu" role="navigation">
+      <Row className="navbar-brand-explore-container">
+        <a className="navbar-brand-explore" href={brand.path} tabIndex={-2}>
+          <img src={brand.explore_icon} alt={brand.alt} />
+        </a>
+      </Row>
       <Row>
         <Col md={16} xs={24}>
           <Tooltip

superset-frontend/src/types/bootstrapTypes.ts

@@ -88,6 +88,7 @@ export type ChartResponse = {
 export interface BrandProps {
   path: string;
   icon: string;
+  explore_icon: string | undefined;
   alt: string;
   tooltip: string;
   text: string;

superset/config.py

@@ -313,6 +313,9 @@ APP_NAME = "Superset"
 # Specify the App icon
 APP_ICON = "/static/assets/images/superset-logo-horiz.png"
 
+# Specify the Explore icon
+EXPLORE_ICON = "/static/assets/images/explore-logo.png"
+
 # Specify where clicking the logo would take the user'
 # Default value of None will take you to '/superset/welcome'
 # You can also specify a relative URL e.g. '/superset/welcome' or '/dashboards/list'

superset/views/base.py

@@ -257,6 +257,7 @@ def menu_data(user: User) -> dict[str, Any]:
         "brand": {
             "path": appbuilder.app.config["LOGO_TARGET_PATH"] or "/superset/welcome/",
             "icon": appbuilder.app_icon,
+            "explore_icon": appbuilder.app.config["EXPLORE_ICON"],
             "alt": appbuilder.app_name,
             "tooltip": appbuilder.app.config["LOGO_TOOLTIP"],
             "text": brand_text,