From 11f90a96b37b6c3b15ec78cf955c631e55191ab1 Mon Sep 17 00:00:00 2001 From: Abby Hu Date: Wed, 13 Oct 2021 19:59:23 +0000 Subject: [PATCH] Store default opensearch branding asset folder Store the original opensearch branding logos in an asset folder, instead of making API calls. Signed-off-by: Abby Hu --- .../collapsible_nav.test.tsx.snap | 28 ++-- ...earch_dashboards_custom_logo.test.tsx.snap | 150 +----------------- .../opensearch_dashboards_custom_logo.tsx | 4 +- .../chrome/ui/header/collapsible_nav.tsx | 7 +- .../default_branding/opensearch_logo.svg} | 68 ++++---- .../opensearch_mark_dark_mode.svg | 34 ++++ .../opensearch_mark_default_mode.svg | 34 ++++ .../rendering_service.test.ts.snap | 5 + .../server/rendering/rendering_service.tsx | 4 +- src/core/types/custom_branding.ts | 2 + .../solution_title.test.tsx.snap | 4 +- .../solutions_section/solution_title.tsx | 8 +- .../overview_page_header.tsx | 6 +- 13 files changed, 142 insertions(+), 212 deletions(-) rename src/core/{public/chrome/ui/header/branding/opensearch_dashboards_logo_darkmode.tsx => server/core_app/assets/default_branding/opensearch_logo.svg} (92%) create mode 100644 src/core/server/core_app/assets/default_branding/opensearch_mark_dark_mode.svg create mode 100644 src/core/server/core_app/assets/default_branding/opensearch_mark_default_mode.svg diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap index 8c7187a33a37..8c4e6e7d2461 100644 --- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap +++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap @@ -6243,9 +6243,9 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 3`] = className="euiFlexItem eui-yScroll" > @@ -6284,7 +6284,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 3`] = } className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading" - data-test-opensearch-logo="https://opensearch.org/assets/brand/SVG/Mark/opensearch_mark_default.svg" + data-test-opensearch-logo="undefined/opensearch_mark_default_mode.svg" data-test-subj="collapsibleNavGroup-opensearchDashboards" id="mockId" initialIsOpen={true} @@ -6295,7 +6295,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 3`] = >
@@ -6344,10 +6344,10 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 3`] = >
@@ -8644,9 +8644,9 @@ exports[`CollapsibleNav renders the nav bar with custom logo in default mode 2`] className="euiFlexItem eui-yScroll" > @@ -8685,7 +8685,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in default mode 2`] } className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading" - data-test-opensearch-logo="https://opensearch.org/assets/brand/SVG/Mark/opensearch_mark_default.svg" + data-test-opensearch-logo="undefined/opensearch_mark_default_mode.svg" data-test-subj="collapsibleNavGroup-opensearchDashboards" id="mockId" initialIsOpen={true} @@ -8696,7 +8696,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in default mode 2`] >
@@ -8745,10 +8745,10 @@ exports[`CollapsibleNav renders the nav bar with custom logo in default mode 2`] >
diff --git a/src/core/public/chrome/ui/header/branding/__snapshots__/opensearch_dashboards_custom_logo.test.tsx.snap b/src/core/public/chrome/ui/header/branding/__snapshots__/opensearch_dashboards_custom_logo.test.tsx.snap index cafa2e445529..80b66e95bd41 100644 --- a/src/core/public/chrome/ui/header/branding/__snapshots__/opensearch_dashboards_custom_logo.test.tsx.snap +++ b/src/core/public/chrome/ui/header/branding/__snapshots__/opensearch_dashboards_custom_logo.test.tsx.snap @@ -633,77 +633,10 @@ exports[`Header logo in dark mode rendered using original opensearch logo 1`] logo={Object {}} mark={Object {}} > - - - - - - - - - - - - - - - - - + custom title logo `; @@ -1072,76 +1005,9 @@ exports[`Header logo in default mode rendered using the original opensearch lo logo={Object {}} mark={Object {}} > - - - - - - - - - - - - - - - - - + custom title logo `; 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 ad639aec1673..34c69582ca7d 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 @@ -32,7 +32,6 @@ import React from 'react'; import '../header_logo.scss'; -import { OpenSearchDashboardsLogoDarkMode } from './opensearch_dashboards_logo_darkmode'; import { ChromeBranding } from '../../../chrome_service'; /** @@ -46,6 +45,7 @@ import { ChromeBranding } from '../../../chrome_service'; */ export const CustomLogo = ({ ...branding }: ChromeBranding) => { const darkMode = branding.darkMode; + const assetFolderUrl = branding.assetFolderUrl; const logoDefault = branding.logo?.defaultUrl; const logoDarkMode = branding.logo?.darkModeUrl; const markDefault = branding.mark?.defaultUrl; @@ -96,6 +96,6 @@ export const CustomLogo = ({ ...branding }: ChromeBranding) => { />
) : ( - OpenSearchDashboardsLogoDarkMode() + {applicationTitle ); }; diff --git a/src/core/public/chrome/ui/header/collapsible_nav.tsx b/src/core/public/chrome/ui/header/collapsible_nav.tsx index 16e34bd4e1d8..5af6f157914d 100644 --- a/src/core/public/chrome/ui/header/collapsible_nav.tsx +++ b/src/core/public/chrome/ui/header/collapsible_nav.tsx @@ -140,10 +140,9 @@ export function CollapsibleNav({ }); }; - const DEFAULT_OPENSEARCH_MARK = - 'https://opensearch.org/assets/brand/SVG/Mark/opensearch_mark_default.svg'; - const DARKMODE_OPENSEARCH_MARK = - 'https://opensearch.org/assets/brand/SVG/Mark/opensearch_mark_darkmode.svg'; + const DEFAULT_OPENSEARCH_MARK = `${branding.assetFolderUrl}/opensearch_mark_default_mode.svg`; + const DARKMODE_OPENSEARCH_MARK = `${branding.assetFolderUrl}/opensearch_mark_dark_mode.svg`; + const darkMode = branding.darkMode; const markDefault = branding.mark?.defaultUrl; const markDarkMode = branding.mark?.darkModeUrl; diff --git a/src/core/public/chrome/ui/header/branding/opensearch_dashboards_logo_darkmode.tsx b/src/core/server/core_app/assets/default_branding/opensearch_logo.svg similarity index 92% rename from src/core/public/chrome/ui/header/branding/opensearch_dashboards_logo_darkmode.tsx rename to src/core/server/core_app/assets/default_branding/opensearch_logo.svg index 665c8615738e..344f5e645e18 100644 --- a/src/core/public/chrome/ui/header/branding/opensearch_dashboards_logo_darkmode.tsx +++ b/src/core/server/core_app/assets/default_branding/opensearch_logo.svg @@ -1,39 +1,33 @@ -/* - * SPDX-License-Identifier: Apache-2.0 - * - * The OpenSearch Contributors require contributions made to - * this file be licensed under the Apache-2.0 license or a - * compatible open source license. - */ + -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -/* - * Modifications Copyright OpenSearch Contributors. See - * GitHub history for details. - */ -import React from 'react'; - -export function OpenSearchDashboardsLogoDarkMode() { - return ( - + - - ); -} + \ No newline at end of file diff --git a/src/core/server/core_app/assets/default_branding/opensearch_mark_dark_mode.svg b/src/core/server/core_app/assets/default_branding/opensearch_mark_dark_mode.svg new file mode 100644 index 000000000000..148f5ad117db --- /dev/null +++ b/src/core/server/core_app/assets/default_branding/opensearch_mark_dark_mode.svg @@ -0,0 +1,34 @@ + + + + + + + \ No newline at end of file diff --git a/src/core/server/core_app/assets/default_branding/opensearch_mark_default_mode.svg b/src/core/server/core_app/assets/default_branding/opensearch_mark_default_mode.svg new file mode 100644 index 000000000000..c8b4e58f2676 --- /dev/null +++ b/src/core/server/core_app/assets/default_branding/opensearch_mark_default_mode.svg @@ -0,0 +1,34 @@ + + + + + + + \ No newline at end of file diff --git a/src/core/server/rendering/__snapshots__/rendering_service.test.ts.snap b/src/core/server/rendering/__snapshots__/rendering_service.test.ts.snap index 0cdb5cd2e95b..a92325814a81 100644 --- a/src/core/server/rendering/__snapshots__/rendering_service.test.ts.snap +++ b/src/core/server/rendering/__snapshots__/rendering_service.test.ts.snap @@ -7,6 +7,7 @@ Object { "branch": Any, "branding": Object { "applicationTitle": "OpenSearch Dashboards", + "assetFolderUrl": "/mock-server-basepath/ui/default_branding", "darkMode": false, "loadingLogo": Object {}, "logo": Object {}, @@ -57,6 +58,7 @@ Object { "branch": Any, "branding": Object { "applicationTitle": "OpenSearch Dashboards", + "assetFolderUrl": "/mock-server-basepath/ui/default_branding", "darkMode": false, "loadingLogo": Object {}, "logo": Object {}, @@ -107,6 +109,7 @@ Object { "branch": Any, "branding": Object { "applicationTitle": "OpenSearch Dashboards", + "assetFolderUrl": "/mock-server-basepath/ui/default_branding", "darkMode": true, "loadingLogo": Object {}, "logo": Object {}, @@ -161,6 +164,7 @@ Object { "branch": Any, "branding": Object { "applicationTitle": "OpenSearch Dashboards", + "assetFolderUrl": "/ui/default_branding", "darkMode": false, "loadingLogo": Object {}, "logo": Object {}, @@ -211,6 +215,7 @@ Object { "branch": Any, "branding": Object { "applicationTitle": "OpenSearch Dashboards", + "assetFolderUrl": "/mock-server-basepath/ui/default_branding", "darkMode": false, "loadingLogo": Object {}, "logo": Object {}, diff --git a/src/core/server/rendering/rendering_service.tsx b/src/core/server/rendering/rendering_service.tsx index 134e9c38f8b1..2d32c03f87ef 100644 --- a/src/core/server/rendering/rendering_service.tsx +++ b/src/core/server/rendering/rendering_service.tsx @@ -78,6 +78,7 @@ export class RenderingService { packageInfo: this.coreContext.env.packageInfo, }; const basePath = http.basePath.get(request); + const uiPublicUrl = `${basePath}/ui`; const serverBasePath = http.basePath.serverBasePath; const settings = { defaults: uiSettings.getRegistered(), @@ -93,7 +94,7 @@ export class RenderingService { const metadata: RenderingMetadata = { strictCsp: http.csp.strict, - uiPublicUrl: `${basePath}/ui`, + uiPublicUrl, bootstrapScriptUrl: `${basePath}/bootstrap.js`, i18n: i18n.translate, locale: i18n.getLocale(), @@ -123,6 +124,7 @@ export class RenderingService { }, branding: { darkMode, + assetFolderUrl: `${uiPublicUrl}/default_branding`, logo: { defaultUrl: brandingAssignment.logoDefault, darkModeUrl: brandingAssignment.logoDarkmode, diff --git a/src/core/types/custom_branding.ts b/src/core/types/custom_branding.ts index 6ae445abfd3e..23618512349e 100644 --- a/src/core/types/custom_branding.ts +++ b/src/core/types/custom_branding.ts @@ -38,6 +38,8 @@ export interface Branding { /** Default mode or Dark mode*/ darkMode?: boolean; + /** Relative path to the asset folder */ + assetFolderUrl?: string; /** Small logo icon that will be used in most logo occurrences */ mark?: { defaultUrl?: string; diff --git a/src/plugins/home/public/application/components/solutions_section/__snapshots__/solution_title.test.tsx.snap b/src/plugins/home/public/application/components/solutions_section/__snapshots__/solution_title.test.tsx.snap index e3ae99503005..2fb95d11d5c8 100644 --- a/src/plugins/home/public/application/components/solutions_section/__snapshots__/solution_title.test.tsx.snap +++ b/src/plugins/home/public/application/components/solutions_section/__snapshots__/solution_title.test.tsx.snap @@ -103,7 +103,7 @@ exports[`SolutionTitle in dark mode renders the home dashboard logo using origi @@ -191,7 +191,7 @@ exports[`SolutionTitle in default mode renders the home dashboard logo using or diff --git a/src/plugins/home/public/application/components/solutions_section/solution_title.tsx b/src/plugins/home/public/application/components/solutions_section/solution_title.tsx index 4dd5b863adf8..aed7ebde8fab 100644 --- a/src/plugins/home/public/application/components/solutions_section/solution_title.tsx +++ b/src/plugins/home/public/application/components/solutions_section/solution_title.tsx @@ -57,11 +57,6 @@ interface Props { branding: HomePluginBranding; } -const DEFAULT_OPENSEARCH_MARK = - 'https://opensearch.org/assets/brand/SVG/Mark/opensearch_mark_default.svg'; -const DARKMODE_OPENSEARCH_MARK = - 'https://opensearch.org/assets/brand/SVG/Mark/opensearch_mark_darkmode.svg'; - /** * Use branding configurations to check which URL to use for rendering * home card logo in default mode. In default mode, home card logo will @@ -125,6 +120,9 @@ const renderBrandingEnabledOrDisabledLogo = (branding: HomePluginBranding) => {
); } + const DEFAULT_OPENSEARCH_MARK = `${branding.assetFolderUrl}/opensearch_mark_default_mode.svg`; + const DARKMODE_OPENSEARCH_MARK = `${branding.assetFolderUrl}/opensearch_mark_dark_mode.svg`; + return ( = ({ dev_tools: isDevToolsEnabled, } = application.capabilities.navLinks; - const DEFAULT_OPENSEARCH_MARK = - 'https://opensearch.org/assets/brand/SVG/Mark/opensearch_mark_default.svg'; - const DARKMODE_OPENSEARCH_MARK = - 'https://opensearch.org/assets/brand/SVG/Mark/opensearch_mark_darkmode.svg'; + const DEFAULT_OPENSEARCH_MARK = `${branding.assetFolderUrl}/opensearch_mark_default_mode.svg`; + const DARKMODE_OPENSEARCH_MARK = `${branding.assetFolderUrl}/opensearch_mark_dark_mode.svg`; const darkMode = branding.darkMode; const markDefault = branding.mark?.defaultUrl;