Custom Branding #826
Merged
Custom Branding #826
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
✅ DCO Check Passed 4becb18 |
kavilla
requested review from
tmarkley,
mihirsoni,
kgcreative,
kavilla,
ananzh and
boktorbb
|
|
|
✅ DCO Check Passed b2e6656 |
|
✅ DCO Check Passed d282803 |
kavilla
force-pushed
the
feature/branding/p0
branch
from
d282803
to
11f90a9
Compare
|
✅ DCO Check Passed 11f90a9 |
kavilla
previously approved these changes
Oct 15, 2021
|
This feature has been tested with version upgrade from opendistro version 1.13.2, as part of the backward compatibility test. |
tmarkley
previously requested changes
Oct 26, 2021
| * Use branding configurations to render the header logo on the nab bar. | ||
| * | ||
| * @param {ChromeBranding} - branding object consist of logo, mark and title | ||
| * @returns A image component which is going to be rendered on the main page header bar. |
There was a problem hiding this comment.
Grammar: An image. This doesn't always return an image component (e.g. when there is a custom logo) so I think we need to adjust this wording.
There was a problem hiding this comment.
Minor: My initial thought is that the component should be called CustomBrandingLogo but I don't have a strong preference. I think it adds some specificity and ties it to the set of Custom Branding features.
Additionally, this component could be used elsewhere and not just in the main page header bar, so we can probably remove which is going to be rendered on the main page header bar.
src/core/public/chrome/ui/header/branding/opensearch_dashboards_custom_logo.tsx
Outdated
Show resolved
Hide resolved
|
|
||
| /** | ||
| * Use branding configurations to check which URL to use for rendering | ||
| * header logo in nav bar in default mode |
There was a problem hiding this comment.
We can remove the reference of nav bar in this component because it could be used elsewhere. The component's responsibility does not include understanding where it's utilized across the application.
Comment on lines
81
to
84
| if (darkMode) { | ||
| return customHeaderLogoDarkMode(); | ||
| } | ||
| return customHeaderLogoDefaultMode(); |
There was a problem hiding this comment.
nit: use a ternary with a single return instead?
| * | ||
| * @returns a valid custom URL or undefined if no valid URL is provided | ||
| */ | ||
| const customHeaderLogoDefaultMode = () => { |
There was a problem hiding this comment.
nit: I think we can remove Header from the names of these functions.
Comment on lines
106
to
137
| /** | ||
| * Use branding configurations to check which URL to use for rendering | ||
| * loading logo in default mode. In default mode, loading logo will | ||
| * proritize default loading logo URL, and then default mark URL. | ||
| * If both are invalid, default opensearch logo and spinner will be rendered. | ||
| * | ||
| * @returns a valid custom URL or undefined if no valid URL is provided | ||
| */ | ||
| const customLoadingLogoDefaultMode = () => { | ||
| return loadingLogoDefault ?? markDefault ?? undefined; | ||
| }; | ||
|
|
||
| /** | ||
| * Use branding configurations to check which URL to use for rendering | ||
| * loading logo in default mode. In dark mode, loading logo will proritize | ||
| * loading logo URLs, then mark logo URLs. | ||
| * Within each type, the dark mode URL will be proritized if provided. | ||
| * | ||
| * @returns a valid custom URL or undefined if no valid URL is provided | ||
| */ | ||
| const customLoadingLogoDarkMode = () => { | ||
| return loadingLogoDarkMode ?? loadingLogoDefault ?? markDarkMode ?? markDefault ?? undefined; | ||
| }; | ||
|
|
||
| /** | ||
| * Render custom loading logo for both default mode and dark mode | ||
| * | ||
| * @returns a valid custom loading logo URL, or undefined | ||
| */ | ||
| const customLoadingLogo = () => { | ||
| if (darkMode) { | ||
| return customLoadingLogoDarkMode(); | ||
| } | ||
| return customLoadingLogoDefaultMode(); | ||
| }; |
There was a problem hiding this comment.
This is also duplicate code.
Comment on lines
60
to
95
| /** | ||
| * Use branding configurations to check which URL to use for rendering | ||
| * home card logo in default mode. In default mode, home card logo will | ||
| * proritize default mode mark URL. If it is invalid, default opensearch logo | ||
| * will be rendered. | ||
| * | ||
| * @param {HomePluginBranding} - pass in custom branding configurations | ||
| * @returns a valid custom URL or undefined if no valid URL is provided | ||
| */ | ||
| const customHomeLogoDefaultMode = (branding: HomePluginBranding) => { | ||
| return branding.mark?.defaultUrl ?? undefined; | ||
| }; | ||
|
|
||
| /** | ||
| * Use branding configurations to check which URL to use for rendering | ||
| * home logo in dark mode. In dark mode, home logo will render | ||
| * dark mode mark URL if valid. Otherwise, it will render the default | ||
| * mode mark URL if valid. If both dark mode mark URL and default mode mark | ||
| * URL are invalid, the default opensearch logo will be rendered. | ||
| * | ||
| * @param {HomePluginBranding} - pass in custom branding configurations | ||
| * @returns {string|undefined} a valid custom URL or undefined if no valid URL is provided | ||
| */ | ||
| const customHomeLogoDarkMode = (branding: HomePluginBranding) => { | ||
| return branding.mark?.darkModeUrl ?? branding.mark?.defaultUrl ?? undefined; | ||
| }; | ||
|
|
||
| /** | ||
| * Render custom home logo for both default mode and dark mode | ||
| * | ||
| * @param {HomePluginBranding} - pass in custom branding configurations | ||
| * @returns {string|undefined} a valid custom loading logo URL, or undefined | ||
| */ | ||
| const customHomeLogo = (branding: HomePluginBranding) => { | ||
| if (branding.darkMode) { | ||
| return customHomeLogoDarkMode(branding); | ||
| } | ||
| return customHomeLogoDefaultMode(branding); | ||
| }; |
There was a problem hiding this comment.
This should also take advantage of a generic CustomBrandingLogo component
Comment on lines
87
to
119
| /** | ||
| * Use branding configurations to check which URL to use for rendering | ||
| * overview logo in default mode. In default mode, overview logo will | ||
| * proritize default mode mark URL. If it is invalid, default opensearch logo | ||
| * will be rendered. | ||
| * | ||
| * @returns a valid custom URL or undefined if no valid URL is provided | ||
| */ | ||
| const customOverviewLogoDefaultMode = () => { | ||
| return markDefault ?? DEFAULT_OPENSEARCH_MARK; | ||
| }; | ||
|
|
||
| /** | ||
| * Use branding configurations to check which URL to use for rendering | ||
| * overview logo in dark mode. In dark mode, overview logo will render | ||
| * dark mode mark URL if valid. Otherwise, it will render the default | ||
| * mode mark URL if valid. If both dark mode mark URL and default mode mark | ||
| * URL are invalid, the default opensearch logo will be rendered. | ||
| * | ||
| * @returns a valid custom URL or undefined if no valid URL is provided | ||
| */ | ||
| const customOverviewLogoDarkMode = () => { | ||
| return markDarkMode ?? markDefault ?? DARKMODE_OPENSEARCH_MARK; | ||
| }; | ||
|
|
||
| /** | ||
| * Render custom overview logo for both default mode and dark mode | ||
| * | ||
| * @returns a valid custom loading logo URL, or undefined | ||
| */ | ||
| const customOverviewLogo = () => { | ||
| if (darkMode) { | ||
| return customOverviewLogoDarkMode(); | ||
| } | ||
| return customOverviewLogoDefaultMode(); | ||
| }; |
kavilla
dismissed stale reviews from kgcreative, boktorbb, ananzh, and themself
via
e1deafd
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>
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>
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>
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>
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>
#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>
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>
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>
Make logo for opensearch dashboard side menu be configurable. Use config mark.defaultUrl and mark.darkModeUrl. Signed-off-by: Abby Hu <abigailhu2000@gmail.com>
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>
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 the original opensearch branding logos in an asset folder, instead of making API calls. Signed-off-by: Abby Hu <abigailhu2000@gmail.com>
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>
kavilla
force-pushed
the
feature/branding/p0
branch
from
e1deafd
to
5edf030
Compare
kavilla
approved these changes
Oct 30, 2021
tmarkley
reviewed
Nov 1, 2021
|
|
||
| /** | ||
| * Use branding configurations to check which URL to use for rendering | ||
| * side menu opensearch logo in default mode |
There was a problem hiding this comment.
Note for follow-up changes: use correct cases for OpenSearch
tmarkley
approved these changes
Nov 1, 2021
There was a problem hiding this comment.
@abbyhu2000 great work, and @kavilla thanks for these updates!
kavilla
pushed a commit
to kavilla/OpenSearch-Dashboards-1
that referenced
this pull request
Nov 1, 2021
* 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
kavilla
added a commit
that referenced
this pull request
Nov 1, 2021
* 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>
seanneumann
pushed a commit
that referenced
this pull request
Nov 2, 2021
* 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>
5 tasks
2 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR is proposing a way for users to customize OpenSearch Dashboard using opensearch_dashboards.yml file and starting with predefined list of titles and logos. Our initial target users will be the cluster administrator who has access to the opensearch_dashboards.yml file and who is able to configure the application before it is hosted. This is a starting point and foundation for a bigger effort of branding and theming configurations in the future.
Added Configurations in opensearch_dashboards.yml file
Targeted Logo and Title(7 logos and 4 titles)
Config Details
URL requirements
Signed-off-by: Abby Hu abigailhu2000@gmail.com
Issues Resolved
#725
Check List