diff --git a/pkg/epinio/components/application/AppSource.vue b/pkg/epinio/components/application/AppSource.vue index 5c32d02e52..16e3dfcaef 100644 --- a/pkg/epinio/components/application/AppSource.vue +++ b/pkg/epinio/components/application/AppSource.vue @@ -78,6 +78,19 @@ export default Vue.extend({ const defaultBuilderImage = this.info?.default_builder_image || DEFAULT_BUILD_PACK; const builderImage = this.source?.builderImage?.value || defaultBuilderImage; + const git = { + usernameOrOrg: this.source?.git?.usernameOrOrg || '', + repo: this.source?.git?.repo || '', + commit: this.source?.git?.commit || '', + branch: this.source?.git?.branch || '', + url: this.source?.git?.url || '', + sourceData: this.source?.git?.sourceData || { + repos: [], + branches: [], + commits: [] + } + }; + return { open: false, valid: this.validate(), @@ -96,20 +109,18 @@ export default Vue.extend({ validGitUrl: false, }, - git: { - usernameOrOrg: this.source?.git?.usernameOrOrg || '', - repo: this.source?.git?.repo || '', - commit: this.source?.git?.commit || '', - branch: this.source?.git?.branch || '', - url: this.source?.git?.url || '', - sourceData: this.source?.git?.sourceData || { - repos: [], - branches: [], - commits: [] - } - }, + git, - initValue: { type: this.application?.cachedEppEnvVar?.source.type }, + initValue: { + type: this.source?.type, + selectedAccOrOrg: git.usernameOrOrg, + selectedRepo: git.repo, + selectedBranch: git.branch, + selectedCommit: { sha: git.commit }, + repos: git.sourceData.repos, + branches: git.sourceData.branches, + commits: git.sourceData.commits, + }, builderImage: { value: builderImage, diff --git a/shell/components/form/GitPicker.vue b/shell/components/form/GitPicker.vue index 203326c067..aae768506e 100644 --- a/shell/components/form/GitPicker.vue +++ b/shell/components/form/GitPicker.vue @@ -73,57 +73,17 @@ export default Vue.extend({ this.onSearchBranch = this.searchForResult(this.searchBranch); }, - mounted() { - if (!this.value) { - return; - } - - if (this.initValue.type && this.initValue.type !== this.value.type) { - return; - } - - if (this.value.sourceData) { - // API calls data - from cache - this.loadSourceCache(); - } else { - // API calls data - from remote - this.selectedAccOrOrg = this.value.usernameOrOrg; - if (this.selectedAccOrOrg) { - this.fetchRepos() - .then(() => { - if (this.repos.length && !this.hasError.repo) { - const { name, id } = this.repos.find((r: any) => r.name === this.value.repo?.name) || {}; - - this.selectedRepo = { name, id }; - - return this.fetchBranches(); - } - }) - .then(() => { - if (this.branches.length && !this.hasError.branch) { - this.selectedBranch = this.value.branch; - - return this.fetchCommits(); - } - }) - .then(() => { - if (this.commits.length && this.commits.find((c: commit) => c.sha === this.value.commit || c.id === this.value.commit)) { - this.selectedCommit = { sha: this.value.commit }; - this.final(this.value.commit); - } - }); - } - } - }, - watch: { - 'value.type'(neu, old) { - if (neu !== old) { - this.reset(); - if (old && neu && neu === this.initValue.type) { - this.loadSourceCache(); + 'value.type': { + async handler(neu, old) { + if (neu !== old) { + this.reset(); + if (neu === this.initValue.type) { + await this.loadSourceCache(); + } } - } + }, + immediate: true, } }, @@ -205,20 +165,39 @@ export default Vue.extend({ }); }, - loadSourceCache() { - this.selectedAccOrOrg = this.value.usernameOrOrg; - this.selectedRepo = this.value.repo; - this.selectedBranch = this.value.branch; - this.selectedCommit = { sha: this.value.commit }; + async loadSourceCache() { + this.selectedAccOrOrg = this.initValue.selectedAccOrOrg; + if (this.selectedAccOrOrg) { + await this.fetchRepos() + .then(() => { + if (this.repos.length && !this.hasError.repo) { + this.selectedRepo = this.initValue.selectedRepo; - this.repos = this.value.sourceData.repos; - this.branches = this.value.sourceData.branches; - this.commits = this.value.sourceData.commits; + return this.fetchBranches(); + } + }) + .then(() => { + if (this.branches.length && !this.hasError.branch) { + this.selectedBranch = this.initValue.selectedBranch; + + return this.fetchCommits(); + } + }); + + const commit = this.commits.find((c: commit) => c.sha === this.initValue.selectedCommit.sha || c.id === this.initValue.selectedCommit.id); + + if (commit) { + this.final(commit.sha); + } + } }, async fetchRepos() { if (this.selectedAccOrOrg.length) { this.selectedRepo = null; + this.selectedCommit = {}; + + this.communicateReset(); try { const res = await this.$store.dispatch(`${ this.type }/fetchRecentRepos`, { username: this.selectedAccOrOrg });