Add empty and populated states for MDM integrations settings

lukeheath commented 1 year ago

Problem

As a Fleet admin I want to turn on MDM features in Fleet so that I can automatically enroll and enforce configuration on macOS hosts when they're first unboxed.

Notes

On load, make two API calls to determine the state of the page.

GET /mdm/apple for APNs; see task 1 here: #8596
GET /mdm/apple_bm for Business Manager data: #8726

Figma

https://www.figma.com/file/hdALBDsrti77QuDNSzLdkx/%F0%9F%9A%A7-Fleet-EE-(dev-ready%2C-scratchpad)?node-id=9683%3A318828

Tasks

1

#

[x] Add "Apple Push Certificates Portal" section with empty state.
GET /mdm/apple for APNs; see task 1 here: #8596
"Request" button opens the “Request CSR” modal.
"Sign in to your..." text link links to https://identity.apple.com/pushcert/
"See how" links to TODO (YouTube video)
Page added in #8869
Modal added in #8872

2

#

[x] Add "Apple Push Certificates Portal" section with populated state.
- GET /mdm/apple

3

#

[x] Add "Apple Business Manager" section with empty state.
GET /mdm/apple_bm created in #8726
Apple Business Manager is hidden until the "Apple Push Certificates Portal" process is completed.
Apple Business Manager is only available for Fleet Premium users.
"Download" button downloads the public and private keys in the browser.
GET /mdm/apple_bm/keys to generate new public/private keys. Endpoint created in #8969
"Sign in to Apple Business Manager" links to https://business.apple.com/
"See how" links to TODO (YouTube video)

4

#

[x] Add "Apple Business Manager" populated state.
GET /mdm/apple_bm
Tooltip displayed on hover over “Team”: `macOS hosts will be added to this team when they’re first unboxed.
Clicking "Edit" button opens "Edit team" modal.
Modal added in #8872

lukeheath commented 1 year ago

@noahtalerman re: Apple Business Manager. In the UI, we spec that clicking the "Download" button will provide a public key. Upload the public key to Apple to generate a token. Provide that token to the server.

But in the CLI side of the same feature (see "Step 1" in #7515) it's spec'd so that the CLI generates a public AND private key. Upload the public key to Apple to get the token, then provide both the token and private key to the server.

My question: In the UI flow, how does the user access the ABM private key? The easiest approach would be to provide both the private and public key in the API response.

noahtalerman commented 1 year ago

In the UI, we spec that clicking the "Download" button will provide a public key But in the CLI side of the same feature (see "Step 1" in https://github.com/fleetdm/fleet/issues/7515) it's spec'd so that the CLI generates a public AND private key

Ah, shoot.

@lukeheath clicking the "Download" button in the UI should automatically download a public key AND private key in the browser (same items as the CLI).

I missed this when writing the Figma dev notes (now updated). Thanks for catching this!

lukeheath commented 1 year ago

@RachelElysia @noahtalerman Heads up; there is not currently an endpoint spec'd to retrieve the Apple Business Manager public/private keys. In a discussion with Michal on requirements in this thread. Once we lock in the specs, I'll create a new ticket to track the API work.

noahtalerman commented 1 year ago

Heads up; there is not currently an endpoint spec'd to retrieve the Apple Business Manager public/private keys

Thanks for the heads up 👍

lukeheath commented 1 year ago

@RachelElysia We have the endpoints sorted out. This ticket has three backend blockers, which I've updated above. One blocker is merged (and no longer a blocker), one is "In Review", and the other is "In Progress" and should have a PR in tomorrow.

I expect this ticket will be fully unblocked early next week.

RachelElysia commented 1 year ago

@noahtalerman @lukeheath Since each section is making separate API calls to populate, should there be mocks for error states?

lukeheath commented 1 year ago

@RachelElysia Good point. Let's use the same import TableDataError from "components/DataError"; we're using on the manage queries page. One for each section. Would you please update the specs to reflect that state? Thanks!

lukeheath commented 1 year ago

@RachelElysia Would you please refresh my memory with the plan for integrating the API endpoints? It looks like they are ready, so I propose we move this ticket back to "In Progress" and you put together a 2nd PR that includes the API integration. What do you think?

lukeheath commented 1 year ago

@RachelElysia Tested locally and it appears the frontend is still using the mock API requests. The backend is ready, so I'm bringing this back into progress. Let me know if you have any blockers.

RachelElysia commented 1 year ago

Connecting the API Merged: https://github.com/fleetdm/fleet/pull/9533

lukeheath commented 1 year ago

@RachelElysia ⚡ Thank you!

fleet-release commented 1 year ago

Enabling MDM control Gives admins a way To manage devices whole

fleetdm / fleet