fix(striker-ui): apply InputMessageBox and SelectWithLabel in provision server

main
Tsu-ba-me 3 years ago
parent 8c4f62c862
commit bbba31036a
  1. 184
      striker-ui/components/ProvisionServerDialog.tsx

@ -5,14 +5,7 @@ import {
useEffect, useEffect,
useState, useState,
} from 'react'; } from 'react';
import { import { Box, Dialog, DialogProps, InputAdornment } from '@mui/material';
Box,
Checkbox,
Dialog,
DialogProps,
FormControl,
InputAdornment,
} from '@mui/material';
import { import {
dSize as baseDSize, dSize as baseDSize,
DataSizeUnit, DataSizeUnit,
@ -22,15 +15,14 @@ import {
import Autocomplete from './Autocomplete'; import Autocomplete from './Autocomplete';
import ContainedButton, { ContainedButtonProps } from './ContainedButton'; import ContainedButton, { ContainedButtonProps } from './ContainedButton';
import MenuItem from './MenuItem'; import InputMessageBox from './InputMessageBox';
import MessageBox, { MessageBoxProps } from './MessageBox'; import { MessageBoxProps } from './MessageBox';
import OutlinedInput from './OutlinedInput';
import OutlinedInputLabel from './OutlinedInputLabel';
import OutlinedInputWithLabel, { import OutlinedInputWithLabel, {
OutlinedInputWithLabelProps, OutlinedInputWithLabelProps,
} from './OutlinedInputWithLabel'; } from './OutlinedInputWithLabel';
import { Panel, PanelHeader } from './Panels'; import { Panel, PanelHeader } from './Panels';
import Select, { SelectProps } from './Select'; import { SelectProps } from './Select';
import SelectWithLabel, { SelectItem } from './SelectWithLabel';
import Slider, { SliderProps } from './Slider'; import Slider, { SliderProps } from './Slider';
import { import {
testInput as baseTestInput, testInput as baseTestInput,
@ -38,19 +30,14 @@ import {
testNotBlank, testNotBlank,
testRange, testRange,
} from '../lib/test_input'; } from '../lib/test_input';
import { BodyText, HeaderText } from './Text';
import { import {
InputTestBatches, InputTestBatches,
TestInputFunction, TestInputFunction,
} from '../types/TestInputFunction'; } from '../types/TestInputFunction';
import { BodyText, HeaderText } from './Text';
type InputMessage = Partial<Pick<MessageBoxProps, 'type' | 'text'>>; type InputMessage = Partial<Pick<MessageBoxProps, 'type' | 'text'>>;
type SelectItem<SelectItemValueType = string> = {
displayValue?: SelectItemValueType;
value: SelectItemValueType;
};
type ProvisionServerDialogProps = { type ProvisionServerDialogProps = {
dialogProps: DialogProps; dialogProps: DialogProps;
}; };
@ -364,61 +351,6 @@ const DATA_SIZE_UNIT_SELECT_ITEMS: SelectItem<DataSizeUnit>[] = [
{ value: 'TB' }, { value: 'TB' },
]; ];
const createInputMessage = ({ text, type }: Partial<MessageBoxProps> = {}) =>
text && <MessageBox {...{ sx: { marginTop: '.4em' }, text, type }} />;
const createOutlinedSelect = (
id: string,
label: string | undefined,
selectItems: SelectItem[],
{
checkItem,
disableItem,
hideItem,
messageBoxProps,
selectProps,
isCheckableItems = selectProps?.multiple,
}: {
checkItem?: (value: string) => boolean;
disableItem?: (value: string) => boolean;
hideItem?: (value: string) => boolean;
isCheckableItems?: boolean;
messageBoxProps?: Partial<MessageBoxProps>;
selectProps?: Partial<SelectProps>;
} = {},
): JSX.Element => (
<FormControl>
{label && (
<OutlinedInputLabel {...{ htmlFor: id }}>{label}</OutlinedInputLabel>
)}
<Select
// eslint-disable-next-line react/jsx-props-no-spreading
{...{
id,
input: <OutlinedInput {...{ label }} />,
...selectProps,
}}
>
{selectItems.map(({ value, displayValue = value }) => (
<MenuItem
disabled={disableItem?.call(null, value)}
key={`${id}-${value}`}
sx={{
display: hideItem?.call(null, value) ? 'none' : undefined,
}}
value={value}
>
{isCheckableItems && (
<Checkbox checked={checkItem?.call(null, value)} />
)}
{displayValue}
</MenuItem>
))}
</Select>
{createInputMessage(messageBoxProps)}
</FormControl>
);
const createOutlinedSlider = ( const createOutlinedSlider = (
id: string, id: string,
label: string, label: string,
@ -470,11 +402,12 @@ const createOutlinedInputWithSelect = (
...inputWithLabelProps, ...inputWithLabelProps,
}} }}
/> />
{createOutlinedSelect(`${id}-nested-select`, undefined, selectItems, { <SelectWithLabel
selectProps, {...{ id: `${id}-nested-select`, selectItems, selectProps }}
})} />
</Box> </Box>
{createInputMessage(messageBoxProps)} {/* eslint-disable-next-line react/jsx-props-no-spreading */}
<InputMessageBox {...messageBoxProps} />
</Box> </Box>
); );
@ -982,20 +915,21 @@ const createVirtualDiskForm = (
}, },
}, },
)} )}
{createInputMessage(get('inputSizeMessages'))} {/* eslint-disable-next-line react/jsx-props-no-spreading */}
<InputMessageBox {...get('inputSizeMessages')} />
</Box> </Box>
<Box sx={{ display: 'flex', flexDirection: 'column' }}> <Box sx={{ display: 'flex', flexDirection: 'column' }}>
{createOutlinedSelect( <SelectWithLabel
`ps-storage-group-${vdIndex}`, id={`ps-storage-group-${vdIndex}`}
'Storage group', label="Storage group"
storageGroupSelectItems, disableItem={(value) =>
{
disableItem: (value) =>
!( !(
includeStorageGroupUUIDs.includes(value) && includeStorageGroupUUIDs.includes(value) &&
get('sizes') <= storageGroupUUIDMapToFree[value] get('sizes') <= storageGroupUUIDMapToFree[value]
), )
selectProps: { }
selectItems={storageGroupSelectItems}
selectProps={{
onChange: ({ target: { value } }) => { onChange: ({ target: { value } }) => {
const selectedStorageGroupUUID = value as string; const selectedStorageGroupUUID = value as string;
@ -1003,10 +937,10 @@ const createVirtualDiskForm = (
}, },
value: get('inputStorageGroupUUIDs'), value: get('inputStorageGroupUUIDs'),
onClearIndicatorClick: () => handleVDStorageGroupChange(''), onClearIndicatorClick: () => handleVDStorageGroupChange(''),
}, }}
}, />
)} {/* eslint-disable-next-line react/jsx-props-no-spreading */}
{createInputMessage(get('inputStorageGroupUUIDMessages'))} <InputMessageBox {...get('inputStorageGroupUUIDMessages')} />
</Box> </Box>
</Box> </Box>
); );
@ -1529,6 +1463,9 @@ const ProvisionServerDialog = ({
}, },
value: inputServerNameValue, value: inputServerNameValue,
}} }}
inputLabelProps={{
isNotifyRequired: inputServerNameValue.length === 0,
}}
messageBoxProps={inputServerNameMessage} messageBoxProps={inputServerNameMessage}
/> />
</Box> </Box>
@ -1582,6 +1519,9 @@ const ProvisionServerDialog = ({
type: 'number', type: 'number',
value: inputMemoryValue, value: inputMemoryValue,
}, },
inputLabelProps: {
isNotifyRequired: inputMemoryValue.length === 0,
},
}, },
selectProps: { selectProps: {
onChange: ({ target: { value } }) => { onChange: ({ target: { value } }) => {
@ -1605,15 +1545,14 @@ const ProvisionServerDialog = ({
testInput, testInput,
), ),
)} )}
{createOutlinedSelect( <SelectWithLabel
'ps-install-image', disableItem={(value) => value === inputDriverISOFileUUID}
'Install ISO', hideItem={(value) => !includeFileUUIDs.includes(value)}
fileSelectItems, id="ps-install-image"
{ label="Install ISO"
disableItem: (value) => value === inputDriverISOFileUUID, messageBoxProps={inputInstallISOMessage}
hideItem: (value) => !includeFileUUIDs.includes(value), selectItems={fileSelectItems}
messageBoxProps: inputInstallISOMessage, selectProps={{
selectProps: {
onChange: ({ target: { value } }) => { onChange: ({ target: { value } }) => {
const newInstallISOFileUUID = value as string; const newInstallISOFileUUID = value as string;
@ -1622,33 +1561,32 @@ const ProvisionServerDialog = ({
onClearIndicatorClick: () => onClearIndicatorClick: () =>
handleInputInstallISOFileUUIDChange(''), handleInputInstallISOFileUUIDChange(''),
value: inputInstallISOFileUUID, value: inputInstallISOFileUUID,
}, }}
}, />
)} <SelectWithLabel
{createOutlinedSelect( disableItem={(value) => value === inputInstallISOFileUUID}
'ps-driver-image', hideItem={(value) => !includeFileUUIDs.includes(value)}
'Driver ISO (optional)', id="ps-driver-image"
fileSelectItems, label="Driver ISO (optional)"
{ messageBoxProps={inputDriverISOMessage}
disableItem: (value) => value === inputInstallISOFileUUID, selectItems={fileSelectItems}
hideItem: (value) => !includeFileUUIDs.includes(value), selectProps={{
messageBoxProps: inputDriverISOMessage,
selectProps: {
onChange: ({ target: { value } }) => { onChange: ({ target: { value } }) => {
const newDriverISOFileUUID = value as string; const newDriverISOFileUUID = value as string;
handleInputDriverISOFileUUIDChange(newDriverISOFileUUID); handleInputDriverISOFileUUIDChange(newDriverISOFileUUID);
}, },
onClearIndicatorClick: () => onClearIndicatorClick: () => handleInputDriverISOFileUUIDChange(''),
handleInputDriverISOFileUUIDChange(''),
value: inputDriverISOFileUUID, value: inputDriverISOFileUUID,
}, }}
}, />
)} <SelectWithLabel
{createOutlinedSelect('ps-anvil', 'Anvil', anvilSelectItems, { disableItem={(value) => !includeAnvilUUIDs.includes(value)}
disableItem: (value) => !includeAnvilUUIDs.includes(value), id="ps-anvil"
messageBoxProps: inputAnvilMessage, label="Anvil node pair"
selectProps: { messageBoxProps={inputAnvilMessage}
selectItems={anvilSelectItems}
selectProps={{
onChange: ({ target: { value } }) => { onChange: ({ target: { value } }) => {
const newAnvilUUID: string = value as string; const newAnvilUUID: string = value as string;
@ -1656,8 +1594,8 @@ const ProvisionServerDialog = ({
}, },
onClearIndicatorClick: () => handleInputAnvilValueChange(''), onClearIndicatorClick: () => handleInputAnvilValueChange(''),
value: inputAnvilValue, value: inputAnvilValue,
}, }}
})} />
<Autocomplete <Autocomplete
id="ps-optimize-for-os" id="ps-optimize-for-os"
label="Optimize for OS" label="Optimize for OS"

Loading…
Cancel
Save