Add New Controls Page

[ghernandez345]

We'd like to add a new Controls page that will contain the tabbed controls for macOS updates and macOS settings. We also want to update the styling of the main navigation and masthead to match the styleguide now addressed in Issue #9561 and PR #9536.

Requirements

• [x] 1. Add the Controls tab to the main navigation

  • [x] the tab navigates to /controls/mac-updates
    • [x] - only global/team admin and global/team users can see this tab

• [x] 1.5. Add empty state for when a user hasn't set up push certificates yet

• [x] 2. Implement team context dropdown on the Controls page

  • [x] - for Free Tier users:
    • [x] - The word Controls is rendered for Free tier users
  • [x] - for Premium Tier users:
    • [x] - The team context dropdown is rendered for Premium tier users.
    • [x] - The default selected option is No team (There is no All teams option)
    • [x] - Selecting a team filtered the page results and adds a team_id=id query param to the URL.

• [x] 3. Implement tabbed controls for "macOS updates" and "macOS settings".

  • [x] - the default selected tab is macOS updates
  • [x] - clicking on the macOS updates tab navigates to /controls/mac-updates
  • [x] - clicking on the macOS settings tab navigates to /controls/mac-settings
  • [x] - the tab panel content is left empty for now (will be implemented in another ticket).

• [x] 4. Update masthead styles *now addressed in Issue #9561 and PR #9536**.

Design

UI

Feature:

https://www.figma.com/file/hdALBDsrti77QuDNSzLdkx/%F0%9F%9A%A7-Fleet-EE-(dev-ready%2C-scratchpad)?node-id=11539%3A321344&t=lPT0qtEXRa8wpvUK-0

Masthead Styleguide updates: *now addressed in Issue #9561 and PR #9536**. https://www.figma.com/file/qbjRu8jf01BzEfdcge1dgu/Fleet-style-guide-2022-(WIP)?node-id=210%3A10349&t=jGVIzhwHOjTxv28p-0

[lukeheath]

Hey team! Please add your planning poker estimate with Zenhub @ghernandez345 @jacobshandling @RachelElysia

[jacobshandling]

@noahtalerman the other site-level nav item specific to admins and maintainers (Policies) is appended to the end of the nav list, and the code is currently set up such that it's very simple to tack on one more similarly visible item to the end. Is it important that Controls be the 2nd nav item or is it okay if it's the last or second to last? Either way, it's not too difficult to flip the order around

[noahtalerman]

@jacobshandling if it's not too difficult, I prefer that we make "Controls" the second tab (after "Hosts").

This is because we'd like the tabs with the "read features" (queries, schedule, policies) to stay together in the nav. We also want the "write features" (controls and soon software) will also sit together.

[jacobshandling]

@noahtalerman I have some memory of a specification to have an empty state like Rachel's other ones when a Free user navigates to the Controls page, but can't find it anywhere. Do we want that, and if so can you point me to the spec/Figma?

[noahtalerman]

empty state like Rachel's other ones when a Free user navigates to the Controls page

@jacobshandling we want to show an empty state for free users on the Controls > macOS updates tab.

I'm linking to where this is specified in Figma here: https://www.figma.com/file/hdALBDsrti77QuDNSzLdkx/%F0%9F%9A%A7-Fleet-EE-(dev-ready%2C-scratchpad)?node-id=12195%3A329751&t=zgFgkDoYHLJCmtVk-1

[jacobshandling]

we want to show an empty state for free users on the Controls > macOS updates tab.

@noahtalerman I'm still unclear on where this empty state should go – in this comment are you saying Page-level, in which case it would replace the tabs? Or should it be tab-level, with the tabs still be visible to free users, and show the same empty state under both tabs?

If the empty state should be within the tabs, I'll leave it to @ghernandez345 on this other issue. If it's page level that would seem to fall into this issue.

Thanks for the clarification 🙏🏼

[jacobshandling]

@mike-j-thomas @noahtalerman with the new navbar background color being $core-fleet-black, we would lose the current darkening effect when the user hovers over a site nav link, since that is the color it currently fades to when the user hovers like that. Double-checking that you're asking us to remove that feature?

I'm also seeing a new font, "Inter," all across the style guide, so double-checking that you want us to change to using that font?

[mike-j-thomas]

@jacobshandling, thanks for checking. The updated color for the ~overlay~ hover state is in the component on Figma. It just needs a bit of digging. I'm sorry, I haven't had a chance to document the masthead in the guide fully.

https://www.figma.com/file/qbjRu8jf01BzEfdcge1dgu/Fleet-style-guide-2022-(WIP)?node-id=210%3A10349

Please ignore the font for now. Planning to update to a more UI-friendly typeface (that renders consistently across all Fleet material). @ghernandez345 is aware. I am just waiting on the official go-ahead.

Thanks!

[mike-j-thomas]

@jacobshandling #0E1533 🙌

[ghernandez345]

If the empty state should be within the tabs, I'll leave it to @ghernandez345 on this other issue. If it's page level that would seem to fall into this issue.

@jacobshandling I'll handle that in my PR.

[noahtalerman]

If the empty state should be within the tabs, I'll leave it to @ghernandez345 on this other issue.

👍 Just confirming it should be tab level

[jacobshandling]

@noahtalerman the new masthead styles have an updated default user avatar. Is it important to keep using gravatar.com for serving this? If so, can/should we replace the current .png there with an .svg? If not, can/should I add an svg Icon for that from our own server? cc: @gillespi314, who was the last to touch this

[jacobshandling]

@mike-j-thomas Can you please confirm if you want the default Avatar updated? If so, is it supposed to be transparent, taking the fill color of its background? Current avatar is not transparent

[mike-j-thomas]

@jacobshandling, yes, please. Now's a good chance to update to the default avatar in Figma.

[jacobshandling]

@mike-j-thomas @noahtalerman in the updated Figma with the empty state it specifically says "new button styles. See style guide for interactions," but I don't see a differences. Can you please write a changefile for any style updates you make / have made to make it easier to tell what has been updated?

[mike-j-thomas]

Hi @jacobshandling. I don't know what you mean by a change file. If what's detailed in Figma is the same as what's live, then Frontend must have already updated the button styles in another issue since these wireframes were created. Could you let me know if you're tracking what has been implemented from the new style guide anywhere?

[mike-j-thomas]

@jacobshandling, I think we've both just asked for the same thing 😆

[noahtalerman]

See style guide for interactions," but I don't see a differences

@jacobshandling @mike-j-thomas once difference I notice is the font weight. The buttons that are live (screenshot 1) seem to have a bold font weight while the style guide indicates that we'd like a lighter font weight (screenshot 2)

[noahtalerman]

Can you please write a changefile for any style updates you make / have made to make it easier to tell what has been updated?

@jacobshandling by changefile do you mean a file in the /changes directory? I thought this was used by the engineering team to record what's been implemented reach release. I'm not sure this is the best solution because these files are cleared out after each release. I suspect styleguide changes will span multiple releases.

@ghernandez345 and @mike-j-thomas what do you think about creating a big issue that tracks styleguide changes. This way we have a place to see what's been implemented and what hasn't. This issue can stay open across multiple releases.

[ghernandez345]

@ghernandez345 and @mike-j-thomas what do you think about creating a big issue that tracks styleguide changes. This way we have a place to see what's been implemented and what hasn't. This issue can stay open across multiple releases.

I currently have this ticket created which includes styleguide updates as a subtask (#2 in the tasks section). https://github.com/fleetdm/fleet/issues/8978

I think we should do what you recommend and then link to that issue.

[ghernandez345]

Hi @jacobshandling. I don't know what you mean by a change file. If what's detailed in Figma is the same as what's live, then Frontend must have already updated the button styles in another issue since these wireframes were created. Could you let me know if you're tracking what has been implemented from the new style guide anywhere?

@mike-j-thomas We have not been tracking this in issues. We have been doing it ad-hoc. I agree with @noahtalerman comment that we need an issue to track the specific updates we are working on to update to the new styleguide. Seems this UI styleguide update needs a bit of project management. @mike-j-thomas can we work through this together during our next meeting?

[ghernandez345]

@jacobshandling @mike-j-thomas once difference I notice is the font weight. The buttons that are live (screenshot 1) seem to have a bold font weight while the style guide indicates that we'd like a lighter font weight (screenshot 2)

@noahtalerman, @jacobshandling. is it ok if we ignore typography changes to match the styleguide atm. This is something we and @mike-j-thomas talked about and thinking this is one the issues that will need to be done all at once. I wouldn't want us to try to squash it in with a feature, as typography change is going to appear across the entire application UI.

[noahtalerman]

@noahtalerman, @jacobshandling. is it ok if we ignore typography changes to match the styleguide atm. This is something we and @mike-j-thomas talked about and thinking this is one the issues that will need to be done all at once

@ghernandez345 ah, ok! Ty for the clarification. Ignoring typography for now makes sense to me.

[fleet-release]

Clouds soar high above,
Controls page for Mac updates
User convenience gain.