Added refresh and autoplay settings to view menu

Updated snapshots Fixed i18n errors
elastic · Apr 27, 2020 · 2a277b8 · 2a277b8
1 parent a32d7b1
commit 2a277b8
Show file tree

Hide file tree

Showing 15 changed files with 276 additions and 172 deletions.
diff --git a/x-pack/legacy/plugins/canvas/i18n/components.ts b/x-pack/legacy/plugins/canvas/i18n/components.ts
@@ -1079,12 +1079,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', {
@@ -1305,6 +1299,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',
@@ -1317,6 +1323,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',

diff --git a/...cy/plugins/canvas/public/components/workpad_header/control_settings/control_settings.scss b/...cy/plugins/canvas/public/components/workpad_header/control_settings/control_settings.scss
diff --git a/...acy/plugins/canvas/public/components/workpad_header/control_settings/control_settings.tsx b/...acy/plugins/canvas/public/components/workpad_header/control_settings/control_settings.tsx
diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/index.ts b/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/index.ts
diff --git a/...omponents/workpad_header/view_menu/__examples__/__snapshots__/view_menu.stories.storyshot b/...omponents/workpad_header/view_menu/__examples__/__snapshots__/view_menu.stories.storyshot
diff --git a/...gins/canvas/public/components/workpad_header/view_menu/__examples__/view_menu.stories.tsx b/...gins/canvas/public/components/workpad_header/view_menu/__examples__/view_menu.stories.tsx
@@ -13,6 +13,9 @@ storiesOf('components/WorkpadHeader/ViewMenu', module)
     <ViewMenu
       isWriteable={true}
       zoomScale={1}
+      refreshInterval={0}
+      autoplayInterval={0}
+      autoplayEnabled={false}
       setZoomScale={action('setZoomScale')}
       zoomIn={action('zoomIn')}
       zoomOut={action('zoomOut')}
@@ -21,12 +24,18 @@ storiesOf('components/WorkpadHeader/ViewMenu', module)
       enterFullscreen={action('enterFullscreen')}
       doRefresh={action('doRefresh')}
       fitToWindow={action('fitToWindow')}
+      setRefreshInterval={action('setRefreshInterval')}
+      setAutoplayInterval={action('setAutoplayInterval')}
+      enableAutoplay={action('enableAutoplay')}
     />
   ))
   .add('read only mode', () => (
     <ViewMenu
       isWriteable={false}
       zoomScale={1}
+      refreshInterval={0}
+      autoplayInterval={0}
+      autoplayEnabled={false}
       setZoomScale={action('setZoomScale')}
       zoomIn={action('zoomIn')}
       zoomOut={action('zoomOut')}
@@ -35,5 +44,48 @@ storiesOf('components/WorkpadHeader/ViewMenu', module)
       enterFullscreen={action('enterFullscreen')}
       doRefresh={action('doRefresh')}
       fitToWindow={action('fitToWindow')}
+      setRefreshInterval={action('setRefreshInterval')}
+      setAutoplayInterval={action('setAutoplayInterval')}
+      enableAutoplay={action('enableAutoplay')}
+    />
+  ))
+  .add('with refresh enabled', () => (
+    <ViewMenu
+      isWriteable={false}
+      zoomScale={1}
+      refreshInterval={1000}
+      autoplayInterval={0}
+      autoplayEnabled={false}
+      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')}
+    />
+  ))
+  .add('with autoplay enabled', () => (
+    <ViewMenu
+      isWriteable={false}
+      zoomScale={1}
+      refreshInterval={0}
+      autoplayInterval={5000}
+      autoplayEnabled={true}
+      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')}
     />
   ));
diff --git a/...ontrol_settings/auto_refresh_controls.tsx → ...eader/view_menu/auto_refresh_controls.tsx b/...ontrol_settings/auto_refresh_controls.tsx → ...eader/view_menu/auto_refresh_controls.tsx
@@ -22,7 +22,6 @@ import {
   htmlIdGenerator,
 } from '@elastic/eui';
 import { timeDuration } from '../../../lib/time_duration';
-import { RefreshControl } from '../refresh_control';
 import { CustomInterval } from './custom_interval';
 
 import { ComponentStrings, UnitStrings } from '../../../../i18n';
@@ -69,7 +68,11 @@ export const AutoRefreshControls = ({ refreshInterval, setRefresh, disableInterv
   const intervalTitleId = generateId();
 
   return (
-    <EuiFlexGroup direction="column" justifyContent="spaceBetween">
+    <EuiFlexGroup
+      direction="column"
+      justifyContent="spaceBetween"
+      className="canvasViewMenu__kioskSettings"
+    >
       <EuiFlexItem grow={false}>
         <EuiFlexGroup alignItems="center" justifyContent="spaceAround" gutterSize="xs">
           <EuiFlexItem>
@@ -97,9 +100,6 @@ export const AutoRefreshControls = ({ refreshInterval, setRefresh, disableInterv
                   </EuiToolTip>
                 </EuiFlexItem>
               ) : null}
-              <EuiFlexItem grow={false}>
-                <RefreshControl />
-              </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlexItem>
         </EuiFlexGroup>
@@ -175,7 +175,6 @@ export const AutoRefreshControls = ({ refreshInterval, setRefresh, disableInterv
           </ListGroup>
         </EuiText>
       </EuiFlexItem>
-
       <EuiFlexItem grow={false}>
         <CustomInterval onSubmit={value => setRefresh(value)} />
       </EuiFlexItem>

diff --git a/...ader/control_settings/custom_interval.tsx → ...kpad_header/view_menu/custom_interval.tsx b/...ader/control_settings/custom_interval.tsx → ...kpad_header/view_menu/custom_interval.tsx