fix(striker-ui): hoist OutlinedLabeledInputWithSelect

striker-ui/components/OutlinedLabeledInputWithSelect.tsx

@@ -0,0 +1,86 @@
+import { FC } from 'react';
+import { Box } from '@mui/material';
+
+import InputMessageBox from './InputMessageBox';
+import { MessageBoxProps } from './MessageBox';
+import OutlinedInputWithLabel, {
+  OutlinedInputWithLabelProps,
+} from './OutlinedInputWithLabel';
+import SelectWithLabel, {
+  SelectItem,
+  SelectWithLabelProps,
+} from './SelectWithLabel';
+
+type OutlinedLabeledInputWithSelectOptionalProps = {
+  inputWithLabelProps?: Partial<OutlinedInputWithLabelProps>;
+  messageBoxProps?: Partial<MessageBoxProps>;
+  selectWithLabelProps?: Partial<SelectWithLabelProps>;
+};
+
+type OutlinedLabeledInputWithSelectProps =
+  OutlinedLabeledInputWithSelectOptionalProps & {
+    id: string;
+    label: string;
+    selectItems: SelectItem[];
+  };
+
+const OUTLINED_LABELED_INPUT_WITH_SELECT_DEFAULT_PROPS: Required<OutlinedLabeledInputWithSelectOptionalProps> =
+  {
+    inputWithLabelProps: {},
+    messageBoxProps: {},
+    selectWithLabelProps: {},
+  };
+
+const OutlinedLabeledInputWithSelect: FC<
+  OutlinedLabeledInputWithSelectProps
+> = ({
+  id,
+  label,
+  inputWithLabelProps,
+  messageBoxProps,
+  selectItems,
+  selectWithLabelProps,
+}) => (
+  <Box>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'row',
+
+        '& > :first-child': {
+          flexGrow: 1,
+        },
+
+        '& > :not(:last-child)': {
+          marginRight: '.5em',
+        },
+      }}
+    >
+      <OutlinedInputWithLabel
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...{
+          id,
+          label,
+          ...inputWithLabelProps,
+        }}
+      />
+      <SelectWithLabel
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...{
+          id: `${id}-nested-select`,
+          selectItems,
+          ...selectWithLabelProps,
+        }}
+      />
+    </Box>
+    {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+    <InputMessageBox {...messageBoxProps} />
+  </Box>
+);
+
+OutlinedLabeledInputWithSelect.defaultProps =
+  OUTLINED_LABELED_INPUT_WITH_SELECT_DEFAULT_PROPS;
+
+export type { OutlinedLabeledInputWithSelectProps };
+
+export default OutlinedLabeledInputWithSelect;

striker-ui/components/ProvisionServerDialog.tsx

@@ -15,13 +15,9 @@ import {
 
 import Autocomplete from './Autocomplete';
 import ContainedButton, { ContainedButtonProps } from './ContainedButton';
-import InputMessageBox from './InputMessageBox';
 import { MessageBoxProps } from './MessageBox';
-import OutlinedInputWithLabel, {
+import OutlinedInputWithLabel from './OutlinedInputWithLabel';
-  OutlinedInputWithLabelProps,
-} from './OutlinedInputWithLabel';
 import { Panel, PanelHeader } from './Panels';
-import { SelectProps } from './Select';
 import SelectWithLabel, { SelectItem } from './SelectWithLabel';
 import Slider, { SliderProps } from './Slider';
 import {
@@ -35,6 +31,7 @@ import {
   TestInputFunction,
 } from '../types/TestInputFunction';
 import { BodyText, HeaderText } from './Text';
+import OutlinedLabeledInputWithSelect from './OutlinedLabeledInputWithSelect';
 
 type InputMessage = Partial<Pick<MessageBoxProps, 'type' | 'text'>>;
 
@@ -371,48 +368,6 @@ const createOutlinedSlider = (
   />
 );
 
-const createOutlinedInputWithSelect = (
-  id: string,
-  label: string,
-  selectItems: SelectItem[],
-  {
-    messageBoxProps,
-    inputWithLabelProps,
-    selectProps,
-  }: {
-    inputWithLabelProps?: Partial<OutlinedInputWithLabelProps>;
-    messageBoxProps?: Partial<MessageBoxProps>;
-    selectProps?: Partial<SelectProps>;
-  } = {},
-) => (
-  <Box>
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'row',
-
-        '& > :first-child': {
-          flexGrow: 1,
-        },
-      }}
-    >
-      <OutlinedInputWithLabel
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...{
-          id,
-          label,
-          ...inputWithLabelProps,
-        }}
-      />
-      <SelectWithLabel
-        {...{ id: `${id}-nested-select`, selectItems, selectProps }}
-      />
-    </Box>
-    {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-    <InputMessageBox {...messageBoxProps} />
-  </Box>
-);
-
 const createMaxValueButton = (
   maxValue: string,
   {
@@ -884,12 +839,11 @@ const createVirtualDiskForm = (
         ).toString()}, Max: ${get('maxes').toString()}`}
       />
       <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-        {createOutlinedInputWithSelect(
+        <OutlinedLabeledInputWithSelect
-          `ps-virtual-disk-size-${vdIndex}`,
+          id={`ps-virtual-disk-size-${vdIndex}`}
-          'Virtual disk size',
+          label="Virtual disk size"
-          DATA_SIZE_UNIT_SELECT_ITEMS,
+          messageBoxProps={get('inputSizeMessages')}
-          {
+          inputWithLabelProps={{
-            inputWithLabelProps: {
             inputProps: {
               endAdornment: createMaxValueButton(
                 `${get('inputMaxes')} ${get('inputUnits')}`,
@@ -906,7 +860,9 @@ const createVirtualDiskForm = (
               type: 'number',
               value: get('inputSizes'),
             },
-            },
+          }}
+          selectItems={DATA_SIZE_UNIT_SELECT_ITEMS}
+          selectWithLabelProps={{
             selectProps: {
               onChange: ({ target: { value } }) => {
                 const selectedUnit = value as DataSizeUnit;
@@ -915,10 +871,8 @@ const createVirtualDiskForm = (
               },
               value: get('inputUnits'),
             },
-          },
+          }}
-        )}
+        />
-        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-        <InputMessageBox {...get('inputSizeMessages')} />
       </Box>
       <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <SelectWithLabel
@@ -930,6 +884,7 @@ const createVirtualDiskForm = (
               get('sizes') <= storageGroupUUIDMapToFree[value]
             )
           }
+          messageBoxProps={get('inputStorageGroupUUIDMessages')}
           selectItems={storageGroupSelectItems}
           selectProps={{
             onChange: ({ target: { value } }) => {
@@ -941,8 +896,6 @@ const createVirtualDiskForm = (
             onClearIndicatorClick: () => handleVDStorageGroupChange(''),
           }}
         />
-        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-        <InputMessageBox {...get('inputStorageGroupUUIDMessages')} />
       </Box>
     </Box>
   );
@@ -1500,13 +1453,11 @@ const ProvisionServerDialog = ({
         <BodyText
           text={`Memory: ${memory.toString()}, Max: ${memoryMax.toString()}`}
         />
-        {createOutlinedInputWithSelect(
+        <OutlinedLabeledInputWithSelect
-          'ps-memory',
+          id="ps-memory"
-          'Memory',
+          label="Memory"
-          DATA_SIZE_UNIT_SELECT_ITEMS,
+          messageBoxProps={inputMemoryMessage}
-          {
+          inputWithLabelProps={{
-            messageBoxProps: inputMemoryMessage,
-            inputWithLabelProps: {
             inputProps: {
               endAdornment: createMaxValueButton(
                 `${inputMemoryMax} ${inputMemoryUnit}`,
@@ -1526,7 +1477,9 @@ const ProvisionServerDialog = ({
             inputLabelProps: {
               isNotifyRequired: inputMemoryValue.length === 0,
             },
-            },
+          }}
+          selectItems={DATA_SIZE_UNIT_SELECT_ITEMS}
+          selectWithLabelProps={{
             selectProps: {
               onChange: ({ target: { value } }) => {
                 const selectedUnit = value as DataSizeUnit;
@@ -1535,8 +1488,8 @@ const ProvisionServerDialog = ({
               },
               value: inputMemoryUnit,
             },
-          },
+          }}
-        )}
+        />
         {virtualDisks.maxes.map((max, vdIndex) =>
           createVirtualDiskForm(
             virtualDisks,