From 9ae51f7a48b9f2747b97cdfd3f595f6101934dfd Mon Sep 17 00:00:00 2001
From: Geido <60598000+geido@users.noreply.github.com>
Date: Mon, 21 Mar 2022 19:51:20 +0200
Subject: [PATCH] chore: Remove logo forced width (#19049)

* Remove logo forced width

* improve styling

* improve paddings

* Update UPDATING.md

* Fixes a typo

* Add fixed height

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
Co-authored-by: Evan Rusackas <evan@preset.io>
---
 UPDATING.md                                     |  1 +
 superset-frontend/src/views/components/Menu.tsx | 15 +++++++++++++--
 superset/config.py                              |  1 -
 superset/views/base.py                          |  1 -
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/UPDATING.md b/UPDATING.md
index f9ffadfae..cfee3dcfd 100644
--- a/UPDATING.md
+++ b/UPDATING.md
@@ -29,6 +29,7 @@ assists people when migrating to a new version.
 
 ### Breaking Changes
 
+- [19049](https://github.com/apache/superset/pull/19049): APP_ICON_WIDTH has been removed from the config. Superset should now be able to handle different logo sizes without having to explicitly set an APP_ICON_WIDTH. This might affect the size of existing custom logos as the UI will now resize them according to the specified space of maximum 148px and not according to the value of APP_ICON_WIDTH.
 - [19274](https://github.com/apache/superset/pull/19274): The `PUBLIC_ROLE_LIKE_GAMMA` config key has been removed, set `PUBLIC_ROLE_LIKE` = "Gamma" to have the same functionality.
 - [19273](https://github.com/apache/superset/pull/19273): The `SUPERSET_CELERY_WORKERS` and `SUPERSET_WORKERS` config keys has been removed. Configure celery directly using `CELERY_CONFIG` on Superset
 - [19231](https://github.com/apache/superset/pull/19231): The `ENABLE_REACT_CRUD_VIEWS` feature flag has been removed (permanently enabled). Any deployments which had set this flag to false will need to verify that the React views support their use case.
diff --git a/superset-frontend/src/views/components/Menu.tsx b/superset-frontend/src/views/components/Menu.tsx
index 77a074f71..60a8187d1 100644
--- a/superset-frontend/src/views/components/Menu.tsx
+++ b/superset-frontend/src/views/components/Menu.tsx
@@ -35,7 +35,6 @@ interface BrandProps {
   path: string;
   icon: string;
   alt: string;
-  width: string | number;
   tooltip: string;
   text: string;
 }
@@ -97,6 +96,18 @@ const StyledHeader = styled.header`
     display: flex;
     flex-direction: column;
     justify-content: center;
+    /* must be exactly the height of the Antd navbar */
+    min-height: 50px;
+    padding: ${({ theme }) =>
+      `${theme.gridUnit}px ${theme.gridUnit * 2}px ${theme.gridUnit}px ${
+        theme.gridUnit * 4
+      }px`};
+    max-width: ${({ theme }) => `${theme.gridUnit * 37}px`};
+
+    img {
+      height: 100%;
+      object-fit: contain;
+    }
   }
   .navbar-brand-text {
     border-left: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
@@ -273,7 +284,7 @@ export function Menu({
             arrowPointAtCenter
           >
             <a className="navbar-brand" href={brand.path}>
-              <img width={brand.width} src={brand.icon} alt={brand.alt} />
+              <img src={brand.icon} alt={brand.alt} />
             </a>
           </Tooltip>
           {brand.text && (
diff --git a/superset/config.py b/superset/config.py
index c8c0a0053..bd32fc54a 100644
--- a/superset/config.py
+++ b/superset/config.py
@@ -234,7 +234,6 @@ APP_NAME = "Superset"
 
 # Specify the App icon
 APP_ICON = "/static/assets/images/superset-logo-horiz.png"
-APP_ICON_WIDTH = 126
 
 # Specify where clicking the logo would take the user
 # e.g. setting it to '/' would take the user to '/superset/welcome/'
diff --git a/superset/views/base.py b/superset/views/base.py
index 3024c4490..ae1f7a66b 100644
--- a/superset/views/base.py
+++ b/superset/views/base.py
@@ -317,7 +317,6 @@ def menu_data() -> Dict[str, Any]:
             "path": appbuilder.app.config["LOGO_TARGET_PATH"] or "/",
             "icon": appbuilder.app_icon,
             "alt": appbuilder.app_name,
-            "width": appbuilder.app.config["APP_ICON_WIDTH"],
             "tooltip": appbuilder.app.config["LOGO_TOOLTIP"],
             "text": brand_text,
         },