fix(fp-737): make ui closer to design #655

wesleyboar · 2022-06-03T01:06:40Z

Overview:

Make the manage team modal better match the design.

Related Jira tickets:

FP-1635
intended for task/FP-1635: 737 - Implement final Allocations UI #636 or main

Summary of Changes:

use common
keep table header still when scrolling
only show scrollbar if necessary
change spacing and font size
avoid table overflow

Testing Steps:

Verify Manage Team modal table only has scrollbar when necessary (delete <tr>'s to test).
Verify Manage Team modal table never has horizontal overflow (no matter how narrow the window).
Verify Manage Team modal content looks closer to design than before (spacing, colors, font size).
Verify View Team modal and Allocations section are unchanged.

UI Photos:

After Padding Fix

992px & Scroll to Top	991px & Scroll to Bottom

After Many Changes (like reverting table font size)

992px & Scroll to Top	991px & Scroll to Bottom

After Merge (939c00d)

992px & Scroll to Top	991px & Scroll to Bottom

Before Merge (939c00d)

992px & Scroll to Top	991px & Scroll to Bottom

codecov · 2022-06-03T01:08:42Z

Codecov Report

Merging #655 (52dcce2) into task/FP-737-final-UI (404551d) will not change coverage.
The diff coverage is 100.00%.

@@                  Coverage Diff                  @@
##           task/FP-737-final-UI     #655   +/-   ##
=====================================================
  Coverage                 67.37%   67.37%           
=====================================================
  Files                       429      429           
  Lines                     13409    13409           
  Branches                   2468     2468           
=====================================================
  Hits                       9034     9034           
  Misses                     4081     4081           
  Partials                    294      294

Flag	Coverage Δ
javascript	`69.09% <100.00%> (ø)`
unittests	`65.97% <ø> (ø)`

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

Impacted Files	Coverage Δ
...ionsManageTeamTable/AllocationsManageTeamTable.jsx	`2.56% <ø> (ø)`
...ocationsTeamViewModal/AllocationsTeamViewModal.jsx	`76.47% <100.00%> (ø)`
client/src/components/_common/Button/Button.jsx	`65.30% <100.00%> (ø)`

wesleyboar

Notes for reviewers.

...ents/Allocations/AllocationsModals/AllocationsManageTeamTable/AllocationsManageTeamTable.jsx

...ocations/AllocationsModals/AllocationsManageTeamTable/AllocationsManageTeamTable.module.scss

...mponents/Allocations/AllocationsModals/AllocationsTeamViewModal/AllocationsTeamViewModal.jsx

...ocations/AllocationsModals/AllocationsManageTeamTable/AllocationsManageTeamTable.module.scss

…ui-closer-to-design

edmondsgarrett

The table changes look awesome! All testing steps work as described.

One note: manage table tab is slightly taller than view team tab with new styling. Looks like adjusting listing-wrapper's height to 33.5vh fixes this.

wesleyboar · 2022-06-13T18:30:15Z

Garret, ~~that problem might have been me from a bad merge conflict resolution, or neglect.~~ I'll check it out this afternoon. Thanks.

rstijerina

Looks good, just found a couple validation errors

...mponents/Allocations/AllocationsModals/AllocationsTeamViewModal/AllocationsTeamViewModal.jsx

...ocations/AllocationsModals/AllocationsManageTeamTable/AllocationsManageTeamTable.module.scss

...ents/Allocations/AllocationsModals/AllocationsManageTeamTable/AllocationsManageTeamTable.jsx

wesleyboar · 2022-06-13T21:08:51Z

Looks like adjusting listing-wrapper's height to 33.5vh fixes this.

@edmondsgarrett, The vh unit is based on window height. Though 33.5vh may work for your browser window's height, a browser window at another height calculates 33.5vh to a different value.

Idea

If the modal itself (.modal-content) (or maybe just the .modal-body) were set to the same vh, then the mdoals could reliably be the same height. I'll see what I can do in a short time.

Update: The idea made me change too much code. I don't have the time to test such a change today (for Portal testing tomorrow) and get done all my other tasks. I'll revisit matching height modals whenever a modal component is made (like for TUP UI's Core-Components).

This value makes modals height match but only at specific window height. Setting height of modals is better but led me to change too much code. Instead, a TACC Modal component could handle height from prop.

Design, a while back, approved 14px font size for tables. Reference: #401

Source: 38af56b

rstijerina

LGTM!

…ui-closer-to-design

edmondsgarrett

LGTM!

* Update View Team link button to secondary button * Remove modal component from this file and export only manage team table component * Add manage team modal render here, incorporate tab functionality, and update role column to now be a dropdown * CSS styling for tabs in View modal * Change 'Manage Allocations' button to read 'Request New Allocation' * Remove errant reference to ManageTeamModal * Fix ManageTeamTable import, remove unused prop, and conditionally render 'Manage Team' tab * Fixed layout unit test, and moved ManageTeamModal test to AllocationsModals tests * Changed AllocationsManageTeamModal to AllocationsManageTeamTable and adjusted all references to this component * Fixed linting * Fixed adding user bug, removed horizontal scroll on manage team table, replaced dropdown in manage team role column with role text, and removed errant log * feat(fp-737): global mui tabs, simpler mui jsx (#646) * feat(fp-1635): remove unused css (#650) * 737: Use `_common` `<Button>` component in `<UserSearchBar>` component (#647) * Use common button component in UserSearchBar * fix linting * Removed manage team table horizontal scrollability + right-side border, and fixed saga state reference. * Fix linting * Fixed state loadingUsernames references to correctly update when adding users to allocation * Fixed key error for manage team table * Removed help text at bottom of manage team tab and adjusted modal size to accommodate this * Fixed another loadingUsernames reference in saga for failing unit test * 737: (FP-1678) Use "secondary" Button for UserSearchBar (#657) * fix(fp-1678): secondary button for usersearchbar * fix(fp-1678): button above (z) input usersearchbar * 737: Use `_common` `<Button>` component in View Team button (#649) * feat(fp-737): use our button for view team button I am not sure if design knows the color change is coming... Inquiry: https://tacc-team.slack.com/archives/G01K9ET7JM7/p1653604140397549 * fix(fp-1678): new styles vers. = more button pad. * fix(fp-1678): use small button * fix(fp-1678): do not let button overlap `<th>` * fix(fp-1678): prettier:fix + related comment tweak * fix(fp-1678): install @tacc/core-styles@0.5.2-c 1. I messed up 0.5.2 publish. After unpublish, I can't republish. 2. I messed up 0.5.2(-)b publish. After unpublish, I can't republish. 3. I published up 0.5.2-c. I also moved v tag beyond the fix, planning I could republish as 0.5.2. So GitHub is at 0.5.2. And NPM is at 0.5.2-c. But there is an 0.6.x from tup-ui/…/core-styles, so 0.5.x ends. Co-authored-by: Sal Tijerina <r.sal.tijerina@gmail.com> * fix(fp-737): make ui closer to design (#655) * fix(fp-737): make ui closer to design * docs(fp-737): note why set button position static * fix(fp-1678): manage team list wrap height change This value makes modals height match but only at specific window height. Setting height of modals is better but led me to change too much code. Instead, a TACC Modal component could handle height from prop. * fix(fp-1678): validation error * fix(fp-1678): add space below manage team table * fix(fp-1678): revert change to font size Design, a while back, approved 14px font size for tables. Reference: #401 * fix(fp-1650): `<td>` vert padding to match design * fix(fp-1650): port classname validation error fix Source: 38af56b * fix(fp-1650): npm run prettier:fix Co-authored-by: Sal Tijerina <r.sal.tijerina@gmail.com> * Updated loading state of manage team add button to switch to loading once addUser action is fired Co-authored-by: Sal Tijerina <r.sal.tijerina@gmail.com> Co-authored-by: Wesley B <62723358+wesleyboar@users.noreply.github.com>

* Task/FP-737: Manage Allocations (#480) * Scaffolding * stopgap * No UI; backend ready * Task/FP-1168: add backend unit tests for add/delete members of TAS projects (subtask of FP-737) (#467) * Remove unneeded change * Fix url for user delete * Remove logging statements and correct ApiException Second argument of ApiException is status (i.e. status_code) * Remove status code in ApiException as TAS returns 200 Main reason for not using TAS return code is that for errors (like missing user), TAS still returns a 200. Also, it isn't useful as we handle all ApiException as 400 and don't log that status_code that that was pass to ApiException * Add tests * Fix pep errors * Remove change to response for testing purposes * Fix use of ApiException * Fix tests * Improve logging message for forced allocation retrieval * Fix logging for add/delete of users to allocation * task/FP-737, task/FP-1180: Use Search component from Projects (#477) * use projects search; add common component * revert local dev change * Task/fp 1183 complete saga redux for removing user (#474) * Complete saga/redux for removing user Spinner is shown while deleting and error is shown when failed * Hide remove button for PI user * Add unit tests Refactor some fixture into a fixture file * Add remove user failure saga test * Refactor removing of user from team from reducer to saga * Update client/src/redux/sagas/allocations.sagas.js Co-authored-by: Sal Tijerina <r.sal.tijerina@gmail.com> Co-authored-by: rstijerina <r.sal.tijerina@gmail.com> * task/FP-1190: Unified search for FP-737 (#479) * unified search * update placeholder * remove autocomplete package * merge main package files * FP/737: Polish UI and Add User Functionality (FP-1182 & FP-1198) (#514) * Add user functionality and styling * Text and variable name changes Co-authored-by: rstijerina <r.sal.tijerina@gmail.com> * Task/FP-1181: Basic unit tests for front-end components (#555) * Fix failing tests * Basic unit test for Allocations Management Modal Co-authored-by: Nathan Franklin <nfranklin@tacc.utexas.edu> Co-authored-by: rstijerina <r.sal.tijerina@gmail.com> * Task/FP-1309 user new user search endpoint (#572) * Add TAS searching endpoint * Add basic unit tests * Use new endpoint and make temp changes to searchbar * Fix use of team members before ready * Improve tests * Add message to error response Co-authored-by: Sal Tijerina <r.sal.tijerina@gmail.com> * Add docstr Co-authored-by: Sal Tijerina <r.sal.tijerina@gmail.com> * Fix error Co-authored-by: Sal Tijerina <r.sal.tijerina@gmail.com> * Add comment to explain use of Soap and Zeep Co-authored-by: Sal Tijerina <r.sal.tijerina@gmail.com> Co-authored-by: Sal Tijerina <r.sal.tijerina@gmail.com> * fix linting * Updated UserSearchbar and AllocationsManageTeamModal to jsx components * Task/FP-1269: Enable Manage Team modal for Project Delegates (#585) * rename js files to jsx * Modal switch between view and manage for pi & delegates * fix linting * Fixed unit tests * Fixed linting Co-authored-by: Sal Tijerina <r.sal.tijerina@gmail.com> Co-authored-by: Garrett Edmonds <edmondsgarrett@gmail.com> * Fixed unit tests * Fixed AddUser allocations saga bug * Added error handling for AllocationsManageTeamModal * 737: Improve UI of user searching (#624) * Removed searchbar placeholder text and added help text under searchbar in AllocationsManageTeamModal * Simplified JS for text field and updated CSS to accommodate JS changes * Fixed userSearchbar Add button bug * task/FP-1635: 737 - Implement final Allocations UI (#636) * Update View Team link button to secondary button * Remove modal component from this file and export only manage team table component * Add manage team modal render here, incorporate tab functionality, and update role column to now be a dropdown * CSS styling for tabs in View modal * Change 'Manage Allocations' button to read 'Request New Allocation' * Remove errant reference to ManageTeamModal * Fix ManageTeamTable import, remove unused prop, and conditionally render 'Manage Team' tab * Fixed layout unit test, and moved ManageTeamModal test to AllocationsModals tests * Changed AllocationsManageTeamModal to AllocationsManageTeamTable and adjusted all references to this component * Fixed linting * Fixed adding user bug, removed horizontal scroll on manage team table, replaced dropdown in manage team role column with role text, and removed errant log * feat(fp-737): global mui tabs, simpler mui jsx (#646) * feat(fp-1635): remove unused css (#650) * 737: Use `_common` `<Button>` component in `<UserSearchBar>` component (#647) * Use common button component in UserSearchBar * fix linting * Removed manage team table horizontal scrollability + right-side border, and fixed saga state reference. * Fix linting * Fixed state loadingUsernames references to correctly update when adding users to allocation * Fixed key error for manage team table * Removed help text at bottom of manage team tab and adjusted modal size to accommodate this * Fixed another loadingUsernames reference in saga for failing unit test * 737: (FP-1678) Use "secondary" Button for UserSearchBar (#657) * fix(fp-1678): secondary button for usersearchbar * fix(fp-1678): button above (z) input usersearchbar * 737: Use `_common` `<Button>` component in View Team button (#649) * feat(fp-737): use our button for view team button I am not sure if design knows the color change is coming... Inquiry: https://tacc-team.slack.com/archives/G01K9ET7JM7/p1653604140397549 * fix(fp-1678): new styles vers. = more button pad. * fix(fp-1678): use small button * fix(fp-1678): do not let button overlap `<th>` * fix(fp-1678): prettier:fix + related comment tweak * fix(fp-1678): install @tacc/core-styles@0.5.2-c 1. I messed up 0.5.2 publish. After unpublish, I can't republish. 2. I messed up 0.5.2(-)b publish. After unpublish, I can't republish. 3. I published up 0.5.2-c. I also moved v tag beyond the fix, planning I could republish as 0.5.2. So GitHub is at 0.5.2. And NPM is at 0.5.2-c. But there is an 0.6.x from tup-ui/…/core-styles, so 0.5.x ends. Co-authored-by: Sal Tijerina <r.sal.tijerina@gmail.com> * fix(fp-737): make ui closer to design (#655) * fix(fp-737): make ui closer to design * docs(fp-737): note why set button position static * fix(fp-1678): manage team list wrap height change This value makes modals height match but only at specific window height. Setting height of modals is better but led me to change too much code. Instead, a TACC Modal component could handle height from prop. * fix(fp-1678): validation error * fix(fp-1678): add space below manage team table * fix(fp-1678): revert change to font size Design, a while back, approved 14px font size for tables. Reference: #401 * fix(fp-1650): `<td>` vert padding to match design * fix(fp-1650): port classname validation error fix Source: 38af56b * fix(fp-1650): npm run prettier:fix Co-authored-by: Sal Tijerina <r.sal.tijerina@gmail.com> * Updated loading state of manage team add button to switch to loading once addUser action is fired Co-authored-by: Sal Tijerina <r.sal.tijerina@gmail.com> Co-authored-by: Wesley B <62723358+wesleyboar@users.noreply.github.com> * Increased allocations table alignment style selector specificity and fixed background styling for disabled 'remove' button in manage team modal * Frontend error handling for add/remove operations * Render nulls instead of empty strings in absence of user operation errors * fix(fp-737): remove bkgd color from disabled link (#659) * fix(fp-737): remove bkgd color from disabled link Similar result as d60ff3e, but without overwriting CSS. * feat(fp-737): prettier:fix Co-authored-by: Owais Jamil <47395902+owaisj@users.noreply.github.com> Co-authored-by: Nathan Franklin <nfranklin@tacc.utexas.edu> Co-authored-by: Nathan Franklin <nathan.franklin@gmail.com> Co-authored-by: Owais Jamil <ojamil@tacc.utexas.edu> Co-authored-by: edmondsgarrett <43251554+edmondsgarrett@users.noreply.github.com> Co-authored-by: Garrett Edmonds <edmondsgarrett@gmail.com> Co-authored-by: Wesley B <62723358+wesleyboar@users.noreply.github.com>

fix(fp-737): make ui closer to design

b8b5ded

docs(fp-737): note why set button position static

2f81a86

wesleyboar commented Jun 3, 2022

View reviewed changes

edmondsgarrett mentioned this pull request Jun 3, 2022

task/FP-1635: 737 - Implement final Allocations UI #636

Merged

wesleyboar added 2 commits June 3, 2022 14:41

Merge branch 'task/FP-737-final-UI' into task/FP-737-final-UI--table-…

dd950bb

…ui-closer-to-design

Merge branch 'task/FP-737-final-UI' into task/FP-737-final-UI--table-…

939c00d

…ui-closer-to-design

rstijerina requested review from edmondsgarrett and rstijerina June 13, 2022 15:58

rstijerina added 2 commits June 13, 2022 10:58

Merge branch 'task/FP-737-final-UI' into task/FP-737-final-UI--table-…

3e44316

…ui-closer-to-design

Merge branch 'task/FP-737-final-UI' into task/FP-737-final-UI--table-…

5d16dee

…ui-closer-to-design

edmondsgarrett requested changes Jun 13, 2022

View reviewed changes

rstijerina requested changes Jun 13, 2022

View reviewed changes

wesleyboar added 4 commits June 13, 2022 16:40

fix(fp-1678): manage team list wrap height change

0f7b3a3

This value makes modals height match but only at specific window height. Setting height of modals is better but led me to change too much code. Instead, a TACC Modal component could handle height from prop.

fix(fp-1678): validation error

7fcfddd

fix(fp-1678): add space below manage team table

c82db8c

fix(fp-1678): revert change to font size

9f21ad5

Design, a while back, approved 14px font size for tables. Reference: #401

wesleyboar requested review from edmondsgarrett and rstijerina June 13, 2022 22:34

wesleyboar added 3 commits June 14, 2022 09:30

fix(fp-1650): <td> vert padding to match design

7c99daf

fix(fp-1650): port classname validation error fix

f5f3dd1

Source: 38af56b

fix(fp-1650): npm run prettier:fix

8de45f1

rstijerina approved these changes Jun 14, 2022

View reviewed changes

Merge branch 'task/FP-737-final-UI' into task/FP-737-final-UI--table-…

52dcce2

…ui-closer-to-design

edmondsgarrett approved these changes Jun 14, 2022

View reviewed changes

rstijerina merged commit 0d470bb into task/FP-737-final-UI Jun 14, 2022

rstijerina deleted the task/FP-737-final-UI--table-ui-closer-to-design branch June 14, 2022 16:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(fp-737): make ui closer to design #655

fix(fp-737): make ui closer to design #655

wesleyboar commented Jun 3, 2022 •

edited

Loading

codecov bot commented Jun 3, 2022 •

edited

Loading

wesleyboar left a comment

edmondsgarrett left a comment

wesleyboar commented Jun 13, 2022 •

edited

Loading

rstijerina left a comment

wesleyboar commented Jun 13, 2022 •

edited

Loading

rstijerina left a comment

edmondsgarrett left a comment

fix(fp-737): make ui closer to design #655

fix(fp-737): make ui closer to design #655

Conversation

wesleyboar commented Jun 3, 2022 • edited Loading

Overview:

Related Jira tickets:

Summary of Changes:

Testing Steps:

UI Photos:

codecov bot commented Jun 3, 2022 • edited Loading

Codecov Report

wesleyboar left a comment

Choose a reason for hiding this comment

edmondsgarrett left a comment

Choose a reason for hiding this comment

wesleyboar commented Jun 13, 2022 • edited Loading

rstijerina left a comment

Choose a reason for hiding this comment

wesleyboar commented Jun 13, 2022 • edited Loading

rstijerina left a comment

Choose a reason for hiding this comment

edmondsgarrett left a comment

Choose a reason for hiding this comment

wesleyboar commented Jun 3, 2022 •

edited

Loading

codecov bot commented Jun 3, 2022 •

edited

Loading

wesleyboar commented Jun 13, 2022 •

edited

Loading

wesleyboar commented Jun 13, 2022 •

edited

Loading