CORE-103: Allow DE metadata dialogs to attach AVUs to other AVUs #394

psarando · 2019-03-07T23:20:45Z

This PR will replace the GXT view for the Edit Metadata dialog with a React view that supports nested metadata:

Note that hovering over the Delete icon in the listing grid will highlight the icon a red color:

After the dialog title are the View in Template, Save to File, ? (Help), and X (Close) icons:

Selecting the ? (Help) icon will display a help-text popup:

The Save button in the bottom-right of the dialog will only become active if the metadata has been updated in some way, which will also disable the Save to File icon. The Save to File icon will be disabled since the service endpoint that exports the metadata to a file will only use metadata that is saved in the database. So disabling this Save to File icon is new in this PR, since I feel it's misleading to the user if they make some changes to the metadata, then decide to export it without saving the changes first.

Selecting the X icon or Close button when there are metadata changes will display a confirmation dialog:

The form for editing an AVU and its children:

The form for editing a child (nested) AVU:

If there are also iRODS metadata, then the tabs User Metadata and Additional Metadata will appear under the dialog's header (otherwise the tabs are hidden if there are no iRODS metadata). The View in Template icon is replaced with an Import icon when clicking on the Additional Metadata tab (unless the data is read-only). The Import icon is only active if at least 1 row of iRODS metadata is selected:

Note that iRODS metadata is read-only, so the Edit and Delete icons in the listing grid are replaced with a single View button.

Selecting the Import icon will display a confirmation dialog before attempting to import the metadata:

For read-only files/folders (such as public data), the Metadata dialog has a read-only View mode (there are no iRODS metadata in the following example):

Note that the Save button is hidden, and just as in the iRODS listing grid, the Edit and Delete icons in the listing grid are replaced with a single View button.

The form for viewing a read-only AVU and its children:

The form for viewing a child (nested) AVU (without any child AVUs under it):

Finally, the view for a read-only file/folder with iRODS metadata:

Also updated layout of metadata list action buttons and edit dialog child AVU expansion panel.

Also add close confirmation dialog for unsaved changes. Also some minor DEConfirmationDialog refactors, including adding the `aria-labelledby` prop, and to allow intl components as the message prop. Removed obsolete ConfirmCloseDialog in favor of DEConfirmationDialog.

psarando

I'm leaving some PR comments in a bulk "review" so I don't spam your slack or email 😆

Note that this PR also has changes to some Metadata Template components, but those a fairly minor changes to remove some material-ui deprecation warnings and to replace the obsolete ConfirmCloseDialog with instances of DEConfirmationDialog (which itself got some updates).

psarando · 2019-03-08T21:26:15Z

.../main/java/org/iplantc/de/diskResource/client/presenters/metadata/MetadataPresenterImpl.java

+                view.unmask();
+                view.closeMetadataDialog();
+
+                dialog.setModal(true);


The presenter will set the SelectMetadataTemplateDialog as modal now, since the React metadata dialog is hidden while showing this GXT dialog, in order to avoid custom CSS on this SelectMetadataTemplateDialog to keep it on top.

Maybe keeping the React dialog open under this SelectMetadataTemplateDialog by adding custom CSS would be preferred instead?

I am ok with hiding the React dialog and setting this Modal. I see no real benefit of keeping it open especially if you need add CSS 😭.

psarando · 2019-03-08T22:04:35Z

.../main/java/org/iplantc/de/diskResource/client/presenters/metadata/MetadataPresenterImpl.java

        closeMetadataTemplateDialog();
    }

    @Override
    public void closeMetadataTemplateDialog() {
        templateViewDialog.closeDialog();
+        view.showMetadataDialog();


Since the metadata dialog is hidden when opening the template selection dialog, we reopen it here after closing the template view.

psarando · 2019-03-08T22:10:32Z

.../main/java/org/iplantc/de/diskResource/client/presenters/metadata/MetadataPresenterImpl.java

+                            onTemplateSelected(selectedTemplate.getId());
+                        }
+                    } else {
+                        view.showMetadataDialog();


This will re-show the metadata dialog if the SelectMetadataTemplateDialog is closed without opening a template.

psarando · 2019-03-08T22:38:53Z

react-components/src/metadata/EditMetadata.js

+
+    componentDidUpdate(prevProps) {
+        if (prevProps.targetResource !== this.props.targetResource) {
+            // The presenter wants to load metadata for a different target,


This also happens when the dialog is first opened with a loading mask and the targetResource (in order to display its name in the dialog header), then the metadata is loaded from the service later. The GWT view will also reset the targetResource to prevent the form from assuming the newly loaded metadata is "dirty".

See also DiskResourceMetadataViewImpl#loadMetadata.

psarando · 2019-03-08T22:42:37Z

react-components/src/metadata/EditMetadata.js

+    );
+};
+
+export default withFormik(


I had to remove enableReinitialize: true here, otherwise when metadata is updated from a template, Formik would reset the form, then the metadata form values would no longer be "dirty", and the user would not be able to save their changes.

So resetting the form is done manually in componentDidUpdate, and only when the targetResource changes.

psarando · 2019-03-08T23:14:26Z

react-components/src/metadata/EditMetadata.js

+
+                                <FieldArray name="avus"
+                                            render={arrayHelpers => (
+                                                <FormDialogEditAVU {...arrayHelpers}


The MetadataList above is the listing grid for each AVU.
One of these FormDialogEditAVU components will open when clicking an Edit icon from the grid.

psarando · 2019-03-08T23:15:46Z

react-components/src/metadata/EditMetadata.js

+                                <FieldArray name="irods-avus"
+                                            render={arrayHelpers => (
+                                                <FormDialogEditAVU {...arrayHelpers}
+                                                                   editable={false}


iRODS AVUs are not editable.

psarando · 2019-03-08T23:27:47Z

react-components/src/metadata/EditMetadata.js

+                            <span>
+                                <IconButton id={build(ids.EDIT_METADATA_FORM, ids.BUTTONS.SAVE_METADATA_TO_FILE)}
+                                            aria-label={formatMessage(intl, "saveToFile")}
+                                            disabled={loading || (dirty && editable) || isSubmitting}


As mentioned in the PR description, this Save to File icon will be disabled if the metadata is "dirty", so the user is not mislead into thinking any unsaved changes will be exported to their saved file.

react-components/src/metadata/MetadataList.js

sri2k1us

I didn't find any major issues. However there is one sticking point I would like to bring up is the placement of close button on the left side rather than the usual right side for the DE. While I understand why this was done, there are several ways to provide save, download template etc. from a dialog. For example, we can add a https://material-ui.com/demos/bottom-navigation/ and have the dialog body scroll or we could just add just a dot menu to dialog header with all the options or we could add a Speed Dial https://material-ui.com/lab/speed-dial/ which could display all these related actions (although this is still in labs). This way we can keep the close button on the right side.

.../iplantc/de/diskResource/client/presenters/callbacks/DiskResourceMetadataUpdateCallback.java

sri2k1us · 2019-03-12T17:15:43Z

.../main/java/org/iplantc/de/diskResource/client/presenters/metadata/MetadataPresenterImpl.java

+                view.unmask();
+                view.closeMetadataDialog();
+
+                dialog.setModal(true);


I am ok with hiding the React dialog and setting this Modal. I see no real benefit of keeping it open especially if you need add CSS 😭.

sri2k1us · 2019-03-12T17:16:12Z

.../main/java/org/iplantc/de/diskResource/client/presenters/metadata/MetadataPresenterImpl.java

-        umd.setOtherMetadata(view.getAvus());
-        drService.setDiskResourceMetaData(resource, umd, batchAvuCallback);
+            view.closeMetadataDialog();
+        }));


sri2k1us · 2019-03-12T17:31:19Z

react-components/src/metadata/EditMetadata.js

+import SaveIcon from "@material-ui/icons/Save";
+import SaveAltIcon from "@material-ui/icons/SaveAlt";
+
+const ConfirmationDialog = withI18N(DEConfirmationDialog, intlData);


sri2k1us · 2019-03-12T17:47:18Z

react-components/src/metadata/MetadataList.js

+        padding: "none",
+    },
+];
+


react-components/src/util/dialog/DEConfirmationDialog.js

psarando · 2019-03-12T19:45:36Z

However there is one sticking point I would like to bring up is the placement of close button on the left side rather than the usual right side for the DE.

Oh right, I was originally modelling these dialogs off the full-screen dialog example, but these dialogs are no longer full-screen. I like the idea of having the cancel/save buttons at the bottom-right, as we do in all other normal-size-dialogs. So I can add those bottom-right buttons and move the close button to the top-right in this dialog, and in the metadata template dialogs as well.

ash3rz

I only had a few minor comments - LGTM

.../main/java/org/iplantc/de/diskResource/client/presenters/metadata/MetadataPresenterImpl.java

react-components/src/metadata/MetadataList.js

ash3rz · 2019-03-13T23:21:07Z

react-components/src/util/dialog/DEConfirmationDialog.js

+    heading: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object,
+    ]).isRequired,


Moved Save buttons from top-right to bottom-right of dialog, added Close buttons next to the Save buttons, and moved Close icon buttons from top-left to top-right.

Refactored to use TableSort util functions, and to only sort TableRow components in the MetadataList render method, rather than sorting AVU lists in the metadata model. This allows sorting without making the metadata form "dirty".

ash3rz

Sorting LGTM!

sri2k1us · 2019-03-19T17:42:45Z

Sorting changes LGTM.

Refactor MetadataList unsorted TableRows into AVURow components for readability and a smaller render method.

psarando · 2019-03-20T00:54:31Z

Thanks for the reviews! 👍
I'll go ahead and merge this now that the prod hotfix is deployed.

psarando added 20 commits March 6, 2019 18:33

CORE-103 Initial EditMetadata forms for editing nested AVUs.

2cbc1d3

CORE-103 Add intl messages to edit-metadata React components.

5384eb0

CORE-103 Add debug IDs to edit-metadata React components.

b3da3c1

CORE-103 Add PropTypes to edit-metadata React classes.

9808bfd

CORE-103 Replace edit-metadata arrow functions with class methods.

ac5c84e

CORE-103 Add edit-metadata React test.

65062ce

CORE-103 Add EditDataCiteMetadataTest.

d78939d

CORE-103 Add read-only mode to React metadata view.

40eb9cb

CORE-103 Add target name to all nested metadata dialog titles.

1433e0a

CORE-103 Add a loading mask to nested metadata dialog.

28ba616

CORE-103 Replace redux-form with formik in EditMetadata components.

e3ec1f7

CORE-103 Refactor MetadataList to use EnhancedTableHead.

9e6065c

CORE-103 Update some form field components to outlined variants.

84bfeda

CORE-103 Fix some MUI deprecation warnings in metadata React components.

39599d3

Also updated layout of metadata list action buttons and edit dialog child AVU expansion panel.

CORE-103 Add View in Templates action to EditMetadata dialog.

3261acb

CORE-103 Add "Save to File" action to EditMetadata dialog

ca646f7

CORE-103 Add EditMetadata dialog help text button.

b82607b

CORE-103 Replace GXT MetadataView with a React view.

ccf4646

CORE-103 Add some read-only Metadata dialog fixes.

c5eee4b

psarando added the enhancement label Mar 7, 2019

psarando requested review from sri2k1us and ash3rz March 7, 2019 23:20

psarando commented Mar 9, 2019

View reviewed changes

sri2k1us approved these changes Mar 12, 2019

View reviewed changes

psarando mentioned this pull request Mar 13, 2019

Communities hotfix #395

Merged

ash3rz approved these changes Mar 13, 2019

View reviewed changes

psarando added 2 commits March 18, 2019 16:30

CORE-103 Rearrange close/save buttons in Metadata Dialogs.

13cf4c4

Moved Save buttons from top-right to bottom-right of dialog, added Close buttons next to the Save buttons, and moved Close icon buttons from top-left to top-right.

CORE-103 Make DEConfirmationDialog.onCancelBtnClick prop required.

4a6d5b2

psarando added 3 commits March 18, 2019 16:30

CORE-103 Use React ErrorHandler in DiskResourceMetadataUpdateCallback

cb3b7fe

CORE-103 Inject DiskResourceUtil into MetadataPresenterImpl

0985984

CORE-103 Use newAttrName intl message in MetadataList

ee6ff15

psarando force-pushed the CORE-103 branch from e72bf97 to ee6ff15 Compare March 18, 2019 23:31

CORE-103 Refactor MetadataList table sorting.

c20959a

Refactored to use TableSort util functions, and to only sort TableRow components in the MetadataList render method, rather than sorting AVU lists in the metadata model. This allows sorting without making the metadata form "dirty".

psarando requested review from sri2k1us and ash3rz March 19, 2019 01:43

ash3rz approved these changes Mar 19, 2019

View reviewed changes

sri2k1us approved these changes Mar 19, 2019

View reviewed changes

CORE-103 Refactor MetadataList unsorted TableRow components.

d958074

Refactor MetadataList unsorted TableRows into AVURow components for readability and a smaller render method.

psarando merged commit 7087568 into cyverse-archive:master Mar 20, 2019

psarando deleted the CORE-103 branch March 20, 2019 00:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CORE-103: Allow DE metadata dialogs to attach AVUs to other AVUs #394

CORE-103: Allow DE metadata dialogs to attach AVUs to other AVUs #394

psarando commented Mar 7, 2019 •

edited

Loading

psarando left a comment

psarando Mar 8, 2019

sri2k1us Mar 12, 2019

psarando Mar 8, 2019

psarando Mar 8, 2019

psarando Mar 8, 2019

psarando Mar 8, 2019

psarando Mar 8, 2019

psarando Mar 8, 2019

psarando Mar 8, 2019

sri2k1us left a comment

sri2k1us Mar 12, 2019

sri2k1us Mar 12, 2019

sri2k1us Mar 12, 2019

sri2k1us Mar 12, 2019

psarando commented Mar 12, 2019

ash3rz left a comment

ash3rz Mar 13, 2019

ash3rz left a comment

sri2k1us commented Mar 19, 2019

psarando commented Mar 20, 2019

CORE-103: Allow DE metadata dialogs to attach AVUs to other AVUs #394

CORE-103: Allow DE metadata dialogs to attach AVUs to other AVUs #394

Conversation

psarando commented Mar 7, 2019 • edited Loading

psarando 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

sri2k1us 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

psarando commented Mar 12, 2019

ash3rz left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ash3rz left a comment

Choose a reason for hiding this comment

sri2k1us commented Mar 19, 2019

psarando commented Mar 20, 2019

psarando commented Mar 7, 2019 •

edited

Loading