Misc. UI Improvements (#11016)

* Improve contrast of tabbed page tabs

* Improve wording of "me" section

* Update button copy

* Update copy

* Convert time machine tabs to button in page header

* Move view type dropdown to page header

* Update test snapshot

* Cleanup component types

ui/src/dashboards/components/VEOHeader.tsx

@@ -11,6 +11,8 @@ import {
   IconFont,
 } from 'src/clockface'
 import {Page} from 'src/pageLayout'
+import VisOptionsButton from 'src/shared/components/VisOptionsButton'
+import ViewTypeDropdown from 'src/shared/components/view_options/ViewTypeDropdown'
 
 // Constants
 import {
@@ -41,6 +43,8 @@ class VEOHeader extends PureComponent<Props> {
             />
           </Page.Header.Left>
           <Page.Header.Right>
+            <ViewTypeDropdown />
+            <VisOptionsButton />
             <Button
               icon={IconFont.Remove}
               shape={ButtonShape.Square}

ui/src/dataExplorer/components/DataExplorerPage.tsx

@@ -5,6 +5,8 @@ import React, {SFC} from 'react'
 import DataExplorer from 'src/dataExplorer/components/DataExplorer'
 import {Page} from 'src/pageLayout'
 import SaveAsButton from 'src/dataExplorer/components/SaveAsButton'
+import VisOptionsButton from 'src/shared/components/VisOptionsButton'
+import ViewTypeDropdown from 'src/shared/components/view_options/ViewTypeDropdown'
 
 const DataExplorerPage: SFC<{}> = () => {
   return (
@@ -14,6 +16,8 @@ const DataExplorerPage: SFC<{}> = () => {
           <Page.Title title="Data Explorer" />
         </Page.Header.Left>
         <Page.Header.Right>
+          <ViewTypeDropdown />
+          <VisOptionsButton />
           <SaveAsButton />
         </Page.Header.Right>
       </Page.Header>

ui/src/me/components/Resources.tsx

@@ -28,16 +28,16 @@ class ResourceLists extends PureComponent<Props> {
     return (
       <>
         <Panel>
-          <Panel.Header title="My Settings">
+          <Panel.Header title="Account">
             <LogoutButton />
           </Panel.Header>
           <Panel.Body>
             <ul className="link-list">
               <li>
-                <Link to={`/account/settings`}>Account Settings</Link>
+                <Link to={`/account/settings`}>My Settings</Link>
               </li>
               <li>
-                <Link to={`/account/tokens`}>Tokens</Link>
+                <Link to={`/account/tokens`}>My Tokens</Link>
               </li>
             </ul>
           </Panel.Body>

ui/src/me/components/account/Account.tsx

@@ -18,10 +18,10 @@ export default class Account extends PureComponent<WithRouterProps> {
   public render() {
     const {params} = this.props
     return (
-      <Page titleTag="My Account">
+      <Page titleTag="Account">
         <Page.Header fullWidth={false}>
           <Page.Header.Left>
-            <Page.Title title="My Account" />
+            <Page.Title title="Account" />
           </Page.Header.Left>
           <Page.Header.Right />
         </Page.Header>
@@ -32,14 +32,14 @@ export default class Account extends PureComponent<WithRouterProps> {
             parentUrl="/account"
           >
             <TabbedPageSection
-              title="Settings"
+              title="My Settings"
               id={Tabs.Settings}
               url={Tabs.Settings}
             >
               <Settings />
             </TabbedPageSection>
             <TabbedPageSection
-              title="Tokens"
+              title="My Tokens"
               id={Tabs.Tokens}
               url={Tabs.Tokens}
             >

ui/src/me/components/account/__snapshots__/Account.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Account rendering renders! 1`] = `
 <Page
-  titleTag="My Account"
+  titleTag="Account"
 >
   <PageHeader
     fullWidth={false}
@@ -12,7 +12,7 @@ exports[`Account rendering renders! 1`] = `
       offsetPixels={0}
     >
       <PageTitle
-        title="My Account"
+        title="Account"
       />
     </PageHeaderLeft>
     <PageHeaderRight
@@ -30,14 +30,14 @@ exports[`Account rendering renders! 1`] = `
     >
       <TabbedPageSection
         id="settings"
-        title="Settings"
+        title="My Settings"
         url="settings"
       >
         <Connect(Settings) />
       </TabbedPageSection>
       <TabbedPageSection
         id="tokens"
-        title="Tokens"
+        title="My Tokens"
         url="tokens"
       >
         <Connect(Tokens) />

ui/src/pageLayout/containers/Nav.tsx

@@ -10,7 +10,7 @@ import NavMenu from 'src/pageLayout/components/NavMenu'
 import {getSources} from 'src/sources/selectors'
 
 // Types
-import {Source, AppState} from 'src/types/v2'
+import {Source, MeState, AppState} from 'src/types/v2'
 import {IconFont} from 'src/clockface'
 
 // Styles
@@ -21,6 +21,7 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 interface Props extends WithRouterProps {
   sources: Source[]
   isHidden: boolean
+  me: MeState
 }
 
 @ErrorHandling
@@ -30,7 +31,7 @@ class SideNav extends PureComponent<Props> {
   }
 
   public render() {
-    const {isHidden} = this.props
+    const {isHidden, me} = this.props
 
     if (isHidden) {
       return null
@@ -39,20 +40,20 @@ class SideNav extends PureComponent<Props> {
     return (
       <NavMenu>
         <NavMenu.Item
-          title="My Profile"
+          title={me.name}
           link="/me"
           icon={IconFont.CuboNav}
           location={location.pathname}
           highlightWhen={['me', 'account']}
         >
           <NavMenu.SubItem
-            title="Settings"
+            title="My Settings"
             link="/account/settings"
             location={location.pathname}
             highlightWhen={['settings']}
           />
           <NavMenu.SubItem
-            title="Tokens"
+            title="My Tokens"
             link="/account/tokens"
             location={location.pathname}
             highlightWhen={['tokens']}
@@ -107,8 +108,9 @@ class SideNav extends PureComponent<Props> {
 const mstp = (state: AppState) => {
   const isHidden = state.app.ephemeral.inPresentationMode
   const sources = getSources(state)
+  const {me} = state
 
-  return {sources, isHidden}
+  return {sources, isHidden, me}
 }
 
 export default connect(mstp)(withRouter(SideNav))

ui/src/shared/components/TimeMachine.scss

@@ -32,15 +32,10 @@ $time-machine--controls-height: 62px;
   overflow: hidden;
 }
 
-.time-machine--bottom-tabs {
-  padding: $ix-marg-b 0;
-  width: 270px;
-}
-
 .time-machine--bottom-contents {
   overflow: hidden;
   width: 100%;
-  flex: 0 0 calc(100% - #{($ix-marg-b * 2) + $form-sm-height});
+  flex: 0 0 100%;
 }
 
 .time-machine--controls {

ui/src/shared/components/TimeMachineBottom.tsx

@@ -4,7 +4,6 @@ import {connect} from 'react-redux'
 
 // Components
 import TimeMachineQueries from 'src/shared/components/TimeMachineQueries'
-import TimeMachineTabs from 'src/shared/components/TimeMachineTabs'
 import ViewOptions from 'src/shared/components/view_options/ViewOptions'
 
 // Utils
@@ -38,9 +37,6 @@ const TimeMachineBottom: SFC<Props> = ({activeTab, queriesState}) => {
 
   return (
     <div className="time-machine--bottom">
-      <div className="time-machine--bottom-tabs">
-        <TimeMachineTabs />
-      </div>
       <div className="time-machine--bottom-contents">{tabContents}</div>
     </div>
   )

ui/src/shared/components/TimeMachineControls.tsx

@@ -12,7 +12,6 @@ import {
   Alignment,
 } from 'src/clockface'
 import TimeMachineRefreshDropdown from 'src/shared/components/TimeMachineRefreshDropdown'
-import ViewTypeDropdown from 'src/shared/components/view_options/ViewTypeDropdown'
 
 // Actions
 import {
@@ -54,9 +53,6 @@ class TimeMachineControls extends PureComponent<Props> {
 
     return (
       <div className="time-machine--controls">
-        <ComponentSpacer align={Alignment.Left}>
-          <ViewTypeDropdown />
-        </ComponentSpacer>
         <ComponentSpacer align={Alignment.Right}>
           <SlideToggle.Label text="View Raw Data" />
           <SlideToggle

ui/src/shared/components/TimeMachineQueriesSwitcher.tsx

@@ -42,17 +42,19 @@ class TimeMachineQueriesSwitcher extends PureComponent<Props> {
     if (editMode !== QueryEditMode.Builder) {
       return (
         <Button
-          text="Visual Query Builder"
+          text="Switch to Query Builder"
           onClick={this.handleEditWithBuilder}
         />
       )
     }
 
     if (sourceType === Source.TypeEnum.V1) {
-      return <Button text="Edit Query As InfluxQL" onClick={onEditAsInfluxQL} />
+      return (
+        <Button text="Switch to Script Editor" onClick={onEditAsInfluxQL} />
+      )
     }
 
-    return <Button text="Edit Query As Flux" onClick={onEditAsFlux} />
+    return <Button text="Switch to Script Editor" onClick={onEditAsFlux} />
   }
 
   private handleEditWithBuilder = (): void => {

ui/src/shared/components/TimeMachineTabs.tsx

@@ -1,69 +0,0 @@
-// Libraries
-import React, {SFC} from 'react'
-import {connect} from 'react-redux'
-
-// Components
-import {Radio, ButtonShape} from 'src/clockface'
-
-// Actions
-import {setActiveTab} from 'src/shared/actions/v2/timeMachines'
-
-// Utils
-import {getActiveTimeMachine} from 'src/shared/selectors/timeMachines'
-
-// Types
-import {TimeMachineTab} from 'src/types/v2/timeMachine'
-import {AppState} from 'src/types/v2'
-
-interface StateProps {
-  activeTab: TimeMachineTab
-}
-
-interface DispatchProps {
-  onSetActiveTab: typeof setActiveTab
-}
-
-interface OwnProps {}
-
-type Props = StateProps & DispatchProps & OwnProps
-
-const TimeMachineTabs: SFC<Props> = ({activeTab, onSetActiveTab}) => {
-  return (
-    <Radio shape={ButtonShape.StretchToFit}>
-      <Radio.Button
-        id="deceo-tab-queries"
-        titleText="Queries"
-        value={TimeMachineTab.Queries}
-        active={activeTab === TimeMachineTab.Queries}
-        onClick={onSetActiveTab}
-      >
-        Queries
-      </Radio.Button>
-      <Radio.Button
-        id="deceo-tab-vis"
-        titleText="Visualization"
-        value={TimeMachineTab.Visualization}
-        active={activeTab === TimeMachineTab.Visualization}
-        onClick={onSetActiveTab}
-      >
-        Visualization
-      </Radio.Button>
-    </Radio>
-  )
-  return null
-}
-
-const mstp = (state: AppState) => {
-  const {activeTab} = getActiveTimeMachine(state)
-
-  return {activeTab}
-}
-
-const mdtp = {
-  onSetActiveTab: setActiveTab,
-}
-
-export default connect<StateProps, DispatchProps, OwnProps>(
-  mstp,
-  mdtp
-)(TimeMachineTabs)

ui/src/shared/components/VisOptionsButton.tsx

@@ -0,0 +1,71 @@
+// Libraries
+import React, {Component} from 'react'
+import {connect} from 'react-redux'
+
+// Components
+import {Button, ButtonShape, IconFont, ComponentColor} from 'src/clockface'
+
+// Actions
+import {setActiveTab} from 'src/shared/actions/v2/timeMachines'
+
+// Utils
+import {getActiveTimeMachine} from 'src/shared/selectors/timeMachines'
+
+// Types
+import {TimeMachineTab} from 'src/types/v2/timeMachine'
+import {AppState} from 'src/types/v2'
+
+interface StateProps {
+  activeTab: TimeMachineTab
+}
+
+interface DispatchProps {
+  onSetActiveTab: typeof setActiveTab
+}
+
+type Props = StateProps & DispatchProps
+
+class VisOptionsButton extends Component<Props> {
+  public render() {
+    const {activeTab} = this.props
+
+    const color =
+      activeTab === TimeMachineTab.Visualization
+        ? ComponentColor.Primary
+        : ComponentColor.Default
+
+    return (
+      <Button
+        color={color}
+        shape={ButtonShape.Square}
+        icon={IconFont.CogThick}
+        onClick={this.handleClick}
+      />
+    )
+  }
+
+  private handleClick = (): void => {
+    const {onSetActiveTab, activeTab} = this.props
+
+    if (activeTab === TimeMachineTab.Queries) {
+      onSetActiveTab(TimeMachineTab.Visualization)
+    } else {
+      onSetActiveTab(TimeMachineTab.Queries)
+    }
+  }
+}
+
+const mstp = (state: AppState): StateProps => {
+  const {activeTab} = getActiveTimeMachine(state)
+
+  return {activeTab}
+}
+
+const mdtp: DispatchProps = {
+  onSetActiveTab: setActiveTab,
+}
+
+export default connect<StateProps, DispatchProps>(
+  mstp,
+  mdtp
+)(VisOptionsButton)

ui/src/shared/components/tabbed_page/TabbedPage.scss

@@ -8,7 +8,7 @@
 .tabbed-page {
   display: flex;
   align-items: stretch;
-  background-color: rgba($g3-castle, 0.5);
+  background-color: rgba($g3-castle, 0.25);
   border-radius: $radius;
 }
 
@@ -58,6 +58,7 @@
   line-height: $nav-size;
   padding: 0 17px;
   color: $g11-sidewalk;
+  white-space: nowrap;
   transition: background-color 0.25s ease, color 0.25s ease;
 
   &:hover {

ui/src/shared/components/view_options/ViewTypeDropdown.tsx

@@ -27,7 +27,7 @@ interface StateProps {
 
 type Props = DispatchProps & StateProps
 
-class ViewOptions extends PureComponent<Props> {
+class ViewTypeDropdown extends PureComponent<Props> {
   public render() {
     return (
       <Dropdown
@@ -77,4 +77,4 @@ const mdtp: DispatchProps = {
 export default connect<StateProps, DispatchProps, {}>(
   mstp,
   mdtp
-)(ViewOptions)
+)(ViewTypeDropdown)