Upgrade react-day-picker to v7 #2055

skovy · 2018-01-30T05:17:25Z

Fixes #2054

Changes proposed in this pull request:

Upgrade the react-day-picker dependency from version ^5.3.0 to ^7.0.7 and update to accomadate breaking changes in the react-day-picker package highlighted in their CHANGELOG.

Reviewers should focus on:

Type accuracy and breaking changes highlighted in the react-day-picker CHANGELOG.

palantirtech · 2018-01-30T05:17:26Z

Thanks for your interest in palantir/blueprint, @skovy! Before we can accept your pull request, you need to sign our contributor license agreement - just visit https://cla.palantir.com/ and follow the instructions. Once you sign, I'll automatically update this pull request.

skovy · 2018-01-30T05:24:26Z

Getting issues using submodule exports. Not sure the best steps to resolve, because it looks like react-day-picker does not export DayPickerProps

@blueprintjs/datetime: Submodule import paths from this package are disallowed; import from the root instead (no-submodule-imports)
@blueprintjs/datetime:    8 | import * as moment from "moment";
@blueprintjs/datetime:    9 | import * as React from "react";
@blueprintjs/datetime: > 10 | import { DayPickerProps } from "react-day-picker/types/props";

Can I disable the rule for these lines using a disable comment?
Open a PR for react-day-picker to add these to the index export?

adidahiya · 2018-01-30T05:30:06Z

@skovy you can add an exception to this list in the tslint config:

blueprint/packages/tslint-config/index.js

Line 54 in 8f05618

"@blueprintjs/test-commons/bootstrap",

add "react-day-picker/types" to the array.

giladgray · 2018-01-31T00:06:13Z

packages/datetime/src/dateInput.tsx

@@ -7,7 +7,7 @@
 import * as classNames from "classnames";
 import * as moment from "moment";
 import * as React from "react";
-import * as ReactDayPicker from "react-day-picker";
+import { DayPickerProps } from "react-day-picker/types/props";


is it possible to import this without a submodule? like from react-day-picker itself like it used to be? (i haven't poked at the actual package yet)

on further examination, it seems not. index.d.ts only exports DayPicker 👍

in this case, @skovy please add the tslint-config exception as suggested by @adidahiya above.

👍 yea, I was looking into that as well and was disappointed only DayPicker was exported.

Filed: gpbl/react-day-picker#617

giladgray · 2018-01-31T00:08:40Z

packages/datetime/src/dateInput.tsx

@@ -7,7 +7,7 @@
 import * as classNames from "classnames";
 import * as moment from "moment";
 import * as React from "react";
-import * as ReactDayPicker from "react-day-picker";
+import { DayPickerProps } from "react-day-picker/types/props";


in this case, @skovy please add the tslint-config exception as suggested by @adidahiya above.

giladgray · 2018-01-31T01:51:42Z

@skovy nice! tests failures seem to be relevant -- DayPicker-related. check 'em out 🔨

skovy · 2018-01-31T02:01:57Z

@giladgray yea noticed that. I can dig into that, definitely seems related to the breaking changes in the CHANGELOG, just trying to understand the specs, abstractions and how to debug 😋

Any useful docs in the repo for good debugging techniques?

giladgray · 2018-01-31T02:55:02Z

yarn test:karma:debug in the datetime package will run the tests in watch mode.

And yarn dev:datetime in the Root directory will launch the dev server of the docs site which reloads on changes.

Happy hunting!

…ickerProps

skovy · 2018-01-31T04:59:55Z

packages/datetime/src/dateRangePicker.tsx

            locale,
            localeUtils,
            modifiers,
+            showOutsideDays: true,


Curious if this prop should be configurable given it's always hidden since this PR https://github.com/palantir/blueprint/pull/586/files#r98813760?

We can leave this as is for now. Seems like changing it here would be out of scope for this PR.

skovy · 2018-01-31T05:00:40Z

packages/datetime/src/_daterangepicker.scss

@@ -14,6 +14,10 @@
    margin-right: $pt-grid-size;
  }

+  .DayPicker-NavButton--interactionDisabled {
+    display: none;
+  }


Breaking change in v6.0.0. The element is now always rendered, but with this CSS class conditionally: https://github.com/gpbl/react-day-picker/blob/master/CHANGELOG.md#v600-2017-06-16

skovy · 2018-01-31T05:01:53Z

packages/datetime/test/dateRangePickerTests.tsx

-            assert.lengthOf(document.getElementsByClassName("DayPicker-NavButton--next"), 0);
+            // react-day-picker still renders the navigation but with a interaction disabled class
+            assert.lengthOf(document.getElementsByClassName("DayPicker-NavButton--prev"), 1);
+            assert.lengthOf(document.getElementsByClassName("DayPicker-NavButton--next"), 1);


Not sure if there is a better way to actually assert visibility of these elements, given they are now always rendered.

Do we need to reach into the style of each element to check the visibility?

what about looking for that conditional class?

or, if they're always there, just remove these assertions. no need to assert on external library behavior. case in point: when that behavior changes and breaks your tests (but our code is still fine).

cmslewis

Looks okay to me! Left a couple requests, but nothing blocking. nit: I mildly prefer keeping the namespacing for the ReactDayPicker types if possible, but I'm okay either way.

I filed an issue in the react-day-picker requesting that all types be exported properly: gpbl/react-day-picker#617.

cmslewis · 2018-01-31T18:34:17Z

packages/datetime/src/dateInput.tsx

@@ -7,7 +7,7 @@
 import * as classNames from "classnames";
 import * as moment from "moment";
 import * as React from "react";
-import * as ReactDayPicker from "react-day-picker";
+import { DayPickerProps } from "react-day-picker/types/props";


Filed: gpbl/react-day-picker#617

cmslewis · 2018-01-31T18:36:44Z

packages/datetime/src/datePicker.tsx

@@ -7,7 +7,9 @@
 import { AbstractPureComponent, Button, IProps, Utils } from "@blueprintjs/core";
 import * as classNames from "classnames";
 import * as React from "react";
-import * as ReactDayPicker from "react-day-picker";
+import { default as ReactDayPicker } from "react-day-picker";


Whoa, funky syntax. Haven't seen this before, but it's interesting. If it's equivalent, should we just do:

import ReactDayPicker from "react-day-picker";

?

Source: https://stackoverflow.com/a/31092287/5199574

It would have to be import DayPicker from "react-day-picker";, since the default export is DayPicker (not ReactDayPicker). However, that conflicts with the actual DayPicker component name. So used this approach to rename DayPicker to ReactDayPicker. Open to other alternatives, but as far as I know, the above recommendation won't work?

It would have to be import DayPicker from "react-day-picker";, since the default export is DayPicker (not ReactDayPicker)

Are you sure about this? default exports are (by design) anonymous, so you can import them with whatever name you want.

@adidahiya will that work with the defined types though?

https://github.com/gpbl/react-day-picker/blob/3156e3de1664caa15cf12cfd0fdd96350874e8c5/types/index.d.ts#L4

it will. default exports don't have a name of their own. you can name them whatever you want with the import DefaultName from "package" syntax.

Wow. I swear I tried that 🤔 TIL. Appreciate the feedback! 😊

cmslewis · 2018-01-31T18:42:53Z

packages/datetime/src/dateRangePicker.tsx

            locale,
            localeUtils,
            modifiers,
+            showOutsideDays: true,


We can leave this as is for now. Seems like changing it here would be out of scope for this PR.

cmslewis · 2018-01-31T18:45:05Z

packages/datetime/test/dateRangePickerTests.tsx

-            assert.lengthOf(document.getElementsByClassName("DayPicker-NavButton--next"), 0);
+            // react-day-picker still renders the navigation but with a interaction disabled class
+            assert.lengthOf(document.getElementsByClassName("DayPicker-NavButton--prev"), 1);
+            assert.lengthOf(document.getElementsByClassName("DayPicker-NavButton--next"), 1);


Do we need to reach into the style of each element to check the visibility?

giladgray · 2018-01-31T22:13:09Z

@skovy a few small comments still need to be addressed (esp. the default import thing), then this will be good to go!

skovy · 2018-02-01T02:08:56Z

@giladgray appreciate all the feedback. Updated the default imports and removed some of the redundant assertions in the specs. Please take another look 👍

skovy · 2018-02-01T15:44:50Z

Not sure if this is related or a flake?

FAILED TESTS:
    ✖ "after each" hook
      PhantomJS 2.1.1 (Linux 0.0.0)
    TypeError: undefined is not an object (evaluating 'wrapper.assertIsOpen') (test/index.ts:102819)

giladgray · 2018-02-01T19:53:40Z

@skovy when was the last time you merged develop into this branch? (our latest develop, not your fork's.) done a lot of work this week to address failures like these.

giladgray

confirmed that tests are fixed after merging develop locally, so I'm just gonna merge this guy.

thank you @skovy for a PR well done! 👏

skovy · 2018-02-04T16:13:31Z

Hey all, curious when the next beta will be released containing this PR?

giladgray · 2018-02-04T19:01:37Z

@skovy tomorrow!

skovy added 3 commits January 29, 2018 20:26

Upgrade react-day-picker to v7

e0efad7

Fix all types and imports for react-day-picker

310d495

Fix types, imports and props in tests ✅

688e11d

skovy mentioned this pull request Jan 30, 2018

React 16 and Enzyme 3 migration #1885

Merged

adidahiya added this to the 2.0.0 milestone Jan 30, 2018

giladgray requested review from giladgray and cmslewis January 30, 2018 18:09

giladgray reviewed Jan 31, 2018

View reviewed changes

giladgray suggested changes Jan 31, 2018

View reviewed changes

Whitelist submodule imports and fix linting errors

289f029

skovy added 3 commits January 30, 2018 20:33

Fix showOutsideDays spec by moving it above the spread of passed dayP…

bc97619

…ickerProps

Add class to hide arrows on single month and update spec ✅

ff390ad

Fix the spec verifying the previous arrow is hidden

29c438d

skovy commented Jan 31, 2018

View reviewed changes

cmslewis approved these changes Jan 31, 2018

View reviewed changes

Fix default import and remove useless asserts in specs

a84c808

giladgray approved these changes Feb 1, 2018

View reviewed changes

giladgray merged commit dde2d32 into palantir:develop Feb 1, 2018

skovy deleted the upgrade-react-day-picker-v7 branch February 1, 2018 23:11

Upgrade react-day-picker to v7 #2055

Upgrade react-day-picker to v7 #2055

Conversation

skovy commented Jan 30, 2018

Fixes #2054

Changes proposed in this pull request:

Reviewers should focus on:

palantirtech commented Jan 30, 2018

skovy commented Jan 30, 2018 • edited Loading

adidahiya commented Jan 30, 2018

Choose a reason for hiding this comment

giladgray Jan 31, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

giladgray commented Jan 31, 2018

skovy commented Jan 31, 2018

giladgray commented Jan 31, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cmslewis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

giladgray commented Jan 31, 2018

skovy commented Feb 1, 2018

skovy commented Feb 1, 2018

giladgray commented Feb 1, 2018

giladgray left a comment

Choose a reason for hiding this comment

skovy commented Feb 4, 2018

giladgray commented Feb 4, 2018

skovy commented Jan 30, 2018 •

edited

Loading

giladgray Jan 31, 2018 •

edited

Loading