From c6b977a976372377ebfc941f9f9a8fe0dd253af4 Mon Sep 17 00:00:00 2001
From: v_hwweng <v_hwweng@tencent.com>
Date: Fri, 27 Dec 2024 18:29:17 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=AF=BC=E5=87=BA/=E5=AF=BC?=
 =?UTF-8?q?=E5=87=BA=E6=B5=81=E6=B0=B4=E7=BA=BF=E5=8A=9F=E8=83=BD=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=20#11304=20#=20Reviewed,=20transaction=20id:=2028072?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ExportDialog.vue           |   6 +-
 .../ImportPipelinePopup/index.vue             | 108 ++++++++++--------
 .../src/store/modules/atom/actions.js         |  11 +-
 3 files changed, 72 insertions(+), 53 deletions(-)

diff --git a/src/frontend/devops-pipeline/src/components/ExportDialog.vue b/src/frontend/devops-pipeline/src/components/ExportDialog.vue
index 49872de6b7d..f4f333a5c18 100644
--- a/src/frontend/devops-pipeline/src/components/ExportDialog.vue
+++ b/src/frontend/devops-pipeline/src/components/ExportDialog.vue
@@ -41,6 +41,7 @@
     import { PROCESS_API_URL_PREFIX } from '@/store/constants'
     import Logo from '@/components/Logo'
     import { mapActions, mapState } from 'vuex'
+    import { CODE_MODE, UI_MODE } from '@/utils/pipelineConst'
 
     export default {
         components: {
@@ -78,7 +79,7 @@
             exportList () {
                 return [
                     {
-                        type: 'pipelineJson',
+                        type: UI_MODE,
                         title: 'Pipeline Json',
                         icon: 'export-pipeline',
                         name: `${this.pipelineName}.json`,
@@ -86,13 +87,12 @@
                         exportUrl: `${API_URL_PREFIX}/${PROCESS_API_URL_PREFIX}/user/pipelines/${this.pipelineId}/projects/${this.projectId}/export`
                     },
                     {
-                        type: 'pipelineYaml',
+                        type: CODE_MODE,
                         title: 'Pipeline YAML',
                         icon: 'export-pipeline',
                         name: `${this.pipelineName}.yml`,
                         tips: this.$t('newlist.exportPipelineYamlTip'),
                         exportUrl: `${API_URL_PREFIX}/${PROCESS_API_URL_PREFIX}/user/transfer/projects/${this.projectId}?pipelineId=${this.pipelineId}&actionType=FULL_MODEL2YAML`,
-                        tipsLink: `${IWIKI_DOCS_URL}/p/4009967153`,
                         params: {
                             modelAndSetting: {
                                 model: this.pipeline,
diff --git a/src/frontend/devops-pipeline/src/components/pipelineList/ImportPipelinePopup/index.vue b/src/frontend/devops-pipeline/src/components/pipelineList/ImportPipelinePopup/index.vue
index 4b0e07c0c1e..c284d6703ba 100644
--- a/src/frontend/devops-pipeline/src/components/pipelineList/ImportPipelinePopup/index.vue
+++ b/src/frontend/devops-pipeline/src/components/pipelineList/ImportPipelinePopup/index.vue
@@ -23,7 +23,8 @@
 <script>
     import { hashID } from '@/utils/util'
     import { mapActions, mapState } from 'vuex'
-    import YAML from 'js-yaml'
+    import { CODE_MODE, UI_MODE } from '@/utils/pipelineConst'
+
     export default {
         name: 'import-pipeline-popup',
         props: {
@@ -63,16 +64,18 @@
                 'setPipelineSetting',
                 'setPipelineWithoutTrigger'
             ]),
+            ...mapActions({
+                updatePipelineMode: 'updatePipelineMode'
+            }),
 
             handleSelect ({ fileObj, onProgress, onSuccess, onDone }) {
                 const reader = new FileReader()
                 reader.readAsText(fileObj.origin)
-                
-                if (fileObj.type === 'application/json' || fileObj.name.endsWith('.json')) {
-                    reader.addEventListener('loadend', e => {
-                        try {
+                reader.addEventListener('loadend', async e => {
+                    try {
+                        if (fileObj.type === 'application/json' || fileObj.name.endsWith('.json')) {
                             const jsonResult = JSON.parse(reader.result)
-                            const isValid = this.checkJosnValid(jsonResult)
+                            const isValid = this.checkJsonValid(jsonResult)
                             const code = isValid ? 0 : 1
                             const message = isValid ? null : this.$t('invalidPipelineJsonOrYaml')
 
@@ -83,60 +86,75 @@
                             }, fileObj)
 
                             if (isValid) {
-                                this.handleSuccess(jsonResult)
+                                this.handleSuccess(jsonResult, UI_MODE)
                             }
-                        } catch (e) {
-                            console.log(e)
-                            onSuccess({
-                                code: 1,
-                                message: this.$t('invalidPipelineJsonOrYaml'),
-                                result: ''
-                            }, fileObj)
-                        } finally {
-                            onDone(fileObj)
-                        }
-                    })
-                } else if (fileObj.type === 'application/x-yaml' || fileObj.name.endsWith('.yaml') || fileObj.name.endsWith('.yml')) {
-                    reader.addEventListener('loadend', e => {
-                        try {
-                            const jsonResult = YAML.load(e.target.result)
-                            const isValid = !!jsonResult.stages?.length
+                        } else if (fileObj.type === 'application/x-yaml' || fileObj.name.endsWith('.yaml') || fileObj.name.endsWith('.yml')) {
+                            const yaml = e.target.result
+                            const isValid = !!yaml
                             const code = isValid ? 0 : 1
                             const message = isValid ? null : this.$t('invalidPipelineJsonOrYaml')
 
                             onSuccess({
                                 code,
                                 message,
-                                result: jsonResult
+                                result: yaml
                             }, fileObj)
 
                             if (isValid) {
-                                this.handleSuccess(jsonResult)
+                                this.handleSuccess(yaml, CODE_MODE)
                             }
-                        } catch (e) {
-                            console.log(e)
-                            onSuccess({
-                                code: 1,
-                                message: this.$t('invalidPipelineJsonOrYaml'),
-                                result: ''
-                            }, fileObj)
-                        } finally {
-                            onDone(fileObj)
                         }
-                    })
-                }
+                    } catch (e) {
+                        console.log(e)
+                        onSuccess({
+                            code: 1,
+                            message: this.$t('invalidPipelineJsonOrYaml'),
+                            result: ''
+                        }, fileObj)
+                    } finally {
+                        onDone(fileObj)
+                    }
+                })
                 reader.addEventListener('progress', onProgress)
             },
 
-            async handleSuccess (result) {
-                const newPipelineName = this.pipelineName || `${result.name || result.model.name}_${hashID().slice(0, 8)}`
-                const res = await this.updatePipeline(result, newPipelineName)
-                this.setEditFrom(true)
-                if (res) {
-                    if (typeof this.handleImportSuccess === 'function') {
-                        this.handleImportSuccess()
-                        return
+            async handleSuccess (result, type = UI_MODE) {
+                if (type === UI_MODE) {
+                    const newPipelineName = this.pipelineName || `${result.model.name}_${hashID().slice(0, 8)}`
+                    const res = await this.updatePipeline(result, newPipelineName)
+                    this.setEditFrom(true)
+                    if (res) {
+                        if (typeof this.handleImportSuccess === 'function') {
+                            this.handleImportSuccess()
+                            return
+                        }
+    
+                        this.$nextTick(() => {
+                            this.$router.push({
+                                name: 'pipelineImportEdit',
+                                params: {
+                                    tab: 'pipeline'
+                                }
+                            })
+                        })
+                    }
+                } else if (type === CODE_MODE) {
+                    this.updatePipelineMode(CODE_MODE)
+                    this.setEditFrom(true)
+                    this.$store.dispatch('atom/setPipelineYaml', result)
+                    try {
+                        await this.transferPipeline({
+                            projectId: this.$route.params.projectId,
+                            actionType: 'FULL_YAML2MODEL',
+                            oldYaml: result
+                        })
+                    } catch (error) {
+                        this.$showTips({
+                            message: error.message,
+                            theme: 'error'
+                        })
                     }
+                    this.setPipelineEditing(true)
 
                     this.$nextTick(() => {
                         this.$router.push({
@@ -196,7 +214,7 @@
                 this.setPipelineEditing(true)
                 return true
             },
-            checkJosnValid (json) {
+            checkJsonValid (json) {
                 try {
                     return (json.model.stages && json.setting.pipelineName) || json.stages
                 } catch (e) {
diff --git a/src/frontend/devops-pipeline/src/store/modules/atom/actions.js b/src/frontend/devops-pipeline/src/store/modules/atom/actions.js
index a14d7e57684..1909c03840a 100755
--- a/src/frontend/devops-pipeline/src/store/modules/atom/actions.js
+++ b/src/frontend/devops-pipeline/src/store/modules/atom/actions.js
@@ -24,7 +24,7 @@ import {
     STORE_API_URL_PREFIX,
     UPDATE_PIPELINE_MODE
 } from '@/store/constants'
-import { UI_MODE } from '@/utils/pipelineConst'
+import { UI_MODE, CODE_MODE } from '@/utils/pipelineConst'
 import request from '@/utils/request'
 import { hashID, randomString } from '@/utils/util'
 import { areDeeplyEqual } from '../../../utils/util'
@@ -264,7 +264,7 @@ export default {
             }
         }
     },
-    async transfer ({ getters }, { projectId, pipelineId, actionType, ...params }) {
+    async transfer ({ getters, state }, { projectId, pipelineId, actionType, ...params }) {
         const apis = [
             request.post(`${PROCESS_API_URL_PREFIX}/user/transfer/projects/${projectId}`, params, {
                 params: {
@@ -273,7 +273,7 @@ export default {
                 }
             })
         ]
-        if (actionType === 'FULL_YAML2MODEL') {
+        if (actionType === 'FULL_YAML2MODEL' && !state.editfromImport) {
             apis.push(
                 request.get(`/${PROCESS_API_URL_PREFIX}/user/pipeline/projects/${projectId}/pipelines/${pipelineId}/atom/prop/list`, {
                     params: params.version ? { version: params.version } : {}
@@ -874,7 +874,8 @@ export default {
             a.click()
             document.body.removeChild(a)
         }
-        if (type === 'pipelineYaml') {
+
+        if (type === CODE_MODE) {
             return fetch(url, {
                 credentials: 'include',
                 method: 'post',
@@ -893,7 +894,7 @@ export default {
                 const blob = new Blob([result])
                 fn(blob)
             })
-        } else {
+        } else if (type === UI_MODE) {
             return fetch(url, { credentials: 'include' }).then((res) => {
                 if (res.status >= 200 && res.status < 300) {
                     return res.blob()