Logos: Refactoring a bit how logos are rendered (#21421)

pkg/api/dtos/index.go

@@ -15,6 +15,8 @@ type IndexViewData struct {
 	NewGrafanaVersion       string
 	AppName                 string
 	AppNameBodyClass        string
+	FavIcon                 string
+	AppleTouchIcon          string
 }
 
 type PluginCss struct {

pkg/api/index.go

@@ -85,6 +85,8 @@ func (hs *HTTPServer) setIndexViewData(c *m.ReqContext) (*dtos.IndexViewData, er
 		NewGrafanaVersionExists: plugins.GrafanaHasUpdate,
 		AppName:                 setting.ApplicationName,
 		AppNameBodyClass:        getAppNameBodyClass(hs.License.HasValidLicense()),
+		FavIcon:                 "public/img/fav32.png",
+		AppleTouchIcon:          "public/img/apple-touch-icon.png",
 	}
 
 	if setting.DisableGravatar {

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

@@ -1,18 +1,23 @@
 import React, { FC } from 'react';
 
 export interface BrandComponentProps {
-  className: string;
+  className?: string;
 }
 
-export const LogoIcon: FC<BrandComponentProps> = ({ className }) => {
-  return <img className={className} src="public/img/grafana_icon.svg" alt="Grafana" />;
+export const LoginLogo: FC<BrandComponentProps> = ({ className }) => {
+  return (
+    <>
+      <img className={className} src="public/img/grafana_icon.svg" alt="Grafana" />
+      <div className="logo-wordmark" />
+    </>
+  );
 };
 
-export const Wordmark: FC<BrandComponentProps> = ({ className }) => {
-  return <div className={className} />;
+export const MenuLogo: FC<BrandComponentProps> = ({ className }) => {
+  return <img className={className} src="public/img/grafana_icon.svg" alt="Grafana" />;
 };
 
 export class Branding {
-  static LogoIcon = LogoIcon;
-  static Wordmark = Wordmark;
+  static LoginLogo = LoginLogo;
+  static MenuLogo = MenuLogo;
 }

public/app/core/components/Login/LoginPage.tsx

@@ -12,8 +12,7 @@ export const LoginPage: FC = () => {
     <div className="login container">
       <div className="login-content">
         <div className="login-branding">
-          <Branding.LogoIcon className="logo-icon" />
-          <Branding.Wordmark className="logo-wordmark" />
+          <Branding.LoginLogo className="logo-icon" />
         </div>
         <LoginCtrl>
           {({

public/app/core/components/sidemenu/SideMenu.tsx

@@ -4,6 +4,7 @@ import TopSection from './TopSection';
 import BottomSection from './BottomSection';
 import config from 'app/core/config';
 import { CoreEvents } from 'app/types';
+import { Branding } from 'app/core/components/Branding/Branding';
 
 const homeUrl = config.appSubUrl || '/';
 
@@ -15,7 +16,7 @@ export class SideMenu extends PureComponent {
   render() {
     return [
       <a href={homeUrl} className="sidemenu__logo" key="logo">
-        <img src="public/img/grafana_icon.svg" alt="Grafana" />
+        <Branding.MenuLogo />
       </a>,
       <div className="sidemenu__logo_small_breakpoint" onClick={this.toggleSideMenuSmallBreakpoint} key="hamburger">
         <i className="fa fa-bars" />

public/app/core/components/sidemenu/__snapshots__/SideMenu.test.tsx.snap

@@ -7,10 +7,7 @@ Array [
     href="/"
     key="logo"
   >
-    <img
-      alt="Grafana"
-      src="public/img/grafana_icon.svg"
-    />
+    <Component />
   </a>,
   <div
     className="sidemenu__logo_small_breakpoint"

public/views/index-template.html

@@ -29,9 +29,10 @@
       as="font"
       crossorigin
     />
-    <link rel="icon" type="image/png" href="public/img/fav32.png" />
+
+    <link rel="icon" type="image/png" href="[[.FavIcon]]" />
+    <link rel="apple-touch-icon" sizes="180x180" href="[[.AppleTouchIcon]]" />
     <link rel="mask-icon" href="public/img/grafana_mask_icon.svg" color="#F05A28" />
-    <link rel="apple-touch-icon" sizes="180x180" href="public/img/apple-touch-icon.png" />
 
     <link rel="stylesheet" href="public/build/grafana.[[ .Theme ]].<%= webpack.hash %>.css" />