Unverified Commit deac82c6 authored by Yue Yang's avatar Yue Yang Committed by GitHub
Browse files

chore: update display of disabled scope (#3621)

parent 61f2af48
Showing with 22 additions and 47 deletions
+22 -47
......@@ -19,6 +19,7 @@ For more information and how-to, see [RFC: Keep A Changelog](https://github.com/
- Refine logging in pkg/dashboard/apiserver/event, moved package level variable log into struct Service as a field. [#3528](https://github.com/chaos-mesh/chaos-mesh/pull/3528)
- Refine logging in pkg/dashboard/apiserver/auth/gcp, moved package level variable log into struct Service as a field [#3527](https://github.com/chaos-mesh/chaos-mesh/pull/3527)
- Change e2e config settings to append "pause image" args. [#3567](https://github.com/chaos-mesh/chaos-mesh/pull/3567)
- Update display of disabled scope in UI [#3621](https://github.com/chaos-mesh/chaos-mesh/pull/3621)
### Deprecated
......
......@@ -28,17 +28,9 @@ interface MoreOptionsProps {
beforeOpen?: () => void
afterClose?: () => void
title?: string | JSX.Element
disabled?: boolean
}
const MoreOptions: React.FC<MoreOptionsProps> = ({
isOpen = false,
beforeOpen,
afterClose,
title,
disabled,
children,
}) => {
const MoreOptions: React.FC<MoreOptionsProps> = ({ isOpen = false, beforeOpen, afterClose, title, children }) => {
const [open, _setOpen] = useState(isOpen)
const setOpen = () => {
......@@ -54,12 +46,7 @@ const MoreOptions: React.FC<MoreOptionsProps> = ({
return (
<Space>
<Box textAlign="right">
<Button
color="primary"
startIcon={open ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}
onClick={setOpen}
disabled={disabled}
>
<Button color="primary" startIcon={open ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />} onClick={setOpen}>
{title ? title : <T id="common.moreOptions" />}
</Button>
</Box>
......
......@@ -125,10 +125,7 @@ const Step2: React.FC<Step2Props> = ({ inWorkflow = false, inSchedule = false })
<Grid container spacing={6}>
<Grid item xs={6}>
<Space>
<Typography sx={{ color: scopeDisabled ? 'text.disabled' : undefined }}>
{i18n('newE.steps.scope')}
{scopeDisabled && i18n('newE.steps.scopeDisabled')}
</Typography>
<Typography>{i18n('newE.steps.scope')}</Typography>
{env === 'k8s' ? (
namespaces.length ? (
<Scope kind={kind} namespaces={namespaces} scope="spec.selector" modeScope="spec" />
......@@ -140,7 +137,7 @@ const Step2: React.FC<Step2Props> = ({ inWorkflow = false, inSchedule = false })
<Nodes />
<Divider />
<Typography>{i18n('newE.scope.mode')}</Typography>
<Mode disabled={false} modeScope={'spec'} scope={'spec.selector'} />
<Mode modeScope={'spec'} scope={'spec.selector'} />
</>
)}
</Space>
......
......@@ -29,12 +29,11 @@ const modes = [
const modesWithAdornment = ['fixed-percent', 'random-max-percent']
interface ModeProps {
disabled: boolean
modeScope: string
scope: string
}
const Mode: React.FC<ModeProps> = ({ disabled, modeScope, scope }) => {
const Mode: React.FC<ModeProps> = ({ modeScope, scope }) => {
const { values } = useFormikContext()
return (
......@@ -43,7 +42,6 @@ const Mode: React.FC<ModeProps> = ({ disabled, modeScope, scope }) => {
name={modeScope ? `${modeScope}.mode` : 'mode'}
label={<T id="newE.scope.mode" />}
helperText={<T id="newE.scope.modeHelper" />}
disabled={disabled}
>
<MenuItem value="all">All</MenuItem>
{modes.map((option) => (
......@@ -61,7 +59,6 @@ const Mode: React.FC<ModeProps> = ({ disabled, modeScope, scope }) => {
endAdornment={
modesWithAdornment.includes(getIn(values, scope).mode) && <InputAdornment position="end">%</InputAdornment>
}
disabled={disabled}
/>
)}
</>
......
......@@ -84,9 +84,7 @@ describe('<Scope />', () => {
</Formik>
)
const nsSelectors = screen.getByRole('combobox', { name: 'Namespace Selectors' })
expect(nsSelectors.className).toContain('disabled')
expect(screen.getByText('AWSChaos does not need to define the scope.')).toBeInTheDocument()
})
it('loads and then choose a namespace', async () => {
......
......@@ -99,7 +99,12 @@ const Scope: React.FC<ScopeProps> = ({ kind, namespaces, scope = 'selector', mod
}
}, [dispatch, getPods, currentNamespaces, currentLabels, currentAnnotations])
return (
return disabled ? (
<Typography
variant="body2"
sx={{ color: 'text.disabled' }}
>{`${kind} does not need to define the scope.`}</Typography>
) : (
<Space>
<AutocompleteField
freeSolo
......@@ -115,7 +120,6 @@ const Scope: React.FC<ScopeProps> = ({ kind, namespaces, scope = 'selector', mod
}
options={!enableKubeSystemNS ? namespaces.filter((d) => d !== 'kube-system') : namespaces}
error={getIn(errors, `${scope}.namespaces`) && getIn(touched, `${scope}.namespaces`) ? true : false}
disabled={disabled}
/>
<AutocompleteField
......@@ -125,10 +129,9 @@ const Scope: React.FC<ScopeProps> = ({ kind, namespaces, scope = 'selector', mod
label={<T id="k8s.labelSelectors" />}
helperText={<T id="newE.scope.labelSelectorsHelper" />}
options={labelKVs}
disabled={disabled}
/>
<MoreOptions disabled={disabled}>
<MoreOptions>
<AutocompleteField
freeSolo
multiple
......@@ -136,7 +139,6 @@ const Scope: React.FC<ScopeProps> = ({ kind, namespaces, scope = 'selector', mod
label={<T id="k8s.annotationSelectors" />}
helperText={<T id="newE.scope.annotationSelectorsHelper" />}
options={annotationKVs}
disabled={disabled}
/>
<SelectField<string[]>
......@@ -144,7 +146,6 @@ const Scope: React.FC<ScopeProps> = ({ kind, namespaces, scope = 'selector', mod
name={`${scope}.podPhaseSelectors`}
label={<T id="k8s.podPhaseSelectors" />}
helperText={<T id="newE.scope.phaseSelectorsHelper" />}
disabled={disabled}
fullWidth
>
{podPhases.map((option) => (
......@@ -155,20 +156,18 @@ const Scope: React.FC<ScopeProps> = ({ kind, namespaces, scope = 'selector', mod
</SelectField>
</MoreOptions>
<Mode disabled={disabled} modeScope={modeScope} scope={scope} />
<Mode modeScope={modeScope} scope={scope} />
<div>
<Typography fontWeight="bold" sx={{ color: disabled ? 'text.disabled' : undefined }}>
{podsPreviewTitle || <T id="newE.scope.targetPodsPreview" />}
</Typography>
<Typography variant="body2" sx={{ color: disabled ? 'text.disabled' : 'text.secondary' }}>
<Typography fontWeight="bold">{podsPreviewTitle || <T id="newE.scope.targetPodsPreview" />}</Typography>
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
<T id="newE.scope.targetPodsPreviewHelper" />
</Typography>
</div>
{pods.length > 0 ? (
<ScopePodsTable scope={scope} pods={pods} />
) : (
<Typography variant="body2" fontWeight="medium" sx={{ color: disabled ? 'text.disabled' : undefined }}>
<Typography variant="body2" fontWeight="medium">
<T id="newE.scope.noPodsFound" />
</Typography>
)}
......
......@@ -39,7 +39,6 @@
"steps": {
"basic": "Metadata",
"scope": "Scope",
"scopeDisabled": " (No need to fill in)",
"run": "Run"
},
"loadFrom": "Load from",
......
......@@ -39,7 +39,6 @@
"steps": {
"basic": "元信息",
"scope": "范围",
"scopeDisabled": "(无需填写)",
"run": "运行"
},
"loadFrom": "加载自",
......
......@@ -45,9 +45,7 @@ export default ({ label, helperText, error, ...rest }: CheckboxProps) => {
control={<Checkbox {...rest} size="small" />}
label={label}
sx={{
ml: '-9px',
'.MuiFormControlLabel-label': {
pt: 0.5,
fontSize: 'body2.fontSize',
},
}}
......
......@@ -773,7 +773,7 @@ exports[`Storyshots Form/Checkbox Default 1`] = `
className="MuiFormControl-root css-15tfdqx-MuiFormControl-root"
>
<label
className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-ot9zlz-MuiFormControlLabel-root"
className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-wuturk-MuiFormControlLabel-root"
>
<span
className="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary css-15wgggf-MuiButtonBase-root-MuiCheckbox-root"
......@@ -830,7 +830,7 @@ exports[`Storyshots Form/Checkbox Disabled 1`] = `
className="MuiFormControl-root css-15tfdqx-MuiFormControl-root"
>
<label
className="MuiFormControlLabel-root Mui-disabled MuiFormControlLabel-labelPlacementEnd css-ot9zlz-MuiFormControlLabel-root"
className="MuiFormControlLabel-root Mui-disabled MuiFormControlLabel-labelPlacementEnd css-wuturk-MuiFormControlLabel-root"
>
<span
aria-disabled={true}
......@@ -888,7 +888,7 @@ exports[`Storyshots Form/Checkbox With Validation Error 1`] = `
className="MuiFormControl-root css-15tfdqx-MuiFormControl-root"
>
<label
className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd Mui-error css-ot9zlz-MuiFormControlLabel-root"
className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd Mui-error css-wuturk-MuiFormControlLabel-root"
>
<span
className="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary Mui-checked css-15wgggf-MuiButtonBase-root-MuiCheckbox-root"
......@@ -946,7 +946,7 @@ exports[`Storyshots Form/Checkbox Without Helper Text 1`] = `
className="MuiFormControl-root css-15tfdqx-MuiFormControl-root"
>
<label
className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-ot9zlz-MuiFormControlLabel-root"
className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-wuturk-MuiFormControlLabel-root"
>
<span
className="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary Mui-checked css-15wgggf-MuiButtonBase-root-MuiCheckbox-root"
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment