1 files changed, 101 insertions, 22 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 5815c6393a7..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,21 +24,34 @@ export default {
     GlSprintf,
     GlLink,
     SettingsBlock,
+    SettingsTitles,
   },
   i18n: {
     DEPENDENCY_PROXY_HEADER,
     DEPENDENCY_PROXY_SETTINGS_DESCRIPTION,
-    label: s__('DependencyProxy|Enable 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,
   },
-  inject: ['defaultExpanded', 'groupPath'],
+  inject: ['defaultExpanded', 'groupPath', 'groupDependencyProxyPath'],
   props: {
     dependencyProxySettings: {
       type: Object,
       required: true,
     },
+    dependencyProxyImageTtlPolicy: {
+      type: Object,
+      required: true,
+    },
     isLoading: {
       type: Boolean,
       required: false,
@@ -49,26 +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');
@@ -77,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>
@@ -91,7 +144,11 @@ export default {
       <span data-testid="description">
         <gl-sprintf :message="$options.i18n.DEPENDENCY_PROXY_SETTINGS_DESCRIPTION">
           <template #docLink="{ content }">
-            <gl-link :href="$options.links.DEPENDENCY_PROXY_DOCS_PATH">{{ content }}</gl-link>
+            <gl-link
+              data-testid="description-link"
+              :href="$options.links.DEPENDENCY_PROXY_DOCS_PATH"
+              >{{ content }}</gl-link
+            >
           </template>
         </gl-sprintf>
       </span>
@@ -101,9 +158,31 @@ 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"
+        >
+          <template #help>
+            <span class="gl-overflow-break-word gl-max-w-100vw gl-display-inline-block">
+              <gl-sprintf :message="$options.i18n.enabledProxyHelpText">
+                <template #link="{ content }">
+                  <gl-link data-testid="toggle-help-link" :href="groupDependencyProxyPath">{{
+                    content
+                  }}</gl-link>
+                </template>
+              </gl-sprintf>
+            </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>