@datarobot/design-system 28.2.2

package/cjs/scheduler/constants.js

@@ -0,0 +1,287 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TAB_KEYS = exports.SWITCHER_TYPES = exports.FREQUENCIES = exports.FIELD_BOUNDARIES = exports.DEFAULT_SCHEDULES = exports.DEFAULT_SCHEDULE = void 0;
+exports.useDaysOfWeek = useDaysOfWeek;
+exports.useDefaultTexts = void 0;
+exports.useFrequencyOptions = useFrequencyOptions;
+exports.useMonths = useMonths;
+var _useTranslation = require("../hooks/use-translation");
+const FREQUENCIES = exports.FREQUENCIES = {
+  HOURLY: 'HOURLY',
+  DAILY: 'DAILY',
+  WEEKLY: 'WEEKLY',
+  MONTHLY: 'MONTHLY',
+  QUARTERLY: 'QUARTERLY',
+  YEARLY: 'YEARLY'
+};
+// the api response values are [0..6], representing the days in order
+function useDaysOfWeek() {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  return [{
+    index: 0,
+    key: 'SUNDAY',
+    label: t('Sunday')
+  }, {
+    index: 1,
+    key: 'MONDAY',
+    label: t('Monday')
+  }, {
+    index: 2,
+    key: 'TUESDAY',
+    label: t('Tuesday')
+  }, {
+    index: 3,
+    key: 'WEDNESDAY',
+    label: t('Wednesday')
+  }, {
+    index: 4,
+    key: 'THURSDAY',
+    label: t('Thursday')
+  }, {
+    index: 5,
+    key: 'FRIDAY',
+    label: t('Friday')
+  }, {
+    index: 6,
+    key: 'SATURDAY',
+    label: t('Saturday')
+  }];
+}
+
+// the api response values are [1..12], representing the months in order
+function useMonths() {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  return {
+    JANUARY: {
+      index: 1,
+      key: 'JANUARY',
+      label: t('January')
+    },
+    FEBRUARY: {
+      index: 2,
+      key: 'FEBRUARY',
+      label: t('February')
+    },
+    MARCH: {
+      index: 3,
+      key: 'MARCH',
+      label: t('March')
+    },
+    APRIL: {
+      index: 4,
+      key: 'APRIL',
+      label: t('April')
+    },
+    MAY: {
+      index: 5,
+      key: 'MAY',
+      label: t('May')
+    },
+    JUNE: {
+      index: 6,
+      key: 'JUNE',
+      label: t('June')
+    },
+    JULY: {
+      index: 7,
+      key: 'JULY',
+      label: t('July')
+    },
+    AUGUST: {
+      index: 8,
+      key: 'AUGUST',
+      label: t('August')
+    },
+    SEPTEMBER: {
+      index: 9,
+      key: 'SEPTEMBER',
+      label: t('September')
+    },
+    OCTOBER: {
+      index: 10,
+      key: 'OCTOBER',
+      label: t('October')
+    },
+    NOVEMBER: {
+      index: 11,
+      key: 'NOVEMBER',
+      label: t('November')
+    },
+    DECEMBER: {
+      index: 12,
+      key: 'DECEMBER',
+      label: t('December')
+    }
+  };
+}
+const DEFAULT_SCHEDULES = exports.DEFAULT_SCHEDULES = {
+  // every hour at half past
+  [FREQUENCIES.HOURLY]: {
+    minute: [30],
+    hour: ['*'],
+    dayOfWeek: ['*'],
+    dayOfMonth: ['*'],
+    month: ['*']
+  },
+  // every day at 18:00
+  [FREQUENCIES.DAILY]: {
+    minute: [0],
+    hour: [18],
+    dayOfWeek: ['*'],
+    dayOfMonth: ['*'],
+    month: ['*']
+  },
+  // every Monday at 18:00
+  [FREQUENCIES.WEEKLY]: {
+    minute: [0],
+    hour: [18],
+    dayOfWeek: [1],
+    dayOfMonth: ['*'],
+    month: ['*']
+  },
+  // every month on the 1st and 15th days at 18:00
+  [FREQUENCIES.MONTHLY]: {
+    minute: [0],
+    hour: [18],
+    dayOfWeek: ['*'],
+    dayOfMonth: [1, 15],
+    month: ['*']
+  },
+  // every 1st of january, april, july, and october at 18:00
+  [FREQUENCIES.QUARTERLY]: {
+    minute: [0],
+    hour: [18],
+    dayOfWeek: ['*'],
+    dayOfMonth: [1],
+    month: [1, 4, 7, 10]
+  },
+  // every 1st of january at 18:00
+  [FREQUENCIES.YEARLY]: {
+    minute: [0],
+    hour: [18],
+    dayOfWeek: ['*'],
+    dayOfMonth: [1],
+    month: [1]
+  }
+};
+const FIELD_BOUNDARIES = exports.FIELD_BOUNDARIES = {
+  minute: {
+    min: 0,
+    max: 59
+  },
+  hour: {
+    min: 0,
+    max: 23
+  },
+  dayOfMonth: {
+    min: 1,
+    max: 31
+  },
+  month: {
+    min: 1,
+    max: 12
+  },
+  dayOfWeek: {
+    min: 0,
+    // Sunday
+    max: 6 // Saturday
+  }
+};
+
+// arbitrarily selected, we just need some value that guarantees a simple schedule
+const DEFAULT_SCHEDULE = exports.DEFAULT_SCHEDULE = DEFAULT_SCHEDULES[FREQUENCIES.DAILY];
+function useFrequencyOptions() {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  return [{
+    key: FREQUENCIES.HOURLY,
+    title: t('Every hour'),
+    testId: 'HOURLY'
+  }, {
+    key: FREQUENCIES.DAILY,
+    title: t('Every day'),
+    testId: 'DAILY'
+  }, {
+    key: FREQUENCIES.WEEKLY,
+    title: t('Every week'),
+    testId: 'WEEKLY'
+  }, {
+    key: FREQUENCIES.MONTHLY,
+    title: t('Every month'),
+    testId: 'MONTHLY'
+  }, {
+    key: FREQUENCIES.QUARTERLY,
+    title: t('Every quarter'),
+    testId: 'QUARTERLY'
+  }, {
+    key: FREQUENCIES.YEARLY,
+    title: t('Every year'),
+    testId: 'YEARLY'
+  }];
+}
+const SWITCHER_TYPES = exports.SWITCHER_TYPES = {
+  TABS: 'tabs',
+  BUTTON: 'button'
+};
+const TAB_KEYS = exports.TAB_KEYS = {
+  SIMPLE: 'SIMPLE',
+  ADVANCED: 'ADVANCED'
+};
+const useDefaultTexts = () => {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  const defaultSimpleSchedulerToggleButtonText = t('Use simple scheduler');
+  const defaultAdvancedSchedulerToggleButtonText = t('Use advanced scheduler');
+  const defaultSimpleSchedulerModalTexts = {
+    title: t('Use simple scheduler?'),
+    confirmButtonText: t('Switch to simple scheduler'),
+    dismissButtonText: t('Stay with advanced scheduler'),
+    content: t('Switching to the simple scheduler form will clear any schedule you set so far.'),
+    labelText: t('Close')
+  };
+  const defaultLabelTexts = {
+    minute: t('Minute'),
+    hour: t('Hour'),
+    dayOfMonth: t('Day of month'),
+    month: t('Month'),
+    dayOfWeek: t('Day of week'),
+    minutesPastHour: t('Minutes past the hour'),
+    time: t('Time'),
+    days: t('Days'),
+    months: t('Months'),
+    frequency: t('Frequency')
+  };
+  const defaultAdvancedSchedulerInfoTexts = {
+    dayOfMonth: t('Accepts values from 1 to 31. Invalid values for a given month will be ignored.'),
+    month: t('Accepts values between 1 (January) and 12 (December).'),
+    dayOfWeek: t('Accepts values between 0 (Sunday) and 6 (Saturday).')
+  };
+  const defaultValidationTexts = {
+    timeError: t('Value must have both hours and minutes specified'),
+    minuteError: t('Value must be a number between 0 and 59')
+  };
+  const defaultTabTexts = {
+    simpleScheduleLabel: t('Simple schedule'),
+    advancedScheduleLabel: t('Advanced schedule'),
+    simpleScheduleTooltip: t("Switching to the simple scheduler will clear any schedule you've set so far")
+  };
+  return {
+    defaultSimpleSchedulerToggleButtonText,
+    defaultAdvancedSchedulerToggleButtonText,
+    defaultSimpleSchedulerModalTexts,
+    defaultLabelTexts,
+    defaultAdvancedSchedulerInfoTexts,
+    defaultValidationTexts,
+    defaultTabTexts
+  };
+};
+exports.useDefaultTexts = useDefaultTexts;

package/cjs/scheduler/index.d.ts

@@ -0,0 +1,6 @@
+import { Scheduler } from './scheduler';
+import { DEFAULT_SCHEDULE, FREQUENCIES, DEFAULT_SCHEDULES, SWITCHER_TYPES, TAB_KEYS } from './constants';
+import { getFrequency } from './utils';
+export type { ScheduleValidity, Schedule, DateItem, Months, LabelTexts, Frequency, } from './constants';
+export type { SchedulerProps } from './scheduler';
+export { Scheduler, getFrequency, DEFAULT_SCHEDULE, FREQUENCIES, DEFAULT_SCHEDULES, SWITCHER_TYPES, TAB_KEYS, };

package/cjs/scheduler/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DEFAULT_SCHEDULE", {
+  enumerable: true,
+  get: function () {
+    return _constants.DEFAULT_SCHEDULE;
+  }
+});
+Object.defineProperty(exports, "DEFAULT_SCHEDULES", {
+  enumerable: true,
+  get: function () {
+    return _constants.DEFAULT_SCHEDULES;
+  }
+});
+Object.defineProperty(exports, "FREQUENCIES", {
+  enumerable: true,
+  get: function () {
+    return _constants.FREQUENCIES;
+  }
+});
+Object.defineProperty(exports, "SWITCHER_TYPES", {
+  enumerable: true,
+  get: function () {
+    return _constants.SWITCHER_TYPES;
+  }
+});
+Object.defineProperty(exports, "Scheduler", {
+  enumerable: true,
+  get: function () {
+    return _scheduler.Scheduler;
+  }
+});
+Object.defineProperty(exports, "TAB_KEYS", {
+  enumerable: true,
+  get: function () {
+    return _constants.TAB_KEYS;
+  }
+});
+Object.defineProperty(exports, "getFrequency", {
+  enumerable: true,
+  get: function () {
+    return _utils.getFrequency;
+  }
+});
+var _scheduler = require("./scheduler");
+var _constants = require("./constants");
+var _utils = require("./utils");

package/cjs/scheduler/scheduler.d.ts

@@ -0,0 +1,34 @@
+import { Schedule, DateItem, Months, LabelTexts, ScheduleValidity, SWITCHER_TYPES, SimpleSchedulerModalTexts, AdvancedSchedulerInfoTexts, TabTexts } from './constants';
+import { ValueOf } from '../types';
+import './scheduler.less';
+export type SchedulerProps = {
+    onUpdateSchedule?: (newSchedule: Schedule, errors: Array<ScheduleValidity> | null) => void;
+    initialSchedule?: Schedule;
+    testId?: string;
+    isDisabled?: boolean;
+    frequencyOptions?: Array<{
+        key: string;
+        title: string;
+    }>;
+    validateArrayOfRangedNumbersOrAll?: (validity: ScheduleValidity) => ScheduleValidity | undefined;
+    daysOfWeek?: Array<DateItem>;
+    months?: Months;
+    labelTexts?: LabelTexts;
+    simpleSchedulerToggleButtonText?: string;
+    advancedSchedulerToggleButtonText?: string;
+    simpleSchedulerModalTexts?: SimpleSchedulerModalTexts;
+    validationTexts?: {
+        timeError: string;
+        minuteError: string;
+    };
+    advancedSchedulerInfoTexts?: AdvancedSchedulerInfoTexts;
+    switcherType?: ValueOf<typeof SWITCHER_TYPES>;
+    selectedTabKey?: string;
+    tabTexts?: TabTexts;
+};
+/**
+ * Scheduler is form for cron jobs configuration
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ */
+export declare function Scheduler({ onUpdateSchedule, initialSchedule, testId, isDisabled, frequencyOptions: frequencyOptionsParams, daysOfWeek: daysOfWeekParams, months: monthsParams, validateArrayOfRangedNumbersOrAll: validateArrayOfRangedNumbersOrAllParams, simpleSchedulerToggleButtonText: simpleSchedulerToggleButtonTextParams, advancedSchedulerToggleButtonText: advancedSchedulerToggleButtonTextParams, simpleSchedulerModalTexts: simpleSchedulerModalTextsParams, labelTexts: labelTextsParams, advancedSchedulerInfoTexts: advancedSchedulerInfoTextsParams, validationTexts: validationTextsParams, switcherType, selectedTabKey, tabTexts: tabTextsParams, }: SchedulerProps): import("react/jsx-runtime").JSX.Element;

package/cjs/scheduler/scheduler.js

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Scheduler = Scheduler;
+var _react = _interopRequireWildcard(require("react"));
+var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
+var _withButtonSwitcherSchedulerContainer = require("./with-button-switcher-scheduler-container");
+var _withTabsSwitcherSchedulerContainer = require("./with-tabs-switcher-scheduler-container");
+var _constants = require("./constants");
+var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Scheduler is form for cron jobs configuration
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ */
+function Scheduler({
+  onUpdateSchedule = () => {},
+  initialSchedule = _constants.DEFAULT_SCHEDULE,
+  testId = 'scheduler',
+  isDisabled = false,
+  frequencyOptions: frequencyOptionsParams,
+  daysOfWeek: daysOfWeekParams,
+  months: monthsParams,
+  validateArrayOfRangedNumbersOrAll: validateArrayOfRangedNumbersOrAllParams,
+  simpleSchedulerToggleButtonText: simpleSchedulerToggleButtonTextParams,
+  advancedSchedulerToggleButtonText: advancedSchedulerToggleButtonTextParams,
+  simpleSchedulerModalTexts: simpleSchedulerModalTextsParams,
+  labelTexts: labelTextsParams,
+  advancedSchedulerInfoTexts: advancedSchedulerInfoTextsParams,
+  validationTexts: validationTextsParams,
+  switcherType = _constants.SWITCHER_TYPES.BUTTON,
+  selectedTabKey,
+  tabTexts: tabTextsParams
+}) {
+  // Get translated constants from hooks
+  const defaultDaysOfWeek = (0, _constants.useDaysOfWeek)();
+  const defaultValidateArrayOfRangedNumbersOrAll = (0, _utils.useArrayOfRangedNumbersOrAllValidator)();
+  const defaultMonths = (0, _constants.useMonths)();
+  const defaultFrequencyOptions = (0, _constants.useFrequencyOptions)();
+  const months = monthsParams ?? defaultMonths;
+  const daysOfWeek = daysOfWeekParams ?? defaultDaysOfWeek;
+  const frequencyOptions = frequencyOptionsParams ?? defaultFrequencyOptions;
+  const validateArrayOfRangedNumbersOrAll = validateArrayOfRangedNumbersOrAllParams ?? defaultValidateArrayOfRangedNumbersOrAll;
+  const {
+    defaultSimpleSchedulerToggleButtonText,
+    defaultAdvancedSchedulerToggleButtonText,
+    defaultSimpleSchedulerModalTexts,
+    defaultLabelTexts,
+    defaultAdvancedSchedulerInfoTexts,
+    defaultValidationTexts,
+    defaultTabTexts
+  } = (0, _constants.useDefaultTexts)();
+
+  // Use the provided values or defaults
+  const simpleSchedulerToggleButtonText = simpleSchedulerToggleButtonTextParams ?? defaultSimpleSchedulerToggleButtonText;
+  const advancedSchedulerToggleButtonText = advancedSchedulerToggleButtonTextParams ?? defaultAdvancedSchedulerToggleButtonText;
+  const simpleSchedulerModalTexts = simpleSchedulerModalTextsParams ?? defaultSimpleSchedulerModalTexts;
+  const labelTexts = labelTextsParams ?? defaultLabelTexts;
+  const advancedSchedulerInfoTexts = advancedSchedulerInfoTextsParams ?? defaultAdvancedSchedulerInfoTexts;
+  const validationTexts = validationTextsParams ?? defaultValidationTexts;
+  const tabTexts = tabTextsParams ?? defaultTabTexts;
+  const [showAdvancedScheduler, setShowAdvancedScheduler] = (0, _react.useState)(false);
+  const [schedulerKey, setSchedulerKey] = (0, _react.useState)(`scheduler-${Date.now()}`);
+  const schedule = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    // Check if the new schedule can be expressed in one of the simple cases
+    const simpleSchedulerFrequency = (0, _utils.getFrequency)(initialSchedule);
+
+    // Ensure the child component is remounted if the initial schedule changes
+    if (!(0, _isEqual.default)(schedule.current, initialSchedule)) {
+      setSchedulerKey(`scheduler-${Date.now()}`);
+
+      // If we are in simple mode, and the schedule is complex, switch to the advanced mode
+      if (!showAdvancedScheduler && !simpleSchedulerFrequency) {
+        setShowAdvancedScheduler(true);
+      }
+      // If we are in advanced mode, and the schedule is simple, switch to simple mode
+      else if (showAdvancedScheduler && simpleSchedulerFrequency) {
+        setShowAdvancedScheduler(false);
+      }
+    }
+  }, [initialSchedule?.minute?.join(','), initialSchedule?.hour?.join(','), initialSchedule?.dayOfWeek?.join(','), initialSchedule?.dayOfMonth?.join(','), initialSchedule?.month?.join(',')]);
+  const onUseSimpleScheduler = (0, _react.useCallback)(() => {
+    onUpdateSchedule(_constants.DEFAULT_SCHEDULE, null);
+    setShowAdvancedScheduler(false);
+  }, [setShowAdvancedScheduler, onUpdateSchedule]);
+  function handleUpdateSchedule({
+    newSchedule,
+    errors = null
+  }) {
+    schedule.current = newSchedule;
+    onUpdateSchedule(newSchedule, errors);
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "scheduler",
+    "test-id": testId,
+    children: [switcherType === _constants.SWITCHER_TYPES.BUTTON && /*#__PURE__*/(0, _jsxRuntime.jsx)(_withButtonSwitcherSchedulerContainer.WithButtonSwitcherSchedulerContainer, {
+      showAdvancedScheduler: showAdvancedScheduler,
+      onUpdateSchedule: handleUpdateSchedule,
+      isDisabled: isDisabled,
+      validationTexts: validationTexts,
+      initialSchedule: initialSchedule,
+      schedulerKey: schedulerKey,
+      validateArrayOfRangedNumbersOrAll: validateArrayOfRangedNumbersOrAll,
+      simpleSchedulerToggleButtonText: simpleSchedulerToggleButtonText,
+      advancedSchedulerToggleButtonText: advancedSchedulerToggleButtonText,
+      simpleSchedulerModalTexts: simpleSchedulerModalTexts,
+      advancedSchedulerInfoTexts: advancedSchedulerInfoTexts,
+      labelTexts: labelTexts,
+      frequencyOptions: frequencyOptions,
+      daysOfWeek: daysOfWeek,
+      months: months,
+      onUseSimpleScheduler: onUseSimpleScheduler,
+      onUseAdvancedScheduler: () => {
+        setShowAdvancedScheduler(true);
+      }
+    }), switcherType === _constants.SWITCHER_TYPES.TABS && /*#__PURE__*/(0, _jsxRuntime.jsx)(_withTabsSwitcherSchedulerContainer.WithTabsSwitcherSchedulerContainer, {
+      onUpdateSchedule: handleUpdateSchedule,
+      isDisabled: isDisabled,
+      validationTexts: validationTexts,
+      initialSchedule: initialSchedule,
+      schedulerKey: schedulerKey,
+      validateArrayOfRangedNumbersOrAll: validateArrayOfRangedNumbersOrAll,
+      advancedSchedulerInfoTexts: advancedSchedulerInfoTexts,
+      labelTexts: labelTexts,
+      frequencyOptions: frequencyOptions,
+      daysOfWeek: daysOfWeek,
+      months: months,
+      selectedTabKey: selectedTabKey,
+      onUseSimpleScheduler: onUseSimpleScheduler,
+      tabTexts: tabTexts
+    })]
+  });
+}

package/cjs/scheduler/simple-scheduler.d.ts

@@ -0,0 +1,28 @@
+import { DropdownMenuOption } from '../dropdown-menu';
+import { DateItem, Months, Schedule, ScheduleValidity } from './constants';
+type SimpleSchedulerProps = {
+    onUpdateSchedule: ({ newSchedule, errors, }: {
+        newSchedule: Schedule;
+        errors?: Array<ScheduleValidity> | null;
+    }) => void;
+    initialSchedule: Schedule;
+    frequencyOptions: Array<DropdownMenuOption>;
+    validateArrayOfRangedNumbersOrAll: (validity: ScheduleValidity) => ScheduleValidity | undefined;
+    daysOfWeek: Array<DateItem>;
+    months: Months;
+    labelTexts: {
+        minutesPastHour: string;
+        time: string;
+        days: string;
+        months: string;
+        dayOfMonth: string;
+        frequency: string;
+    };
+    validationTexts: {
+        timeError: string;
+        minuteError: string;
+    };
+    isDisabled?: boolean;
+};
+export declare function SimpleScheduler({ onUpdateSchedule, initialSchedule, frequencyOptions, validateArrayOfRangedNumbersOrAll, daysOfWeek, months, labelTexts, validationTexts, isDisabled, }: SimpleSchedulerProps): import("react/jsx-runtime").JSX.Element;
+export {};