Use project path and project namespace separately

This change fixes an issue when loading CI schemas in project that
belong to subgroups by obtaining the namespace from the project path
separately and providing it to each different components independently.

app/assets/javascripts/pipeline_editor/components/text_editor.vue

@@ -7,6 +7,7 @@ export default {
     EditorLite,
   },
   inheritAttrs: false,
+  inject: ['projectPath', 'projectNamespace'],
   props: {
     ciConfigPath: {
       type: String,
@@ -17,20 +18,15 @@ export default {
       required: false,
       default: null,
     },
-    projectPath: {
-      type: String,
-      required: true,
-    },
   },
   methods: {
     onEditorReady() {
       const editorInstance = this.$refs.editor.getEditor();
-      const [projectNamespace, projectPath] = this.projectPath.split('/');
 
       editorInstance.use(new CiSchemaExtension());
       editorInstance.registerCiSchema({
-        projectPath,
-        projectNamespace,
+        projectPath: this.projectPath,
+        projectNamespace: this.projectNamespace,
         ref: this.commitSha,
       });
     },

app/assets/javascripts/pipeline_editor/index.js

@@ -15,12 +15,17 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
   }
 
   const {
+    // props
     ciConfigPath,
     commitSha,
     defaultBranch,
     newMergeRequestPath,
+
+    // `provide/inject` data
     lintHelpPagePath,
+    projectFullPath,
     projectPath,
+    projectNamespace,
     ymlHelpPagePath,
   } = el?.dataset;
 
@@ -35,6 +40,9 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
     apolloProvider,
     provide: {
       lintHelpPagePath,
+      projectFullPath,
+      projectPath,
+      projectNamespace,
       ymlHelpPagePath,
     },
     render(h) {
@@ -44,7 +52,6 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
           commitSha,
           defaultBranch,
           newMergeRequestPath,
-          projectPath,
         },
       });
     },

app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue

@@ -39,11 +39,8 @@ export default {
     ValidationSegment,
   },
   mixins: [glFeatureFlagsMixin()],
+  inject: ['projectFullPath'],
   props: {
-    projectPath: {
-      type: String,
-      required: true,
-    },
     defaultBranch: {
       type: String,
       required: false,
@@ -84,7 +81,7 @@ export default {
       query: getBlobContent,
       variables() {
         return {
-          projectPath: this.projectPath,
+          projectPath: this.projectFullPath,
           path: this.ciConfigPath,
           ref: this.defaultBranch,
         };
@@ -107,7 +104,7 @@ export default {
       },
       variables() {
         return {
-          projectPath: this.projectPath,
+          projectPath: this.projectFullPath,
           content: this.contentModel,
         };
       },
@@ -244,7 +241,7 @@ export default {
         } = await this.$apollo.mutate({
           mutation: commitCiFileMutation,
           variables: {
-            projectPath: this.projectPath,
+            projectPath: this.projectFullPath,
             branch,
             startBranch: this.defaultBranch,
             message,
@@ -318,7 +315,6 @@ export default {
               v-model="contentModel"
               :ci-config-path="ciConfigPath"
               :commit-sha="lastCommitSha"
-              :project-path="projectPath"
             />
           </editor-tab>
           <editor-tab

app/views/projects/ci/pipeline_editor/show.html.haml

 - page_title s_('Pipelines|Pipeline Editor')
 
 #js-pipeline-editor{ data: { "ci-config-path": @project.ci_config_path_or_default,
-  "project-path" => @project.full_path,
+  "project-path" => @project.path,
+  "project-full-path" => @project.full_path,
+  "project-namespace" => @project.namespace.full_path,
   "default-branch" => @project.default_branch,
   "commit-sha" => @project.commit ? @project.commit.sha : '',
   "new-merge-request-path" => namespace_project_new_merge_request_path,

spec/frontend/pipeline_editor/components/text_editor_spec.js

@@ -4,8 +4,7 @@ import {
   mockCiYml,
   mockCommitSha,
   mockProjectPath,
-  mockNamespace,
-  mockProjectName,
+  mockProjectNamespace,
 } from '../mock_data';
 
 import TextEditor from '~/pipeline_editor/components/text_editor.vue';
@@ -33,10 +32,13 @@ describe('~/pipeline_editor/components/text_editor.vue', () => {
 
   const createComponent = (opts = {}, mountFn = shallowMount) => {
     wrapper = mountFn(TextEditor, {
+      provide: {
+        projectPath: mockProjectPath,
+        projectNamespace: mockProjectNamespace,
+      },
       propsData: {
         ciConfigPath: mockCiConfigPath,
         commitSha: mockCommitSha,
-        projectPath: mockProjectPath,
       },
       attrs: {
         value: mockCiYml,
@@ -77,8 +79,8 @@ describe('~/pipeline_editor/components/text_editor.vue', () => {
     expect(mockUse).toHaveBeenCalledTimes(1);
     expect(mockRegisterCiSchema).toHaveBeenCalledTimes(1);
     expect(mockRegisterCiSchema).toHaveBeenCalledWith({
-      projectNamespace: mockNamespace,
-      projectPath: mockProjectName,
+      projectNamespace: mockProjectNamespace,
+      projectPath: mockProjectPath,
       ref: mockCommitSha,
     });
   });

spec/frontend/pipeline_editor/graphql/resolvers_spec.js

@@ -5,7 +5,7 @@ import {
   mockCiYml,
   mockDefaultBranch,
   mockLintResponse,
-  mockProjectPath,
+  mockProjectFullPath,
 } from '../mock_data';
 import httpStatus from '~/lib/utils/http_status';
 import axios from '~/lib/utils/axios_utils';
@@ -32,12 +32,12 @@ describe('~/pipeline_editor/graphql/resolvers', () => {
 
       it('resolves lint data with type names', async () => {
         const result = resolvers.Query.blobContent(null, {
-          projectPath: mockProjectPath,
+          projectPath: mockProjectFullPath,
           path: mockCiConfigPath,
           ref: mockDefaultBranch,
         });
 
-        expect(Api.getRawFile).toHaveBeenCalledWith(mockProjectPath, mockCiConfigPath, {
+        expect(Api.getRawFile).toHaveBeenCalledWith(mockProjectFullPath, mockCiConfigPath, {
           ref: mockDefaultBranch,
         });
 

spec/frontend/pipeline_editor/mock_data.js

 import { CI_CONFIG_STATUS_VALID } from '~/pipeline_editor/constants';
 import { unwrapStagesWithNeeds } from '~/pipelines/components/unwrapping_utils';
 
-export const mockNamespace = 'user1';
-export const mockProjectName = 'project1';
-export const mockProjectPath = `${mockNamespace}/${mockProjectName}`;
+export const mockProjectNamespace = 'user1';
+export const mockProjectPath = 'project1';
+export const mockProjectFullPath = `${mockProjectNamespace}/${mockProjectPath}`;
 export const mockDefaultBranch = 'master';
 export const mockNewMergeRequestPath = '/-/merge_requests/new';
 export const mockCommitSha = 'aabbccdd';

spec/frontend/pipeline_editor/pipeline_editor_app_spec.js

@@ -15,6 +15,8 @@ import {
   mockCommitMessage,
   mockDefaultBranch,
   mockProjectPath,
+  mockProjectFullPath,
+  mockProjectNamespace,
   mockNewMergeRequestPath,
 } from './mock_data';
 
@@ -39,6 +41,15 @@ const MockEditorLite = {
   template: '<div/>',
 };
 
+const mockProvide = {
+  projectFullPath: mockProjectFullPath,
+  projectPath: mockProjectPath,
+  projectNamespace: mockProjectNamespace,
+  glFeatures: {
+    ciConfigVisualizationTab: true,
+  },
+};
+
 describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
   let wrapper;
 
@@ -53,11 +64,7 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
     lintLoading = false,
     options = {},
     mountFn = shallowMount,
-    provide = {
-      glFeatures: {
-        ciConfigVisualizationTab: true,
-      },
-    },
+    provide = mockProvide,
   } = {}) => {
     mockMutate = jest.fn().mockResolvedValue({
       data: {
@@ -75,7 +82,6 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
         ciConfigPath: mockCiConfigPath,
         commitSha: mockCommitSha,
         defaultBranch: mockDefaultBranch,
-        projectPath: mockProjectPath,
         newMergeRequestPath: mockNewMergeRequestPath,
         ...props,
       },
@@ -211,7 +217,12 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
 
       describe('with feature flag off', () => {
         beforeEach(() => {
-          createComponent({ provide: { glFeatures: { ciConfigVisualizationTab: false } } });
+          createComponent({
+            provide: {
+              ...mockProvide,
+              glFeatures: { ciConfigVisualizationTab: false },
+            },
+          });
         });
 
         it('does not display the tab', () => {
@@ -242,7 +253,6 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
 
     it('configures text editor', () => {
       expect(findTextEditor().props('commitSha')).toBe(mockCommitSha);
-      expect(findTextEditor().props('projectPath')).toBe(mockProjectPath);
     });
 
     describe('commit form', () => {
@@ -251,7 +261,7 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
         filePath: mockCiConfigPath,
         lastCommitId: mockCommitSha,
         message: mockCommitMessage,
-        projectPath: mockProjectPath,
+        projectPath: mockProjectFullPath,
         startBranch: mockDefaultBranch,
       };
 
@@ -435,7 +445,7 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
 
       expect(mockCiConfigData).toHaveBeenCalledWith({
         content: mockCiYml,
-        projectPath: mockProjectPath,
+        projectPath: mockProjectFullPath,
       });
     });