Audit and update buttons on Projects::PipelinesController#index

app/assets/javascripts/commit/pipelines/pipelines_table.vue

@@ -81,7 +81,7 @@ export default {
       return this.hasError && !this.isLoading;
     },
     /**
-     * The Run Pipeline button can only be rendered when:
+     * The "Run pipeline" button can only be rendered when:
      * - In MR view -  we use `canCreatePipelineInTargetProject` for that purpose
      * - If the latest pipeline has the `detached_merge_request_pipeline` flag
      *
@@ -148,7 +148,7 @@ export default {
       }
     },
     /**
-     * When the user clicks on the Run Pipeline button
+     * When the user clicks on the "Run pipeline" button
      * we need to make a post request and
      * to update the table content once the request is finished.
      *
@@ -177,7 +177,7 @@ export default {
   <div class="content-list pipelines">
     <gl-loading-icon
       v-if="isLoading"
-      :label="s__('Pipelines|Loading Pipelines')"
+      :label="s__('Pipelines|Loading pipelines')"
       size="lg"
       class="prepend-top-20"
     />
@@ -197,12 +197,12 @@ export default {
         block
         class="gl-mt-3 gl-mb-3"
         :class="pipelineButtonClass"
-        variant="success"
+        variant="confirm"
         data-testid="run_pipeline_button_mobile"
         :loading="state.isRunningMergeRequestPipeline"
         @click="tryRunPipeline"
       >
-        {{ s__('Pipelines|Run Pipeline') }}
+        {{ s__('Pipeline|Run pipeline') }}
       </gl-button>
 
       <pipelines-table-component
@@ -213,12 +213,12 @@ export default {
         <template #table-header-actions>
           <div v-if="canRenderPipelineButton" class="gl-text-right">
             <gl-button
-              variant="success"
+              variant="confirm"
               data-testid="run_pipeline_button"
               :loading="state.isRunningMergeRequestPipeline"
               @click="tryRunPipeline"
             >
-              {{ s__('Pipelines|Run Pipeline') }}
+              {{ s__('Pipeline|Run pipeline') }}
             </gl-button>
           </div>
         </template>
@@ -231,7 +231,7 @@ export default {
       ref="modal"
       :modal-id="modalId"
       :title="s__('Pipelines|Are you sure you want to run this pipeline?')"
-      :ok-title="s__('Pipelines|Run Pipeline')"
+      :ok-title="s__('Pipeline|Run pipeline')"
       ok-variant="danger"
       @ok="onClickRunPipeline"
     >

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

@@ -444,18 +444,16 @@ export default {
         </gl-sprintf></template
       >
     </gl-form-group>
-    <div
-      class="gl-border-t-solid gl-border-gray-100 gl-border-t-1 gl-p-5 gl-bg-gray-10 gl-display-flex gl-justify-content-space-between"
-    >
+    <div class="gl-pt-5 gl-display-flex">
       <gl-button
         type="submit"
         category="primary"
         variant="confirm"
-        class="js-no-auto-disable"
+        class="js-no-auto-disable gl-mr-3"
         data-qa-selector="run_pipeline_button"
         data-testid="run_pipeline_button"
         :disabled="submitted"
-        >{{ s__('Pipeline|Run Pipeline') }}</gl-button
+        >{{ s__('Pipeline|Run pipeline') }}</gl-button
       >
       <gl-button :href="pipelinesPath">{{ __('Cancel') }}</gl-button>
     </div>

app/assets/javascripts/pipelines/components/pipelines_list/nav_controls.vue

@@ -40,18 +40,6 @@ export default {
 </script>
 <template>
   <div class="nav-controls">
-    <gl-button
-      v-if="newPipelinePath"
-      :href="newPipelinePath"
-      variant="success"
-      category="primary"
-      class="js-run-pipeline"
-      data-testid="run-pipeline-button"
-      data-qa-selector="run_pipeline_button"
-    >
-      {{ s__('Pipelines|Run Pipeline') }}
-    </gl-button>
-
     <gl-button
       v-if="resetCachePath"
       :loading="isResetCacheButtonLoading"
@@ -59,11 +47,23 @@ export default {
       data-testid="clear-cache-button"
       @click="onClickResetCache"
     >
-      {{ s__('Pipelines|Clear Runner Caches') }}
+      {{ s__('Pipelines|Clear runner caches') }}
     </gl-button>
 
     <gl-button v-if="ciLintPath" :href="ciLintPath" class="js-ci-lint" data-testid="ci-lint-button">
-      {{ s__('Pipelines|CI Lint') }}
+      {{ s__('Pipelines|CI lint') }}
+    </gl-button>
+
+    <gl-button
+      v-if="newPipelinePath"
+      :href="newPipelinePath"
+      variant="confirm"
+      category="primary"
+      class="js-run-pipeline"
+      data-testid="run-pipeline-button"
+      data-qa-selector="run_pipeline_button"
+    >
+      {{ s__('Pipeline|Run pipeline') }}
     </gl-button>
   </div>
 </template>

app/views/projects/pipelines/new.html.haml

 - breadcrumb_title _('Pipelines')
-- page_title s_('Pipeline|Run Pipeline')
+- page_title s_('Pipeline|Run pipeline')
 - settings_link = link_to _('CI/CD settings'), project_settings_ci_cd_path(@project)
 
 %h3.page-title
-  = s_('Pipeline|Run Pipeline')
+  = s_('Pipeline|Run pipeline')
 %hr
 
 - if Feature.enabled?(:new_pipeline_form, @project, default_enabled: :yaml)
@@ -49,7 +49,7 @@
           = (s_("Pipeline|Specify variable values to be used in this run. The values specified in %{settings_link} will be used by default.") % {settings_link: settings_link}).html_safe
 
     .form-actions
-      = f.submit s_('Pipeline|Run Pipeline'), class: 'btn btn-success js-variables-save-button'
-      = link_to _('Cancel'), project_pipelines_path(@project), class: 'btn btn-default float-right'
+      = f.submit s_('Pipeline|Run pipeline'), class: 'btn gl-button btn-confirm gl-mr-3 js-variables-save-button'
+      = link_to _('Cancel'), project_pipelines_path(@project), class: 'btn gl-button btn-default'
 
   %script#availableRefs{ type: "application/json" }= @project.repository.ref_names.to_json.html_safe

changelogs/unreleased/273293-fy21q4-foundations-kr2-audit-and-update-buttons-on-projects-pipeli.yml

+---
+title: Updating success button to confirm variant and reordering buttons per Pajamas
+  Design System guidelines for buttons
+merge_request: 58112
+author:
+type: other

doc/ci/merge_request_pipelines/index.md

@@ -197,7 +197,7 @@ could mistakenly trust the merge request because it passed a faked pipeline.
 Parent project members with at least [Developer permissions](../../user/permissions.md)
 can create pipelines in the parent project for merge requests
 from a forked project. In the merge request, go to the **Pipelines** and click
-**Run Pipeline** button.
+**Run pipeline** button.
 
 WARNING:
 Fork merge requests could contain malicious code that tries to steal secrets in the

doc/ci/pipelines/index.md

@@ -133,8 +133,8 @@ operation of the pipeline.
 To execute a pipeline manually:
 
 1. Navigate to your project's **CI/CD > Pipelines**.
-1. Select the **Run Pipeline** button.
-1. On the **Run Pipeline** page:
+1. Select the **Run pipeline** button.
+1. On the **Run pipeline** page:
     1. Select the branch or tag to run the pipeline for in the **Run for branch name or tag** field.
     1. Enter any [environment variables](../variables/README.md) required for the pipeline run.
        You can set specific variables to have their [values prefilled in the form](#prefill-variables-in-manual-pipelines).

doc/development/cicd/index.md

@@ -23,7 +23,7 @@ On the left side we have the events that can trigger a pipeline based on various
 
 - A `git push` is the most common event that triggers a pipeline.
 - The [Web API](../../api/pipelines.md#create-a-new-pipeline).
-- A user clicking the "Run Pipeline" button in the UI.
+- A user clicking the "Run pipeline" button in the UI.
 - When a [merge request is created or updated](../../ci/merge_request_pipelines/index.md#pipelines-for-merge-requests).
 - When an MR is added to a [Merge Train](../../ci/merge_request_pipelines/pipelines_for_merged_results/merge_trains/index.md#merge-trains).
 - A [scheduled pipeline](../../ci/pipelines/schedules.md#pipeline-schedules).

doc/development/code_review.md

@@ -418,7 +418,7 @@ If the MR source branch is more than 100 commits behind the target branch, ask t
 Review links and images, especially in documentation MRs.
 When in doubt, ask someone from `@gitlab-com/gl-security/appsec` to review the merge request **before starting any merge request pipeline**.
 
-- Start a new merge request pipeline with the `Run Pipeline` button in the merge
+- Start a new merge request pipeline with the `Run pipeline` button in the merge
   request's "Pipelines" tab, and enable "Merge When Pipeline Succeeds" (MWPS).
   Note that:
   - If **[master is broken](https://about.gitlab.com/handbook/engineering/workflow/#broken-master),

doc/development/documentation/site_architecture/index.md

@@ -119,7 +119,7 @@ pipeline in the main `gitlab` repository as well as in `gitlab-docs`. Create an
 a different name first and test it to ensure you do not break the pipelines.
 
 1. In [`gitlab-docs`](https://gitlab.com/gitlab-org/gitlab-docs), go to **{rocket}** **CI/CD > Pipelines**.
-1. Click the **Run Pipeline** button.
+1. Click the **Run pipeline** button.
 1. See that a new pipeline is running. The jobs that build the images are in the first
    stage, `build-images`. You can click the pipeline number to see the larger pipeline
    graph, or click the first (`build-images`) stage in the mini pipeline graph to

doc/topics/autodevops/stages.md

@@ -732,7 +732,7 @@ To use Auto Monitoring:
 
 1. [Install and configure the Auto DevOps requirements](requirements.md).
 1. [Enable Auto DevOps](index.md#enable-or-disable-auto-devops), if you haven't done already.
-1. Navigate to your project's **{rocket}** **CI/CD > Pipelines** and click **Run Pipeline**.
+1. Navigate to your project's **{rocket}** **CI/CD > Pipelines** and click **Run pipeline**.
 1. After the pipeline finishes successfully, open the
    [monitoring dashboard for a deployed environment](../../ci/environments/index.md#monitoring-environments)
    to view the metrics of your deployed application. To view the metrics of the

doc/user/project/merge_requests/code_quality.md

@@ -246,7 +246,7 @@ This can be done:
 - For a single pipeline run:
 
   1. Go to **CI/CD > Pipelines**
-  1. Click **Run Pipeline**
+  1. Click **Run pipeline**
   1. Add `CODE_QUALITY_DISABLED` as the variable key, with any value.
 
 ### Using with merge request pipelines

locale/gitlab.pot

@@ -22893,13 +22893,13 @@ msgstr ""
 msgid "Pipelines|By revoking a trigger you will break any processes making use of it. Are you sure?"
 msgstr ""
 
-msgid "Pipelines|CI Lint"
+msgid "Pipelines|CI lint"
 msgstr ""
 
 msgid "Pipelines|Child pipeline"
 msgstr ""
 
-msgid "Pipelines|Clear Runner Caches"
+msgid "Pipelines|Clear runner caches"
 msgstr ""
 
 msgid "Pipelines|Continuous deployment template to test and deploy your %{name} project."
@@ -22947,6 +22947,9 @@ msgstr ""
 msgid "Pipelines|Loading Pipelines"
 msgstr ""
 
+msgid "Pipelines|Loading pipelines"
+msgstr ""
+
 msgid "Pipelines|Merged YAML is view only"
 msgstr ""
 
@@ -22968,9 +22971,6 @@ msgstr ""
 msgid "Pipelines|Revoke"
 msgstr ""
 
-msgid "Pipelines|Run Pipeline"
-msgstr ""
-
 msgid "Pipelines|Something went wrong while cleaning runners cache."
 msgstr ""
 
@@ -23124,15 +23124,15 @@ msgstr ""
 msgid "Pipeline|Raw text search is not currently supported. Please use the available search tokens."
 msgstr ""
 
-msgid "Pipeline|Run Pipeline"
-msgstr ""
-
 msgid "Pipeline|Run for"
 msgstr ""
 
 msgid "Pipeline|Run for branch name or tag"
 msgstr ""
 
+msgid "Pipeline|Run pipeline"
+msgstr ""
+
 msgid "Pipeline|Running"
 msgstr ""
 

spec/features/merge_request/user_sees_pipelines_spec.rb

@@ -41,7 +41,7 @@ RSpec.describe 'Merge request > User sees pipelines', :js do
       context 'with a detached merge request pipeline' do
         let(:merge_request) { create(:merge_request, :with_detached_merge_request_pipeline) }
 
-        it 'displays the Run Pipeline button' do
+        it 'displays the "Run pipeline" button' do
           visit project_merge_request_path(project, merge_request)
 
           page.within('.merge-request-tabs') do
@@ -50,14 +50,14 @@ RSpec.describe 'Merge request > User sees pipelines', :js do
 
           wait_for_requests
 
-          expect(page.find('[data-testid="run_pipeline_button"]')).to have_text('Run Pipeline')
+          expect(page.find('[data-testid="run_pipeline_button"]')).to have_text('Run pipeline')
         end
       end
 
       context 'with a merged results pipeline' do
         let(:merge_request) { create(:merge_request, :with_merge_request_pipeline) }
 
-        it 'displays the Run Pipeline button' do
+        it 'displays the "Run pipeline" button' do
           visit project_merge_request_path(project, merge_request)
 
           page.within('.merge-request-tabs') do
@@ -66,7 +66,7 @@ RSpec.describe 'Merge request > User sees pipelines', :js do
 
           wait_for_requests
 
-          expect(page.find('[data-testid="run_pipeline_button"]')).to have_text('Run Pipeline')
+          expect(page.find('[data-testid="run_pipeline_button"]')).to have_text('Run pipeline')
         end
       end
     end
@@ -131,7 +131,7 @@ RSpec.describe 'Merge request > User sees pipelines', :js do
         visit project_merge_request_path(parent_project, merge_request)
 
         create_merge_request_pipeline
-        act_on_security_warning(action: 'Run Pipeline')
+        act_on_security_warning(action: 'Run pipeline')
 
         check_pipeline(expected_project: parent_project)
         check_head_pipeline(expected_project: parent_project)
@@ -175,7 +175,7 @@ RSpec.describe 'Merge request > User sees pipelines', :js do
 
     def create_merge_request_pipeline
       page.within('.merge-request-tabs') { click_link('Pipelines') }
-      click_button('Run Pipeline')
+      click_button('Run pipeline')
     end
 
     def check_pipeline(expected_project:)

spec/features/projects/pipelines/pipelines_spec.rb

@@ -93,12 +93,12 @@ RSpec.describe 'Pipelines', :js do
           wait_for_requests
         end
 
-        it 'renders run pipeline link' do
-          expect(page).to have_link('Run Pipeline')
+        it 'renders "CI lint" link' do
+          expect(page).to have_link('CI lint')
         end
 
-        it 'renders ci lint link' do
-          expect(page).to have_link('CI Lint')
+        it 'renders "Run pipeline" link' do
+          expect(page).to have_link('Run pipeline')
         end
       end
 
@@ -676,7 +676,7 @@ RSpec.describe 'Pipelines', :js do
           end
 
           it 'creates a new pipeline' do
-            expect { click_on 'Run Pipeline' }
+            expect { click_on 'Run pipeline' }
               .to change { Ci::Pipeline.count }.by(1)
 
             expect(Ci::Pipeline.last).to be_web
@@ -689,7 +689,7 @@ RSpec.describe 'Pipelines', :js do
                 fill_in "Input variable value", with: "value"
               end
 
-              expect { click_on 'Run Pipeline' }
+              expect { click_on 'Run pipeline' }
                 .to change { Ci::Pipeline.count }.by(1)
 
               expect(Ci::Pipeline.last.variables.map { |var| var.slice(:key, :secret_value) })
@@ -700,7 +700,7 @@ RSpec.describe 'Pipelines', :js do
 
         context 'without gitlab-ci.yml' do
           before do
-            click_on 'Run Pipeline'
+            click_on 'Run pipeline'
           end
 
           it { expect(page).to have_content('Missing CI config file') }
@@ -713,44 +713,13 @@ RSpec.describe 'Pipelines', :js do
               click_link 'master'
             end
 
-            expect { click_on 'Run Pipeline' }
+            expect { click_on 'Run pipeline' }
               .to change { Ci::Pipeline.count }.by(1)
           end
         end
       end
     end
 
-    describe 'Run Pipelines' do
-      let(:project) { create(:project, :repository) }
-
-      before do
-        stub_feature_flags(new_pipeline_form: false)
-        visit new_project_pipeline_path(project)
-      end
-
-      describe 'new pipeline page' do
-        it 'has field to add a new pipeline' do
-          expect(page).to have_selector('.js-branch-select')
-          expect(find('.js-branch-select')).to have_content project.default_branch
-          expect(page).to have_content('Run for')
-        end
-      end
-
-      describe 'find pipelines' do
-        it 'shows filtered pipelines', :js do
-          click_button project.default_branch
-
-          page.within '.dropdown-menu' do
-            find('.dropdown-input-field').native.send_keys('fix')
-
-            page.within '.dropdown-content' do
-              expect(page).to have_content('fix')
-            end
-          end
-        end
-      end
-    end
-
     describe 'Reset runner caches' do
       let(:project) { create(:project, :repository) }
 
@@ -761,7 +730,7 @@ RSpec.describe 'Pipelines', :js do
       end
 
       it 'has a clear caches button' do
-        expect(page).to have_button 'Clear Runner Caches'
+        expect(page).to have_button 'Clear runner caches'
       end
 
       describe 'user clicks the button' do
@@ -771,7 +740,7 @@ RSpec.describe 'Pipelines', :js do
           end
 
           it 'increments jobs_cache_index' do
-            click_button 'Clear Runner Caches'
+            click_button 'Clear runner caches'
             wait_for_requests
             expect(page.find('.flash-notice')).to have_content 'Project cache successfully reset.'
           end
@@ -779,7 +748,7 @@ RSpec.describe 'Pipelines', :js do
 
         context 'when project does not have jobs_cache_index' do
           it 'sets jobs_cache_index to 1' do
-            click_button 'Clear Runner Caches'
+            click_button 'Clear runner caches'
             wait_for_requests
             expect(page.find('.flash-notice')).to have_content 'Project cache successfully reset.'
           end
@@ -787,6 +756,37 @@ RSpec.describe 'Pipelines', :js do
       end
     end
 
+    describe 'Run Pipelines' do
+      let(:project) { create(:project, :repository) }
+
+      before do
+        stub_feature_flags(new_pipeline_form: false)
+        visit new_project_pipeline_path(project)
+      end
+
+      describe 'new pipeline page' do
+        it 'has field to add a new pipeline' do
+          expect(page).to have_selector('.js-branch-select')
+          expect(find('.js-branch-select')).to have_content project.default_branch
+          expect(page).to have_content('Run for')
+        end
+      end
+
+      describe 'find pipelines' do
+        it 'shows filtered pipelines', :js do
+          click_button project.default_branch
+
+          page.within '.dropdown-menu' do
+            find('.dropdown-input-field').native.send_keys('fix')
+
+            page.within '.dropdown-content' do
+              expect(page).to have_content('fix')
+            end
+          end
+        end
+      end
+    end
+
     describe 'Empty State' do
       let(:project) { create(:project, :repository) }
 

spec/frontend/pipelines/nav_controls_spec.js

@@ -29,7 +29,7 @@ describe('Pipelines Nav Controls', () => {
     createComponent(mockData);
 
     const runPipeline = findRunPipeline();
-    expect(runPipeline.text()).toContain('Run Pipeline');
+    expect(runPipeline.text()).toContain('Run pipeline');
     expect(runPipeline.attributes('href')).toBe(mockData.newPipelinePath);
   });
 
@@ -55,7 +55,7 @@ describe('Pipelines Nav Controls', () => {
 
     createComponent(mockData);
 
-    expect(wrapper.find('.js-ci-lint').text().trim()).toContain('CI Lint');
+    expect(wrapper.find('.js-ci-lint').text().trim()).toContain('CI lint');
     expect(wrapper.find('.js-ci-lint').attributes('href')).toBe(mockData.ciLintPath);
   });
 
@@ -70,7 +70,7 @@ describe('Pipelines Nav Controls', () => {
     });
 
     it('should render button for resetting runner caches', () => {
-      expect(wrapper.find('.js-clear-cache').text().trim()).toContain('Clear Runner Caches');
+      expect(wrapper.find('.js-clear-cache').text().trim()).toContain('Clear runner caches');
     });
 
     it('should emit postAction event when reset runner cache button is clicked', async () => {

spec/frontend/pipelines/pipelines_spec.js

@@ -191,16 +191,16 @@ describe('Pipelines', () => {
         expect(findNavigationControls().exists()).toBe(true);
       });
 
-      it('renders Run Pipeline link', () => {
+      it('renders Run pipeline link', () => {
         expect(findRunPipelineButton().attributes('href')).toBe(paths.newPipelinePath);
       });
 
-      it('renders CI Lint link', () => {
+      it('renders CI lint link', () => {
         expect(findCiLintButton().attributes('href')).toBe(paths.ciLintPath);
       });
 
-      it('renders Clear Runner Cache button', () => {
-        expect(findCleanCacheButton().text()).toBe('Clear Runner Caches');
+      it('renders Clear runner cache button', () => {
+        expect(findCleanCacheButton().text()).toBe('Clear runner caches');
       });
 
       it('renders pipelines in a table', () => {
@@ -499,16 +499,16 @@ describe('Pipelines', () => {
         expect(findTab('all').text()).toMatchInterpolatedText('All 0');
       });
 
-      it('renders Run Pipeline link', () => {
+      it('renders Run pipeline link', () => {
         expect(findRunPipelineButton().attributes('href')).toBe(paths.newPipelinePath);
       });
 
-      it('renders CI Lint link', () => {
+      it('renders CI lint link', () => {
         expect(findCiLintButton().attributes('href')).toBe(paths.ciLintPath);
       });
 
-      it('renders Clear Runner Cache button', () => {
-        expect(findCleanCacheButton().text()).toBe('Clear Runner Caches');
+      it('renders Clear runner cache button', () => {
+        expect(findCleanCacheButton().text()).toBe('Clear runner caches');
       });
 
       it('renders empty state', () => {
@@ -714,7 +714,7 @@ describe('Pipelines', () => {
         expect(findRunPipelineButton().attributes('href')).toBe(paths.newPipelinePath);
 
         expect(findCiLintButton().attributes('href')).toBe(paths.ciLintPath);
-        expect(findCleanCacheButton().text()).toBe('Clear Runner Caches');
+        expect(findCleanCacheButton().text()).toBe('Clear runner caches');
       });
 
       it('shows error state', () => {