diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-08-19 09:08:42 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-08-19 09:08:42 +0000 |
commit | b76ae638462ab0f673e5915986070518dd3f9ad3 (patch) | |
tree | bdab0533383b52873be0ec0eb4d3c66598ff8b91 /app/assets/javascripts/projects | |
parent | 434373eabe7b4be9593d18a585fb763f1e5f1a6f (diff) | |
download | gitlab-ce-b76ae638462ab0f673e5915986070518dd3f9ad3.tar.gz |
Add latest changes from gitlab-org/gitlab@14-2-stable-eev14.2.0-rc42
Diffstat (limited to 'app/assets/javascripts/projects')
9 files changed, 179 insertions, 188 deletions
diff --git a/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue new file mode 100644 index 00000000000..a4a1cb5584d --- /dev/null +++ b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue @@ -0,0 +1,94 @@ +<script> +import { GlLoadingIcon } from '@gitlab/ui'; +import createFlash from '~/flash'; +import { __ } from '~/locale'; +import PipelineMiniGraph from '~/pipelines/components/pipelines_list/pipeline_mini_graph.vue'; +import getLinkedPipelinesQuery from '../graphql/queries/get_linked_pipelines.query.graphql'; + +export default { + i18n: { + linkedPipelinesFetchError: __('There was a problem fetching linked pipelines.'), + }, + components: { + GlLoadingIcon, + PipelineMiniGraph, + LinkedPipelinesMiniList: () => + import('ee_component/vue_shared/components/linked_pipelines_mini_list.vue'), + }, + inject: { + fullPath: { + default: '', + }, + iid: { + default: '', + }, + }, + props: { + stages: { + type: Array, + required: true, + }, + }, + apollo: { + pipeline: { + query: getLinkedPipelinesQuery, + variables() { + return { + fullPath: this.fullPath, + iid: this.iid, + }; + }, + skip() { + return !this.fullPath || !this.iid; + }, + update({ project }) { + return project?.pipeline; + }, + error() { + createFlash({ message: this.$options.i18n.linkedPipelinesFetchError }); + }, + }, + }, + data() { + return { + pipeline: null, + }; + }, + computed: { + hasDownstream() { + return this.pipeline?.downstream?.nodes.length > 0; + }, + downstreamPipelines() { + return this.pipeline?.downstream?.nodes; + }, + upstreamPipeline() { + return this.pipeline?.upstream; + }, + }, +}; +</script> + +<template> + <div> + <gl-loading-icon v-if="$apollo.queries.pipeline.loading" /> + <div v-else> + <linked-pipelines-mini-list + v-if="upstreamPipeline" + :triggered-by="[upstreamPipeline]" + data-testid="commit-box-mini-graph-upstream" + /> + + <pipeline-mini-graph + :stages="stages" + class="gl-display-inline" + data-testid="commit-box-mini-graph" + /> + + <linked-pipelines-mini-list + v-if="hasDownstream" + :triggered="downstreamPipelines" + data-testid="commit-box-mini-graph-downstream" + /> + </div> + </div> +</template> diff --git a/app/assets/javascripts/projects/commit_box/info/graphql/queries/get_linked_pipelines.query.graphql b/app/assets/javascripts/projects/commit_box/info/graphql/queries/get_linked_pipelines.query.graphql new file mode 100644 index 00000000000..f7e930bb3f2 --- /dev/null +++ b/app/assets/javascripts/projects/commit_box/info/graphql/queries/get_linked_pipelines.query.graphql @@ -0,0 +1,32 @@ +query getLinkedPipelines($fullPath: ID!, $iid: ID!) { + project(fullPath: $fullPath) { + pipeline(iid: $iid) { + downstream { + nodes { + id + path + project { + name + } + detailedStatus { + group + icon + label + } + } + } + upstream { + id + path + project { + name + } + detailedStatus { + group + icon + label + } + } + } + } +} diff --git a/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_mini_graph.js b/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_mini_graph.js index 9173f5c771f..1d4ec4c110b 100644 --- a/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_mini_graph.js +++ b/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_mini_graph.js @@ -1,24 +1,41 @@ import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import createDefaultClient from '~/lib/graphql'; + +Vue.use(VueApollo); + +const apolloProvider = new VueApollo({ + defaultClient: createDefaultClient(), +}); export const initCommitPipelineMiniGraph = async (selector = '.js-commit-pipeline-mini-graph') => { const el = document.querySelector(selector); + if (!el) { return; } + const { stages, fullPath, iid } = el.dataset; + // Some commits have no pipeline, code splitting to load the pipeline optionally - const { stages } = el.dataset; - const { default: PipelineMiniGraph } = await import( - /* webpackChunkName: 'pipelineMiniGraph' */ '~/pipelines/components/pipelines_list/pipeline_mini_graph.vue' + const { default: CommitBoxPipelineMiniGraph } = await import( + /* webpackChunkName: 'commitBoxPipelineMiniGraph' */ './components/commit_box_pipeline_mini_graph.vue' ); // eslint-disable-next-line no-new new Vue({ el, + apolloProvider, + provide: { + fullPath, + iid, + dataMethod: 'graphql', + }, render(createElement) { - return createElement(PipelineMiniGraph, { + return createElement(CommitBoxPipelineMiniGraph, { props: { - stages: JSON.parse(stages), + // if stages do not exist for some reason, protect JSON.parse from erroring out + stages: stages ? JSON.parse(stages) : [], }, }); }, diff --git a/app/assets/javascripts/projects/compare/components/app.vue b/app/assets/javascripts/projects/compare/components/app.vue index f7cfc82db11..f2c1c843878 100644 --- a/app/assets/javascripts/projects/compare/components/app.vue +++ b/app/assets/javascripts/projects/compare/components/app.vue @@ -122,7 +122,7 @@ export default { /> </div> <div class="gl-mt-4"> - <gl-button category="primary" variant="success" @click="onSubmit"> + <gl-button category="primary" variant="confirm" @click="onSubmit"> {{ s__('CompareRevisions|Compare') }} </gl-button> <gl-button data-testid="swapRevisionsButton" class="btn btn-default" @click="onSwapRevision"> diff --git a/app/assets/javascripts/projects/compare/components/app_legacy.vue b/app/assets/javascripts/projects/compare/components/app_legacy.vue deleted file mode 100644 index d3f09f7d69f..00000000000 --- a/app/assets/javascripts/projects/compare/components/app_legacy.vue +++ /dev/null @@ -1,112 +0,0 @@ -<script> -import { GlButton } from '@gitlab/ui'; -import csrf from '~/lib/utils/csrf'; -import RevisionDropdown from './revision_dropdown_legacy.vue'; - -export default { - csrf, - components: { - RevisionDropdown, - GlButton, - }, - props: { - projectCompareIndexPath: { - type: String, - required: true, - }, - refsProjectPath: { - type: String, - required: true, - }, - paramsFrom: { - type: String, - required: false, - default: null, - }, - paramsTo: { - type: String, - required: false, - default: null, - }, - projectMergeRequestPath: { - type: String, - required: true, - }, - createMrPath: { - type: String, - required: true, - }, - }, - data() { - return { - from: this.paramsFrom, - to: this.paramsTo, - }; - }, - methods: { - onSubmit() { - this.$refs.form.submit(); - }, - onSwapRevision() { - [this.from, this.to] = [this.to, this.from]; // swaps 'from' and 'to' - }, - onSelectRevision({ direction, revision }) { - this[direction] = revision; // direction is either 'from' or 'to' - }, - }, -}; -</script> - -<template> - <form - ref="form" - class="form-inline js-requires-input js-signature-container" - method="POST" - :action="projectCompareIndexPath" - > - <input :value="$options.csrf.token" type="hidden" name="authenticity_token" /> - <revision-dropdown - :refs-project-path="refsProjectPath" - revision-text="Source" - params-name="to" - :params-branch="to" - data-testid="sourceRevisionDropdown" - @selectRevision="onSelectRevision" - /> - <div class="compare-ellipsis gl-display-inline" data-testid="ellipsis">...</div> - <revision-dropdown - :refs-project-path="refsProjectPath" - revision-text="Target" - params-name="from" - :params-branch="from" - data-testid="targetRevisionDropdown" - @selectRevision="onSelectRevision" - /> - <gl-button category="primary" variant="success" class="gl-ml-3" @click="onSubmit"> - {{ s__('CompareRevisions|Compare') }} - </gl-button> - <gl-button - data-testid="swapRevisionsButton" - class="btn btn-default gl-button gl-ml-3" - @click="onSwapRevision" - > - {{ s__('CompareRevisions|Swap revisions') }} - </gl-button> - <gl-button - v-if="projectMergeRequestPath" - :href="projectMergeRequestPath" - data-testid="projectMrButton" - class="btn btn-default gl-button gl-ml-3" - > - {{ s__('CompareRevisions|View open merge request') }} - </gl-button> - <gl-button - v-else-if="createMrPath" - :href="createMrPath" - data-testid="createMrButton" - class="btn btn-default gl-button gl-ml-3" - > - {{ s__('CompareRevisions|Create merge request') }} - </gl-button> - </form> -</template> diff --git a/app/assets/javascripts/projects/compare/index.js b/app/assets/javascripts/projects/compare/index.js index 322dff773b8..e485a086d39 100644 --- a/app/assets/javascripts/projects/compare/index.js +++ b/app/assets/javascripts/projects/compare/index.js @@ -1,44 +1,9 @@ import Vue from 'vue'; import CompareApp from './components/app.vue'; -import CompareAppLegacy from './components/app_legacy.vue'; export default function init() { const el = document.getElementById('js-compare-selector'); - if (gon.features?.compareRepoDropdown) { - const { - refsProjectPath, - paramsFrom, - paramsTo, - projectCompareIndexPath, - projectMergeRequestPath, - createMrPath, - projectTo, - projectsFrom, - } = el.dataset; - - return new Vue({ - el, - components: { - CompareApp, - }, - render(createElement) { - return createElement(CompareApp, { - props: { - refsProjectPath, - paramsFrom, - paramsTo, - projectCompareIndexPath, - projectMergeRequestPath, - createMrPath, - defaultProject: JSON.parse(projectTo), - projects: JSON.parse(projectsFrom), - }, - }); - }, - }); - } - const { refsProjectPath, paramsFrom, @@ -46,15 +11,17 @@ export default function init() { projectCompareIndexPath, projectMergeRequestPath, createMrPath, + projectTo, + projectsFrom, } = el.dataset; return new Vue({ el, components: { - CompareAppLegacy, + CompareApp, }, render(createElement) { - return createElement(CompareAppLegacy, { + return createElement(CompareApp, { props: { refsProjectPath, paramsFrom, @@ -62,6 +29,8 @@ export default function init() { projectCompareIndexPath, projectMergeRequestPath, createMrPath, + defaultProject: JSON.parse(projectTo), + projects: JSON.parse(projectsFrom), }, }); }, diff --git a/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue b/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue index 0b0560f63c1..d3cadcd2bd5 100644 --- a/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue +++ b/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue @@ -239,7 +239,7 @@ export default { }; }, }, - successColor: '#608b2f', + successColor: '#366800', chartContainerHeight: CHART_CONTAINER_HEIGHT, timesChartOptions: { height: INNER_CHART_HEIGHT, diff --git a/app/assets/javascripts/projects/terraform_notification/components/terraform_notification.vue b/app/assets/javascripts/projects/terraform_notification/components/terraform_notification.vue index 0b398eddc9c..02e31d6fbb3 100644 --- a/app/assets/javascripts/projects/terraform_notification/components/terraform_notification.vue +++ b/app/assets/javascripts/projects/terraform_notification/components/terraform_notification.vue @@ -1,7 +1,7 @@ <script> import { GlBanner } from '@gitlab/ui'; import { helpPagePath } from '~/helpers/help_page_helper'; -import { parseBoolean, setCookie, getCookie } from '~/lib/utils/common_utils'; +import { setCookie } from '~/lib/utils/common_utils'; import { s__ } from '~/locale'; export default { @@ -16,50 +16,36 @@ export default { components: { GlBanner, }, - props: { - projectId: { - type: Number, - required: true, - }, - }, + inject: ['terraformImagePath', 'bannerDismissedKey'], data() { return { isVisible: true, }; }, computed: { - bannerDissmisedKey() { - return `terraform_notification_dismissed_for_project_${this.projectId}`; - }, docsUrl() { return helpPagePath('user/infrastructure/terraform_state'); }, }, - created() { - if (parseBoolean(getCookie(this.bannerDissmisedKey))) { - this.isVisible = false; - } - }, methods: { handleClose() { - setCookie(this.bannerDissmisedKey, true); + setCookie(this.bannerDismissedKey, true); this.isVisible = false; }, }, }; </script> <template> - <div v-if="isVisible"> - <div class="gl-py-5"> - <gl-banner - :title="$options.i18n.title" - :button-text="$options.i18n.buttonText" - :button-link="docsUrl" - variant="introduction" - @close="handleClose" - > - <p>{{ $options.i18n.description }}</p> - </gl-banner> - </div> + <div v-if="isVisible" class="gl-py-5"> + <gl-banner + :title="$options.i18n.title" + :button-text="$options.i18n.buttonText" + :button-link="docsUrl" + :svg-path="terraformImagePath" + variant="promotion" + @close="handleClose" + > + <p>{{ $options.i18n.description }}</p> + </gl-banner> </div> </template> diff --git a/app/assets/javascripts/projects/terraform_notification/index.js b/app/assets/javascripts/projects/terraform_notification/index.js index eb04f109a8e..0a273247930 100644 --- a/app/assets/javascripts/projects/terraform_notification/index.js +++ b/app/assets/javascripts/projects/terraform_notification/index.js @@ -1,18 +1,23 @@ import Vue from 'vue'; +import { parseBoolean, getCookie } from '~/lib/utils/common_utils'; import TerraformNotification from './components/terraform_notification.vue'; export default () => { const el = document.querySelector('.js-terraform-notification'); + const bannerDismissedKey = 'terraform_notification_dismissed'; - if (!el) { + if (!el || parseBoolean(getCookie(bannerDismissedKey))) { return false; } - const { projectId } = el.dataset; + const { terraformImagePath } = el.dataset; return new Vue({ el, - render: (createElement) => - createElement(TerraformNotification, { props: { projectId: Number(projectId) } }), + provide: { + terraformImagePath, + bannerDismissedKey, + }, + render: (createElement) => createElement(TerraformNotification), }); }; |