[EuiSuperDatePicker] i18n all remaining static copy + convert prettyDuration to hook/component

src-docs/src/views/pretty_duration/pretty_duration.js

@@ -4,7 +4,7 @@ import {
   EuiSpacer,
   EuiCodeBlock,
   EuiText,
-  prettyDuration,
+  usePrettyDuration,
 } from '../../../../src/components';
 
 const examples = [
@@ -50,23 +50,48 @@ const examples = [
     ],
     dateFormat: 'MMMM Do YYYY, HH:mm:ss.SSS',
   },
+  {
+    // Example that will use a default common quick range label
+    start: 'now/w',
+    end: 'now',
+    dateFormat: 'MMMM Do YYYY, HH:mm:ss.SSS',
+  },
 ];
 
 export default function prettyDurationExample() {
   return (
     <Fragment>
       {examples.map(({ start, end, quickRanges, dateFormat }, idx) => (
         <div key={idx}>
-          <EuiCodeBlock paddingSize="s" isCopyable language="js">
-            prettyDuration(&apos;{start}&apos;, &apos;{end}&apos;,{' '}
-            {JSON.stringify(quickRanges)}, &apos;
-            {dateFormat}&apos;)
-          </EuiCodeBlock>
+          <EuiCodeBlock
+            paddingSize="s"
+            isCopyable
+            language="js"
+          >{`<PrettyDuration
+  timeFrom="${start}"
+  timeTo="${end}"
+  dateFormat="${dateFormat}"
+  quickRanges={${JSON.stringify(quickRanges)}}
+/>
+
+usePrettyDuration({
+  timeFrom: '${start}',
+  timeTo: '${end}',
+  dateFormat: '${dateFormat}',
+  quickRanges: ${JSON.stringify(quickRanges)},
+})`}</EuiCodeBlock>
 
           <EuiSpacer size="s" />
 
           <EuiText>
-            <p>{prettyDuration(start, end, quickRanges, dateFormat)}</p>
+            <p>
+              {usePrettyDuration({
+                timeFrom: start,
+                timeTo: end,
+                quickRanges,
+                dateFormat,
+              })}
+            </p>
           </EuiText>
 
           <EuiSpacer size="xl" />

src-docs/src/views/pretty_duration/pretty_duration_example.js

@@ -6,10 +6,10 @@ import {
   EuiAccordion,
   EuiCode,
   EuiCodeBlock,
-  EuiSpacer,
-  commonDurationRanges,
 } from '../../../../src/components';
 
+import { RenderI18nTimeOptions } from '../../../../src/components/date_picker/super_date_picker/time_options';
+
 import PrettyDuration from './pretty_duration';
 const prettyDurationSource = require('!!raw-loader!./pretty_duration');
 
@@ -26,37 +26,50 @@ export const PrettyDurationExample = {
       text: (
         <Fragment>
           <p>
-            Use <EuiCode>prettyDuration</EuiCode> to convert a start and end
-            date string to a human-friendly format.
+            Use the <EuiCode>{'<PrettyDuration />'}</EuiCode> component (for JSX
+            display) or <EuiCode>usePrettyDuration()</EuiCode> hook (for
+            attribute strings) to convert a start and end date string to a
+            human-friendly format. Both utilities take the following props:
           </p>
 
-          <p>
-            Start and end values for the duration are passed as the first and
-            second arguments, respectively. These can be timestamps (
-            <EuiCode>2018-01-17T18:57:57.149Z</EuiCode>) or relative times (
-            <EuiCode>now-15m</EuiCode>).
-          </p>
+          <ul>
+            <li>
+              <p>
+                <EuiCode>timeFrom</EuiCode> and <EuiCode>timeTo</EuiCode> accept
+                start and end date values for the duration. These can be
+                timestamps (<EuiCode>2018-01-17T18:57:57.149Z</EuiCode>) or
+                relative times (<EuiCode>now-15m</EuiCode>).
+              </p>
+            </li>
 
-          <p>
-            An array of quick range values is passed as the third argument.
-            These are used to pretty format custom ranges. EUI exports
-            <EuiCode>commonDurationRanges</EuiCode> which can be passed here.
-          </p>
+            <li>
+              <p>
+                <EuiCode>dateFormat</EuiCode> specifies the output date/time
+                format.
+              </p>
+            </li>
 
-          <EuiAccordion
-            id="commonDurationRanges"
-            buttonContent="Show commonDurationRanges definition"
-          >
-            <EuiCodeBlock>
-              {JSON.stringify(commonDurationRanges, null, 2)}
-            </EuiCodeBlock>
-          </EuiAccordion>
-
-          <EuiSpacer />
-
-          <p>
-            The output date/time format is specified by the fourth argument.
-          </p>
+            <li>
+              <p>
+                <EuiCode>quickRanges</EuiCode> optionally accepts an array of
+                quick range values that are used to pretty format custom ranges.
+                If no custom quick ranges are passed, EUI will default to a set
+                of common duration ranges defined below.
+              </p>
+              <EuiAccordion
+                id="commonDurationRanges"
+                buttonContent="Show default common duration ranges"
+              >
+                <EuiCodeBlock>
+                  <RenderI18nTimeOptions>
+                    {({ commonDurationRanges }) =>
+                      JSON.stringify(commonDurationRanges, null, 2)
+                    }
+                  </RenderI18nTimeOptions>
+                </EuiCodeBlock>
+              </EuiAccordion>
+            </li>
+          </ul>
         </Fragment>
       ),
       demo: <PrettyDuration />,

src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select.tsx

@@ -43,7 +43,7 @@ export default () => {
   };
 
   const [recentlyUsedRanges, setRecentlyUsedRanges] = useState<
-    EuiSuperDatePickerProps['recentlyUsedRanges']
+    NonNullable<EuiSuperDatePickerProps['recentlyUsedRanges']>
   >([]);
   const [isLoading, setIsLoading] = useState(false);
   const [start, setStart] = useState('now-30m');

src-docs/src/views/super_date_picker/super_date_picker_pattern.tsx

@@ -23,7 +23,7 @@ const sampleItems = [
 
 export default () => {
   const [recentlyUsedRanges, setRecentlyUsedRanges] = useState<
-    EuiSuperDatePickerProps['recentlyUsedRanges']
+    NonNullable<EuiSuperDatePickerProps['recentlyUsedRanges']>
   >([]);
   const [isLoading, setIsLoading] = useState(false);
   const [refreshInterval, setRefreshInterval] = useState(1000);

src/components/date_picker/auto_refresh/auto_refresh.tsx

@@ -16,7 +16,7 @@ import {
 import { EuiInputPopover, EuiPopover } from '../../popover';
 import { useEuiI18n } from '../../i18n';
 
-import { prettyInterval } from '../super_date_picker/pretty_interval';
+import { usePrettyInterval } from '../super_date_picker/pretty_interval';
 import {
   EuiRefreshInterval,
   EuiRefreshIntervalProps,
@@ -75,7 +75,7 @@ export const EuiAutoRefresh: FunctionComponent<EuiAutoRefreshProps> = ({
           }
           readOnly={readOnly}
           disabled={isDisabled}
-          value={prettyInterval(Boolean(isPaused), refreshInterval)}
+          value={usePrettyInterval(Boolean(isPaused), refreshInterval)}
           {...rest}
         />
       }
@@ -124,7 +124,7 @@ export const EuiAutoRefreshButton: FunctionComponent<EuiAutoRefreshButtonProps>
   const autoRefeshLabelOn = useEuiI18n(
     'euiAutoRefresh.buttonLabelOn',
     'Auto refresh is on and set to {prettyInterval}',
-    { prettyInterval: prettyInterval(Boolean(isPaused), refreshInterval) }
+    { prettyInterval: usePrettyInterval(Boolean(isPaused), refreshInterval) }
   );
 
   return (
@@ -140,7 +140,7 @@ export const EuiAutoRefreshButton: FunctionComponent<EuiAutoRefreshButtonProps>
           isDisabled={isDisabled}
           {...rest}
         >
-          {prettyInterval(Boolean(isPaused), refreshInterval, shortHand)}
+          {usePrettyInterval(Boolean(isPaused), refreshInterval, shortHand)}
         </EuiButtonEmpty>
       }
       isOpen={isPopoverOpen}

src/components/date_picker/auto_refresh/refresh_interval.tsx

@@ -12,24 +12,15 @@ import React, {
   KeyboardEventHandler,
 } from 'react';
 import { EuiI18n } from '../../i18n';
-import { keysOf } from '../../common';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiSelect, EuiFieldNumber, EuiFormLabel, EuiSwitch } from '../../form';
 import { htmlIdGenerator } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import {
-  Milliseconds,
-  TimeUnitId,
-  RelativeOption,
-  ApplyRefreshInterval,
-} from '../types';
-import { timeUnits, timeUnitsPlural } from '../super_date_picker/time_units';
-
-const refreshUnitsOptions: RelativeOption[] = keysOf(timeUnits)
-  .filter(
-    (timeUnit) => timeUnit === 'h' || timeUnit === 'm' || timeUnit === 's'
-  )
-  .map((timeUnit) => ({ value: timeUnit, text: timeUnitsPlural[timeUnit] }));
+  RenderI18nTimeOptions,
+  TimeOptions,
+} from '../super_date_picker/time_options';
+import { Milliseconds, TimeUnitId, ApplyRefreshInterval } from '../types';
 
 const MILLISECONDS_IN_SECOND = 1000;
 const MILLISECONDS_IN_MINUTE = MILLISECONDS_IN_SECOND * 60;
@@ -174,7 +165,9 @@ export class EuiRefreshInterval extends Component<
     });
   };
 
-  render() {
+  renderScreenReaderText = (
+    refreshUnitsOptions: TimeOptions['refreshUnitsOptions']
+  ) => {
     const { isPaused } = this.props;
     const { value, units } = this.state;
 
@@ -202,63 +195,76 @@ export class EuiRefreshInterval extends Component<
     );
 
     return (
-      <fieldset>
-        <EuiFlexGroup
-          alignItems="center"
-          gutterSize="s"
-          responsive={false}
-          wrap
-        >
-          <EuiFlexItem grow={false}>
-            <EuiSwitch
-              data-test-subj="superDatePickerToggleRefreshButton"
-              aria-describedby={this.refreshSelectionId}
-              checked={!isPaused}
-              onChange={this.toggleRefresh}
-              compressed
-              label={
-                <EuiFormLabel type="legend" id={this.legendId}>
-                  <EuiI18n
-                    token="euiRefreshInterval.legend"
-                    default="Refresh every"
-                  />
-                </EuiFormLabel>
-              }
-            />
-          </EuiFlexItem>
-          <EuiFlexItem style={{ minWidth: 60 }}>
-            <EuiFieldNumber
-              compressed
-              fullWidth
-              value={value}
-              onChange={this.onValueChange}
-              onKeyDown={this.handleKeyDown}
-              isInvalid={!isPaused && (value === '' || value <= 0)}
-              disabled={isPaused}
-              aria-label="Refresh interval value"
-              aria-describedby={`${this.refreshSelectionId} ${this.legendId}`}
-              data-test-subj="superDatePickerRefreshIntervalInput"
-            />
-          </EuiFlexItem>
-          <EuiFlexItem style={{ minWidth: 100 }} grow={2}>
-            <EuiSelect
-              compressed
-              fullWidth
-              aria-label="Refresh interval units"
-              aria-describedby={`${this.refreshSelectionId} ${this.legendId}`}
-              value={units}
-              disabled={isPaused}
-              options={refreshUnitsOptions}
-              onChange={this.onUnitsChange}
-              onKeyDown={this.handleKeyDown}
-              data-test-subj="superDatePickerRefreshIntervalUnitsSelect"
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-        <EuiScreenReaderOnly>
-          <p id={this.refreshSelectionId}>{fullDescription}</p>
-        </EuiScreenReaderOnly>
-      </fieldset>
+      <EuiScreenReaderOnly>
+        <p id={this.refreshSelectionId}>{fullDescription}</p>
+      </EuiScreenReaderOnly>
+    );
+  };
+
+  render() {
+    const { isPaused } = this.props;
+    const { value, units } = this.state;
+
+    return (
+      <RenderI18nTimeOptions>
+        {({ refreshUnitsOptions }) => (
+          <fieldset>
+            <EuiFlexGroup
+              alignItems="center"
+              gutterSize="s"
+              responsive={false}
+              wrap
+            >
+              <EuiFlexItem grow={false}>
+                <EuiSwitch
+                  data-test-subj="superDatePickerToggleRefreshButton"
+                  aria-describedby={this.refreshSelectionId}
+                  checked={!isPaused}
+                  onChange={this.toggleRefresh}
+                  compressed
+                  label={
+                    <EuiFormLabel type="legend" id={this.legendId}>
+                      <EuiI18n
+                        token="euiRefreshInterval.legend"
+                        default="Refresh every"
+                      />
+                    </EuiFormLabel>
+                  }
+                />
+              </EuiFlexItem>
+              <EuiFlexItem style={{ minWidth: 60 }}>
+                <EuiFieldNumber
+                  compressed
+                  fullWidth
+                  value={value}
+                  onChange={this.onValueChange}
+                  onKeyDown={this.handleKeyDown}
+                  isInvalid={!isPaused && (value === '' || value <= 0)}
+                  disabled={isPaused}
+                  aria-label="Refresh interval value"
+                  aria-describedby={`${this.refreshSelectionId} ${this.legendId}`}
+                  data-test-subj="superDatePickerRefreshIntervalInput"
+                />
+              </EuiFlexItem>
+              <EuiFlexItem style={{ minWidth: 100 }} grow={2}>
+                <EuiSelect
+                  compressed
+                  fullWidth
+                  aria-label="Refresh interval units"
+                  aria-describedby={`${this.refreshSelectionId} ${this.legendId}`}
+                  value={units}
+                  disabled={isPaused}
+                  options={refreshUnitsOptions}
+                  onChange={this.onUnitsChange}
+                  onKeyDown={this.handleKeyDown}
+                  data-test-subj="superDatePickerRefreshIntervalUnitsSelect"
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+            {this.renderScreenReaderText(refreshUnitsOptions)}
+          </fieldset>
+        )}
+      </RenderI18nTimeOptions>
     );
   }
 }