Merge 0938ee1 into 60cdcbf

carbon-design-system · Oct 12, 2022 · 1ffc269 · 1ffc269
2 parents 60cdcbf + 0938ee1
commit 1ffc269
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 6 deletions.
diff --git a/packages/react/src/components/DateTimePicker/DateTimePicker.jsx b/packages/react/src/components/DateTimePicker/DateTimePicker.jsx
@@ -632,7 +632,9 @@ const DateTimePicker = ({
   const disableAbsoluteApply =
     isCustomRange &&
     customRangeKind === PICKER_KINDS.ABSOLUTE &&
-    (absoluteStartTimeInvalid || absoluteEndTimeInvalid);
+    (absoluteStartTimeInvalid ||
+      absoluteEndTimeInvalid ||
+      (absoluteValue.startDate === '' && absoluteValue.endDate === ''));
 
   const disableApply = disableRelativeApply || disableAbsoluteApply;
 

diff --git a/packages/react/src/components/DateTimePicker/DateTimePicker.test.jsx b/packages/react/src/components/DateTimePicker/DateTimePicker.test.jsx
@@ -767,6 +767,16 @@ describe('DateTimePicker', () => {
     expect(applyBytton).toBeDisabled();
   });
 
+  it('should disable apply button when switching from presets to relative then to absolute with empty startDate and endDate', () => {
+    render(<DateTimePicker {...dateTimePickerProps} id="picker-test" />);
+    jest.runAllTimers();
+
+    userEvent.click(screen.getByTestId('date-time-picker__field'));
+    userEvent.click(screen.getByText('Custom Range'));
+    userEvent.click(screen.getByText('Absolute'));
+    expect(screen.getByRole('button', { name: 'Apply' })).toBeDisabled();
+  });
+
   it('should enable apply button when absolute DatePicker input has start and end date in different dates', () => {
     const { i18n } = DateTimePicker.defaultProps;
 
@@ -949,6 +959,12 @@ describe('DateTimePicker', () => {
     expect(screen.getByLabelText('Relative')).toBeChecked();
   });
 
+  it('should be able to generate default id', () => {
+    render(<DateTimePicker {...dateTimePickerProps} testId="date-time-picker" />);
+    expect(screen.getByTestId('date-time-picker').getAttribute('id')).toMatch(
+      /-iot--date-time-picker__wrapper/
+    );
+  });
   it('should show invalid text when in invalid state', () => {
     render(<DateTimePicker {...dateTimePickerProps} i18n={i18n} invalid />);
     expect(screen.getByText(i18n.invalidText)).toBeInTheDocument();

diff --git a/packages/react/src/components/DateTimePicker/DateTimePickerV2.jsx b/packages/react/src/components/DateTimePicker/DateTimePickerV2.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { v4 as uuidv4 } from 'uuid';
 
 import DateTimePickerNew, { propTypes, defaultProps } from './DateTimePickerV2WithTimeSpinner';
 import DateTimePickerOld from './DateTimePickerV2WithoutTimeSpinner';
@@ -25,7 +24,7 @@ const DateTimePicker = ({
   i18n,
   light,
   locale,
-  id = uuidv4(),
+  id,
   hasIconOnly,
   menuOffset,
   datePickerType,

diff --git a/packages/react/src/components/DateTimePicker/DateTimePickerV2.test.jsx b/packages/react/src/components/DateTimePicker/DateTimePickerV2.test.jsx
@@ -1042,6 +1042,8 @@ describe('DateTimePickerV2', () => {
     expect(screen.queryByText(i18nDefault.startTimeLabel)).not.toBeInTheDocument();
     expect(screen.queryByText(i18nDefault.endTimeLabel)).not.toBeInTheDocument();
     // click apply
+    expect(screen.getByText(i18nTest.applyBtnLabel)).toBeDisabled();
+    userEvent.click(screen.getAllByLabelText('Increment hours')[0]);
     fireEvent.click(screen.getByText(i18nTest.applyBtnLabel));
     expect(screen.getAllByTitle(new RegExp(`.*${i18nTest.toLabel}.*`))[0]).toBeInTheDocument();
 
@@ -1623,6 +1625,28 @@ describe('DateTimePickerV2', () => {
     expect(screen.getByText(i18n.applyBtnLabel)).toBeDisabled();
   });
 
+  it('should disable apply button when switching from presets to relative then to absolute with empty startDate and endDate', () => {
+    const { i18n } = DateTimePicker.defaultProps;
+    render(<DateTimePicker {...dateTimePickerProps} id="picker-test" />);
+    jest.runAllTimers();
+
+    userEvent.click(screen.getByTestId('date-time-picker__field'));
+    userEvent.click(screen.getByText('Custom Range'));
+    userEvent.click(screen.getByText('Absolute'));
+    expect(screen.getByText(i18n.applyBtnLabel)).toBeDisabled();
+  });
+
+  it('should disable apply button when switching from presets to relative then to absolute with empty startDate and endDate (new time spinner)', () => {
+    const { i18n } = DateTimePicker.defaultProps;
+    render(<DateTimePicker {...dateTimePickerProps} id="picker-test" useNewTimeSpinner />);
+    jest.runAllTimers();
+
+    userEvent.click(screen.getByTestId('date-time-picker__field'));
+    userEvent.click(screen.getByText('Custom Range'));
+    userEvent.click(screen.getByText('Absolute'));
+    expect(screen.getByText(i18n.applyBtnLabel)).toBeDisabled();
+  });
+
   it('should enable apply button when absolute DatePicker input has start and end date in different dates', () => {
     const { i18n } = DateTimePicker.defaultProps;
     render(
@@ -1784,6 +1808,20 @@ describe('DateTimePickerV2', () => {
     expect(screen.getByText(i18n.applyBtnLabel)).toBeDisabled();
   });
 
+  it('should be able to generate default id', () => {
+    render(<DateTimePicker {...dateTimePickerProps} testId="date-time-picker" />);
+    expect(screen.getByTestId('date-time-picker').getAttribute('id')).toMatch(
+      /-iot--date-time-pickerv2__wrapper/
+    );
+  });
+
+  it('should be able to generate default id (new time spinner)', () => {
+    render(<DateTimePicker {...dateTimePickerProps} testId="date-time-picker" useNewTimeSpinner />);
+    expect(screen.getByTestId('date-time-picker').getAttribute('id')).toMatch(
+      /-iot--date-time-pickerv2__wrapper/
+    );
+  });
+
   it('should show invalid text when in invalid state', () => {
     render(<DateTimePicker {...dateTimePickerProps} i18n={i18n} invalid />);
     expect(screen.getByText(i18n.invalidText)).toBeInTheDocument();

diff --git a/packages/react/src/components/DateTimePicker/DateTimePickerV2WithTimeSpinner.jsx b/packages/react/src/components/DateTimePicker/DateTimePickerV2WithTimeSpinner.jsx
@@ -659,10 +659,14 @@ const DateTimePicker = ({
   const disableAbsoluteApply =
     isCustomRange &&
     customRangeKind === PICKER_KINDS.ABSOLUTE &&
-    (invalidRangeStartTime || invalidRangeEndTime);
+    (invalidRangeStartTime ||
+      invalidRangeEndTime ||
+      (absoluteValue.startDate === '' && absoluteValue.endDate === ''));
 
   const disableSingleApply =
-    isCustomRange && customRangeKind === PICKER_KINDS.SINGLE && invalidRangeStartTime;
+    isCustomRange &&
+    customRangeKind === PICKER_KINDS.SINGLE &&
+    (invalidRangeStartTime || singleTimeValue === '');
 
   const disableApply = disableRelativeApply || disableAbsoluteApply || disableSingleApply;
 

diff --git a/packages/react/src/components/DateTimePicker/DateTimePickerV2WithoutTimeSpinner.jsx b/packages/react/src/components/DateTimePicker/DateTimePickerV2WithoutTimeSpinner.jsx
@@ -579,7 +579,9 @@ const DateTimePicker = ({
   const disableAbsoluteApply =
     isCustomRange &&
     customRangeKind === PICKER_KINDS.ABSOLUTE &&
-    (absoluteStartTimeInvalid || absoluteEndTimeInvalid);
+    (absoluteStartTimeInvalid ||
+      absoluteEndTimeInvalid ||
+      (absoluteValue.startDate === '' && absoluteValue.endDate === ''));
 
   const disableApply = disableRelativeApply || disableAbsoluteApply;