Merge branch 'fix/manual-pipeline-ui-unable-to-load-predefined-variables' into 'master'

fix: Use short ref name as fallback in pipeline UI

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/184052



Merged-by: Briley Sandlin <bsandlin@gitlab.com>
Approved-by: Briley Sandlin <bsandlin@gitlab.com>
Co-authored-by: Anna Vovchenko <avovchenko@gitlab.com>

app/assets/javascripts/ci/pipeline_new/components/pipeline_new_form.vue

@@ -116,6 +116,10 @@ export default {
     refShortName() {
       return this.refValue.shortName;
     },
+    refQueryParam() {
+      return this.refFullName || this.refShortName;
+    },
+
     shouldShowWarning() {
       return this.warnings.length > 0 && !this.isWarningDismissed;
     },
@@ -256,7 +260,7 @@ export default {
         :file-params="fileParams"
         :is-maintainer="isMaintainer"
         :project-path="projectPath"
-        :ref-param="refFullName"
+        :ref-param="refQueryParam"
         :settings-link="settingsLink"
         :variable-params="variableParams"
         @variables-updated="handleVariablesUpdated"

spec/frontend/ci/pipeline_new/components/pipeline_new_form_spec.js

@@ -159,12 +159,10 @@ describe('Pipeline New Form', () => {
 
   describe('Pipeline variables form', () => {
     describe('when user has permission to view variables', () => {
-      beforeEach(async () => {
+      it('renders the pipeline variables form component', async () => {
         pipelineCreateMutationHandler.mockResolvedValue(mockPipelineCreateMutationResponse);
         await createComponentWithApollo();
-      });
 
-      it('renders the pipeline variables form component', () => {
         expect(findPipelineVariablesForm().exists()).toBe(true);
         expect(findPipelineVariablesForm().props()).toMatchObject({
           isMaintainer: true,
@@ -174,6 +172,9 @@ describe('Pipeline New Form', () => {
       });
 
       it('passes variables to the create mutation', async () => {
+        pipelineCreateMutationHandler.mockResolvedValue(mockPipelineCreateMutationResponse);
+        await createComponentWithApollo();
+
         const variables = [{ key: 'TEST_VAR', value: 'test_value' }];
         findPipelineVariablesForm().vm.$emit('variables-updated', variables);
         findForm().vm.$emit('submit', dummySubmitEvent);
@@ -187,6 +188,24 @@ describe('Pipeline New Form', () => {
           },
         });
       });
+
+      describe('ref param', () => {
+        it('provides refParam as ref.fullName when available', async () => {
+          pipelineCreateMutationHandler.mockResolvedValue(mockPipelineCreateMutationResponse);
+          await createComponentWithApollo();
+
+          expect(findPipelineVariablesForm().props('refParam')).toBe(
+            `refs/heads/${defaultProps.refParam}`,
+          );
+        });
+
+        it('provides refParam as ref.shortName when available', async () => {
+          pipelineCreateMutationHandler.mockResolvedValue(mockPipelineCreateMutationResponse);
+          await createComponentWithApollo({ props: { refParam: 'another-branch' } });
+
+          expect(findPipelineVariablesForm().props('refParam')).toBe('another-branch');
+        });
+      });
     });
 
     describe('when user does not have permission to view variables', () => {