Improve option to mark all notifications read (#16044)

- [x] Use correct icon to mark notifications as read
- [x] Add support for the disabled state in action drawer actions
- [x] Update quo2 preview `drawers` > `action-drawers`
- [x] Rewrite the action drawer component spec to use our test helpers

Fixes https://github.com/status-im/status-mobile/issues/14983

src/quo2/components/drawers/action_drawers/component_spec.cljs

@@ -1,53 +1,62 @@
 (ns quo2.components.drawers.action-drawers.component-spec
-  (:require ["@testing-library/react-native" :as rtl]
+  (:require [quo2.components.drawers.action-drawers.view :as action-drawer]
-            [quo2.components.drawers.action-drawers.view :as action-drawer]
+            [test-helpers.component :as h]))
-            [reagent.core :as reagent]))
 
-(defn render-action-drawer
+(h/describe "action drawer"
-  ([options]
+  (h/test "default render"
-   (rtl/render (reagent/as-element [action-drawer/action-drawer options]))))
+    (h/render [action-drawer/action-drawer
+               [[{:icon  :i/friend
+                  :label "a sample label"}]]])
+    (h/is-truthy (h/get-by-text "a sample label")))
 
-(js/global.test "action-drawer renders with elements label displaying"
+  (h/test "renders with elements sub-label displaying"
-  (fn []
+    (h/render [action-drawer/action-drawer
-    (render-action-drawer [[{:icon  :i/friend
+               [[{:icon      :i/friend
-                             :label "a sample label"}]])
-    (-> (js/expect (rtl/screen.getByText "a sample label"))
-        (.toBeTruthy))))
-
-(js/global.test "action-drawer renders with elements sub-label displaying"
-  (fn []
-    (render-action-drawer [[{:icon      :i/friend
                   :label     "a sample label"
-                             :sub-label "a sample sub label"}]])
+                  :sub-label "a sample sub label"}]]])
-    (-> (js/expect (rtl/screen.getByText "a sample sub label"))
+    (h/is-truthy (h/get-by-text "a sample sub label")))
-        (.toBeTruthy))))
 
-(js/global.test "action-drawer on click action works on element"
+  (h/test "on click action works on element"
-  (let [event (js/jest.fn)]
+    (let [on-press (js/jest.fn)]
-    (fn []
+      (h/render [action-drawer/action-drawer
-      (render-action-drawer [[{:icon     :i/friend
+                 [[{:icon     :i/friend
                     :label    "a sample label"
-                               :on-press event}]])
+                    :on-press on-press}]]])
-      (rtl/fireEvent.press (rtl/screen.getByText "a sample label"))
+      (h/fire-event :press (h/get-by-text "a sample label"))
-      (-> (js/expect event)
+      (h/was-called on-press)))
-          (.toHaveBeenCalled)))))
 
-(js/global.test "action-drawer renders two icons when set"
+  (h/test "disabled state"
-  (fn []
+    (let [on-press-muted  (js/jest.fn)
-    (render-action-drawer [[{:icon                :i/friend
+          on-press-friend (js/jest.fn)
+          label-mute      "Mute"
+          label-friend    "View member details"]
+      (h/render [action-drawer/action-drawer
+                 [[{:icon     :i/muted
+                    :label    label-mute
+                    :on-press on-press-muted}
+                   {:icon      :i/friend
+                    :label     label-friend
+                    :disabled? true
+                    :on-press  on-press-friend}]]])
+      (h/fire-event :press (h/get-by-text label-mute))
+      (h/was-called on-press-muted)
+
+      (h/fire-event :press (h/get-by-text label-friend))
+      (h/was-not-called on-press-friend)))
+
+  (h/test "renders two icons when set"
+    (h/render [action-drawer/action-drawer
+               [[{:icon                :i/friend
                   :label               "a sample label"
                   :right-icon          :i/friend
-                             :accessibility-label :first-element}]])
+                  :accessibility-label :first-element}]]])
-    (-> (js/expect (rtl/screen.getByLabelText "right-icon-for-action"))
+    (h/is-truthy (h/get-by-label-text "right-icon-for-action"))
-        (.toBeTruthy))
+    (h/is-truthy (h/query-by-label-text "left-icon-for-action")))
-    (-> (js/expect (rtl/screen.queryByLabelText "left-icon-for-action"))
-        (.toBeTruthy))))
 
-(js/global.test "action-drawer renders a divider when the add-divider? prop is true"
+  (h/test "renders a divider when the add-divider? prop is true"
-  (fn []
+    (h/render [action-drawer/action-drawer
-    (render-action-drawer [[{:icon                :i/friend
+               [[{:icon                :i/friend
                   :label               "a sample label"
                   :add-divider?        true
-                             :accessibility-label :first-element}]])
+                  :accessibility-label :first-element}]]])
-    (-> (js/expect (rtl/screen.getAllByLabelText "divider"))
+    (h/is-truthy (h/get-all-by-label-text "divider"))))
-        (.toBeTruthy))))

src/quo2/components/drawers/action_drawers/style.cljs

@@ -11,9 +11,10 @@
    :flex-direction   :row})
 
 (defn container
-  [sub-label]
+  [sub-label disabled?]
   {:border-radius     12
    :height            (if sub-label 58 50)
+   :opacity           (when disabled? 0.3)
    :margin-horizontal 8})
 
 (defn row-container

src/quo2/components/drawers/action_drawers/view.cljs

@@ -18,12 +18,19 @@
     :accessible          true
     :accessibility-label :divider}])
 
-(defn action
+(defn- maybe-pressable
+  [disabled? props child]
+  (if disabled?
+    [rn/view (dissoc props :on-press) child]
+    [rn/touchable-highlight props child]))
+
+(defn- action
   [{:keys [icon
            label
            sub-label
            right-icon
            danger?
+           disabled?
            on-press
            add-divider?
            override-theme
@@ -33,9 +40,9 @@
     [:<> {:key label}
      (when add-divider?
        [divider])
-     [rn/touchable-highlight
+     [maybe-pressable disabled?
       {:accessibility-label accessibility-label
-       :style               (style/container sub-label)
+       :style               (style/container sub-label disabled?)
        :underlay-color      (colors/theme-colors colors/neutral-5 colors/neutral-90 override-theme)
        :on-press            on-press}
       [rn/view

src/status_im2/contexts/activity_center/view.cljs

@@ -38,11 +38,11 @@
   []
   (let [unread-count (rf/sub [:activity-center/unread-count])]
     [quo/action-drawer
-     [[{:icon           :i/check
+     [[{:icon           :i/mark-as-read
         :override-theme :dark
         :label          (i18n/label :t/mark-all-notifications-as-read)
+        :disabled?      (zero? unread-count)
         :on-press       (fn []
-                          (if (pos? unread-count)
                           (rf/dispatch [:activity-center.notifications/mark-all-as-read-locally
                                         (fn []
                                           {:icon           :up-to-date
@@ -50,10 +50,6 @@
                                            :text           (i18n/label :t/notifications-marked-as-read
                                                                        {:count unread-count})
                                            :override-theme :dark})])
-                            ;; Need design improvements if there is NO unread
-                            ;; notifications to mark as read
-                            ;; https://github.com/status-im/status-mobile/issues/14983
-                            (js/alert "No unread notifications to mark as read"))
                           (rf/dispatch [:hide-bottom-sheet]))}]]]))
 
 (defn empty-tab

src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs

@@ -10,6 +10,9 @@
   [{:label "Muted?"
     :key   :muted?
     :type  :boolean}
+   {:label "Mark as read disabled?"
+    :key   :mark-as-read-disabled?
+    :type  :boolean}
    {:label "Show red options?"
     :key   :show-red-options?
     :type  :boolean}])
@@ -33,6 +36,7 @@
          :on-press #(js/alert "View channel members and details")}
         {:icon      :i/communities
          :label     "Mark as read"
+         :disabled? (:mark-as-read-disabled? @state)
          :on-press  #(js/alert "Mark as read")}
         {:icon       :i/muted
          :label      (if (:muted? @state) "Unmute channel" "Mute channel")

src/test_helpers/component.cljs

@@ -207,3 +207,7 @@
 (defn was-called-times
   [^js mock number-of-times]
   (.toHaveBeenCalledTimes (js/expect mock) number-of-times))
+
+(defn was-not-called
+  [mock]
+  (was-called-times mock 0))