added external link icon

4 files changed, 38 insertions, 4 deletions

diff --git a/app/assets/javascripts/ide/components/jobs/item.vue b/app/assets/javascripts/ide/components/jobs/item.vue
index 7e9c42860ed..42b06945539 100644
--- a/app/assets/javascripts/ide/components/jobs/item.vue
+++ b/app/assets/javascripts/ide/components/jobs/item.vue
@@ -1,8 +1,10 @@
 <script>
+import Icon from '../../../vue_shared/components/icon.vue';
 import CiIcon from '../../../vue_shared/components/ci_icon.vue';
 
 export default {
   components: {
+    Icon,
     CiIcon,
   },
   props: {
@@ -31,8 +33,13 @@ export default {
       <a
         :href="job.path"
         target="_blank"
-        v-text="jobId"
+        class="ide-external-link"
       >
+        {{ jobId }}
+        <icon
+          name="external-link"
+          :size="12"
+        />
       </a>
     </span>
   </div>
diff --git a/app/assets/javascripts/ide/components/pipelines/list.vue b/app/assets/javascripts/ide/components/pipelines/list.vue
index da5220248e3..6aacf9201b8 100644
--- a/app/assets/javascripts/ide/components/pipelines/list.vue
+++ b/app/assets/javascripts/ide/components/pipelines/list.vue
@@ -1,6 +1,7 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
+import Icon from '../../../vue_shared/components/icon.vue';
 import CiIcon from '../../../vue_shared/components/ci_icon.vue';
 import Tabs from '../../../vue_shared/components/tabs/tabs';
 import Tab from '../../../vue_shared/components/tabs/tab.vue';
@@ -9,13 +10,14 @@ import JobsList from '../jobs/list.vue';
 export default {
   components: {
     LoadingIcon,
+    Icon,
     CiIcon,
     Tabs,
     Tab,
     JobsList,
   },
   computed: {
-    ...mapGetters('pipelines', ['jobsCount', 'failedJobsCount', 'failedStages']),
+    ...mapGetters('pipelines', ['jobsCount', 'failedJobsCount', 'failedStages', 'pipelineFailed']),
     ...mapState('pipelines', ['isLoadingPipeline', 'latestPipeline', 'stages', 'isLoadingJobs']),
   },
   created() {
@@ -49,13 +51,20 @@ export default {
           <a
             :href="latestPipeline.path"
             target="_blank"
+            class="ide-external-link"
           >
             #{{ latestPipeline.id }}
+            <icon
+              name="external-link"
+              :size="12"
+            />
           </a>
         </span>
       </header>
       <tabs>
-        <tab active>
+        <tab
+          :active="!pipelineFailed"
+        >
           <template slot="title">
             Jobs
             <span
@@ -70,7 +79,9 @@ export default {
             :stages="stages"
           />
         </tab>
-        <tab>
+        <tab
+          :active="pipelineFailed"
+        >
           <template slot="title">
             Failed Jobs
             <span
diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/getters.js b/app/assets/javascripts/ide/stores/modules/pipelines/getters.js
index 95bed0f9050..fea77b661b5 100644
--- a/app/assets/javascripts/ide/stores/modules/pipelines/getters.js
+++ b/app/assets/javascripts/ide/stores/modules/pipelines/getters.js
@@ -1,5 +1,8 @@
 export const hasLatestPipeline = state => !state.isLoadingPipeline && !!state.latestPipeline;
 
+export const pipelineFailed = state =>
+  state.latestPipeline && state.latestPipeline.details.status.text === 'failed';
+
 export const failedStages = state =>
   state.stages.filter(stage => stage.status.text === 'failed').map(stage => ({
     ...stage,
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 4f0259e9105..0c6e3d42f6b 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -1135,3 +1135,16 @@
     white-space: nowrap;
   }
 }
+
+.ide-external-link {
+  svg {
+    display: none;
+  }
+
+  &:hover,
+  &:focus {
+    svg {
+      display: inline-block;
+    }
+  }
+}