Merge pull request #6191 from glekner/fix-1863060

Bug 1863060: Spinner inside the modal footer needs a redesign
openshift · Aug 3, 2020 · cd05c31 · cd05c31
2 parents a50a58b + 9af6ed7
commit cd05c31
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 37 deletions.
diff --git a/frontend/packages/kubevirt-plugin/src/components/modals/modal/modal-footer.scss b/frontend/packages/kubevirt-plugin/src/components/modals/modal/modal-footer.scss
@@ -1,3 +1,11 @@
 .kubevirt-modal-footer__buttons {
   width: 100%;
 }
+
+#confirm-action {
+  display: flex;
+}
+
+#modal-footer-spinner {
+  margin-right: var(--pf-global--spacer--sm);
+}
diff --git a/frontend/packages/kubevirt-plugin/src/components/modals/modal/modal-footer.tsx b/frontend/packages/kubevirt-plugin/src/components/modals/modal/modal-footer.tsx
@@ -82,46 +82,53 @@ export const ModalFooter: React.FC<ModalFooterProps> = ({
   saveAndRestartText = 'Save and Restart',
   infoMessage = null,
   infoTitle = null,
-}) => (
-  <footer
-    className={classNames('co-m-btn-bar modal-footer kubevirt-modal-footer__buttons', className)}
-  >
-    {warningMessage && isSimpleError && (
-      <ModalSimpleMessage message={warningMessage} variant="warning" />
-    )}
-    {errorMessage && isSimpleError && <ModalSimpleMessage message={errorMessage} />}
-    {errorMessage && !isSimpleError && <ModalErrorMessage message={errorMessage} />}
-    {infoTitle && <ModalInfoMessage title={infoTitle}>{infoMessage}</ModalInfoMessage>}
+}) => {
+  const [showSpinner, setShowSpinner] = React.useState(false);
+
+  React.useEffect(() => {
+    setTimeout(() => setShowSpinner(true), 300);
+  }, []);
+
+  return (
+    <footer
+      className={classNames('co-m-btn-bar modal-footer kubevirt-modal-footer__buttons', className)}
+    >
+      {warningMessage && isSimpleError && (
+        <ModalSimpleMessage message={warningMessage} variant="warning" />
+      )}
+      {errorMessage && isSimpleError && <ModalSimpleMessage message={errorMessage} />}
+      {errorMessage && !isSimpleError && <ModalErrorMessage message={errorMessage} />}
+      {infoTitle && <ModalInfoMessage title={infoTitle}>{infoMessage}</ModalInfoMessage>}
 
-    <ActionGroup className="pf-c-form pf-c-form__actions--right pf-c-form__group--no-top-margin">
-      <Button
-        type="button"
-        variant={ButtonVariant.secondary}
-        data-test-id="modal-cancel-action"
-        onClick={onCancel}
-      >
-        {cancelButtonText}
-      </Button>
-      {isSaveAndRestart && (
+      <ActionGroup className="pf-c-form pf-c-form__actions--right pf-c-form__group--no-top-margin">
         <Button
           type="button"
           variant={ButtonVariant.secondary}
-          id="save-and-restart"
-          onClick={onSaveAndRestart}
+          data-test-id="modal-cancel-action"
+          onClick={onCancel}
         >
-          {saveAndRestartText}
+          {cancelButtonText}
         </Button>
-      )}
-      <Button
-        variant={ButtonVariant.primary}
-        isDisabled={isDisabled}
-        id="confirm-action"
-        onClick={onSubmit}
-      >
-        {submitButtonText}
-      </Button>
-    </ActionGroup>
-
-    {inProgress && <Spinner />}
-  </footer>
-);
+        {isSaveAndRestart && (
+          <Button
+            type="button"
+            variant={ButtonVariant.secondary}
+            id="save-and-restart"
+            onClick={onSaveAndRestart}
+          >
+            {saveAndRestartText}
+          </Button>
+        )}
+        <Button
+          variant={ButtonVariant.primary}
+          isDisabled={isDisabled}
+          id="confirm-action"
+          onClick={onSubmit}
+        >
+          {inProgress && showSpinner && <Spinner id="modal-footer-spinner" size="md" />}
+          {submitButtonText}
+        </Button>
+      </ActionGroup>
+    </footer>
+  );
+};