From: David Cho-Lerat <david.cho-lerat@sonarsource.com>
Date: Wed, 19 Jul 2023 12:36:54 +0000 (+0200)
Subject: SONAR-19971 Fix custom logo width
X-Git-Tag: 10.2.0.77647~360
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=9d22c3b21728bff64833e66087fa15e87c2d6a7d;p=sonarqube.git

SONAR-19971 Fix custom logo width
---

diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavBranding.tsx b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavBranding.tsx
deleted file mode 100644
index 5f3f3ae415b..00000000000
--- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavBranding.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2023 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Link from '../../../../components/common/Link';
-import { translate } from '../../../../helpers/l10n';
-import { getBaseUrl } from '../../../../helpers/system';
-import { AppState } from '../../../../types/appstate';
-import { GlobalSettingKeys } from '../../../../types/settings';
-import withAppStateContext from '../../app-state/withAppStateContext';
-
-export interface GlobalNavBrandingProps {
-  appState: AppState;
-}
-
-export function GlobalNavBranding({ appState: { settings } }: GlobalNavBrandingProps) {
-  const customLogoUrl = settings[GlobalSettingKeys.LogoUrl];
-  const customLogoWidth = settings[GlobalSettingKeys.LogoWidth];
-
-  const title = translate('layout.nav.home_logo_alt');
-  const url = customLogoUrl || `${getBaseUrl()}/images/logo.svg?v=6.6`;
-  const width = customLogoUrl ? customLogoWidth || 100 : 83;
-
-  return (
-    <Link className="navbar-brand" to="/">
-      <img alt={title} height={30} src={url} title={title} width={width} />
-    </Link>
-  );
-}
-
-export default withAppStateContext(GlobalNavBranding);
diff --git a/server/sonar-web/src/main/js/app/components/nav/global/MainSonarQubeBar.tsx b/server/sonar-web/src/main/js/app/components/nav/global/MainSonarQubeBar.tsx
index e7f0afadc52..19c2edb1ef5 100644
--- a/server/sonar-web/src/main/js/app/components/nav/global/MainSonarQubeBar.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/global/MainSonarQubeBar.tsx
@@ -24,15 +24,22 @@ import { translate } from '../../../../helpers/l10n';
 import { GlobalSettingKeys } from '../../../../types/settings';
 import { AppStateContext } from '../../app-state/AppStateContext';
 
+const DEFAULT_CUSTOM_LOGO_WIDTH_IN_PX = 100;
+
 function LogoWithAriaText() {
   const { settings } = React.useContext(AppStateContext);
   const customLogoUrl = settings[GlobalSettingKeys.LogoUrl];
+  const customLogoWidth = settings[GlobalSettingKeys.LogoWidth] ?? DEFAULT_CUSTOM_LOGO_WIDTH_IN_PX;
 
   const title = translate('layout.nav.home_logo_alt');
 
   return (
     <div aria-label={title} role="img">
-      {customLogoUrl ? <img alt={title} src={customLogoUrl} /> : <SonarQubeLogo />}
+      {customLogoUrl ? (
+        <img alt={title} src={customLogoUrl} width={customLogoWidth} />
+      ) : (
+        <SonarQubeLogo />
+      )}
     </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/helpers/mocks/definitions-list.ts b/server/sonar-web/src/main/js/helpers/mocks/definitions-list.ts
index 32e36b16e27..6b56a5ad3f4 100644
--- a/server/sonar-web/src/main/js/helpers/mocks/definitions-list.ts
+++ b/server/sonar-web/src/main/js/helpers/mocks/definitions-list.ts
@@ -1514,7 +1514,8 @@ export const definitions: ExtendedSettingDefinition[] = [
   {
     key: 'sonar.lf.logoWidthPx',
     name: 'Width of image in pixels',
-    description: 'Width in pixels, given that the height of the the image is constrained to 30px.',
+    description:
+      'Width in pixels, constrained to 150px (the height of the image is constrained to 40px).',
     category: 'general',
     subCategory: 'looknfeel',
     options: [],
diff --git a/sonar-core/src/main/java/org/sonar/core/config/CorePropertyDefinitions.java b/sonar-core/src/main/java/org/sonar/core/config/CorePropertyDefinitions.java
index 360e34ffee6..403a03cc2e8 100644
--- a/sonar-core/src/main/java/org/sonar/core/config/CorePropertyDefinitions.java
+++ b/sonar-core/src/main/java/org/sonar/core/config/CorePropertyDefinitions.java
@@ -141,7 +141,7 @@ public class CorePropertyDefinitions {
       PropertyDefinition.builder(WebConstants.SONAR_LF_LOGO_WIDTH_PX)
         .deprecatedKey("sonar.branding.image.width")
         .name("Width of image in pixels")
-        .description("Width in pixels, given that the height of the the image is constrained to 30px.")
+        .description("Width in pixels, constrained to 150px (the height of the image is constrained to 40px).")
         .category(CoreProperties.CATEGORY_GENERAL)
         .subCategory(CoreProperties.SUBCATEGORY_LOOKNFEEL)
         .build(),