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,34 +112,47 @@ export default {
       <span data-testid="pipeline-error-msg">{{ $options.i18n.fetchError }}</span>
     </template>
     <template v-else>
-      <a :href="status.detailsPath" class="gl-mr-auto">
-        <ci-icon :status="status" :size="16" />
-      </a>
-      <span class="gl-font-weight-bold">
-        <gl-sprintf :message="$options.i18n.pipelineInfo">
-          <template #id="{ content }">
-            <gl-link
-              :href="status.detailsPath"
-              class="pipeline-id gl-font-weight-normal pipeline-number"
-              target="_blank"
-              data-testid="pipeline-id"
-            >
-              {{ content }}{{ pipelineId }}</gl-link
-            >
-          </template>
-          <template #status>{{ status.text }}</template>
-          <template #commit>
-            <gl-link
-              :href="pipeline.commitPath"
-              class="commit-sha gl-font-weight-normal"
-              target="_blank"
-              data-testid="pipeline-commit"
-            >
-              {{ shortSha }}
-            </gl-link>
-          </template>
-        </gl-sprintf>
-      </span>
+      <div>
+        <a :href="status.detailsPath" class="gl-mr-auto">
+          <ci-icon :status="status" :size="16" />
+        </a>
+        <span class="gl-font-weight-bold">
+          <gl-sprintf :message="$options.i18n.pipelineInfo">
+            <template #id="{ content }">
+              <gl-link
+                :href="status.detailsPath"
+                class="pipeline-id gl-font-weight-normal pipeline-number"
+                target="_blank"
+                data-testid="pipeline-id"
+              >
+                {{ content }}{{ pipelineId }}</gl-link
+              >
+            </template>
+            <template #status>{{ status.text }}</template>
+            <template #commit>
+              <gl-link
+                :href="pipeline.commitPath"
+                class="commit-sha gl-font-weight-normal"
+                target="_blank"
+                data-testid="pipeline-commit"
+              >
+                {{ shortSha }}
+              </gl-link>
+            </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);
       });
     });
   });