Device User Page: Fix unreleased modal margins bug (#32506)

This commit is contained in:
RachelElysia 2025-09-02 14:13:24 -04:00 committed by GitHub
parent 617ba5e8b3
commit a33ea94a24
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 68 additions and 51 deletions

View file

@ -0,0 +1,63 @@
import React from "react";
import Button from "components/buttons/Button";
import Modal from "components/Modal";
import ModalFooter from "components/ModalFooter";
interface IBitLockerPinModalProps {
onCancel: () => void;
}
const baseClass = "bit-locker-pin-modal";
const BitLockerPinModal = ({
onCancel,
}: IBitLockerPinModalProps): JSX.Element => {
return (
<Modal
title="Create PIN"
onExit={onCancel}
onEnter={onCancel}
className={baseClass}
width="large"
>
<>
<div>
<p>
<ol>
<li>
<p>
Open the <b>Start menu</b>.
</p>
</li>
<li>
<p>Type &ldquo;Manage BitLocker&rdquo; and launch.</p>
</li>
<li>
<p>
Choose <b>Enter a PIN (recommended)</b> and follow the prompts
to create a PIN. If you don&apos;t see this option, wait 1
minute and refresh the <b>BitLocker Drive Encryption</b>{" "}
window.
</p>
</li>
<li>
<p>
Close this window and select <b>Refetch</b> on your{" "}
<b>My device</b> page. This informs your organization that you
have set a BitLocker PIN.
</p>
</li>
</ol>
</p>
</div>
<ModalFooter
primaryButtons={<Button onClick={onCancel}>Done</Button>}
/>
</>
</Modal>
);
};
export default BitLockerPinModal;

View file

@ -0,0 +1 @@
export { default } from "./BitLockerPinModal";

View file

@ -60,6 +60,7 @@ import FleetIcon from "../../../../../assets/images/fleet-avatar-24x24@2x.png";
import PolicyDetailsModal from "../cards/Policies/HostPoliciesTable/PolicyDetailsModal";
import AutoEnrollMdmModal from "./AutoEnrollMdmModal";
import ManualEnrollMdmModal from "./ManualEnrollMdmModal";
import BitLockerPinModal from "./BitLockerPinModal";
import CreateLinuxKeyModal from "./CreateLinuxKeyModal";
import OSSettingsModal from "../OSSettingsModal";
import BootstrapPackageModal from "../HostDetailsPage/modals/BootstrapPackageModal";
@ -620,53 +621,9 @@ const DeviceUserPage = ({
/>
))}
{showBitLockerPINModal && (
<Modal
title="Create PIN"
onExit={() => setShowBitLockerPINModal(false)}
onEnter={() => setShowBitLockerPINModal(false)}
className={baseClass}
width="large"
>
<>
<div>
<p>
<ol>
<li>
<p>
Open the <b>Start menu</b>.
</p>
</li>
<li>
<p>Type &ldquo;Manage BitLocker&rdquo; and launch.</p>
</li>
<li>
<p>
Choose <b>Enter a PIN (recommended)</b> and follow
the prompts to create a PIN. If you don&apos;t see
this option, wait 1 minute and refresh the{" "}
<b>BitLocker Drive Encryption</b> window.
</p>
</li>
<li>
<p>
Close this window and select <b>Refetch</b> on your{" "}
<b>My device</b> page. This informs your
organization that you have set a BitLocker PIN.
</p>
</li>
</ol>
</p>
</div>
<div className="modal-cta-wrap">
<Button
type="button"
onClick={() => setShowBitLockerPINModal(false)}
>
Done
</Button>
</div>
</>
</Modal>
<BitLockerPinModal
onCancel={() => setShowBitLockerPINModal(false)}
/>
)}
</div>
)}

View file

@ -70,10 +70,6 @@
.policies-card .data-table-block .data-table__table thead .response__header {
width: $col-md;
}
.modal__content-wrapper {
margin-top: 0;
}
}
.dup-org-logo {