1 files changed, 49 insertions, 20 deletions
diff --git a/app/assets/javascripts/pipelines/components/empty_state.vue b/app/assets/javascripts/pipelines/components/empty_state.vue
index 3db64339a62..10ac8c08bed 100644
--- a/app/assets/javascripts/pipelines/components/empty_state.vue
+++ b/app/assets/javascripts/pipelines/components/empty_state.vue
@@ -1,33 +1,62 @@
 <script>
-import pipelinesEmptyStateSVG from 'empty_states/icons/_pipelines_empty.svg';
-
-export default {
-  props: {
-    helpPagePath: {
-      type: String,
-      required: true,
+  export default {
+    name: 'PipelinesEmptyState',
+    props: {
+      helpPagePath: {
+        type: String,
+        required: true,
+      },
+      emptyStateSvgPath: {
+        type: String,
+        required: true,
+      },
+      canSetCi: {
+        type: Boolean,
+        required: true,
+      },
     },
-  },
-  data: () => ({ pipelinesEmptyStateSVG }),
-};
+  };
 </script>
-
 <template>
   <div class="row empty-state js-empty-state">
     <div class="col-xs-12">
-      <div class="svg-content" v-html="pipelinesEmptyStateSVG" />
+      <div class="svg-content svg-250">
+        <img :src="emptyStateSvgPath" />
+      </div>
     </div>
 
-    <div class="col-xs-12 text-center">
+    <div class="col-xs-12">
       <div class="text-content">
-        <h4>Build with confidence</h4>
-        <p>
-          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-primary 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>
-        <a :href="helpPagePath" class="btn btn-info">
-          Get started with Pipelines
-        </a>
+
       </div>
     </div>
   </div>