135 - Files table UI [2/2] - File Action Buttons and File Level Messages #162

MellyGray · 2023-08-16T17:37:28Z

What this PR does / why we need it:

This PR adds the File Actions Buttons of the Files Table as well as some File Level Messages. (All download options not included since they are included in another UI issue #63 )

This is only the UI, no backend connected yet.

Which issue(s) this PR closes:

Closes [Spike - Frontend] [2/2] Create the File Tab of the Dataset - File action buttons + File level messages #139

Special notes for your reviewer:

This is only the UI work, so some variables for the conditional render have been hardcoded until we can get them from the js-dataverse module.

Changes

Remove msw from Storybook because we don't need to mock the API calls, we can mock the repositories.
Changes to the design system:
a. ButtonGroup now accepts HTMLAttributes
b. Type prop added to the Button component
c. Disabled prop added to the DropdownButtonItem component
d. New DropdownHeader component added to the design system
SessionProvider added to the application to get the information of the authenticated user at any point of the application
Some new properties added to the File model to manage different states of the restricted access
DatasetUploadFilesButton added to the Dataset page
File Actions column added to the Files Table, this includes:
a. EditFilesMenu component at the Header of the column
b. AccessFileMenu at cell level to check the access status of the file
c. RequestAccessModal, display work only, since we are not including write actions in this Milestone 2.
d. File Options menu, display work only, since we are not including write actions in this Milestone 2.
e. FileInfoMessages

All file actions not included in this PR are not considered for the MVP.

Suggestions on how to test this:

npm i
cd packages/design-system && npm run build
cd ../../
npm run storybook
Check the files table at localhost:6006 storybook in the Dataset page. There are 2 modes now, Default and Logged In as Owner to check the appearance of these Action Buttons.
Some other sections have been added to the storybook to check the different states of the File Action Buttons, check these sections at Sections/Dataset Page/DatasetFiles/FilesTable/FileActionsCell/ in the Storybook.

Does this PR introduce a user interface change? If mockups are available, please link/include them here:

Is there a release notes update needed for this change?:

File Action Buttons added to the Files Table UI

Additional documentation:

…b.com/IQSS/dataverse-frontend into feature/139-files-table-file-action-buttons-ui

…ps://github.com/IQSS/dataverse-frontend into feature/139-files-table-file-action-buttons-ui

…ss cases

…t Access click

…ge check

MellyGray · 2023-09-13T09:45:11Z

@GPortas I added the requested changes, please let me know if I missed something

MellyGray · 2023-09-13T09:48:46Z

I have not been able to test the appearance of the tooltip in Storybook. I am referring to this behavior, from your screenshots:

I added a commit, you can check all the different messages in Storybook at http://localhost:6006/?path=/story/sections-dataset-page-datasetfiles-filestable-fileactionscell-fileinfomessages-fileinfomessages--ingest-in-progress

GPortas · 2023-09-14T11:06:55Z

Thanks @MellyGray. Looks good.

Only a minor detail. I tested the new Storybook changes and found the following:

In Storybook, the width of the file info message with tooltip appears smaller than the one without a tooltip (that occupies the width of the screen).

Tooltip:

No tooltip:

Not sure if this is relevant, but just in case.

GPortas · 2023-09-14T11:09:46Z

...-actions/file-actions-cell/file-action-buttons/file-options-menu/FileAlreadyDeletedModal.tsx

+      <Modal.Body>
+        <p className={styles.paragraph}>
+          <ExclamationCircleFill />
+          This file has already been deleted (or replaced) in the current version. It may not be


This should be moved to locales, for i18n.

I forgot! Thanks! I added a commit, can you check it again?

Looks good. Thanks!

GPortas · 2023-09-14T11:12:19Z

...et-files/files-table/file-actions/file-actions-cell/file-info-messages/IngestInfoMessage.tsx

+                was unsuccessful.{' '}
+                {ingest.reportMessage
+                  ? ingest.reportMessage
+                  : 'Ingest failed. No further information is available.'}


Same for this component. Info messages should come from locales.

GPortas

LGTM!

kcondon · 2023-09-15T07:48:28Z

@MellyGray Unfortunately, I'm seeing the same error and blank page.

package.json

kcondon · 2023-09-19T20:08:36Z

@MellyGray I'm getting blank screens with this but with many console errors. We've seen this and deleting the node dir seemed to help before but now not helping.

…into feature/139-files-table-file-action-buttons-ui

MellyGray · 2023-09-20T08:07:03Z

@MellyGray I'm getting blank screens with this but with many console errors. We've seen this and deleting the node dir seemed to help before but now not helping.

I haven't change anything since yesterday, how is this possible 😢 We can try again today to troubleshoot this in a zoom call before the standup, I'm available from 9-11h

…tion-buttons-ui 135 - Files table UI [2/2] - File Action Buttons and File Level Messages

MellyGray added 28 commits July 20, 2023 09:51

fix(Storybook): upgrade to v7.1

e5117ea

Merge branch 'feature/135-files-table-search-bar-ui' of https://githu…

b9f7972

…b.com/IQSS/dataverse-frontend into feature/139-files-table-file-action-buttons-ui

Merge branch 'feature/149-react-table-manual-pagination-setup' of htt…

a9207ff

…ps://github.com/IQSS/dataverse-frontend into feature/139-files-table-file-action-buttons-ui

fix: refactor FileInfoCell folders structure

240d060

feat(FileActions): add FileActionsHeader component

774d031

feat(FilesActions): add FileActionsCell component to the Files Table

b90b557

feat(FilesActionButtons): add AccessFile button

4fe72de

feat(DropdownHeader): add DropdownHeader to the Design System

1ed14be

feat(DesignSystem): add disabled property to DropdownButtonItem

bbfccf4

feat(FilesActions): add AccessStatus to the AccessFileButton

992f211

fix: put AccessIcon before the access text

1c47f9c

feat(FilesActions): add RequestAccessButton component

a82fd50

add RequestAccessButton todo's

2e84a75

feat(FilesActions): refactor FileAccess and FilePermissions properties

a60e331

feat(RequestAccessButton): add Access Requested and Users cannot acce…

b205ca1

…ss cases

feat(SessionProvider): add SessionProvider to get the authenticated user

08b7442

feat(DesignSystem): add type attribute to Button component

b2c31a7

feat(RequestAccess): add RequestAccessModal to be triggered on Reques…

3be5b1e

…t Access click

feat(RequestAccess): add embargo messages

6bf1747

feat(DesignSystem): add disabled property to Dropdown

71bcc7a

feat(DesignSystem): add HTMLAttributes to ButtonGroup

6f9e93b

feat(FileOptions): add FileOptionsMenu to the Files Table

a56adc4

feat(FileOptionsMenu): update story

7f71f27

feat(UploadFilesButton): add DatasetUploadFilesButton to the Files Tab

2464646

feat(FilesActions): add Edit Files button to the Files Table

1a7cb04

feat(FileActionsColumn): add FileInfoMessages to the actions cell

f17ce5f

fix: remove paths with hardcoded variables to remove them from covera…

49b1e22

…ge check

feat(FilesActions): add internationalization to texts

86ce0d2

MellyGray changed the title ~~Feature/139 files table file action buttons UI~~ 139 Files table file action buttons UI Aug 16, 2023

MellyGray changed the title ~~139 Files table file action buttons UI~~ 135 - Files table UI [2/2] - File Action Buttons and File Level Messages Aug 16, 2023

MellyGray added 2 commits September 12, 2023 16:06

fix(dev-env): change bootstrap timeout back to 5m

7b60c12

feat(FileInfoMessages): implement ingest messages

406ff9e

MellyGray removed their assignment Sep 13, 2023

GPortas reviewed Sep 14, 2023

View reviewed changes

GPortas assigned MellyGray Sep 14, 2023

fix: get files components texts from locales

beb948b

MellyGray removed their assignment Sep 14, 2023

GPortas approved these changes Sep 14, 2023

View reviewed changes

GPortas removed their assignment Sep 14, 2023

Base automatically changed from feature/149-react-table-manual-pagination-setup to develop September 15, 2023 07:25

kcondon self-assigned this Sep 15, 2023

MellyGray linked an issue Sep 15, 2023 that may be closed by this pull request

[Spike - Frontend] [2/2] Create the File Tab of the Dataset - File action buttons + File level messages #139

Closed

fix(Storybook): upgrade to v7.4.2

baff74d

MellyGray commented Sep 19, 2023

View reviewed changes

package.json Outdated Show resolved Hide resolved

Merge branch 'develop' of https://github.com/IQSS/dataverse-frontend …

51f6c9c

…into feature/139-files-table-file-action-buttons-ui

MellyGray mentioned this pull request Sep 20, 2023

174 - Refine UI styling Files Tab #175

Merged

fix(Storybook): downgrade to v7.0.2

9898506

kcondon merged commit e847e8f into develop Sep 22, 2023
6 checks passed

kcondon deleted the feature/139-files-table-file-action-buttons-ui branch September 22, 2023 07:29

jayanthkomarraju pushed a commit to jayanthkomarraju/dataverse-frontend that referenced this pull request May 31, 2024

Merge pull request IQSS#162 from IQSS/feature/139-files-table-file-ac…

405a779

…tion-buttons-ui 135 - Files table UI [2/2] - File Action Buttons and File Level Messages

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

135 - Files table UI [2/2] - File Action Buttons and File Level Messages #162

135 - Files table UI [2/2] - File Action Buttons and File Level Messages #162

MellyGray commented Aug 16, 2023 •

edited

Loading

MellyGray commented Sep 13, 2023

MellyGray commented Sep 13, 2023

GPortas commented Sep 14, 2023

GPortas Sep 14, 2023

MellyGray Sep 14, 2023

GPortas Sep 14, 2023

GPortas Sep 14, 2023

GPortas left a comment

kcondon commented Sep 15, 2023

kcondon commented Sep 19, 2023

MellyGray commented Sep 20, 2023

135 - Files table UI [2/2] - File Action Buttons and File Level Messages #162

135 - Files table UI [2/2] - File Action Buttons and File Level Messages #162

Conversation

MellyGray commented Aug 16, 2023 • edited Loading

What this PR does / why we need it:

Which issue(s) this PR closes:

Special notes for your reviewer:

Changes

Suggestions on how to test this:

Does this PR introduce a user interface change? If mockups are available, please link/include them here:

Is there a release notes update needed for this change?:

Additional documentation:

MellyGray commented Sep 13, 2023

MellyGray commented Sep 13, 2023

GPortas commented Sep 14, 2023

GPortas Sep 14, 2023

Choose a reason for hiding this comment

MellyGray Sep 14, 2023

Choose a reason for hiding this comment

GPortas Sep 14, 2023

Choose a reason for hiding this comment

GPortas Sep 14, 2023

Choose a reason for hiding this comment

GPortas left a comment

Choose a reason for hiding this comment

kcondon commented Sep 15, 2023

kcondon commented Sep 19, 2023

MellyGray commented Sep 20, 2023

MellyGray commented Aug 16, 2023 •

edited

Loading