fix: Fix cluster diff form styles

Signed-off-by: leoliu <leoliu@yunify.com>

package.json

@@ -7,7 +7,7 @@
     "@babel/polyfill": "^7.7.0",
     "@hot-loader/react-dom": "^16.11.0",
     "@pitrix/babel-plugin-lego-imports": "^0.0.7",
-    "@pitrix/lego-ui": "^0.1.7-19",
+    "@pitrix/lego-ui": "^0.1.7-27",
     "ace-builds": "^1.4.7",
     "async-validator": "^1.8.5",
     "classnames": "^2.2.5",

src/components/Forms/Workload/ClusterDiffSettings/ContainerImage/index.jsx

@@ -17,22 +17,17 @@
  */
 
 import React, { Component } from 'react'
-import { omit, get } from 'lodash'
+import { get, omit } from 'lodash'
 
-import { Icon, Dropdown } from '@pitrix/lego-ui'
 import { observer } from 'mobx-react'
 
-import { Form } from 'components/Base'
-import Confirm from 'components/Forms/Base/Confirm'
-
 import SecretStore from 'stores/secret'
 import QuotaStore from 'stores/quota'
 import LimitRangeStore from 'stores/limitrange'
 
+import EditForm from '../EditForm'
 import ContainerSetting from '../../ContainerSettings/ContainerForm/ContainerSetting'
 
-import styles from './index.scss'
-
 @observer
 export default class ContainerImages extends Component {
   state = {
@@ -47,8 +42,6 @@ export default class ContainerImages extends Component {
 
   imageRegistryStore = new SecretStore()
 
-  formRef = React.createRef()
-
   componentDidMount() {
     this.fetchData()
   }
@@ -73,76 +66,31 @@ export default class ContainerImages extends Component {
     })
   }
 
-  handleSubmit = () => {
+  handleSubmit = data => {
     const { index, containerType, onEdit } = this.props
-    const form = this.formRef.current
-
-    form &&
-      form.validate(() => {
-        onEdit({ index, containerType, data: omit(form.getData(), 'type') })
-      })
-  }
-
-  handleCancel = () => {
-    const { showEdit } = this.props
-
-    showEdit('')
-  }
-
-  handleClick = () => {
-    const { container, showEdit } = this.props
-    showEdit(container.name)
+    onEdit({ index, containerType, data: omit(data, 'type') })
   }
 
-  renderContent() {
+  render() {
     const { cluster, namespace, container, containerType } = this.props
     const { quota, limitRanges, imageRegistries } = this.state
 
     return (
-      <div className={styles.form}>
-        <Form ref={this.formRef} type="inner" data={container}>
-          <ContainerSetting
-            className={styles.formContent}
-            data={container}
-            cluster={cluster}
-            namespace={namespace}
-            quota={quota}
-            limitRanges={limitRanges}
-            imageRegistries={imageRegistries}
-            defaultContainerType={containerType}
-          />
-        </Form>
-        <Confirm
-          className={styles.confirm}
-          onOk={this.handleSubmit}
-          onCancel={this.handleCancel}
-        />
-      </div>
-    )
-  }
-
-  render() {
-    const { container, selected, isEdit } = this.props
-
-    return (
-      <Dropdown
-        visible={isEdit}
-        placement="bottom"
-        closeAfterClick={false}
-        onOpen={this.handleClick}
-        content={this.renderContent()}
-        always={isEdit}
+      <EditForm
+        {...this.props}
+        title={<span>{`${t('Image')}: ${container.image}`}</span>}
+        onOk={this.handleSubmit}
       >
-        <div>
-          <span>{`${t('Image')}: ${container.image}`}</span>
-          {selected && (
-            <span className={styles.modify}>
-              <span>{t('Edit')}</span>
-              <Icon type="light" size={20} name="chevron-down" />
-            </span>
-          )}
-        </div>
-      </Dropdown>
+        <ContainerSetting
+          data={container}
+          cluster={cluster}
+          namespace={namespace}
+          quota={quota}
+          limitRanges={limitRanges}
+          imageRegistries={imageRegistries}
+          defaultContainerType={containerType}
+        />
+      </EditForm>
     )
   }
 }

src/components/Forms/Workload/ClusterDiffSettings/ContainerPorts/index.jsx

@@ -19,98 +19,43 @@
 import React, { Component } from 'react'
 import { pick } from 'lodash'
 
-import { Icon, Dropdown } from '@pitrix/lego-ui'
-import { Form } from 'components/Base'
-import Confirm from 'components/Forms/Base/Confirm'
-
+import EditForm from '../EditForm'
 import Ports from '../../ContainerSettings/ContainerForm/Ports'
 
 import styles from './index.scss'
 
 export default class ContainerPorts extends Component {
-  formRef = React.createRef()
-
-  handleSubmit = () => {
+  handleSubmit = data => {
     const { index, containerType, onEdit } = this.props
-    const form = this.formRef.current
-
-    form &&
-      form.validate(() => {
-        onEdit({ index, containerType, data: pick(form.getData(), ['ports']) })
-      })
-  }
-
-  handleCancel = () => {
-    const { showEdit } = this.props
-
-    showEdit('')
-  }
-
-  handleClick = () => {
-    const { container, showEdit } = this.props
-    showEdit(container.name)
-  }
-
-  renderContent() {
-    const { withService, container, containerType } = this.props
-    return (
-      <div className={styles.form}>
-        <Form ref={this.formRef} type="inner" data={container}>
-          <Ports
-            className={styles.formContent}
-            withService={containerType !== 'init' ? withService : false}
-          />
-        </Form>
-        <Confirm
-          className={styles.confirm}
-          onOk={this.handleSubmit}
-          onCancel={this.handleCancel}
-        />
-      </div>
-    )
+    onEdit({ index, containerType, data: pick(data, ['ports']) })
   }
 
   render() {
-    const {
-      container,
-      selected,
-      containerType,
-      withService,
-      isEdit,
-    } = this.props
+    const { container, containerType, withService } = this.props
 
     const showServicePort = containerType !== 'init' ? withService : false
 
-    return (
-      <Dropdown
-        visible={isEdit}
-        placement="bottom"
-        closeAfterClick={false}
-        onOpen={this.handleClick}
-        content={this.renderContent()}
-        always={isEdit}
-      >
-        <div>
-          <div>{`${t('Image')}: ${container.image}`}</div>
-          {container.ports &&
-            container.ports.map((port, index) => (
-              <div key={index} className={styles.port}>
-                <span>{`${t('Protocol')}: ${port.protocol}`}</span>
-                <span>{`${t('Name')}: ${port.name}`}</span>
-                <span>{`${t('Container Port')}: ${port.containerPort}`}</span>
-                {showServicePort && (
-                  <span>{`${t('Service Port')}: ${port.servicePort}`}</span>
-                )}
-              </div>
-            ))}
-          {selected && (
-            <div className={styles.modify}>
-              <span>{t('Edit')}</span>
-              <Icon type="light" size={20} name="chevron-down" />
+    const title = (
+      <>
+        <div>{`${t('Image')}: ${container.image}`}</div>
+        {container.ports &&
+          container.ports.map((port, index) => (
+            <div key={index} className={styles.port}>
+              <span>{`${t('Protocol')}: ${port.protocol}`}</span>
+              <span>{`${t('Name')}: ${port.name}`}</span>
+              <span>{`${t('Container Port')}: ${port.containerPort}`}</span>
+              {showServicePort && (
+                <span>{`${t('Service Port')}: ${port.servicePort}`}</span>
+              )}
             </div>
-          )}
-        </div>
-      </Dropdown>
+          ))}
+      </>
+    )
+
+    return (
+      <EditForm {...this.props} title={title} onOk={this.handleSubmit}>
+        <Ports withService={containerType !== 'init' ? withService : false} />
+      </EditForm>
     )
   }
 }

src/components/Forms/Workload/ClusterDiffSettings/ContainerPorts/index.scss

@@ -1,40 +1,10 @@
 @import '~scss/variables';
 @import '~scss/mixins';
 
-.form {
-  width: 854px;
-}
-
-.formContent {
-  min-height: 320px;
-  border: solid 1px $dark-color01;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  overflow: auto;
-
-  :global {
-    .form-group-header {
-      display: none;
-    }
-  }
-}
-
 .port {
   display: flex;
 
   & > span {
     width: 200px;
   }
 }
-
-.modify {
-  position: absolute;
-  @include vertical-center;
-  right: 8px;
-}
-
-.confirm {
-  bottom: -23px;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}