diff --git a/changes/37003-bootstrap-pkg-ui b/changes/37003-bootstrap-pkg-ui new file mode 100644 index 0000000000..1b602ab855 --- /dev/null +++ b/changes/37003-bootstrap-pkg-ui @@ -0,0 +1 @@ +- Updated UI for Controls > Setup experience > Bootstrap package to fix inconsistent styling. \ No newline at end of file diff --git a/frontend/pages/ManageControlsPage/SetupExperience/cards/BootstrapPackage/components/BootstrapAdvancedOptions/BootstrapAdvancedOptions.tsx b/frontend/pages/ManageControlsPage/SetupExperience/cards/BootstrapPackage/components/BootstrapAdvancedOptions/BootstrapAdvancedOptions.tsx index bcd6e8dbd5..79401917b6 100644 --- a/frontend/pages/ManageControlsPage/SetupExperience/cards/BootstrapPackage/components/BootstrapAdvancedOptions/BootstrapAdvancedOptions.tsx +++ b/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) => { 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 = ({ diff --git a/frontend/pages/ManageControlsPage/SetupExperience/cards/BootstrapPackage/components/BootstrapAdvancedOptions/_styles.scss b/frontend/pages/ManageControlsPage/SetupExperience/cards/BootstrapPackage/components/BootstrapAdvancedOptions/_styles.scss index 6d1c721647..ebf95de35c 100644 --- a/frontend/pages/ManageControlsPage/SetupExperience/cards/BootstrapPackage/components/BootstrapAdvancedOptions/_styles.scss +++ b/frontend/pages/ManageControlsPage/SetupExperience/cards/BootstrapPackage/components/BootstrapAdvancedOptions/_styles.scss @@ -14,4 +14,8 @@ flex-direction: column; gap: $pad-large; } + + .button { + width: fit-content; + } } diff --git a/frontend/pages/ManageControlsPage/SetupExperience/cards/BootstrapPackage/components/BootstrapPackageTable/BootstrapPackageTableConfig.tsx b/frontend/pages/ManageControlsPage/SetupExperience/cards/BootstrapPackage/components/BootstrapPackageTable/BootstrapPackageTableConfig.tsx index b84bbf547e..1f7058910d 100644 --- a/frontend/pages/ManageControlsPage/SetupExperience/cards/BootstrapPackage/components/BootstrapPackageTable/BootstrapPackageTableConfig.tsx +++ b/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 = { }, pending: { displayName: "Pending", - statusName: "pending", + statusName: "pendingPartial", value: BootstrapPackageStatus.PENDING, tooltip: "The host will install the package when it enrolls.", },