Add view to handle the case when user doesn’t have access to stage

3 files changed, 25 insertions, 5 deletions

diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index bb67dd429e2..0a20708dee9 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
@@ -76,12 +76,18 @@ $(() => {
           });
       },
       selectDefaultStage() {
-        this.selectStage(this.state.stages.first());
+        const stage = this.state.stages.first();
+        this.selectStage(stage);
       },
       selectStage(stage) {
         if (this.isLoadingStage) return;
         if (this.currentStage === stage) return;
 
+        if (!stage.isUserAllowed) {
+          cycleAnalyticsStore.setActiveStage(stage);
+          return;
+        }
+
         this.isLoadingStage = true;
         cycleAnalyticsStore.setStageEvents([]);
         cycleAnalyticsStore.setActiveStage(stage);
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js.es6 b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js.es6
index 64c24f71b87..b4815338622 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js.es6
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js.es6
@@ -25,6 +25,7 @@
 
       newData.stages.forEach((item) => {
         item.active = false;
+        item.isUserAllowed = true; // This should come from server
         item.component = `stage-${item.title.toLowerCase()}-component`;
       });
 
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index b6796511f49..b85f1076427 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -247,7 +247,8 @@
         padding-left: 16px;
       }
 
-      .stage-empty {
+      .stage-empty,
+      .not-available {
         color: $gl-text-color-light;
       }
     }
@@ -410,22 +411,34 @@
     }
   }
 
-  .empty-stage {
+  .empty-stage,
+  .no-access-stage {
     text-align: center;
     width: 75%;
     margin: 0 auto;
     padding-top: 130px;
     color: $gl-text-color-light;
 
+    h4 {
+      color: $gl-text-color;
+    }
+  }
+
+  .empty-stage {
     .icon-no-data {
       height: 36px;
       width: 78px;
       display: inline-block;
       margin-bottom: 20px;
     }
+  }
 
-    h4 {
-      color: $gl-text-color;
+  .no-access-stage {
+    .icon-lock {
+      height: 36px;
+      width: 78px;
+      display: inline-block;
+      margin-bottom: 20px;
     }
   }
 }