[7.x] [Canvas] Adds refresh and autoplay options to view menu (#64375) (#64972)

Author: cqliu1

x-pack/legacy/plugins/canvas/i18n/components.ts

@@ -1005,12 +1005,6 @@ export const ComponentStrings = {
         defaultMessage: 'Refresh elements',
       }),
   },
-  WorkpadHeaderControlSettings: {
-    getButtonLabel: () =>
-      i18n.translate('xpack.canvas.workpadHeaderControlSettings.buttonLabel', {
-        defaultMessage: 'Options',
-      }),
-  },
   WorkpadHeaderCustomInterval: {
     getButtonLabel: () =>
       i18n.translate('xpack.canvas.workpadHeaderCustomInterval.confirmButtonLabel', {
@@ -1319,6 +1313,18 @@ export const ComponentStrings = {
       }),
   },
   WorkpadHeaderViewMenu: {
+    getAutoplayOffMenuItemLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderViewMenu.autoplayOffMenuItemLabel', {
+        defaultMessage: 'Turn autoplay off',
+      }),
+    getAutoplayOnMenuItemLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderViewMenu.autoplayOnMenuItemLabel', {
+        defaultMessage: 'Turn autoplay on',
+      }),
+    getAutoplaySettingsMenuItemLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderViewMenu.autoplaySettingsMenuItemLabel', {
+        defaultMessage: 'Autoplay settings',
+      }),
     getFullscreenMenuItemLabel: () =>
       i18n.translate('xpack.canvas.workpadHeaderViewMenu.fullscreenMenuLabel', {
         defaultMessage: 'Enter fullscreen mode',
@@ -1331,6 +1337,10 @@ export const ComponentStrings = {
       i18n.translate('xpack.canvas.workpadHeaderViewMenu.refreshMenuItemLabel', {
         defaultMessage: 'Refresh data',
       }),
+    getRefreshSettingsMenuItemLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderViewMenu.refreshSettingsMenuItemLabel', {
+        defaultMessage: 'Auto refresh settings',
+      }),
     getShowEditModeLabel: () =>
       i18n.translate('xpack.canvas.workpadHeaderViewMenu.showEditModeLabel', {
         defaultMessage: 'Show editing controls',

x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/control_settings.scss

@@ -32,6 +32,7 @@ export const RefreshControl = ({ doRefresh, inFlight }: Props) => (
       iconType="refresh"
       aria-label={strings.getRefreshAriaLabel()}
       onClick={doRefresh}
+      data-test-subj="canvas-refresh-control"
     />
   </EuiToolTip>
 );

x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/control_settings.tsx

@@ -8,32 +8,58 @@ import { action } from '@storybook/addon-actions';
 import React from 'react';
 import { ViewMenu } from '../view_menu';
 
+const handlers = {
+  setZoomScale: action('setZoomScale'),
+  zoomIn: action('zoomIn'),
+  zoomOut: action('zoomOut'),
+  toggleWriteable: action('toggleWriteable'),
+  resetZoom: action('resetZoom'),
+  enterFullscreen: action('enterFullscreen'),
+  doRefresh: action('doRefresh'),
+  fitToWindow: action('fitToWindow'),
+  setRefreshInterval: action('setRefreshInterval'),
+  setAutoplayInterval: action('setAutoplayInterval'),
+  enableAutoplay: action('enableAutoplay'),
+};
+
 storiesOf('components/WorkpadHeader/ViewMenu', module)
   .add('edit mode', () => (
     <ViewMenu
       isWriteable={true}
       zoomScale={1}
-      setZoomScale={action('setZoomScale')}
-      zoomIn={action('zoomIn')}
-      zoomOut={action('zoomOut')}
-      toggleWriteable={action('toggleWriteable')}
-      resetZoom={action('resetZoom')}
-      enterFullscreen={action('enterFullscreen')}
-      doRefresh={action('doRefresh')}
-      fitToWindow={action('fitToWindow')}
+      refreshInterval={0}
+      autoplayInterval={0}
+      autoplayEnabled={false}
+      {...handlers}
     />
   ))
   .add('read only mode', () => (
     <ViewMenu
       isWriteable={false}
       zoomScale={1}
-      setZoomScale={action('setZoomScale')}
-      zoomIn={action('zoomIn')}
-      zoomOut={action('zoomOut')}
-      toggleWriteable={action('toggleWriteable')}
-      resetZoom={action('resetZoom')}
-      enterFullscreen={action('enterFullscreen')}
-      doRefresh={action('doRefresh')}
-      fitToWindow={action('fitToWindow')}
+      refreshInterval={0}
+      autoplayInterval={0}
+      autoplayEnabled={false}
+      {...handlers}
+    />
+  ))
+  .add('with refresh enabled', () => (
+    <ViewMenu
+      isWriteable={false}
+      zoomScale={1}
+      refreshInterval={1000}
+      autoplayInterval={0}
+      autoplayEnabled={false}
+      {...handlers}
+    />
+  ))
+  .add('with autoplay enabled', () => (
+    <ViewMenu
+      isWriteable={false}
+      zoomScale={1}
+      refreshInterval={0}
+      autoplayInterval={5000}
+      autoplayEnabled={true}
+      {...handlers}
     />
   ));