Update UI for Controls > Setup experience > Bootstrap package to fix inconsistent styling (#37868)

changes/37003-bootstrap-pkg-ui

@@ -0,0 +1 @@
+- Updated UI for Controls > Setup experience > Bootstrap package to fix inconsistent styling.

frontend/pages/ManageControlsPage/SetupExperience/cards/BootstrapPackage/components/BootstrapAdvancedOptions/BootstrapAdvancedOptions.tsx

@@ -26,9 +26,11 @@ const BootstrapAdvancedOptions = ({
 }: IBootstrapAdvancedOptionsProps) => {
   const { renderFlash } = useContext(NotificationContext);
   const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
 
   const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
+    setIsSaving(true);
     try {
       await mdmAPI.updateSetupExperienceSettings({
         team_id: currentTeamId,
@@ -38,6 +40,7 @@ const BootstrapAdvancedOptions = ({
     } catch {
       renderFlash("error", "Something went wrong. Please try again.");
     }
+    setIsSaving(false);
   };
 
   const tooltip = (
@@ -77,8 +80,9 @@ const BootstrapAdvancedOptions = ({
                   </TooltipWrapper>
                 </Checkbox>
                 <Button
-                  disabled={gitopsDisable || disableInstallManually}
+                  disabled={gitopsDisable || disableInstallManually || isSaving}
                   type="submit"
+                  isLoading={isSaving}
                 >
                   Save
                 </Button>

frontend/pages/ManageControlsPage/SetupExperience/cards/BootstrapPackage/components/BootstrapAdvancedOptions/_styles.scss

@@ -14,4 +14,8 @@
     flex-direction: column;
     gap: $pad-large;
   }
+
+  .button {
+    width: fit-content;
+  }
 }

frontend/pages/ManageControlsPage/SetupExperience/cards/BootstrapPackage/components/BootstrapPackageTable/BootstrapPackageTableConfig.tsx

@@ -9,10 +9,11 @@ import TextCell from "components/TableContainer/DataTable/TextCell";
 import HeaderCell from "components/TableContainer/DataTable/HeaderCell";
 import StatusIndicatorWithIcon from "components/StatusIndicatorWithIcon";
 import ViewAllHostsLink from "components/ViewAllHostsLink";
+import { IndicatorStatus } from "components/StatusIndicatorWithIcon/StatusIndicatorWithIcon";
 
 interface IStatusCellValue {
   displayName: string;
-  statusName: "success" | "pending" | "error";
+  statusName: IndicatorStatus;
   value: BootstrapPackageStatus;
   tooltip?: string | JSX.Element;
 }
@@ -125,7 +126,7 @@ const STATUS_CELL_VALUES: Record<StatusNames, IStatusCellValue> = {
   },
   pending: {
     displayName: "Pending",
-    statusName: "pending",
+    statusName: "pendingPartial",
     value: BootstrapPackageStatus.PENDING,
     tooltip: "The host will install the package when it enrolls.",
   },