Core: Make application title customizable for WL (#22401)

* Core: Add custom app title

* Docs: Update White Labeling title customization

* Core: set back export for Branding types

docs/sources/enterprise/white-labeling.md

@@ -20,6 +20,7 @@ Grafana Enterprise has white labeling options in the `grafana.ini` file (can als
 
 You can change the following elements:
 
+- Application Title
 - Login Background
 - Login Logo
 - Side menu top logo
@@ -31,6 +32,9 @@ You can change the following elements:
 ```ini
 # Enterprise only
 [white_labeling]
+# Set to your company name to override application title
+;app_title =
+
 # Set to complete URL to override login logo
 ;login_logo =
 

pkg/api/dtos/index.go

@@ -17,6 +17,7 @@ type IndexViewData struct {
 	AppNameBodyClass        string
 	FavIcon                 string
 	AppleTouchIcon          string
+	AppTitle                string
 }
 
 type PluginCss struct {

pkg/api/index.go

@@ -87,6 +87,7 @@ func (hs *HTTPServer) setIndexViewData(c *m.ReqContext) (*dtos.IndexViewData, er
 		AppNameBodyClass:        getAppNameBodyClass(hs.License.HasValidLicense()),
 		FavIcon:                 "public/img/fav32.png",
 		AppleTouchIcon:          "public/img/apple-touch-icon.png",
+		AppTitle:                "Grafana",
 	}
 
 	if setting.DisableGravatar {

public/app/core/components/Branding/Branding.tsx

@@ -32,8 +32,11 @@ export const MenuLogo: FC<BrandComponentProps> = ({ className }) => {
   return <img className={className} src="public/img/grafana_icon.svg" alt="Grafana" />;
 };
 
+export const AppTitle = 'Grafana';
+
 export class Branding {
   static LoginLogo = LoginLogo;
   static LoginBackground = LoginBackground;
   static MenuLogo = MenuLogo;
+  static AppTitle = AppTitle;
 }

public/app/core/components/Page/Page.tsx

@@ -9,6 +9,7 @@ import PageContents from './PageContents';
 import { CustomScrollbar } from '@grafana/ui';
 import { NavModel } from '@grafana/data';
 import { isEqual } from 'lodash';
+import { Branding } from '../Branding/Branding';
 
 interface Props {
   children: JSX.Element[] | JSX.Element;
@@ -31,7 +32,7 @@ class Page extends Component<Props> {
 
   updateTitle = () => {
     const title = this.getPageTitle;
-    document.title = title ? title + ' - Grafana' : 'Grafana';
+    document.title = title ? title + ' - ' + Branding.AppTitle : Branding.AppTitle;
   };
 
   get getPageTitle() {

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -7,6 +7,8 @@ import classNames from 'classnames';
 // Services & Utils
 import { createErrorNotification } from 'app/core/copy/appNotification';
 import { getMessageFromError } from 'app/core/utils/errors';
+import { Branding } from 'app/core/components/Branding/Branding';
+
 // Components
 import { DashboardGrid } from '../dashgrid/DashboardGrid';
 import { DashNav } from '../components/DashNav';
@@ -108,7 +110,7 @@ export class DashboardPage extends PureComponent<Props, State> {
 
     // if we just got dashboard update title
     if (!prevProps.dashboard) {
-      document.title = dashboard.title + ' - Grafana';
+      document.title = dashboard.title + ' - ' + Branding.AppTitle;
     }
 
     // Due to the angular -> react url bridge we can ge an update here with new uid before the container unmounts

public/views/index-template.html

@@ -19,7 +19,7 @@
     <meta name="viewport" content="width=device-width" />
     <meta name="theme-color" content="#000" />
 
-    <title>Grafana</title>
+    <title>[[.AppTitle]]</title>
 
     <base href="[[.AppSubUrl]]/" />