Make welcome page logo and title configurable #738

abbyhu2000 · 2021-08-25T23:01:20Z

Description

US2: User can set smaller version of logo and title in the opensearch_dashboards.yml and see it in the application at run time for the welcome page.

Requirement:

User need to input a valid URL for opensearchDashboards.branding.smallLogoUrl and a valid string for opensearchDashboards.branding.title in the opensearch_dashboards.yml file.

Details:

If the URL is invalid or does not end with png or svg, the default OpenSearch Dashboard logo will be shown. An application error log will be shown.
User can input URL with image of any size, and the image will be formatted to a fixed size.
User needs to be responsible for the content of the URL.
This is a local setting; user needs to set this config in all data nodes in OpenSearch Dashboards if a global setting is wanted.

Related Project Card:

https://github.com/abbyhu2000/OpenSearch-Dashboards/projects/1#card-67456892

Signed-off-by: Abby Hu abigailhu2000@gmail.com

Check List

New functionality includes testing.
- All tests pass
New functionality has been documented.
- New functionality has javadoc added
Commits are signed per the DCO using --signoff

opensearch-ci-bot · 2021-08-26T07:14:01Z

✅ DCO Check Passed df6d889

opensearch-ci-bot · 2021-08-26T16:36:27Z

✅ DCO Check Passed 9b4a085

opensearch-ci-bot · 2021-08-26T18:10:25Z

✅ DCO Check Passed 3cd7bb6

abbyhu2000 · 2021-08-27T05:12:56Z

src/core/server/rendering/rendering_service.tsx

src/legacy/server/config/schema.js

src/plugins/home/public/application/components/_welcome.scss

src/plugins/home/public/application/components/home.js

src/core/public/chrome/ui/header/branding/opensearch_dashboards_custom_logo.tsx

src/core/server/rendering/rendering_service.test.ts

src/plugins/home/public/application/components/welcome.tsx

test/functional/apps/visualize/_custom_branding.js

opensearch-ci-bot · 2021-08-28T00:44:05Z

✅ DCO Check Passed c56d3ff

src/plugins/home/public/application/components/welcome.tsx

src/core/server/rendering/rendering_service.tsx

src/core/public/chrome/ui/header/branding/opensearch_dashboards_custom_logo.tsx

src/core/public/chrome/ui/header/header.tsx

opensearch-ci-bot · 2021-08-29T02:50:22Z

✅ DCO Check Passed 913e6d8

opensearch-ci-bot · 2021-08-29T02:52:03Z

✅ DCO Check Passed 7bc3583

opensearch-ci-bot · 2021-08-30T05:56:03Z

✅ DCO Check Passed bd6ef99

kavilla

Just one NIT but LGTM. Thanks!

opensearch-ci-bot · 2021-09-01T08:02:28Z

✅ DCO Check Passed b165171

Add two new configs branding.smallLogoUrl and branding.title in the yaml file for making the welcome page logo and title configurable. If URL is invalid, the default branding will be shown. Signed-off-by: Abby Hu <abigailhu2000@gmail.com>

opensearch-ci-bot · 2021-09-01T17:16:05Z

✅ DCO Check Passed f8661e0

abbyhu2000 · 2021-09-01T19:34:25Z

src/plugins/home/public/application/components/welcome.tsx

+            className="homWelcome__customLogo"
+            data-test-subj="welcomeCustomLogo"
+            data-test-image-url={this.props.branding.smallLogoUrl}
+            alt="logo"


@kgcreative Hi Kevin, for example, what is a good alt here for better accessibility? I am thinking about {branding.title + " logo on welcome page"} so it reads as "opensearch dashboard logo on welcome page", but is that too much information for voice over? (The voice over function on mac speaks super fast)

{branding.title + " logo."} is enough.

okay, thanks!

Add two new configs branding.smallLogoUrl and branding.title in the yaml file for making the welcome page logo and title configurable. If URL is invalid, the default branding will be shown. Signed-off-by: Abby Hu <abigailhu2000@gmail.com>

Add two new configs branding.smallLogoUrl and branding.title in the yaml file for making the welcome page logo and title configurable. If URL is invalid, the default branding will be shown. Signed-off-by: Qingyang(Abby) Hu <abigailhu2000@gmail.com>

* Make top left logo on the main screen configurable Add a new config opensearchDashboards.branding.logoUrl in yaml file for making top left corner logo on the main screen configurable. If URL is invalid, the default OpenSearch logo will be shown. Signed-off-by: Abby Hu <abigailhu2000@gmail.com> * Welcome page title and logo configurable (#738) Add two new configs branding.smallLogoUrl and branding.title in the yaml file for making the welcome page logo and title configurable. If URL is invalid, the default branding will be shown. Signed-off-by: Qingyang(Abby) Hu <abigailhu2000@gmail.com> * Make loading page logo and title configurable (#746) Add one new config branding.loadingLogoUrl for making loading page logo configurable. URL can be in svg and gif format. If no loading logo is found, the static logo with a horizontal bar loading bar will be shown. If logo is also not found, the default OpenSearch loading logo and spinner will be shown. Signed-off-by: Qingyang(Abby) Hu <abigailhu2000@gmail.com> * Branding configs rename and improvement (#771) 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: Qingyang(Abby) Hu <abigailhu2000@gmail.com> * Branding config structure change and renaming (#793) Change the branding related config to a map structure in the yml file. Also rename the configs according to the official branding guidelines. The full logo on the main page header will be called logo; the small logo icon will be called mark. Signed-off-by: Qingyang(Abby) Hu <abigailhu2000@gmail.com> * Darkmode configurations for header logo, welcome logo and loading logo (#797) Add dark mode configs in the yml file that allows user to configure a dark mode version of the logo. When user toggles dark mode under the Advanced Setting, the logo will be rendered accordingly. Signed-off-by: Qingyang(Abby) Hu <abigailhu2000@gmail.com> * Add favicon configuration (#801) Added a configuration on favicon inside opensearchDashboards.branding in the yml file. If user inputs a valid URL, we gurantee basic browser favicon customization, while remaining places show the default browser/device favicon icon. If user does not provide a valid URL for favicon, the opensearch favicon icon will be used. Signed-off-by: Qingyang(Abby) Hu <abigailhu2000@gmail.com> * Make home page primary dashboard card logo and title configurable (#809) Home page dashboard card logo and title can be customized by config mark.defaultUrl and mark.darkModeUrl. Unit test and functional test are also written. Signed-off-by: Qingyang(Abby) Hu <abigailhu2000@gmail.com> * Side menu logo configuration Make logo for opensearch dashboard side menu be configurable. Use config mark.defaultUrl and mark.darkModeUrl. Signed-off-by: Abby Hu <abigailhu2000@gmail.com> * Overview Header Logo Configuration Make logo for opensearch dashboard overview header logo be configurable. Use config mark.defaultUrl and mark.darkModeUrl. Signed-off-by: Abby Hu <abigailhu2000@gmail.com> * Redirect URL not allowed Add an addtional parameter to the checkUrlValid function so that max redirect count is 0. We do not allow URLs that can be redirected because of potential security issues. Signed-off-by: Abby Hu <abigailhu2000@gmail.com> * 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 <abigailhu2000@gmail.com> * [Branding] handle comments from PR Handling the helper function rename and grammar issues. To avoid risk, we will not remove the duplicate code for 1.2 and everything related to those comments (ie function renames). That will be handled in 1.3. Here is the issue tracking it: #895 Signed-off-by: Kawika Avilla <kavilla414@gmail.com> Co-authored-by: Kawika Avilla <kavilla414@gmail.com>

* Make top left logo on the main screen configurable Add a new config opensearchDashboards.branding.logoUrl in yaml file for making top left corner logo on the main screen configurable. If URL is invalid, the default OpenSearch logo will be shown. Signed-off-by: Abby Hu <abigailhu2000@gmail.com> * Welcome page title and logo configurable (opensearch-project#738) Add two new configs branding.smallLogoUrl and branding.title in the yaml file for making the welcome page logo and title configurable. If URL is invalid, the default branding will be shown. Signed-off-by: Qingyang(Abby) Hu <abigailhu2000@gmail.com> * Make loading page logo and title configurable (opensearch-project#746) Add one new config branding.loadingLogoUrl for making loading page logo configurable. URL can be in svg and gif format. If no loading logo is found, the static logo with a horizontal bar loading bar will be shown. If logo is also not found, the default OpenSearch loading logo and spinner will be shown. Signed-off-by: Qingyang(Abby) Hu <abigailhu2000@gmail.com> * Branding configs rename and improvement (opensearch-project#771) 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: Qingyang(Abby) Hu <abigailhu2000@gmail.com> * Branding config structure change and renaming (opensearch-project#793) Change the branding related config to a map structure in the yml file. Also rename the configs according to the official branding guidelines. The full logo on the main page header will be called logo; the small logo icon will be called mark. Signed-off-by: Qingyang(Abby) Hu <abigailhu2000@gmail.com> * Darkmode configurations for header logo, welcome logo and loading logo (opensearch-project#797) Add dark mode configs in the yml file that allows user to configure a dark mode version of the logo. When user toggles dark mode under the Advanced Setting, the logo will be rendered accordingly. Signed-off-by: Qingyang(Abby) Hu <abigailhu2000@gmail.com> * Add favicon configuration (opensearch-project#801) Added a configuration on favicon inside opensearchDashboards.branding in the yml file. If user inputs a valid URL, we gurantee basic browser favicon customization, while remaining places show the default browser/device favicon icon. If user does not provide a valid URL for favicon, the opensearch favicon icon will be used. Signed-off-by: Qingyang(Abby) Hu <abigailhu2000@gmail.com> * Make home page primary dashboard card logo and title configurable (opensearch-project#809) Home page dashboard card logo and title can be customized by config mark.defaultUrl and mark.darkModeUrl. Unit test and functional test are also written. Signed-off-by: Qingyang(Abby) Hu <abigailhu2000@gmail.com> * Side menu logo configuration Make logo for opensearch dashboard side menu be configurable. Use config mark.defaultUrl and mark.darkModeUrl. Signed-off-by: Abby Hu <abigailhu2000@gmail.com> * Overview Header Logo Configuration Make logo for opensearch dashboard overview header logo be configurable. Use config mark.defaultUrl and mark.darkModeUrl. Signed-off-by: Abby Hu <abigailhu2000@gmail.com> * Redirect URL not allowed Add an addtional parameter to the checkUrlValid function so that max redirect count is 0. We do not allow URLs that can be redirected because of potential security issues. Signed-off-by: Abby Hu <abigailhu2000@gmail.com> * 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 <abigailhu2000@gmail.com> * [Branding] handle comments from PR Handling the helper function rename and grammar issues. To avoid risk, we will not remove the duplicate code for 1.2 and everything related to those comments (ie function renames). That will be handled in 1.3. Here is the issue tracking it: opensearch-project#895 Signed-off-by: Kawika Avilla <kavilla414@gmail.com> Co-authored-by: Kawika Avilla <kavilla414@gmail.com> Backport PR: opensearch-project#897

* Make top left logo on the main screen configurable Add a new config opensearchDashboards.branding.logoUrl in yaml file for making top left corner logo on the main screen configurable. If URL is invalid, the default OpenSearch logo will be shown. Signed-off-by: Abby Hu <abigailhu2000@gmail.com> * Welcome page title and logo configurable (#738) Add two new configs branding.smallLogoUrl and branding.title in the yaml file for making the welcome page logo and title configurable. If URL is invalid, the default branding will be shown. Signed-off-by: Qingyang(Abby) Hu <abigailhu2000@gmail.com> * Make loading page logo and title configurable (#746) Add one new config branding.loadingLogoUrl for making loading page logo configurable. URL can be in svg and gif format. If no loading logo is found, the static logo with a horizontal bar loading bar will be shown. If logo is also not found, the default OpenSearch loading logo and spinner will be shown. Signed-off-by: Qingyang(Abby) Hu <abigailhu2000@gmail.com> * Branding configs rename and improvement (#771) 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: Qingyang(Abby) Hu <abigailhu2000@gmail.com> * Branding config structure change and renaming (#793) Change the branding related config to a map structure in the yml file. Also rename the configs according to the official branding guidelines. The full logo on the main page header will be called logo; the small logo icon will be called mark. Signed-off-by: Qingyang(Abby) Hu <abigailhu2000@gmail.com> * Darkmode configurations for header logo, welcome logo and loading logo (#797) Add dark mode configs in the yml file that allows user to configure a dark mode version of the logo. When user toggles dark mode under the Advanced Setting, the logo will be rendered accordingly. Signed-off-by: Qingyang(Abby) Hu <abigailhu2000@gmail.com> * Add favicon configuration (#801) Added a configuration on favicon inside opensearchDashboards.branding in the yml file. If user inputs a valid URL, we gurantee basic browser favicon customization, while remaining places show the default browser/device favicon icon. If user does not provide a valid URL for favicon, the opensearch favicon icon will be used. Signed-off-by: Qingyang(Abby) Hu <abigailhu2000@gmail.com> * Make home page primary dashboard card logo and title configurable (#809) Home page dashboard card logo and title can be customized by config mark.defaultUrl and mark.darkModeUrl. Unit test and functional test are also written. Signed-off-by: Qingyang(Abby) Hu <abigailhu2000@gmail.com> * Side menu logo configuration Make logo for opensearch dashboard side menu be configurable. Use config mark.defaultUrl and mark.darkModeUrl. Signed-off-by: Abby Hu <abigailhu2000@gmail.com> * Overview Header Logo Configuration Make logo for opensearch dashboard overview header logo be configurable. Use config mark.defaultUrl and mark.darkModeUrl. Signed-off-by: Abby Hu <abigailhu2000@gmail.com> * Redirect URL not allowed Add an addtional parameter to the checkUrlValid function so that max redirect count is 0. We do not allow URLs that can be redirected because of potential security issues. Signed-off-by: Abby Hu <abigailhu2000@gmail.com> * 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 <abigailhu2000@gmail.com> * [Branding] handle comments from PR Handling the helper function rename and grammar issues. To avoid risk, we will not remove the duplicate code for 1.2 and everything related to those comments (ie function renames). That will be handled in 1.3. Here is the issue tracking it: #895 Signed-off-by: Kawika Avilla <kavilla414@gmail.com> Co-authored-by: Kawika Avilla <kavilla414@gmail.com> Backport PR: #897 Co-authored-by: Qingyang(Abby) Hu <abigailhu2000@gmail.com>

abbyhu2000 force-pushed the branding_dev_p0_us2_implementation branch from 240fba9 to bafced2 Compare August 25, 2021 23:16

abbyhu2000 changed the title ~~Branding dev p0 us2 implementation~~ Make welcome page logo and title configurable Aug 26, 2021

abbyhu2000 force-pushed the branding_dev_p0_us2_implementation branch from 7af5ac5 to df6d889 Compare August 26, 2021 07:12

abbyhu2000 force-pushed the branding_dev_p0_us2_implementation branch from 30f5eca to 9b4a085 Compare August 26, 2021 16:29

abbyhu2000 marked this pull request as ready for review August 26, 2021 16:37

abbyhu2000 marked this pull request as draft August 26, 2021 16:39

abbyhu2000 marked this pull request as ready for review August 26, 2021 16:40

kavilla requested review from kavilla and kgcreative August 26, 2021 17:13

kavilla added the branding label Aug 26, 2021

abbyhu2000 force-pushed the branding_dev_p0_us2_implementation branch from 9b4a085 to 3cd7bb6 Compare August 26, 2021 18:08

opensearch-project deleted a comment from opensearch-ci-bot Aug 27, 2021