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

2 files changed, 8 insertions, 1 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`;
       });