fix: Fix project create modal clusters select

kubesphere · Jul 1, 2020 · e9415a8 · e9415a8
1 parent 22f1e54
commit e9415a8
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 30 deletions.
diff --git a/src/actions/project.js b/src/actions/project.js
@@ -32,6 +32,13 @@ import FederatedStore from 'stores/federated'
 export default {
   'project.create': {
     on({ store, success, cluster, workspace, ...props }) {
+      const multiCluster =
+        globals.app.isMultiCluster &&
+        globals.app.hasPermission({
+          workspace,
+          module: 'federatedprojects',
+          action: 'view',
+        })
       const modal = Modal.open({
         onOk: async data => {
           set(data, 'metadata.labels["kubesphere.io/workspace"]', workspace)
@@ -59,6 +66,7 @@ export default {
           success && success()
         },
         hideCluster: !globals.app.isMultiCluster || !!cluster,
+        multiCluster,
         cluster,
         workspace,
         formTemplate: FORM_TEMPLATES.project(),

diff --git a/src/components/Modals/ProjectCreate/index.jsx b/src/components/Modals/ProjectCreate/index.jsx
@@ -18,7 +18,7 @@
 
 import React from 'react'
 import { observer } from 'mobx-react'
-import { get, isEmpty } from 'lodash'
+import { get, isEmpty, set, uniqBy } from 'lodash'
 import PropTypes from 'prop-types'
 import { Columns, Column, Select, Input, TextArea } from '@pitrix/lego-ui'
 import { Modal, Form } from 'components/Base'
@@ -138,6 +138,68 @@ export default class ProjectCreateModal extends React.Component {
     <ClusterTitle cluster={item} size="small" theme="light" noStatus />
   )
 
+  handleClusterChange = clusters => {
+    set(
+      this.props.formTemplate,
+      'spec.placement.clusters',
+      uniqBy(clusters, 'name')
+    )
+  }
+
+  renderClusters() {
+    const { multiCluster } = this.props
+
+    if (!multiCluster) {
+      return (
+        <Form.Group
+          label={t('Cluster Settings')}
+          desc={t('Select the cluster to create the project.')}
+        >
+          <Form.Item
+            rules={[{ required: true, message: t('Please select a cluster') }]}
+          >
+            <Select
+              name="spec.placement.clusters[0].name"
+              className={styles.cluster}
+              options={this.clusters}
+              valueRenderer={this.valueRenderer}
+              optionRenderer={this.optionRenderer}
+            />
+          </Form.Item>
+        </Form.Group>
+      )
+    }
+
+    return (
+      <Form.Group
+        label={t('Cluster Settings')}
+        desc={t('PROJECT_CLUSTER_SETTINGS_DESC')}
+      >
+        <Form.Item
+          rules={[{ required: true, message: t('Please select a cluster') }]}
+        >
+          <ArrayInput
+            name="spec.placement.clusters"
+            addText={t('Add Cluster')}
+            itemType="object"
+            defaultValue={this.defaultClusters}
+            onChange={this.handleClusterChange}
+          >
+            <ObjectInput>
+              <Select
+                name="name"
+                className={styles.cluster}
+                options={this.clusters}
+                valueRenderer={this.valueRenderer}
+                optionRenderer={this.optionRenderer}
+              />
+            </ObjectInput>
+          </ArrayInput>
+        </Form.Item>
+      </Form.Group>
+    )
+  }
+
   render() {
     const {
       visible,
@@ -216,35 +278,7 @@ export default class ProjectCreateModal extends React.Component {
               </Form.Item>
             </Column>
           </Columns>
-          {!hideCluster && (
-            <Form.Group
-              label={t('Cluster Settings')}
-              desc={t('PROJECT_CLUSTER_SETTINGS_DESC')}
-            >
-              <Form.Item
-                rules={[
-                  { required: true, message: t('Please select a cluster') },
-                ]}
-              >
-                <ArrayInput
-                  name="spec.placement.clusters"
-                  addText={t('Add Cluster')}
-                  itemType="object"
-                  defaultValue={this.defaultClusters}
-                >
-                  <ObjectInput>
-                    <Select
-                      name="name"
-                      className={styles.cluster}
-                      options={this.clusters}
-                      valueRenderer={this.valueRenderer}
-                      optionRenderer={this.optionRenderer}
-                    />
-                  </ObjectInput>
-                </ArrayInput>
-              </Form.Item>
-            </Form.Group>
-          )}
+          {!hideCluster && this.renderClusters()}
         </div>
       </Modal.Form>
     )

diff --git a/src/locales/zh/project.js b/src/locales/zh/project.js
@@ -124,6 +124,8 @@ export default {
   "The project's file log collection is about to close.":
     '项目的落盘日志收集即将关闭.',
 
+  'Select the cluster to create the project.': '选择要创建项目的集群.',
+
   'Project Member': '项目成员',
 
   CLOSE_FILE_LOG_TIP: