Disable color selector if the user doesn\t have permission to edit epic

app/modules/components/color-selector/color-selector.controller.coffee

@@ -22,11 +22,19 @@ getDefaulColorList = taiga.getDefaulColorList
 
 
 class ColorSelectorController
-    constructor: () ->
+    @.$inject = [
+        "tgProjectService",
+    ]
+
+    constructor: (@projectService) ->
         @.colorList = getDefaulColorList()
         @.checkIsColorRequired()
         @.displayColorList = false
 
+    userCanChangeColor: () ->
+        return true if not @.requiredPerm
+        return @projectService.hasPermission(@.requiredPerm)
+
     checkIsColorRequired: () ->
         if !@.isColorRequired
             @.colorList = _.dropRight(@.colorList)

app/modules/components/color-selector/color-selector.directive.coffee

@@ -56,7 +56,8 @@ ColorSelectorDirective = ($timeout) ->
         bindToController: {
             isColorRequired: "=",
             onSelectColor: "&",
-            initColor: "="
+            initColor: "=",
+            requiredPerm: "@"
         },
         scope: {},
     }

app/modules/components/color-selector/color-selector.jade

@@ -1,4 +1,12 @@
-.color-selector
+//- Read only mode
+.color-selector(ng-if="!vm.userCanChangeColor()")
+    .tag-color.disabled.e2e-open-color-selector(
+        ng-class="{'empty-color': !vm.color}"
+        ng-style="{'background': vm.color}"
+    )
+
+//- Read & Edit mode
+.color-selector(ng-if="vm.userCanChangeColor()")
     .tag-color.e2e-open-color-selector(
         ng-click="vm.toggleColorList()"
         ng-class="{'empty-color': !vm.color}"

app/modules/components/color-selector/color-selector.scss

@@ -18,6 +18,9 @@
         border-radius: 0;
         margin: 0;
         transition: background .3s ease-out;
+        &.disabled {
+            cursor: auto;
+        }
         &.empty-color {
             @include empty-color(34);
         }

app/partials/epic/epic-detail.jade

@@ -23,6 +23,7 @@ div.wrapper(
                         is-color-required="true"
                         init-color="epic.color"
                         on-select-color="ctrl.onSelectColor(color)"
+                        required-perm="modify_epic"
                     )
                     tg-detail-header(
                         item="epic"