Add view pipeline button in pipeline editor

Changelog: added

app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue

 <script>
-import { GlIcon, GlLink, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
+import { GlButton, GlIcon, GlLink, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { truncateSha } from '~/lib/utils/text_utility';
 import { s__ } from '~/locale';
@@ -19,12 +19,14 @@ export const i18n = {
   pipelineInfo: s__(
     `Pipeline|Pipeline %{idStart}#%{idEnd} %{statusStart}%{statusEnd} for %{commitStart}%{commitEnd}`,
   ),
+  viewBtn: s__('Pipeline|View pipeline'),
 };
 
 export default {
   i18n,
   components: {
     CiIcon,
+    GlButton,
     GlIcon,
     GlLink,
     GlLoadingIcon,
@@ -98,7 +100,9 @@ export default {
 </script>
 
 <template>
-  <div class="gl-white-space-nowrap gl-max-w-full">
+  <div
+    class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-white-space-nowrap gl-max-w-full"
+  >
     <template v-if="showLoadingState">
       <gl-loading-icon class="gl-mr-auto gl-display-inline-block" size="sm" />
       <span data-testid="pipeline-loading-msg">{{ $options.i18n.fetchLoading }}</span>
@@ -108,6 +112,7 @@ export default {
       <span data-testid="pipeline-error-msg">{{ $options.i18n.fetchError }}</span>
     </template>
     <template v-else>
+      <div>
         <a :href="status.detailsPath" class="gl-mr-auto">
           <ci-icon :status="status" :size="16" />
         </a>
@@ -136,6 +141,18 @@ export default {
             </template>
           </gl-sprintf>
         </span>
+      </div>
+      <div>
+        <gl-button
+          target="_blank"
+          category="secondary"
+          variant="confirm"
+          :href="status.detailsPath"
+          data-testid="pipeline-view-btn"
+        >
+          {{ $options.i18n.viewBtn }}
+        </gl-button>
+      </div>
     </template>
   </div>
 </template>

locale/gitlab.pot

@@ -24630,6 +24630,9 @@ msgstr ""
 msgid "Pipeline|Variables"
 msgstr ""
 
+msgid "Pipeline|View pipeline"
+msgstr ""
+
 msgid "Pipeline|We are currently unable to fetch pipeline data"
 msgstr ""
 

spec/frontend/pipeline_editor/components/header/pipeline_status_spec.js

@@ -44,6 +44,7 @@ describe('Pipeline Status', () => {
   const findPipelineCommit = () => wrapper.find('[data-testid="pipeline-commit"]');
   const findPipelineErrorMsg = () => wrapper.find('[data-testid="pipeline-error-msg"]');
   const findPipelineLoadingMsg = () => wrapper.find('[data-testid="pipeline-loading-msg"]');
+  const findPipelineViewBtn = () => wrapper.find('[data-testid="pipeline-view-btn"]');
 
   beforeEach(() => {
     mockPipelineQuery = jest.fn();
@@ -96,11 +97,15 @@ describe('Pipeline Status', () => {
       });
 
       it('renders pipeline data', () => {
-        const { id } = mockProjectPipeline.pipeline;
+        const {
+          id,
+          detailedStatus: { detailsPath },
+        } = mockProjectPipeline.pipeline;
 
         expect(findCiIcon().exists()).toBe(true);
         expect(findPipelineId().text()).toBe(`#${id.match(/\d+/g)[0]}`);
         expect(findPipelineCommit().text()).toBe(mockCommitSha);
+        expect(findPipelineViewBtn().attributes('href')).toBe(detailsPath);
       });
     });
 
@@ -121,6 +126,7 @@ describe('Pipeline Status', () => {
         expect(findCiIcon().exists()).toBe(false);
         expect(findPipelineId().exists()).toBe(false);
         expect(findPipelineCommit().exists()).toBe(false);
+        expect(findPipelineViewBtn().exists()).toBe(false);
       });
     });
   });