feat: a dropdown menu for less frequently used items on Dashboard (#3000)

Author: ChitlangeSahas

cypress.json

@@ -13,6 +13,6 @@
     "www.googletagmanager.com",
     "www.honeybadger.io"
   ],
-  "viewportWidth": 1200,
+  "viewportWidth": 1400,
   "viewportHeight": 1000
 }

cypress/e2e/shared/dashboardsView.test.ts

@@ -146,7 +146,9 @@ describe('Dashboard', () => {
     })
 
     // toggle presentation mode
+    cy.getByTestID('collapsible_menu').click()
     cy.getByTestID('presentation-mode-toggle').click()
+
     // ensure a notification is sent when toggling to presentation mode
     cy.getByTestID('notification-primary--children').should('exist')
     // escape to toggle the presentation mode off
@@ -1334,9 +1336,12 @@ csv.from(csv: data) |> filter(fn: (r) => r.bucket == v.bucketsCSV)`
           })
         })
       })
+      cy.getByTestID('collapsible_menu').click()
+
       cy.getByTestID('select-group--option')
         .last()
         .click() // light mode
+
       cy.getByTestID('app-wrapper')
         .invoke('css', 'background-color')
         .should('equal', 'rgb(241, 241, 243)')

src/annotations/components/AnnotationsControlBarToggleButton.tsx

@@ -19,11 +19,14 @@ import {
 // Utils
 import {event} from 'src/cloud/utils/reporting'
 
+interface Props {
+  className?: string
+}
 /**
  * This turns annotation on and off.
  * the control bar itself just shows messages at this point.
  * */
-export const AnnotationsControlBarToggleButton: FC = () => {
+export const AnnotationsControlBarToggleButton: FC<Props> = ({className}) => {
   const dispatch = useDispatch()
   const inAnnotationsMode = useSelector(isAnnotationsModeEnabled)
 
@@ -47,6 +50,7 @@ export const AnnotationsControlBarToggleButton: FC = () => {
       checked={inAnnotationsMode}
       testID="toggle-annotations-controls"
       onChange={handleClick}
+      className={className}
     >
       <InputLabel
         htmlFor="toggle-annotations-controls"

src/dashboards/components/DashboardHeader.scss

@@ -0,0 +1,11 @@
+@media (max-width: 1350px) {
+  .control_buttons_collapsible {
+    display: none;
+  }
+}
+
+@media (min-width: 1350px) {
+  .control_buttons_in_collapsed_menu {
+    display: none;
+  }
+}

src/dashboards/components/DashboardHeader.tsx

@@ -1,24 +1,26 @@
 // Libraries
-import React, {FC, useEffect, useCallback} from 'react'
+import React, {FC, useCallback, useContext, useEffect} from 'react'
 import {connect, ConnectedProps} from 'react-redux'
-import {withRouter, RouteComponentProps} from 'react-router-dom'
+import {RouteComponentProps, withRouter} from 'react-router-dom'
 
 // Components
 import AutoRefreshDropdown from 'src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown'
 import TimeRangeDropdown from 'src/shared/components/TimeRangeDropdown'
-import PresentationModeToggle from 'src/shared/components/PresentationModeToggle'
 import DashboardLightModeToggle from 'src/dashboards/components/DashboardLightModeToggle'
 import GraphTips from 'src/shared/components/graph_tips/GraphTips'
 import RenamablePageTitle from 'src/pageLayout/components/RenamablePageTitle'
 import TimeZoneDropdown from 'src/shared/components/TimeZoneDropdown'
 import {
+  Appearance,
   Button,
-  IconFont,
   ComponentColor,
-  Page,
-  Appearance,
+  Dropdown,
+  FlexBox,
+  IconFont,
   InputLabel,
   InputToggleType,
+  JustifyContent,
+  Page,
   Toggle,
 } from '@influxdata/clockface'
 import {AnnotationsControlBarToggleButton} from 'src/annotations/components/AnnotationsControlBarToggleButton'
@@ -27,16 +29,16 @@ import {AnnotationsControlBarToggleButton} from 'src/annotations/components/Anno
 import {toggleShowVariablesControls as toggleShowVariablesControlsAction} from 'src/userSettings/actions'
 import {updateDashboard as updateDashboardAction} from 'src/dashboards/actions/thunks'
 import {
-  setAutoRefreshStatus as setAutoRefreshStatusAction,
   resetDashboardAutoRefresh as resetDashboardAutoRefreshAction,
+  setAutoRefreshStatus as setAutoRefreshStatusAction,
 } from 'src/shared/actions/autoRefresh'
 import {
   setDashboardTimeRange as setDashboardTimeRangeAction,
   updateQueryParams as updateQueryParamsAction,
 } from 'src/dashboards/actions/ranges'
 import {
-  showOverlay as showOverlayAction,
   dismissOverlay as dismissOverlayAction,
+  showOverlay as showOverlayAction,
 } from 'src/overlays/actions/overlays'
 
 // Utils
@@ -52,10 +54,12 @@ import {getOrg} from 'src/organizations/selectors'
 // Constants
 import {DemoDataDashboardNames} from 'src/cloud/constants'
 import {
-  DEFAULT_DASHBOARD_NAME,
   DASHBOARD_NAME_MAX_LENGTH,
+  DEFAULT_DASHBOARD_NAME,
 } from 'src/dashboards/constants/index'
 
+import './DashboardHeader.scss'
+
 // Types
 import {
   AppState,
@@ -65,6 +69,7 @@ import {
   ResourceType,
   TimeRange,
 } from 'src/types'
+import {AppSettingContext} from '../../shared/contexts/app'
 
 interface OwnProps {
   autoRefresh: AutoRefresh
@@ -143,6 +148,8 @@ const DashboardHeader: FC<Props> = ({
   const isActive =
     autoRefresh?.status && autoRefresh.status === AutoRefreshStatus.Active
 
+  const {setPresentationMode, presentationMode} = useContext(AppSettingContext)
+
   return (
     <>
       <Page.Header fullWidth={true}>
@@ -176,6 +183,7 @@ const DashboardHeader: FC<Props> = ({
             checked={showVariablesControls}
             testID="variables--button"
             onChange={toggleShowVariablesControls}
+            className="control_buttons_collapsible"
           >
             <InputLabel
               htmlFor="variables--button"
@@ -185,9 +193,68 @@ const DashboardHeader: FC<Props> = ({
               Show Variables
             </InputLabel>
           </Toggle>
-          <AnnotationsControlBarToggleButton />
-          <DashboardLightModeToggle />
-          <PresentationModeToggle />
+          <AnnotationsControlBarToggleButton className="control_buttons_collapsible" />
+
+          <Dropdown
+            style={{width: '40px'}}
+            button={(active, onClick) => (
+              <Button
+                icon={IconFont.More}
+                onClick={onClick}
+                active={active}
+                testID="collapsible_menu"
+              />
+            )}
+            menu={() => (
+              <Dropdown.Menu style={{width: '200px'}}>
+                <Toggle
+                  id="variables--button"
+                  type={InputToggleType.Checkbox}
+                  fill={Appearance.Solid}
+                  titleText="Variables"
+                  checked={showVariablesControls}
+                  testID="variables--button"
+                  onChange={toggleShowVariablesControls}
+                  style={{marginBottom: '8px'}}
+                  className="control_buttons_in_collapsed_menu"
+                >
+                  <InputLabel
+                    htmlFor="variables--button"
+                    active={showVariablesControls}
+                    style={{fontWeight: 500}}
+                  >
+                    Show Variables
+                  </InputLabel>
+                </Toggle>
+                <AnnotationsControlBarToggleButton className="control_buttons_in_collapsed_menu" />
+                <Toggle
+                  id="toggle_presentation"
+                  type={InputToggleType.Checkbox}
+                  onChange={() => {
+                    setPresentationMode(true)
+                  }}
+                  fill={Appearance.Solid}
+                  style={{marginTop: '8px'}}
+                  testID="presentation-mode-toggle"
+                  checked={presentationMode}
+                >
+                  <InputLabel
+                    active={presentationMode}
+                    style={{fontWeight: 500}}
+                    htmlFor="toggle_presentation"
+                  >
+                    Presentation Mode
+                  </InputLabel>
+                </Toggle>
+                <FlexBox
+                  justifyContent={JustifyContent.Center}
+                  style={{marginTop: '8px'}}
+                >
+                  <DashboardLightModeToggle />
+                </FlexBox>
+              </Dropdown.Menu>
+            )}
+          />
           <GraphTips />
         </Page.ControlBarLeft>
         <Page.ControlBarRight>