[Sprint 7b]: Settings Page & Design Overhaul 🖼️ - Justin & Jack & Steven

[danglorioso]

💻 Summary

In this sprint, you will clean up the Settings page to make it more user friendly, as well as fix-up more design throughout the site to improve design consistency and responsiveness.

Goals of this sprint:

• Learn about the best practices for designing responsive systems.
• Think critically about the ways in which we can improve the app experience for users that may not know how to use the site.

⚙️ Setup

Before starting:

1. PLEASE: Pull the latest changes from main: git pull
2. Create a new branch for this sprint.
3. Install dependencies: npm i
4. Run the dev server and verify the site builds: npm run dev
5. Confirm everything runs.
   If you experience problems, check your .env is up to date!

🧭 Implementation

Step 0: Disclaimer

• Many of these changes can be implemented independently, and do not necessarily have to be fixed in this order. Feel free to jump around in any order you see best fit.
• A lot of these fixes are resolving annoying behaviors of the site that go against what a user would typically expect to happen. Basically, we are trying to make this site operate as smoothly as possible.

Step 1: Tabs to Settings Page

• The Settings page is lowkey messy. We’ve been adding various settings to it but there is no participle rhyme or reason for how the components are laid out. Let’s fix that.
• We want to add tabs to this page. See the Figma for reference. The two tabs (for now) are: “Data management” which deals with setting gateway schools and school locations and “Team & access” which deals with setting user permissions.
• As part of this step, please examine all of the input fields and table components and ensure they are all consistent with each other. Make sure all components that could be reused are reused appropriately and not hard-coded. Again, see the Figma for exactly what these components should look like.
• Check for page width consistency as well. Switching tabs should not Each of these tabs should look similar on the page and should not be jumpy when switching between them. This is almost exclusively a front-end task, so it is critical that this page matches the Figma exactly.
• It’s difficult to spell out what exactly needs to change but use your best judgement to make it visually nice.

Step 2: Setting Page “Save” Bar

• Tika has designed a very floating bar along the bottom that shows us when there are unsaved changes. Implement this component and replace the existing text that says “You have unsaved changed - save?”
• This bar should only appear when these actually are unsaved changes. Instead of being fixed at the bottom of the page and possibly missing, this bar should pop up from the bottom of the screen and always be displayed across the bottom when there are unsaved changes.
• Additionally, if a user tries to leave the page and there are unsaved changes, add an alert that stops the user before and lets them decide whether they want to save or discard changes.

Step 3: Cell Mistype in Upload

• When a user uploads a spreadsheet that contains cells with invalid or unrecognizable types, an error screen is displayed that outlines the exact cells (i.e. A58, D734) where the error was found.
• In Sprint 5d, Chiara and Zander implemented this feature. Now we want to modify it slightly to help the user even more.
• In addition to displaying the exact cells with errors, the user should be able to hover over the cell identifier (i.e. A58, again) and see what value is currently in that cell and also what type is expected.
• Refer to the Figma for styling but the cell name should have a red swiggle underneath it, similar to when you misspell a word and auto-correct provides a suggestion. When the user hovers over this cell name and swiggle, it should display a popup with the exact content of that cell and the type that was expected.

Step 3: Export to PDF confirmation dialogue

• Right now when a user exports a report, it just downloads without any sort of confirmation indicator.
• Add a dialogue popup that warns the user before downloading that it will download a PDF to their computer. When they click to Download, then issue the download action.
• Additionally, add a processing animation to the export button when it is actually downloading the file and then a success toast when it is complete.
• Note that there are multiple ways to export. One is the single export on the bar/line charts, and the second is the multiexport. Ensure the confirmation dialogue is displayed for both of these features.

Step 4: Tooltip prediction cone

• An important part of responsiveness is ensuring that the product behaves in the ways a user would expect. On the heatmap, we already have a tooltip that appears when you click on a school, but it would be very nice if the tooltip persisted (stayed visible on the screen) when you hover over the school icon and move the mouse over the tooltip.
• You’ll notice that you currently have to click on the school icon for the tooltip to stay active, however, the tooltip appears when you hover over the school icon.
• Change the tooltip so that when a user hovers over all part of the component, the tooltip remains open. Only when the user’s mouse moves off of the tooltip should the tooltip disappear (if they didn’t click on it to open it).
• If the user clicks on the school icon, the tooltip should still remain active until the escape key is pressed or any other part of the map is clicked.
• Implement a tooltip prediction cone, which is essentially a triangle region of space between the bottom of the school icon and the right and left edges of the tooltip where the user’s mouse may travel and the tooltip will still remain open.
• Check out this resource from Tika for more details: https://x.com/davepl1968/status/2024212235435069667?s=46

Step 5: Filter auto-open

• In charts page when you add a new filter, the filter appears in the list of active filters but the pop-up to select the constraints on that filter do not automatically display. Instead the user has to click again on the added filter to apply the constraints (i.e. click on the school they want to filter by).
• Instead, we want the filters window to open automatically when a user adds a filter. After all, the next step after adding a filter is always adding the constraints.
• Use your best judgement on which specific filters you need to add this functionality to. For example, the teacher one does not need an automatic popup as there is no window.
• Additionally, remove the tooltip next to "Filters" as it is no longer necessary.

🙌 Acceptance Criteria

• Export dialogue before downloading
• Responsive while downloading a PDF, confirmation toast
• Popup dialogues when unsaved changes in settings
• Tooltips need to stay open on hover
• Filter windows automatically open when a new filter is applied.
• UI matches Figma exactly
• Code runs locally without errors and builds successfully
• Merge via PR

⁉️ Questions

If you get stuck or have questions:

• DM Dan or Shayne on Slack
• Come to office hours or ask during a hack night
• Ask questions during team meetings – we’re here to help!

📝 Resources

• Figma - Tailwind CSS
• shadcn/ui
• npm package manager