QA dashboard overview FE #2329

AdamAdHocTeam · 2024-08-27T18:09:25Z

Description of change

This is the frontend for the QA dashboard overview section. It has three widgets and should show the new 'Filter not applied' message and tool tip when the filters aren't applicable (currently hard coded).

How to test

Review the code.
View the QA dashboard we should have a review populated with dummy data.
Make sure we match the mockups.

Issue(s)

Checklists

Every PR

Meets issue criteria
JIRA ticket status updated
Code is meaningfully tested
Meets accessibility standards (WCAG 2.1 Levels A, AA)
API Documentation updated
Boundary diagram updated
Logical Data Model updated
Architectural Decision Records written for major infrastructure decisions
UI review complete

Before merge to main

OHS demo complete
Ready to create production PR

Production Deploy

Staging smoke test completed

After merge/deploy

Update JIRA ticket status

thewatermethod · 2024-08-28T14:40:48Z

These are like twice the size of the mockup :(

thewatermethod · 2024-08-28T14:41:36Z

frontend/src/widgets/QualityAssuranceDashboardOverview.js

+import Tooltip from '../components/Tooltip';
+import colors from '../colors';
+
+export function Field({


Can we please reuse existing components here, and just add a prop to handle the differences? that way we wouldn't need a whole new CSS file/reinvent the wheel

Yea I added a new component and used it in both places.

thewatermethod · 2024-08-28T14:42:36Z

frontend/src/widgets/QualityAssuranceDashboardOverview.scss

@@ -0,0 +1,47 @@
+@media( min-width: 640px){


would it be possible to reuse the HTML/CSS from the existing widgets and just override stuff here where necessary, rather than recoding this?

I have a new CSS.

thewatermethod · 2024-08-28T15:04:29Z

Thanks for the cleanup. Can we go further and have one overview widget component (maybe start with the one on the regional dashboard?

Also, the icon size and some of the text in the overview widgets are pretty different from the mockup, it'd be good if we could keep the sizes and stuff consistent with regional dashboard.

…to clean up the css a bit

frontend/src/pages/QADashboard/index.js

thewatermethod · 2024-09-03T20:18:40Z

frontend/src/widgets/OverviewWidgetField.js

+import Tooltip from '../components/Tooltip';
+import colors from '../colors';
+
+export function OverviewWidgetField({


There's a duplicative component in frontend/src/widgets/DashboardOverview.js, can we condense

Will leave as is for now as this will need to be updated to use the new overview widget in the future.

can you explain what you mean? @AdamAdHocTeam

thewatermethod · 2024-09-03T20:19:29Z

frontend/src/widgets/OverviewWidgetField.scss

@@ -0,0 +1,51 @@
+@media( min-width: 1024px ){


There's duplicative CSS at frontend/src/widgets/DashboardOverview.css, if we condense the components we can probably condense the CSS as well

This widget will need to be updated to use the new overview widget when we do this it will go away. I have only updated resource and qa dashboard atm.

what is the new overview widget? @AdamAdHocTeam

So we have a overview widget container now that wraps around all the individual overview widgets. I think this needs to be updated to that structure.

We don't need to pass array of field components just an array of object info.

frontend/src/widgets/__tests__/QualityAssuranceDashbaordOverview.js

thewatermethod · 2024-09-03T20:28:19Z

frontend/src/widgets/OverviewWidgetField.scss

+.smart-hub--overview-widget-field-font-size {
+    font-size: 15px;
+}
+
+.smart-hub--overview-widget-field-data-font-size {
+    font-size: 19px;
+}


Can we use the uswds font size classes for these, please?

any luck on this change ^ @AdamAdHocTeam

@thewatermethod oops missed this looking now

should be updated now.

thewatermethod · 2024-09-03T20:41:14Z

frontend/src/widgets/DashboardOverviewContainer.scss

+@media( min-width: 640px){
+    .smart-hub--dashboard-overview-container {
+        column-gap: 1rem;
+        row-gap:.5rem;
+    }
+}
+
+@media( min-width: 1024px ){
+    .smart-hub--dashboard-overview-container {
+        gap: 1em;
+    }
+}


Suggestion:

Delete this file.

Remove "margin-bottom-1" from the classnames OverviewWidgetField line 29

add "flex-gap-2" to the classnames in "DashboardOverviewContainer" line 32

changes made.

thewatermethod · 2024-09-03T20:42:22Z

frontend/src/widgets/OverviewWidgetField.scss

+.smart-hub--dashboard-overview-widget-field-icon-background-lg {
+    border-radius: 50%;
+    height: 5em;
+    width: 5em;
+}
+
+.smart-hub--dashboard-overview-widget-field-icon-background-sm {
+    border-radius: 50%;
+    height: 3em;
+    width: 3em;
+}


Added suggestion, would need to be coupled with adjustments in the HTML

Suggested change

.smart-hub--dashboard-overview-widget-field-icon-background-lg {

border-radius: 50%;

height: 5em;

width: 5em;

}

.smart-hub--dashboard-overview-widget-field-icon-background-sm {

border-radius: 50%;

height: 3em;

width: 3em;

}

.smart-hub--dashboard-overview-widget-field-icon {

border-radius: 50%;

}

.smart-hub--dashboard-overview-widget-field-icon__background-lg {

height: 5em;

width: 5em;

}

.smart-hub--dashboard-overview-widget-field-icon__background-sm {

height: 3em;

width: 3em;

}

thewatermethod · 2024-09-03T20:42:50Z

frontend/src/widgets/OverviewWidgetField.scss

+    height: 24px;
+    width: 24px;


Can we switch to em to match the other heights in the file?

I switched to em.

…ord' into mb/TTAHUB-3345/filters-on-QA-dashboard

…etails-for-qa-dashbaord

…ord' into mb/TTAHUB/3345/add-filters-to-qa-dash

…345/filters-on-QA-dashboard

…etails-for-qa-dashbaord

[TTAHUB-3305, 3306] QA dashboard overview detail pages for first two widgets

…ets into mb/TTAHUB/3345/add-filters-to-qa-dash

Raise frontend test coverage to 90%

[TTAHUB-3345] Add filters to QA dashboard, frontend

….com/HHS/Head-Start-TTADP into al-ttahub-3316-3317-overview-widgets

AdamAdHocTeam added 2 commits August 27, 2024 14:08

adding overview to qa dashbaord

867a45d

audit vuln and test

dcaed9a

AdamAdHocTeam marked this pull request as ready for review August 27, 2024 19:26

AdamAdHocTeam requested review from thewatermethod, nvms, hardwarehuman, GarrettEHill and kryswisnaskas August 27, 2024 19:26

thewatermethod reviewed Aug 28, 2024

View reviewed changes

make generic overview widget

00af0ec

AdamAdHocTeam added 5 commits August 28, 2024 11:08

audit vuln ignore

0abcc02

changed resource and qa to use same underlying componenet still need …

17a559d

…to clean up the css a bit

merge main

f47316c

css cleanup

5d8f73a

match font and icon size on regional dashboard

6e11760

AdamAdHocTeam requested a review from thewatermethod August 29, 2024 13:42

updates for recipients with no tta WIP

f383ed3

thewatermethod reviewed Sep 3, 2024

View reviewed changes

frontend/src/pages/QADashboard/index.js Outdated Show resolved Hide resolved

thewatermethod reviewed Sep 3, 2024

View reviewed changes

frontend/src/widgets/__tests__/QualityAssuranceDashbaordOverview.js Outdated Show resolved Hide resolved

thewatermethod reviewed Sep 3, 2024

View reviewed changes

thewatermethod added 2 commits September 4, 2024 10:05

Use current branch

719b2b5

Initial commit

78966d8

thewatermethod and others added 30 commits September 10, 2024 15:30

Update known issues again

8212f55

Merge remote-tracking branch 'origin/al-display-details-for-qa-dashba…

2528758

…ord' into mb/TTAHUB-3345/filters-on-QA-dashboard

90% branch coverage

783d5f0

Merge branch 'al-ttahub-3316-3317-overview-widgets' into al-display-d…

83975a0

…etails-for-qa-dashbaord

audit vuln ignore for now

f8a65d1

Merge branch 'al-ttahub-3316-3317-overview-widgets' into al-display-d…

e934d49

…etails-for-qa-dashbaord

Separate pull request to make review simpler

8970675

Merge remote-tracking branch 'origin/al-display-details-for-qa-dashba…

258ca07

…ord' into mb/TTAHUB/3345/add-filters-to-qa-dash

Merge branch 'mb/TTAHUB/3345/add-filters-to-qa-dash' into mb/TTAHUB-3…

b02a0c0

…345/filters-on-QA-dashboard

Merge branch main into mb/TTAHUB/3345/add-filters-to-qa-dash

f6ec623

Merge branch 'mb/TTAHUB/3345/add-filters-to-qa-dash' into mb/TTAHUB-3…

8135ccc

…345/filters-on-QA-dashboard

Merge branch 'main' into mb/TTAHUB/3345/add-filters-to-qa-dash

eb00b7f

Merge branch 'mb/TTAHUB/3345/add-filters-to-qa-dash' into mb/TTAHUB-3…

94aadc4

…345/filters-on-QA-dashboard

merge main

acd09ef

fix bad merge

48aa028

Merge branch 'al-ttahub-3316-3317-overview-widgets' into al-display-d…

7acab83

…etails-for-qa-dashbaord

change prop name

9dda046

audit vulns be

34408fd

Merge branch 'al-ttahub-3316-3317-overview-widgets' into al-display-d…

077b3d3

…etails-for-qa-dashbaord

Updates and fixes per Kelly

3d2f720

per Kelly remove left margin on drawer for fei

ce4a32c

Merge pull request #2349 from HHS/al-display-details-for-qa-dashbaord

10c738a

[TTAHUB-3305, 3306] QA dashboard overview detail pages for first two widgets

Merge remote-tracking branch origin/al-ttahub-3316-3317-overview-widg…

d06ac1f

…ets into mb/TTAHUB/3345/add-filters-to-qa-dash

Fix test

ffc88dd

Merge pull request #2355 from HHS/mb/TTAHUB-3345/filters-on-QA-dashboard

9ec598b

Raise frontend test coverage to 90%

Fix test

064446d

Merge pull request #2358 from HHS/mb/TTAHUB/3345/add-filters-to-qa-dash

cab051b

[TTAHUB-3345] Add filters to QA dashboard, frontend

Merge branch 'main' into al-ttahub-3316-3317-overview-widgets

00eae54

Merge branch 'al-ttahub-3316-3317-overview-widgets' of https://github…

f420355

….com/HHS/Head-Start-TTADP into al-ttahub-3316-3317-overview-widgets

Merge branch 'main' into al-ttahub-3316-3317-overview-widgets

4cd2475

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

QA dashboard overview FE #2329

QA dashboard overview FE #2329

AdamAdHocTeam commented Aug 27, 2024 •

edited

Loading

thewatermethod commented Aug 28, 2024

thewatermethod Aug 28, 2024

AdamAdHocTeam Aug 28, 2024

thewatermethod Aug 28, 2024

AdamAdHocTeam Aug 28, 2024

thewatermethod commented Aug 28, 2024

thewatermethod Sep 3, 2024

AdamAdHocTeam Sep 4, 2024

thewatermethod Sep 4, 2024 •

edited

Loading

thewatermethod Sep 3, 2024

AdamAdHocTeam Sep 4, 2024

thewatermethod Sep 4, 2024 •

edited

Loading

AdamAdHocTeam Sep 4, 2024

AdamAdHocTeam Sep 4, 2024

thewatermethod Sep 3, 2024

thewatermethod Sep 4, 2024

AdamAdHocTeam Sep 4, 2024

AdamAdHocTeam Sep 4, 2024

thewatermethod Sep 3, 2024

AdamAdHocTeam Sep 4, 2024

thewatermethod Sep 3, 2024

AdamAdHocTeam Sep 4, 2024

thewatermethod Sep 3, 2024

AdamAdHocTeam Sep 4, 2024

QA dashboard overview FE #2329

Are you sure you want to change the base?

QA dashboard overview FE #2329

Conversation

AdamAdHocTeam commented Aug 27, 2024 • edited Loading

Description of change

How to test

Issue(s)

Checklists

Every PR

Before merge to main

Production Deploy

After merge/deploy

thewatermethod commented Aug 28, 2024

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

thewatermethod commented Aug 28, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thewatermethod Sep 4, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thewatermethod Sep 4, 2024 • 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AdamAdHocTeam commented Aug 27, 2024 •

edited

Loading

thewatermethod Sep 4, 2024 •

edited

Loading

thewatermethod Sep 4, 2024 •

edited

Loading