Branding configs rename and improvement

Change config smallLogoUrl to logoUrl, config logoUrl to fullLogoUrl to emphasize that thumbnail version of the logo will be used mostly in the application. Full version of the logo will only be used on the main page nav bar. If full logo is not provided, thumbnail logo will be used on the nav bar. Some config improvement includes fixing the validation error when inputting empty string, and add title validation function. Signed-off-by: Abby Hu <[email protected]>
opensearch-project · Sep 8, 2021 · 1905ddf · 1905ddf
1 parent 090f50d
commit 1905ddf
Show file tree

Hide file tree

Showing 25 changed files with 330 additions and 154 deletions.
diff --git 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.fullLogoUrl: ""
 
 # smaller version customized logo URL
-# opensearchDashboards.branding.smallLogoUrl: ""
+# opensearchDashboards.branding.logoUrl: ""
 
 # customized loading logo URL
 # opensearchDashboards.branding.loadingLogoUrl: ""

diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
diff --git a/...c/chrome/ui/header/branding/__snapshots__/opensearch_dashboards_custom_logo.test.tsx.snap b/...c/chrome/ui/header/branding/__snapshots__/opensearch_dashboards_custom_logo.test.tsx.snap
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
@@ -11,13 +11,20 @@ import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { CustomLogo } from './opensearch_dashboards_custom_logo';
 
 describe('Custom Logo', () => {
-  it('Take in a normal URL string', () => {
-    const branding = { logoUrl: '/custom' };
+  it('Take in a normal full logo URL string', () => {
+    const branding = { fullLogoUrl: '/custom', title: 'title' };
     const component = mountWithIntl(<CustomLogo {...branding} />);
     expect(component).toMatchSnapshot();
   });
-  it('Take in a invalid URL string', () => {
-    const branding = {};
+
+  it('Take in an invalid full logo URL string and a valid logo URL string', () => {
+    const branding = { logoUrl: '/custom', title: 'title' };
+    const component = mountWithIntl(<CustomLogo {...branding} />);
+    expect(component).toMatchSnapshot();
+  });
+
+  it('Take in invalid full logo URL and logo URL', () => {
+    const branding = { title: 'title' };
     const component = mountWithIntl(<CustomLogo {...branding} />);
     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
@@ -35,23 +35,29 @@ 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
+ * @param {string} fullLogoUrl - custom URL for the top left logo of the main screen
+ * @param {string} logoUrl - custom URL for the logo icon
+ * @param {string} title - custom title for the application
  */
 export interface CustomLogoType {
+  fullLogoUrl?: string;
   logoUrl?: string;
+  title: string;
 }
 
 export const CustomLogo = ({ ...branding }: CustomLogoType) => {
-  return !branding.logoUrl ? (
-    OpenSearchDashboardsLogoDarkMode()
-  ) : (
-    <img
-      data-test-subj="customLogo"
-      data-test-image-url={branding.logoUrl}
-      src={branding.logoUrl}
-      alt="logo"
-      loading="lazy"
-      className="logoImage"
-    />
-  );
+  if (!branding.fullLogoUrl && !branding.logoUrl) {
+    return OpenSearchDashboardsLogoDarkMode();
+  } else {
+    return (
+      <img
+        data-test-subj="customLogo"
+        data-test-image-url={!branding.fullLogoUrl ? branding.logoUrl : branding.fullLogoUrl}
+        src={!branding.fullLogoUrl ? branding.logoUrl : branding.fullLogoUrl}
+        alt={branding.title + ' logo'}
+        loading="lazy"
+        className="logoImage"
+      />
+    );
+  }
 };
diff --git a/src/core/public/chrome/ui/header/header.test.tsx b/src/core/public/chrome/ui/header/header.test.tsx
@@ -69,7 +69,7 @@ function mockProps() {
     isLocked$: new BehaviorSubject(false),
     loadingCount$: new BehaviorSubject(0),
     onIsLockedUpdate: () => {},
-    branding: { logoUrl: '/', smallLogoUrl: '/', title: 'OpenSearch Dashboards' },
+    branding: { fullLogoUrl: '/', logoUrl: '/', title: 'OpenSearch Dashboards' },
   };
 }
 

diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx
@@ -87,7 +87,7 @@ export interface HeaderProps {
   isLocked$: Observable<boolean>;
   loadingCount$: ReturnType<HttpStart['getLoadingCount$']>;
   onIsLockedUpdate: OnIsLockedUpdate;
-  branding: { logoUrl?: string };
+  branding: { fullLogoUrl?: string; logoUrl?: string; title: string };
 }
 
 export function Header({
@@ -127,7 +127,7 @@ export function Header({
                     forceNavigation$={observables.forceAppSwitcherNavigation$}
                     navLinks$={observables.navLinks$}
                     navigateToApp={application.navigateToApp}
-                    logoUrl={branding.logoUrl}
+                    branding={branding}
                   />,
                   <LoadingIndicator loadingCount$={observables.loadingCount$} />,
                 ],

diff --git a/src/core/public/chrome/ui/header/header_logo.tsx b/src/core/public/chrome/ui/header/header_logo.tsx
@@ -104,15 +104,12 @@ interface Props {
   navLinks$: Observable<ChromeNavLink[]>;
   forceNavigation$: Observable<boolean>;
   navigateToApp: (appId: string) => void;
-  logoUrl?: string;
+  branding: CustomLogoType;
 }
 
-export function HeaderLogo({ href, navigateToApp, logoUrl, ...observables }: Props) {
+export function HeaderLogo({ href, navigateToApp, branding, ...observables }: Props) {
   const forceNavigation = useObservable(observables.forceNavigation$, false);
   const navLinks = useObservable(observables.navLinks$, []);
-  const branding: CustomLogoType = {
-    logoUrl,
-  };
 
   return (
     <a

diff --git a/src/core/public/index.ts b/src/core/public/index.ts
@@ -237,8 +237,8 @@ export interface CoreSetup<TPluginsStart extends object = object, TStart = unkno
   injectedMetadata: {
     getInjectedVar: (name: string, defaultValue?: any) => unknown;
     getBranding: () => {
+      fullLogoUrl?: string;
       logoUrl?: string;
-      smallLogoUrl?: string;
       title: string;
     };
   };
@@ -297,8 +297,8 @@ export interface CoreStart {
   injectedMetadata: {
     getInjectedVar: (name: string, defaultValue?: any) => unknown;
     getBranding: () => {
+      fullLogoUrl?: string;
       logoUrl?: string;
-      smallLogoUrl?: string;
       title: string;
     };
   };

diff --git a/src/core/public/injected_metadata/injected_metadata_service.test.ts b/src/core/public/injected_metadata/injected_metadata_service.test.ts
@@ -234,11 +234,11 @@ describe('setup.getBranding()', () => {
   it('returns injectedMetadata.branding', () => {
     const injectedMetadata = new InjectedMetadataService({
       injectedMetadata: {
-        branding: { logoUrl: '/', smallLogoUrl: '/', title: 'title' },
+        branding: { fullLogoUrl: '/', logoUrl: '/', title: 'title' },
       },
     } as any);
 
     const branding = injectedMetadata.setup().getBranding();
-    expect(branding).toEqual({ logoUrl: '/', smallLogoUrl: '/', title: 'title' });
+    expect(branding).toEqual({ fullLogoUrl: '/', logoUrl: '/', title: 'title' });
   });
 });
diff --git 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: {
+      fullLogoUrl?: string;
       logoUrl?: string;
-      smallLogoUrl?: string;
       title: string;
     };
   };
@@ -186,8 +186,8 @@ export interface InjectedMetadataSetup {
     [key: string]: unknown;
   };
   getBranding: () => {
+    fullLogoUrl?: string;
     logoUrl?: string;
-    smallLogoUrl?: string;
     title: string;
   };
 }

diff --git a/src/core/server/opensearch_dashboards_config.ts b/src/core/server/opensearch_dashboards_config.ts
@@ -53,16 +53,16 @@ export const config = {
     autocompleteTerminateAfter: schema.duration({ defaultValue: 100000 }),
     autocompleteTimeout: schema.duration({ defaultValue: 1000 }),
     branding: schema.object({
-      logoUrl: schema.string({
+      fullLogoUrl: schema.string({
         defaultValue: '/',
       }),
-      smallLogoUrl: schema.string({
+      logoUrl: schema.string({
         defaultValue: '/',
       }),
       loadingLogoUrl: schema.string({
         defaultValue: '/',
       }),
-      title: schema.string({ defaultValue: 'OpenSearch Dashboards' }),
+      title: schema.string({ defaultValue: '' }),
     }),
   }),
   deprecations,

diff --git a/src/core/server/rendering/__mocks__/rendering_service.ts b/src/core/server/rendering/__mocks__/rendering_service.ts
@@ -42,10 +42,12 @@ export const setupMock: jest.Mocked<InternalRenderingServiceSetup> = {
 export const mockSetup = jest.fn().mockResolvedValue(setupMock);
 export const mockStop = jest.fn();
 export const mockCheckUrlValid = jest.fn();
+export const mockCheckTitleValid = jest.fn();
 export const mockRenderingService: jest.Mocked<IRenderingService> = {
   setup: mockSetup,
   stop: mockStop,
   checkUrlValid: mockCheckUrlValid,
+  checkTitleValid: mockCheckTitleValid,
 };
 export const RenderingService = jest.fn<IRenderingService, [typeof mockRenderingServiceParams]>(
   () => mockRenderingService

diff --git a/src/core/server/rendering/rendering_service.test.ts b/src/core/server/rendering/rendering_service.test.ts
@@ -138,30 +138,50 @@ describe('RenderingService', () => {
   });
 
   describe('checkUrlValid()', () => {
-    it('SVG URL is valid', async () => {
+    it('checks valid SVG URL', async () => {
       const result = await service.checkUrlValid(
         'https://opensearch.org/assets/brand/SVG/Mark/opensearch_mark_default.svg',
         'config'
       );
       expect(result).toEqual(true);
     });
 
-    it('PNG URL is valid', async () => {
+    it('checks valid PNG URL', async () => {
       const result = await service.checkUrlValid(
         'https://opensearch.org/assets/brand/PNG/Mark/opensearch_mark_default.png',
         'config'
       );
       expect(result).toEqual(true);
     });
 
-    it('URL does not contain svg, png or gif', async () => {
+    it('checks invalid URL that does not contain svg, png or gif', async () => {
       const result = await service.checkUrlValid('https://validUrl', 'config');
       expect(result).toEqual(false);
     });
 
-    it('URL is invalid', async () => {
+    it('checks invalid URL', async () => {
       const result = await service.checkUrlValid('http://notfound.svg', 'config');
       expect(result).toEqual(false);
     });
   });
+
+  describe('checkTitleValid()', () => {
+    it('checks valid title', () => {
+      const result = service.checkTitleValid('OpenSearch Dashboards', 'config');
+      expect(result).toEqual(true);
+    });
+
+    it('checks invalid title with empty string', () => {
+      const result = service.checkTitleValid('', 'config');
+      expect(result).toEqual(false);
+    });
+
+    it('checks invalid title with length > 36 character', () => {
+      const result = service.checkTitleValid(
+        'OpenSearch Dashboardssssssssssssssssssssss',
+        'config'
+      );
+      expect(result).toEqual(false);
+    });
+  });
 });