[Agency Dashboard] Dashboard UI scaffolding 1/n #146

terryttsai · 2022-11-10T00:05:57Z

Description of the change

Implemented the new left side panel and all metrics button + header bar. Gave the buttons a hover state.

There's a tiny unfinished modal for the about page, that will be fleshed out in a later PR!

To follow up in later PRs:

Rearrange the metric dropdowns + insights
Add modals:
- About page
- Learn More
- All Metrics
Responsive layout
Mobile filters view

Type of change

All pull requests must have at least one of the following labels applied (otherwise the PR will fail):

Label	Description
Type: Bug	non-breaking change that fixes an issue
Type: Feature	non-breaking change that adds functionality
Type: Breaking Change	fix or feature that would cause existing functionality to not work as expected
Type: Non-breaking refactor	change addresses some tech debt item or prepares for a later change, but does not change functionality
Type: Configuration Change	adjusts configuration to achieve some end related to functionality, development, performance, or security
Type: Dependency Upgrade	upgrades a project dependency - these changes are not included in release notes

Related issues

Closes #XXXX

Checklists

Development

This box MUST be checked by the submitter prior to merging:

Double- and triple-checked that there is no Personally Identifiable Information (PII) being mistakenly added in this pull request

These boxes should be checked by the submitter prior to merging:

Tests have been written to cover the code changed/added as part of this pull request

Code review

These boxes should be checked by reviewers prior to merging:

This pull request has a descriptive title and information useful to a reviewer
This pull request has been moved out of a Draft state, has no "Work In Progress" label, and has assigned reviewers
Potential security implications or infrastructural changes have been considered, if relevant

lilidworkin

@terryttsai exciting to see this! Can you add some screenshots and/or videos to the PR description? Makes it a lot easier for me to review when I can cross reference the code with something visual

lilidworkin · 2022-11-10T15:20:21Z

agency-dashboard/src/stores/DatapointsStore.ts

@@ -133,6 +133,15 @@ class DatapointsStore extends BaseDatapointsStore {
      runInAction(() => {
        this.loading = false;
      });
+
+      const response2 = (await request({


We actually don't need the published_datapoints endpoint anymore, do we? Want to remove the code here and also from the backend?

Yes sorry, the PR isn't ready for review yet so hadn't removed this yet!

lilidworkin · 2022-11-10T15:21:02Z

agency-dashboard/src/DashboardView.styles.tsx

 `;
+
+export const AllMetricsButton = ({


nit, does this belong in a styles file?

Good question, I think for now I'll leave these out of the styles file!

lilidworkin · 2022-11-10T15:21:17Z

agency-dashboard/src/DashboardView.styles.tsx

+  margin-left: 8px;
+`;
+
+export const MetricOverviewActionShareButton = () => (


similar, do these belong in a styles file? not sure what best practice is

terryttsai · 2022-11-10T18:48:20Z

Sorry, I meant to open this as a draft PR! Videos will be coming soon. Just opening the PR for transparency, though I was planning on adding the modals before removing the WIP and asking for review

terryttsai · 2022-11-10T18:48:52Z

Though I was also thinking of keeping this as a small PR and adding the modals in a follow-up

lilidworkin · 2022-11-11T15:39:27Z

Sorry, I meant to open this as a draft PR! Videos will be coming soon. Just opening the PR for transparency, though I was planning on adding the modals before removing the WIP and asking for review

Got it! No worries, sorry for jumping the gun on review :)

Though I was also thinking of keeping this as a small PR and adding the modals in a follow-up

That actually makes sense to me! You know how I love small / incremental PRs :)

terryttsai · 2022-11-11T21:40:03Z

In that spirit, I'm keeping this PR small and as-is, will be putting new work following up this PR!

lilidworkin

Love it! +1 for small/incremental PRs!

mxosman

Code LGTM, Terry! I wasn't able to run it for some reason - I ran yarn install and yarn run dev but the site doesn't load on localhost:3000 nor localhost:3001. Wondering if it's just me/something in my local env.

terryttsai · 2022-11-14T17:34:09Z

What's the error you're getting? does yarn dev compile successfully?

mxosman · 2022-11-14T17:50:25Z

What's the error you're getting? does yarn dev compile successfully?

No errors at all actually - and everything compiles successfully - just the "This site can’t be reached. localhost refused to connect." screen.

terryttsai · 2022-11-14T17:58:33Z

Even across different browsers? I was having that issue on chrome until I realized I had network disabled in the chrome debugging tools...

terryttsai added 4 commits November 8, 2022 16:56

header bar

6bd79e5

new left panel layout

5f222d7

100% height

7f919ea

all metrics button

e05c47e

terryttsai added the Type: Feature label Nov 10, 2022

terryttsai requested a review from a team November 10, 2022 00:05

lilidworkin reviewed Nov 10, 2022

View reviewed changes

terryttsai added 2 commits November 10, 2022 12:36

about modal wip

1ea5b5e

components out of styles

6571104

terryttsai changed the title ~~[WIP][Agency Dashboard] Dashboard UI scaffolding~~ [Agency Dashboard] Dashboard UI scaffolding 1/n Nov 11, 2022

terryttsai requested a review from a team November 11, 2022 21:39

remove unused export

09a743d

lilidworkin approved these changes Nov 14, 2022

View reviewed changes

mxosman approved these changes Nov 14, 2022

View reviewed changes

terryttsai merged commit aa7da03 into main Nov 14, 2022

terryttsai deleted the terry/new-dashboard branch November 14, 2022 20:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Agency Dashboard] Dashboard UI scaffolding 1/n #146

[Agency Dashboard] Dashboard UI scaffolding 1/n #146

terryttsai commented Nov 10, 2022 •

edited

Loading

lilidworkin left a comment

lilidworkin Nov 10, 2022

terryttsai Nov 10, 2022

lilidworkin Nov 10, 2022

terryttsai Nov 11, 2022

lilidworkin Nov 10, 2022

terryttsai commented Nov 10, 2022

terryttsai commented Nov 10, 2022

lilidworkin commented Nov 11, 2022

terryttsai commented Nov 11, 2022

lilidworkin left a comment

mxosman left a comment

terryttsai commented Nov 14, 2022

mxosman commented Nov 14, 2022 •

edited

Loading

terryttsai commented Nov 14, 2022

[Agency Dashboard] Dashboard UI scaffolding 1/n #146

[Agency Dashboard] Dashboard UI scaffolding 1/n #146

Conversation

terryttsai commented Nov 10, 2022 • edited Loading

Description of the change

Type of change

Related issues

Checklists

Development

Code review

lilidworkin left a comment

Choose a reason for hiding this comment

lilidworkin Nov 10, 2022

Choose a reason for hiding this comment

terryttsai Nov 10, 2022

Choose a reason for hiding this comment

lilidworkin Nov 10, 2022

Choose a reason for hiding this comment

terryttsai Nov 11, 2022

Choose a reason for hiding this comment

lilidworkin Nov 10, 2022

Choose a reason for hiding this comment

terryttsai commented Nov 10, 2022

terryttsai commented Nov 10, 2022

lilidworkin commented Nov 11, 2022

terryttsai commented Nov 11, 2022

lilidworkin left a comment

Choose a reason for hiding this comment

mxosman left a comment

Choose a reason for hiding this comment

terryttsai commented Nov 14, 2022

mxosman commented Nov 14, 2022 • edited Loading

terryttsai commented Nov 14, 2022

terryttsai commented Nov 10, 2022 •

edited

Loading

mxosman commented Nov 14, 2022 •

edited

Loading