move AntD datepicker to Patternfly

Author: anishaswain

src/components/DatePicker/index.js

@@ -1,82 +1,66 @@
-import React, { Component } from 'react';
-import { DatePicker } from 'antd';
+import React, { useState } from 'react';
+import {
+  Split,
+  SplitItem,
+  DatePicker,
+  Button,
+  isValidDate,
+  yyyyMMddFormat,
+} from '@patternfly/react-core';
 import { connect } from 'dva';
-import moment from 'moment';
-import PropTypes from 'prop-types';
-import './index.less';
 
-const { RangePicker } = DatePicker;
+const PFDatePicker = props => {
+  const { dispatch, onChangeCallback } = props;
+  const [from, setFrom] = useState('');
 
-@connect(({ global, datastore }) => ({
-  indices: datastore.indices,
-  selectedDateRange: global.selectedDateRange,
-}))
-class AntdDatePicker extends Component {
-  static propTypes = {
-    onChangeCallback: PropTypes.func,
-  };
+  const toValidator = date =>
+    isValidDate(from) && date >= from
+      ? ''
+      : '"To" date must be greater than or equal to the "From" date';
 
-  static defaultProps = {
-    onChangeCallback: () => {},
+  const onFromChange = (_str, date) => {
+    setFrom(date);
   };
 
-  handleChange = (dates, dateStrings) => {
-    const { dispatch, onChangeCallback } = this.props;
+  const getDataOnChange = (fromDate, toDate) => {
     dispatch({
       type: 'global/updateSelectedDateRange',
       payload: {
-        start: dateStrings[0],
-        end: dateStrings[1],
+        start: String(yyyyMMddFormat(fromDate)),
+        end: String(yyyyMMddFormat(toDate)),
       },
-    }).then(() => {
-      onChangeCallback();
     });
   };
 
-  // Since we have no data before or after a certain
-  // time range, we need to refrain user from selecting
-  // such dates in the date picker.
-  disabledDate = current => {
-    const { indices } = this.props;
-    if (indices.length === 0) {
-      return false;
-    }
-    if (current.isBefore(moment(indices[indices.length - 1]).startOf('month'))) {
-      return true;
+  const onToChange = (_str, date) => {
+    if (isValidDate(date)) {
+      getDataOnChange(from, date);
     }
-    if (current.isAfter(moment().endOf('day'))) {
-      return true;
-    }
-    return false;
   };
 
-  render() {
-    const { selectedDateRange, style } = this.props;
-
-    return (
-      <RangePicker
-        separator="to"
-        style={style}
-        onChange={this.handleChange}
-        value={[
-          selectedDateRange.start ? moment(selectedDateRange.start) : moment().subtract(7, 'day'),
-          selectedDateRange.end ? moment(selectedDateRange.end) : moment(),
-        ]}
-        disabledDate={this.disabledDate}
-        size="default"
-        ranges={{
-          Today: [moment(), moment()],
-          'Last week': [moment().subtract(7, 'day'), moment()],
-          'Last month': [
-            moment()
-              .subtract(1, 'month')
-              .startOf('month'),
-            moment().startOf('month'),
-          ],
-        }}
-      />
-    );
-  }
-}
+  return (
+    <>
+      <Split style={{ marginBottom: '15px' }}>
+        <SplitItem>
+          <DatePicker onChange={onFromChange} aria-label="Start date" placeholder="YYYY-MM-DD" />
+        </SplitItem>
+        <SplitItem style={{ padding: '6px 12px 0 12px' }}>to</SplitItem>
+        <SplitItem>
+          <DatePicker
+            onChange={onToChange}
+            isDisabled={!isValidDate(from)}
+            rangeStart={from}
+            validators={[toValidator]}
+            aria-label="End date"
+            placeholder="YYYY-MM-DD"
+          />
+        </SplitItem>
+        <SplitItem style={{ marginLeft: '8px' }}>
+          <Button onClick={() => onChangeCallback()}>Filter</Button>
+        </SplitItem>
+      </Split>
+    </>
+  );
+};
 
-export default AntdDatePicker;
+export default connect()(PFDatePicker);

src/components/DatePicker/index.less

@@ -120,6 +120,7 @@ describe('controller page component', () => {
   });
 
   test('should sort last modified column chronologically ascending', async () => {
+    await page.reload({ waitUntil: ['networkidle0', 'domcontentloaded'] });
     await page.waitForSelector('table > thead > tr > th:nth-child(2) > div:nth-child(1) > span');
     await page.click('table > thead > tr > th:nth-child(2) > div:nth-child(1) > span');
     await page.waitForSelector('table > tbody > tr:nth-child(1) > td:nth-child(1) > span');
@@ -133,6 +134,9 @@ describe('controller page component', () => {
   });
 
   test('should sort last modified column chronologically descending', async () => {
+    await page.reload({ waitUntil: ['networkidle0', 'domcontentloaded'] });
+    await page.waitForSelector('table > thead > tr > th:nth-child(2) > div:nth-child(1) > span');
+    await page.click('table > thead > tr > th:nth-child(2) > div:nth-child(1) > span');
     await page.waitForSelector('table > thead > tr > th:nth-child(2) > div:nth-child(1) > span');
     await page.click('table > thead > tr > th:nth-child(2) > div:nth-child(1) > span');
     await page.waitForSelector('table > tbody > tr:nth-child(1) > td:nth-child(1) > span');
@@ -218,16 +222,27 @@ describe('controller page component', () => {
   });
 
   test('should display the date picker component on click', async () => {
-    await page.waitForSelector('article > div > span > span > input:nth-child(1)');
-    await page.click('article > div > span > span > input:nth-child(1)');
+    await page.waitForSelector(
+      '.pf-l-split__item:nth-child(1) > .pf-c-date-picker > .pf-c-date-picker__input > .pf-c-input-group > .pf-c-button > svg > path'
+    );
+    await page.click(
+      '.pf-l-split__item:nth-child(1) > .pf-c-date-picker > .pf-c-date-picker__input > .pf-c-input-group > .pf-c-button > svg > path'
+    );
   });
 
   test('should change the selected dates after picking them from the calendar', async () => {
     await page.waitForSelector(
-      'div.ant-calendar-footer.ant-calendar-range-bottom > div > div > span:nth-child(2)'
+      '.pf-l-split__item:nth-child(1) > .pf-c-date-picker > .pf-c-date-picker__input > .pf-c-input-group > .pf-c-button'
+    );
+    await page.click(
+      '.pf-l-split__item:nth-child(1) > .pf-c-date-picker > .pf-c-date-picker__input > .pf-c-input-group > .pf-c-button'
+    );
+
+    await page.waitForSelector(
+      '.pf-l-split__item:nth-child(3) > .pf-c-date-picker > .pf-c-date-picker__input > .pf-c-input-group > .pf-c-button > svg'
     );
     await page.click(
-      'div.ant-calendar-footer.ant-calendar-range-bottom > div > div > span:nth-child(2)'
+      '.pf-l-split__item:nth-child(3) > .pf-c-date-picker > .pf-c-date-picker__input > .pf-c-input-group > .pf-c-button > svg'
     );
   });
 });

src/e2e/controllers.e2e.js

@@ -14,7 +14,7 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faStar } from '@fortawesome/free-solid-svg-icons';
 
-import AntdDatePicker from '@/components/DatePicker';
+import PFDatePicker from '@/components/DatePicker';
 import Table from '@/components/Table';
 import { getDiffDate } from '@/utils/moment_constants';
 
@@ -24,8 +24,7 @@ import { getDiffDate } from '@/utils/moment_constants';
   selectedDateRange: global.selectedDateRange,
   favoriteControllers: user.favoriteControllers,
   username: auth.username,
-  loadingControllers:
-    loading.effects['dashboard/fetchControllers'] || loading.effects['datastore/fetchMonthIndices'],
+  loadingControllers: loading.effects['datastore/fetchMonthIndices'],
 }))
 class Controllers extends Component {
   constructor(props) {
@@ -205,7 +204,7 @@ class Controllers extends Component {
               />
             ) : (
               <CardBody>
-                <AntdDatePicker
+                <PFDatePicker
                   style={{ width: 400, marginBottom: 16 }}
                   onChangeCallback={this.fetchControllers}
                 />