Position leftCol component to the left in ModalSubmit (#24111)

changelog/unreleased/issue-24110.toml

@@ -0,0 +1,5 @@
+type = "f"
+message = "Fix issue with left button position by moving it to the left."
+
+issues = ["24110"]
+pulls = ["24111"]

graylog2-web-interface/src/components/bootstrap/ButtonToolbar.tsx

@@ -15,13 +15,15 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import * as React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import OriginalButtonGroup from './ButtonGroup';
 
-const StyledButtonToolbar = styled(OriginalButtonGroup)`
-  gap: 0.25em;
-`;
+const StyledButtonToolbar = styled(OriginalButtonGroup)(
+  ({ theme }) => css`
+    gap: ${theme.spacings.xs};
+  `,
+);
 
 const ButtonToolbar = ({ ...props }: React.ComponentProps<typeof StyledButtonToolbar>) => (
   <StyledButtonToolbar {...props} />

graylog2-web-interface/src/components/common/ModalButtonToolbar.tsx

@@ -19,9 +19,6 @@ import styled from 'styled-components';
 import ButtonToolbar from 'components/bootstrap/ButtonToolbar';
 
 const ModalButtonToolbar = styled(ButtonToolbar)`
-  display: flex;
   justify-content: flex-end;
-  align-items: end;
-  gap: 0.25em;
 `;
 export default ModalButtonToolbar;

graylog2-web-interface/src/components/common/ModalSubmit.tsx

@@ -18,13 +18,24 @@
 import * as React from 'react';
 import { useEffect, useRef } from 'react';
 import type { SyntheticEvent } from 'react';
+import styled, { css } from 'styled-components';
 
-import Button from 'components/bootstrap/Button';
+import { Button } from 'components/bootstrap';
 import type { IconName } from 'components/common/Icon';
 import Icon from 'components/common/Icon';
 import Spinner from 'components/common/Spinner';
 import ModalButtonToolbar from 'components/common/ModalButtonToolbar';
 
+const Container = styled.div<{ $hasLeftCol: boolean }>(
+  ({ $hasLeftCol }) =>
+    $hasLeftCol &&
+    css`
+      display: flex;
+      justify-content: space-between;
+      align-items: end;
+    `,
+);
+
 const buttonTitle = (isSubmitting: boolean, submitText: React.ReactNode, submitLoadingText: string) => {
   if (isSubmitting && typeof submitLoadingText === 'string') {
     return submitLoadingText;
@@ -110,37 +121,39 @@ const ModalSubmit = ({ ...props }: Props) => {
   }, []);
 
   return (
-    <ModalButtonToolbar className={className}>
+    <Container $hasLeftCol={!!leftCol} className={className}>
       {leftCol}
-      {isWithCancelProps(props) && (
-        <Button
-          type="button"
-          bsSize={bsSize}
-          onClick={props.onCancel}
-          title="Cancel"
-          aria-label="Cancel"
-          disabled={props.disabledCancel || submittingAsync}>
-          Cancel
-        </Button>
-      )}
-      <Button
-        ref={confirmRef}
-        bsStyle="primary"
-        bsSize={bsSize}
-        disabled={disabledSubmit || submittingAsync}
-        form={formId}
-        title={title}
-        aria-label={title}
-        type={submitButtonType}
-        onClick={onSubmit}>
-        {submitIcon && !submittingAsync && (
-          <>
-            <Icon name={submitIcon} />{' '}
-          </>
+      <ModalButtonToolbar>
+        {isWithCancelProps(props) && (
+          <Button
+            type="button"
+            bsSize={bsSize}
+            onClick={props.onCancel}
+            title="Cancel"
+            aria-label="Cancel"
+            disabled={props.disabledCancel || submittingAsync}>
+            Cancel
+          </Button>
         )}
-        {submittingAsync ? <Spinner text={props.submitLoadingText} delay={0} /> : submitButtonText}
-      </Button>
-    </ModalButtonToolbar>
+        <Button
+          ref={confirmRef}
+          bsStyle="primary"
+          bsSize={bsSize}
+          disabled={disabledSubmit || submittingAsync}
+          form={formId}
+          title={title}
+          aria-label={title}
+          type={submitButtonType}
+          onClick={onSubmit}>
+          {submitIcon && !submittingAsync && (
+            <>
+              <Icon name={submitIcon} />{' '}
+            </>
+          )}
+          {submittingAsync ? <Spinner text={props.submitLoadingText} delay={0} /> : submitButtonText}
+        </Button>
+      </ModalButtonToolbar>
+    </Container>
   );
 };