[DUOS-2048][risk=no] Add DAR Dataset Dropdown Table #1863

connorlbark · 2022-10-25T16:02:13Z

Addresses

https://broadworkbench.atlassian.net/browse/DUOS-2048

Have you read Terra's Contributing Guide lately? If not, do that first.

Label PR with a Jira ticket number and include a link to the ticket
Label PR with a security risk modifier [no, low, medium, high]
PR describes scope of changes
Get a minimum of one thumbs worth of review, preferably two if enough team members are available
Get PO sign-off for all non-trivial UI or workflow changes
Verify all tests go green
Test this change deployed correctly and works on dev environment after deployment

connorlbark · 2022-10-25T16:06:47Z

src/components/SimpleTable.js

@@ -90,8 +90,10 @@ const DataRows = ({rowData, baseStyle, columnHeaders}) => {
        }
        return output;
      }));
+
+    return rowWrapper({renderedRow, rowData: row});


I added the table here by adding a function which can inject HTML around a row. I considered a lot of different options, but this seemed the cleanest / least invasive way of achieving adding code inside of the outer DAR collection table itself.

connorlbark · 2022-10-25T16:10:13Z

src/components/dar_collection_table/DarCollectionTableCellData.js

@@ -1,6 +1,7 @@
 import {includes, isEmpty, isNil, toLower} from 'lodash/fp';
 import {formatDate} from '../../libs/utils';
-import {h} from 'react-hyperscript-helpers';
+import {h, div, p} from 'react-hyperscript-helpers';
+import { ArrowDropUp, ArrowDropDown } from '@material-ui/icons';


Are there standardized or better drop up / drop down icons ? I used these (as I did somewhere else) but I am not sure they are the most attractive. I couldn't find other usages of drop up/drop down icons in the codebase and struggled to find better ones.

I don't think we do have something like that. Perhaps run it by Yvonne for her thoughts.

I found one, used in the code + looks like the mock.

connorlbark · 2022-10-25T16:21:02Z

src/components/dar_dataset_table/DarDatasetTableCellData.js

+  const dataAccess = elections?.find((election) => election.electionType === 'DataAccess');
+
+  let status = dataAccess?.status || 'N/A';
+
+  if (status === 'Closed') {
+    status = votes?.finalVotes?.some((v) => v.vote === true) ? 'Approved' : 'Denied';
+  }


I believe it is, but I just want to check that this is sound logic for the status of a bucket.

There could be null vote values for votes that are still in progress. That would be neither approved or denied.

If any final vote is true, then it is definitely Approved. If any final vote is false, then it is definitely Denied

So, would it just be 'In Progress' then?

Another possibility is Canceled where an election was closed with no final vote values. I think the logic should be something like this:

If any final votes are non-null && true -> Approved
If any final votes are non-null && false -> Denied
Else - there is no final vote status to report.

The above logic is a little too loose in that there's only Approved and Denied, but we do have that third case.

Right now, I am displaying Canceled, Open, etc. as well since it's deriving the status from the original election status. In this table, do we prefer just showing Approved and Denied, or do we want to be more specific in the case neither is true, e.g. Open Canceled etc.

The above logic is a little too loose in that there's only Approved and Denied, but we do have that third case.

Oh okay, cool. Got it. I replied before this, I think this makes sense.

src/components/collection_voting_slab/MemberVoteSummary.js

rushtong

So far, this looks amazing! See comments inline. Still looking at the PR but wanted to get this out to you sooner.

rushtong · 2022-10-26T17:23:31Z

src/components/SimpleTable.js

@@ -106,6 +108,7 @@ export default function SimpleTable(props) {
    rowData = [], //rowData -> {data, component, style, onClick}
    isLoading,
    styles, //styles -> baseStyle, columnStyle needed to determine sizing and color assignments
+    rowWrapper = ({renderedRow}) => renderedRow, // ({rowData, renderedRow}) => ... : allows injecting custom container to row


One thing that's jarring is the styling of the loading phase before the actual content is rendered. Not sure how that's defined, but I think we need to make that more of a spinner than a giant table that goes away within a second.

I changed the table loading animation to be a spinner in the middle of the screen, and the table is simply empty until the data is fetched. This effects all tables, but I think it looks pretty good, even for the larger tables. If preferred, we could make it a flagged prop if you want the giant table loading animation on the, e.g., admin user page

This looks good, thanks for the change!

src/components/collection_voting_slab/MemberVoteSummary.js

src/components/dar_collection_table/DarCollectionTable.js

rushtong

👍🏽

JVThomas

The dataset tables look good!

connorlbark added 3 commits October 19, 2022 16:14

work

1fa5297

working kinda

c553f7c

finished

804e6af

connorlbark commented Oct 25, 2022

View reviewed changes

connorlbark added 4 commits October 25, 2022 12:28

cleanup

602f172

fix logic

f28c135

fix tests

164ee49

update styling

7fdf954

connorlbark commented Oct 25, 2022

View reviewed changes

src/components/collection_voting_slab/MemberVoteSummary.js Show resolved Hide resolved

connorlbark changed the title ~~[DUOS-2048][risk=no] WIP Add DAR Dataset Dropdown Table~~ [DUOS-2048][risk=no] Add DAR Dataset Dropdown Table Oct 25, 2022

connorlbark marked this pull request as ready for review October 25, 2022 18:28

connorlbark requested a review from a team as a code owner October 25, 2022 18:28

rushtong reviewed Oct 26, 2022

View reviewed changes

connorlbark added 2 commits October 26, 2022 14:29

loading spinner while table loading

7f551dd

fix tests

63e5eca

rushtong approved these changes Oct 28, 2022

View reviewed changes

JVThomas approved these changes Oct 31, 2022

View reviewed changes

connorlbark merged commit 82d3969 into develop Oct 31, 2022

connorlbark deleted the DUOS-2048 branch October 31, 2022 14:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DUOS-2048][risk=no] Add DAR Dataset Dropdown Table #1863

[DUOS-2048][risk=no] Add DAR Dataset Dropdown Table #1863

connorlbark commented Oct 25, 2022

connorlbark Oct 25, 2022

connorlbark Oct 25, 2022 •

edited

Loading

rushtong Oct 25, 2022

connorlbark Oct 25, 2022

connorlbark Oct 25, 2022

rushtong Oct 25, 2022

rushtong Oct 25, 2022

connorlbark Oct 25, 2022

rushtong Oct 25, 2022

rushtong Oct 25, 2022

connorlbark Oct 25, 2022

connorlbark Oct 25, 2022

rushtong left a comment

rushtong Oct 26, 2022

connorlbark Oct 26, 2022 •

edited

Loading

rushtong Oct 28, 2022

rushtong left a comment

JVThomas left a comment

[DUOS-2048][risk=no] Add DAR Dataset Dropdown Table #1863

[DUOS-2048][risk=no] Add DAR Dataset Dropdown Table #1863

Conversation

connorlbark commented Oct 25, 2022

Addresses

Choose a reason for hiding this comment

connorlbark Oct 25, 2022 • edited Loading

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

Choose a reason for hiding this comment

rushtong left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

connorlbark Oct 26, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rushtong left a comment

Choose a reason for hiding this comment

JVThomas left a comment

Choose a reason for hiding this comment

connorlbark Oct 25, 2022 •

edited

Loading

connorlbark Oct 26, 2022 •

edited

Loading