When a non-default branch is selected, the merged YAML result is

potentially incorrect. This issue is being addressed elsewhere, but this
solution hides the tab when editing on the non-default branch.

It's a temporary solution that should be reverted as soon as the merged
YAML functionality works correctly across multiple branches.

app/assets/javascripts/pipeline_editor/components/editor/ci_config_merged_preview.vue

 <script>
-import { GlIcon } from '@gitlab/ui';
+import { GlAlert, GlLink, GlSprintf, GlIcon } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import { s__ } from '~/locale';
 import SourceEditor from '~/vue_shared/components/source_editor.vue';
+import getCurrentBranch from '../../graphql/queries/client/current_branch.graphql';
 
 export default {
   i18n: {
     viewOnlyMessage: s__('Pipelines|Merged YAML is view only'),
+    unavailableDefaultTitle: s__('Pipelines|Merged YAML unavailable'),
+    unavailableDefaultText: s__(
+      'Pipelines|The merged YAML view is only available for the default branch. %{linkStart}Learn more.%{linkEnd}',
+    ),
   },
   components: {
     SourceEditor,
+    GlAlert,
     GlIcon,
+    GlLink,
+    GlSprintf,
   },
-  inject: ['ciConfigPath'],
+  inject: ['ciConfigPath', 'defaultBranch'],
   props: {
     ciConfigData: {
       type: Object,
@@ -24,6 +33,15 @@ export default {
       failureType: null,
     };
   },
+  // This is not the best practice, don't copy me (@samdbeckham)
+  // This is a temporary workaround to unblock a release.
+  // See this comment for more information on this approach
+  // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/65972#note_626095648
+  apollo: {
+    currentBranch: {
+      query: getCurrentBranch,
+    },
+  },
   computed: {
     fileGlobalId() {
       return `${this.ciConfigPath}-${uniqueId()}`;
@@ -31,24 +49,44 @@ export default {
     mergedYaml() {
       return this.ciConfigData.mergedYaml;
     },
+    isOnDefaultBranch() {
+      return this.currentBranch === this.defaultBranch;
+    },
+    expandedConfigHelpPath() {
+      return helpPagePath('ci/pipeline_editor/index', { anchor: 'view-expanded-configuration' });
+    },
   },
 };
 </script>
 <template>
   <div>
-    <div class="gl-display-flex gl-align-items-center">
-      <gl-icon :size="16" name="lock" class="gl-text-gray-500 gl-mr-3" />
-      {{ $options.i18n.viewOnlyMessage }}
-    </div>
-    <div class="gl-mt-3 gl-border-solid gl-border-gray-100 gl-border-1">
-      <source-editor
-        ref="editor"
-        :value="mergedYaml"
-        :file-name="ciConfigPath"
-        :file-global-id="fileGlobalId"
-        :editor-options="{ readOnly: true }"
-        v-on="$listeners"
-      />
+    <div v-if="isOnDefaultBranch">
+      <div class="gl-display-flex gl-align-items-center">
+        <gl-icon :size="16" name="lock" class="gl-text-gray-500 gl-mr-3" />
+        {{ $options.i18n.viewOnlyMessage }}
+      </div>
+      <div class="gl-mt-3 gl-border-solid gl-border-gray-100 gl-border-1">
+        <source-editor
+          ref="editor"
+          :value="mergedYaml"
+          :file-name="ciConfigPath"
+          :file-global-id="fileGlobalId"
+          :editor-options="{ readOnly: true }"
+          v-on="$listeners"
+        />
+      </div>
     </div>
+    <gl-alert
+      v-else
+      variant="info"
+      :dismissible="false"
+      :title="$options.i18n.unavailableDefaultTitle"
+    >
+      <gl-sprintf :message="$options.i18n.unavailableDefaultText">
+        <template #link="{ content }">
+          <gl-link :href="expandedConfigHelpPath" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </gl-alert>
   </div>
 </template>

doc/ci/pipeline_editor/index.md

@@ -85,6 +85,9 @@ where:
   [extended configuration merged into the job](../yaml/index.md#merge-details).
 - YAML anchors are [replaced with the linked configuration](../yaml/index.md#anchors).
 
+NOTE:
+You can only see the expanded view when editing the [default branch](../../user/project/repository/branches/default.md).
+
 ## Commit changes to CI configuration
 
 The commit form appears at the bottom of each tab in the editor so you can commit

locale/gitlab.pot

@@ -24221,6 +24221,9 @@ msgstr ""
 msgid "Pipelines|Merged YAML is view only"
 msgstr ""
 
+msgid "Pipelines|Merged YAML unavailable"
+msgstr ""
+
 msgid "Pipelines|More Information"
 msgstr ""
 
@@ -24257,6 +24260,9 @@ msgstr ""
 msgid "Pipelines|The GitLab CI configuration could not be updated."
 msgstr ""
 
+msgid "Pipelines|The merged YAML view is only available for the default branch. %{linkStart}Learn more.%{linkEnd}"
+msgstr ""
+
 msgid "Pipelines|There are currently no finished pipelines."
 msgstr ""
 

spec/frontend/pipeline_editor/components/editor/ci_config_merged_preview_spec.js

-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlAlert } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
 import { EDITOR_READY_EVENT } from '~/editor/constants';
 import CiConfigMergedPreview from '~/pipeline_editor/components/editor/ci_config_merged_preview.vue';
 import { mockLintResponse, mockCiConfigPath } from '../../mock_data';
 
+const DEFAULT_BRANCH = 'main';
+
 describe('Text editor component', () => {
   let wrapper;
 
@@ -16,7 +18,7 @@ describe('Text editor component', () => {
     },
   };
 
-  const createComponent = ({ props = {} } = {}) => {
+  const createComponent = ({ props = {}, currentBranch = DEFAULT_BRANCH } = {}) => {
     wrapper = shallowMount(CiConfigMergedPreview, {
       propsData: {
         ciConfigData: mockLintResponse,
@@ -24,20 +26,45 @@ describe('Text editor component', () => {
       },
       provide: {
         ciConfigPath: mockCiConfigPath,
+        defaultBranch: DEFAULT_BRANCH,
       },
       stubs: {
         SourceEditor: MockSourceEditor,
       },
+      data() {
+        return {
+          currentBranch,
+        };
+      },
     });
   };
 
   const findIcon = () => wrapper.findComponent(GlIcon);
+  const findAlert = () => wrapper.findComponent(GlAlert);
   const findEditor = () => wrapper.findComponent(MockSourceEditor);
 
   afterEach(() => {
     wrapper.destroy();
   });
 
+  // This is testing a temporary feature.
+  // It may be slightly hacky code that doesn't follow best practice.
+  // See the related MR for more information.
+  // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/65972#note_626095644
+  describe('on a non-default branch', () => {
+    beforeEach(() => {
+      createComponent({ currentBranch: 'feature' });
+    });
+
+    it('does not load the editor', () => {
+      expect(findEditor().exists()).toBe(false);
+    });
+
+    it('renders an informational alert', () => {
+      expect(findAlert().exists()).toBe(true);
+    });
+  });
+
   describe('when status is valid', () => {
     beforeEach(() => {
       createComponent();