File picker component #50

roblevintennis · 2019-08-10T23:32:38Z

Type of work: bug / component / site / accessibility / other

Deployment URL: https://mavenlink.github.io/design-system/$BRANCH

(Optional for outside contributions) Tracked work in Mavenlink:

Motivation

As we are fleshing out the Custom Forms proof-of-concept, we need an input which can attach a file to a form. While the reusability of this particular component is low, it will serve to bring the project to completion. Perhaps this component might actually be used in Mavenlink designs or perhaps this is a component that should live in the mavenlink-solutions/project-and-task-forms repository.

Related long-term MDS release @ #165775767

Resources: https://sketch.cloud/s/VKakr/a/DDWWg4

Acceptance Criteria

Change log entry

…behind here

…d remove them, etc., but it's still pretty crude at the moment.

… shorthand which we haven't configured and causes errors. So using 9.0.4 for the time being.

… and the native open dialog appears to work better and in a more straight forward way without trying to label click handling too. Turns out label click is still working in local env anyway.

…removal

…e file dialog. In this case do not overwrite the files state with empty

…library/react since RTL is used in bigmaven already and has advantages, especially since the file picker is an uncontrolled component essentially.

roblevintennis · 2019-08-13T20:15:58Z

package.json

    "react-ga": "^2.5.6",
-    "react-styleguidist": "^8.0.6",
+    "react-styleguidist": "9.0.4",
+    "react-test-renderer": "^16.9.0",


Upgraded some of these libraries to be compatible with React Hooks:
enzymejs/enzyme#1938

roblevintennis · 2019-08-13T20:16:32Z

package.json

@@ -64,19 +65,20 @@
    "jest": "^23.6.0",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.5.0",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
+    "react": "^16.9.0",


React Hooks support started in 16.8 and also we might as well keep up (bigmaven is already using hooks for example!)

roblevintennis · 2019-08-13T20:17:55Z

package.json

@@ -48,14 +48,15 @@
    "@babel/polyfill": "^7.4.4",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-react": "^7.0.0",
+    "@testing-library/react": "^9.1.1",


Kent Dodds popular testing framework:
https://testing-library.com/docs/react-testing-library/intro

We're using this in bigmaven already and it's got some things that make it easier to test uncontrolled components too.

….css

…tion which returns a string containing the errors. It will use that to set the display errors. Refactors specs and markdown examples accordingly.

roblevintennis · 2019-08-19T18:32:45Z

Error handling using a validator function prop added. Here's the example:

MLProjCreation

… dialog, or, drop files onto the dropzone"

…sn't open on hitting the <Enter> key).

roblevintennis · 2019-08-20T18:13:44Z

File Picker in Edge after adding some files:

receiveFilesChanged testing that the callback was called with file list:

Validator test. In this case uploading a file > 10mb:

Same checks were done in both Edge and IE11

juanca · 2019-08-20T18:20:51Z

src/components/file-picker/.eslintrc

@@ -0,0 +1,14 @@
+{


I think we can define the overrides in the top-level eslintrc with a files regex.

Done in 68ee789

juanca · 2019-08-20T18:44:30Z

src/components/file-picker/file-picker.jsx

+  };
+
+  const onDragLeave = () => {
+    setHighlight(false);


We are missing setHighlight(true) in this PR.

Fixed in e4404e6

juanca · 2019-08-20T18:53:30Z

src/components/file-picker/file-picker.jsx

+    if (files.length) {
+      return files.map((file) => {
+        return (
+          <section className={styles['file-list-button']} key={file.name}>


Let's convert this list of <section>s into a list of <li>s

Fixed in: 07b8b2f

…f finding rules

… dropzone.

…nested <section> tags

…stom forms env, I was getting errors like: Module not found: Error: Can't resolve '../icon/icon' and it looks like in other places we're supplying extension. So, trying that.

…guring host applications

roblevintennis · 2019-08-21T18:07:27Z

@juanca since you'll be taking this over, hopefully this is some good context...

The following screenshots show 1. validation errors are working for files > 10mb 2. our file list appears properly above the dropzone upon selecting files 2. our callbacks are both working (Both receiveFilesChanged={onFilesChanged} and validator={validateFileSize}, and we properly receive a DOM FileList, etc.

What will need to be done next?

I believe, if I'm understanding correctly, that the code in ProjectAndTaskLoadForm/MLProjCreation.aspx.cs that I've commented out since the UserFileUpload.FileName resource was removed and no longer exists (thus it was causing Errors to leave the reference), is where the actual serialization and uploading of files happened. Somehow, we'll need to figure out how to reproduce that in the new world on form submissions.

Search for // Selected Attachment upload in post to find file mentioned above.

But I think this proves the component works as advertised and can live in the custom forms env successfully.

Here's the latest commit for the Project-and-Task-Forms POC these screenshots refer to.

roblevintennis · 2019-08-21T19:01:55Z

Some notes for posterity on commit: 69af234

I tried to fix following error on the Icon component page:

Error: import or require() statements can be added only by editing a Markdown example file: ../../svgs/icon-caution-fill.svg

Looks like this was a recent issue for styleguidist and so I followed directions on the issue attempting to nuke the lock file and reinstall:
styleguidist/react-styleguidist#1278
webpack/webpack#8656 (comment)

But the error didn't go away.

So, I tried following the other suggestion to add acorn et al as dev dep:
styleguidist/react-styleguidist#1278 (comment)

yarn add --dev acorn acorn-jsx

And that worked and the error went away.

roblevintennis added 2 commits August 9, 2019 16:49

Bump react as hooks weren't supported until 16.8 and we're generally …

a620ed7

…behind here

Initial scaffolding for file picker. It actually does accept files an…

3c67b3c

…d remove them, etc., but it's still pretty crude at the moment.

roblevintennis added the WIP label Aug 10, 2019

roblevintennis self-assigned this Aug 10, 2019

roblevintennis added 16 commits August 12, 2019 10:37

Merge github.com:mavenlink/design-system into file-picker-component

41b7799

Remove needless import

4d2c737

Fix the issue with file open dialog opening twice on a single click

2d60700

Single and multiple file select examples

8e8dd01

Adds single and multi examples

049606a

Cleanup

d29d361

styleguidist 9.0.4 still works. Higher versions use React.Fragment <>…

eed85ae

… shorthand which we haven't configured and causes errors. So using 9.0.4 for the time being.

Removeing label onClick which appears not to be semantic / accessible…

e413e3a

… and the native open dialog appears to work better and in a more straight forward way without trying to label click handling too. Turns out label click is still working in local env anyway.

Adds type sizes

06eae27

Starting to spike on Nathan's design a bit

83b1dda

Looks so much nicer once you get the dashed border on it

73bc6bf

Fix lint issues

10dc2cb

Remove the background and border now that we're using a <button> for …

e695c00

…removal

Deal with case where the user clicks the 'Cancel' button on the nativ…

787c38a

…e file dialog. In this case do not overwrite the files state with empty

Upgrade react-test-renderer / enzyme to support Hooks. Adds @testing-…

c4cbfe1

…library/react since RTL is used in bigmaven already and has advantages, especially since the file picker is an uncontrolled component essentially.

Adds onBeforeFileRemoved prop. Adds initial spec.

9e3e4dc

roblevintennis commented Aug 13, 2019

View reviewed changes

roblevintennis added 7 commits August 13, 2019 14:36

API coverage

ac3b071

Fix lint issues

b03352f

Adds some functional testing too

aa8cd17

Lint fixes

76641bd

Adds the upload and file icons

34842bd

Adds the new neutral palette colors for fills and strokes on icons

f6c4fa6

Adds upload and file icons to the file picker. Fix extra line in icon…

e747109

….css

roblevintennis added 2 commits August 16, 2019 16:23

Cleanup the file picker and fix the props.dropzoneClasses failures

73073ce

Refactors the error handling. useError now will take a validator func…

f630d40

…tion which returns a string containing the errors. It will use that to set the display errors. Refactors specs and markdown examples accordingly.

roblevintennis added 4 commits August 19, 2019 11:34

Indicate in the documentation that you can either use the file picker…

e39ac94

… dialog, or, drop files onto the dropzone"

Prune todo comment

368d50a

Italics are doing weird things in styleguidist

89d8a32

Cross browser solution (fixes Firefox issue where the file dialog doe…

d6a9b18

…sn't open on hitting the <Enter> key).

roblevintennis closed this Aug 20, 2019

roblevintennis reopened this Aug 20, 2019

juanca reviewed Aug 20, 2019

View reviewed changes

roblevintennis added 3 commits August 20, 2019 13:58

Favor using an override directive from top-level .eslintrc for each o…

68ee789

…f finding rules

Fixes issue with no highlight happening when you drag a file over the…

e4404e6

… dropzone.

Use an unordered list for the FileList since it's more semantic then …

07b8b2f

…nested <section> tags

roblevintennis removed the WIP label Aug 20, 2019

roblevintennis and others added 7 commits August 20, 2019 14:14

Fix some lint issues

5e5501b

Include file extensions on imports. Testing in the Visual Studio / cu…

9bc41dd

…stom forms env, I was getting errors like: Module not found: Error: Can't resolve '../icon/icon' and it looks like in other places we're supplying extension. So, trying that.

Ensures we are always explicit about extensions to avoid overly confi…

eb7d938

…guring host applications

Bumping

2fc31d2

Remove unused from cherry picking

abe5880

Fixes another import without extension

87d3b49

Fix typo for svgo

9a80bd8

Fixes an issue with styleguidist per their issue tracker recommendations

69af234

Fix last of lint errors

8786ab7

juanca closed this Feb 5, 2020

juanca deleted the file-picker-component branch October 29, 2020 20:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

File picker component #50

File picker component #50

roblevintennis commented Aug 10, 2019 •

edited

roblevintennis Aug 13, 2019

roblevintennis Aug 13, 2019

roblevintennis Aug 13, 2019

roblevintennis commented Aug 19, 2019 •

edited

roblevintennis commented Aug 20, 2019

juanca Aug 20, 2019

roblevintennis Aug 20, 2019

juanca Aug 20, 2019

roblevintennis Aug 20, 2019

juanca Aug 20, 2019

roblevintennis Aug 20, 2019

roblevintennis commented Aug 21, 2019 •

edited

roblevintennis commented Aug 21, 2019

File picker component #50

File picker component #50

Conversation

roblevintennis commented Aug 10, 2019 • edited

Motivation

Acceptance Criteria

Change log entry

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

roblevintennis commented Aug 19, 2019 • edited

roblevintennis commented Aug 20, 2019

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

roblevintennis commented Aug 21, 2019 • edited

What will need to be done next?

roblevintennis commented Aug 21, 2019

roblevintennis commented Aug 10, 2019 •

edited

roblevintennis commented Aug 19, 2019 •

edited

roblevintennis commented Aug 21, 2019 •

edited