feat: Possibility to change document title on pages using the Page component

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

@@ -7,7 +7,7 @@ import PageContents from './PageContents';
 import { CustomScrollbar } from '@grafana/ui';
 
 interface Props {
-  title: string;
+  title?: string;
   children: JSX.Element[] | JSX.Element;
 }
 
@@ -23,12 +23,24 @@ class Page extends Component<Props> {
   componentDidMount() {
     this.body.classList.add(this.bodyClass);
     this.copyFooter();
+    this.updateTitle();
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps.title !== this.props.title) {
+      this.updateTitle();
+    }
   }
 
   componentWillUnmount() {
     this.body.classList.remove(this.bodyClass);
   }
 
+  updateTitle = () => {
+    const { title } = this.props;
+    document.title = title ? title + ' - Grafana' : 'Grafana';
+  }
+
   copyFooter = () => {
     const c = this.scrollbarElementRef.current;
     c.append(this.footer);
@@ -37,11 +49,11 @@ class Page extends Component<Props> {
   render() {
     return (
       <div className="page-scrollbar-wrapper">
-          <CustomScrollbar autoHeightMin={'100%'}>
-            <div className="page-scrollbar-content" ref={this.scrollbarElementRef}>
-              {this.props.children}
-            </div>
-          </CustomScrollbar>
+        <CustomScrollbar autoHeightMin={'100%'}>
+          <div className="page-scrollbar-content" ref={this.scrollbarElementRef}>
+            {this.props.children}
+          </div>
+        </CustomScrollbar>
       </div>
     );
   }