✨ Add viewer role to token sets

frontend/src/app/main/ui/workspace/tokens/sets.cljs

@@ -73,16 +73,27 @@
       :default-value default-value}]))
 
 (mf/defc checkbox
-  [{:keys [checked aria-label on-click]}]
+  [{:keys [checked aria-label on-click disabled]}]
   (let [all? (true? checked)
         mixed? (= checked "mixed")
-        checked? (or all? mixed?)]
+        checked? (or all? mixed?)
+        on-click
+        (mf/use-fn
+         (mf/deps disabled)
+         (fn [e]
+           (when-not disabled
+             (on-click e))))]
     [:div {:role "checkbox"
            :aria-checked (dm/str checked)
+           :disabled disabled
+           :title (when disabled (tr "workspace.token.no-permisions-set"))
            :tab-index 0
            :class (stl/css-case :checkbox-style true
-                                :checkbox-checked-style checked?)
+                                :checkbox-checked-style checked?
+                                :checkbox-disabled-checked (and checked? disabled)
+                                :checkbox-disabled  disabled)
            :on-click on-click}
+
      (when checked?
        [:> icon*
         {:aria-label aria-label
@@ -94,13 +105,14 @@
   [{:keys [label tree-depth tree-path active? selected? collapsed? editing? on-toggle on-edit on-edit-reset on-edit-submit]}]
   (let [editing?' (editing? tree-path)
         active?' (active? tree-path)
+        can-edit?  (:can-edit (deref refs/permissions))
         on-context-menu
         (mf/use-fn
-         (mf/deps editing? tree-path)
+         (mf/deps editing? tree-path can-edit?)
          (fn [event]
            (dom/prevent-default event)
            (dom/stop-propagation event)
-           (when-not (editing? tree-path)
+           (when (and can-edit? (not editing?'))
              (st/emit!
               (wdt/show-token-set-context-menu
                {:position (dom/get-client-position event)
@@ -110,18 +122,26 @@
          (fn [event]
            (dom/stop-propagation event)
            (swap! collapsed? not)))
+
         on-double-click
         (mf/use-fn
-         (mf/deps tree-path)
-         #(on-edit tree-path))
+         (mf/deps tree-path can-edit?)
+         (fn []
+           (when can-edit?
+             (on-edit tree-path))))
+
         on-checkbox-click
         (mf/use-fn
-         (mf/deps on-toggle tree-path)
-         #(on-toggle tree-path))
+         (mf/deps on-toggle tree-path can-edit?)
+         (fn []
+           (when can-edit?
+             (on-toggle tree-path))))
+
         on-edit-submit'
         (mf/use-fn
-         (mf/deps tree-path on-edit-submit)
-         #(on-edit-submit tree-path %))]
+         (mf/deps tree-path on-edit-submit can-edit?)
+         (fn [e]
+           (when can-edit? (on-edit-submit tree-path e))))]
     [:div {:role "button"
            :data-testid "tokens-set-group-item"
            :style {"--tree-depth" tree-depth}
@@ -147,6 +167,7 @@
          label]
         [:& checkbox
          {:on-click on-checkbox-click
+          :disabled (not can-edit?)
           :checked (case active?'
                      :all true
                      :partial "mixed"
@@ -158,6 +179,7 @@
   (let [set-name (.-name set)
         editing?' (editing? tree-path)
         active?' (some? (active? set-name))
+        can-edit?  (:can-edit (deref refs/permissions))
         on-click
         (mf/use-fn
          (mf/deps editing?' tree-path)
@@ -167,11 +189,11 @@
              (on-select tree-path))))
         on-context-menu
         (mf/use-fn
-         (mf/deps editing?' tree-path)
+         (mf/deps editing?' tree-path can-edit?)
          (fn [event]
            (dom/prevent-default event)
            (dom/stop-propagation event)
-           (when-not editing?'
+           (when (and can-edit? (not editing?'))
              (st/emit!
               (wdt/show-token-set-context-menu
                {:position (dom/get-client-position event)
@@ -211,6 +233,7 @@
          label]
         [:& checkbox
          {:on-click on-checkbox-click
+          :disabled (not can-edit?)
           :arial-label (tr "workspace.token.select-set")
           :checked active?'}]])]))
 

frontend/src/app/main/ui/workspace/tokens/sets.scss

@@ -68,17 +68,28 @@
   height: $s-16;
   margin-inline: $s-6;
   background-color: var(--input-checkbox-background-color-rest);
-  border: 1px solid var(--input-checkbox-border-color-rest);
-  border-radius: 0.25rem;
+  border: $s-1 solid var(--input-checkbox-border-color-rest);
+  border-radius: $s-4;
   padding: 0;
 }
 
 .checkbox-checked-style {
   background-color: var(--input-border-color-active);
+  color: var(--color-background-secondary);
+}
+
+.checkbox-disabled {
+  border: $s-1 solid var(--color-background-quaternary);
+  background-color: var(--color-background-tertiary);
+}
+
+.checkbox-disabled-checked {
+  background-color: var(--color-accent-primary-muted);
+  color: var(--color-background-quaternary);
 }
 
 .check-icon {
-  color: var(--color-background-secondary);
+  color: currentColor;
 }
 
 .set-item-container:hover {

frontend/translations/en.po

@@ -6797,6 +6797,10 @@ msgstr "Define what token sets should be used as part of this theme option:"
 msgid "workspace.token.no-sets-yet"
 msgstr "There are no sets yet."
 
+#: src/app/main/ui/workspace/tokens/sets.cljs
+msgid "workspace.token.no-permisions-set"
+msgstr "You need to be an editor to activate / deactivate sets"
+
 #: src/app/main/ui/workspace/tokens/sets.cljs
 msgid "workspace.token.no-sets-create"
 msgstr "There are no sets defined yet. Create one first."

frontend/translations/es.po

@@ -6833,6 +6833,10 @@ msgstr "Duplicar token"
 msgid "workspace.token.edit"
 msgstr "Editar token"
 
+#: src/app/main/ui/workspace/tokens/sets.cljs
+msgid "workspace.token.no-permisions-set"
+msgstr "Debes ser editor para activar / desactivar sets"
+
 msgid "workspace.versions.button.save"
 msgstr "Guardar versión"