refactor(docker/containers): migrate commands tab to react [EE-5208] (#10085)

app/react/components/form-components/FormControl/FormControl.tsx

@@ -66,7 +66,7 @@ function sizeClassLabel(size?: Size) {
     case 'medium':
       return 'col-sm-4 col-lg-3';
     case 'xsmall':
-      return 'col-sm-2';
+      return 'col-sm-1';
     case 'vertical':
       return '';
     default:
@@ -81,7 +81,7 @@ function sizeClassChildren(size?: Size) {
     case 'medium':
       return 'col-sm-8 col-lg-9';
     case 'xsmall':
-      return 'col-sm-10';
+      return 'col-sm-11';
     case 'vertical':
       return '';
     default:

app/react/components/form-components/Input/Input.tsx

@@ -13,7 +13,9 @@ export function Input({
   className,
   mRef: ref,
   ...props
-}: InputHTMLAttributes<HTMLInputElement> & { mRef?: Ref<HTMLInputElement> }) {
+}: InputHTMLAttributes<HTMLInputElement> & {
+  mRef?: Ref<HTMLInputElement>;
+}) {
   return (
     <input
       // eslint-disable-next-line react/jsx-props-no-spreading

app/react/components/form-components/InputGroup/InputGroupButtonWrapper.tsx

@@ -1,23 +1,24 @@
 import { PropsWithChildren } from 'react';
-import clsx from 'clsx';
 
 import { useInputGroupContext } from './InputGroup';
 
+/**
+ * Should wrap all buttons inside a InputGroup
+ *
+ * example:
+ * ```
+ * <InputGroup>
+ *  <InputGroup.ButtonWrapper>
+ *   <Button>...</Button>
+ *   <Button>...</Button>
+ *  </InputGroup.ButtonWrapper>
+ * </InputGroup>
+ * ```
+ */
 export function InputGroupButtonWrapper({
   children,
 }: PropsWithChildren<unknown>) {
   useInputGroupContext();
 
-  return (
-    <span
-      className={clsx(
-        'input-group-btn [&>button]:!ml-0',
-        // the button should be rounded at the end (right) if it's the last child and start (left) if it's the first child
-        // if the button is in the middle of the group, it shouldn't be rounded
-        '[&:first-child>button]:!rounded-l-[5px] [&:last-child>button]:!rounded-r-[5px] [&>button]:!rounded-none'
-      )}
-    >
-      {children}
-    </span>
-  );
+  return <span className="input-group-btn">{children}</span>;
 }

app/react/components/form-components/InputGroup/index.ts

@@ -6,6 +6,19 @@ import { InputGroupButtonWrapper } from './InputGroupButtonWrapper';
 
 interface InputGroupSubComponents {
   Addon: typeof InputGroupAddon;
+  /**
+   * Should wrap all buttons inside a InputGroup
+   *
+   * example:
+   * ```
+   * <InputGroup>
+   *  <InputGroup.ButtonWrapper>
+   *   <Button>...</Button>
+   *   <Button>...</Button>
+   *  </InputGroup.ButtonWrapper>
+   * </InputGroup>
+   * ```
+   */
   ButtonWrapper: typeof InputGroupButtonWrapper;
   Input: typeof Input;
   className: string | undefined;