Add latest changes from gitlab-org/gitlab@master

2 files changed, 157 insertions, 0 deletions

diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/cleanup_image_tags.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/cleanup_image_tags.vue
new file mode 100644
index 00000000000..821d78b0496
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/settings/project/components/cleanup_image_tags.vue
@@ -0,0 +1,118 @@
+<script>
+import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
+import { isEqual, get, isEmpty } from 'lodash';
+import {
+  CONTAINER_CLEANUP_POLICY_TITLE,
+  CONTAINER_CLEANUP_POLICY_DESCRIPTION,
+  FETCH_SETTINGS_ERROR_MESSAGE,
+  UNAVAILABLE_FEATURE_TITLE,
+  UNAVAILABLE_FEATURE_INTRO_TEXT,
+  UNAVAILABLE_USER_FEATURE_TEXT,
+  UNAVAILABLE_ADMIN_FEATURE_TEXT,
+} from '~/packages_and_registries/settings/project/constants';
+import expirationPolicyQuery from '~/packages_and_registries/settings/project/graphql/queries/get_expiration_policy.query.graphql';
+
+import ContainerExpirationPolicyForm from './container_expiration_policy_form.vue';
+
+export default {
+  components: {
+    GlAlert,
+    GlSprintf,
+    GlLink,
+    ContainerExpirationPolicyForm,
+  },
+  inject: ['projectPath', 'isAdmin', 'adminSettingsPath', 'enableHistoricEntries', 'helpPagePath'],
+  i18n: {
+    CONTAINER_CLEANUP_POLICY_TITLE,
+    CONTAINER_CLEANUP_POLICY_DESCRIPTION,
+    UNAVAILABLE_FEATURE_TITLE,
+    UNAVAILABLE_FEATURE_INTRO_TEXT,
+    FETCH_SETTINGS_ERROR_MESSAGE,
+  },
+  apollo: {
+    containerExpirationPolicy: {
+      query: expirationPolicyQuery,
+      variables() {
+        return {
+          projectPath: this.projectPath,
+        };
+      },
+      update: (data) => data.project?.containerExpirationPolicy,
+      result({ data }) {
+        this.workingCopy = { ...get(data, 'project.containerExpirationPolicy', {}) };
+      },
+      error(e) {
+        this.fetchSettingsError = e;
+      },
+    },
+  },
+  data() {
+    return {
+      fetchSettingsError: false,
+      containerExpirationPolicy: null,
+      workingCopy: {},
+    };
+  },
+  computed: {
+    isEnabled() {
+      return this.containerExpirationPolicy || this.enableHistoricEntries;
+    },
+    showDisabledFormMessage() {
+      return !this.isEnabled && !this.fetchSettingsError;
+    },
+    unavailableFeatureMessage() {
+      return this.isAdmin ? UNAVAILABLE_ADMIN_FEATURE_TEXT : UNAVAILABLE_USER_FEATURE_TEXT;
+    },
+    isEdited() {
+      if (isEmpty(this.containerExpirationPolicy) && isEmpty(this.workingCopy)) {
+        return false;
+      }
+      return !isEqual(this.containerExpirationPolicy, this.workingCopy);
+    },
+  },
+  methods: {
+    restoreOriginal() {
+      this.workingCopy = { ...this.containerExpirationPolicy };
+    },
+  },
+};
+</script>
+
+<template>
+  <div data-testid="container-expiration-policy-project-settings">
+    <h4 data-testid="title">{{ $options.i18n.CONTAINER_CLEANUP_POLICY_TITLE }}</h4>
+    <p data-testid="description">
+      <gl-sprintf :message="$options.i18n.CONTAINER_CLEANUP_POLICY_DESCRIPTION">
+        <template #link="{ content }">
+          <gl-link :href="helpPagePath">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </p>
+    <container-expiration-policy-form
+      v-if="isEnabled"
+      v-model="workingCopy"
+      :is-loading="$apollo.queries.containerExpirationPolicy.loading"
+      :is-edited="isEdited"
+      @reset="restoreOriginal"
+    />
+    <template v-else>
+      <gl-alert
+        v-if="showDisabledFormMessage"
+        :dismissible="false"
+        :title="$options.i18n.UNAVAILABLE_FEATURE_TITLE"
+        variant="tip"
+      >
+        {{ $options.i18n.UNAVAILABLE_FEATURE_INTRO_TEXT }}
+
+        <gl-sprintf :message="unavailableFeatureMessage">
+          <template #link="{ content }">
+            <gl-link :href="adminSettingsPath">{{ content }}</gl-link>
+          </template>
+        </gl-sprintf>
+      </gl-alert>
+      <gl-alert v-else-if="fetchSettingsError" variant="warning" :dismissible="false">
+        <gl-sprintf :message="$options.i18n.FETCH_SETTINGS_ERROR_MESSAGE" />
+      </gl-alert>
+    </template>
+  </div>
+</template>
diff --git a/app/assets/javascripts/packages_and_registries/settings/project/registry_settings_cleanup_tags_bundle.js b/app/assets/javascripts/packages_and_registries/settings/project/registry_settings_cleanup_tags_bundle.js
new file mode 100644
index 00000000000..6332f79ebb8
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/settings/project/registry_settings_cleanup_tags_bundle.js
@@ -0,0 +1,39 @@
+import { GlToast } from '@gitlab/ui';
+import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import Translate from '~/vue_shared/translate';
+import CleanupImageTags from './components/cleanup_image_tags.vue';
+import { apolloProvider } from './graphql/index';
+
+Vue.use(GlToast);
+Vue.use(Translate);
+
+export default () => {
+  const el = document.getElementById('js-registry-settings-cleanup-image-tags');
+  if (!el) {
+    return null;
+  }
+  const {
+    isAdmin,
+    enableHistoricEntries,
+    projectPath,
+    adminSettingsPath,
+    tagsRegexHelpPagePath,
+    helpPagePath,
+  } = el.dataset;
+  return new Vue({
+    el,
+    apolloProvider,
+    provide: {
+      isAdmin: parseBoolean(isAdmin),
+      enableHistoricEntries: parseBoolean(enableHistoricEntries),
+      projectPath,
+      adminSettingsPath,
+      tagsRegexHelpPagePath,
+      helpPagePath,
+    },
+    render(createElement) {
+      return createElement(CleanupImageTags, {});
+    },
+  });
+};