Define a new home page for pipeline authoring

This change adds a new page and menu item for the pipeline authoring
page behind the feature flag `:ci_pipeline_authoring_page`. It adds the
boilerplate for adding Vue scripts into the page.

Updated feature tests that check for an "Edit" link, so they
can be more precise.

app/assets/javascripts/pages/projects/ci/pipeline_editor/show/index.js

+import { initPipelineEditor } from '~/pipeline_editor';
+
+initPipelineEditor();

app/assets/javascripts/pipeline_editor/index.js

+import Vue from 'vue';
+import PipelineEditorApp from './pipeline_editor_app.vue';
+
+export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
+  const el = document.querySelector(selector);
+
+  return new Vue({
+    el,
+    render(h) {
+      return h(PipelineEditorApp);
+    },
+  });
+};

app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue

+<script>
+import { GlEmptyState } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
+
+export default {
+  components: {
+    GlEmptyState,
+  },
+  i18n: {
+    title: s__('Pipelines|Pipeline Editor'),
+    description: s__(
+      'Pipelines|We are beginning our work around building the foundation for our dedicated pipeline editor.',
+    ),
+    primaryButtonText: __('Learn more'),
+  },
+};
+</script>
+
+<template>
+  <gl-empty-state
+    :title="$options.i18n.title"
+    :description="$options.i18n.description"
+    :primary-button-text="$options.i18n.primaryButtonText"
+    primary-button-link="https://about.gitlab.com/direction/verify/pipeline_authoring/"
+  />
+</template>

app/controllers/projects/ci/pipeline_editor_controller.rb

+# frozen_string_literal: true
+
+class Projects::Ci::PipelineEditorController < Projects::ApplicationController
+  before_action :check_can_collaborate!
+
+  feature_category :pipeline_authoring
+
+  def show
+    render_404 unless ::Gitlab::Ci::Features.ci_pipeline_editor_page_enabled?(@project)
+  end
+
+  private
+
+  def check_can_collaborate!
+    render_404 unless can_collaborate_with_project?(@project)
+  end
+end

app/helpers/ci/pipeline_editor_helper.rb

+# frozen_string_literal: true
+
+module Ci
+  module PipelineEditorHelper
+    include ChecksCollaboration
+
+    def can_view_pipeline_editor?(project)
+      can_collaborate_with_project?(project) &&
+        Gitlab::Ci::Features.ci_pipeline_editor_page_enabled?(project)
+    end
+  end
+end

app/views/layouts/nav/sidebar/_project.html.haml

@@ -167,7 +167,7 @@
       = render_if_exists "layouts/nav/requirements_link", project: @project
 
       - if project_nav_tab? :pipelines
-        = nav_link(controller: [:pipelines, :builds, :jobs, :pipeline_schedules, :artifacts, :test_cases], unless: -> { current_path?('projects/pipelines#charts') }) do
+        = nav_link(controller: [:pipelines, :builds, :jobs, :pipeline_schedules, :artifacts, :test_cases, :pipeline_editor], unless: -> { current_path?('projects/pipelines#charts') }) do
           = link_to project_pipelines_path(@project), class: 'shortcuts-pipelines qa-link-pipelines rspec-link-pipelines', data: { qa_selector: 'ci_cd_link' } do
             .nav-icon-container
               = sprite_icon('rocket')
@@ -175,7 +175,7 @@
               = _('CI / CD')
 
           %ul.sidebar-sub-level-items
-            = nav_link(controller: [:pipelines, :builds, :jobs, :pipeline_schedules, :artifacts, :test_cases], html_options: { class: "fly-out-top-item" }) do
+            = nav_link(controller: [:pipelines, :builds, :jobs, :pipeline_schedules, :artifacts, :test_cases, :pipeline_editor], html_options: { class: "fly-out-top-item" }) do
               = link_to project_pipelines_path(@project) do
                 %strong.fly-out-top-item-name
                   =  _('CI / CD')
@@ -186,6 +186,12 @@
                   %span
                     = _('Pipelines')
 
+            - if can_view_pipeline_editor?(@project)
+              = nav_link(controller: :pipeline_editor, action: :show) do
+                = link_to project_ci_pipeline_editor_path(@project), title: s_('Pipelines|Editor') do
+                  %span
+                    = s_('Pipelines|Editor')
+
             - if project_nav_tab? :builds
               = nav_link(controller: :jobs) do
                 = link_to project_jobs_path(@project), title: _('Jobs'), class: 'shortcuts-builds' do

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

+- page_title s_('Pipelines|Pipeline Editor')
+
+#js-pipeline-editor

config/feature_flags/development/ci_pipeline_editor_page.yml

+---
+name: ci_pipeline_editor_page
+introduced_by_url:
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/270059
+type: development
+group: group::pipeline authoring
+default_enabled: false

config/routes/project.rb

@@ -85,6 +85,7 @@ constraints(::Constraints::ProjectUrlConstrainer.new) do
 
         namespace :ci do
           resource :lint, only: [:show, :create]
+          resource :pipeline_editor, only: [:show], controller: :pipeline_editor, path: 'editor'
           resources :daily_build_group_report_results, only: [:index], constraints: { format: /(csv|json)/ }
         end
 

lib/gitlab/ci/features.rb

@@ -66,6 +66,10 @@ module Gitlab
       def self.seed_block_run_before_workflow_rules_enabled?(project)
         ::Feature.enabled?(:ci_seed_block_run_before_workflow_rules, project, default_enabled: false)
       end
+
+      def self.ci_pipeline_editor_page_enabled?(project)
+        ::Feature.enabled?(:ci_pipeline_editor_page, project, default_enabled: false)
+      end
     end
   end
 end

locale/gitlab.pot

@@ -19516,6 +19516,9 @@ msgstr ""
 msgid "Pipelines|Edit"
 msgstr ""
 
+msgid "Pipelines|Editor"
+msgstr ""
+
 msgid "Pipelines|Get started with Pipelines"
 msgstr ""
 
@@ -19546,6 +19549,9 @@ msgstr ""
 msgid "Pipelines|Owner"
 msgstr ""
 
+msgid "Pipelines|Pipeline Editor"
+msgstr ""
+
 msgid "Pipelines|Project cache successfully reset."
 msgstr ""
 
@@ -19582,6 +19588,9 @@ msgstr ""
 msgid "Pipelines|Trigger user has insufficient permissions to project"
 msgstr ""
 
+msgid "Pipelines|We are beginning our work around building the foundation for our dedicated pipeline editor."
+msgstr ""
+
 msgid "Pipelines|invalid"
 msgstr ""
 

spec/controllers/projects/ci/pipeline_editor_controller_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe Projects::Ci::PipelineEditorController do
+  let_it_be(:project) { create(:project, :repository) }
+  let_it_be(:user) { create(:user) }
+
+  before do
+    sign_in(user)
+  end
+
+  describe 'GET #show' do
+    context 'with enough privileges' do
+      before do
+        project.add_developer(user)
+
+        get :show, params: { namespace_id: project.namespace, project_id: project }
+      end
+
+      it { expect(response).to have_gitlab_http_status(:ok) }
+
+      it 'renders show page' do
+        expect(response).to render_template :show
+      end
+    end
+
+    context 'without enough privileges' do
+      before do
+        project.add_reporter(user)
+
+        get :show, params: { namespace_id: project.namespace, project_id: project }
+      end
+
+      it 'responds with 404' do
+        expect(response).to have_gitlab_http_status(:not_found)
+      end
+    end
+
+    context 'when ci_pipeline_editor_page feature flag is disabled' do
+      before do
+        stub_feature_flags(ci_pipeline_editor_page: false)
+        project.add_developer(user)
+
+        get :show, params: { namespace_id: project.namespace, project_id: project }
+      end
+
+      it 'responds with 404' do
+        expect(response).to have_gitlab_http_status(:not_found)
+      end
+    end
+  end
+end

spec/features/issuables/close_reopen_report_toggle_spec.rb

@@ -95,7 +95,7 @@ RSpec.describe 'Issuables Close/Reopen/Report toggle' do
         expect(page).to have_link('New issue')
         expect(page).not_to have_button('Close issue')
         expect(page).not_to have_button('Reopen issue')
-        expect(page).not_to have_link('Edit')
+        expect(page).not_to have_link(title: 'Edit title and description')
       end
     end
   end
@@ -121,7 +121,7 @@ RSpec.describe 'Issuables Close/Reopen/Report toggle' do
 
         it 'shows only the `Report abuse` and `Edit` button' do
           expect(page).to have_link('Report abuse')
-          expect(page).to have_link('Edit')
+          expect(page).to have_link(exact_text: 'Edit')
           expect(page).not_to have_button('Close merge request')
           expect(page).not_to have_button('Reopen merge request')
         end
@@ -130,8 +130,8 @@ RSpec.describe 'Issuables Close/Reopen/Report toggle' do
           let(:issuable) { create(:merge_request, :merged, source_project: project, author: user) }
 
           it 'shows only the `Edit` button' do
-            expect(page).to have_link('Edit')
             expect(page).to have_link('Report abuse')
+            expect(page).to have_link(exact_text: 'Edit')
             expect(page).not_to have_button('Close merge request')
             expect(page).not_to have_button('Reopen merge request')
           end
@@ -153,7 +153,7 @@ RSpec.describe 'Issuables Close/Reopen/Report toggle' do
         expect(page).to have_link('Report abuse')
         expect(page).not_to have_button('Close merge request')
         expect(page).not_to have_button('Reopen merge request')
-        expect(page).not_to have_link('Edit')
+        expect(page).not_to have_link(exact_text: 'Edit')
       end
     end
   end

spec/features/projects/ci/editor_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Pipeline Editor', :js do
+  include Spec::Support::Helpers::Features::EditorLiteSpecHelpers
+
+  let(:project) { create(:project, :repository) }
+  let(:user) { create(:user) }
+
+  before do
+    sign_in(user)
+    project.add_developer(user)
+
+    visit project_ci_pipeline_editor_path(project)
+  end
+
+  it 'user sees the Pipeline Editor page' do
+    expect(page).to have_content('Pipeline Editor')
+  end
+end

spec/frontend/pipeline_editor/pipeline_editor_app_spec.js

+import { mount, shallowMount } from '@vue/test-utils';
+import { GlEmptyState } from '@gitlab/ui';
+
+import PipelineEditorApp from '~/pipeline_editor/pipeline_editor_app.vue';
+
+describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
+  let wrapper;
+
+  const createComponent = (mountFn = shallowMount) => {
+    wrapper = mountFn(PipelineEditorApp);
+  };
+
+  const findEmptyState = () => wrapper.find(GlEmptyState);
+
+  it('contains an empty state', () => {
+    createComponent();
+
+    expect(findEmptyState().exists()).toBe(true);
+  });
+
+  it('contains a text description', () => {
+    createComponent(mount);
+
+    expect(findEmptyState().text()).toMatchInterpolatedText(
+      'Pipeline Editor We are beginning our work around building the foundation for our dedicated pipeline editor. Learn more',
+    );
+  });
+});

spec/helpers/ci/pipeline_editor_helper_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe Ci::PipelineEditorHelper do
+  let_it_be(:project) { create(:project) }
+
+  describe 'can_view_pipeline_editor?' do
+    subject { helper.can_view_pipeline_editor?(project) }
+
+    it 'user can view editor if they can collaborate' do
+      allow(helper).to receive(:can_collaborate_with_project?).and_return(true)
+
+      expect(subject).to be true
+    end
+
+    it 'user can not view editor if they cannot collaborate' do
+      allow(helper).to receive(:can_collaborate_with_project?).and_return(false)
+
+      expect(subject).to be false
+    end
+
+    it 'user can not view editor if feature is disabled' do
+      allow(helper).to receive(:can_collaborate_with_project?).and_return(true)
+      stub_feature_flags(ci_pipeline_editor_page: false)
+
+      expect(subject).to be false
+    end
+  end
+end

spec/support/shared_contexts/navbar_structure_context.rb

@@ -56,6 +56,7 @@ RSpec.shared_context 'project navbar structure' do
         nav_item: _('CI / CD'),
         nav_sub_items: [
           _('Pipelines'),
+          s_('Pipelines|Editor'),
           _('Jobs'),
           _('Artifacts'),
           _('Schedules')

spec/views/layouts/nav/sidebar/_project.html.haml_spec.rb

@@ -219,6 +219,22 @@ RSpec.describe 'layouts/nav/sidebar/_project' do
     end
   end
 
+  describe 'pipeline editor link' do
+    it 'shows the pipeline editor link' do
+      render
+
+      expect(rendered).to have_link('Editor', href: project_ci_pipeline_editor_path(project))
+    end
+
+    it 'does not show the pipeline editor link' do
+      allow(view).to receive(:can_view_pipeline_editor?).and_return(false)
+
+      render
+
+      expect(rendered).not_to have_link('Editor', href: project_ci_pipeline_editor_path(project))
+    end
+  end
+
   describe 'operations settings tab' do
     describe 'archive projects' do
       before do