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

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);

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`;
       });
 

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;
     }
   }
 }

app/views/projects/cycle_analytics/_empty_stage.html.haml

 .empty-stage-container
   .empty-stage
     .icon-no-data
-      = render "shared/icons/icon_no_data.svg"
+      = custom_icon ('icon_no_data')
     %h4 We don’t have enough data to show this stage.
     %p
       The test phase measures the median time to run the entire pipeline for that project.

app/views/projects/cycle_analytics/_no_access.html.haml

+.no-access-stage-container
+  .no-access-stage
+    .icon-lock
+      = custom_icon ('icon_lock')
+    %h4 You need permission.
+    %p
+      Want to see the data? Please ask administer for access.

app/views/projects/cycle_analytics/show.html.haml

@@ -72,14 +72,20 @@
                 .stage-name
                   {{ stage.title }}
                 .stage-median
-                  %template{ "v-if" => "stage.value" }
+                  %template{ "v-if" => "stage.isUserAllowed" }
+                    %span{ "v-if" => "stage.value" }
                       {{ stage.value }}
-                  %template{ "v-else" => true }
-                    %span.stage-empty
+                    %span.stage-empty{ "v-else" => true }
                       No enough data
+                  %template{ "v-else" => true }
+                    %span.not-available
+                      Not available
           .section.stage-events
             %template{ "v-if" => "isLoadingStage" }
-              = icon("spinner spin", "v-show" => "isLoadingStage")
+              = icon("spinner spin")
+            %template{ "v-if" => "currentStage && !currentStage.isUserAllowed" }
+              = render partial: "no_access"
+            %template{ "v-else" => true }
               %template{ "v-if" => "isEmptyStage && !isLoadingStage" }
                 = render partial: "empty_stage"
               %template{ "v-if" => "state.events.length && !isLoadingStage && !isEmptyStage" }

app/views/shared/icons/_icon_lock.svg

+<svg width="46px" height="54px" viewBox="227 0 46 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="0" y="20" width="46" height="34" rx="8"></rect>
+        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="46" height="34" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <path d="M29,16 C29,8.2680135 22.7319865,2 15,2 C7.2680135,2 1,8.2680135 1,16" id="path-3"></path>
+        <mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="28" height="14" fill="white">
+            <use xlink:href="#path-3"></use>
+        </mask>
+    </defs>
+    <g id="locker" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(227.000000, 0.000000)">
+        <g id="Group-8">
+            <use id="Rectangle-14" stroke="#B5A7DD" mask="url(#mask-2)" stroke-width="6" xlink:href="#path-1"></use>
+            <g id="Group-7" transform="translate(8.000000, 0.000000)">
+                <use id="Oval-3" stroke="#B5A7DD" mask="url(#mask-4)" stroke-width="6" xlink:href="#path-3"></use>
+                <rect id="Rectangle-13" fill="#B5A7DD" x="1" y="16" width="3" height="6"></rect>
+                <rect id="Rectangle-13-Copy" fill="#B5A7DD" x="26" y="16" width="3" height="6"></rect>
+            </g>
+            <path d="M25,37.4648712 C26.1956027,36.7732524 27,35.4805647 27,34 C27,31.790861 25.209139,30 23,30 C20.790861,30 19,31.790861 19,34 C19,35.4805647 19.8043973,36.7732524 21,37.4648712 L21,41.0026083 C21,42.1041422 21.8954305,43 23,43 C24.1122704,43 25,42.1057373 25,41.0026083 L25,37.4648712 Z" id="Combined-Shape" fill="#6B4FBB"></path>
+        </g>
+    </g>
+</svg>