@ember-eui/core 5.8.5 → 5.9.2

package/addon/components/eui-super-date-picker/utils/index.ts

@@ -0,0 +1,181 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import moment, { LocaleSpecifier } from 'moment';
+import dateMath from '@elastic/datemath';
+import { RelativeParts, ShortDate } from '../types/global';
+import type EuiI18n from '../../../services/eui-i18n';
+
+/**
+ * Reusable format time string util
+ */
+export const ISO_FORMAT = 'YYYY-MM-DDTHH:mm:ss.SSSZ';
+export const INVALID_DATE = 'invalid_date';
+export const ROUND_DELIMETER = '/';
+export const relativeUnitsFromLargestToSmallest = [
+  'y',
+  'M',
+  'w',
+  'd',
+  'h',
+  'm',
+  's'
+];
+export type AbsoluteDateMode = 'absolute';
+export type RelativeDateMode = 'relative';
+export type NowDateMode = 'now';
+export type DateMode = AbsoluteDateMode | RelativeDateMode | NowDateMode;
+export const DATE_MODES: {
+  ABSOLUTE: AbsoluteDateMode;
+  RELATIVE: RelativeDateMode;
+  NOW: NowDateMode;
+} = {
+  ABSOLUTE: 'absolute',
+  RELATIVE: 'relative',
+  NOW: 'now'
+};
+
+export const useFormatTimeString = (
+  timeString: string,
+  dateFormat: string,
+  roundUp = false,
+  locale: LocaleSpecifier = 'en',
+  euiI18nService: EuiI18n
+): string => {
+  let lookupToken = euiI18nService.lookupToken;
+
+  // i18n'd strings
+  const nowDisplay = lookupToken('euiPrettyDuration.now', 'now');
+  const invalidDateDisplay = lookupToken(
+    'euiPrettyDuration.invalid',
+    'Invalid date'
+  );
+
+  const timeAsMoment = moment(timeString, ISO_FORMAT, true);
+  if (timeAsMoment.isValid()) {
+    return timeAsMoment.locale(locale).format(dateFormat);
+  }
+
+  if (timeString === 'now') {
+    return nowDisplay as string;
+  }
+
+  const tryParse = dateMath.parse(timeString, { roundUp: roundUp });
+  if (!moment(tryParse).isValid()) {
+    return invalidDateDisplay as string;
+  }
+
+  if (moment.isMoment(tryParse)) {
+    return `~ ${tryParse.locale(locale).fromNow()}`;
+  }
+
+  return timeString;
+};
+
+export function toAbsoluteString(value: string, roundUp: boolean = false) {
+  const valueAsMoment = dateMath.parse(value, { roundUp });
+  if (!valueAsMoment) {
+    return value;
+  }
+  if (!moment(valueAsMoment).isValid()) {
+    return INVALID_DATE;
+  }
+  return valueAsMoment.toISOString();
+}
+
+export function parseRelativeParts(value: string): {
+  count: number;
+  unit: string;
+  round: boolean;
+  roundUnit?: string;
+} {
+  const matches =
+    typeof value === 'string' &&
+    value.match(/now(([-+])([0-9]+)([smhdwMy])(\/[smhdwMy])?)?/);
+
+  const operator = matches && matches[2];
+  const count = matches && matches[3];
+  const unit = matches && matches[4];
+  const roundBy = matches && matches[5];
+
+  if (count && unit) {
+    const isRounded = roundBy ? true : false;
+    const roundUnit =
+      isRounded && roundBy ? roundBy.replace(ROUND_DELIMETER, '') : undefined;
+    return {
+      count: parseInt(count, 10),
+      unit: operator === '+' ? `${unit}+` : unit,
+      round: isRounded,
+      ...(roundUnit ? { roundUnit } : {})
+    };
+  }
+
+  const results = { count: 0, unit: 's', round: false };
+  const duration = moment.duration(moment().diff(dateMath.parse(value)));
+  let unitOp = '';
+  for (let i = 0; i < relativeUnitsFromLargestToSmallest.length; i++) {
+    // @ts-expect-error this is a string with the accepted time units
+    const asRelative = duration.as(relativeUnitsFromLargestToSmallest[i]);
+    if (asRelative < 0) unitOp = '+';
+    if (Math.abs(asRelative) > 1) {
+      results.count = Math.round(Math.abs(asRelative));
+      results.unit = relativeUnitsFromLargestToSmallest[i] + unitOp;
+      results.round = false;
+      break;
+    }
+  }
+  return results;
+}
+
+export function toRelativeStringFromParts(relativeParts: RelativeParts) {
+  const count = relativeParts.count ?? 0;
+  const isRounded = relativeParts.round ?? false;
+
+  if (count === 0 && !isRounded) {
+    return 'now';
+  }
+
+  const matches = (relativeParts.unit ?? 's').match(/([smhdwMy])(\+)?/);
+  const unit = matches?.[1];
+  const operator = matches && matches[2] ? matches[2] : '-';
+  const round = isRounded ? `${ROUND_DELIMETER}${unit}` : '';
+
+  return `now${operator}${count}${unit}${round}`;
+}
+
+export function isRangeInvalid(start: ShortDate, end: ShortDate) {
+  if (start === 'now' && end === 'now') {
+    return true;
+  }
+
+  const startMoment = dateMath.parse(start);
+  const endMoment = dateMath.parse(end, { roundUp: true });
+
+  const isInvalid =
+    !startMoment ||
+    !endMoment ||
+    !startMoment.isValid() ||
+    !endMoment.isValid() ||
+    !moment(startMoment).isValid() ||
+    !moment(endMoment).isValid() ||
+    startMoment.isAfter(endMoment);
+
+  return isInvalid;
+}
+
+export function getDateMode(value: ShortDate) {
+  if (value === 'now') {
+    return DATE_MODES.NOW;
+  }
+
+  if (value.includes('now')) {
+    return DATE_MODES.RELATIVE;
+  }
+
+  return DATE_MODES.ABSOLUTE;
+}

package/addon/components/eui-super-date-picker/utils/pretty-duration.ts

@@ -0,0 +1,131 @@
+import type EuiI18n from '../../../services/eui-i18n';
+import { DATE_MODES, getDateMode } from '.';
+import { DurationRange, ShortDate } from '../types/global';
+
+/**
+ * Pretty duration i18n strings
+ * Units should not be simply concatenated because different languages
+ * will have different grammar/positions for time than English
+ */
+
+export const useRelativeDurationI18n = <T extends number = number>(
+  duration: T,
+  euiI18n: EuiI18n
+) => {
+  const lookupToken = euiI18n.lookupToken;
+  return {
+    s: lookupToken(
+      'euiPrettyDuration.lastDurationSeconds',
+      ({ duration }: { duration: T }) =>
+        `Last ${duration} second${duration === 1 ? '' : 's'}`,
+      { duration }
+    ),
+    's+': lookupToken(
+      'euiPrettyDuration.nextDurationSeconds',
+      ({ duration }: { duration: T }) =>
+        `Next ${duration} second${duration === 1 ? '' : 's'}`,
+      { duration }
+    ),
+    m: lookupToken(
+      'euiPrettyDuration.lastDurationMinutes',
+      ({ duration }: { duration: T }) =>
+        `Last ${duration} minute${duration === 1 ? '' : 's'}`,
+      { duration }
+    ),
+    'm+': lookupToken(
+      'euiPrettyDuration.nextDurationMinutes',
+      ({ duration }: { duration: T }) =>
+        `Next ${duration} minute${duration === 1 ? '' : 's'}`,
+      { duration }
+    ),
+    h: lookupToken(
+      'euiPrettyDuration.lastDurationHours',
+      ({ duration }: { duration: T }) =>
+        `Last ${duration} hour${duration === 1 ? '' : 's'}`,
+      { duration }
+    ),
+    'h+': lookupToken(
+      'euiPrettyDuration.nextDurationHours',
+      ({ duration }: { duration: T }) =>
+        `Next ${duration} hour${duration === 1 ? '' : 's'}`,
+      { duration }
+    ),
+    d: lookupToken(
+      'euiPrettyDuration.lastDurationDays',
+      ({ duration }: { duration: T }) =>
+        `Last ${duration} day${duration === 1 ? '' : 's'}`,
+      { duration }
+    ),
+    'd+': lookupToken(
+      'euiPrettyDuration.nexttDurationDays',
+      ({ duration }: { duration: T }) =>
+        `Next ${duration} day${duration === 1 ? '' : 's'}`,
+      { duration }
+    ),
+    w: lookupToken(
+      'euiPrettyDuration.lastDurationWeeks',
+      ({ duration }: { duration: T }) =>
+        `Last ${duration} week${duration === 1 ? '' : 's'}`,
+      { duration }
+    ),
+    'w+': lookupToken(
+      'euiPrettyDuration.nextDurationWeeks',
+      ({ duration }: { duration: T }) =>
+        `Next ${duration} week${duration === 1 ? '' : 's'}`,
+      { duration }
+    ),
+    M: lookupToken(
+      'euiPrettyDuration.lastDurationMonths',
+      ({ duration }: { duration: T }) =>
+        `Last ${duration} month${duration === 1 ? '' : 's'}`,
+      { duration }
+    ),
+    'M+': lookupToken(
+      'euiPrettyDuration.nextDurationMonths',
+      ({ duration }: { duration: T }) =>
+        `Next ${duration} month${duration === 1 ? '' : 's'}`,
+      { duration }
+    ),
+    y: lookupToken(
+      'euiPrettyDuration.lastDurationYears',
+      ({ duration }: { duration: T }) =>
+        `Last ${duration} year${duration === 1 ? '' : 's'}`,
+      { duration }
+    ),
+    'y+': lookupToken(
+      'euiPrettyDuration.nextDurationYears',
+      ({ duration }: { duration: T }) =>
+        `Next ${duration} year${duration === 1 ? '' : 's'}`,
+      { duration }
+    )
+  };
+};
+
+const hasRangeMatch = (
+  timeFrom: ShortDate,
+  timeTo: ShortDate,
+  ranges: DurationRange[]
+) => {
+  return ranges.find(({ start, end }) => timeFrom === start && timeTo === end);
+};
+
+const isRelativeToNow = (timeFrom: ShortDate, timeTo: ShortDate): boolean => {
+  const fromDateMode = getDateMode(timeFrom);
+  const toDateMode = getDateMode(timeTo);
+  const isLast =
+    fromDateMode === DATE_MODES.RELATIVE && toDateMode === DATE_MODES.NOW;
+  const isNext =
+    fromDateMode === DATE_MODES.NOW && toDateMode === DATE_MODES.RELATIVE;
+  return isLast || isNext;
+};
+
+export const showPrettyDuration = (
+  timeFrom: ShortDate,
+  timeTo: ShortDate,
+  quickRanges: DurationRange[]
+): boolean => {
+  if (hasRangeMatch(timeFrom, timeTo, quickRanges)) {
+    return true;
+  }
+  return isRelativeToNow(timeFrom, timeTo);
+};

package/addon/components/eui-super-date-picker/utils/quick-select.ts

@@ -0,0 +1,75 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import moment from 'moment';
+import dateMath from '@elastic/datemath';
+import { LAST, NEXT } from './time-options';
+import { DATE_MODES, relativeUnitsFromLargestToSmallest } from '.';
+import { QuickSelect, TimeUnitId } from '../types/global';
+
+const isNow = (value: string) => value === DATE_MODES.NOW;
+
+/**
+ * This function returns time value, time unit and time tense for a given time string.
+ *
+ * For example: for `now-40m` it will parse output as time value to `40` time unit to `m` and time unit to `last`.
+ *
+ * If given a datetime string it will return a default value.
+ *
+ * If the given string is in the format such as `now/d` it will parse the string to moment object and find the time value, time unit and time tense using moment
+ *
+ * This function accepts two strings start and end time. I the start value is now then it uses the end value to parse.
+ */
+export const parseTimeParts = (start: string, end: string): QuickSelect => {
+  const results: QuickSelect = {
+    timeTense: LAST,
+    timeUnits: 'm',
+    timeValue: 15
+  };
+
+  const value = isNow(start) ? end : start;
+
+  const matches =
+    typeof value === 'string' &&
+    value.match(/now(([-+])(\d+)([smhdwMy])(\/[smhdwMy])?)?/);
+
+  if (!matches) {
+    return results;
+  }
+
+  const operator = matches[2];
+  const matchedTimeValue = matches[3];
+  const timeUnits = matches[4] as TimeUnitId;
+
+  if (matchedTimeValue && timeUnits && operator) {
+    return {
+      timeTense: operator === '+' ? NEXT : LAST,
+      timeUnits,
+      timeValue: parseInt(matchedTimeValue, 10)
+    };
+  }
+
+  const duration = moment.duration(moment().diff(dateMath.parse(value)));
+  let unitOp = '';
+  for (let i = 0; i < relativeUnitsFromLargestToSmallest.length; i++) {
+    // @ts-expect-error this is a string with the accepted time units
+    const as = duration.as(relativeUnitsFromLargestToSmallest[i]);
+    if (as < 0) {
+      unitOp = '+';
+    }
+    if (Math.abs(as) > 1) {
+      return {
+        timeValue: Math.round(Math.abs(as)),
+        timeUnits: relativeUnitsFromLargestToSmallest[i] as TimeUnitId,
+        timeTense: unitOp === '+' ? NEXT : LAST
+      };
+    }
+  }
+
+  return results;
+};

package/addon/components/eui-super-date-picker/utils/time-options.ts

@@ -0,0 +1,216 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { EuiSelectOption } from '@elastic/eui';
+import type EuiI18n from '../../../services/eui-i18n';
+
+import { TimeUnitId, RelativeOption, DurationRange } from '../types/global';
+
+export const LAST = 'last';
+export const NEXT = 'next';
+
+export type TimeOptions = {
+  timeTenseOptions: EuiSelectOption[];
+  timeUnitsOptions: EuiSelectOption[];
+  relativeOptions: RelativeOption[];
+  relativeRoundingLabels: { [id in TimeUnitId]: string };
+  refreshUnitsOptions: EuiSelectOption[];
+  commonDurationRanges: DurationRange[];
+};
+
+/**
+ * i18n'd time options, mostly used in EuiSelects (except for a few cases)
+ * used in EuiSuperDatePicker child sub-components
+ */
+export const useI18nTimeOptions = (euiI18nService: EuiI18n): TimeOptions => {
+  let lookupToken = euiI18nService.lookupToken;
+
+  /**
+   * Quick select panel
+   */
+  const timeTenseOptions = [
+    { value: LAST, text: lookupToken('euiTimeOptions.last', 'Last') },
+    { value: NEXT, text: lookupToken('euiTimeOptions.next', 'Next') }
+  ];
+
+  const timeUnitsOptions = [
+    { value: 's', text: lookupToken('euiTimeOptions.seconds', 'Seconds') },
+    { value: 'm', text: lookupToken('euiTimeOptions.minutes', 'Minutes') },
+    { value: 'h', text: lookupToken('euiTimeOptions.hours', 'Hours') },
+    { value: 'd', text: lookupToken('euiTimeOptions.days', 'Days') },
+    { value: 'w', text: lookupToken('euiTimeOptions.weeks', 'Weeks') },
+    { value: 'M', text: lookupToken('euiTimeOptions.months', 'Months') },
+    { value: 'y', text: lookupToken('euiTimeOptions.years', 'Years') }
+  ];
+
+  /**
+   * Relative tab
+   */
+  const relativeOptions: RelativeOption[] = [
+    {
+      text: lookupToken('euiTimeOptions.secondsAgo', 'Seconds ago') as string,
+      value: 's'
+    },
+    {
+      text: lookupToken('euiTimeOptions.minutesAgo', 'Minutes ago') as string,
+      value: 'm'
+    },
+    {
+      text: lookupToken('euiTimeOptions.hoursAgo', 'Hours ago') as string,
+      value: 'h'
+    },
+    {
+      text: lookupToken('euiTimeOptions.daysAgo', 'Days ago') as string,
+      value: 'd'
+    },
+    {
+      text: lookupToken('euiTimeOptions.weeksAgo', 'Weeks ago') as string,
+      value: 'w'
+    },
+    {
+      text: lookupToken('euiTimeOptions.monthsAgo', 'Months ago') as string,
+      value: 'M'
+    },
+    {
+      text: lookupToken('euiTimeOptions.yearsAgo', 'Years ago') as string,
+      value: 'y'
+    },
+    {
+      text: lookupToken(
+        'euiTimeOptions.secondsFromNow',
+        'Seconds from now'
+      ) as string,
+      value: 's+'
+    },
+    {
+      text: lookupToken(
+        'euiTimeOptions.minutesFromNow',
+        'Minutes from now'
+      ) as string,
+      value: 'm+'
+    },
+    {
+      text: lookupToken(
+        'euiTimeOptions.hoursFromNow',
+        'Hours from now'
+      ) as string,
+      value: 'h+'
+    },
+    {
+      text: lookupToken(
+        'euiTimeOptions.daysFromNow',
+        'Days from now'
+      ) as string,
+      value: 'd+'
+    },
+    {
+      text: lookupToken(
+        'euiTimeOptions.weeksFromNow',
+        'Weeks from now'
+      ) as string,
+      value: 'w+'
+    },
+    {
+      text: lookupToken(
+        'euiTimeOptions.monthsFromNow',
+        'Months from now'
+      ) as string,
+      value: 'M+'
+    },
+    {
+      text: lookupToken(
+        'euiTimeOptions.yearsFromNow',
+        'Years from now'
+      ) as string,
+      value: 'y+'
+    }
+  ];
+
+  const relativeRoundingLabels = {
+    s: lookupToken(
+      'euiTimeOptions.roundToSecond',
+      'Round to the second'
+    ) as string,
+    m: lookupToken(
+      'euiTimeOptions.roundToMinute',
+      'Round to the minute'
+    ) as string,
+    h: lookupToken('euiTimeOptions.roundToHour', 'Round to the hour') as string,
+    d: lookupToken('euiTimeOptions.roundToDay', 'Round to the day') as string,
+    w: lookupToken('euiTimeOptions.roundToWeek', 'Round to the week') as string,
+    M: lookupToken(
+      'euiTimeOptions.roundToMonth',
+      'Round to the month'
+    ) as string,
+    y: lookupToken('euiTimeOptions.roundToYear', 'Round to the year') as string
+  };
+
+  /**
+   * Auto Refresh
+   */
+  const refreshUnitsOptions = timeUnitsOptions.filter(
+    ({ value }) => value === 'h' || value === 'm' || value === 's'
+  );
+
+  /**
+   * Used by both Quick Select ('Commonly used') and by PrettyDuration
+   */
+  const commonDurationRanges = [
+    {
+      start: 'now/d',
+      end: 'now/d',
+      label: lookupToken('euiTimeOptions.today', 'Today') as string
+    },
+    {
+      start: 'now/w',
+      end: 'now/w',
+      label: lookupToken('euiTimeOptions.thisWeek', 'This week') as string
+    },
+    {
+      start: 'now/M',
+      end: 'now/M',
+      label: lookupToken('euiTimeOptions.thisMonth', 'This month') as string
+    },
+    {
+      start: 'now/y',
+      end: 'now/y',
+      label: lookupToken('euiTimeOptions.thisYear', 'This year') as string
+    },
+    {
+      start: 'now-1d/d',
+      end: 'now-1d/d',
+      label: lookupToken('euiTimeOptions.yesterday', 'Yesterday') as string
+    },
+    {
+      start: 'now/w',
+      end: 'now',
+      label: lookupToken('euiTimeOptions.weekToDate', 'Week to date') as string
+    },
+    {
+      start: 'now/M',
+      end: 'now',
+      label: lookupToken(
+        'euiTimeOptions.monthToDate',
+        'Month to date'
+      ) as string
+    },
+    {
+      start: 'now/y',
+      end: 'now',
+      label: lookupToken('euiTimeOptions.yearToDate', 'Year to date') as string
+    }
+  ];
+
+  return {
+    timeTenseOptions,
+    timeUnitsOptions,
+    relativeOptions,
+    relativeRoundingLabels,
+    refreshUnitsOptions,
+    commonDurationRanges
+  };
+};

package/addon/components/text-block/index.hbs

@@ -1,29 +1,33 @@
 {{#if (eq @tagName "h1")}}
-	<h1 ...attributes>
-		{{yield}}
-	</h1>
+  <h1 ...attributes>
+    {{yield}}
+  </h1>
 {{else if (eq @tagName "h2")}}
-	<h2 ...attributes>
-		{{yield}}
-	</h2>
+  <h2 ...attributes>
+    {{yield}}
+  </h2>
 {{else if (eq @tagName "h3")}}
-	<h3 ...attributes>
-		{{yield}}
-	</h3>
+  <h3 ...attributes>
+    {{yield}}
+  </h3>
 {{else if (eq @tagName "h4")}}
-	<h4 ...attributes>
-		{{yield}}
-	</h4>
+  <h4 ...attributes>
+    {{yield}}
+  </h4>
 {{else if (eq @tagName "h5")}}
-	<h5 ...attributes>
-		{{yield}}
-	</h5>
+  <h5 ...attributes>
+    {{yield}}
+  </h5>
 {{else if (eq @tagName "h6")}}
-	<h6 ...attributes>
-		{{yield}}
-	</h6>
+  <h6 ...attributes>
+    {{yield}}
+  </h6>
 {{else if (eq @tagName "p")}}
-	<p ...attributes>
-		{{yield}}
-	</p>
+  <p ...attributes>
+    {{yield}}
+  </p>
+{{else if (eq @tagName "legend")}}
+  <legend ...attributes>
+    {{yield}}
+  </legend>
 {{/if}}

package/addon/{components/eui-i18n → i18n}/util.ts

@@ -6,12 +6,7 @@
  * Side Public License, v 1.
  */
 
-import {
-  isBoolean,
-  isString,
-  isNumber,
-  isUndefined
-} from '../../utils/predicate';
+import { isBoolean, isString, isNumber, isUndefined } from '../utils/predicate';
 import { get } from '@ember/object';
 import { assert } from '@ember/debug';