Add latest changes from gitlab-org/gitlab@master

7 files changed, 116 insertions, 23 deletions

diff --git a/app/assets/javascripts/packages_and_registries/settings/group/components/dependency_proxy_settings.vue b/app/assets/javascripts/packages_and_registries/settings/group/components/dependency_proxy_settings.vue
index de9d7b4f1ca..fd62fe144b2 100644
--- a/app/assets/javascripts/packages_and_registries/settings/group/components/dependency_proxy_settings.vue
+++ b/app/assets/javascripts/packages_and_registries/settings/group/components/dependency_proxy_settings.vue
@@ -2,9 +2,14 @@
 import { GlToggle, GlSprintf, GlLink } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue';
+import SettingsTitles from '~/packages_and_registries/settings/group/components/settings_titles.vue';
 import updateDependencyProxySettings from '~/packages_and_registries/settings/group/graphql/mutations/update_dependency_proxy_settings.mutation.graphql';
+import updateDependencyProxyImageTtlGroupPolicy from '~/packages_and_registries/settings/group/graphql/mutations/update_dependency_proxy_image_ttl_group_policy.mutation.graphql';
 import { updateGroupPackageSettings } from '~/packages_and_registries/settings/group/graphql/utils/cache_update';
-import { updateGroupDependencyProxySettingsOptimisticResponse } from '~/packages_and_registries/settings/group/graphql/utils/optimistic_responses';
+import {
+  updateGroupDependencyProxySettingsOptimisticResponse,
+  updateDependencyProxyImageTtlGroupPolicyOptimisticResponse,
+} from '~/packages_and_registries/settings/group/graphql/utils/optimistic_responses';
 
 import {
   DEPENDENCY_PROXY_HEADER,
@@ -19,14 +24,20 @@ export default {
     GlSprintf,
     GlLink,
     SettingsBlock,
+    SettingsTitles,
   },
   i18n: {
     DEPENDENCY_PROXY_HEADER,
     DEPENDENCY_PROXY_SETTINGS_DESCRIPTION,
-    label: s__('DependencyProxy|Enable Dependency Proxy'),
+    enabledProxyLabel: s__('DependencyProxy|Enable Dependency Proxy'),
     enabledProxyHelpText: s__(
       'DependencyProxy|To see the image prefix and what is in the cache, visit the %{linkStart}Dependency Proxy%{linkEnd}',
     ),
+    storageSettingsTitle: s__('DependencyProxy|Storage settings'),
+    ttlPolicyEnabledLabel: s__('DependencyProxy|Clear the Dependency Proxy cache automatically'),
+    ttlPolicyEnabledHelpText: s__(
+      'DependencyProxy|When enabled, images older than 90 days will be removed from the cache.',
+    ),
   },
   links: {
     DEPENDENCY_PROXY_DOCS_PATH,
@@ -37,6 +48,10 @@ export default {
       type: Object,
       required: true,
     },
+    dependencyProxyImageTtlPolicy: {
+      type: Object,
+      required: true,
+    },
     isLoading: {
       type: Boolean,
       required: false,
@@ -52,29 +67,35 @@ export default {
         this.updateSettings({ enabled });
       },
     },
+    ttlEnabled: {
+      get() {
+        return this.dependencyProxyImageTtlPolicy.enabled;
+      },
+      set(enabled) {
+        const payload = {
+          enabled,
+          ttl: 90, // hardocded TTL for the MVC version
+        };
+        this.updateDependencyProxyImageTtlGroupPolicy(payload);
+      },
+    },
     helpText() {
       return this.enabled ? this.$options.i18n.enabledProxyHelpText : '';
     },
   },
   methods: {
-    async updateSettings(payload) {
+    mutationVariables(payload) {
+      return {
+        input: {
+          groupPath: this.groupPath,
+          ...payload,
+        },
+      };
+    },
+    async executeMutation(config, resource) {
       try {
-        const { data } = await this.$apollo.mutate({
-          mutation: updateDependencyProxySettings,
-          variables: {
-            input: {
-              groupPath: this.groupPath,
-              ...payload,
-            },
-          },
-          update: updateGroupPackageSettings(this.groupPath),
-          optimisticResponse: updateGroupDependencyProxySettingsOptimisticResponse({
-            ...this.dependencyProxySettings,
-            ...payload,
-          }),
-        });
-
-        if (data.updateDependencyProxySettings?.errors?.length > 0) {
+        const { data } = await this.$apollo.mutate(config);
+        if (data[resource]?.errors.length > 0) {
           throw new Error();
         } else {
           this.$emit('success');
@@ -83,6 +104,32 @@ export default {
         this.$emit('error');
       }
     },
+    async updateSettings(payload) {
+      const apolloConfig = {
+        mutation: updateDependencyProxySettings,
+        variables: this.mutationVariables(payload),
+        update: updateGroupPackageSettings(this.groupPath),
+        optimisticResponse: updateGroupDependencyProxySettingsOptimisticResponse({
+          ...this.dependencyProxySettings,
+          ...payload,
+        }),
+      };
+
+      this.executeMutation(apolloConfig, 'updateDependencyProxySettings');
+    },
+    async updateDependencyProxyImageTtlGroupPolicy(payload) {
+      const apolloConfig = {
+        mutation: updateDependencyProxyImageTtlGroupPolicy,
+        variables: this.mutationVariables(payload),
+        update: updateGroupPackageSettings(this.groupPath),
+        optimisticResponse: updateDependencyProxyImageTtlGroupPolicyOptimisticResponse({
+          ...this.dependencyProxyImageTtlPolicy,
+          ...payload,
+        }),
+      };
+
+      this.executeMutation(apolloConfig, 'updateDependencyProxyImageTtlGroupPolicy');
+    },
   },
 };
 </script>
@@ -111,7 +158,7 @@ export default {
         <gl-toggle
           v-model="enabled"
           :disabled="isLoading"
-          :label="$options.i18n.label"
+          :label="$options.i18n.enabledProxyLabel"
           :help="helpText"
           data-qa-selector="dependency_proxy_setting_toggle"
           data-testid="dependency-proxy-setting-toggle"
@@ -128,6 +175,15 @@ export default {
             </span>
           </template>
         </gl-toggle>
+
+        <settings-titles :title="$options.i18n.storageSettingsTitle" class="gl-my-6" />
+        <gl-toggle
+          v-model="ttlEnabled"
+          :disabled="isLoading"
+          :label="$options.i18n.ttlPolicyEnabledLabel"
+          :help="$options.i18n.ttlPolicyEnabledHelpText"
+          data-testid="dependency-proxy-ttl-policies-toggle"
+        />
       </div>
     </template>
   </settings-block>
diff --git a/app/assets/javascripts/packages_and_registries/settings/group/components/group_settings_app.vue b/app/assets/javascripts/packages_and_registries/settings/group/components/group_settings_app.vue
index b45cedcdd66..64c12b4be6a 100644
--- a/app/assets/javascripts/packages_and_registries/settings/group/components/group_settings_app.vue
+++ b/app/assets/javascripts/packages_and_registries/settings/group/components/group_settings_app.vue
@@ -37,6 +37,9 @@ export default {
     dependencyProxySettings() {
       return this.group?.dependencyProxySetting || {};
     },
+    dependencyProxyImageTtlPolicy() {
+      return this.group?.dependencyProxyImageTtlPolicy || {};
+    },
     isLoading() {
       return this.$apollo.queries.group.loading;
     },
@@ -82,6 +85,7 @@ export default {
     <dependency-proxy-settings
       v-if="dependencyProxyAvailable"
       :dependency-proxy-settings="dependencyProxySettings"
+      :dependency-proxy-image-ttl-policy="dependencyProxyImageTtlPolicy"
       :is-loading="isLoading"
       @success="handleSuccess"
       @error="handleError"
diff --git a/app/assets/javascripts/packages_and_registries/settings/group/components/settings_titles.vue b/app/assets/javascripts/packages_and_registries/settings/group/components/settings_titles.vue
index 3f0ab7686e5..1e93875c1e3 100644
--- a/app/assets/javascripts/packages_and_registries/settings/group/components/settings_titles.vue
+++ b/app/assets/javascripts/packages_and_registries/settings/group/components/settings_titles.vue
@@ -8,7 +8,8 @@ export default {
     },
     subTitle: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
   },
 };
@@ -16,10 +17,10 @@ export default {
 
 <template>
   <div>
-    <h5 class="gl-border-b-solid gl-border-b-1 gl-border-gray-200">
+    <h5 class="gl-border-b-solid gl-border-b-1 gl-border-gray-200 gl-pb-3">
       {{ title }}
     </h5>
-    <p>{{ subTitle }}</p>
+    <p v-if="subTitle">{{ subTitle }}</p>
     <slot></slot>
   </div>
 </template>
diff --git a/app/assets/javascripts/packages_and_registries/settings/group/graphql/mutations/update_dependency_proxy_image_ttl_group_policy.mutation.graphql b/app/assets/javascripts/packages_and_registries/settings/group/graphql/mutations/update_dependency_proxy_image_ttl_group_policy.mutation.graphql
new file mode 100644
index 00000000000..81250f52dfb
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/settings/group/graphql/mutations/update_dependency_proxy_image_ttl_group_policy.mutation.graphql
@@ -0,0 +1,11 @@
+mutation updateDependencyProxyImageTtlGroupPolicy(
+  $input: UpdateDependencyProxyImageTtlGroupPolicyInput!
+) {
+  updateDependencyProxyImageTtlGroupPolicy(input: $input) {
+    dependencyProxyImageTtlPolicy {
+      enabled
+      ttl
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/packages_and_registries/settings/group/graphql/queries/get_group_packages_settings.query.graphql b/app/assets/javascripts/packages_and_registries/settings/group/graphql/queries/get_group_packages_settings.query.graphql
index 96dc2357f8b..404d9d26d49 100644
--- a/app/assets/javascripts/packages_and_registries/settings/group/graphql/queries/get_group_packages_settings.query.graphql
+++ b/app/assets/javascripts/packages_and_registries/settings/group/graphql/queries/get_group_packages_settings.query.graphql
@@ -4,6 +4,10 @@ query getGroupPackagesSettings($fullPath: ID!) {
     dependencyProxySetting {
       enabled
     }
+    dependencyProxyImageTtlPolicy {
+      ttl
+      enabled
+    }
     packageSettings {
       mavenDuplicatesAllowed
       mavenDuplicateExceptionRegex
diff --git a/app/assets/javascripts/packages_and_registries/settings/group/graphql/utils/cache_update.js b/app/assets/javascripts/packages_and_registries/settings/group/graphql/utils/cache_update.js
index fe94203f51b..c7b0899fa4c 100644
--- a/app/assets/javascripts/packages_and_registries/settings/group/graphql/utils/cache_update.js
+++ b/app/assets/javascripts/packages_and_registries/settings/group/graphql/utils/cache_update.js
@@ -19,6 +19,11 @@ export const updateGroupPackageSettings = (fullPath) => (client, { data: updated
         ...updatedData.updateDependencyProxySettings.dependencyProxySetting,
       };
     }
+    if (updatedData.updateDependencyProxyImageTtlGroupPolicy) {
+      draftState.group.dependencyProxyImageTtlPolicy = {
+        ...updatedData.updateDependencyProxyImageTtlGroupPolicy.dependencyProxyImageTtlPolicy,
+      };
+    }
   });
 
   client.writeQuery({
diff --git a/app/assets/javascripts/packages_and_registries/settings/group/graphql/utils/optimistic_responses.js b/app/assets/javascripts/packages_and_registries/settings/group/graphql/utils/optimistic_responses.js
index a30d8ca0b81..92f6e117911 100644
--- a/app/assets/javascripts/packages_and_registries/settings/group/graphql/utils/optimistic_responses.js
+++ b/app/assets/javascripts/packages_and_registries/settings/group/graphql/utils/optimistic_responses.js
@@ -21,3 +21,15 @@ export const updateGroupDependencyProxySettingsOptimisticResponse = (changes) =>
     },
   },
 });
+
+export const updateDependencyProxyImageTtlGroupPolicyOptimisticResponse = (changes) => ({
+  // eslint-disable-next-line @gitlab/require-i18n-strings
+  __typename: 'Mutation',
+  updateDependencyProxyImageTtlGroupPolicy: {
+    __typename: 'UpdateDependencyProxyImageTtlGroupPolicyPayload',
+    errors: [],
+    dependencyProxyImageTtlPolicy: {
+      ...changes,
+    },
+  },
+});