Migrate Data Sources and Alert Destinations pages to React #3470

gabrieldutra · 2019-02-19T21:04:37Z

Description

Migrate Data Sources and Alert Destinations pages to React

Changes

General

Migrate TypePicker to React
Review TypePicker style

List Pages

Data Sources
Destinations
Improve behavior for empty set

Create Pages

Edit Pages

Data Sources
Destinations

To Do

Routes /data_sources/new & /destinations/new auto-opening the modal
Help using HelpTrigger
Refine Edit forms
Update Cypress tests

Possible Extra

Add edit & delete actions to the cards on List Pages (ref)

Notes

Data Sources and Destinations are very similar pages, however I'm not sure how much logic I should share. They are sharing TypePicker (renamed to CardsList) and DynamicForm, but to me it doesn't feel that they should share much more. I'll keep the idea of refactoring parts of it to avoid code duplication anyway.

Preview

Overview

client/app/pages/data-sources/CreateDataSource.jsx

…urces

client/app/components/data-sources/EditDataSourceForm.jsx

client/app/components/TypePicker.jsx

gabrieldutra · 2019-03-13T23:27:56Z

All things considered I favor positioning the "Setup Instructions (?)" at the top right.

Perhaps right-aligned but not aside to the Name label? (I don't see a simple way to put it aside to it, also it makes some sense for it not to be there 😅)

I think the step titles should be either "Select type > Configure > Done" or "Type selection > Configuration > Done".

👍

gabrieldutra · 2019-03-14T23:05:44Z

Thanks, @ranbena, my last concern about this is:

I could not make a better behavior for Data Source long names using Ant Cards (currently height is fixed for 3 lines and overflow is hidden). I'll appreciate if you have ideas for this 😁. The options I have in mind: - use javascript to do some better trick; - use the old visual-card view.

If you've already checked this and actually think it's an acceptable behavior, LMK 😅.

BTW, I had to revert cy.click to cy.wait as it didn't work. If this is really due to animation I think it won't make weird diffing, so it's safe to keep it until a better solution appears. (I've tried to use percy specific CSS with your idea as well)

ranbena · 2019-03-15T08:52:53Z

I'll appreciate if you have ideas for this

Overflow hidden is good enough cause it prevents breakage and long names are probably an edge case (pun intended).
In addition you can add this, which will benefit the majority of our users:

.cards-list .cards-list-item h3 {
 ...
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

BTW, I had to revert cy.click to cy.wait as it didn't work.

👍

gabrieldutra · 2019-03-15T17:32:24Z

Thanks a lot @ranbena! 😁

I actually had to add /* autoprefixer: off */ for it to work (the box-orient was being removed even thought it's necessary to do the line-clamp). It improved the experience anyway.

If there's no further comments, this is ready to go when convenient. 👍

ranbena · 2019-03-15T18:27:14Z

Go ahead and merge whenever you're ready.

gabrieldutra · 2019-03-25T21:59:36Z

Conflicts resolved, gonna merge this big guy tomorrow 🚀

arikfr

When saving a data source it should open the data source page, so the user can do a Test Connection.

ranbena · 2019-03-27T16:32:00Z

When saving a data source it should open the data source page, so the user can do a Test Connection.

But, if possible, without the autofocusing in that specific scenario, cause it's confusing ("I just created this, why should I need to edit it??").

ranbena · 2019-03-27T16:37:58Z

Just a ux thought I want to share (out of scope):

gabrieldutra · 2019-03-27T17:43:29Z

When saving a data source it should open the data source page, so the user can do a Test Connection.

👍

But, if possible, without the autofocusing in that specific scenario, cause it's confusing ("I just created this, why should I need to edit it??").

🤔, perhaps disable the autofocus for Edit Pages? It makes a lot of sense when it's a form for a new resource, but when editing I don't think it's that relevant (as edit pages also perform as a view page in this case)...

gabrieldutra · 2019-03-27T23:55:50Z

@arikfr & @ranbena,

I've updated it to redirect to the created resource. (Both Data sources and Alert destinations)

As for the autofocus, used to set the first input with it DynamicForm by default, I removed this and turned it into a field property. With this, I also removed autofocus for User Edit.

Please check my last commits 🙂

gabrieldutra · 2019-03-28T00:04:45Z

Just a ux thought I want to share (out of scope):

I've been thinking about it and I actually don't like that much having an action button in a Notification, but I think an option would be to automatically run the connection test when creating a data source, then lead to 2 scenarios:

Connection success: Inform the user with a notification and save it;
Connection failure: Show the error with a dialog and offer to either Save it anyway or go back to edit setting data;

This could be in the Creation Dialog as a new step as well.

ranbena · 2019-03-28T03:51:40Z

Connection success: Inform the user with a notification and save it;

Connection failure: Show the error with a dialog and offer to either Save it anyway or go back to edit setting data;

YES

This could be in the Creation Dialog as a new step as well.

YESSSS

@gabrieldutra plz open a forum topic and I'll submit a design.

arikfr · 2019-03-28T08:05:50Z

Good to go.

I have to admit that I'm not 100% sold on the new dialog interface: it feels cramped and makes the different types less discoverable/visible. Let's move on, but keep this in mind as something to revisit.

…#3470) * Migrate TypePicker to React * Migrate DataSources and Destinations List * Fixes to DestinationsList * Add CreateDataSource (testing with Steps) * Render the form after type selection * Add HELP_LINKS to CreateDataSource * Add Done behavior * Add scrollToTop to CreateDataSource * TypePicker styling adjusts * Add CreateDestination * Update resouce gets to componentDidMount * Create EditForm components * Migrate Edit pages * Remove angular logic from DynamicForm * Add actions to EditPages * TypePicker title style adjustments * Add Empty and Loading state * UX improvements * Review changes * Styling updates on TypePicker, forms background fix * Add blank line removed by mistaken * Reorganize TypePicker * Hide Search on List Pages * Fix spacing in Forms * Update Create Data Source and Destination to be a Dialog * Remove max-height from the form * Fix DynamicForm import in CreateUserDialog * Route /new to open CreateSourceDialog * Add HelpTrigger + refine styling and Edit Pages * Remove help links from data source resource * Update Cypress specs * TypePicker -> CardsList * Remove old TypePicker styling and change CardsList styling to less * Test if Percy shows Dialogs * Personal review cleanup * CR * Remove unnecessary query on dialog success * Handle resource errors in Edit Pages * Add CreateDestination policy * Add placeholder and separator to the Name field * Use cy.click instead of cy.wait * Revert "Use cy.click instead of cy.wait" (Didn't work) This reverts commit 77285d9. * Align help trigger on the right and rename Steps * Refine behavior for long names * Update toastr calls to use notification instead * Redirect to target after creation * Remove autoFocus on DynamicForm for Edit Pages * Add eslint-disable for cy.wait

Migrate TypePicker to React

2d21e2f

gabrieldutra added Frontend Frontend: React Frontend codebase migration to React labels Feb 19, 2019

gabrieldutra self-assigned this Feb 19, 2019

ghost added the in progress label Feb 19, 2019

pr-triage bot added the PR: unreviewed label Feb 19, 2019

gabrieldutra added 7 commits February 20, 2019 09:07

Migrate DataSources and Destinations List

9aeea93

Fixes to DestinationsList

b1e607b

Add CreateDataSource (testing with Steps)

f99d54d

Render the form after type selection

5c1c31e

Add HELP_LINKS to CreateDataSource

6b60e74

Add Done behavior

f51d2c3

Add scrollToTop to CreateDataSource

2bfb00b

kravets-levko reviewed Feb 21, 2019

View reviewed changes

client/app/pages/data-sources/CreateDataSource.jsx Outdated Show resolved Hide resolved

gabrieldutra added 11 commits February 21, 2019 16:21

TypePicker styling adjusts

5f2d944

Add CreateDestination

ced7c92

Update resouce gets to componentDidMount

e937b93

Create EditForm components

2758ea8

Migrate Edit pages

d4425d9

Remove angular logic from DynamicForm

39d2630

Merge remote-tracking branch 'master' into react-destinations-data-so…

f9fd818

…urces

Add actions to EditPages

5604138

TypePicker title style adjustments

a2501ba

Add Empty and Loading state

b5cf6b9

UX improvements

2c7de22

kravets-levko reviewed Feb 24, 2019

View reviewed changes

client/app/components/data-sources/EditDataSourceForm.jsx Outdated Show resolved Hide resolved

kravets-levko reviewed Feb 24, 2019

View reviewed changes

client/app/components/TypePicker.jsx Outdated Show resolved Hide resolved

kravets-levko reviewed Feb 24, 2019

View reviewed changes

client/app/components/TypePicker.jsx Outdated Show resolved Hide resolved

gabrieldutra added 2 commits February 24, 2019 12:36

Review changes

c09ac8a

Styling updates on TypePicker, forms background fix

8897569

Align help trigger on the right and rename Steps

5873fed

ranbena approved these changes Mar 14, 2019

View reviewed changes

Merge branch 'master' into react-destinations-data-sources

a9f4b24

gabrieldutra added 2 commits March 15, 2019 13:28

Merge branch 'master' into react-destinations-data-sources

10e0d25

Refine behavior for long names

3130929

gabrieldutra added 2 commits March 25, 2019 18:28

Merge branch 'master' into react-destinations-data-sources

ae20478

Update toastr calls to use notification instead

02d647f

arikfr requested changes Mar 27, 2019

View reviewed changes

gabrieldutra added 4 commits March 27, 2019 17:54

Merge branch 'master' into react-destinations-data-sources

21efba7

Redirect to target after creation

5810a9e

Remove autoFocus on DynamicForm for Edit Pages

cbaac32

Add eslint-disable for cy.wait

0334b92

arikfr approved these changes Mar 28, 2019

View reviewed changes

arikfr merged commit f9cc230 into getredash:master Mar 28, 2019

arikfr removed the in progress label Mar 28, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrate Data Sources and Alert Destinations pages to React #3470

Migrate Data Sources and Alert Destinations pages to React #3470

gabrieldutra commented Feb 19, 2019 •

edited

Loading

gabrieldutra commented Mar 13, 2019

gabrieldutra commented Mar 14, 2019

ranbena commented Mar 15, 2019

gabrieldutra commented Mar 15, 2019

ranbena commented Mar 15, 2019

gabrieldutra commented Mar 25, 2019

arikfr left a comment

ranbena commented Mar 27, 2019

ranbena commented Mar 27, 2019

gabrieldutra commented Mar 27, 2019

gabrieldutra commented Mar 27, 2019 •

edited

Loading

gabrieldutra commented Mar 28, 2019

ranbena commented Mar 28, 2019

arikfr commented Mar 28, 2019

Migrate Data Sources and Alert Destinations pages to React #3470

Migrate Data Sources and Alert Destinations pages to React #3470

Conversation

gabrieldutra commented Feb 19, 2019 • edited Loading

Description

Changes

To Do

Notes

Preview

Overview

gabrieldutra commented Mar 13, 2019

gabrieldutra commented Mar 14, 2019

ranbena commented Mar 15, 2019

gabrieldutra commented Mar 15, 2019

ranbena commented Mar 15, 2019

gabrieldutra commented Mar 25, 2019

arikfr left a comment

Choose a reason for hiding this comment

ranbena commented Mar 27, 2019

ranbena commented Mar 27, 2019

gabrieldutra commented Mar 27, 2019

gabrieldutra commented Mar 27, 2019 • edited Loading

gabrieldutra commented Mar 28, 2019

ranbena commented Mar 28, 2019

arikfr commented Mar 28, 2019

gabrieldutra commented Feb 19, 2019 •

edited

Loading

gabrieldutra commented Mar 27, 2019 •

edited

Loading