From 1e43d2b8b3081f1aea5126d0da241a60affeeca1 Mon Sep 17 00:00:00 2001
From: Fiona McCawley <fmccawley@gitlab.com>
Date: Mon, 20 Oct 2025 15:47:58 +1100
Subject: [PATCH 1/3] Refactor virtual registries setting component

- Create a separate EE group settings app component
- Update bundle.js to import CE or EE version
- Delete fragments and create a separate virtual registries settings query
- Add query to virtual registries setting component
- Update mock data to remove unnecessary imports
- Revert CE components specs not to import from EE
- Update cache_update
---
 .../settings/group/bundle.js                  |   2 +-
 .../group/components/group_settings_app.vue   |  26 +--
 .../group_packages_settings.fragment.graphql  |  11 --
 .../get_group_packages_settings.query.graphql |  10 +-
 .../group/components/group_settings_app.vue   |  47 ++++++
 .../components/virtual_registries_setting.vue |  33 ++--
 .../group_packages_settings.fragment.graphql  |  14 --
 ...p_virtual_registries_setting.query.graphql |   8 +
 .../group/graphql/utils/cache_update.js       |   6 +-
 .../components/group_settings_app_spec.js     | 154 +++++-------------
 .../virtual_registries_setting_spec.js        |  59 ++++---
 .../group/graphql/utils/cache_update_spec.js  |  16 +-
 .../utils/optimistic_responses_spec.js        |   5 +-
 .../settings/group/mock_data.js               |  40 +----
 .../dependency_proxy_settings_spec.js         |   2 +-
 .../docker_hub_authentication_section_spec.js |   2 +-
 .../components/group_settings_app_spec.js     |   2 +-
 .../group/components/package_settings_spec.js |   2 +-
 .../packages_forwarding_settings_spec.js      |   2 +-
 19 files changed, 183 insertions(+), 258 deletions(-)
 delete mode 100644 app/assets/javascripts/packages_and_registries/settings/group/graphql/fragments/group_packages_settings.fragment.graphql
 create mode 100644 ee/app/assets/javascripts/packages_and_registries/settings/group/components/group_settings_app.vue
 delete mode 100644 ee/app/assets/javascripts/packages_and_registries/settings/group/graphql/fragments/group_packages_settings.fragment.graphql
 create mode 100644 ee/app/assets/javascripts/packages_and_registries/settings/group/graphql/queries/get_group_virtual_registries_setting.query.graphql

diff --git a/app/assets/javascripts/packages_and_registries/settings/group/bundle.js b/app/assets/javascripts/packages_and_registries/settings/group/bundle.js
index 3689199751d21a..a009be4de131a5 100644
--- a/app/assets/javascripts/packages_and_registries/settings/group/bundle.js
+++ b/app/assets/javascripts/packages_and_registries/settings/group/bundle.js
@@ -2,7 +2,7 @@ import { GlToast } from '@gitlab/ui';
 import Vue from 'vue';
 
 import Translate from '~/vue_shared/translate';
-import SettingsApp from './components/group_settings_app.vue';
+import SettingsApp from 'ee_else_ce/packages_and_registries/settings/group/components/group_settings_app.vue';
 import { apolloProvider } from './graphql';
 
 Vue.use(Translate);
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 6b03ca9b862559..23c99b8231f469 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
@@ -1,13 +1,10 @@
 <script>
 import { GlAlert } from '@gitlab/ui';
-import VirtualRegistriesSetting from 'ee_component/packages_and_registries/settings/group/components/virtual_registries_setting.vue';
 import { __ } from '~/locale';
 import PackagesSettings from '~/packages_and_registries/settings/group/components/packages_settings.vue';
 import PackagesForwardingSettings from '~/packages_and_registries/settings/group/components/packages_forwarding_settings.vue';
 import DependencyProxySettings from '~/packages_and_registries/settings/group/components/dependency_proxy_settings.vue';
 import glAbilitiesMixin from '~/vue_shared/mixins/gl_abilities_mixin';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import glLicensedFeaturesMixin from '~/vue_shared/mixins/gl_licensed_features_mixin';
 import getGroupPackagesSettingsQuery from '~/packages_and_registries/settings/group/graphql/queries/get_group_packages_settings.query.graphql';
 
 export default {
@@ -17,9 +14,8 @@ export default {
     PackagesSettings,
     PackagesForwardingSettings,
     DependencyProxySettings,
-    VirtualRegistriesSetting,
   },
-  mixins: [glAbilitiesMixin(), glFeatureFlagMixin(), glLicensedFeaturesMixin()],
+  mixins: [glAbilitiesMixin()],
   inject: ['groupPath'],
   apollo: {
     group: {
@@ -47,20 +43,9 @@ export default {
     dependencyProxyImageTtlPolicy() {
       return this.group?.dependencyProxyImageTtlPolicy || {};
     },
-    virtualRegistriesSetting() {
-      return this.group?.virtualRegistriesSetting || {};
-    },
     isLoading() {
       return this.$apollo.queries.group.loading;
     },
-    shouldRenderVirtualRegistriesSetting() {
-      return (
-        this.glFeatures.mavenVirtualRegistry &&
-        this.glFeatures.uiForVirtualRegistries &&
-        this.glLicensedFeatures.packagesVirtualRegistry &&
-        this.glAbilities.adminVirtualRegistry
-      );
-    },
   },
   methods: {
     dismissAlert() {
@@ -88,14 +73,7 @@ export default {
       {{ alertMessage }}
     </gl-alert>
 
-    <virtual-registries-setting
-      v-if="shouldRenderVirtualRegistriesSetting"
-      id="virtual-registries-setting"
-      :virtual-registries-setting="virtualRegistriesSetting"
-      :is-loading="isLoading"
-      @success="handleSuccess"
-      @error="handleError"
-    />
+    <slot name="virtual-registries-setting"></slot>
 
     <packages-settings
       id="packages-settings"
diff --git a/app/assets/javascripts/packages_and_registries/settings/group/graphql/fragments/group_packages_settings.fragment.graphql b/app/assets/javascripts/packages_and_registries/settings/group/graphql/fragments/group_packages_settings.fragment.graphql
deleted file mode 100644
index 9ae0d385cd2e4e..00000000000000
--- a/app/assets/javascripts/packages_and_registries/settings/group/graphql/fragments/group_packages_settings.fragment.graphql
+++ /dev/null
@@ -1,11 +0,0 @@
-fragment GroupPackagesSettings on Group {
-  id
-  dependencyProxySetting {
-    enabled
-    identity
-  }
-  dependencyProxyImageTtlPolicy {
-    ttl
-    enabled
-  }
-}
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 8e94e27328f798..9706d53119d868 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
@@ -1,10 +1,16 @@
 #import "~/packages_and_registries/settings/group/graphql/fragments/package_settings_fields.fragment.graphql"
-#import "ee_else_ce/packages_and_registries/settings/group/graphql/fragments/group_packages_settings.fragment.graphql"
 
 query getGroupPackagesSettings($fullPath: ID!) {
   group(fullPath: $fullPath) {
     id
-    ...GroupPackagesSettings
+    dependencyProxySetting {
+      enabled
+      identity
+    }
+    dependencyProxyImageTtlPolicy {
+      ttl
+      enabled
+    }
     packageSettings {
       ...PackageSettingsFields
     }
diff --git a/ee/app/assets/javascripts/packages_and_registries/settings/group/components/group_settings_app.vue b/ee/app/assets/javascripts/packages_and_registries/settings/group/components/group_settings_app.vue
new file mode 100644
index 00000000000000..3ce991e94feba7
--- /dev/null
+++ b/ee/app/assets/javascripts/packages_and_registries/settings/group/components/group_settings_app.vue
@@ -0,0 +1,47 @@
+<script>
+import CeGroupSettingsApp from '~/packages_and_registries/settings/group/components/group_settings_app.vue';
+import VirtualRegistriesSetting from 'ee_component/packages_and_registries/settings/group/components/virtual_registries_setting.vue';
+import glAbilitiesMixin from '~/vue_shared/mixins/gl_abilities_mixin';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import glLicensedFeaturesMixin from '~/vue_shared/mixins/gl_licensed_features_mixin';
+
+export default {
+  name: 'GroupSettingsAppEE',
+  components: {
+    CeGroupSettingsApp,
+    VirtualRegistriesSetting,
+  },
+  mixins: [glAbilitiesMixin(), glFeatureFlagMixin(), glLicensedFeaturesMixin()],
+  computed: {
+    shouldRenderVirtualRegistriesSetting() {
+      return (
+        this.glFeatures.mavenVirtualRegistry &&
+        this.glFeatures.uiForVirtualRegistries &&
+        this.glLicensedFeatures.packagesVirtualRegistry &&
+        this.glAbilities.adminVirtualRegistry
+      );
+    },
+  },
+  methods: {
+    handleSuccess() {
+      this.$refs.ceComponent.handleSuccess();
+    },
+    handleError() {
+      this.$refs.ceComponent.handleError();
+    },
+  },
+};
+</script>
+
+<template>
+  <ce-group-settings-app ref="ceComponent">
+    <template #virtual-registries-setting>
+      <virtual-registries-setting
+        v-if="shouldRenderVirtualRegistriesSetting"
+        id="virtual-registries-setting"
+        @success="handleSuccess"
+        @error="handleError"
+      />
+    </template>
+  </ce-group-settings-app>
+</template>
diff --git a/ee/app/assets/javascripts/packages_and_registries/settings/group/components/virtual_registries_setting.vue b/ee/app/assets/javascripts/packages_and_registries/settings/group/components/virtual_registries_setting.vue
index a4101add83ab1a..9cfcfef559c272 100644
--- a/ee/app/assets/javascripts/packages_and_registries/settings/group/components/virtual_registries_setting.vue
+++ b/ee/app/assets/javascripts/packages_and_registries/settings/group/components/virtual_registries_setting.vue
@@ -1,9 +1,10 @@
 <script>
 import { GlToggle, GlSprintf, GlLink, GlExperimentBadge } from '@gitlab/ui';
 import SettingsSection from '~/vue_shared/components/settings/settings_section.vue';
+import getGroupVirtualRegistriesSetting from 'ee_component/packages_and_registries/settings/group/graphql/queries/get_group_virtual_registries_setting.query.graphql';
 import updateVirtualRegistriesSetting from 'ee_component/packages_and_registries/settings/group/graphql/mutations/update_virtual_registries_setting.mutation.graphql';
 import { updateVirtualRegistriesSettingOptimisticResponse } from 'ee_component/packages_and_registries/settings/group/graphql/utils/optimistic_responses';
-import { updateGroupPackageSettings } from 'ee_component/packages_and_registries/settings/group/graphql/utils/cache_update';
+import { updateGroupVirtualRegistriesSetting } from 'ee_component/packages_and_registries/settings/group/graphql/utils/cache_update';
 
 export default {
   name: 'VirtualRegistriesSetting',
@@ -15,18 +16,28 @@ export default {
     SettingsSection,
   },
   inject: ['groupPath'],
-  props: {
-    virtualRegistriesSetting: {
-      type: Object,
-      required: true,
-    },
-    isLoading: {
-      type: Boolean,
-      required: false,
-      default: false,
+  apollo: {
+    group: {
+      query: getGroupVirtualRegistriesSetting,
+      variables() {
+        return {
+          fullPath: this.groupPath,
+        };
+      },
     },
   },
+  data() {
+    return {
+      group: {},
+    };
+  },
   computed: {
+    virtualRegistriesSetting() {
+      return this.group?.virtualRegistriesSetting || {};
+    },
+    isLoading() {
+      return this.$apollo.queries.group.loading;
+    },
     enabled: {
       get() {
         return this.virtualRegistriesSetting.enabled;
@@ -61,7 +72,7 @@ export default {
       const apolloConfig = {
         mutation: updateVirtualRegistriesSetting,
         variables: this.mutationVariables(payload),
-        update: updateGroupPackageSettings(this.groupPath),
+        update: updateGroupVirtualRegistriesSetting(this.groupPath),
         optimisticResponse: updateVirtualRegistriesSettingOptimisticResponse({
           ...this.virtualRegistriesSetting,
           ...payload,
diff --git a/ee/app/assets/javascripts/packages_and_registries/settings/group/graphql/fragments/group_packages_settings.fragment.graphql b/ee/app/assets/javascripts/packages_and_registries/settings/group/graphql/fragments/group_packages_settings.fragment.graphql
deleted file mode 100644
index 5e3014f91ba68e..00000000000000
--- a/ee/app/assets/javascripts/packages_and_registries/settings/group/graphql/fragments/group_packages_settings.fragment.graphql
+++ /dev/null
@@ -1,14 +0,0 @@
-fragment GroupPackagesSettings on Group {
-  id
-  dependencyProxySetting {
-    enabled
-    identity
-  }
-  dependencyProxyImageTtlPolicy {
-    ttl
-    enabled
-  }
-  virtualRegistriesSetting {
-    enabled
-  }
-}
diff --git a/ee/app/assets/javascripts/packages_and_registries/settings/group/graphql/queries/get_group_virtual_registries_setting.query.graphql b/ee/app/assets/javascripts/packages_and_registries/settings/group/graphql/queries/get_group_virtual_registries_setting.query.graphql
new file mode 100644
index 00000000000000..411eff8c2d1976
--- /dev/null
+++ b/ee/app/assets/javascripts/packages_and_registries/settings/group/graphql/queries/get_group_virtual_registries_setting.query.graphql
@@ -0,0 +1,8 @@
+query getGroupVirtualRegistriesSetting($fullPath: ID!) {
+  group(fullPath: $fullPath) {
+    id
+    virtualRegistriesSetting {
+      enabled
+    }
+  }
+}
diff --git a/ee/app/assets/javascripts/packages_and_registries/settings/group/graphql/utils/cache_update.js b/ee/app/assets/javascripts/packages_and_registries/settings/group/graphql/utils/cache_update.js
index d1ffee04331712..37afef774431a4 100644
--- a/ee/app/assets/javascripts/packages_and_registries/settings/group/graphql/utils/cache_update.js
+++ b/ee/app/assets/javascripts/packages_and_registries/settings/group/graphql/utils/cache_update.js
@@ -1,11 +1,11 @@
 import { produce } from 'immer';
-import getGroupPackagesSettingsQuery from '~/packages_and_registries/settings/group/graphql/queries/get_group_packages_settings.query.graphql';
+import getGroupVirtualRegistriesSetting from 'ee_component/packages_and_registries/settings/group/graphql/queries/get_group_virtual_registries_setting.query.graphql';
 
-export const updateGroupPackageSettings =
+export const updateGroupVirtualRegistriesSetting =
   (fullPath) =>
   (client, { data: updatedData }) => {
     const queryAndParams = {
-      query: getGroupPackagesSettingsQuery,
+      query: getGroupVirtualRegistriesSetting,
       variables: { fullPath },
     };
 
diff --git a/ee/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js b/ee/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js
index a65791ac3388dd..bac8c641f426fc 100644
--- a/ee/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js
+++ b/ee/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js
@@ -1,25 +1,19 @@
 import { GlAlert } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import PackagesSettings from '~/packages_and_registries/settings/group/components/packages_settings.vue';
-import DependencyProxySettings from '~/packages_and_registries/settings/group/components/dependency_proxy_settings.vue';
-import PackagesForwardingSettings from '~/packages_and_registries/settings/group/components/packages_forwarding_settings.vue';
 import VirtualRegistriesSetting from 'ee_component/packages_and_registries/settings/group/components/virtual_registries_setting.vue';
+import GroupSettingsApp from 'ee_component/packages_and_registries/settings/group/components/group_settings_app.vue';
+import CeGroupSettingsApp from '~/packages_and_registries/settings/group/components/group_settings_app.vue';
 
-import GroupSettingsApp from '~/packages_and_registries/settings/group/components/group_settings_app.vue';
-
+import getGroupVirtualRegistriesSetting from 'ee_component/packages_and_registries/settings/group/graphql/queries/get_group_virtual_registries_setting.query.graphql';
 import getGroupPackagesSettingsQuery from '~/packages_and_registries/settings/group/graphql/queries/get_group_packages_settings.query.graphql';
-import {
-  groupPackageSettingsMock,
-  packageSettings,
-  dependencyProxySettings,
-  dependencyProxyImageTtlPolicy,
-  virtualRegistriesSetting,
-} from '../mock_data';
+
+import { groupPackageSettingsMock } from 'jest/packages_and_registries/settings/group/mock_data';
+import { groupVirtualRegistriesSettingMock } from '../mock_data';
 
 jest.mock('~/alert');
 
@@ -30,31 +24,36 @@ describe('EE Group Settings App', () => {
 
   const defaultProvide = {
     groupPath: 'foo_group_path',
+    groupDependencyProxyPath: 'foo_group_path/-/dependency_proxy',
     glAbilities: {},
   };
 
   const mountComponent = ({
-    resolver = jest.fn().mockResolvedValue(groupPackageSettingsMock),
+    eeResolver = jest.fn().mockResolvedValue(groupVirtualRegistriesSettingMock),
+    ceResolver = jest.fn().mockResolvedValue(groupPackageSettingsMock),
     provide = defaultProvide,
-    adminDependencyProxyAbility = true,
     adminVirtualRegistryAbility = true,
     mavenVirtualRegistryFeature = true,
     packagesVirtualRegistryLicense = true,
     uiForVirtualRegistriesFeature = true,
+    mountFn = mount,
   } = {}) => {
     Vue.use(VueApollo);
 
-    const requestHandlers = [[getGroupPackagesSettingsQuery, resolver]];
+    const requestHandlers = [
+      [getGroupVirtualRegistriesSetting, eeResolver],
+      [getGroupPackagesSettingsQuery, ceResolver],
+    ];
 
     apolloProvider = createMockApollo(requestHandlers);
 
-    wrapper = shallowMount(GroupSettingsApp, {
+    wrapper = mountFn(GroupSettingsApp, {
       apolloProvider,
       provide: {
         ...provide,
         glAbilities: {
-          adminDependencyProxy: adminDependencyProxyAbility,
           adminVirtualRegistry: adminVirtualRegistryAbility,
+          adminDependencyProxy: true,
         },
         glFeatures: {
           mavenVirtualRegistry: mavenVirtualRegistryFeature,
@@ -76,10 +75,8 @@ describe('EE Group Settings App', () => {
     show = jest.fn();
   });
 
-  const findAlert = () => wrapper.findComponent(GlAlert);
-  const findPackageSettings = () => wrapper.findComponent(PackagesSettings);
-  const findPackageForwardingSettings = () => wrapper.findComponent(PackagesForwardingSettings);
-  const findDependencyProxySettings = () => wrapper.findComponent(DependencyProxySettings);
+  const findCeComponent = () => wrapper.findComponent(CeGroupSettingsApp);
+  const findAlert = () => findCeComponent().findComponent(GlAlert);
   const findVirtualRegistriesSetting = () => wrapper.findComponent(VirtualRegistriesSetting);
 
   const waitForApolloQueryAndRender = async () => {
@@ -87,60 +84,42 @@ describe('EE Group Settings App', () => {
     await nextTick();
   };
 
-  const packageSettingsProps = { packageSettings };
-  const packageForwardingSettingsProps = { forwardSettings: { ...packageSettings } };
-  const dependencyProxyProps = {
-    dependencyProxySettings: dependencyProxySettings(),
-    dependencyProxyImageTtlPolicy: dependencyProxyImageTtlPolicy(),
-  };
-  const virtualRegistriesProps = { virtualRegistriesSetting: virtualRegistriesSetting() };
-
-  describe.each`
-    finder                           | entitySpecificProps               | id
-    ${findPackageSettings}           | ${packageSettingsProps}           | ${'packages-settings'}
-    ${findPackageForwardingSettings} | ${packageForwardingSettingsProps} | ${'packages-forwarding-settings'}
-    ${findDependencyProxySettings}   | ${dependencyProxyProps}           | ${'dependency-proxy-settings'}
-    ${findVirtualRegistriesSetting}  | ${virtualRegistriesProps}         | ${'virtual-registries-setting'}
-  `('settings blocks', ({ finder, entitySpecificProps, id }) => {
+  describe('virtual registries setting', () => {
     beforeEach(() => {
       mountComponent();
       return waitForApolloQueryAndRender();
     });
 
-    it('renders the settings block', () => {
-      expect(finder().exists()).toBe(true);
+    it('renders the setting', () => {
+      expect(findVirtualRegistriesSetting().exists()).toBe(true);
     });
 
     it('has the correct id', () => {
-      expect(finder().attributes('id')).toBe(id);
-    });
-
-    it('binds the correctProps', () => {
-      expect(finder().props()).toMatchObject(entitySpecificProps);
+      expect(findVirtualRegistriesSetting().attributes('id')).toBe('virtual-registries-setting');
     });
 
     describe('success event', () => {
-      it('shows a success toast', () => {
-        finder().vm.$emit('success');
+      it('shows a success toast', async () => {
+        findVirtualRegistriesSetting().vm.$emit('success');
+        await nextTick();
+
         expect(show).toHaveBeenCalledWith('Settings saved successfully.');
       });
 
       it('hides the error alert', async () => {
-        finder().vm.$emit('error');
+        findVirtualRegistriesSetting().vm.$emit('error');
         await nextTick();
-
         expect(findAlert().exists()).toBe(true);
 
-        finder().vm.$emit('success');
+        findVirtualRegistriesSetting().vm.$emit('success');
         await nextTick();
-
         expect(findAlert().exists()).toBe(false);
       });
     });
 
     describe('error event', () => {
       beforeEach(() => {
-        finder().vm.$emit('error');
+        findVirtualRegistriesSetting().vm.$emit('error');
         return nextTick();
       });
 
@@ -152,7 +131,6 @@ describe('EE Group Settings App', () => {
         expect(findAlert().exists()).toBe(true);
 
         findAlert().vm.$emit('dismiss');
-
         await nextTick();
 
         expect(findAlert().exists()).toBe(false);
@@ -160,75 +138,19 @@ describe('EE Group Settings App', () => {
     });
   });
 
-  describe('when ability adminVirtualRegistriesSetting is false', () => {
-    beforeEach(() => {
-      mountComponent({
-        adminVirtualRegistryAbility: false,
-      });
-    });
-
-    it('does not render the virtual registries setting section', () => {
-      expect(findVirtualRegistriesSetting().exists()).toBe(false);
-    });
-
-    it('renders other settings section', () => {
-      expect(findPackageSettings().exists()).toBe(true);
-      expect(findPackageForwardingSettings().exists()).toBe(true);
-      expect(findDependencyProxySettings().exists()).toBe(true);
-    });
-  });
-
-  describe('when maven virtual registry feature flag is false', () => {
-    beforeEach(() => {
-      mountComponent({
-        mavenVirtualRegistryFeature: false,
-      });
-    });
-
-    it('does not render the virtual registries setting section', () => {
-      expect(findVirtualRegistriesSetting().exists()).toBe(false);
-    });
-
-    it('renders other settings section', () => {
-      expect(findPackageSettings().exists()).toBe(true);
-      expect(findPackageForwardingSettings().exists()).toBe(true);
-      expect(findDependencyProxySettings().exists()).toBe(true);
-    });
-  });
-
-  describe('when packages virtual registry license is false', () => {
-    beforeEach(() => {
-      mountComponent({
-        packagesVirtualRegistryLicense: false,
-      });
-    });
-
-    it('does not render the virtual registries setting section', () => {
-      expect(findVirtualRegistriesSetting().exists()).toBe(false);
-    });
-
-    it('renders other settings section', () => {
-      expect(findPackageSettings().exists()).toBe(true);
-      expect(findPackageForwardingSettings().exists()).toBe(true);
-      expect(findDependencyProxySettings().exists()).toBe(true);
-    });
-  });
-
-  describe('when ui for virtual registries feature flag is  false', () => {
+  describe.each`
+    description                                 | options
+    ${'ability adminVirtualRegistriesSetting'}  | ${{ adminVirtualRegistryAbility: false }}
+    ${'maven virtual registry feature flag'}    | ${{ mavenVirtualRegistryFeature: false }}
+    ${'packages virtual registry license'}      | ${{ packagesVirtualRegistryLicense: false }}
+    ${'ui for virtual registries feature flag'} | ${{ uiForVirtualRegistriesFeature: false }}
+  `('when $description is false', ({ options }) => {
     beforeEach(() => {
-      mountComponent({
-        uiForVirtualRegistriesFeature: false,
-      });
+      mountComponent({ ...options, mountFn: shallowMount });
     });
 
     it('does not render the virtual registries setting section', () => {
       expect(findVirtualRegistriesSetting().exists()).toBe(false);
     });
-
-    it('renders other settings section', () => {
-      expect(findPackageSettings().exists()).toBe(true);
-      expect(findPackageForwardingSettings().exists()).toBe(true);
-      expect(findDependencyProxySettings().exists()).toBe(true);
-    });
   });
 });
diff --git a/ee/spec/frontend/packages_and_registries/settings/group/components/virtual_registries_setting_spec.js b/ee/spec/frontend/packages_and_registries/settings/group/components/virtual_registries_setting_spec.js
index b141eca62cb010..2ab9b8d4d55389 100644
--- a/ee/spec/frontend/packages_and_registries/settings/group/components/virtual_registries_setting_spec.js
+++ b/ee/spec/frontend/packages_and_registries/settings/group/components/virtual_registries_setting_spec.js
@@ -1,20 +1,19 @@
 import { GlSprintf, GlLink } from '@gitlab/ui';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import VirtualRegistriesSetting from 'ee_component/packages_and_registries/settings/group/components/virtual_registries_setting.vue';
 
+import getGroupVirtualRegistriesSetting from 'ee_component/packages_and_registries/settings/group/graphql/queries/get_group_virtual_registries_setting.query.graphql';
 import updateVirtualRegistriesSetting from 'ee_component/packages_and_registries/settings/group/graphql/mutations/update_virtual_registries_setting.mutation.graphql';
-import getGroupPackagesSettingsQuery from '~/packages_and_registries/settings/group/graphql/queries/get_group_packages_settings.query.graphql';
 import SettingsSection from '~/vue_shared/components/settings/settings_section.vue';
 import { updateVirtualRegistriesSettingOptimisticResponse } from 'ee_component/packages_and_registries/settings/group/graphql/utils/optimistic_responses';
 
 import {
-  groupPackageSettingsMock,
+  groupVirtualRegistriesSettingMock,
   mutationErrorMock,
-  virtualRegistriesSetting as virtualRegistriesSettingMock,
   virtualRegistriesSettingMutationMock,
 } from '../mock_data';
 
@@ -24,6 +23,7 @@ jest.mock('ee_component/packages_and_registries/settings/group/graphql/utils/opt
 describe('VirtualRegistriesSetting', () => {
   let wrapper;
   let apolloProvider;
+  let queryResolver;
   let updateSettingsMutationResolver;
 
   const defaultProvide = {
@@ -32,22 +32,17 @@ describe('VirtualRegistriesSetting', () => {
 
   Vue.use(VueApollo);
 
-  const mountComponent = ({
-    provide = defaultProvide,
-    isLoading = false,
-    virtualRegistriesSetting = virtualRegistriesSettingMock(),
-  } = {}) => {
-    const requestHandlers = [[updateVirtualRegistriesSetting, updateSettingsMutationResolver]];
+  const mountComponent = ({ provide = defaultProvide } = {}) => {
+    const requestHandlers = [
+      [getGroupVirtualRegistriesSetting, queryResolver],
+      [updateVirtualRegistriesSetting, updateSettingsMutationResolver],
+    ];
 
     apolloProvider = createMockApollo(requestHandlers);
 
     wrapper = shallowMountExtended(VirtualRegistriesSetting, {
       apolloProvider,
       provide,
-      propsData: {
-        virtualRegistriesSetting,
-        isLoading,
-      },
       stubs: {
         GlSprintf,
       },
@@ -55,6 +50,7 @@ describe('VirtualRegistriesSetting', () => {
   };
 
   beforeEach(() => {
+    queryResolver = jest.fn().mockResolvedValue(groupVirtualRegistriesSettingMock);
     updateSettingsMutationResolver = jest
       .fn()
       .mockResolvedValue(virtualRegistriesSettingMutationMock());
@@ -65,24 +61,31 @@ describe('VirtualRegistriesSetting', () => {
     wrapper.findByTestId('virtual-registries-setting-toggle');
   const findTestingAgreementLink = () => wrapper.findComponent(GlLink);
 
+  const waitForQueryAndRender = async () => {
+    await waitForPromises();
+    await nextTick();
+  };
+
   const fillApolloCache = () => {
     apolloProvider.defaultClient.cache.writeQuery({
-      query: getGroupPackagesSettingsQuery,
+      query: getGroupVirtualRegistriesSetting,
       variables: {
         fullPath: defaultProvide.groupPath,
       },
-      ...groupPackageSettingsMock,
+      ...groupVirtualRegistriesSettingMock,
     });
   };
 
-  it('renders a settings section', () => {
+  it('renders a settings section', async () => {
     mountComponent();
+    await waitForQueryAndRender();
 
     expect(findSettingsSection().exists()).toBe(true);
   });
 
-  it('has the correct header text and description', () => {
+  it('has the correct header text and description', async () => {
     mountComponent();
+    await waitForQueryAndRender();
 
     expect(findSettingsSection().props('heading')).toContain('Virtual Registry');
     expect(findSettingsSection().props('description')).toContain(
@@ -91,8 +94,9 @@ describe('VirtualRegistriesSetting', () => {
   });
 
   describe('toggle', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       mountComponent();
+      await waitForQueryAndRender();
     });
 
     it('exists', () => {
@@ -122,6 +126,7 @@ describe('VirtualRegistriesSetting', () => {
     describe('success state', () => {
       it('emits a success event', async () => {
         mountComponent();
+        await waitForQueryAndRender();
 
         fillApolloCache();
         toggleFinder().vm.$emit('change', false);
@@ -133,6 +138,7 @@ describe('VirtualRegistriesSetting', () => {
 
       it('calls mutation with correct variables including fullPath', async () => {
         mountComponent();
+        await waitForQueryAndRender();
 
         fillApolloCache();
         toggleFinder().vm.$emit('change', false);
@@ -147,8 +153,9 @@ describe('VirtualRegistriesSetting', () => {
         });
       });
 
-      it('has an optimistic response', () => {
+      it('has an optimistic response', async () => {
         mountComponent();
+        await waitForQueryAndRender();
 
         fillApolloCache();
 
@@ -169,6 +176,7 @@ describe('VirtualRegistriesSetting', () => {
         updateSettingsMutationResolver = jest.fn().mockResolvedValue(mutationErrorMock);
 
         mountComponent();
+        await waitForQueryAndRender();
 
         fillApolloCache();
 
@@ -186,6 +194,7 @@ describe('VirtualRegistriesSetting', () => {
       `('mutation payload with $type error', async ({ mutationResolverMock }) => {
         updateSettingsMutationResolver = mutationResolverMock;
         mountComponent();
+        await waitForQueryAndRender();
 
         fillApolloCache();
         toggleFinder().vm.$emit('change', false);
@@ -198,11 +207,13 @@ describe('VirtualRegistriesSetting', () => {
   });
 
   describe('when isLoading is true', () => {
-    beforeEach(() => {
-      mountComponent({ isLoading: true });
-    });
+    it('disables virtual registry toggle', async () => {
+      // Mock loading state
+      queryResolver = jest.fn().mockReturnValue(new Promise(() => {})); // Never resolves
+
+      mountComponent();
+      await nextTick();
 
-    it('disables virtual registry toggle', () => {
       expect(findEnableVirtualRegistriesSettingToggle().props('disabled')).toBe(true);
     });
   });
diff --git a/ee/spec/frontend/packages_and_registries/settings/group/graphql/utils/cache_update_spec.js b/ee/spec/frontend/packages_and_registries/settings/group/graphql/utils/cache_update_spec.js
index 4463cb455283da..1382c495b9d82e 100644
--- a/ee/spec/frontend/packages_and_registries/settings/group/graphql/utils/cache_update_spec.js
+++ b/ee/spec/frontend/packages_and_registries/settings/group/graphql/utils/cache_update_spec.js
@@ -1,7 +1,7 @@
-import { updateGroupPackageSettings } from 'ee_component/packages_and_registries/settings/group/graphql/utils/cache_update';
-import getGroupPackagesSettingsQuery from '~/packages_and_registries/settings/group/graphql/queries/get_group_packages_settings.query.graphql';
+import { updateGroupVirtualRegistriesSetting } from 'ee_component/packages_and_registries/settings/group/graphql/utils/cache_update';
+import getGroupVirtualRegistriesSetting from 'ee_component/packages_and_registries/settings/group/graphql/queries/get_group_virtual_registries_setting.query.graphql';
 
-describe('updateGroupPackageSettings', () => {
+describe('updateGroupVirtualRegistriesSetting', () => {
   let client;
 
   const cacheMock = {
@@ -13,7 +13,7 @@ describe('updateGroupPackageSettings', () => {
   };
 
   const queryAndVariables = {
-    query: getGroupPackagesSettingsQuery,
+    query: getGroupVirtualRegistriesSetting,
     variables: { fullPath: 'foo' },
   };
 
@@ -36,12 +36,12 @@ describe('updateGroupPackageSettings', () => {
 
   describe('when updating the cache', () => {
     it('reads the cache with the correct query', () => {
-      updateGroupPackageSettings('foo')(client, payload);
+      updateGroupVirtualRegistriesSetting('foo')(client, payload);
       expect(client.readQuery).toHaveBeenCalledWith(queryAndVariables);
     });
 
     it('writes the correct result to the cache', () => {
-      updateGroupPackageSettings('foo')(client, payload);
+      updateGroupVirtualRegistriesSetting('foo')(client, payload);
       expect(client.writeQuery).toHaveBeenCalledWith({
         ...queryAndVariables,
         data: {
@@ -62,7 +62,7 @@ describe('updateGroupPackageSettings', () => {
     });
 
     it('does not write to the store', () => {
-      updateGroupPackageSettings('foo')(client, payload);
+      updateGroupVirtualRegistriesSetting('foo')(client, payload);
       expect(client.writeQuery).not.toHaveBeenCalled();
     });
   });
@@ -74,7 +74,7 @@ describe('updateGroupPackageSettings', () => {
     });
 
     it('does not write to the store', () => {
-      updateGroupPackageSettings('foo')(client, payload);
+      updateGroupVirtualRegistriesSetting('foo')(client, payload);
       expect(client.writeQuery).not.toHaveBeenCalled();
     });
   });
diff --git a/ee/spec/frontend/packages_and_registries/settings/group/graphql/utils/optimistic_responses_spec.js b/ee/spec/frontend/packages_and_registries/settings/group/graphql/utils/optimistic_responses_spec.js
index a1f179399cdcd6..76533369f1a056 100644
--- a/ee/spec/frontend/packages_and_registries/settings/group/graphql/utils/optimistic_responses_spec.js
+++ b/ee/spec/frontend/packages_and_registries/settings/group/graphql/utils/optimistic_responses_spec.js
@@ -2,7 +2,8 @@ import { updateVirtualRegistriesSettingOptimisticResponse } from 'ee_component/p
 
 describe('updateVirtualRegistriesSettingOptimisticResponse', () => {
   it('returns the correct structure', () => {
-    expect(updateVirtualRegistriesSettingOptimisticResponse({ foo: 'bar' })).toMatchInlineSnapshot(`
+    expect(updateVirtualRegistriesSettingOptimisticResponse({ enabled: true }))
+      .toMatchInlineSnapshot(`
 {
   "__typename": "Mutation",
   "updateVirtualRegistriesSetting": {
@@ -10,7 +11,7 @@ describe('updateVirtualRegistriesSettingOptimisticResponse', () => {
     "errors": [],
     "virtualRegistriesSetting": {
       "__typename": "VirtualRegistriesSetting",
-      "foo": "bar",
+      "enabled": true,
     },
   },
 }
diff --git a/ee/spec/frontend/packages_and_registries/settings/group/mock_data.js b/ee/spec/frontend/packages_and_registries/settings/group/mock_data.js
index 72129a8b7f7d65..68fc548998bf16 100644
--- a/ee/spec/frontend/packages_and_registries/settings/group/mock_data.js
+++ b/ee/spec/frontend/packages_and_registries/settings/group/mock_data.js
@@ -1,52 +1,18 @@
-import {
-  packageForwardingSettings,
-  packageSettings,
-  dependencyProxySettings,
-  dependencyProxyImageTtlPolicy,
-  groupPackageSettingsMutationMock,
-  groupPackageForwardSettingsMutationMock,
-  dependencyProxySettingMutationMock,
-  dependencyProxyUpdateTllPolicyMutationMock,
-  groupPackageSettingsMutationErrorMock,
-  mutationErrorMock,
-  npmProps,
-  pypiProps,
-  mavenProps,
-} from 'jest/packages_and_registries/settings/group/mock_data';
+import { mutationErrorMock } from 'jest/packages_and_registries/settings/group/mock_data';
 
-export {
-  packageForwardingSettings,
-  packageSettings,
-  dependencyProxySettings,
-  dependencyProxyImageTtlPolicy,
-  groupPackageSettingsMutationMock,
-  groupPackageForwardSettingsMutationMock,
-  dependencyProxySettingMutationMock,
-  dependencyProxyUpdateTllPolicyMutationMock,
-  groupPackageSettingsMutationErrorMock,
-  mutationErrorMock,
-  npmProps,
-  pypiProps,
-  mavenProps,
-};
+export { mutationErrorMock };
 
 export const virtualRegistriesSetting = (extend) => ({
   enabled: true,
   ...extend,
 });
 
-export const groupPackageSettingsMock = {
+export const groupVirtualRegistriesSettingMock = {
   data: {
     group: {
       id: '1',
       fullPath: 'foo_group_path',
-      dependencyProxySetting: dependencyProxySettings(),
-      dependencyProxyImageTtlPolicy: dependencyProxyImageTtlPolicy(),
       virtualRegistriesSetting: virtualRegistriesSetting(),
-      packageSettings: {
-        ...packageSettings,
-        __typename: 'PackageSettings',
-      },
       __typename: 'Group',
     },
   },
diff --git a/spec/frontend/packages_and_registries/settings/group/components/dependency_proxy_settings_spec.js b/spec/frontend/packages_and_registries/settings/group/components/dependency_proxy_settings_spec.js
index 04ec6bc25e36e9..541a3da81c0a66 100644
--- a/spec/frontend/packages_and_registries/settings/group/components/dependency_proxy_settings_spec.js
+++ b/spec/frontend/packages_and_registries/settings/group/components/dependency_proxy_settings_spec.js
@@ -28,7 +28,7 @@ import {
   groupPackageSettingsMock,
   mutationErrorMock,
   dependencyProxyUpdateTllPolicyMutationMock,
-} from 'ee_else_ce_jest/packages_and_registries/settings/group/mock_data';
+} from '../mock_data';
 
 jest.mock('~/alert');
 jest.mock('~/packages_and_registries/settings/group/graphql/utils/optimistic_responses');
diff --git a/spec/frontend/packages_and_registries/settings/group/components/docker_hub_authentication_section_spec.js b/spec/frontend/packages_and_registries/settings/group/components/docker_hub_authentication_section_spec.js
index 92486074e1a22f..d192447e0374ed 100644
--- a/spec/frontend/packages_and_registries/settings/group/components/docker_hub_authentication_section_spec.js
+++ b/spec/frontend/packages_and_registries/settings/group/components/docker_hub_authentication_section_spec.js
@@ -13,7 +13,7 @@ import updateDockerHubCredentialsMutation from '~/packages_and_registries/settin
 import {
   dependencyProxySettings as dependencyProxySettingsMock,
   dependencyProxySettingMutationMock,
-} from 'ee_else_ce_jest/packages_and_registries/settings/group/mock_data';
+} from '../mock_data';
 
 describe('DockerHubAuthenticationSection', () => {
   let wrapper;
diff --git a/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js b/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js
index 64694ba05e9a5b..55926883a5a5f2 100644
--- a/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js
+++ b/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js
@@ -17,7 +17,7 @@ import {
   packageSettings,
   dependencyProxySettings,
   dependencyProxyImageTtlPolicy,
-} from 'ee_else_ce_jest/packages_and_registries/settings/group/mock_data';
+} from '../mock_data';
 
 jest.mock('~/alert');
 
diff --git a/spec/frontend/packages_and_registries/settings/group/components/package_settings_spec.js b/spec/frontend/packages_and_registries/settings/group/components/package_settings_spec.js
index 17164fe79e7de4..bba0408a66e34f 100644
--- a/spec/frontend/packages_and_registries/settings/group/components/package_settings_spec.js
+++ b/spec/frontend/packages_and_registries/settings/group/components/package_settings_spec.js
@@ -21,7 +21,7 @@ import {
   groupPackageSettingsMock,
   groupPackageSettingsMutationMock,
   groupPackageSettingsMutationErrorMock,
-} from 'ee_else_ce_jest/packages_and_registries/settings/group/mock_data';
+} from '../mock_data';
 
 jest.mock('~/alert');
 jest.mock('~/packages_and_registries/settings/group/graphql/utils/optimistic_responses');
diff --git a/spec/frontend/packages_and_registries/settings/group/components/packages_forwarding_settings_spec.js b/spec/frontend/packages_and_registries/settings/group/components/packages_forwarding_settings_spec.js
index 0f4d7c8ea9426d..a6c407e60c2a6e 100644
--- a/spec/frontend/packages_and_registries/settings/group/components/packages_forwarding_settings_spec.js
+++ b/spec/frontend/packages_and_registries/settings/group/components/packages_forwarding_settings_spec.js
@@ -23,7 +23,7 @@ import {
   npmProps,
   pypiProps,
   mavenProps,
-} from 'ee_else_ce_jest/packages_and_registries/settings/group/mock_data';
+} from '../mock_data';
 
 jest.mock('~/alert');
 jest.mock('~/packages_and_registries/settings/group/graphql/utils/optimistic_responses');
-- 
GitLab


From 947e4468431e7b4c50fa9334146bd8ee5bf76a07 Mon Sep 17 00:00:00 2001
From: Fiona McCawley <fmccawley@gitlab.com>
Date: Tue, 21 Oct 2025 14:29:41 +1100
Subject: [PATCH 2/3] Move query back to parent component and pass as props

---
 .../group_packages_settings.fragment.graphql  | 11 ++++
 .../get_group_packages_settings.query.graphql | 10 +---
 .../group/components/group_settings_app.vue   | 25 +++++++++
 .../components/virtual_registries_setting.vue | 29 +++-------
 .../group_packages_settings.fragment.graphql  | 14 +++++
 ...p_virtual_registries_setting.query.graphql |  8 ---
 .../group/graphql/utils/cache_update.js       |  4 +-
 .../components/group_settings_app_spec.js     | 12 +---
 .../virtual_registries_setting_spec.js        | 55 ++++++++-----------
 .../group/graphql/utils/cache_update_spec.js  |  4 +-
 .../settings/group/mock_data.js               | 10 ++--
 .../settings/group/mock_data.js               |  1 +
 12 files changed, 97 insertions(+), 86 deletions(-)
 create mode 100644 app/assets/javascripts/packages_and_registries/settings/group/graphql/fragments/group_packages_settings.fragment.graphql
 create mode 100644 ee/app/assets/javascripts/packages_and_registries/settings/group/graphql/fragments/group_packages_settings.fragment.graphql
 delete mode 100644 ee/app/assets/javascripts/packages_and_registries/settings/group/graphql/queries/get_group_virtual_registries_setting.query.graphql

diff --git a/app/assets/javascripts/packages_and_registries/settings/group/graphql/fragments/group_packages_settings.fragment.graphql b/app/assets/javascripts/packages_and_registries/settings/group/graphql/fragments/group_packages_settings.fragment.graphql
new file mode 100644
index 00000000000000..9ae0d385cd2e4e
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/settings/group/graphql/fragments/group_packages_settings.fragment.graphql
@@ -0,0 +1,11 @@
+fragment GroupPackagesSettings on Group {
+  id
+  dependencyProxySetting {
+    enabled
+    identity
+  }
+  dependencyProxyImageTtlPolicy {
+    ttl
+    enabled
+  }
+}
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 9706d53119d868..8e94e27328f798 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
@@ -1,16 +1,10 @@
 #import "~/packages_and_registries/settings/group/graphql/fragments/package_settings_fields.fragment.graphql"
+#import "ee_else_ce/packages_and_registries/settings/group/graphql/fragments/group_packages_settings.fragment.graphql"
 
 query getGroupPackagesSettings($fullPath: ID!) {
   group(fullPath: $fullPath) {
     id
-    dependencyProxySetting {
-      enabled
-      identity
-    }
-    dependencyProxyImageTtlPolicy {
-      ttl
-      enabled
-    }
+    ...GroupPackagesSettings
     packageSettings {
       ...PackageSettingsFields
     }
diff --git a/ee/app/assets/javascripts/packages_and_registries/settings/group/components/group_settings_app.vue b/ee/app/assets/javascripts/packages_and_registries/settings/group/components/group_settings_app.vue
index 3ce991e94feba7..b654bf30d13358 100644
--- a/ee/app/assets/javascripts/packages_and_registries/settings/group/components/group_settings_app.vue
+++ b/ee/app/assets/javascripts/packages_and_registries/settings/group/components/group_settings_app.vue
@@ -4,6 +4,7 @@ import VirtualRegistriesSetting from 'ee_component/packages_and_registries/setti
 import glAbilitiesMixin from '~/vue_shared/mixins/gl_abilities_mixin';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import glLicensedFeaturesMixin from '~/vue_shared/mixins/gl_licensed_features_mixin';
+import getGroupPackagesSettingsQuery from '~/packages_and_registries/settings/group/graphql/queries/get_group_packages_settings.query.graphql';
 
 export default {
   name: 'GroupSettingsAppEE',
@@ -12,6 +13,22 @@ export default {
     VirtualRegistriesSetting,
   },
   mixins: [glAbilitiesMixin(), glFeatureFlagMixin(), glLicensedFeaturesMixin()],
+  inject: ['groupPath'],
+  apollo: {
+    group: {
+      query: getGroupPackagesSettingsQuery,
+      variables() {
+        return {
+          fullPath: this.groupPath,
+        };
+      },
+    },
+  },
+  data() {
+    return {
+      group: {},
+    };
+  },
   computed: {
     shouldRenderVirtualRegistriesSetting() {
       return (
@@ -21,6 +38,12 @@ export default {
         this.glAbilities.adminVirtualRegistry
       );
     },
+    virtualRegistriesSetting() {
+      return this.group?.virtualRegistriesSetting || {};
+    },
+    isLoading() {
+      return this.$apollo.queries.group.loading;
+    },
   },
   methods: {
     handleSuccess() {
@@ -39,6 +62,8 @@ export default {
       <virtual-registries-setting
         v-if="shouldRenderVirtualRegistriesSetting"
         id="virtual-registries-setting"
+        :virtual-registries-setting="virtualRegistriesSetting"
+        :is-loading="isLoading"
         @success="handleSuccess"
         @error="handleError"
       />
diff --git a/ee/app/assets/javascripts/packages_and_registries/settings/group/components/virtual_registries_setting.vue b/ee/app/assets/javascripts/packages_and_registries/settings/group/components/virtual_registries_setting.vue
index 9cfcfef559c272..1735aa884161c3 100644
--- a/ee/app/assets/javascripts/packages_and_registries/settings/group/components/virtual_registries_setting.vue
+++ b/ee/app/assets/javascripts/packages_and_registries/settings/group/components/virtual_registries_setting.vue
@@ -1,7 +1,6 @@
 <script>
 import { GlToggle, GlSprintf, GlLink, GlExperimentBadge } from '@gitlab/ui';
 import SettingsSection from '~/vue_shared/components/settings/settings_section.vue';
-import getGroupVirtualRegistriesSetting from 'ee_component/packages_and_registries/settings/group/graphql/queries/get_group_virtual_registries_setting.query.graphql';
 import updateVirtualRegistriesSetting from 'ee_component/packages_and_registries/settings/group/graphql/mutations/update_virtual_registries_setting.mutation.graphql';
 import { updateVirtualRegistriesSettingOptimisticResponse } from 'ee_component/packages_and_registries/settings/group/graphql/utils/optimistic_responses';
 import { updateGroupVirtualRegistriesSetting } from 'ee_component/packages_and_registries/settings/group/graphql/utils/cache_update';
@@ -16,28 +15,18 @@ export default {
     SettingsSection,
   },
   inject: ['groupPath'],
-  apollo: {
-    group: {
-      query: getGroupVirtualRegistriesSetting,
-      variables() {
-        return {
-          fullPath: this.groupPath,
-        };
-      },
+  props: {
+    virtualRegistriesSetting: {
+      type: Object,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-  },
-  data() {
-    return {
-      group: {},
-    };
   },
   computed: {
-    virtualRegistriesSetting() {
-      return this.group?.virtualRegistriesSetting || {};
-    },
-    isLoading() {
-      return this.$apollo.queries.group.loading;
-    },
     enabled: {
       get() {
         return this.virtualRegistriesSetting.enabled;
diff --git a/ee/app/assets/javascripts/packages_and_registries/settings/group/graphql/fragments/group_packages_settings.fragment.graphql b/ee/app/assets/javascripts/packages_and_registries/settings/group/graphql/fragments/group_packages_settings.fragment.graphql
new file mode 100644
index 00000000000000..5e3014f91ba68e
--- /dev/null
+++ b/ee/app/assets/javascripts/packages_and_registries/settings/group/graphql/fragments/group_packages_settings.fragment.graphql
@@ -0,0 +1,14 @@
+fragment GroupPackagesSettings on Group {
+  id
+  dependencyProxySetting {
+    enabled
+    identity
+  }
+  dependencyProxyImageTtlPolicy {
+    ttl
+    enabled
+  }
+  virtualRegistriesSetting {
+    enabled
+  }
+}
diff --git a/ee/app/assets/javascripts/packages_and_registries/settings/group/graphql/queries/get_group_virtual_registries_setting.query.graphql b/ee/app/assets/javascripts/packages_and_registries/settings/group/graphql/queries/get_group_virtual_registries_setting.query.graphql
deleted file mode 100644
index 411eff8c2d1976..00000000000000
--- a/ee/app/assets/javascripts/packages_and_registries/settings/group/graphql/queries/get_group_virtual_registries_setting.query.graphql
+++ /dev/null
@@ -1,8 +0,0 @@
-query getGroupVirtualRegistriesSetting($fullPath: ID!) {
-  group(fullPath: $fullPath) {
-    id
-    virtualRegistriesSetting {
-      enabled
-    }
-  }
-}
diff --git a/ee/app/assets/javascripts/packages_and_registries/settings/group/graphql/utils/cache_update.js b/ee/app/assets/javascripts/packages_and_registries/settings/group/graphql/utils/cache_update.js
index 37afef774431a4..4415d634ebd5ad 100644
--- a/ee/app/assets/javascripts/packages_and_registries/settings/group/graphql/utils/cache_update.js
+++ b/ee/app/assets/javascripts/packages_and_registries/settings/group/graphql/utils/cache_update.js
@@ -1,11 +1,11 @@
 import { produce } from 'immer';
-import getGroupVirtualRegistriesSetting from 'ee_component/packages_and_registries/settings/group/graphql/queries/get_group_virtual_registries_setting.query.graphql';
+import getGroupPackagesSettingsQuery from '~/packages_and_registries/settings/group/graphql/queries/get_group_packages_settings.query.graphql';
 
 export const updateGroupVirtualRegistriesSetting =
   (fullPath) =>
   (client, { data: updatedData }) => {
     const queryAndParams = {
-      query: getGroupVirtualRegistriesSetting,
+      query: getGroupPackagesSettingsQuery,
       variables: { fullPath },
     };
 
diff --git a/ee/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js b/ee/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js
index bac8c641f426fc..cf8ac859475cc6 100644
--- a/ee/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js
+++ b/ee/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js
@@ -9,10 +9,8 @@ import VirtualRegistriesSetting from 'ee_component/packages_and_registries/setti
 import GroupSettingsApp from 'ee_component/packages_and_registries/settings/group/components/group_settings_app.vue';
 import CeGroupSettingsApp from '~/packages_and_registries/settings/group/components/group_settings_app.vue';
 
-import getGroupVirtualRegistriesSetting from 'ee_component/packages_and_registries/settings/group/graphql/queries/get_group_virtual_registries_setting.query.graphql';
 import getGroupPackagesSettingsQuery from '~/packages_and_registries/settings/group/graphql/queries/get_group_packages_settings.query.graphql';
 
-import { groupPackageSettingsMock } from 'jest/packages_and_registries/settings/group/mock_data';
 import { groupVirtualRegistriesSettingMock } from '../mock_data';
 
 jest.mock('~/alert');
@@ -24,13 +22,12 @@ describe('EE Group Settings App', () => {
 
   const defaultProvide = {
     groupPath: 'foo_group_path',
-    groupDependencyProxyPath: 'foo_group_path/-/dependency_proxy',
+    groupDependencyProxyPath: 'group_dependency_proxy_path',
     glAbilities: {},
   };
 
   const mountComponent = ({
-    eeResolver = jest.fn().mockResolvedValue(groupVirtualRegistriesSettingMock),
-    ceResolver = jest.fn().mockResolvedValue(groupPackageSettingsMock),
+    ceResolver = jest.fn().mockResolvedValue(groupVirtualRegistriesSettingMock),
     provide = defaultProvide,
     adminVirtualRegistryAbility = true,
     mavenVirtualRegistryFeature = true,
@@ -40,10 +37,7 @@ describe('EE Group Settings App', () => {
   } = {}) => {
     Vue.use(VueApollo);
 
-    const requestHandlers = [
-      [getGroupVirtualRegistriesSetting, eeResolver],
-      [getGroupPackagesSettingsQuery, ceResolver],
-    ];
+    const requestHandlers = [[getGroupPackagesSettingsQuery, ceResolver]];
 
     apolloProvider = createMockApollo(requestHandlers);
 
diff --git a/ee/spec/frontend/packages_and_registries/settings/group/components/virtual_registries_setting_spec.js b/ee/spec/frontend/packages_and_registries/settings/group/components/virtual_registries_setting_spec.js
index 2ab9b8d4d55389..9f802a86133309 100644
--- a/ee/spec/frontend/packages_and_registries/settings/group/components/virtual_registries_setting_spec.js
+++ b/ee/spec/frontend/packages_and_registries/settings/group/components/virtual_registries_setting_spec.js
@@ -1,19 +1,20 @@
 import { GlSprintf, GlLink } from '@gitlab/ui';
-import Vue, { nextTick } from 'vue';
+import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import VirtualRegistriesSetting from 'ee_component/packages_and_registries/settings/group/components/virtual_registries_setting.vue';
 
-import getGroupVirtualRegistriesSetting from 'ee_component/packages_and_registries/settings/group/graphql/queries/get_group_virtual_registries_setting.query.graphql';
 import updateVirtualRegistriesSetting from 'ee_component/packages_and_registries/settings/group/graphql/mutations/update_virtual_registries_setting.mutation.graphql';
+import getGroupPackagesSettingsQuery from '~/packages_and_registries/settings/group/graphql/queries/get_group_packages_settings.query.graphql';
 import SettingsSection from '~/vue_shared/components/settings/settings_section.vue';
 import { updateVirtualRegistriesSettingOptimisticResponse } from 'ee_component/packages_and_registries/settings/group/graphql/utils/optimistic_responses';
 
 import {
   groupVirtualRegistriesSettingMock,
   mutationErrorMock,
+  virtualRegistriesSetting as virtualRegistriesSettingMock,
   virtualRegistriesSettingMutationMock,
 } from '../mock_data';
 
@@ -23,7 +24,6 @@ jest.mock('ee_component/packages_and_registries/settings/group/graphql/utils/opt
 describe('VirtualRegistriesSetting', () => {
   let wrapper;
   let apolloProvider;
-  let queryResolver;
   let updateSettingsMutationResolver;
 
   const defaultProvide = {
@@ -32,17 +32,22 @@ describe('VirtualRegistriesSetting', () => {
 
   Vue.use(VueApollo);
 
-  const mountComponent = ({ provide = defaultProvide } = {}) => {
-    const requestHandlers = [
-      [getGroupVirtualRegistriesSetting, queryResolver],
-      [updateVirtualRegistriesSetting, updateSettingsMutationResolver],
-    ];
+  const mountComponent = ({
+    provide = defaultProvide,
+    isLoading = false,
+    virtualRegistriesSetting = virtualRegistriesSettingMock(),
+  } = {}) => {
+    const requestHandlers = [[updateVirtualRegistriesSetting, updateSettingsMutationResolver]];
 
     apolloProvider = createMockApollo(requestHandlers);
 
     wrapper = shallowMountExtended(VirtualRegistriesSetting, {
       apolloProvider,
       provide,
+      propsData: {
+        virtualRegistriesSetting,
+        isLoading,
+      },
       stubs: {
         GlSprintf,
       },
@@ -50,7 +55,6 @@ describe('VirtualRegistriesSetting', () => {
   };
 
   beforeEach(() => {
-    queryResolver = jest.fn().mockResolvedValue(groupVirtualRegistriesSettingMock);
     updateSettingsMutationResolver = jest
       .fn()
       .mockResolvedValue(virtualRegistriesSettingMutationMock());
@@ -61,14 +65,9 @@ describe('VirtualRegistriesSetting', () => {
     wrapper.findByTestId('virtual-registries-setting-toggle');
   const findTestingAgreementLink = () => wrapper.findComponent(GlLink);
 
-  const waitForQueryAndRender = async () => {
-    await waitForPromises();
-    await nextTick();
-  };
-
   const fillApolloCache = () => {
     apolloProvider.defaultClient.cache.writeQuery({
-      query: getGroupVirtualRegistriesSetting,
+      query: getGroupPackagesSettingsQuery,
       variables: {
         fullPath: defaultProvide.groupPath,
       },
@@ -76,16 +75,14 @@ describe('VirtualRegistriesSetting', () => {
     });
   };
 
-  it('renders a settings section', async () => {
+  it('renders a settings section', () => {
     mountComponent();
-    await waitForQueryAndRender();
 
     expect(findSettingsSection().exists()).toBe(true);
   });
 
-  it('has the correct header text and description', async () => {
+  it('has the correct header text and description', () => {
     mountComponent();
-    await waitForQueryAndRender();
 
     expect(findSettingsSection().props('heading')).toContain('Virtual Registry');
     expect(findSettingsSection().props('description')).toContain(
@@ -94,9 +91,8 @@ describe('VirtualRegistriesSetting', () => {
   });
 
   describe('toggle', () => {
-    beforeEach(async () => {
+    beforeEach(() => {
       mountComponent();
-      await waitForQueryAndRender();
     });
 
     it('exists', () => {
@@ -126,7 +122,6 @@ describe('VirtualRegistriesSetting', () => {
     describe('success state', () => {
       it('emits a success event', async () => {
         mountComponent();
-        await waitForQueryAndRender();
 
         fillApolloCache();
         toggleFinder().vm.$emit('change', false);
@@ -138,7 +133,6 @@ describe('VirtualRegistriesSetting', () => {
 
       it('calls mutation with correct variables including fullPath', async () => {
         mountComponent();
-        await waitForQueryAndRender();
 
         fillApolloCache();
         toggleFinder().vm.$emit('change', false);
@@ -153,9 +147,8 @@ describe('VirtualRegistriesSetting', () => {
         });
       });
 
-      it('has an optimistic response', async () => {
+      it('has an optimistic response', () => {
         mountComponent();
-        await waitForQueryAndRender();
 
         fillApolloCache();
 
@@ -176,7 +169,6 @@ describe('VirtualRegistriesSetting', () => {
         updateSettingsMutationResolver = jest.fn().mockResolvedValue(mutationErrorMock);
 
         mountComponent();
-        await waitForQueryAndRender();
 
         fillApolloCache();
 
@@ -194,7 +186,6 @@ describe('VirtualRegistriesSetting', () => {
       `('mutation payload with $type error', async ({ mutationResolverMock }) => {
         updateSettingsMutationResolver = mutationResolverMock;
         mountComponent();
-        await waitForQueryAndRender();
 
         fillApolloCache();
         toggleFinder().vm.$emit('change', false);
@@ -207,13 +198,11 @@ describe('VirtualRegistriesSetting', () => {
   });
 
   describe('when isLoading is true', () => {
-    it('disables virtual registry toggle', async () => {
-      // Mock loading state
-      queryResolver = jest.fn().mockReturnValue(new Promise(() => {})); // Never resolves
-
-      mountComponent();
-      await nextTick();
+    beforeEach(() => {
+      mountComponent({ isLoading: true });
+    });
 
+    it('disables virtual registry toggle', () => {
       expect(findEnableVirtualRegistriesSettingToggle().props('disabled')).toBe(true);
     });
   });
diff --git a/ee/spec/frontend/packages_and_registries/settings/group/graphql/utils/cache_update_spec.js b/ee/spec/frontend/packages_and_registries/settings/group/graphql/utils/cache_update_spec.js
index 1382c495b9d82e..9ec1a907c1af51 100644
--- a/ee/spec/frontend/packages_and_registries/settings/group/graphql/utils/cache_update_spec.js
+++ b/ee/spec/frontend/packages_and_registries/settings/group/graphql/utils/cache_update_spec.js
@@ -1,5 +1,5 @@
 import { updateGroupVirtualRegistriesSetting } from 'ee_component/packages_and_registries/settings/group/graphql/utils/cache_update';
-import getGroupVirtualRegistriesSetting from 'ee_component/packages_and_registries/settings/group/graphql/queries/get_group_virtual_registries_setting.query.graphql';
+import getGroupPackagesSettingsQuery from '~/packages_and_registries/settings/group/graphql/queries/get_group_packages_settings.query.graphql';
 
 describe('updateGroupVirtualRegistriesSetting', () => {
   let client;
@@ -13,7 +13,7 @@ describe('updateGroupVirtualRegistriesSetting', () => {
   };
 
   const queryAndVariables = {
-    query: getGroupVirtualRegistriesSetting,
+    query: getGroupPackagesSettingsQuery,
     variables: { fullPath: 'foo' },
   };
 
diff --git a/ee/spec/frontend/packages_and_registries/settings/group/mock_data.js b/ee/spec/frontend/packages_and_registries/settings/group/mock_data.js
index 68fc548998bf16..0086cd3e2ca8cd 100644
--- a/ee/spec/frontend/packages_and_registries/settings/group/mock_data.js
+++ b/ee/spec/frontend/packages_and_registries/settings/group/mock_data.js
@@ -1,6 +1,9 @@
-import { mutationErrorMock } from 'jest/packages_and_registries/settings/group/mock_data';
+import {
+  mutationErrorMock,
+  groupPackageSettingsMock,
+} from 'jest/packages_and_registries/settings/group/mock_data';
 
-export { mutationErrorMock };
+export { mutationErrorMock, groupPackageSettingsMock };
 
 export const virtualRegistriesSetting = (extend) => ({
   enabled: true,
@@ -10,8 +13,7 @@ export const virtualRegistriesSetting = (extend) => ({
 export const groupVirtualRegistriesSettingMock = {
   data: {
     group: {
-      id: '1',
-      fullPath: 'foo_group_path',
+      ...groupPackageSettingsMock.data.group,
       virtualRegistriesSetting: virtualRegistriesSetting(),
       __typename: 'Group',
     },
diff --git a/spec/frontend/packages_and_registries/settings/group/mock_data.js b/spec/frontend/packages_and_registries/settings/group/mock_data.js
index b5a0215781d2fc..99f178e3b59d85 100644
--- a/spec/frontend/packages_and_registries/settings/group/mock_data.js
+++ b/spec/frontend/packages_and_registries/settings/group/mock_data.js
@@ -52,6 +52,7 @@ export const groupPackageSettingsMock = {
         ...packageSettings,
         __typename: 'PackageSettings',
       },
+      virtualRegistriesSetting: null,
     },
   },
 };
-- 
GitLab


From f28175e5c6cb7f4462119db9ea83d47bd0fea88f Mon Sep 17 00:00:00 2001
From: Fiona McCawley <fmccawley@gitlab.com>
Date: Wed, 22 Oct 2025 14:57:21 +1100
Subject: [PATCH 3/3] Fix capitalization

---
 .../settings/group/components/virtual_registries_setting.vue  | 4 ++--
 .../settings/group/components/group_settings_app_spec.js      | 4 ++--
 .../group/components/virtual_registries_setting_spec.js       | 2 +-
 locale/gitlab.pot                                             | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/ee/app/assets/javascripts/packages_and_registries/settings/group/components/virtual_registries_setting.vue b/ee/app/assets/javascripts/packages_and_registries/settings/group/components/virtual_registries_setting.vue
index 1735aa884161c3..f3a1e68c1d2654 100644
--- a/ee/app/assets/javascripts/packages_and_registries/settings/group/components/virtual_registries_setting.vue
+++ b/ee/app/assets/javascripts/packages_and_registries/settings/group/components/virtual_registries_setting.vue
@@ -76,7 +76,7 @@ export default {
 
 <template>
   <settings-section
-    :heading="s__('VirtualRegistry|Virtual Registry')"
+    :heading="s__('VirtualRegistry|Virtual registry')"
     :description="
       s__(
         'VirtualRegistry|Manage packages across multiple sources and streamline development workflows using virtual registries.',
@@ -90,7 +90,7 @@ export default {
     >
       <template #label>
         <span class="gl-flex gl-items-center">
-          {{ s__('VirtualRegistry|Enable Virtual Registry') }}
+          {{ s__('VirtualRegistry|Enable virtual registry') }}
           <gl-experiment-badge type="beta" class="gl-ml-2" />
         </span>
       </template>
diff --git a/ee/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js b/ee/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js
index cf8ac859475cc6..e872172be467ef 100644
--- a/ee/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js
+++ b/ee/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js
@@ -27,7 +27,7 @@ describe('EE Group Settings App', () => {
   };
 
   const mountComponent = ({
-    ceResolver = jest.fn().mockResolvedValue(groupVirtualRegistriesSettingMock),
+    resolver = jest.fn().mockResolvedValue(groupVirtualRegistriesSettingMock),
     provide = defaultProvide,
     adminVirtualRegistryAbility = true,
     mavenVirtualRegistryFeature = true,
@@ -37,7 +37,7 @@ describe('EE Group Settings App', () => {
   } = {}) => {
     Vue.use(VueApollo);
 
-    const requestHandlers = [[getGroupPackagesSettingsQuery, ceResolver]];
+    const requestHandlers = [[getGroupPackagesSettingsQuery, resolver]];
 
     apolloProvider = createMockApollo(requestHandlers);
 
diff --git a/ee/spec/frontend/packages_and_registries/settings/group/components/virtual_registries_setting_spec.js b/ee/spec/frontend/packages_and_registries/settings/group/components/virtual_registries_setting_spec.js
index 9f802a86133309..4515c6edd6aad0 100644
--- a/ee/spec/frontend/packages_and_registries/settings/group/components/virtual_registries_setting_spec.js
+++ b/ee/spec/frontend/packages_and_registries/settings/group/components/virtual_registries_setting_spec.js
@@ -84,7 +84,7 @@ describe('VirtualRegistriesSetting', () => {
   it('has the correct header text and description', () => {
     mountComponent();
 
-    expect(findSettingsSection().props('heading')).toContain('Virtual Registry');
+    expect(findSettingsSection().props('heading')).toContain('Virtual registry');
     expect(findSettingsSection().props('description')).toContain(
       'Manage packages across multiple sources and streamline development workflows using virtual registries.',
     );
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index bda25e7094acee..54ef0329d21614 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -72463,7 +72463,7 @@ msgstr ""
 msgid "VirtualRegistry|Edit upstream %{name}"
 msgstr ""
 
-msgid "VirtualRegistry|Enable Virtual Registry"
+msgid "VirtualRegistry|Enable virtual registry"
 msgstr ""
 
 msgid "VirtualRegistry|Enter a personal access token for GitLab-hosted upstreams."
-- 
GitLab