kubeedge · ghosind · Dec 24, 2024
diff --git a/src/component/AddClusterRoleBindingDialog/index.tsx b/src/component/AddClusterRoleBindingDialog/index.tsx
@@ -61,6 +61,7 @@ const AddClusterRoleBindingDialog = ({ open, onClose, onSubmit }: AddClusterRole
           <TextField
             label="Name"
             placeholder="name"
+            margin="dense"
             variant="outlined"
             required
             error={!name}

diff --git a/src/component/AddClusterRoleDialog/index.tsx b/src/component/AddClusterRoleDialog/index.tsx
@@ -121,6 +121,7 @@ const AddClusterRoleDialog = ({ open, onClose, onSubmit }: AddClusterRoleDialogP
       <DialogContent>
         <Box sx={{ marginBottom: '16px' }}>
           <TextField
+            margin="dense"
             label="Name"
             placeholder="name"
             fullWidth
@@ -260,7 +261,7 @@ const AddClusterRoleDialog = ({ open, onClose, onSubmit }: AddClusterRoleDialogP
         </Box>
       </DialogContent>
       <DialogActions>
-        <Button onClick={handleClose} variant="outlined">Cancel</Button>
+        <Button onClick={handleClose}>Cancel</Button>
         <Button onClick={handleSubmit} variant="contained">Submit</Button>
       </DialogActions>
     </Dialog>

diff --git a/src/component/AddConfigmapDialog/index.tsx b/src/component/AddConfigmapDialog/index.tsx
@@ -83,8 +83,8 @@ const AddConfigmapDialog = ({ open, onClose, onSubmit }: AddConfigmapDialogProps
     <Dialog open={!!open} onClose={handleClose}>
       <DialogTitle>Add Configmap</DialogTitle>
       <DialogContent>
-        <Box sx={{ width: '500px' }}>
-          <FormControl fullWidth sx={{ marginBottom: '16px' }}>
+        <Box sx={{ width: '500px', gap: '16px' }}>
+          <FormControl fullWidth margin="dense">
             <InputLabel id="namespace-label">Namespace</InputLabel>
             <Select
               labelId="namespace-label"

diff --git a/src/component/AddDeviceDialog/index.tsx b/src/component/AddDeviceDialog/index.tsx
@@ -113,6 +113,7 @@ const AddDeviceDialog = ({ open, onClose, onSubmit }: AddDeviceDialogProps) => {
               render={({ field }) => (
                 <TextField
                   {...field}
+                  margin="dense"
                   label="Name"
                   placeholder="name"
                   variant="outlined"
@@ -278,7 +279,7 @@ const AddDeviceDialog = ({ open, onClose, onSubmit }: AddDeviceDialogProps) => {
             </TableContainer>
           </Box>
           <DialogActions>
-            <Button onClick={handleClose} variant="outlined">
+            <Button onClick={handleClose}>
               Cancel
             </Button>
             <Button type="submit" variant="contained">

diff --git a/src/component/AddDeviceModelDialog/index.tsx b/src/component/AddDeviceModelDialog/index.tsx
@@ -121,6 +121,7 @@ const AddDeviceModelDialog = ({ open, onClose, onSubmit }: AddDeviceModelDialogP
       <DialogContent>
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
           <TextField
+            margin="dense"
             label="Name"
             variant="outlined"
             value={name}
@@ -167,6 +168,7 @@ const AddDeviceModelDialog = ({ open, onClose, onSubmit }: AddDeviceModelDialogP
           <FormControl fullWidth>
             <InputLabel>Attribute Type</InputLabel>
             <Select
+              label="Attribute Type"
               value={attributeType}
               onChange={(e) => setAttributeType(e.target.value)}
               displayEmpty

diff --git a/src/component/AddEdgeApplicationDialog/index.tsx b/src/component/AddEdgeApplicationDialog/index.tsx
@@ -49,6 +49,8 @@ const TargetNodeGroupField = ({ index, onRemove, nodeGroups, value, onChange }:
       fullWidth
       select
       placeholder="name"
+      label="Name"
+      margin="dense"
       value={value?.name}
       onChange={(event) => onChange(index, 'name', event.target.value)}
       sx={{ marginBottom: '8px' }}
@@ -162,6 +164,7 @@ const AddEdgeApplicationDialog = ({ open, onClose, onSubmit }: AddEdgeApplicatio
             fullWidth
             select
             label="Namespace"
+            margin="dense"
             value={namespace}
             onChange={(e) => setNamespace(e.target.value)}
             required

diff --git a/src/component/AddNodeDialog/index.tsx b/src/component/AddNodeDialog/index.tsx
@@ -71,6 +71,7 @@ const AddNodeDialog = ({ open, onClose }: AddNodeDialogProps) => {
             error={!!formErrors.cloudMasterIP}
             helperText={formErrors.cloudMasterIP}
             placeholder="192.168.30.300:3000"
+            margin="dense"
             required
             fullWidth
           />
@@ -82,15 +83,18 @@ const AddNodeDialog = ({ open, onClose }: AddNodeDialogProps) => {
             error={!!formErrors.kubeedgeVersion}
             helperText={formErrors.kubeedgeVersion}
             placeholder="1.12.1"
+            margin="dense"
             required
             fullWidth
           />
           <FormControl error={!!formErrors.runtimeType} fullWidth required>
-            <InputLabel>Runtime type</InputLabel>
+            <InputLabel id="runtime-type-select-label">Runtime type</InputLabel>
             <Select
+              labelId="runtime-type-select-label"
               name="runtimeType"
               value={formValues.runtimeType}
               onChange={handleInputChange}
+              label="Runtime type"
               placeholder="Please select a runtime type"
             >
               <MenuItem value="docker">Docker</MenuItem>
@@ -106,6 +110,7 @@ const AddNodeDialog = ({ open, onClose }: AddNodeDialogProps) => {
             error={!!formErrors.token}
             helperText={formErrors.token}
             placeholder="Please enter Token"
+            margin="dense"
             required
             fullWidth
           />
@@ -117,6 +122,7 @@ const AddNodeDialog = ({ open, onClose }: AddNodeDialogProps) => {
             multiline
             rows={4}
             placeholder="Please enter command"
+            margin="dense"
           />
         </Box>
       </DialogContent>

diff --git a/src/component/AddNodeGroupDialog/index.tsx b/src/component/AddNodeGroupDialog/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Dialog, DialogTitle, DialogContent, TextField, MenuItem, Button, IconButton, Box, Typography } from '@mui/material';
+import { Dialog, DialogTitle, DialogContent, TextField, MenuItem, Button, IconButton, Box, Typography, FormControl, InputLabel } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
 import { Select } from '@mui/material';
@@ -82,24 +82,29 @@ const AddNodeGroupDialog = ({ open, onClose, onSubmit }: AddNodeGroupDialogProps
             value={name}
             onChange={handleNameChange}
             required
+            margin="dense"
             helperText={!name && 'Miss name'}
           />
-          <Select
-            multiple
-            value={nodes}
-            onChange={handleNodesChange}
-            renderValue={(selected) => selected.join(', ')}
-            displayEmpty
-            required
-            placeholder="nodes"
-            sx={{ minWidth: 300 }}
-          >
-            {data?.items?.map((node) => (
-              <MenuItem key={node?.metadata?.uid} value={node?.metadata?.name || ''}>
-                {node?.metadata?.name || ''}
-              </MenuItem>
-            ))}
-          </Select>
+          <FormControl fullWidth>
+            <InputLabel id="nodes-select-label">Nodes</InputLabel>
+            <Select
+              multiple
+              labelId="nodes-select-label"
+              value={nodes}
+              onChange={handleNodesChange}
+              renderValue={(selected) => selected.join(', ')}
+              required
+              label="Nodes"
+              placeholder="nodes"
+              sx={{ minWidth: 300 }}
+            >
+              {data?.items?.map((node) => (
+                <MenuItem key={node?.metadata?.uid} value={node?.metadata?.name || ''}>
+                  {node?.metadata?.name || ''}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
           <Box>
             <Typography variant="subtitle1" sx={{ marginBottom: '8px' }}>MatchLabels</Typography>
             {matchLabels.map((matchLabel, index) => (
@@ -108,6 +113,7 @@ const AddNodeGroupDialog = ({ open, onClose, onSubmit }: AddNodeGroupDialogProps
                   label="Key"
                   placeholder="Please input key"
                   variant="outlined"
+                  margin="dense"
                   value={matchLabel.key}
                   onChange={(e) => handleMatchLabelChange(index, 'key', e.target.value)}
                   sx={{ flex: 1 }}
@@ -118,6 +124,7 @@ const AddNodeGroupDialog = ({ open, onClose, onSubmit }: AddNodeGroupDialogProps
                   label="Value"
                   placeholder="Please input value"
                   variant="outlined"
+                  margin="dense"
                   value={matchLabel.value}
                   onChange={(e) => handleMatchLabelChange(index, 'value', e.target.value)}
                   sx={{ flex: 1 }}
@@ -141,7 +148,7 @@ const AddNodeGroupDialog = ({ open, onClose, onSubmit }: AddNodeGroupDialogProps
             </Button>
           </Box>
           <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: '16px' }}>
-            <Button variant="outlined" onClick={handleClose}>Cancel</Button>
+            <Button onClick={handleClose}>Cancel</Button>
             <Button variant="contained" onClick={handleSubmit}>Submit</Button>
           </Box>
         </Box>

diff --git a/src/component/AddRoleBindingDialog/index.tsx b/src/component/AddRoleBindingDialog/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Dialog, DialogTitle, DialogContent, TextField, Button, Box, Typography, IconButton, MenuItem, Select } from '@mui/material';
+import { Dialog, DialogTitle, DialogContent, TextField, Button, Box, Typography, IconButton, MenuItem, Select, FormControl, InputLabel } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
 import { RoleBinding, RoleRef, Subject } from '@/types/roleBinding';
@@ -73,20 +73,23 @@ const AddRoleBindingDialog = ({ open, onClose, onSubmit }: AddRoleBindingDialogP
       <DialogTitle>Add RoleBinding</DialogTitle>
       <DialogContent>
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-          <Select
-            label="Namespace"
-            value={namespace}
-            onChange={(event) => setNamespace(event.target.value)}
-            sx={{ marginBottom: '16px' }}
-            required
-            placeholder="Namespace"
-          >
-            {data?.items?.map((item) => (
-              <MenuItem key={item.metadata?.uid} value={item?.metadata?.name}>
-                {item?.metadata?.name}
-              </MenuItem>
-            ))}
-            </Select>
+          <FormControl fullWidth margin="dense">
+            <InputLabel>Namespace</InputLabel>
+            <Select
+              label="Namespace"
+              value={namespace}
+              onChange={(event) => setNamespace(event.target.value)}
+              sx={{ marginBottom: '16px' }}
+              required
+              placeholder="Namespace"
+            >
+              {data?.items?.map((item) => (
+                <MenuItem key={item.metadata?.uid} value={item?.metadata?.name}>
+                  {item?.metadata?.name}
+                </MenuItem>
+              ))}
+              </Select>
+          </FormControl>
           <TextField
             label="Name"
             variant="outlined"
@@ -172,7 +175,7 @@ const AddRoleBindingDialog = ({ open, onClose, onSubmit }: AddRoleBindingDialogP
             </Button>
           </Box>
           <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: '16px' }}>
-            <Button variant="outlined" onClick={handleClose}>Cancel</Button>
+            <Button onClick={handleClose}>Cancel</Button>
             <Button variant="contained" color="primary" onClick={handleSubmit}>Submit</Button>
           </Box>
         </Box>

diff --git a/src/component/AddRoleDialog/index.tsx b/src/component/AddRoleDialog/index.tsx
@@ -71,6 +71,7 @@ const AddRoleDialog = ({ open, onClose, onSubmit }: AddRoleDialogProps) => {
       <DialogContent>
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
           <TextField
+            margin="dense"
             label="Namespace"
             placeholder="Please select namespace"
             variant="outlined"
@@ -156,7 +157,7 @@ const AddRoleDialog = ({ open, onClose, onSubmit }: AddRoleDialogProps) => {
             </Button>
           </Box>
           <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: '16px', marginTop: '16px' }}>
-            <Button variant="outlined" onClick={handleClose}>Cancel</Button>
+            <Button onClick={handleClose}>Cancel</Button>
             <Button variant="contained" color="primary" onClick={handleSubmit}>Submit</Button>
           </Box>
         </Box>

diff --git a/src/component/AddRuleDialog/index.tsx b/src/component/AddRuleDialog/index.tsx
@@ -103,12 +103,12 @@ const AddRuleDialog = ({ open, onClose, onSubmit }: AddRuleDialogProps) => {
       <DialogTitle>Add Rule</DialogTitle>
       <DialogContent>
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-          <FormControl fullWidth>
+          <FormControl fullWidth margin="dense">
             <InputLabel>Namespace</InputLabel>
             <Select
+              label="Namespace"
               value={namespace}
               onChange={(e) => setNamespace(e.target.value)}
-              displayEmpty
             >
               {namespaceData?.items?.map(item => (
                 <MenuItem key={item?.metadata?.uid} value={item?.metadata?.name}>
@@ -133,6 +133,7 @@ const AddRuleDialog = ({ open, onClose, onSubmit }: AddRuleDialogProps) => {
           <FormControl fullWidth>
             <InputLabel>Source</InputLabel>
             <Select
+              label="Source"
               value={source}
               onChange={(e) => setSource(e.target.value)}
               displayEmpty
@@ -160,6 +161,7 @@ const AddRuleDialog = ({ open, onClose, onSubmit }: AddRuleDialogProps) => {
           <FormControl fullWidth>
             <InputLabel>Target</InputLabel>
             <Select
+              label="Target"
               value={target}
               onChange={(e) => setTarget(e.target.value)}
               displayEmpty

diff --git a/src/component/AddRuleEndpointDialog/index.tsx b/src/component/AddRuleEndpointDialog/index.tsx
@@ -74,6 +74,7 @@ const AddRuleEndpointDialog = ({ open, onClose, onSubmit }: AddRuleEndpointDialo
           <FormControl fullWidth margin="normal" error={!!errors.newNamespace}>
             <InputLabel required>Namespace</InputLabel>
             <Select
+              label="Namespace"
               value={namespace}
               onChange={(e) => setNamespace(e.target.value)}
               placeholder="Namespace"
@@ -102,6 +103,7 @@ const AddRuleEndpointDialog = ({ open, onClose, onSubmit }: AddRuleEndpointDialo
           <FormControl fullWidth margin="normal" error={!!errors.ruleEndpointType}>
             <InputLabel required>RuleEndpointType</InputLabel>
             <Select
+              label="RuleEndpointType"
               value={endpointType}
               onChange={(event) => setEndpointType(event.target.value)}
               placeholder="RuleEndpointType"

diff --git a/src/component/AddSecretDialog/index.tsx b/src/component/AddSecretDialog/index.tsx
@@ -101,6 +101,7 @@ const AddSecretDialog = ({ open, onClose, onSubmit }: AddSecretDialogProps) => {
         <Box component="form" sx={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
           <TextField
             select
+            margin="dense"
             label="Namespace"
             value={namespace}
             onChange={handleNamespaceChange}
@@ -217,7 +218,7 @@ const AddSecretDialog = ({ open, onClose, onSubmit }: AddSecretDialogProps) => {
           )}
 
           <Box sx={{ display: 'flex', justifyContent: 'flex-end', marginTop: '16px' }}>
-            <Button onClick={handleClose} color="secondary" variant="outlined">
+            <Button onClick={handleClose}>
               Cancel
             </Button>
             <Button onClick={handleSave} color="primary" variant="contained" sx={{ marginLeft: '16px' }}>

diff --git a/src/component/AddServiceAccountDialog/index.tsx b/src/component/AddServiceAccountDialog/index.tsx
@@ -15,7 +15,7 @@ interface AddServiceAccountDialogProps {
 const AddServiceAccountDialog = ({ open, onClose, onSubmit }: AddServiceAccountDialogProps) => {
   const [namespace, setNamespace] = React.useState('');
   const [name, setName] = React.useState('');
-  const [secrets, setSecrets] = React.useState([]);
+  const [secrets, setSecrets] = React.useState<string[]>([]);
   const [formErrors, setFormErrors] = React.useState<any>({});
   const namespaceData = useListNamespaces()?.data;
   const { data, mutate } = useListSecrets(namespace);
@@ -67,6 +67,7 @@ const AddServiceAccountDialog = ({ open, onClose, onSubmit }: AddServiceAccountD
           <FormControl fullWidth margin="normal" error={Boolean(formErrors.namespace)}>
             <InputLabel required>Namespace</InputLabel>
             <Select
+              label="Namespace"
               value={namespace}
               onChange={(event) => setNamespace(event.target.value)}
               placeholder="Namespace"
@@ -98,11 +99,10 @@ const AddServiceAccountDialog = ({ open, onClose, onSubmit }: AddServiceAccountD
           <FormControl fullWidth margin="normal" error={Boolean(formErrors.secrets)}>
             <InputLabel required>Secrets</InputLabel>
             <Select<string[]>
+              label="Secrets"
               multiple
               value={secrets}
-              // TODO: remove it
-              // @ts-ignore
-              onChange={(event) => setSecrets(event.target.value)}
+              onChange={(event) => setSecrets(typeof event.target.value === 'string' ? [event.target.value] : event.target.value)}
               placeholder="Secrets"
             >
               {data?.items?.map((secret) => (