fix: Add cluster param in pipeline step templates (#1182)

* fix: add cluster param in pipeline step templates

Signed-off-by: 胡亚洲 <git@yazhou.io>

* Revert "feat: Support load pipeline steps by api (#3592) (#1071)"

This reverts commit 358d078.

* feat: move old file

Signed-off-by: 胡亚洲 <git@yazhou.io>

* feat: use  StepsEditor old version when kse version < 3.4

Signed-off-by: 胡亚洲 <git@yazhou.io>

---------

Signed-off-by: 胡亚洲 <git@yazhou.io>

src/pages/devops/components/Pipeline/Sider/index.jsx

@@ -24,7 +24,7 @@ import React from 'react'
 import { compareVersion } from 'utils'
 
 import YamlEditor from '../StepModals/kubernetesYaml'
-import StepsEditor from '../StepsEditor'
+import { getStepsEditor } from '../StepsEditor'
 import styles from './index.scss'
 
 const AgentType = [
@@ -216,11 +216,15 @@ export default class Sider extends React.Component {
     }
   }
 
+  get StepsEditor() {
+    return getStepsEditor(this.ksVersion)
+  }
+
   render() {
     const { activeStage, jsonData } = this.props.store
     const { pipeline = {} } = jsonData.json
     const { isSubmitting } = this.props
-
+    const StepsEditor = this.StepsEditor
     return (
       <div className={styles.sider}>
         <div className={styles.sheet}>

src/pages/devops/components/Pipeline/StepModalsOld/archiveArtifacts.jsx

@@ -0,0 +1,89 @@
+/*
+ * This file is part of KubeSphere Console.
+ * Copyright (C) 2019 The KubeSphere Console Authors.
+ *
+ * KubeSphere Console is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * KubeSphere Console is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with KubeSphere Console.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import { observer } from 'mobx-react'
+import { Modal } from 'components/Base'
+import { Form, Input } from '@kube-design/components'
+
+import styles from './index.scss'
+
+@observer
+export default class ArchiveArtifacts extends React.Component {
+  static propTypes = {
+    name: PropTypes.string,
+  }
+
+  static defaultProps = {
+    visible: false,
+    onOk() {},
+    onCancel() {},
+  }
+
+  constructor(props) {
+    super(props)
+    this.formRef = React.createRef()
+    this.state = { formData: {} }
+  }
+
+  static getDerivedStateFromProps(props) {
+    if (props.edittingData.type === 'archiveArtifacts') {
+      const formData = props.edittingData.data.reduce((prev, arg) => {
+        prev[arg.key] = arg.value.value
+        return prev
+      }, {})
+      return { formData }
+    }
+    return null
+  }
+
+  handleOk = () => {
+    const formData = this.formRef.current.getData()
+    const _arguments = Object.keys(formData).map(key => ({
+      key,
+      value: { isLiteral: true, value: formData[key] },
+    }))
+    this.props.onAddStep({
+      name: 'archiveArtifacts',
+      arguments: _arguments,
+    })
+  }
+
+  render() {
+    const { visible, onCancel } = this.props
+
+    return (
+      <Modal
+        width={680}
+        bodyClassName={styles.body}
+        onCancel={onCancel}
+        onOk={this.handleOk}
+        visible={visible}
+        closable={false}
+        title={t('archiveArtifacts')}
+      >
+        <Form data={this.state.formData} ref={this.formRef}>
+          <Form.Item label={t('ARTIFACT_PL')}>
+            <Input name="artifacts" />
+          </Form.Item>
+        </Form>
+      </Modal>
+    )
+  }
+}

src/pages/devops/components/Pipeline/StepModalsOld/branch.jsx

@@ -0,0 +1,90 @@
+/*
+ * This file is part of KubeSphere Console.
+ * Copyright (C) 2019 The KubeSphere Console Authors.
+ *
+ * KubeSphere Console is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * KubeSphere Console is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with KubeSphere Console.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { observer } from 'mobx-react'
+import { Modal } from 'components/Base'
+import { Form, Input } from '@kube-design/components'
+
+import styles from './index.scss'
+
+@observer
+export default class Branch extends React.Component {
+  static propTypes = {
+    name: PropTypes.string,
+  }
+
+  static defaultProps = {
+    visible: false,
+    onOk() {},
+    onCancel() {},
+  }
+
+  constructor(props) {
+    super(props)
+    this.formRef = React.createRef()
+    this.state = { formData: {} }
+  }
+
+  static getDerivedStateFromProps(props) {
+    if (props.edittingData.type === 'branch') {
+      const formData = props.edittingData.data.reduce((prev, arg) => {
+        prev[arg.key] = arg.value.value
+        return prev
+      }, {})
+      return { formData }
+    }
+    return null
+  }
+
+  handleOk = () => {
+    const formData = this.formRef.current.getData()
+    const _arguments = Object.keys(formData).map(key => ({
+      isLiteral: true,
+      value: formData[key],
+    }))
+    this.props.onAddStep({
+      name: 'branch',
+      arguments: _arguments[0],
+    })
+  }
+
+  render() {
+    const { visible, onCancel } = this.props
+
+    return (
+      <Modal
+        width={680}
+        bodyClassName={styles.body}
+        onCancel={onCancel}
+        onOk={this.handleOk}
+        visible={visible}
+        closable={false}
+        title={t('BRANCH_SI')}
+      >
+        <Form data={this.state.formData} ref={this.formRef}>
+          <Form.Item label={t('BRANCH_SI')}>
+            <Input name="branch" />
+          </Form.Item>
+        </Form>
+      </Modal>
+    )
+  }
+}