From 51af71f7122ad90adea817f06056c6e58adf4866 Mon Sep 17 00:00:00 2001 From: Noah Talerman <47070608+noahtalerman@users.noreply.github.com> Date: Fri, 17 Apr 2026 12:23:48 -0500 Subject: [PATCH] Move VPP instructions out of UI and into guides (#43641) - @noahtalerman: For the following quick win: - https://github.com/fleetdm/fleet/issues/43435 --- .../cards/MdmSettings/VppPage/VppPage.tsx | 1 - .../components/AddVppModal/AddVppModal.tsx | 11 ++- .../components/AddVppModal/_styles.scss | 5 +- .../RenewVppModal/RenewVppModal.tsx | 12 ++-- .../components/RenewVppModal/_styles.scss | 3 +- .../VppSetupSteps/VppSetupSteps.tsx | 67 ------------------- .../components/VppSetupSteps/_styles.scss | 20 ------ .../VppPage/components/VppSetupSteps/index.ts | 1 - website/config/routes.js | 2 + 9 files changed, 23 insertions(+), 99 deletions(-) delete mode 100644 frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/VppSetupSteps/VppSetupSteps.tsx delete mode 100644 frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/VppSetupSteps/_styles.scss delete mode 100644 frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/VppSetupSteps/index.ts diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/VppPage.tsx b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/VppPage.tsx index a614a470c4..2687258189 100644 --- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/VppPage.tsx +++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/VppPage.tsx @@ -210,7 +210,6 @@ const VppPage = ({ router }: IVppPageProps) => { {showRenewModal && selectedToken.current && ( diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/AddVppModal/AddVppModal.tsx b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/AddVppModal/AddVppModal.tsx index a86cc78ee2..91928f0f61 100644 --- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/AddVppModal/AddVppModal.tsx +++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/AddVppModal/AddVppModal.tsx @@ -5,9 +5,9 @@ import mdmAppleAPI from "services/entities/mdm_apple"; import Modal from "components/Modal"; import Button from "components/buttons/Button"; +import CustomLink from "components/CustomLink"; import FileUploader from "components/FileUploader"; -import VppSetupSteps from "../VppSetupSteps"; import { getErrorMessage } from "./helpers"; const baseClass = "add-vpp-modal"; @@ -57,7 +57,14 @@ const AddVppModal = ({ onCancel, onAdded }: IAddVppModalProps) => { onExit={onCancel} width="large" > - +

+ Follow the step-by-step guide to add VPP.{" "} + +

void; onRenewedToken: () => void; } const RenewVppModal = ({ tokenId, - orgName, onCancel, onRenewedToken, }: IRenewVppModalProps) => { @@ -68,9 +66,13 @@ const RenewVppModal = ({ width="large" >

- Renew Volume Purchasing Program for {orgName} location. + Follow the step-by-step guide to renew.{" "} +

- { - return ( -
    -
  1. - 1. -

    - Sign in to{" "} - - {extendendSteps && ( - <> -
    - If your organization doesn't have an account, select{" "} - Sign up now. - - )} -

    -
    2. -
  2. - 2. -

    - Select your account name at the bottom left of the screen, then - select Preferences. -

    -
    3. -
  3. - 3. -

    - Select Payments and Billing in the menu. -

    -
    4. -
  4. - 4. -

    - Under the Content Tokens, download the token for the location - you want to use. - {extendendSteps && ( - <> -
    Each token is based on a location in Apple Business. - - )} -

    -
    5. -
  5. - 5. -

    Upload content token (.vpptoken file) below.

    -
    6. -
- ); -}; - -export default VppSetupSteps; diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/VppSetupSteps/_styles.scss b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/VppSetupSteps/_styles.scss deleted file mode 100644 index 23dd2748b9..0000000000 --- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/VppSetupSteps/_styles.scss +++ /dev/null @@ -1,20 +0,0 @@ -.vpp-setup-steps { - font-size: $x-small; - display: flex; - flex-direction: column; - gap: $pad-large; - padding: 0; - margin: 0; - max-width: 660px; - list-style: none; - - li { - display: flex; - flex-direction: row; - gap: $pad-small; - - p { - margin: 0; - } - } -} diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/VppSetupSteps/index.ts b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/VppSetupSteps/index.ts deleted file mode 100644 index 94ab3ee836..0000000000 --- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/VppSetupSteps/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./VppSetupSteps"; diff --git a/website/config/routes.js b/website/config/routes.js index 55710812c9..5b03033e54 100644 --- a/website/config/routes.js +++ b/website/config/routes.js @@ -1178,6 +1178,8 @@ module.exports.routes = { 'GET /learn-more-about/setup-windows-mdm': '/guides/windows-mdm-setup', 'GET /learn-more-about/setup-abm': '/docs/using-fleet/mdm-setup#apple-business-manager-abm', 'GET /learn-more-about/renew-apns': '/guides/apple-mdm-setup#renew-apns', + 'GET /learn-more-about/add-vpp': '/guides/apple-mdm-setup#volume-purchasing-program-vpp', + 'GET /learn-more-about/renew-vpp': '/guides/apple-mdm-setup#renew-vpp', 'GET /learn-more-about/renew-abm': '/docs/using-fleet/mdm-setup#apple-business-manager-abm', 'GET /learn-more-about/abm-issues': '/guides/apple-mdm-setup#troubleshooting', 'GET /learn-more-about/fleet-server-private-key': '/docs/configuration/fleet-server-configuration#server-private-key',