Add latest changes from gitlab-org/gitlab@master

4 files changed, 143 insertions, 0 deletions

diff --git a/app/assets/javascripts/artifacts_settings/graphql/mutations/update_keep_latest_artifact_project_setting.mutation.graphql b/app/assets/javascripts/artifacts_settings/graphql/mutations/update_keep_latest_artifact_project_setting.mutation.graphql
new file mode 100644
index 00000000000..d50fd665c16
--- /dev/null
+++ b/app/assets/javascripts/artifacts_settings/graphql/mutations/update_keep_latest_artifact_project_setting.mutation.graphql
@@ -0,0 +1,5 @@
+mutation updateKeepLatestArtifactProjectSetting($fullPath: ID!, $keepLatestArtifact: Boolean!) {
+  ciCdSettingsUpdate(input: { fullPath: $fullPath, keepLatestArtifact: $keepLatestArtifact }) {
+    errors
+  }
+}
diff --git a/app/assets/javascripts/artifacts_settings/graphql/queries/get_keep_latest_artifact_project_setting.query.graphql b/app/assets/javascripts/artifacts_settings/graphql/queries/get_keep_latest_artifact_project_setting.query.graphql
new file mode 100644
index 00000000000..7486512c57c
--- /dev/null
+++ b/app/assets/javascripts/artifacts_settings/graphql/queries/get_keep_latest_artifact_project_setting.query.graphql
@@ -0,0 +1,7 @@
+query getKeepLatestArtifactProjectSetting($fullPath: ID!) {
+  project(fullPath: $fullPath) {
+    ciCdSettings {
+      keepLatestArtifact
+    }
+  }
+}
diff --git a/app/assets/javascripts/artifacts_settings/index.js b/app/assets/javascripts/artifacts_settings/index.js
new file mode 100644
index 00000000000..d99d2be81cf
--- /dev/null
+++ b/app/assets/javascripts/artifacts_settings/index.js
@@ -0,0 +1,32 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+import KeepLatestArtifactCheckbox from '~/artifacts_settings/keep_latest_artifact_checkbox.vue';
+
+Vue.use(VueApollo);
+
+const apolloProvider = new VueApollo({
+  defaultClient: createDefaultClient(),
+});
+
+export default (containerId = 'js-artifacts-settings-app') => {
+  const containerEl = document.getElementById(containerId);
+
+  if (!containerEl) {
+    return false;
+  }
+
+  const { fullPath, helpPagePath } = containerEl.dataset;
+
+  return new Vue({
+    el: containerEl,
+    apolloProvider,
+    provide: {
+      fullPath,
+      helpPagePath,
+    },
+    render(createElement) {
+      return createElement(KeepLatestArtifactCheckbox);
+    },
+  });
+};
diff --git a/app/assets/javascripts/artifacts_settings/keep_latest_artifact_checkbox.vue b/app/assets/javascripts/artifacts_settings/keep_latest_artifact_checkbox.vue
new file mode 100644
index 00000000000..5684033f3af
--- /dev/null
+++ b/app/assets/javascripts/artifacts_settings/keep_latest_artifact_checkbox.vue
@@ -0,0 +1,99 @@
+<script>
+import { GlAlert, GlFormCheckbox, GlLink } from '@gitlab/ui';
+import { __ } from '~/locale';
+import GetKeepLatestArtifactProjectSetting from './graphql/queries/get_keep_latest_artifact_project_setting.query.graphql';
+import UpdateKeepLatestArtifactProjectSetting from './graphql/mutations/update_keep_latest_artifact_project_setting.mutation.graphql';
+
+const FETCH_ERROR = __('There was a problem fetching the keep latest artifact setting.');
+const UPDATE_ERROR = __('There was a problem updating the keep latest artifact setting.');
+
+export default {
+  components: {
+    GlAlert,
+    GlFormCheckbox,
+    GlLink,
+  },
+  inject: {
+    fullPath: {
+      default: '',
+    },
+    helpPagePath: {
+      default: '',
+    },
+  },
+  apollo: {
+    keepLatestArtifact: {
+      query: GetKeepLatestArtifactProjectSetting,
+      variables() {
+        return {
+          fullPath: this.fullPath,
+        };
+      },
+      update(data) {
+        return data.project?.ciCdSettings?.keepLatestArtifact;
+      },
+      error() {
+        this.reportError(FETCH_ERROR);
+      },
+    },
+  },
+  data() {
+    return {
+      keepLatestArtifact: true,
+      errorMessage: '',
+      isAlertDismissed: false,
+    };
+  },
+  computed: {
+    shouldShowAlert() {
+      return this.errorMessage && !this.isAlertDismissed;
+    },
+  },
+  methods: {
+    reportError(error) {
+      this.errorMessage = error;
+      this.isAlertDismissed = false;
+    },
+    async updateSetting(checked) {
+      try {
+        const { data } = await this.$apollo.mutate({
+          mutation: UpdateKeepLatestArtifactProjectSetting,
+          variables: {
+            fullPath: this.fullPath,
+            keepLatestArtifact: checked,
+          },
+        });
+
+        if (data.ciCdSettingsUpdate.errors.length) {
+          this.reportError(UPDATE_ERROR);
+        }
+      } catch (error) {
+        this.reportError(UPDATE_ERROR);
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-alert
+      v-if="shouldShowAlert"
+      class="gl-mb-5"
+      variant="danger"
+      @dismiss="isAlertDismissed = true"
+      >{{ errorMessage }}</gl-alert
+    >
+    <gl-form-checkbox v-model="keepLatestArtifact" @change="updateSetting"
+      ><b class="gl-mr-3">{{ __('Keep artifacts from most recent successful jobs') }}</b>
+      <gl-link :href="helpPagePath">{{ __('More information') }}</gl-link></gl-form-checkbox
+    >
+    <p>
+      {{
+        __(
+          'The latest artifacts created by jobs in the most recent successful pipeline will be stored.',
+        )
+      }}
+    </p>
+  </div>
+</template>