mirror of
https://github.com/fleetdm/fleet
synced 2026-04-21 13:37:30 +00:00
Move VPP instructions out of UI and into guides (#43641)
- @noahtalerman: For the following quick win: - https://github.com/fleetdm/fleet/issues/43435
This commit is contained in:
Noah Talerman
GitHub
parent
b63d597846
commit
51af71f712
9 changed files with 23 additions and 99 deletions
|
|
@ -210,7 +210,6 @@ const VppPage = ({ router }: IVppPageProps) => {
|
|||
{showRenewModal && selectedToken.current && (
|
||||
<RenewVppModal
|
||||
tokenId={selectedToken.current.id}
|
||||
orgName={selectedToken.current.org_name}
|
||||
onCancel={onCancelRenewToken}
|
||||
onRenewedToken={onRenewed}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
>
|
||||
<VppSetupSteps extendendSteps />
|
||||
<p className={`${baseClass}__description`}>
|
||||
Follow the step-by-step guide to add VPP.{" "}
|
||||
<CustomLink
|
||||
url="https://fleetdm.com/learn-more-about/add-vpp"
|
||||
text="Learn how"
|
||||
newTab
|
||||
/>
|
||||
</p>
|
||||
<FileUploader
|
||||
className={`${baseClass}__file-uploader ${
|
||||
isUploading ? `${baseClass}__file-uploader--loading` : ""
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
.add-vpp-modal {
|
||||
|
||||
&__description {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__request-button {
|
||||
display: flex;
|
||||
gap: $pad-small;
|
||||
|
|
@ -39,7 +43,6 @@
|
|||
|
||||
&__file-uploader {
|
||||
margin-top: $pad-medium;
|
||||
margin-left: $pad-medium;
|
||||
|
||||
.file-uploader__message {
|
||||
color: $ui-fleet-black-75;
|
||||
|
|
|
|||
|
|
@ -5,23 +5,21 @@ import { NotificationContext } from "context/notification";
|
|||
import mdmAppleAPI from "services/entities/mdm_apple";
|
||||
|
||||
import Button from "components/buttons/Button";
|
||||
import CustomLink from "components/CustomLink";
|
||||
import { FileUploader } from "components/FileUploader/FileUploader";
|
||||
import Modal from "components/Modal";
|
||||
import VppSetupSteps from "../VppSetupSteps";
|
||||
import { getErrorMessage } from "./helpers";
|
||||
|
||||
const baseClass = "modal renew-vpp-modal";
|
||||
|
||||
interface IRenewVppModalProps {
|
||||
tokenId: number;
|
||||
orgName: string;
|
||||
onCancel: () => void;
|
||||
onRenewedToken: () => void;
|
||||
}
|
||||
|
||||
const RenewVppModal = ({
|
||||
tokenId,
|
||||
orgName,
|
||||
onCancel,
|
||||
onRenewedToken,
|
||||
}: IRenewVppModalProps) => {
|
||||
|
|
@ -68,9 +66,13 @@ const RenewVppModal = ({
|
|||
width="large"
|
||||
>
|
||||
<p className={`${baseClass}__description`}>
|
||||
Renew Volume Purchasing Program for <b>{orgName}</b> location.
|
||||
Follow the step-by-step guide to renew.{" "}
|
||||
<CustomLink
|
||||
url="https://fleetdm.com/learn-more-about/renew-vpp"
|
||||
text="Learn how"
|
||||
newTab
|
||||
/>
|
||||
</p>
|
||||
<VppSetupSteps />
|
||||
<FileUploader
|
||||
className={`${baseClass}__file-uploader`}
|
||||
accept=".vpptoken"
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
.renew-vpp-modal {
|
||||
|
||||
&__description {
|
||||
margin: 0 0 $pad-large;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__file-uploader {
|
||||
margin-top: $pad-medium;
|
||||
margin-left: $pad-medium;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,67 +0,0 @@
|
|||
import CustomLink from "components/CustomLink";
|
||||
import React from "react";
|
||||
|
||||
const baseClass = "vpp-setup-steps";
|
||||
|
||||
interface IVppSetupStepsProps {
|
||||
/** This prop is used to display additional setup steps content. We have this
|
||||
* because some places that use this component show additional content.
|
||||
*/
|
||||
extendendSteps?: boolean;
|
||||
}
|
||||
|
||||
const VppSetupSteps = ({ extendendSteps = false }: IVppSetupStepsProps) => {
|
||||
return (
|
||||
<ol className={baseClass}>
|
||||
<li>
|
||||
<span>1.</span>
|
||||
<p>
|
||||
Sign in to{" "}
|
||||
<CustomLink
|
||||
newTab
|
||||
url="https://business.apple.com"
|
||||
text="Apple Business"
|
||||
/>
|
||||
{extendendSteps && (
|
||||
<>
|
||||
<br />
|
||||
If your organization doesn't have an account, select{" "}
|
||||
<b>Sign up now</b>.
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<span>2.</span>
|
||||
<p>
|
||||
Select your <b>account name</b> at the bottom left of the screen, then
|
||||
select <b>Preferences</b>.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<span>3.</span>
|
||||
<p>
|
||||
Select <b>Payments and Billing</b> in the menu.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<span>4.</span>
|
||||
<p>
|
||||
Under the <b>Content Tokens</b>, download the token for the location
|
||||
you want to use.
|
||||
{extendendSteps && (
|
||||
<>
|
||||
<br /> Each token is based on a location in Apple Business.
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<span>5.</span>
|
||||
<p>Upload content token (.vpptoken file) below.</p>
|
||||
</li>
|
||||
</ol>
|
||||
);
|
||||
};
|
||||
|
||||
export default VppSetupSteps;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default } from "./VppSetupSteps";
|
||||
2
website/config/routes.js
vendored
2
website/config/routes.js
vendored
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Reference in a new issue