task/WP-65-DropdownViewFullPath #866

tjgrafft · 2023-09-29T17:10:47Z

Overview

Started out as:

Some paths in the data files area can get quite long, and the breadcrumbs are often truncated. It may be ideal to offer a tooltip on hover to show the full path, untruncated.

Reach out to #cep-design for direction of design and functionality (and desirability of this feature).

I reached out to the cep-design team and Tracy for guidance on the design and functionality. The functionality changed from the original overview/goals. Instead of breadcrumb links, we now have a dropdown menu that contains the previous directories and the root directory. The current directory the user is in, is displayed to the right of the dropdown menu. Since WP-278 and WP-279 were related and basically required to complete WP-65, I have added them to this PR. We now have a new modal design for both the new "View Full Path" button/link and the "View Path" button/link in the File listings.

Changes

Quite a few files had to change in order to design and make the new layout functional.
Got rid of older breadcrumbs design and replaced it with a dropdown menu.
Dropdown menu (Accessed by clicking the new "Go to ..." button) contains all previous directories (as user navigates through file system) and will contain a dropdownitem for the root directory (if homeDir is present).
Current directory is shown to the right of the new dropdown menu.
If file and/or folder names got too long (this was true for frontera juypter notebook names mostly) I added the truncateMiddle util to shorter it with ...
User can navigate between folders by opening the dropdown menu and clicking the desired folder they want to jump to.
Redesigned the datafiles modal per WP-278 and WP-279. I added a new parameter for TextCopyField (called renderType), which allows the developers to decide whether they want the old modal design (single-line) or the new design (text-area where the full path wraps so that user can see full path). I retained the old functionality of the old modal (per Wesley's request) so that it will default to the displayField='input' if no value is given for that new parameter.
Added View Full Path button/link. This will not render when systemName is not defined to avoid error/user clicking on it.
Had to rewrite and delete some of the old unit tests in DataFilesBreadcrumbs.test.js and PublicData.test.js because of the new layout/design.
Also had to change the size of the DataFilesToolbar buttons to small to make more room for new layout
Per Wesley's help, added a dropdown-menu.css file in styles/components/dropdown-menu.css. This file is now used for both the dropdown menu styles and the add button styles.
Moved Dropdown menu component into its own file. Added a file called CombinedBreadcrumbs that is used for combining both the dropdown comp and the breadcrumbs comp.
Select, Move, and Copy modals were all affected by the changes to the BreadCrumb file. So I had to change the code, and add dispatch actions to bring in APIs, definitions, and systems.

Testing

Go to https://cep.test/
Click on Data Files in sidebar
Using different systems (Corral, Frontera, Public Data, etc) navigate through folders and use new dropdown to see new navigation. Click on the folders in dropdown to make sure navigation is working properly.
Use both the View Full Path button/link to the right of the Go to ... button to see the full path of current directory. Also use the View Path button/link in the File Listings to get the full path for individual files.
Try opening the Move, Copy, (in Data Files) and Select Modals (in Applications for selecting individual files in apps like NAMD for example) and making sure the View Full Path button in them works correctly.
Compare with images below.

UI

New Dropdown button and View Full Path Layout

Dropdown open

Truncate middle for long folder/file names

New Shared Workspaces dropdown layout with Project Name included for nav

New View Full Path Modal

Copy Modal with View Full Path

Move Modal with View Full Path

Select Modal with View Full Path

Notes

codecov · 2023-09-29T17:13:10Z

Codecov Report

Merging #866 (d01917f) into main (8ac9be3) will increase coverage by 0.01%.
The diff coverage is 84.00%.

@@            Coverage Diff             @@
##             main     #866      +/-   ##
==========================================
+ Coverage   63.38%   63.40%   +0.01%     
==========================================
  Files         430      432       +2     
  Lines       12297    12381      +84     
  Branches     2542     2574      +32     
==========================================
+ Hits         7795     7850      +55     
- Misses       4293     4319      +26     
- Partials      209      212       +3

Flag	Coverage Δ
javascript	`69.69% <84.00%> (-0.06%)`	⬇️
unittests	`56.99% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

Files	Coverage Δ
...aFiles/CombinedBreadcrumbs/CombinedBreadcrumbs.jsx	`100.00% <100.00%> (ø)`
client/src/components/DataFiles/DataFiles.jsx	`71.11% <ø> (ø)`
...iles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.jsx	`68.57% <100.00%> (-18.74%)`	⬇️
...ts/DataFiles/DataFilesToolbar/DataFilesToolbar.jsx	`75.72% <ø> (ø)`
...DataFiles/DataFilesModals/DataFilesSelectModal.jsx	`69.69% <0.00%> (-2.18%)`	⬇️
...taFiles/DataFilesModals/DataFilesShowPathModal.jsx	`90.90% <90.00%> (+1.62%)`	⬆️
...ataFilesSystemSelector/DataFilesSystemSelector.jsx	`73.68% <0.00%> (-2.00%)`	⬇️
...components/_common/TextCopyField/TextCopyField.jsx	`68.18% <71.42%> (-2.41%)`	⬇️
.../DataFiles/DataFilesDropdown/DataFilesDropdown.jsx	`81.96% <81.96%> (ø)`

client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.jsx

wesleyboar

Looks functional. But there is room for improvement to the code.

client/src/styles/tools/mixins.scss

client/src/components/_common/TextCopyField/TextCopyField.jsx

client/src/components/DataFiles/DataFilesModals/DataFilesShowPathModal.jsx

client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.scss

client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.jsx

…e-Portal into task/WP-65-DropdownViewFullPath

#866 (comment)

rstijerina

Looking great so far! Functionality is working perfectly. A few comments on styling

client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.jsx

client/src/components/DataFiles/DataFilesModals/DataFilesShowPathModal.jsx

client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.jsx

tjgrafft · 2023-10-10T22:07:52Z

I made the Dropdown a separate component from DataFilesBreadcrumbs. Moved the Copy button in the modals from the left to the right (that was the original mock, and it looks better with everything left aligned in the modal imo). Also had to change the dropdown navigation logic from the previous commit. I tested it on Public and Community Data, but will test it on Frontera and other file systems tomorrow.

Update: New navigation logic working correctly on Frontera and other systems too.

rstijerina

Working great for the most part! Found a few things worth discussing

client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.jsx

rstijerina · 2023-10-18T17:16:49Z

client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.jsx

-    <div className={`breadcrumbs ${className}`}>
-      {scheme === 'projects' && (
-        <>
-          <RootProjectsLink
-            api={api}
-            section={section}
-            operation={operation}
-            label="Shared Workspaces"
-          />{' '}
-          {system && `/ `}
-        </>


Previously we had the "Shared Workspaces" root in the breadcrumb path. Do we want to include that with this feature as well?

What do you think of this? I'll fix the folder icon alignment, but do you like this idea for Shared Workspaces?

Looks good!

client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.jsx

client/src/components/DataFiles/DataFilesModals/DataFilesShowPathModal.jsx

client/src/components/DataFiles/DataFilesDropdown/DataFilesDropdown.jsx

rstijerina · 2023-10-24T18:58:07Z

client/src/components/DataFiles/DataFilesModals/DataFilesShowPathModal.module.scss

+}
+
+.storage-values,
+.storage-google {


I think we can just use storage-values and get rid of storage-google, since they have the same css

rstijerina · 2023-10-24T19:00:46Z

client/src/components/DataFiles/DataFilesModals/DataFilesSelectModal.jsx

@@ -91,6 +100,7 @@ const DataFilesSelectModal = ({ isOpen, toggle, onSelect }) => {
                />
              )}
            </div>
+            <DataFilesShowPathModal api={apiValue} />


Rather than define a new prop and initiate the dispatch here, can we move it to DataFilesShowPathModal? If not, then we can instead use a selector to grab the api value in the DataFilesShowPathModal component

sophia-massie

Getting some console errors when running locally. Was going to pass them on here in the review, but Tapis server also keeps intermittently going down making it difficult to test. May have to defer to the other reviewers for now.

sophia-massie · 2023-10-25T21:18:57Z

Getting some console errors when running locally. Was going to pass them on here in the review, but Tapis server also keeps intermittently going down making it difficult to test. May have to defer to the other reviewers for now.

Tapis came back up. Tested the issues previously brought up. LGTM good work!

rstijerina · 2023-10-27T18:59:43Z

Looks great! Going to deploy to dev.cep to confirm that Google Drive works as well

rstijerina

Works and looks great! Left a couple comments, but not blockers to merge

client/src/components/DataFiles/DataFilesModals/DataFilesShowPathModal.jsx

rstijerina · 2023-10-27T19:27:19Z

client/src/components/DataFiles/DataFilesSystemSelector/DataFilesSystemSelector.jsx

+      dispatch({
+        type: 'FETCH_SYSTEM_DEFINITION',
+        payload: system.system,
+      });


Was this needed both here and in DataFilesShowPathModal.jsx? Just curious

The idea/logic was every time the user selects a different system in the dropdown, it fetches that system definition (so the definition isn't null or undefined). ShowPathModal's dispatch would just be upon the modal opening, and since the modal is already open--my thought was it wouldn't fetch the new system definition without it also being in SystemSelector.

…athModal.jsx Co-authored-by: Sal Tijerina <[email protected]>

task/WP-65-DropdownViewFullPath

11f5121

tjgrafft requested review from rstijerina and sophia-massie September 29, 2023 17:12

tjgrafft requested a review from chandra-tacc September 29, 2023 17:15

wesleyboar reviewed Sep 29, 2023

View reviewed changes

client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.jsx Outdated Show resolved Hide resolved

wesleyboar requested changes Sep 29, 2023

View reviewed changes

Taylor Grafft added 4 commits October 2, 2023 09:05

task/WP-65-DropdownViewFullPath-v2

d566301

task/WP-65-DropdownViewFullPath-v3

ad75f18

task/WP-65-DropdownViewFullPath-v4

123a766

task/WP-65-DropdownViewFullPath-v5

2d446c1

wesleyboar reviewed Oct 2, 2023

View reviewed changes

client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.jsx Show resolved Hide resolved

wesleyboar self-requested a review October 2, 2023 19:12

rstijerina and others added 5 commits October 3, 2023 13:23

Merge branch 'main' into task/WP-65-DropdownViewFullPath

3c0ca4a

task/WP-65-DropdownViewFullPathv6

c531d37

Merge branch 'task/WP-65-DropdownViewFullPath' of github.com:TACC/Cor…

f9605ac

…e-Portal into task/WP-65-DropdownViewFullPath

Merge branch 'main' into task/WP-65-DropdownViewFullPath

1fb6ab8

task/WP-65-DropdownViewFullPath-v7

d20f4cb

wesleyboar added a commit that referenced this pull request Oct 4, 2023

feat: WP-65 dropdown-menu css component

7f416ae

#866 (comment)

wesleyboar mentioned this pull request Oct 4, 2023

task/WP-65-DropdownViewFullPath - dropdown-menu css component #875

Merged

task/WP-65-DropdownViewFullPath - dropdown-menu css component (#875)

a72b22c

rstijerina reviewed Oct 5, 2023

View reviewed changes

Taylor Grafft added 3 commits October 5, 2023 16:18

task/WP-65-DropdownViewFullPath-v8

41b0f80

task/WP-65-DropdownViewFullPath-v9

00f4c5c

task/WP-65-DropdownViewFullPath-v10

8d3b8ab

wesleyboar mentioned this pull request Oct 9, 2023

WP-299: Add Data Files button dropdown needs minor adjustment in alignment #878

Merged

tjgrafft and others added 3 commits October 10, 2023 13:58

Merge branch 'main' into task/WP-65-DropdownViewFullPath

e4b6329

task/WP-65-DropdownViewFullPath-v11

00a1ce0

task/WP-65-DropdownViewFullPath-v12

488f169

rstijerina requested changes Oct 18, 2023

View reviewed changes

tjgrafft and others added 3 commits October 20, 2023 08:27

Merge branch 'main' into task/WP-65-DropdownViewFullPath

78e0cc4

task/WP-65-DropdownViewFullPath-v13

2ea3b0f

task/WP-65-DropdownViewFullPath-v14

c41e082

tjgrafft requested a review from rstijerina October 24, 2023 15:39

rstijerina reviewed Oct 24, 2023

View reviewed changes

task/WP-65-DropdownViewFullPath-v15

0f002c1

tjgrafft requested a review from rstijerina October 25, 2023 19:11

sophia-massie reviewed Oct 25, 2023

View reviewed changes

sophia-massie self-requested a review October 25, 2023 21:19

sophia-massie approved these changes Oct 25, 2023

View reviewed changes

Merge branch 'main' into task/WP-65-DropdownViewFullPath

1e5d30c

rstijerina approved these changes Oct 27, 2023

View reviewed changes

chandra-tacc and others added 2 commits October 27, 2023 15:03

Update client/src/components/DataFiles/DataFilesModals/DataFilesShowP…

d72ae52

…athModal.jsx Co-authored-by: Sal Tijerina <[email protected]>

prettier fix

d01917f

chandra-tacc merged commit 1f3884c into main Oct 27, 2023
6 checks passed

chandra-tacc deleted the task/WP-65-DropdownViewFullPath branch October 27, 2023 20:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

task/WP-65-DropdownViewFullPath #866

task/WP-65-DropdownViewFullPath #866

tjgrafft commented Sep 29, 2023 •

edited

Loading

codecov bot commented Sep 29, 2023 •

edited

Loading

wesleyboar left a comment

rstijerina left a comment

tjgrafft commented Oct 10, 2023 •

edited

Loading

rstijerina left a comment

rstijerina Oct 18, 2023

tjgrafft Oct 20, 2023

rstijerina Oct 24, 2023

rstijerina Oct 24, 2023

rstijerina Oct 24, 2023

sophia-massie left a comment

sophia-massie commented Oct 25, 2023

rstijerina commented Oct 27, 2023

rstijerina left a comment

rstijerina Oct 27, 2023

tjgrafft Oct 27, 2023

task/WP-65-DropdownViewFullPath #866

task/WP-65-DropdownViewFullPath #866

Conversation

tjgrafft commented Sep 29, 2023 • edited Loading

Overview

Related

Changes

Testing

UI

Notes

codecov bot commented Sep 29, 2023 • edited Loading

Codecov Report

wesleyboar left a comment

Choose a reason for hiding this comment

rstijerina left a comment

Choose a reason for hiding this comment

tjgrafft commented Oct 10, 2023 • edited Loading

rstijerina left a comment

Choose a reason for hiding this comment

rstijerina Oct 18, 2023

Choose a reason for hiding this comment

tjgrafft Oct 20, 2023

Choose a reason for hiding this comment

rstijerina Oct 24, 2023

Choose a reason for hiding this comment

rstijerina Oct 24, 2023

Choose a reason for hiding this comment

rstijerina Oct 24, 2023

Choose a reason for hiding this comment

sophia-massie left a comment

Choose a reason for hiding this comment

sophia-massie commented Oct 25, 2023

rstijerina commented Oct 27, 2023

rstijerina left a comment

Choose a reason for hiding this comment

rstijerina Oct 27, 2023

Choose a reason for hiding this comment

tjgrafft Oct 27, 2023

Choose a reason for hiding this comment

tjgrafft commented Sep 29, 2023 •

edited

Loading

codecov bot commented Sep 29, 2023 •

edited

Loading

tjgrafft commented Oct 10, 2023 •

edited

Loading