From 83d3c6e6bece8213d14bd3f3250ea713dd0ed5be Mon Sep 17 00:00:00 2001 From: Gabriel Hernandez Date: Fri, 2 Aug 2024 12:49:25 +0100 Subject: [PATCH] update Other Workflows modal on policy page to be disabled when the form is submitted. (#20933) relates to #20617 Adds disabled overlay to the other workflows modal on the policy page. This required a change to the modal component to render this new overlay and make that accessible to the consumer via a `isContentDisabled` prop ![image](https://github.com/user-attachments/assets/84811ee1-f11f-426f-a2da-9d14c41840ab) Also there are improvements to the my Add policy modal. It seemed to not work with the new modal HTML structure so I fixed and improved how its handling its scrollable content. > NOTE: I did my own manual regression testing to make sure all the modals still looked and worked properly but please tell me if you see one that does not. - [x] Changes file added for user-visible changes in `changes/`, `orbit/changes/` or `ee/fleetd-chrome/changes`. See [Changes files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/Committing-Changes.md#changes-files) for more information. - [x] Manual QA for all new/changed functionality --- ...0933-disable-overlay-other-workflows-modal | 1 + frontend/components/Modal/Modal.tsx | 50 ++++++++++++------- frontend/components/Modal/_styles.scss | 19 ++++++- .../components/AddPolicyModal/_styles.scss | 16 ++++-- .../OtherWorkflowsModal.tsx | 1 + 5 files changed, 65 insertions(+), 22 deletions(-) create mode 100644 changes/20933-disable-overlay-other-workflows-modal diff --git a/changes/20933-disable-overlay-other-workflows-modal b/changes/20933-disable-overlay-other-workflows-modal new file mode 100644 index 0000000000..e0386552c5 --- /dev/null +++ b/changes/20933-disable-overlay-other-workflows-modal @@ -0,0 +1 @@ +- add a disabled overlay to the Other Workflows modal on the policy page. diff --git a/frontend/components/Modal/Modal.tsx b/frontend/components/Modal/Modal.tsx index 8d96a37818..2cc3dccadd 100644 --- a/frontend/components/Modal/Modal.tsx +++ b/frontend/components/Modal/Modal.tsx @@ -18,6 +18,11 @@ export interface IModalProps { isHidden?: boolean; /** isLoading can be set true to enable targeting elements by loading state */ isLoading?: boolean; + /** isContentDisabled can be set to true to display the modal content as disabled. + * At the moment this will place an overlay over the modal content and make it + * unclickable. + */ + isContentDisabled?: boolean; className?: string; } @@ -29,6 +34,7 @@ const Modal = ({ width = "medium", isHidden = false, isLoading = false, + isContentDisabled = false, className, }: IModalProps): JSX.Element => { useEffect(() => { @@ -61,26 +67,30 @@ const Modal = ({ } }, [onEnter]); - const modalContainerClassName = classnames( - `${baseClass}__modal_container`, + const backgroundClasses = classnames(`${baseClass}__background`, { + [`${baseClass}__hidden`]: isHidden, + }); + + const modalContainerClasses = classnames( className, - { [`${baseClass}__modal_container__medium`]: width === "medium" }, - { [`${baseClass}__modal_container__large`]: width === "large" }, - { [`${baseClass}__modal_container__xlarge`]: width === "xlarge" }, - { [`${baseClass}__modal_container__auto`]: width === "auto" } + `${baseClass}__modal_container`, + `${baseClass}__modal_container__${width}`, + { + [`${className}__loading`]: isLoading, + } ); + const contentWrapperClasses = classnames(`${baseClass}__content-wrapper`, { + [`${baseClass}__content-wrapper-disabled`]: isContentDisabled, + }); + + const contentClasses = classnames(`${baseClass}__content`, { + [`${baseClass}__content-disabled`]: isContentDisabled, + }); + return ( -
-
+
+
{title}
@@ -89,7 +99,13 @@ const Modal = ({
-
{children}
+ +
+ {isContentDisabled && ( +
+ )} +
{children}
+
); diff --git a/frontend/components/Modal/_styles.scss b/frontend/components/Modal/_styles.scss index 33fc9939eb..04dc539176 100644 --- a/frontend/components/Modal/_styles.scss +++ b/frontend/components/Modal/_styles.scss @@ -16,7 +16,7 @@ } } - &__content { + &__content-wrapper { margin-top: $pad-large; font-size: $x-small; @@ -100,4 +100,21 @@ width: auto; } } + + // these styles are for the modal content when it is disabled + &__content-wrapper-disabled { + position: relative; + } + + &__content-disabled { + transition: opacity 150ms ease-in-out; + opacity: 0.5; // this adds a disabled effect to the modal content + } + + &__disabled-overlay { + position: absolute; + height: 100%; + width: 100%; + z-index: 1000; + } } diff --git a/frontend/pages/policies/ManagePoliciesPage/components/AddPolicyModal/_styles.scss b/frontend/pages/policies/ManagePoliciesPage/components/AddPolicyModal/_styles.scss index 924a16b0d8..c1cfe99bb9 100644 --- a/frontend/pages/policies/ManagePoliciesPage/components/AddPolicyModal/_styles.scss +++ b/frontend/pages/policies/ManagePoliciesPage/components/AddPolicyModal/_styles.scss @@ -1,17 +1,25 @@ .add-policy-modal { height: 90%; overflow: hidden; - min-height: 460px; - max-height: fit-content; + + // we have to reach into the modal component classes to style the content + // correctly. This is because this modal always has a fixed height and + // the content is scrollable. + .modal__content-wrapper { + height: 95%; + } .modal__content { - height: 90%; - overflow: scroll; + height: 100%; display: flex; flex-direction: column; gap: $pad-large; } + &__policy-selection { + overflow-y: auto; + } + .Select-multi-value-wrapper { display: flex; } diff --git a/frontend/pages/policies/ManagePoliciesPage/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx b/frontend/pages/policies/ManagePoliciesPage/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx index 75c66b5fd7..d34ae56ff6 100644 --- a/frontend/pages/policies/ManagePoliciesPage/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx +++ b/frontend/pages/policies/ManagePoliciesPage/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx @@ -367,6 +367,7 @@ const OtherWorkflowsModal = ({ title="Other workflows" className={baseClass} width="large" + isContentDisabled={isUpdating} >