integrations with API

fleetdm · Jul 4, 2024 · ebd3cb6 · ebd3cb6
1 parent 2d66479
commit ebd3cb6
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 19 deletions.
diff --git a/frontend/pages/admin/IntegrationsPage/cards/Vpp/Vpp.tsx b/frontend/pages/admin/IntegrationsPage/cards/Vpp/Vpp.tsx
@@ -1,13 +1,19 @@
 import React, { useContext } from "react";
 import { InjectedRouter } from "react-router";
+import { useQuery } from "react-query";
+import { AxiosError } from "axios";
 
 import PATHS from "router/paths";
+import { AppContext } from "context/app";
+import mdmAppleAPI, { IGetVppInfoResponse } from "services/entities/mdm_apple";
+import { DEFAULT_USE_QUERY_OPTIONS } from "utilities/constants";
 
 import Card from "components/Card";
 import SectionHeader from "components/SectionHeader";
 import Button from "components/buttons/Button";
 import Icon from "components/Icon";
-import { AppContext } from "context/app";
+import Spinner from "components/Spinner";
+import DataError from "components/DataError";
 
 const baseClass = "vpp";
 
@@ -92,14 +98,36 @@ interface IVppProps {
 const Vpp = ({ router }: IVppProps) => {
   const { config } = useContext(AppContext);
 
-  return (
-    <div className={baseClass}>
-      <SectionHeader title="Volume Purchasing Program (VPP)" />
+  const { data: vppData, error: vppError, isLoading } = useQuery<
+    IGetVppInfoResponse,
+    AxiosError
+  >("vppInfo", () => mdmAppleAPI.getVppInfo(), {
+    ...DEFAULT_USE_QUERY_OPTIONS,
+    retry: false,
+  });
+
+  const renderContent = () => {
+    if (isLoading) {
+      return <Spinner />;
+    }
+
+    if (vppError?.status !== 404) {
+      return <DataError />;
+    }
+
+    return (
       <VppCard
         isAppleMdmOn={!!config?.mdm.enabled_and_configured}
-        isVppOn={false}
+        isVppOn={!!vppData && vppError.status !== 404}
         router={router}
       />
+    );
+  };
+
+  return (
+    <div className={baseClass}>
+      <SectionHeader title="Volume Purchasing Program (VPP)" />
+      <>{renderContent()}</>
     </div>
   );
 };

diff --git a/frontend/pages/admin/IntegrationsPage/cards/Vpp/VppSetupPage/VppSetupPage.tsx b/frontend/pages/admin/IntegrationsPage/cards/Vpp/VppSetupPage/VppSetupPage.tsx
@@ -1,16 +1,23 @@
 import React, { useContext, useState } from "react";
 import { InjectedRouter } from "react-router";
+import { useQuery } from "react-query";
+import { AxiosError } from "axios";
 
 import PATHS from "router/paths";
 import { NotificationContext } from "context/notification";
 import { getErrorReason } from "interfaces/errors";
+import mdmAppleAPI, { IGetVppInfoResponse } from "services/entities/mdm_apple";
+import { DEFAULT_USE_QUERY_OPTIONS } from "utilities/constants";
 
 import MainContent from "components/MainContent";
 import BackLink from "components/BackLink";
 import FileUploader from "components/FileUploader";
 import DataSet from "components/DataSet";
 import Button from "components/buttons/Button";
 
+import Spinner from "components/Spinner";
+import DataError from "components/DataError";
+
 import DisableVppModal from "./components/DisableVppModal";
 import VppSetupSteps from "./components/VppSetupSteps";
 import RenewVppTokenModal from "./components/RenewVppTokenModal";
@@ -27,6 +34,7 @@ const VPPSetupContent = ({ router }: IVppSetupContentProps) => {
 
   const uploadToken = async (data: FileList | null) => {
     setIsUploading(true);
+
     const token = data?.[0];
     if (!token) {
       setIsUploading(false);
@@ -35,17 +43,16 @@ const VPPSetupContent = ({ router }: IVppSetupContentProps) => {
     }
 
     try {
-      // TODO: API integration
-      // await mdmAppleBmAPI.uploadToken(token);
+      await mdmAppleAPI.uploadVppToken(token);
       renderFlash(
         "success",
         "Volume Purchasing Program (VPP) integration enabled successfully."
       );
       router.push(PATHS.ADMIN_INTEGRATIONS_VPP);
     } catch (e) {
       // TODO: error messages
-      const msg = getErrorReason(e);
-      if (msg.toLowerCase().includes("valid token")) {
+      const msg = getErrorReason(e, { reasonIncludes: "valid token" });
+      if (msg) {
         renderFlash("error", msg);
       } else {
         renderFlash("error", "Couldn't Upload. Please try again.");
@@ -114,6 +121,36 @@ const VppSetupPage = ({ router }: IVppSetupPageProps) => {
   const [showDisableModal, setShowDisableModal] = useState(false);
   const [showRenewModal, setShowRenewModal] = useState(false);
 
+  const { data: vppData, error: vppError, isLoading } = useQuery<
+    IGetVppInfoResponse,
+    AxiosError
+  >("vppInfo", () => mdmAppleAPI.getVppInfo(), {
+    ...DEFAULT_USE_QUERY_OPTIONS,
+    retry: false,
+  });
+
+  const renderContent = () => {
+    if (isLoading) {
+      return <Spinner />;
+    }
+
+    if (vppError?.status !== 404) {
+      return <DataError />;
+    }
+
+    // 404 means there is no token, se we want to show the setup steps content
+    if (vppError.status === 404) {
+      return <VPPSetupContent router={router} />;
+    }
+
+    return vppData ? (
+      <VPPDisableOrRenewContent
+        onDisable={() => setShowDisableModal(true)}
+        onRenew={() => setShowRenewModal(true)}
+      />
+    ) : null;
+  };
+
   return (
     <MainContent className={baseClass}>
       <>
@@ -123,14 +160,7 @@ const VppSetupPage = ({ router }: IVppSetupPageProps) => {
           className={`${baseClass}__back-to-vpp`}
         />
         <h1>Volume Purchasing Program (VPP)</h1>
-        {true ? (
-          <VPPSetupContent router={router} />
-        ) : (
-          <VPPDisableOrRenewContent
-            onDisable={() => setShowDisableModal(true)}
-            onRenew={() => setShowRenewModal(true)}
-          />
-        )}
+        {renderContent()}
       </>
       {showDisableModal && (
         <DisableVppModal onExit={() => setShowDisableModal(false)} />

diff --git a/...in/IntegrationsPage/cards/Vpp/VppSetupPage/components/DisableVppModal/DisableVppModal.tsx b/...in/IntegrationsPage/cards/Vpp/VppSetupPage/components/DisableVppModal/DisableVppModal.tsx
@@ -1,4 +1,7 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
+
+import mdmAppleAPI from "services/entities/mdm_apple";
+import { NotificationContext } from "context/notification";
 
 import Modal from "components/Modal";
 import Button from "components/buttons/Button";
@@ -10,10 +13,25 @@ interface IDisableVppModalProps {
 }
 
 const DisableVppModal = ({ onExit }: IDisableVppModalProps) => {
+  const { renderFlash } = useContext(NotificationContext);
   const [isDisabling, setIsDisabling] = useState(false);
 
-  const onDisableVpp = () => {
+  const onDisableVpp = async () => {
     // TODO: API integration
+    try {
+      await mdmAppleAPI.disableVpp();
+      renderFlash(
+        "success",
+        "Volume Purchasing Program (VPP) disabled successfully."
+      );
+    } catch {
+      renderFlash(
+        "error",
+        "Couldn't disable Volume Purchasing Program (VPP). Please try again."
+      );
+    }
+
+    onExit();
   };
 
   return (

diff --git a/frontend/services/entities/mdm_apple.ts b/frontend/services/entities/mdm_apple.ts
@@ -2,6 +2,12 @@
 import sendRequest from "services";
 import endpoints from "utilities/endpoints";
 
+export interface IGetVppInfoResponse {
+  org_name: string;
+  renew_date: string;
+  location: string;
+}
+
 export default {
   getAppleAPNInfo: () => {
     const { MDM_APPLE_PNS } = endpoints;
@@ -25,4 +31,21 @@ export default {
     const { MDM_REQUEST_CSR } = endpoints;
     return sendRequest("GET", MDM_REQUEST_CSR);
   },
+
+  getVppInfo: (): Promise<IGetVppInfoResponse> => {
+    const { MDM_APPLE_VPP } = endpoints;
+    return sendRequest("GET", MDM_APPLE_VPP);
+  },
+
+  uploadVppToken: (token: File) => {
+    const { MDM_APPLE_VPP_TOKEN } = endpoints;
+    const formData = new FormData();
+    formData.append("token", token);
+    return sendRequest("POST", MDM_APPLE_VPP_TOKEN, formData);
+  },
+
+  disableVpp: () => {
+    const { MDM_APPLE_VPP_TOKEN } = endpoints;
+    return sendRequest("DELETE", MDM_APPLE_VPP_TOKEN);
+  },
 };
diff --git a/frontend/utilities/endpoints.ts b/frontend/utilities/endpoints.ts
@@ -85,6 +85,10 @@ export default {
   MDM_SUMMARY: `/${API_VERSION}/fleet/hosts/summary/mdm`,
   MDM_REQUEST_CSR: `/${API_VERSION}/fleet/mdm/apple/request_csr`,
 
+  // Apple VPP endpoints
+  MDM_APPLE_VPP: `/${API_VERSION}/fleet/vpp`,
+  MDM_APPLE_VPP_TOKEN: `/${API_VERSION}/fleet/mdm/apple/vpp_token`,
+
   // MDM profile endpoints
   MDM_PROFILES: `/${API_VERSION}/fleet/mdm/profiles`,
   MDM_PROFILE: (id: string) => `/${API_VERSION}/fleet/mdm/profiles/${id}`,