Skip to content

Feature: Create PSAT landing page and dashboard#827

Merged
mohdsayed merged 41 commits into
release/v0.11.0from
feat/psat-landing-page
Sep 10, 2024
Merged

Feature: Create PSAT landing page and dashboard#827
mohdsayed merged 41 commits into
release/v0.11.0from
feat/psat-landing-page

Conversation

@mohdsayed

@mohdsayed mohdsayed commented Sep 2, 2024 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Description

Redesign the PSAT landing page and add a dashboard with pinned items and features for easy navigation.

Relevant Technical Choices

  • Remove the iframe and add static content.
  • Map internal links for each item in the dashboard.
  • Add internal link in PSAT landing page for dashboard.
  • Display the landing page when users first install the PSAT extension. On subsequent visits, show the dashboard.
  • Add top-level icons in collapsed sidebar.

Testing Instructions

  • Remove and install PSAT extension, you should be able to see the landing page.
  • Open extension in a tab, you should now see dashboard.
  • All links and buttons in the dashboard should navigate to the related pages.
  • Top level icons should be visible in the collapsed sidebar.

Additional Information:

Screenshot/Screencast

Landing Page
image

Dashboard
image

Checklist

  • I have thoroughly tested this code to the best of my abilities.
  • I have reviewed the code myself before requesting a review.
  • [ ] This code is covered by unit tests to verify that it works as intended. NA
  • The QA of this PR is done by a member of the QA team (to be checked by QA).

Fixes #799

@mohdsayed mohdsayed self-assigned this Sep 2, 2024
@mohdsayed mohdsayed added this to the v0.11 milestone Sep 2, 2024
@mohdsayed mohdsayed added the enhancement New feature or request label Sep 2, 2024
@mohdsayed

mohdsayed commented Sep 6, 2024

Copy link
Copy Markdown
Collaborator Author

@pavanpatil1 Ready for QA

@pavanpatil1

pavanpatil1 commented Sep 6, 2024 •
edited
Loading

Copy link
Copy Markdown
Collaborator
  • The button design should be consistent throughout.
Screenshot 2024-09-06 at 11 30 26 AM
  • On the landing page, if CDP is enabled, the reload notice does not display correctly.
Screenshot 2024-09-06 at 11 46 52 AM
  • The logo currently appears in both the header and navigation sections. Could we streamline this by showing the logo in the header only? Also, the logo becomes invisible when navigating to the private audience or site boundary pages.
Screenshot 2024-09-06 at 2 19 39 PM
  • Could we move the dashboard section above the cookie section? The dashboard typically appears first, and from there, we can navigate to the other sections below.
Screenshot 2024-09-06 at 12 18 04 PM
  • The color code on the dashboard does not match the one on the "Private Advertising" landing page. The landing page uses rgb(37, 99, 235), while the dashboard page uses rgb(26, 115, 232 )
Screenshot 2024-09-06 at 12 35 25 PM
  • The 'Private Advertising' logo differs between the landing page and the dashboard.
Screenshot 2024-09-06 at 12 35 25 PM

@milindmore22

milindmore22 commented Sep 6, 2024 •
edited
Loading

Copy link
Copy Markdown
Collaborator
  • Disappearing logos
    The Privacy Sandbox logos on the PSAT landing page disappear when you toggle open the sidebar menus.
Screen.Recording.2024-09-06.at.1.55.50.PM.mov

@mohdsayed

mohdsayed commented Sep 6, 2024 •
edited
Loading

Copy link
Copy Markdown
Collaborator Author

@pavanpatil1

The button design should be consistent throughout.

It's the same button used in dashboard. We wouldn't want to use the blue button.

On the landing page, if CDP is enabled, the reload notice does not display correctly.

Good catch! Fixed

The logo currently appears in both the header and navigation sections. Could we streamline this by showing the logo in the header only? Also, the logo becomes invisible when navigating to the private audience or site boundary pages.

That makes sense, updated to use the same design from landing pages.

Could we move the dashboard section above the cookie section? The dashboard typically appears first, and from there, we can navigate to the other sections below.

I had initially kept it in the beginning; however, it was later decided that we wanted to keep it after “Privacy Sandbox”.

The color code on the dashboard does not match the one on the "Private Advertising" landing page. The landing page uses rgb(37, 99, 235), while the dashboard page uses rgb(26, 115, 232 )

Fixed

The 'Private Advertising' logo differs between the landing page and the dashboard.

Fixed

@milindmore22

Disappearing logos
The Privacy Sandbox logos on the PSAT landing page disappear when you toggle open the sidebar menus.

Fixed.

@mohdsayed mohdsayed requested a review from mayan-000 September 6, 2024 13:44
@milindmore22

milindmore22 commented Sep 6, 2024 •
edited
Loading

Copy link
Copy Markdown
Collaborator

- [ ] The border for dashboard boxes is different from other box borders.

image
image

@mohdsayed

mohdsayed commented Sep 6, 2024

Copy link
Copy Markdown
Collaborator Author

@milindmore22

The border for dashboard boxes is different from other box borders.

We are not matching these boxes design from the other landing pages, or else it should have been styled very differently.

@fellyph

fellyph commented Sep 9, 2024

Copy link
Copy Markdown
Contributor
  • The dashboard has two horizontal scroll
  • The dashboard should adapt to small screens and break the layout into two and one-column layout
2024-09-09.12-21-45.mov

@fellyph

fellyph commented Sep 9, 2024

Copy link
Copy Markdown
Contributor

When the user clicks on the cookie table on the dashboard before running an audit, the link goes to the cookie landing page. Should we redirect the user to the cookie table after the user presses "analyses page"?

2024-09-09.12-59-58.mov

mayan-000
mayan-000 reviewed Sep 10, 2024
View reviewed changes
Comment thread packages/extension/src/view/devtools/components/dashboard/constants.ts Outdated
sidebarKey: SIDEBAR_ITEMS_KEYS.PROTECTED_AUDIENCE,
},
{
name: 'Cookies',

@mayan-000 mayan-000 Sep 10, 2024

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The translation is available for most names or descriptions, I18n can be used.

mayan-000
mayan-000 reviewed Sep 10, 2024
View reviewed changes
Comment thread packages/extension/src/view/devtools/components/dashboard/constants.ts Outdated
@mohdsayed

mohdsayed commented Sep 10, 2024 •
edited
Loading

Copy link
Copy Markdown
Collaborator Author

@fellyph

The dashboard should adapt to small screens and break the layout into two and one-column layout

Fixed

When the user clicks on the cookie table on the dashboard before running an audit, the link goes to the cookie landing page. Should we redirect the user to the cookie table after the user presses "analyses page"?

I think instead of that, if the table is not available, that button should not be displayed, pushed an update for it.

@mohdsayed mohdsayed changed the title PSAT landing page and dashboard Feature: Create PSAT landing page and dashboard Sep 10, 2024
@mohdsayed mohdsayed merged commit 63985d4 into release/v0.11.0 Sep 10, 2024
@mohdsayed mohdsayed deleted the feat/psat-landing-page branch September 10, 2024 06:04
@mohdsayed mohdsayed mentioned this pull request Sep 18, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mayan-000 mayan-000 mayan-000 approved these changes

Assignees

@mohdsayed mohdsayed

Labels

enhancement New feature or request

Projects

PS Analysis Tool
Status: Done

Milestone

v0.11

Development

Successfully merging this pull request may close these issues.

5 participants

@mohdsayed @pavanpatil1 @milindmore22 @fellyph @mayan-000