Feat UI ddm integration (#17885)

relate to #17416

update to uploading, downloading, and deleting ddm profiles.

- [x] Manual QA for all new/changed functionality

frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ProfileListItem/ProfileListItem.tsx

@@ -53,6 +53,21 @@ const ProfileDetails = ({
   );
 };
 
+const createProfileExtension = (profile: IMdmProfile) => {
+  if (isDDMProfile(profile)) {
+    return "json";
+  }
+  return profile.platform === "darwin" ? "mobileconfig" : "xml";
+};
+
+const createFileContent = async (profile: IMdmProfile) => {
+  const content = await mdmAPI.downloadProfile(profile.profile_uuid);
+  if (isDDMProfile(profile)) {
+    return JSON.stringify(content, null, 2);
+  }
+  return content;
+};
+
 interface IProfileListItemProps {
   isPremium: boolean;
   profile: IMdmProfile;
@@ -68,13 +83,13 @@ const ProfileListItem = ({
   onDelete,
   setProfileLabelsModalData,
 }: IProfileListItemProps) => {
-  const { created_at, labels, name, platform, profile_uuid } = profile;
+  const { created_at, labels, name, platform } = profile;
   const subClass = "list-item";
 
   const onClickDownload = async () => {
-    const fileContent = await mdmAPI.downloadProfile(profile_uuid);
+    const fileContent = await createFileContent(profile);
     const formatDate = format(new Date(), "yyyy-MM-dd");
-    const extension = platform === "darwin" ? "mobileconfig" : "xml";
+    const extension = createProfileExtension(profile);
     const filename = `${formatDate}_${name}.${extension}`;
     const file = new File([fileContent], filename);
     FileSaver.saveAs(file);

frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ProfileUploader/components/AddProfileModal.tsx

@@ -52,7 +52,7 @@ const FileChooser = ({
       </label>
     </Button>
     <input
-      accept=".mobileconfig,application/x-apple-aspen-config,.xml"
+      accept=".json,.mobileconfig,application/x-apple-aspen-config,.xml"
       id="upload-profile"
       type="file"
       onChange={(e) => {

frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ProfileUploader/helpers.tsx

@@ -78,6 +78,9 @@ export const parseFile = async (file: File): Promise<[string, string]> => {
       // }
       return [name, "macOS"];
     }
+    case "json": {
+      return [name, "macOS"];
+    }
     default: {
       throw new Error(`Invalid file type: ${ext}`);
     }

frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx

@@ -753,30 +753,6 @@ const HostDetailsPage = ({
     name: host?.mdm.macos_setup?.bootstrap_package_name,
   };
 
-  // TODO: Remove this when API is ready
-  if (!host.mdm.profiles) {
-    host.mdm.profiles = [];
-  } else {
-    host.mdm.profiles = [
-      createMockHostMdmProfile({
-        name: "test.json",
-        status: "success",
-      }),
-      createMockHostMdmProfile({
-        name: "test2.json",
-        status: "pending",
-      }),
-      createMockHostMdmProfile({
-        name: "test3.json",
-        status: "failed",
-      }),
-      createMockHostMdmProfile({
-        name: "test4.json",
-        status: "acknowledged",
-      }),
-    ];
-  }
-
   return (
     <MainContent className={baseClass}>
       <>