diff --git a/config/opensearch_dashboards.yml b/config/opensearch_dashboards.yml index 2ed7d8fa2b0b..3057d347236c 100644 --- a/config/opensearch_dashboards.yml +++ b/config/opensearch_dashboards.yml @@ -152,10 +152,10 @@ #vis_type_timeline.graphiteBlockedIPs: [] # full version customized logo URL -# opensearchDashboards.branding.logoUrl: "" + opensearchDashboards.branding.logoUrl: "https://i.ibb.co/WHHLG2W/bear" # smaller version customized logo URL -# opensearchDashboards.branding.smallLogoUrl: "" + opensearchDashboards.branding.smallLogoUrl: "https://i.ibb.co/WHHLG2W/bear.png" # custom application title # opensearchDashboards.branding.title: "" diff --git a/src/core/public/chrome/ui/header/branding/opensearch_dashboards_custom_logo.test.tsx b/src/core/public/chrome/ui/header/branding/opensearch_dashboards_custom_logo.test.tsx index 44b52b442a5e..66a3f7a3694a 100644 --- a/src/core/public/chrome/ui/header/branding/opensearch_dashboards_custom_logo.test.tsx +++ b/src/core/public/chrome/ui/header/branding/opensearch_dashboards_custom_logo.test.tsx @@ -17,7 +17,7 @@ describe('Custom Logo', () => { expect(component).toMatchSnapshot(); }); it('Take in a invalid URL string', () => { - const branding = { logoUrl: undefined }; + const branding = {}; const component = mountWithIntl(); expect(component).toMatchSnapshot(); }); diff --git a/src/core/public/chrome/ui/header/branding/opensearch_dashboards_custom_logo.tsx b/src/core/public/chrome/ui/header/branding/opensearch_dashboards_custom_logo.tsx index 01e3a0767e2a..bdf240cb1a7c 100644 --- a/src/core/public/chrome/ui/header/branding/opensearch_dashboards_custom_logo.tsx +++ b/src/core/public/chrome/ui/header/branding/opensearch_dashboards_custom_logo.tsx @@ -34,12 +34,15 @@ import React from 'react'; import '../header_logo.scss'; import { OpenSearchDashboardsLogoDarkMode } from './opensearch_dashboards_logo_darkmode'; +/** + * @param {string} logoUrl - custom URL for the top left logo of the main screen + */ export interface CustomLogoType { - logoUrl: string | undefined; + logoUrl?: string; } export const CustomLogo = ({ ...branding }: CustomLogoType) => { - return branding.logoUrl === undefined ? ( + return !branding.logoUrl ? ( OpenSearchDashboardsLogoDarkMode() ) : ( ; loadingCount$: ReturnType; onIsLockedUpdate: OnIsLockedUpdate; - branding: { logoUrl: string | undefined }; + branding: { logoUrl?: string }; } export function Header({ diff --git a/src/core/public/chrome/ui/header/header_logo.tsx b/src/core/public/chrome/ui/header/header_logo.tsx index cb40928c121b..b7219a2e1863 100644 --- a/src/core/public/chrome/ui/header/header_logo.tsx +++ b/src/core/public/chrome/ui/header/header_logo.tsx @@ -104,7 +104,7 @@ interface Props { navLinks$: Observable; forceNavigation$: Observable; navigateToApp: (appId: string) => void; - logoUrl: string | undefined; + logoUrl?: string; } export function HeaderLogo({ href, navigateToApp, logoUrl, ...observables }: Props) { diff --git a/src/core/public/index.ts b/src/core/public/index.ts index 57bdf8656a9b..2e20956330f1 100644 --- a/src/core/public/index.ts +++ b/src/core/public/index.ts @@ -237,8 +237,8 @@ export interface CoreSetup unknown; getBranding: () => { - logoUrl: string | undefined; - smallLogoUrl: string | undefined; + logoUrl?: string; + smallLogoUrl?: string; title: string; }; }; @@ -297,8 +297,8 @@ export interface CoreStart { injectedMetadata: { getInjectedVar: (name: string, defaultValue?: any) => unknown; getBranding: () => { - logoUrl: string | undefined; - smallLogoUrl: string | undefined; + logoUrl?: string; + smallLogoUrl?: string; title: string; }; }; diff --git a/src/core/public/injected_metadata/injected_metadata_service.ts b/src/core/public/injected_metadata/injected_metadata_service.ts index 2cd2d0043ad9..2cb1eef378ad 100644 --- a/src/core/public/injected_metadata/injected_metadata_service.ts +++ b/src/core/public/injected_metadata/injected_metadata_service.ts @@ -77,8 +77,8 @@ export interface InjectedMetadataParams { }; }; branding: { - logoUrl: string | undefined; - smallLogoUrl: string | undefined; + logoUrl?: string; + smallLogoUrl?: string; title: string; }; }; @@ -186,8 +186,8 @@ export interface InjectedMetadataSetup { [key: string]: unknown; }; getBranding: () => { - logoUrl: string | undefined; - smallLogoUrl: string | undefined; + logoUrl?: string; + smallLogoUrl?: string; title: string; }; } diff --git a/src/core/server/rendering/rendering_service.tsx b/src/core/server/rendering/rendering_service.tsx index 034a1533fd04..7c746c50cbaa 100644 --- a/src/core/server/rendering/rendering_service.tsx +++ b/src/core/server/rendering/rendering_service.tsx @@ -121,12 +121,10 @@ export class RenderingService { uiSettings: settings, }, branding: { - logoUrl: - isLogoUrlValid === true ? opensearchDashboardsConfig.branding.logoUrl : undefined, - smallLogoUrl: - isSmallLogoUrlValid === true - ? opensearchDashboardsConfig.branding.smallLogoUrl - : undefined, + logoUrl: isLogoUrlValid ? opensearchDashboardsConfig.branding.logoUrl : undefined, + smallLogoUrl: isSmallLogoUrlValid + ? opensearchDashboardsConfig.branding.smallLogoUrl + : undefined, title: opensearchDashboardsConfig.branding.title, }, }, diff --git a/src/core/server/rendering/types.ts b/src/core/server/rendering/types.ts index 518e77bea960..ae3038360516 100644 --- a/src/core/server/rendering/types.ts +++ b/src/core/server/rendering/types.ts @@ -75,8 +75,8 @@ export interface RenderingMetadata { }; }; branding: { - logoUrl: string | undefined; - smallLogoUrl: string | undefined; + logoUrl?: string; + smallLogoUrl?: string; title: string; }; }; diff --git a/src/plugins/home/public/application/components/__snapshots__/welcome.test.tsx.snap b/src/plugins/home/public/application/components/__snapshots__/welcome.test.tsx.snap index ece1066f46fb..bb331c752bad 100644 --- a/src/plugins/home/public/application/components/__snapshots__/welcome.test.tsx.snap +++ b/src/plugins/home/public/application/components/__snapshots__/welcome.test.tsx.snap @@ -146,15 +146,14 @@ exports[`should render a Welcome screen with the default OpenSearch Dashboards b -
- logo -
+ { test('should render a Welcome screen with the default OpenSearch Dashboards branding', () => { const defaultBranding = { - smallLogoUrl: undefined, title: 'OpenSearch Dashboards', }; const component = shallow( diff --git a/src/plugins/home/public/application/components/welcome.tsx b/src/plugins/home/public/application/components/welcome.tsx index 1f4dbad9fa82..77d265c0862b 100644 --- a/src/plugins/home/public/application/components/welcome.tsx +++ b/src/plugins/home/public/application/components/welcome.tsx @@ -59,7 +59,7 @@ interface Props { onSkip: () => void; telemetry?: TelemetryPluginStart; branding: { - smallLogoUrl: string | undefined; + smallLogoUrl?: string; title: string; }; } @@ -144,6 +144,28 @@ export class Welcome extends React.Component { } }; + private renderBrandingEnabledOrDisabledLogo = () => { + if (!this.props.branding.smallLogoUrl) { + return ( + + + + ); + } else { + return ( +
+ logo +
+ ); + } + }; + render() { const { urlBasePath, telemetry, branding } = this.props; return ( @@ -152,21 +174,7 @@ export class Welcome extends React.Component {
- {branding.smallLogoUrl === undefined ? ( - - - - ) : ( -
- logo -
- )} + {this.renderBrandingEnabledOrDisabledLogo()}