Settings Page

[jauyong]

Feature description

As a plugin user, I want to be able to manage my settings such as updating fonts and icons

This is a blocker to #460 and #461

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

1. Add a new settings page under the "Getting Started" tabs
2. Add option for manual icon update
3. Add option for manual font update
4. Add Option to Reset Settings #537 Add option to delete cache, reset demo content, hard reset theme... @jauyong to create a ticket for this. need to identify what can be reset. This ticket will help users troubleshoot and get back to a stable default state.
5. Add any settings that affect the backend (ie settings that don't belong in the customizer)
6. Add API Key field
7. When the API key is entered and the user refreshes/returns to the page, the key should be hidden (like how passwords are treated) or consider removing the text field altogether. Also look at Github secrets.
8. Clicking on "activate Google API Key" first brings you down to the input field on the page.

Implementation brief

QA testing instructions

Demo

Changelog entry

[jauyong]

@jwold do I recall correctly that you wanted to take a look at this first?

[jauyong]

@jwold Aaron just confirmed that you wanted to look at this first to provide a design, so passing it on to you.

There were comments to mirror the existing "getting started" look and feel, but I'm sure you'll work out what's best ;)

[jauyong]

Reassigning to @dawidmlynarz to take a look

[dawidmlynarz]

Hey @jauyong , here is my first draft and a quick prototype of the Settings page. I tried to keep the same styles from the 'Getting Started' page to keep consistency.

The first section of the page is Resources but if you have a better name please let me know. It consists of Google Fonts and Material Icons tiles with the ability to Update them manually or turn on auto-updates. That's something I discussed with @ravichdev but I'd love to get the technical feedback again as well.

Things I've additionally included into the concept:

• Settings tab in the left side menu with a notification when the new updates appear.
• Last update date to have more context when the user comes to the page.

Take a look at the quick prototype recording and let me know your thoughts.

Settings.page.-.Concept.-.V1.mov

Looking forward to your feedback!

[dawidmlynarz]

Please have a look at the revisited version of the Settings page. The following changes were made:
• Settings page is now below Getting started on sidebar
• Resources section name was changed into Integrations
• Created new section for Google API Key
• Included ability to Edit / Delete activated Google API Key
• Presented how Google API Key dependency could work with Integrations

Settings.+.Google.API.Key.mov

Looking forward to more feedback on this.

[jauyong]

When the API key is entered, and the user returns to the page, the key should be hidden like a password is. Or consider removing the text field altogether. (look at Github secrets)

Jason to update AC and reference the ticket to reset settings.

[dawidmlynarz]

@jauyong Here is the proposal of how can we handle the 'hidden state'. We can display it again once someone wants to edit it. The question to consider is: Should this access be password protected?

[jauyong]

@dawidmlynarz good question. Password protection wasn't mentioned when we were discussing this. I feel like that could cause more headaches for us and the user through complexities like password management. We can ask the team though.

I also remember it being mentioned that users shouldn't be able to edit the keys, but only remove them. I don't see any notes here and that your approved video demo shows an edit button.

@rodydavis can you confirm:

1. Users can only delete a saved API key, not edit.
2. Is there any need for password protecting the API key?

[jauyong]

@dawidmlynarz to make the following update:

1. remove the edit button.

no need for password protection.

[dawidmlynarz]

Please find updated screens of Google API Key interaction below divided into states:

Empty state

Active / Typing KEY

API Key Activated

API Key Hidden

API Key Remove Confirmation

NOTE: Let me know when you're taking the task and I can provide you a link to Figma.

[ravichdev]

@dawidmlynarz Looks good, for the API key field, after a user enters the key and saves it, they wouldn't be able to see it. It will be *** like a password field. We are good here though, don't think we need to update the mocks to denote the password field update.

[emeaguiar]

@dawidmlynarz Would you happen to have either the figma link or a sketch file with these updates? Wondering if I can get the color values or there more specifics that I can't get in the videos

[dawidmlynarz]

@emeaguiar I have sent you Figma link via Slack. Let me know if you have access.