Merge pull request #5243 from yaacov/adjust-modal-fotter-buttons

Bug 1828964: Adjust kubevirt modals footer buttons
openshift · May 5, 2020 · 17db6db · 17db6db
2 parents c999610 + 66a0d2e
commit 17db6db
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 21 deletions.
diff --git a/...end/packages/kubevirt-plugin/src/components/modals/boot-order-modal/boot-order-modal.scss b/...end/packages/kubevirt-plugin/src/components/modals/boot-order-modal/boot-order-modal.scss
@@ -0,0 +1,3 @@
+.kubevirt-boot-order-modal__footer {
+    padding: 0;
+}
diff --git a/...tend/packages/kubevirt-plugin/src/components/modals/boot-order-modal/boot-order-modal.tsx b/...tend/packages/kubevirt-plugin/src/components/modals/boot-order-modal/boot-order-modal.tsx
@@ -14,6 +14,8 @@ import { BootOrder, deviceKey } from '../../boot-order';
 import { DeviceType } from '../../../constants';
 import { ModalFooter } from '../modal/modal-footer';
 
+import './boot-order-modal.scss';
+
 const modalTitle = 'Virtual machine boot order';
 
 const BootOrderModalComponent = ({
@@ -136,6 +138,7 @@ const BootOrderModalComponent = ({
           .
         </>
       }
+      className={'kubevirt-boot-order-modal__footer'}
     />
   );
 
@@ -146,7 +149,8 @@ const BootOrderModalComponent = ({
       isSmall
       onClose={() => setOpen(false)}
       footer={footer}
-      isFooterLeftAligned
+      showClose={false}
+      isFooterLeftAligned={false}
     >
       <BootOrder devices={devices} setDevices={setDevices} />
     </Modal>

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,3 @@
-.kubevirt-create-nic-modal__buttons {
-  text-align: left;
+.kubevirt-modal-footer__buttons {
+  width: 100%;
 }
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
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { Alert, Button, ButtonVariant, AlertProps } from '@patternfly/react-core';
+import { Alert, Button, ButtonVariant, AlertProps, ActionGroup } from '@patternfly/react-core';
 import { LoadingInline } from '@console/internal/components/utils';
-import { prefixedID } from '../../../utils';
 
 import './modal-footer.scss';
 
@@ -59,7 +58,6 @@ type ModalFooterProps = {
 };
 
 export const ModalFooter: React.FC<ModalFooterProps> = ({
-  id,
   className = '',
   errorMessage = null,
   warningMessage = null,
@@ -74,28 +72,34 @@ export const ModalFooter: React.FC<ModalFooterProps> = ({
   infoTitle = null,
 }) => (
   <footer
-    className={classNames(
-      'co-m-btn-bar modal-footer kubevirt-create-nic-modal__buttons',
-      className,
-    )}
+    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>}
-    <Button
-      variant={ButtonVariant.primary}
-      onClick={onSubmit}
-      id={prefixedID(id, 'submit')}
-      isDisabled={isDisabled}
-    >
-      {submitButtonText}
-    </Button>
-    <Button variant={ButtonVariant.link} onClick={onCancel} id={prefixedID(id, 'cancel')}>
-      {cancelButtonText}
-    </Button>
+
+    <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>
+      <Button
+        variant={ButtonVariant.primary}
+        isDisabled={isDisabled}
+        id="confirm-action"
+        onClick={onSubmit}
+      >
+        {submitButtonText}
+      </Button>
+    </ActionGroup>
+
     {inProgress && <LoadingInline />}
   </footer>
 );