chore: update display of disabled scope (#3621)

CHANGELOG.md

@@ -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
 

ui/app/src/components/MoreOptions/index.tsx

@@ -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>

ui/app/src/components/NewExperimentNext/Step2.tsx

@@ -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>

ui/app/src/components/Scope/Mode.tsx

@@ -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}
         />
       )}
     </>

ui/app/src/components/Scope/index.test.tsx

@@ -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 () => {

ui/app/src/components/Scope/index.tsx

@@ -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>
       )}

ui/app/src/i18n/en.json

@@ -39,7 +39,6 @@
     "steps": {
       "basic": "Metadata",
       "scope": "Scope",
-      "scopeDisabled": " (No need to fill in)",
       "run": "Run"
     },
     "loadFrom": "Load from",

ui/app/src/i18n/zh.json

@@ -39,7 +39,6 @@
     "steps": {
       "basic": "元信息",
       "scope": "范围",
-      "scopeDisabled": "（无需填写）",
       "run": "运行"
     },
     "loadFrom": "加载自",

ui/packages/mui-extends/src/Checkbox/index.tsx

@@ -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',
           },
         }}

ui/packages/mui-extends/test/__snapshots__/storyshots.test.js.snap

@@ -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"