From f2490879d30800cbe29995cd92fec53570ea6253 Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Fri, 12 Sep 2025 12:15:21 +0200
Subject: [PATCH] Check both name and id to display rule details

This is Duo assisted PoC. Check thoroughly before commiting
as production code.
---
 .../branch_rules/components/view/index.vue    | 15 ++-
 .../settings/repository/branch_rules/app.vue  |  1 +
 .../branch_rules/components/branch_rule.vue   |  8 +-
 .../components/view/index_spec.js             | 98 +++++++++++++++++--
 .../components/branch_rule_spec.js            |  3 +-
 .../repository/branch_rules/mock_data.js      | 12 ++-
 6 files changed, 120 insertions(+), 17 deletions(-)

diff --git a/app/assets/javascripts/projects/settings/branch_rules/components/view/index.vue b/app/assets/javascripts/projects/settings/branch_rules/components/view/index.vue
index cc138ddcaf9523..2ef281c818f45e 100644
--- a/app/assets/javascripts/projects/settings/branch_rules/components/view/index.vue
+++ b/app/assets/javascripts/projects/settings/branch_rules/components/view/index.vue
@@ -111,7 +111,14 @@ export default {
         };
       },
       update({ project: { branchRules, group } }) {
-        const branchRule = branchRules.nodes.find((rule) => rule.name === this.branch);
+        const branchRule = branchRules.nodes.find((rule) => {
+          if (this.ruleId) {
+            // If we have a rule ID, match by both name and ID for precision
+            return rule.name === this.branch && getIdFromGraphQLId(rule.id) === this.ruleId;
+          }
+          // Fallback to name-only matching for backward compatibility
+          return rule.name === this.branch;
+        });
         this.branchRule = branchRule;
         this.branchProtection = branchRule?.branchProtection;
         this.statusChecks = branchRule?.externalStatusChecks?.nodes || [];
@@ -149,8 +156,12 @@ export default {
     },
   },
   data() {
+    const branchParam = getParameterByName(BRANCH_PARAM_NAME);
+    const ruleId = getParameterByName('id');
+
     return {
-      branch: getParameterByName(BRANCH_PARAM_NAME),
+      branch: branchParam,
+      ruleId,
       branchProtection: {},
       statusChecks: [],
       branchRule: {},
diff --git a/app/assets/javascripts/projects/settings/repository/branch_rules/app.vue b/app/assets/javascripts/projects/settings/repository/branch_rules/app.vue
index 5aeabbace7e22b..9c54f4d56bfddb 100644
--- a/app/assets/javascripts/projects/settings/repository/branch_rules/app.vue
+++ b/app/assets/javascripts/projects/settings/repository/branch_rules/app.vue
@@ -188,6 +188,7 @@ export default {
       <ul class="content-list">
         <branch-rule
           v-for="(rule, index) in branchRules"
+          :id="rule.id"
           :key="`${rule.name}-${index}`"
           :name="rule.name"
           :is-default="rule.isDefault"
diff --git a/app/assets/javascripts/projects/settings/repository/branch_rules/components/branch_rule.vue b/app/assets/javascripts/projects/settings/repository/branch_rules/components/branch_rule.vue
index 7cf99419779b4b..bb887f9a289b78 100644
--- a/app/assets/javascripts/projects/settings/repository/branch_rules/components/branch_rule.vue
+++ b/app/assets/javascripts/projects/settings/repository/branch_rules/components/branch_rule.vue
@@ -4,6 +4,7 @@ import { createAlert } from '~/alert';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import ProtectedBadge from '~/vue_shared/components/badges/protected_badge.vue';
 import { s__, sprintf, n__ } from '~/locale';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { accessLevelsConfig } from '~/projects/settings/branch_rules/components/view/constants';
 import squashOptionQuery from '~/projects/settings/branch_rules/queries/squash_option.query.graphql';
 import { getAccessLevels } from '../../../utils';
@@ -59,6 +60,10 @@ export default {
       type: String,
       required: true,
     },
+    id: {
+      type: String,
+      required: true,
+    },
     projectPath: {
       type: String,
       required: true,
@@ -105,7 +110,8 @@ export default {
       return this.approvalDetails.length;
     },
     detailsPath() {
-      return `${this.branchRulesPath}?branch=${encodeURIComponent(this.name)}`;
+      const ruleId = getIdFromGraphQLId(this.id);
+      return `${this.branchRulesPath}?branch=${encodeURIComponent(this.name)}&id=${ruleId}`;
     },
     statusChecksText() {
       return sprintf(this.$options.i18n.statusChecks, {
diff --git a/spec/frontend/projects/settings/branch_rules/components/view/index_spec.js b/spec/frontend/projects/settings/branch_rules/components/view/index_spec.js
index 135a1930e4d888..ca05268f209420 100644
--- a/spec/frontend/projects/settings/branch_rules/components/view/index_spec.js
+++ b/spec/frontend/projects/settings/branch_rules/components/view/index_spec.js
@@ -48,7 +48,11 @@ import {
 } from 'ee_else_ce_jest/projects/settings/branch_rules/components/view/mock_data';
 
 jest.mock('~/lib/utils/url_utility', () => ({
-  getParameterByName: jest.fn().mockReturnValue('main'),
+  getParameterByName: jest.fn((param) => {
+    if (param === 'branch') return 'main';
+    if (param === 'id') return null;
+    return null;
+  }),
   mergeUrlParams: jest.fn().mockReturnValue('/branches?state=all&search=%5Emain%24'),
   joinPaths: jest.fn(),
   setUrlParams: jest
@@ -194,7 +198,11 @@ describe('View branch rules', () => {
     `(
       'expectedIsEditAvailable: $expectedIsEditAvailable when $description',
       async ({ allowEditSquashSetting, branch, expectedIsEditAvailable }) => {
-        jest.spyOn(util, 'getParameterByName').mockReturnValueOnce(branch);
+        jest.spyOn(util, 'getParameterByName').mockImplementation((param) => {
+          if (param === 'branch') return branch;
+          if (param === 'id') return null;
+          return null;
+        });
 
         await createComponent({
           canAdminProtectedBranches: true,
@@ -306,7 +314,11 @@ describe('View branch rules', () => {
     });
 
     it('does not render squash settings for wildcard branch rules', async () => {
-      jest.spyOn(util, 'getParameterByName').mockReturnValueOnce('*');
+      jest.spyOn(util, 'getParameterByName').mockImplementation((param) => {
+        if (param === 'branch') return '*';
+        if (param === 'id') return null;
+        return null;
+      });
       await createComponent();
 
       expect(findSquashSettingSection().exists()).toBe(false);
@@ -319,7 +331,11 @@ describe('View branch rules', () => {
       ${'All protected branches'} | ${false}       | ${'hides squash section for protected branches'}
       ${'feature-*'}              | ${false}       | ${'hides squash section for wildcard branches'}
     `('$description', async ({ branch, expectedExists }) => {
-      jest.spyOn(util, 'getParameterByName').mockReturnValueOnce(branch);
+      jest.spyOn(util, 'getParameterByName').mockImplementation((param) => {
+        if (param === 'branch') return branch;
+        if (param === 'id') return null;
+        return null;
+      });
 
       await createComponent();
 
@@ -338,8 +354,62 @@ describe('View branch rules', () => {
     expect(findBranchName().text()).toBe('main');
   });
 
+  describe('parseBranchParam', () => {
+    it('gets branch and id from separate URL parameters', async () => {
+      jest.spyOn(util, 'getParameterByName').mockImplementation((param) => {
+        if (param === 'branch') return 'feature-branch';
+        if (param === 'id') return '123';
+        return null;
+      });
+      await createComponent();
+
+      expect(wrapper.vm.branch).toBe('feature-branch');
+      expect(wrapper.vm.ruleId).toBe('123');
+    });
+
+    it('handles missing id parameter', async () => {
+      jest.spyOn(util, 'getParameterByName').mockImplementation((param) => {
+        if (param === 'branch') return 'feature-branch';
+        if (param === 'id') return null;
+        return null;
+      });
+      await createComponent();
+
+      expect(wrapper.vm.branch).toBe('feature-branch');
+      expect(wrapper.vm.ruleId).toBe(null);
+    });
+
+    it('handles missing branch parameter', async () => {
+      jest.spyOn(util, 'getParameterByName').mockImplementation((param) => {
+        if (param === 'branch') return null;
+        if (param === 'id') return '123';
+        return null;
+      });
+      await createComponent();
+
+      expect(wrapper.vm.branch).toBe(null);
+      expect(wrapper.vm.ruleId).toBe('123');
+    });
+
+    it('handles both parameters missing', async () => {
+      jest.spyOn(util, 'getParameterByName').mockImplementation((param) => {
+        if (param === 'branch') return null;
+        if (param === 'id') return null;
+        return null;
+      });
+      await createComponent();
+
+      expect(wrapper.vm.branch).toBe(null);
+      expect(wrapper.vm.ruleId).toBe(null);
+    });
+  });
+
   it('renders the correct label if all branches are targeted with wildcard', async () => {
-    jest.spyOn(util, 'getParameterByName').mockReturnValueOnce(ALL_BRANCHES_WILDCARD);
+    jest.spyOn(util, 'getParameterByName').mockImplementation((param) => {
+      if (param === 'branch') return ALL_BRANCHES_WILDCARD;
+      if (param === 'id') return null;
+      return null;
+    });
     await createComponent();
 
     expect(findAllBranches().text()).toBe('*');
@@ -512,7 +582,11 @@ describe('View branch rules', () => {
     });
 
     it('does not render delete rule button when target is All branches', () => {
-      jest.spyOn(util, 'getParameterByName').mockReturnValueOnce('All branches');
+      jest.spyOn(util, 'getParameterByName').mockImplementation((param) => {
+        if (param === 'branch') return 'All branches';
+        if (param === 'id') return null;
+        return null;
+      });
       createComponent();
 
       expect(findDeleteRuleButton().exists()).toBe(false);
@@ -583,7 +657,11 @@ describe('View branch rules', () => {
 
   describe('When rendered for predefined rules', () => {
     beforeEach(async () => {
-      jest.spyOn(util, 'getParameterByName').mockReturnValueOnce('All branches');
+      jest.spyOn(util, 'getParameterByName').mockImplementation((param) => {
+        if (param === 'branch') return 'All branches';
+        if (param === 'id') return null;
+        return null;
+      });
 
       await createComponent({
         glFeatures: { editBranchRules: true },
@@ -714,7 +792,11 @@ describe('View branch rules', () => {
 
   describe('When rendered for a non-existing rule', () => {
     beforeEach(async () => {
-      jest.spyOn(util, 'getParameterByName').mockReturnValueOnce('non-existing-rule');
+      jest.spyOn(util, 'getParameterByName').mockImplementation((param) => {
+        if (param === 'branch') return 'non-existing-rule';
+        if (param === 'id') return null;
+        return null;
+      });
       await createComponent({ glFeatures: { editBranchRules: true } });
     });
 
diff --git a/spec/frontend/projects/settings/repository/branch_rules/components/branch_rule_spec.js b/spec/frontend/projects/settings/repository/branch_rules/components/branch_rule_spec.js
index e2c486708ff26e..a700d02377413f 100644
--- a/spec/frontend/projects/settings/repository/branch_rules/components/branch_rule_spec.js
+++ b/spec/frontend/projects/settings/repository/branch_rules/components/branch_rule_spec.js
@@ -84,9 +84,10 @@ describe('Branch rule', () => {
 
   it('renders a detail button with the correct href', () => {
     const encodedBranchName = encodeURIComponent(branchRulePropsMock.name);
+    const ruleId = '3'; // Extracted from 'gid://gitlab/Projects::BranchRule/3'
 
     expect(findDetailsButton().attributes('href')).toBe(
-      `${branchRuleProvideMock.branchRulesPath}?branch=${encodedBranchName}`,
+      `${branchRuleProvideMock.branchRulesPath}?branch=${encodedBranchName}&id=${ruleId}`,
     );
   });
 
diff --git a/spec/frontend/projects/settings/repository/branch_rules/mock_data.js b/spec/frontend/projects/settings/repository/branch_rules/mock_data.js
index c1048955b347bb..81e53e6ffe4c80 100644
--- a/spec/frontend/projects/settings/repository/branch_rules/mock_data.js
+++ b/spec/frontend/projects/settings/repository/branch_rules/mock_data.js
@@ -28,7 +28,7 @@ export const squashOptionMockResponse = {
           {
             __typename: 'BranchRule',
             name: 'main',
-            id: 'gid://gitlab/Projects/BranchRule/1',
+            id: 'gid://gitlab/Projects::BranchRule/1',
             squashOption: {
               option: 'Encourage',
               helpText: 'Checkbox is visible and selected by default.',
@@ -38,13 +38,13 @@ export const squashOptionMockResponse = {
           {
             __typename: 'BranchRule',
             name: '*',
-            id: 'gid://gitlab/Projects/BranchRule/2',
+            id: 'gid://gitlab/Projects::BranchRule/2',
             squashOption: null,
           },
           {
             __typename: 'BranchRule',
             name: 'branch-with-$speci@l-#-chars',
-            id: 'gid://gitlab/Projects/BranchRule/3',
+            id: 'gid://gitlab/Projects::BranchRule/3',
             squashOption: {
               option: 'Encourage',
               helpText: 'Checkbox is visible and selected by default.',
@@ -67,7 +67,7 @@ export const branchRulesMockResponse = {
         nodes: [
           {
             name: 'main',
-            id: 'gid://gitlab/Projects/BranchRule/1',
+            id: 'gid://gitlab/Projects::BranchRule/1',
             isDefault: true,
             matchingBranchesCount: 1,
             branchProtection: {
@@ -85,7 +85,7 @@ export const branchRulesMockResponse = {
           },
           {
             name: 'test-*',
-            id: 'gid://gitlab/Projects/BranchRule/2',
+            id: 'gid://gitlab/Projects::BranchRule/2',
             isDefault: false,
             matchingBranchesCount: 2,
             branchProtection: {
@@ -161,6 +161,7 @@ export const branchRuleProvideMock = {
 
 export const branchRulePropsMock = {
   name: 'branch-with-$speci@l-#-chars',
+  id: 'gid://gitlab/Projects::BranchRule/3',
   isDefault: true,
   matchingBranchesCount: 1,
   branchProtection: {
@@ -177,6 +178,7 @@ export const branchRulePropsMock = {
 
 export const branchRuleWithoutDetailsPropsMock = {
   name: 'branch-1',
+  id: 'gid://gitlab/Projects::BranchRule/4',
   isDefault: false,
   matchingBranchesCount: 1,
   branchProtection: null,
-- 
GitLab