Added links to and from settings (#306)

* Added link to the settings in the header bar

Also, using `user.allow` instead of readOnly.

* display name in menu

* nicer hover

* Added a bunch of small things

See checklist in https://trello.com/c/sS70K4RU/25-settings-view

* Side-drawer now has a viewType prop instead of several others

src/client/components/cube-header-bar/cube-header-bar.tsx

@@ -247,11 +247,12 @@ export class CubeHeaderBar extends React.Component<CubeHeaderBarProps, CubeHeade
   }
 
   renderSettingsMenu() {
-    const { changeTimezone, timezone, customization } = this.props;
+    const { changeTimezone, timezone, customization, essence } = this.props;
     const { settingsMenuOpen } = this.state;
     if (!settingsMenuOpen) return null;
 
     return <SettingsMenu
+      dataCube={essence.dataCube}
       timezone={timezone}
       timezones={customization.getTimezones()}
       changeTimezone={changeTimezone}

src/client/components/form-label/form-label.scss

@@ -35,10 +35,7 @@
     background: rgba($brand, .22);
     cursor: pointer;
 
-    &:hover {
-      background: rgba($brand, .3);
-    }
-
+    &:hover,
     &.visible {
       background: $brand;
 
@@ -47,6 +44,10 @@
       }
     }
 
+    &.visible:hover {
+      background: darken($brand, 6);
+    }
+
     &.error {
       background: $error;
 

src/client/components/home-header-bar/home-header-bar.tsx

@@ -72,11 +72,6 @@ export class HomeHeaderBar extends React.Component<HomeHeaderBarProps, HomeHeade
   render() {
     var { user, onNavClick, customization, title } = this.props;
 
-    // One day
-    //<div className="icon-button" onClick={this.handleSettings.bind(this)}>
-    //  <SvgIcon className="not-implemented" svg={require('../../icons/full-settings.svg')}/>
-    //</div>
-
     var userButton: JSX.Element = null;
     if (user) {
       userButton = <div className="icon-button user" onClick={this.onUserMenuClick.bind(this)}>

src/client/components/router/router.tsx

@@ -126,7 +126,7 @@ export class Router extends React.Component<RouterProps, RouterState> {
     // Default route
     if (crumbs.length === 0) {
       let defaultFragment = this.getDefaultFragment(children);
-      window.location.hash = hash + '/' + defaultFragment;
+      this.replaceHash(hash + '/' + defaultFragment);
       return;
     }
 

src/client/components/settings-menu/settings-menu.mocha.tsx

@@ -20,6 +20,7 @@ import * as TestUtils from 'react-addons-test-utils';
 import { Timezone } from 'chronoshift';
 import { SettingsMenu } from './settings-menu';
 import { findDOMNode } from '../../utils/test-utils/index';
+import { DataCubeMock } from '../../../common/models/mocks';
 
 
 describe('SettingsMenu', () => {
@@ -29,6 +30,7 @@ describe('SettingsMenu', () => {
 
     var renderedComponent = TestUtils.renderIntoDocument(
       <SettingsMenu
+        dataCube={DataCubeMock.twitter()}
         onClose={null}
         openOn={openOn}
         changeTimezone={() => {}}

src/client/components/settings-menu/settings-menu.scss

@@ -17,5 +17,28 @@
 @import '../../imports';
 
 .settings-menu {
+  padding: $padding-compact 0;
 
+  .simple-item, .dropdown {
+    padding: 0 $padding-compact;
+  }
+
+  .simple-item {
+    cursor: pointer;
+    line-height: 25px;
+
+    &:hover {
+      background: rgba($brand, 0.12);
+    }
+
+    &.selected {
+      background: $background-light;
+    }
+  }
+
+  .separator {
+    height: 14px;
+    margin-top: 8px;
+    border-top: 1px solid $border-extra-light;
+  }
 }

src/client/components/settings-menu/settings-menu.tsx

@@ -19,12 +19,13 @@ require('./settings-menu.css');
 import * as React from 'react';
 import { Timezone } from 'chronoshift';
 import { Fn } from '../../../common/utils/general/general';
-import { Stage } from '../../../common/models/index';
+import { Stage, DataCube } from '../../../common/models/index';
 import { STRINGS } from '../../config/constants';
 import { BubbleMenu } from '../bubble-menu/bubble-menu';
 import { Dropdown } from '../dropdown/dropdown';
 
 export interface SettingsMenuProps extends React.Props<any> {
+  dataCube: DataCube;
   openOn: Element;
   onClose: Fn;
   changeTimezone?: (timezone: Timezone) => void;
@@ -49,17 +50,19 @@ export class SettingsMenu extends React.Component<SettingsMenuProps, SettingsMen
 
   renderTimezonesDropdown() {
     const { timezone, timezones } = this.props;
-    return React.createElement(Dropdown, {
-      label: STRINGS.timezone,
-      selectedItem: timezone,
-      renderItem: (d: Timezone) => d.toString().replace(/_/g, ' '),
-      items: timezones,
-      onSelect: this.changeTimezone.bind(this)
-    });
+    const TimezoneDropdown = Dropdown.specialize<Timezone>();
+
+    return <TimezoneDropdown
+      label={STRINGS.timezone}
+      selectedItem={timezone}
+      renderItem={(d: Timezone) => d.toString().replace(/_/g, ' ')}
+      items={timezones}
+      onSelect={this.changeTimezone.bind(this)}
+    />;
   }
 
   render() {
-    const { openOn, onClose } = this.props;
+    const { openOn, onClose, dataCube } = this.props;
 
     var stage = Stage.fromSize(240, 200);
     return <BubbleMenu
@@ -69,6 +72,9 @@ export class SettingsMenu extends React.Component<SettingsMenuProps, SettingsMen
       openOn={openOn}
       onClose={onClose}
     >
+      <a href={`#settings/data_cubes/${dataCube.name}`}><div className="simple-item">Edit this cube</div></a>
+      <a href="#settings"><div className="simple-item">General settings</div></a>
+      <div className="separator"/>
       {this.renderTimezonesDropdown()}
     </BubbleMenu>;
   }

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

@@ -34,6 +34,7 @@ describe.skip('SideDrawer', () => {
         selectedDataCube={null}
         onOpenAbout={null}
         onClose={null}
+        viewType="cube"
       />
     );
 

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

@@ -33,9 +33,7 @@ export interface SideDrawerProps extends React.Props<any> {
   onClose: Fn;
   customization?: Customization;
   itemHrefFn?: (oldDataCube?: DataCube, newDataCube?: DataCube) => string;
-  isHome?: boolean;
-  isCube?: boolean;
-  isLink?: boolean;
+  viewType: 'home' | 'cube' | 'link' | 'settings';
 }
 
 export interface SideDrawerState {
@@ -77,15 +75,20 @@ export class SideDrawer extends React.Component<SideDrawerProps, SideDrawerState
     window.location.hash = '#';
   }
 
-  renderOverviewLink() {
-    const { isHome, isCube, isLink } = this.props;
+  onOpenSettings() {
+    window.location.hash = '#settings';
+  }
 
-    if (!isCube && !isLink && !isHome) return null;
+  renderOverviewLink() {
+    const { viewType } = this.props;
 
     return <div className="home-container">
-      <div className={classNames('home-link', {selected: isHome})} onClick={this.onHomeClick.bind(this)}>
+      <div
+        className={classNames('home-link', {selected: viewType === 'home'})}
+        onClick={this.onHomeClick.bind(this)}
+      >
         <SvgIcon svg={require('../../icons/home.svg')}/>
-        <span>{isCube || isHome ? 'Home' : 'Overview'}</span>
+        <span>{viewType === 'link' ? 'Overview' : 'Home'}</span>
       </div>
     </div>;
   }
@@ -104,15 +107,26 @@ export class SideDrawer extends React.Component<SideDrawerProps, SideDrawerState
       };
     });
 
-    var infoAndFeedback = [{
-      name: 'info',
-      title: STRINGS.infoAndFeedback,
-      tooltip: 'Learn more about Pivot',
-      onClick: () => {
-        onClose();
-        onOpenAbout();
+    var infoAndFeedback = [
+      {
+        name: 'settings',
+        title: STRINGS.settings,
+        tooltip: 'Settings',
+        onClick: () => {
+          onClose();
+          this.onOpenSettings();
+        }
+      },
+      {
+        name: 'info',
+        title: STRINGS.infoAndFeedback,
+        tooltip: 'Learn more about Pivot',
+        onClick: () => {
+          onClose();
+          onOpenAbout();
+        }
       }
-    }];
+    ];
 
     var customLogoSvg: string = null;
     if (customization && customization.customLogoSvg) {
@@ -127,9 +141,8 @@ export class SideDrawer extends React.Component<SideDrawerProps, SideDrawerState
         navLinks={navLinks}
         iconSvg={require('../../icons/full-cube.svg')}
       />
-      <NavList
-        navLinks={infoAndFeedback}
-      />
+      <NavList navLinks={infoAndFeedback}/>
+
     </div>;
   }
 }

src/client/components/user-menu/user-menu.scss

@@ -17,5 +17,10 @@
 @import '../../imports';
 
 .user-menu {
-
+  ul.bubble-list {
+    li.display-name {
+      pointer-events: none;
+      color: $text-lighterish;
+    }
+  }
 }

src/client/pivot-entry.ts

@@ -38,7 +38,6 @@ interface Config {
   version: string;
   user: any;
   appSettings: AppSettingsJS;
-  readOnly: boolean;
 }
 
 var config: Config = (window as any)['__CONFIG__'];
@@ -83,8 +82,7 @@ if (config.appSettings.dataCubes.length || view === '#settings') {
         {
           version,
           user: config.user,
-          appSettings,
-          readOnly: config.readOnly
+          appSettings
         }
       ),
       container

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

@@ -42,6 +42,10 @@ export class HomeView extends React.Component< HomeViewProps, HomeViewState> {
     window.location.hash = '#' + cube.name;
   }
 
+  goToSettings() {
+    window.location.hash = '#settings';
+  }
+
   renderCube(cube: DataCube): JSX.Element {
     return <ItemCard
       key={cube.name}
@@ -80,6 +84,9 @@ export class HomeView extends React.Component< HomeViewProps, HomeViewState> {
         <button className="text-button" onClick={onOpenAbout}>
           {STRINGS.infoAndFeedback}
         </button>
+        <div className="icon-button" onClick={this.goToSettings.bind(this)}>
+         <SvgIcon svg={require('../../icons/full-settings.svg')}/>
+        </div>
       </HomeHeaderBar>
 
       <div className="container">

src/client/views/pivot-application/pivot-application.tsx

@@ -37,7 +37,6 @@ export interface PivotApplicationProps extends React.Props<any> {
   user?: User;
   maxFilters?: number;
   maxSplits?: number;
-  readOnly?: boolean;
   appSettings: AppSettings;
 }
 
@@ -179,11 +178,11 @@ export class PivotApplication extends React.Component<PivotApplicationProps, Piv
   }
 
   getViewTypeFromHash(hash: string): ViewType {
-    const { readOnly } = this.props;
+    const { user } = this.props;
     const appSettings = this.state.appSettings || this.props.appSettings;
     var viewType = this.parseHash(hash)[0];
     if (!viewType || viewType === HOME) return appSettings.linkViewConfig ? LINK : HOME;
-    if (viewType === SETTINGS) return readOnly ? HOME : SETTINGS;
+    if (viewType === SETTINGS && user.allow['settings']) return SETTINGS;
     if (appSettings.linkViewConfig && viewType === LINK) return LINK;
     return CUBE;
   }
@@ -304,9 +303,7 @@ export class PivotApplication extends React.Component<PivotApplicationProps, Piv
         onClose={closeSideDrawer}
         customization={customization}
         itemHrefFn={this.sideBarHrefFn}
-        isCube={viewType === CUBE && !linkViewConfig}
-        isLink={viewType === LINK || !!linkViewConfig}
-        isHome={viewType === HOME}
+        viewType={viewType}
       />;
     }