Adding more branding customization options

docs/configuration-customizations.md

@@ -61,6 +61,15 @@ customizaiton:
 
 By default, Turnilo uses 10 different colors for series. But it is possible to define more and Turnilo will adjust necessary split limits.
 
+### Hide Info & Feedback Links
+
+Turnilo allows you to hide 'Info & Feedback' links from the header and the side nav bar using the following config.
+
+```yaml
+customization:
+    hideInfoAndFeedback: true
+```
+
 ### Logo
 
 Turnilo allows you to set custom customize logo icon by supplying an SVG string respectively.
@@ -75,6 +84,13 @@ customization:
       </svg>
 ```
 
+You can also remove 'Turnilo' and use a custom header text instead of a SVG logo by passing following string.
+
+```yaml
+customization:
+    customLogoText: Analytics Demo
+```
+
 ### Header color
 
 Turnilo allows you to set custom header background color supplying a string with CSS color.

src/client/components/nav-logo/nav-logo.scss

@@ -34,6 +34,9 @@
 
   .logo {
     left: $nav-padding;
+    @include css-variable(color, brand);
+    font-weight: bold;
+    font-size: 20px;
   }
 
   .close-icon {

src/client/components/nav-logo/nav-logo.tsx

@@ -17,15 +17,27 @@
 
 import React from "react";
 import { SvgIcon } from "../svg-icon/svg-icon";
+import { isNil } from "../../../common/utils/general/general";
 import "./nav-logo.scss";
 
 export interface NavLogoProps {
-  customLogoSvg: string;
+  customLogoSvg?: string;
+  customLogoText?: string;
 }
 
-export const NavLogo: React.FunctionComponent<NavLogoProps> = ({ customLogoSvg }) =>
+export const NavLogo: React.FunctionComponent<NavLogoProps> = ({ customLogoSvg, customLogoText }) => {
+  var logo;
+  if (!isNil(customLogoText)) {
+    logo = <span>{customLogoText}</span>
+  } else if (!isNil(customLogoSvg)) {
+    logo = <SvgIcon svg={customLogoSvg} />
+  } else {
+    return null;
+  }
+  return (
   <div className="nav-logo">
     <div className="logo">
-      <SvgIcon svg={customLogoSvg} />
+     {logo}
     </div>
-  </div>;
+  </div>);
+}

src/client/components/side-drawer/side-drawer.tsx

@@ -78,8 +78,8 @@ export class SideDrawer extends React.Component<SideDrawerProps, SideDrawerState
 
   private renderNavLogo(): JSX.Element | null {
     const { customization } = this.props;
-    if (!customization.customLogoSvg) return null;
-    return <NavLogo customLogoSvg={customization.customLogoSvg} />;
+    if (!customization.customLogoSvg && !customization.customLogoText) return null;
+    return <NavLogo customLogoSvg={customization.customLogoSvg} customLogoText={customization.customLogoText} />;
   }
 
   private renderHomeLink() {
@@ -152,11 +152,12 @@ export class SideDrawer extends React.Component<SideDrawerProps, SideDrawerState
   }
 
   render() {
+    const { customization } = this.props;
     return <div className="side-drawer">
       {this.renderNavLogo()}
       {this.renderHomeLink()}
       {this.renderDataCubes()}
-      <NavList navLinks={[this.infoLink()]} />
+      { !customization.hideInfoAndFeedback && <NavList navLinks={[this.infoLink()]} /> }
     </div>;
   }
 }

src/client/deserializers/app-settings.ts

@@ -33,7 +33,7 @@ export function deserialize({ oauth, clientTimeout, customization, version }: Se
 */
 export function serialize(appSettings: ClientAppSettings): SerializedAppSettings {
   const { clientTimeout, version, customization, oauth } = appSettings;
-  const { visualizationColors, messages, customLogoSvg, hasUrlShortener, locale, headerBackground, sentryDSN, timezones, externalViews } = customization;
+  const { visualizationColors, messages, customLogoText, customLogoSvg, hasUrlShortener, locale, headerBackground, sentryDSN, timezones, externalViews } = customization;
 
   return {
     clientTimeout,
@@ -42,6 +42,7 @@ export function serialize(appSettings: ClientAppSettings): SerializedAppSettings
     customization: {
       visualizationColors,
       messages,
+      customLogoText,
       customLogoSvg,
       locale,
       hasUrlShortener,

src/client/deserializers/customization.ts

@@ -19,10 +19,12 @@ import { ClientCustomization, SerializedCustomization } from "../../common/model
 import { deserialize as deserializeLocale } from "../../common/models/locale/locale";
 
 export function deserialize(customization: SerializedCustomization): ClientCustomization {
-  const { headerBackground, messages, locale, customLogoSvg, timezones, externalViews, hasUrlShortener, sentryDSN, visualizationColors } = customization;
+  const { headerBackground, messages, locale, customLogoText, customLogoSvg, hideInfoAndFeedback, timezones, externalViews, hasUrlShortener, sentryDSN, visualizationColors } = customization;
   return {
     headerBackground,
+    customLogoText,
     customLogoSvg,
+    hideInfoAndFeedback,
     externalViews,
     hasUrlShortener,
     sentryDSN,

src/client/views/home-view/home-view.tsx

@@ -18,7 +18,7 @@
 import React from "react";
 import { ClientCustomization } from "../../../common/models/customization/customization";
 import { ClientDataCube } from "../../../common/models/data-cube/data-cube";
-import { Fn } from "../../../common/utils/general/general";
+import { Fn, isNil } from "../../../common/utils/general/general";
 import { ClearableInput } from "../../components/clearable-input/clearable-input";
 import { HeaderBar } from "../../components/header-bar/header-bar";
 import { EmptyDataCubeList } from "../../components/no-data/empty-data-cube-list";
@@ -73,15 +73,19 @@ export class HomeView extends React.Component<HomeViewProps, HomeViewState> {
   }
 
   render() {
-    const { onOpenAbout, dataCubes } = this.props;
+    const { onOpenAbout, dataCubes, customization } = this.props;
     const { query } = this.state;
     const hasDataCubes = dataCubes.length > 0;
 
+    const titleString = isNil(customization.customLogoText) ? STRINGS.home : customization.customLogoText;
+
     return <div className="home-view">
-      <HeaderBar title={STRINGS.home}>
-        <button className="text-button" onClick={onOpenAbout}>
-          {STRINGS.infoAndFeedback}
-        </button>
+      <HeaderBar title={titleString}>
+        { !customization.hideInfoAndFeedback && 
+          <button className="text-button" onClick={onOpenAbout}>
+            {STRINGS.infoAndFeedback}
+          </button> 
+        }
       </HeaderBar>
 
       <div className="container">

src/common/models/customization/customization.ts

@@ -111,7 +111,9 @@ interface Messages {
 export interface Customization {
   title?: string;
   headerBackground?: string;
+  customLogoText?: string;
   customLogoSvg?: string;
+  hideInfoAndFeedback?: boolean;
   externalViews: ExternalView[];
   timezones: Timezone[];
   urlShortener?: UrlShortener;
@@ -126,7 +128,9 @@ export interface CustomizationJS {
   title?: string;
   locale?: LocaleJS;
   headerBackground?: string;
+  customLogoText?: string;
   customLogoSvg?: string;
+  hideInfoAndFeedback?: boolean;
   externalViews?: ExternalViewValue[];
   timezones?: string[];
   urlShortener?: UrlShortenerDef;
@@ -138,7 +142,9 @@ export interface CustomizationJS {
 
 export interface SerializedCustomization {
   headerBackground?: string;
+  customLogoText?: string;
   customLogoSvg?: string;
+  hideInfoAndFeedback?: boolean;
   timezones: string[];
   externalViews: ExternalViewValue[];
   hasUrlShortener: boolean;
@@ -150,7 +156,9 @@ export interface SerializedCustomization {
 
 export interface ClientCustomization {
   headerBackground?: string;
+  customLogoText?: string;
   customLogoSvg?: string;
+  hideInfoAndFeedback?: boolean;
   timezones: Timezone[];
   externalViews: ExternalViewValue[];
   hasUrlShortener: boolean;
@@ -184,7 +192,9 @@ export function fromConfig(config: CustomizationJS = {}, logger: Logger): Custom
   const {
     title = DEFAULT_TITLE,
     headerBackground,
+    customLogoText,
     customLogoSvg,
+    hideInfoAndFeedback: configHideInfoAndFeedback,
     externalViews: configExternalViews,
     timezones: configTimezones,
     urlShortener,
@@ -204,10 +214,14 @@ export function fromConfig(config: CustomizationJS = {}, logger: Logger): Custom
 
   const visualizationColors = readVisualizationColors(config);
 
+  const hideInfoAndFeedback = isNil(configHideInfoAndFeedback) ? false : configHideInfoAndFeedback;
+
   return {
     title,
     headerBackground,
+    customLogoText,
     customLogoSvg,
+    hideInfoAndFeedback,
     sentryDSN,
     cssVariables: verifyCssVariables(cssVariables, logger),
     urlShortener: urlShortenerFromConfig(urlShortener),
@@ -220,9 +234,11 @@ export function fromConfig(config: CustomizationJS = {}, logger: Logger): Custom
 }
 
 export function serialize(customization: Customization): SerializedCustomization {
-  const { customLogoSvg, timezones, headerBackground, locale, externalViews, sentryDSN, urlShortener, messages, visualizationColors } = customization;
+  const { customLogoText, customLogoSvg, hideInfoAndFeedback, timezones, headerBackground, locale, externalViews, sentryDSN, urlShortener, messages, visualizationColors } = customization;
   return {
+    customLogoText,
     customLogoSvg,
+    hideInfoAndFeedback,
     externalViews,
     hasUrlShortener: isTruthy(urlShortener),
     headerBackground,