diff --git a/changes/23234-bug-fix b/changes/23234-bug-fix new file mode 100644 index 0000000000..c38071cd81 --- /dev/null +++ b/changes/23234-bug-fix @@ -0,0 +1,2 @@ +- Add App Store app UI: Added different empty state when VPP token is not added at all vs. when it's + not assigned to a team to prevent confusion. diff --git a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAddPage.tsx b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAddPage.tsx index 08d4947574..ef9f244ab2 100644 --- a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAddPage.tsx +++ b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAddPage.tsx @@ -28,7 +28,7 @@ const addSoftwareSubNav: IAddSoftwareSubNavItem[] = [ pathname: PATHS.SOFTWARE_ADD_FLEET_MAINTAINED, }, { - name: "App store (VPP)", + name: "App Store (VPP)", pathname: PATHS.SOFTWARE_ADD_APP_STORE, }, { diff --git a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAppStoreVpp/AddSoftwareVppForm/AddSoftwareVppForm.tsx b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAppStoreVpp/AddSoftwareVppForm/AddSoftwareVppForm.tsx index 3fb066d791..47d43700f5 100644 --- a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAppStoreVpp/AddSoftwareVppForm/AddSoftwareVppForm.tsx +++ b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAppStoreVpp/AddSoftwareVppForm/AddSoftwareVppForm.tsx @@ -29,6 +29,26 @@ const EnableVppCard = () => {

To add App Store apps, first enable VPP.

+ + + + ); +}; + +const EditVppCard = () => { + return ( + +
+

+ This team isn't added to Volume Purchasing Program (VPP) +

+

+ To add App Store apps, first add this team to VPP. +

{ interface IAddSoftwareVppFormProps { teamId: number; + noVppTokenUploaded: boolean; hasVppToken: boolean; router: InjectedRouter; vppApps?: IVppApp[]; @@ -127,6 +148,7 @@ interface IAddSoftwareVppFormProps { const AddSoftwareVppForm = ({ teamId, + noVppTokenUploaded, hasVppToken, router, vppApps, @@ -206,10 +228,14 @@ const AddSoftwareVppForm = ({ }; const renderContent = () => { - if (!hasVppToken) { + if (noVppTokenUploaded) { return ; } + if (!hasVppToken) { + return ; + } + if (vppApps) { if (vppApps.length === 0) { return ; diff --git a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAppStoreVpp/SoftwareAppStoreVpp.tsx b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAppStoreVpp/SoftwareAppStoreVpp.tsx index 20baddab73..2c8d0ba3a9 100644 --- a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAppStoreVpp/SoftwareAppStoreVpp.tsx +++ b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAppStoreVpp/SoftwareAppStoreVpp.tsx @@ -17,7 +17,7 @@ import AddSoftwareVppForm from "./AddSoftwareVppForm"; import { teamHasVPPToken } from "./helpers"; const baseClass = "software-app-store-vpp"; - +// interface ISoftwareAppStoreProps { currentTeamId: number; router: InjectedRouter; @@ -43,6 +43,7 @@ const SoftwareAppStoreVpp = ({ } ); + const noVppTokenUploaded = !vppInfo || !vppInfo.vpp_tokens.length; const hasVppToken = teamHasVPPToken(currentTeamId, vppInfo?.vpp_tokens); const { @@ -81,6 +82,7 @@ const SoftwareAppStoreVpp = ({ router={router} teamId={currentTeamId} hasVppToken={hasVppToken} + noVppTokenUploaded={noVppTokenUploaded} vppApps={vppApps} />