Add sha to CiConfig graphql query

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

 <script>
-import { GlAlert, GlLink, GlSprintf, GlIcon } from '@gitlab/ui';
+import { 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', 'defaultBranch'],
+  inject: ['ciConfigPath'],
   props: {
     ciConfigData: {
       type: Object,
@@ -33,15 +24,6 @@ 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()}`;
@@ -49,44 +31,24 @@ 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 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 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>
-    <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>

app/assets/javascripts/pipeline_editor/graphql/queries/ci_config.graphql

 #import "~/pipelines/graphql/fragments/pipeline_stages_connection.fragment.graphql"
 
-query getCiConfigData($projectPath: ID!, $content: String!) {
-  ciConfig(projectPath: $projectPath, content: $content) {
+query getCiConfigData($projectPath: ID!, $sha: String, $content: String!) {
+  ciConfig(projectPath: $projectPath, sha: $sha, content: $content) {
     errors
     mergedYaml
     status

app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue

@@ -20,6 +20,7 @@ import updateCommitShaMutation from './graphql/mutations/update_commit_sha.mutat
 import getBlobContent from './graphql/queries/blob_content.graphql';
 import getCiConfigData from './graphql/queries/ci_config.graphql';
 import getAppStatus from './graphql/queries/client/app_status.graphql';
+import getCommitSha from './graphql/queries/client/commit_sha.graphql';
 import getCurrentBranch from './graphql/queries/client/current_branch.graphql';
 import getIsNewCiConfigFile from './graphql/queries/client/is_new_ci_config_file.graphql';
 import getTemplate from './graphql/queries/get_starter_template.query.graphql';
@@ -128,6 +129,7 @@ export default {
       variables() {
         return {
           projectPath: this.projectFullPath,
+          sha: this.commitSha,
           content: this.currentCiFileContent,
         };
       },
@@ -153,6 +155,9 @@ export default {
     appStatus: {
       query: getAppStatus,
     },
+    commitSha: {
+      query: getCommitSha,
+    },
     currentBranch: {
       query: getCurrentBranch,
     },

doc/ci/pipeline_editor/index.md

@@ -85,9 +85,6 @@ 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

@@ -24227,9 +24227,6 @@ msgstr ""
 msgid "Pipelines|Merged YAML is view only"
 msgstr ""
 
-msgid "Pipelines|Merged YAML unavailable"
-msgstr ""
-
 msgid "Pipelines|More Information"
 msgstr ""
 
@@ -24266,9 +24263,6 @@ 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, GlAlert } from '@gitlab/ui';
+import { GlIcon } 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;
 
@@ -18,7 +16,7 @@ describe('Text editor component', () => {
     },
   };
 
-  const createComponent = ({ props = {}, currentBranch = DEFAULT_BRANCH } = {}) => {
+  const createComponent = ({ props = {} } = {}) => {
     wrapper = shallowMount(CiConfigMergedPreview, {
       propsData: {
         ciConfigData: mockLintResponse,
@@ -26,45 +24,20 @@ 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();

spec/frontend/pipeline_editor/pipeline_editor_app_spec.js

@@ -23,9 +23,10 @@ import {
   mockBlobContentQueryResponse,
   mockBlobContentQueryResponseEmptyCiFile,
   mockBlobContentQueryResponseNoCiFile,
+  mockCiYml,
+  mockCommitSha,
   mockDefaultBranch,
   mockProjectFullPath,
-  mockCiYml,
   mockNewCommitShaResults,
 } from './mock_data';
 
@@ -95,10 +96,16 @@ describe('Pipeline editor app component', () => {
     ];
 
     const resolvers = {
+      Query: {
+        commitSha() {
+          return mockCommitSha;
+        },
+      },
       Mutation: {
         updateCommitSha: mockUpdateCommitSha,
       },
     };
+
     mockApollo = createMockApollo(handlers, resolvers);
 
     const options = {
@@ -170,6 +177,7 @@ describe('Pipeline editor app component', () => {
         expect(mockCiConfigData).toHaveBeenCalledWith({
           content: mockCiYml,
           projectPath: mockProjectFullPath,
+          sha: mockCommitSha,
         });
       });
     });