Manage empty states in Pipelines page

Adds i18n
Adds test

Fix broken tests

Fixes empty tab state for external CI

1 files changed, 34 insertions, 15 deletions

diff --git a/app/assets/javascripts/pipelines/components/empty_state.vue b/app/assets/javascripts/pipelines/components/empty_state.vue
index dfaa2574091..51f05c7827e 100644
--- a/app/assets/javascripts/pipelines/components/empty_state.vue
+++ b/app/assets/javascripts/pipelines/components/empty_state.vue
@@ -1,5 +1,6 @@
 <script>
   export default {
+    name: 'PipelinesEmptyState',
     props: {
       helpPagePath: {
         type: String,
@@ -9,6 +10,10 @@
         type: String,
         required: true,
       },
+      canSetCi: {
+        type: Boolean,
+        required: true,
+      },
     },
   };
 </script>
@@ -22,22 +27,36 @@
 
     <div class="col-xs-12">
       <div class="text-content">
-        <h4 class="text-center">
-          {{ s__("Pipelines|Build with confidence") }}
-        </h4>
-        <p>
-          {{ s__(`Pipelines|Continous Integration can help
-catch bugs by running your tests automatically,
-while Continuous Deployment can help you deliver code to your product environment.`) }}
+
+        <template v-if="canSetCi">
+          <h4 class="text-center">
+            {{ s__('Pipelines|Build with confidence') }}
+          </h4>
+
+          <p>
+            {{ s__(`Pipelines|Continous Integration can help
+                catch bugs by running your tests automatically,
+                while Continuous Deployment can help you deliver
+                code to your product environment.`) }}
+          </p>
+
+          <div class="text-center">
+            <a
+              :href="helpPagePath"
+              class="btn btn-info js-get-started-pipelines"
+            >
+              {{ s__('Pipelines|Get started with Pipelines') }}
+            </a>
+          </div>
+        </template>
+
+        <p
+          v-else
+          class="text-center"
+        >
+          {{ s__('Pipelines|This project is not currently set up to run pipelines.') }}
         </p>
-        <div class="text-center">
-          <a
-            :href="helpPagePath"
-            class="btn btn-info"
-          >
-            {{ s__("Pipelines|Get started with Pipelines") }}
-          </a>
-        </div>
+
       </div>
     </div>
   </div>