Refactor room edit modal #4408

plourenco · 2020-04-15T15:55:10Z

Update the room edit modal to a tabbed layout. Also refactor the form
into multiple sub-components from a single object.

Under heavy development and refactoring with a couple of TODOs:

Prevent the errors from showing when switching tabs (possibly with a form reset that keeps dirty)
Handle submit errors by showing the affected tab
Handle validation errors ~~by showing the affected tab, or prevent switching if any error is triggered~~
This may include moving the validation into final-form.

indico/modules/rb/client/js/common/rooms/RoomEditNotifications.jsx

indico/modules/rb/client/js/common/rooms/DailyAvailability.jsx

indico/modules/rb/client/js/common/rooms/RoomEditDetails.jsx

indico/modules/rb/client/js/common/rooms/RoomEditModal.jsx

ThiefMaster · 2020-04-15T18:31:19Z

indico/modules/rb/client/js/common/rooms/RoomEditModal.jsx

+          </FormSpy>
+          <FormSpy subscription={{submitFailed: true}}>


I'd use a single FormSpy that subscribes to both submitSucceeded and submitFailed.

In principle you can probably avoid using FormSpy altogether and just add it to the global subscription in the FinalForm and then get these two values from the fprops.

I've had both approaches, ended up with this because using two FormSpy's will result in an extra empty <> to hold both Message components (unless we merge them and use conditionals).
Adding it as a global subscription would be perfect, but wouldn't that make the whole form re-render when we only need it in a small part?

indico/modules/rb/client/js/common/rooms/RoomEditModal.module.scss

indico/modules/rb/client/js/common/rooms/RoomEditModal.jsx

indico/modules/rb/client/js/common/rooms/edit/RoomEditOptions.jsx

indico/web/client/js/react/forms/validators.js

ParthS007

@plourenco I have tested the edit modal and observed these 2 things:

When we upload a picture and click on save (button just below picture), It sends a POST and GET to show the image. After that, when we delete the picture just after that, it sends a DELETE and then GET to get the image with the same query string when we saved the image which gives a 404 on network tab. Is it supposed to work that way?

Now, we have validation error on 3 fields continuously, I can't select the Building field. Maybe the position of the tooltip can be changed?

ParthS007

why export default is not written with the function itself as there is only one function in most of the files?

indico/modules/rb/client/js/common/rooms/RoomEditModal.jsx

panagiotappl

Thanks for the PR! This task has been around for a while and it's a lot of messy work that needed to be improved!

I tested it locally and seems to run very smoothly! Along with the comment I mentioned yesterday in our MM channel about the existing photograph not showing the edit dialoge, I left a couple of smaller comments as well!

indico/modules/rb/client/js/common/rooms/RoomEditModal.jsx

indico/modules/rb/client/js/common/rooms/RoomEditModal.module.scss

indico/modules/rb/client/js/common/rooms/edit/RoomEditLocation.jsx

indico/modules/rb/client/js/common/rooms/RoomEditModal.jsx

indico/modules/rb/client/js/common/rooms/edit/RoomEditLocation.jsx

indico/modules/rb/client/js/common/rooms/edit/RoomEditOptions.jsx

plourenco · 2020-04-22T11:26:23Z

why export default is not written with the function itself as there is only one function in most of the files?

I think this was a personal preference. But I'm changing the style since the latter is more straightforward.

plourenco · 2020-04-22T11:32:47Z

@plourenco I have tested the edit modal and observed these 2 things:

When we upload a picture and click on save (button just below picture), It sends a POST and GET to show the image. After that, when we delete the picture just after that, it sends a DELETE and then GET to get the image with the same query string when we saved the image which gives a 404 on network tab. Is it supposed to work that way?

Now, we have validation error on 3 fields continuously, I can't select the Building field. Maybe the position of the tooltip can be changed?

Completely not expected. It was the simple order of setState updates in the async call that caused the files to be set to null before the preview flag was false.
That was actually a big problem, probably affecting other fields. Nice catch!

It seems like we are using open together with trigger, however, the first one is preventing the latter.
Ideally, we don't need the Popups to be persistent, we only need to show them if there is an error and you actually want to find more information and click or hover on the input. (This is what the trigger controls).

Having the open set to showErrorPopup means it will either always stay closed if there is no error (expected) or always stay open if there is an error (not expected, the trigger should control this).

So what I did was not setting the open prop if there is an error.

open={showErrorPopup && undefined}

indico/modules/rb/client/js/common/rooms/RoomDetailsModal.jsx

indico/web/client/js/react/forms/fields.jsx

ParthS007

LGTM

indico/modules/rb/client/js/common/rooms/edit/RoomEditOptions.jsx

indico/modules/rb/client/js/common/rooms/RoomDetailsModal.jsx

indico/modules/rb/client/js/common/rooms/RoomEditModal.jsx

ThiefMaster · 2020-04-28T08:06:28Z

indico/modules/rb/client/js/common/rooms/RoomEditModal.jsx

@@ -7,952 +7,330 @@



Shouldn't this file also go inside the edit/ subdir?

I'm not sure, what do you think?
Since this is a core file, connected to the RoomEditDetails for me it made more sense to highlight it and move to the rooms.

hm you could always re-export it from edit/index.js so you can import RoomEditModal from './edit'; which I think is clearer (and that way anything for editing is in one place)

I'm not sure if that is a better solution since the only thing I am importing and exporting is RoomEditModal itself, it is an unnecessary barrel. Nonetheless, I moved it into the edit.

ThiefMaster · 2020-04-28T08:30:33Z

indico/modules/rb/client/js/common/rooms/RoomEditModal.jsx

+          <FormSpy subscription={{submitSucceeded: true}}>
+            {({submitSucceeded}) => (
+              <Button onClick={onClose}>
+                {submitSucceeded ? <Translate>Close</Translate> : <Translate>Cancel</Translate>}


Not sure if that does what you intend: The old submitState was reset as soon as something changed in the form (so it went back from Close to Cancel if you started editing after saving) - I don't think this happens with submitSucceeded.

Yes, the only difference I saw was not resetting after a successful submission.
However, do you think it is worth changing this to the internal state (another re-render) just because of a button change after the first submit?
It could also seem reasonable for the button to say Close if you already saved previously.

indico/modules/rb/client/js/common/rooms/edit/RoomEditOptions.jsx

mic4ael · 2020-05-05T07:35:31Z

Really great job! I am just thinking about one thing. Right now, when you change between tabs the height of the modal changes according to the tab's content. Wouldn't it be nicer if we could have (if possible) fixed height and prevent those changes?

mic4ael · 2020-05-05T07:38:27Z

Another thing that I just noticed. Not sure if we haven't noticed it so far, but when one uploads a new room photo, it is possible to upload for example a pdf. Backend of course will reject it, but as far as I know Dropzone also allows to define a list of allowed mimetypes.

plourenco · 2020-05-06T15:09:07Z

Right now, when you change between tabs the height of the modal changes according to the tab's content. Wouldn't it be nicer if we could have (if possible) fixed height and prevent those changes?

I agree, it is annoying. Even though the modal is already top-aligned, I'm not sure it is possible to prevent it from stretching vertically besides adding a fixed height. We were previously using a scrollable modal, but I don't like that approach.

but as far as I know Dropzone also allows to define a list of allowed mimetypes.

This is a great suggestion, we can prevent this.

indico/modules/rb/client/js/common/rooms/edit/RoomEditOptions.jsx

indico/modules/rb/client/js/common/rooms/edit/RoomEditModal.jsx

ThiefMaster · 2020-05-12T23:38:54Z

indico/modules/rb/client/js/common/rooms/edit/RoomEditModal.jsx

+  roomId: PropTypes.number,
+  locationId: PropTypes.number,
+  onClose: PropTypes.func.isRequired,
+  afterCreation: PropTypes.func,


Isn't this a bool?

Update the room edit modal to a tabbed layout. Also refactor the form into multiple sub-components from a single object.

Create an error per tab logic that will highlight the corresponding section. Move the components part of the edit modal into an edit folder.

Form will now handle validation at field level. Also, input names were changed to snake case.

Also adds missing validation to location and removes default null fields.

Also removed the withKeyAttribute method and minor refactored validators.

Replace the hideErrorPopup prop by the native semantic-ui trigger, that shows or disables depending on the focus/hover state. Create a field dependent validation for latitude and longitude.

Also, move the coordinates validation to the form level.

Also apply minor refactorings in the same component.

also reorder some imports

Even if they aren't submit errors. Also don't show the indicator for the currently-active tab.

Also adds missing validation and moves the form rendering outside of a function wrapper.

Caused by final-form/react-final-form-arrays#134

plourenco commented Apr 15, 2020

View reviewed changes

indico/modules/rb/client/js/common/rooms/RoomEditNotifications.jsx Outdated Show resolved Hide resolved

ThiefMaster reviewed Apr 15, 2020

View reviewed changes

plourenco commented Apr 21, 2020

View reviewed changes

indico/modules/rb/client/js/common/rooms/edit/RoomEditOptions.jsx Outdated Show resolved Hide resolved

ThiefMaster reviewed Apr 21, 2020

View reviewed changes

indico/web/client/js/react/forms/validators.js Outdated Show resolved Hide resolved

plourenco marked this pull request as ready for review April 21, 2020 08:58

plourenco requested review from panagiotappl and ParthS007 April 21, 2020 09:15

ParthS007 reviewed Apr 22, 2020

View reviewed changes

indico/modules/rb/client/js/common/rooms/RoomEditModal.jsx Outdated Show resolved Hide resolved

panagiotappl reviewed Apr 22, 2020

View reviewed changes

indico/modules/rb/client/js/common/rooms/RoomEditModal.jsx Outdated Show resolved Hide resolved

indico/modules/rb/client/js/common/rooms/RoomEditModal.jsx Outdated Show resolved Hide resolved

ThiefMaster reviewed Apr 22, 2020

View reviewed changes

mic4ael reviewed Apr 27, 2020

View reviewed changes

indico/modules/rb/client/js/common/rooms/RoomDetailsModal.jsx Outdated Show resolved Hide resolved

indico/web/client/js/react/forms/fields.jsx Outdated Show resolved Hide resolved

ParthS007 approved these changes Apr 27, 2020

View reviewed changes

mic4ael reviewed Apr 27, 2020

View reviewed changes

indico/modules/rb/client/js/common/rooms/edit/RoomEditOptions.jsx Show resolved Hide resolved

mic4ael reviewed Apr 27, 2020

View reviewed changes

indico/modules/rb/client/js/common/rooms/edit/RoomEditOptions.jsx Outdated Show resolved Hide resolved

ThiefMaster reviewed Apr 28, 2020

View reviewed changes

plourenco self-assigned this Apr 28, 2020

ThiefMaster force-pushed the tabbed-room-edit-modal branch from 272a7b0 to 94e873f Compare May 4, 2020 07:23

ThiefMaster approved these changes May 4, 2020

View reviewed changes

ThiefMaster mentioned this pull request May 4, 2020

New room edit modal: restore back old success msg behavior #4435

Closed

mic4ael approved these changes May 5, 2020

View reviewed changes

plourenco mentioned this pull request May 6, 2020

Add user profile picture #4431

Merged

plourenco force-pushed the tabbed-room-edit-modal branch 2 times, most recently from ecf75ca to a8e9fb9 Compare May 11, 2020 11:21

panagiotappl approved these changes May 12, 2020

View reviewed changes

mic4ael approved these changes May 12, 2020

View reviewed changes

indico/modules/rb/client/js/common/rooms/edit/RoomEditOptions.jsx Show resolved Hide resolved

ThiefMaster reviewed May 12, 2020

View reviewed changes

indico/modules/rb/client/js/common/rooms/edit/RoomEditModal.jsx Outdated Show resolved Hide resolved

indico/modules/rb/client/js/common/rooms/edit/RoomEditModal.jsx Outdated Show resolved Hide resolved

ThiefMaster reviewed May 12, 2020

View reviewed changes

plourenco and others added 15 commits May 13, 2020 13:18

Refactor room edit modal

0e2b6ed

Update the room edit modal to a tabbed layout. Also refactor the form into multiple sub-components from a single object.

Enhance submit error handling

c641337

Create an error per tab logic that will highlight the corresponding section. Move the components part of the edit modal into an edit folder.

Enhance validation error handling

85c8c11

Form will now handle validation at field level. Also, input names were changed to snake case.

Update the component to expect null values

6f2f798

Also adds missing validation to location and removes default null fields.

Fixed a bug causing the rooms to never have a photo

e4d0502

Also removed the withKeyAttribute method and minor refactored validators.

Refactored the room edit form components

fe0c7b9

Replace the hideErrorPopup prop by the native semantic-ui trigger, that shows or disables depending on the focus/hover state. Create a field dependent validation for latitude and longitude.

Display the room details and edit modal individually

e7e2320

Also, move the coordinates validation to the form level.

Hide the custom attributes if none were defined globally

11d06e0

Move the RoomEditModal to an edit sub-directory

507b449

Also apply minor refactorings in the same component.

Remove require flag from optional fields

e7e173c

Improve error message

a73f453

also reorder some imports

Show tab error indicator for all validation errors

4d503d7

Even if they aren't submit errors. Also don't show the indicator for the currently-active tab.

Add missing min/max attrs to number fields

abdb511

Move booking adv time and duration to the options

29a9638

Restrict Dropzone mimetypes to images and enable dragging

ec8e1cb

ThiefMaster force-pushed the tabbed-room-edit-modal branch from 2d3b43e to 8711941 Compare May 13, 2020 12:36

plourenco and others added 2 commits May 13, 2020 14:43

Update the prop types

3b7001c

Also adds missing validation and moves the form rendering outside of a function wrapper.

Fix endless render loop when adding new attribute

e79fcd8

Caused by final-form/react-final-form-arrays#134

ThiefMaster force-pushed the tabbed-room-edit-modal branch from 8711941 to e79fcd8 Compare May 13, 2020 12:44

ThiefMaster merged commit e79fcd8 into indico:master May 13, 2020

ThiefMaster deleted the tabbed-room-edit-modal branch May 13, 2020 13:04

This was referenced May 15, 2020

Remove circular dependencies from the room booking module 🎉 #4456

Merged

Implement a RoomEditModal test for checking the tab fields #4461

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor room edit modal #4408

Refactor room edit modal #4408

plourenco commented Apr 15, 2020 •

edited

ThiefMaster Apr 15, 2020

plourenco Apr 16, 2020

ParthS007 left a comment

ParthS007 left a comment

panagiotappl left a comment

plourenco commented Apr 22, 2020

plourenco commented Apr 22, 2020 •

edited

ParthS007 left a comment

ThiefMaster Apr 28, 2020

plourenco Apr 28, 2020

ThiefMaster Apr 28, 2020

plourenco Apr 28, 2020

ThiefMaster Apr 28, 2020

plourenco Apr 28, 2020

mic4ael commented May 5, 2020

mic4ael commented May 5, 2020

plourenco commented May 6, 2020 •

edited

ThiefMaster May 12, 2020

Refactor room edit modal #4408

Refactor room edit modal #4408

Conversation

plourenco commented Apr 15, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ParthS007 left a comment

Choose a reason for hiding this comment

ParthS007 left a comment

Choose a reason for hiding this comment

panagiotappl left a comment

Choose a reason for hiding this comment

plourenco commented Apr 22, 2020

plourenco commented Apr 22, 2020 • edited

ParthS007 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

mic4ael commented May 5, 2020

mic4ael commented May 5, 2020

plourenco commented May 6, 2020 • edited

Choose a reason for hiding this comment

plourenco commented Apr 15, 2020 •

edited

plourenco commented Apr 22, 2020 •

edited

plourenco commented May 6, 2020 •

edited