Replace status-im.ui.components.react in status-im2

to accomplish #17288

migrated :

notifications

Issue Opened: A bug has been identified within the activity-logs component and is currently under investigation.

Makefile

@@ -360,6 +360,7 @@ component-test-watch: export TARGET := clojure
 component-test-watch: export COMPONENT_TEST := true
 component-test-watch: export BABEL_ENV := test
 component-test-watch: ##@ Watch tests and re-run no changes to cljs files
+	rm -rf ./component-spec
 	yarn install
 	nodemon --exec 'yarn shadow-cljs compile component-test && jest --config=test/jest/jest.config.js' -e cljs
 
@@ -367,6 +368,7 @@ component-test: export TARGET := clojure
 component-test: export COMPONENT_TEST := true
 component-test: export BABEL_ENV := test
 component-test: ##@test Run component tests once in NodeJS
+	rm -rf ./component-spec
 	yarn install
 	yarn shadow-cljs compile component-test && \
 	jest --config=test/jest/jest.config.js

src/quo2/components/code/code/style.cljs

@@ -1,87 +0,0 @@
-(ns quo2.components.code.code.style
-  (:require [quo2.foundations.colors :as colors]))
-
-;; Example themes:
-;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs
-(defn theme
-  [theme-key]
-  (case theme-key
-    :hljs-comment (colors/theme-colors colors/neutral-40 colors/neutral-60)
-    :hljs-title   (colors/custom-color-by-theme :sky 50 60)
-    :hljs-keyword (colors/custom-color-by-theme :green 50 60)
-    :hljs-string  (colors/custom-color-by-theme :turquoise 50 60)
-    :hljs-literal (colors/custom-color-by-theme :turquoise 50 60)
-    :hljs-number  (colors/custom-color-by-theme :turquoise 50 60)
-    :line-number  colors/neutral-40
-    nil))
-
-(defn text-style
-  [class-names]
-  (let [text-color (->> class-names
-                        (map keyword)
-                        (some (fn [class-name]
-                                (when-let [text-color (theme class-name)]
-                                  text-color))))]
-    (cond-> {:flex-shrink 1
-             :line-height 18}
-      text-color (assoc :color text-color))))
-
-(defn border-color
-  []
-  (colors/theme-colors colors/neutral-20 colors/neutral-80))
-
-(defn container
-  []
-  {:overflow         :hidden
-   :padding          8
-   :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40)
-   :border-color     (border-color)
-   :border-width     1
-   :border-radius    16})
-
-(def gradient-container
-  {:position :absolute
-   :bottom   0
-   :left     0
-   :right    0
-   :z-index  1})
-
-(def gradient {:height 48})
-
-(defn line-number-container
-  [line-number-width]
-  {:position         :absolute
-   :bottom           0
-   :top              0
-   :left             0
-   :width            (+ line-number-width 8 7)
-   :background-color (colors/theme-colors colors/neutral-5 colors/neutral-80)})
-
-(defn divider
-  [line-number-width]
-  {:position         :absolute
-   :bottom           0
-   :top              0
-   :left             (+ line-number-width 7 7)
-   :width            1
-   :z-index          2
-   :background-color (border-color)})
-
-(def line {:flex-direction :row})
-
-(defn line-number
-  [width]
-  {:margin-right 20 ; 8+12 margin
-   :width        width})
-
-(def copy-button
-  {:position :absolute
-   :bottom   8
-   :right    8
-   :z-index  1})
-
-(defn gradient-color [] (colors/theme-colors colors/white colors/neutral-80))
-
-(defn button-background-color
-  []
-  (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5))

src/quo2/components/code/common/style.cljs

@@ -0,0 +1,107 @@
+(ns quo2.components.code.common.style
+  (:require [quo2.foundations.colors :as colors]))
+
+;; Example themes:
+;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs
+(defn highlight-theme
+  [theme-key]
+  (case theme-key
+    :hljs-comment      (colors/theme-colors colors/neutral-40 colors/neutral-60)
+    :hljs-title        (colors/custom-color-by-theme :sky 50 60)
+    :hljs-keyword      (colors/custom-color-by-theme :green 50 60)
+    :hljs-string       (colors/custom-color-by-theme :turquoise 50 60)
+    :hljs-literal      (colors/custom-color-by-theme :turquoise 50 60)
+    :hljs-number       (colors/custom-color-by-theme :turquoise 50 60)
+    :hljs-symbol       (colors/custom-color-by-theme :orange 50 50)
+    :hljs-builtin-name (colors/custom-color-by-theme :pink 50 50)
+    :line-number       colors/neutral-40
+    nil))
+
+(defn text-style
+  [class-names preview?]
+  (let [text-color (->> class-names
+                        (map keyword)
+                        (some (fn [class-name]
+                                (when-let [text-color (highlight-theme class-name)]
+                                  text-color))))]
+    (cond-> {:flex-shrink 1
+             :line-height 18}
+      preview?   (assoc :color colors/white)
+      text-color (assoc :color text-color))))
+
+(defn border-color
+  []
+  (colors/theme-colors colors/neutral-20 colors/neutral-80))
+
+(defn container
+  [preview? theme]
+  (if preview?
+    {:overflow         :hidden
+     :width            108
+     :background-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+     :border-radius    8}
+    {:overflow         :hidden
+     :padding          8
+     :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40 theme)
+     :border-color     (border-color)
+     :border-width     1
+     :border-radius    16}))
+
+(def gradient-container
+  {:position :absolute
+   :bottom   0
+   :left     0
+   :right    0
+   :z-index  1})
+
+(def gradient {:height 48})
+
+(defn line-number-container
+  [line-number-width preview? theme]
+  (cond-> {:position         :absolute
+           :bottom           0
+           :top              0
+           :left             0
+           :width            (+ line-number-width 8 7)
+           :background-color (colors/theme-colors colors/neutral-5 colors/neutral-80 theme)}
+    preview? (assoc :width            20
+                    :background-color (colors/theme-colors colors/neutral-10 colors/neutral-70 theme))))
+
+(defn divider
+  [line-number-width]
+  {:position         :absolute
+   :bottom           0
+   :top              0
+   :left             (+ line-number-width 7 7)
+   :width            1
+   :z-index          2
+   :background-color (border-color)})
+
+(def line {:flex-direction :row})
+
+(defn line-number
+  [width preview?]
+  (if preview?
+    {:width            width
+     :padding-vertical 3
+     :padding-left     8
+     :padding-right    4}
+    {:margin-right 20 ; 8+12 margin
+     :width        width}))
+
+(def line-content
+  {:flex               1
+   :padding-horizontal 8
+   :padding-vertical   3})
+
+(def copy-button
+  {:position :absolute
+   :bottom   8
+   :right    8
+   :z-index  1})
+
+(defn gradient-color [] (colors/theme-colors colors/white colors/neutral-80))
+
+(defn button-background-color
+  []
+  (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5))

src/quo2/components/code/common/view.cljs

@@ -1,8 +1,8 @@
-(ns quo2.components.code.snippet
+(ns quo2.components.code.common.view
   (:require [cljs-bean.core :as bean]
             [clojure.string :as string]
             [quo2.components.buttons.button.view :as button]
-            [quo2.components.code.code.style :as style]
+            [quo2.components.code.common.style :as style]
             [quo2.components.markdown.text :as text]
             [react-native.core :as rn]
             [react-native.linear-gradient :as linear-gradient]
@@ -10,39 +10,41 @@
             [reagent.core :as reagent]))
 
 (defn- render-nodes
-  [nodes]
+  [nodes preview?]
   (map (fn [{:keys [children value last-line?] :as node}]
          (if children
            (into [text/text
                   (cond-> {:weight :code
                            :size   :paragraph-2
-                           :style  (style/text-style (get-in node [:properties :className]))}
+                           :style  (style/text-style (get-in node [:properties :className]) preview?)}
                     last-line? (assoc :number-of-lines 1))]
-                 (render-nodes children))
+                 (render-nodes children preview?))
            ;; Remove newlines as we already render each line separately.
            (string/trim-newline value)))
        nodes))
 
 (defn- line
-  [{:keys [line-number line-number-width]} children]
+  [{:keys [line-number line-number-width preview?]} children]
   [rn/view {:style style/line}
-   [rn/view {:style (style/line-number line-number-width)}
+   [rn/view {:style (style/line-number line-number-width preview?)}
     [text/text
-     {:style  (style/text-style ["line-number"])
+     {:style  (style/text-style ["line-number"] preview?)
       :weight :code
       :size   :paragraph-2}
      line-number]]
-   children])
+   (cond->> children
+     preview? (conj [rn/view {:style style/line-content}]))])
 
 (defn- code-block
-  [{:keys [rows line-number-width]}]
+  [{:keys [rows line-number-width preview?]}]
   [rn/view
-   (->> rows
-        (render-nodes)
+   (->> preview?
+        (render-nodes rows)
         (map-indexed (fn [idx row-content]
                        [line
                         {:line-number       (inc idx)
-                         :line-number-width line-number-width}
+                         :line-number-width line-number-width
+                         :preview?          preview?}
                         row-content]))
         (into [:<>]))])
 
@@ -66,36 +68,44 @@
       (* 9 max-line-digits font-scale))))
 
 (defn- f-native-renderer
-  [{:keys [rows max-lines on-copy-press]
+  [{:keys [rows max-lines on-copy-press preview? theme]
     :or   {max-lines ##Inf}}]
   (let [font-scale          (:font-scale (rn/get-window))
         total-rows          (count rows)
-        number-rows-to-show (min (count rows) max-lines)
-        line-number-width   (calc-line-number-width font-scale number-rows-to-show)
+        number-rows-to-show (if preview?
+                              0
+                              (min (count rows) max-lines))
+        line-number-width   (if preview? 20 (calc-line-number-width font-scale number-rows-to-show))
         truncated?          (< number-rows-to-show total-rows)
         rows-to-show-coll   (if truncated?
                               (as-> rows $
                                 (update $ number-rows-to-show assoc :last-line? true)
                                 (take (inc number-rows-to-show) $))
                               rows)]
-    [rn/view {:style (style/container)}
-     [rn/view {:style (style/line-number-container line-number-width)}]
-     [rn/view {:style (style/divider line-number-width)}]
-     [mask-view {:apply-mask? truncated?}
-      [code-block
-       {:rows              rows-to-show-coll
-        :line-number-width line-number-width}]]
-     [rn/view {:style style/copy-button}
-      [button/button
-       {:icon-only? true
-        :type       :grey
-        :background :blur
-        :size       24
-        :on-press   on-copy-press}
-       :main-icons/copy]]]))
+    [rn/view {:style (style/container preview? theme)}
+     [rn/view {:style (style/line-number-container line-number-width preview? theme)}]
+     (if preview?
+       [code-block
+        {:rows              rows-to-show-coll
+         :line-number-width line-number-width
+         :preview?          preview?}]
+       [:<>
+        [rn/view {:style (style/divider line-number-width)}]
+        [mask-view {:apply-mask? truncated?}
+         [code-block
+          {:rows              rows-to-show-coll
+           :line-number-width line-number-width}]]
+        [rn/view {:style style/copy-button}
+         [button/button
+          {:icon-only? true
+           :type       :grey
+           :background :blur
+           :size       24
+           :on-press   on-copy-press}
+          :main-icons/copy]]])]))
 
-(defn snippet
-  [{:keys [language max-lines on-copy-press]} children]
+(defn view
+  [{:keys [language max-lines on-copy-press preview? theme]} children]
   [highlighter/highlighter
    {:language          language
     :renderer          (fn [^js/Object props]
@@ -103,8 +113,11 @@
                           [:f> f-native-renderer
                            {:rows          (-> props .-rows bean/->clj)
                             :on-copy-press #(when on-copy-press (on-copy-press children))
-                            :max-lines     max-lines}]))
+                            :max-lines     max-lines
+                            :preview?      preview?
+                            :theme         theme}]))
     :show-line-numbers false
     :style             {}
     :custom-style      {:background-color nil}}
    children])
+

src/quo2/components/code/snippet/view.cljs

@@ -0,0 +1,15 @@
+(ns quo2.components.code.snippet.view
+  (:require [quo2.theme :as theme]
+            [quo2.components.code.common.view :as code-common]))
+
+(defn- view-internal
+  [_]
+  (fn [{:keys [language max-lines on-copy-press]} children]
+    [code-common/view
+     {:language      language
+      :max-lines     max-lines
+      :on-copy-press on-copy-press
+      :preview?      false}
+     children]))
+
+(def view (theme/with-theme view-internal))

src/quo2/components/code/snippet_preview/view.cljs

@@ -0,0 +1,11 @@
+(ns quo2.components.code.snippet-preview.view
+  (:require [quo2.components.code.common.view :as code-common]))
+
+(defn view
+  [{:keys [language]} children]
+  [code-common/view
+   {:preview?  true
+    :language  language
+    :max-lines 0
+    :theme     :dark}
+   children])

src/quo2/components/notifications/activity_log/style.cljs

@@ -26,11 +26,15 @@
   {:color colors/white})
 
 (defn message-container
-  [attachment]
+  [attachment text-with-photos?]
   {:border-radius      12
    :margin-top         10
    :padding-horizontal 12
-   :padding-vertical   (if (#{:photo :gif} attachment) 12 8)
+   :padding-vertical   (if (and
+                            (not text-with-photos?)
+                            (#{:photo :gif} attachment))
+                         12
+                         8)
    :background-color   colors/white-opa-5})
 
 (def footer-container

src/quo2/components/notifications/activity_log/view.cljs

@@ -73,24 +73,33 @@
                  detail]]))
            context))))
 
+(defn- hiccup-props
+  [body]
+  (and (vector? body)
+       (map? (second body))
+       (second body)))
+
 (defn- activity-message
   [{:keys [title body title-number-of-lines body-number-of-lines attachment]}]
-  [rn/view {:style (style/message-container attachment)}
-   (when title
-     [text/text
-      {:size                :paragraph-2
-       :accessibility-label :activity-message-title
-       :style               style/message-title
-       :number-of-lines     title-number-of-lines}
-      title])
-   (if (string? body)
-     [text/text
-      {:style               style/message-body
-       :accessibility-label :activity-message-body
-       :size                :paragraph-1
-       :number-of-lines     body-number-of-lines}
-      body]
-     body)])
+  (let [{:keys [photos message-text]} (hiccup-props body)
+        text-with-photos?             (and (not (string/blank? message-text))
+                                           (seq photos))]
+    [rn/view {:style (style/message-container attachment text-with-photos?)}
+     (when title
+       [text/text
+        {:size                :paragraph-2
+         :accessibility-label :activity-message-title
+         :style               style/message-title
+         :number-of-lines     title-number-of-lines}
+        title])
+     (if (string? body)
+       [text/text
+        {:style               style/message-body
+         :accessibility-label :activity-message-body
+         :size                :paragraph-1
+         :number-of-lines     body-number-of-lines}
+        body]
+       body)]))
 
 (defn- activity-title
   [title replying?]

src/quo2/components/notifications/activity_logs_photos/style.cljs

@@ -1,5 +1,7 @@
 (ns quo2.components.notifications.activity-logs-photos.style)
 
+(def text {:margin-bottom 8})
+
 (def photos-container
   {:flex           1
    :height         40

src/quo2/components/notifications/activity_logs_photos/view.cljs

@@ -1,14 +1,25 @@
 (ns quo2.components.notifications.activity-logs-photos.view
   (:require [react-native.core :as rn]
-            [quo2.components.notifications.activity-logs-photos.style :as style]))
+            [quo2.components.markdown.text :as text]
+            [quo2.components.notifications.activity-logs-photos.style :as style]
+            [clojure.string :as string]))
 
 (defn view
-  [{:keys [photos]}]
-  [rn/view {:style style/photos-container}
-   (map-indexed
-    (fn [index photo]
-      ^{:key index}
-      [rn/image
-       {:source photo
-        :style  (style/photo index)}])
-    photos)])
+  [{:keys [photos message-text]}]
+  [:<>
+   (when (not (string/blank? message-text))
+     [text/text
+      {:size                :paragraph-1
+       :weight              :regular
+       :style               style/text
+       :number-of-lines     2
+       :accessibility-label :activity-log-title}
+      message-text])
+   [rn/view {:style style/photos-container}
+    (map-indexed
+     (fn [index photo]
+       ^{:key index}
+       [rn/image
+        {:source photo
+         :style  (style/photo index)}])
+     photos)]])

src/quo2/components/notifications/toast/view.cljs

@@ -68,8 +68,7 @@
 (def ^:private toast-container (quo.theme/with-theme toast-container-internal))
 
 (defn toast
-  [{:keys [icon icon-color title text action undo-duration undo-on-press container-style
-           theme user]}]
+  [{:keys [icon icon-color title text action undo-duration undo-on-press container-style theme user]}]
   (let [context-theme (or theme (quo.theme/get-theme))]
     [quo.theme/provider {:theme context-theme}
      [toast-container
@@ -78,7 +77,6 @@
                                (cond-> (style/icon context-theme)
                                  icon-color
                                  (assoc :color icon-color))]
-
                               user
                               [user-avatar/user-avatar user])
        :title           title

src/quo2/core.cljs

@@ -19,7 +19,8 @@
     quo2.components.calendar.calendar.view
     quo2.components.calendar.calendar-day.view
     quo2.components.calendar.calendar-year.view
-    quo2.components.code.snippet
+    quo2.components.code.snippet.view
+    quo2.components.code.snippet-preview.view
     quo2.components.colors.color-picker.view
     quo2.components.common.notification-dot.view
     quo2.components.common.separator.view
@@ -165,7 +166,8 @@
 (def calendar-year quo2.components.calendar.calendar-year.view/view)
 
 ;;;; Code
-(def snippet quo2.components.code.snippet/snippet)
+(def snippet quo2.components.code.snippet.view/view)
+(def snippet-preview quo2.components.code.snippet-preview.view/view)
 
 ;;;; Cards
 (def small-option-card quo2.components.onboarding.small-option-card.view/small-option-card)

src/status_im/data_store/activities.cljs

@@ -61,7 +61,8 @@
                         :chatId                    :chat-id
                         :contactVerificationStatus :contact-verification-status
                         :communityId               :community-id
-                        :membershipStatus          :membership-status})
+                        :membershipStatus          :membership-status
+                        :albumMessages             :album-messages})
       (update :last-message #(when % (messages/<-rpc %)))
       (update :message #(when % (messages/<-rpc %)))
       (update :reply-message #(when % (messages/<-rpc %)))

src/status_im/group_chats/core.cljs

@@ -20,10 +20,11 @@
 
 (rf/defn handle-chat-removed
   {:events [:chat-removed]}
-  [cofx response]
+  [cofx response chat-id]
   (rf/merge cofx
             {:db         (dissoc (:db cofx) :current-chat-id)
-             :dispatch-n [[:sanitize-messages-and-process-response response]
+             :dispatch-n [[:shell/close-switcher-card chat-id]
+                          [:sanitize-messages-and-process-response response]
                           [:pop-to-root :shell-stack]]}
             (activity-center/notifications-fetch-unread-count)))
 
@@ -117,7 +118,7 @@
   {:json-rpc/call [{:method      "wakuext_leaveGroupChat"
                     :params      [nil chat-id true]
                     :js-response true
-                    :on-success  #(re-frame/dispatch [:chat-removed %])}]})
+                    :on-success  #(re-frame/dispatch [:chat-removed % chat-id])}]})
 
 (rf/defn remove
   "Remove chat"

src/status_im2/contexts/chat/messages/drawers/view.cljs

@@ -1,7 +1,6 @@
 (ns status-im2.contexts.chat.messages.drawers.view
   (:require [quo2.core :as quo]
             [react-native.core :as rn]
-            [status-im.ui.components.react :as react]
             [status-im2.contexts.chat.composer.reply.view :as reply]
             [status-im2.constants :as constants]
             [utils.i18n :as i18n]
@@ -10,7 +9,8 @@
             [status-im2.common.contact-list-item.view :as contact-list-item]
             [status-im2.contexts.chat.messages.drawers.style :as style]
             [react-native.gesture :as gesture]
-            [quo2.components.reactions.resource :as reactions.resource]))
+            [quo2.components.reactions.resource :as reactions.resource]
+            [react-native.clipboard :as clipboard]))
 
 (defn contact-list-item-fn
   [{:keys [from compressed-key]}]
@@ -118,7 +118,7 @@
    (when (and (not (or deleted? deleted-for-me?))
               (not= content-type constants/content-type-audio))
      [{:type     :main
-       :on-press #(react/copy-to-clipboard
+       :on-press #(clipboard/set-string
                    (reply/get-quoted-text-with-mentions
                     (get content :parsed-text)))
        :label    (i18n/label :t/copy-text)

src/status_im2/contexts/quo_preview/code/snippet_preview.cljs

@@ -0,0 +1,37 @@
+(ns status-im2.contexts.quo-preview.code.snippet-preview
+  (:require [quo2.core :as quo]
+            [reagent.core :as reagent]
+            [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def go-example
+  "for(let ind")
+
+(def clojure-example
+  "(for [{:keys [url title description thumbnail hostname]} previews]")
+
+(def examples
+  {:clojure {:language :clojure
+             :text     clojure-example}
+   :go      {:language :go
+             :text     go-example}})
+
+(def descriptor
+  [{:key     :language
+    :type    :select
+    :options [{:key :clojure}
+              {:key :go}]}
+   {:label "Syntax highlight?"
+    :key   :syntax
+    :type  :boolean}])
+
+(defn view
+  []
+  (let [state (reagent/atom {:language  :clojure
+                             :max-lines 1
+                             :syntax    true})]
+    (fn []
+      (let [language (if (:syntax @state) (:language @state) :text)
+            text     (-> (:language @state) examples :text)]
+        [preview/preview-container {:state state :descriptor descriptor}
+         [quo/snippet-preview
+          {:language language} text]]))))

src/status_im2/contexts/quo_preview/main.cljs

@@ -27,6 +27,7 @@
     [status-im2.contexts.quo-preview.calendar.calendar-year :as calendar-year]
     [status-im2.contexts.quo-preview.browser.browser-input :as browser-input]
     [status-im2.contexts.quo-preview.code.snippet :as code-snippet]
+    [status-im2.contexts.quo-preview.code.snippet-preview :as code-snippet-preview]
     [status-im2.contexts.quo-preview.graph.interactive-graph :as interactive-graph]
     [status-im2.contexts.quo-preview.graph.wallet-graph :as wallet-graph]
     [status-im2.contexts.quo-preview.colors.color-picker :as color-picker]
@@ -177,7 +178,9 @@
                        {:name      :calendar-year
                         :component calendar-year/view}]
    :code              [{:name      :snippet
-                        :component code-snippet/view}]
+                        :component code-snippet/view}
+                       {:name      :snippet-preview
+                        :component code-snippet-preview/view}]
    :colors            [{:name      :color-picker
                         :component color-picker/view}]
    :community         [{:name      :community-card-view
@@ -305,9 +308,9 @@
                        {:name      :activity-logs-photos
                         :component activity-logs-photos/preview-activity-logs-photos}
                        {:name      :toast
-                        :component toast/preview-toasts}
+                        :component toast/view}
                        {:name      :notification
-                        :component notification/preview-notification}]
+                        :component notification/view}]
    :onboarding        [{:name      :small-option-card
                         :component small-option-card/preview-small-option-card}]
    :password          [{:name      :tips

src/status_im2/contexts/quo_preview/notifications/notification.cljs

@@ -76,7 +76,7 @@
     :duration 3000
     :type     :notification}])
 
-(defn preview-notification
+(defn view
   []
   (fn []
     [preview/preview-container

src/status_im2/contexts/quo_preview/notifications/toast.cljs

@@ -86,22 +86,17 @@
                  :duration   3000}])}
             "update above toast"]])))))
 
-(defn preview-toasts
+(defn view
   []
-  (fn []
-    [preview/preview-container
-     [rn/view
-      {:background-color "#508485"
-       :flex-direction   :column
-       :justify-content  :flex-start
-       :height           300}]
-     [into
-      [rn/view
-       {:flex    1
-        :padding 16}]
-      [^{:key :basic} [toast-button-basic]
-       ^{:key :with-undo-action} [toast-button-with-undo-action]
-       ^{:key :with-multiline} [toast-button-multiline]
-       ^{:key :30s-duration} [toast-button-30s-duration]
-       ^{:key :upsert}
-       [update-toast-button]]]]))
+  [preview/preview-container
+   {:component-container-style
+    {:flex-direction  :column
+     :justify-content :flex-start}}
+   [into
+    [rn/view {:style {:flex 1 :padding 16}}
+     [toast-button-basic]
+     [toast-button-with-undo-action]
+     [toast-button-multiline]
+     [toast-button-30s-duration]
+     [update-toast-button]
+     [update-toast-button]]]])

src/status_im2/contexts/shell/activity_center/notification/reply/view.cljs

@@ -14,16 +14,22 @@
 
 ;; NOTE: Replies support text, image and stickers only.
 (defn- get-message-content
-  [{:keys [content-type] :as message}]
+  [{:keys [content-type] :as message} album-messages media-server-port]
   (case content-type
     constants/content-type-text [quo/text {:style style/tag-text}
                                  (get-in message [:content :text])]
 
     constants/content-type-image
-    (let [image           (get-in message [:content :image])
-          image-local-url (url/replace-port image (rf/sub [:mediaserver/port]))
-          photos          (when image-local-url [{:uri image-local-url}])]
-      [quo/activity-logs-photos {:photos photos}])
+    (let [images           (or album-messages message)
+          image-urls       (if album-messages
+                             (map :image images)
+                             [(get-in message [:content :image])])
+          image-local-urls (map (fn [url]
+                                  {:uri (url/replace-port url media-server-port)})
+                                image-urls)]
+      [quo/activity-logs-photos
+       {:photos       image-local-urls
+        :message-text (get-in message [:content :text])}])
 
     constants/content-type-sticker [old-message/sticker message]
 
@@ -54,11 +60,12 @@
 (defn view
   [{:keys [notification set-swipeable-height customization-color] :as props}]
   (let [{:keys [author chat-name community-id chat-id
-                message read timestamp]} notification
-        community-chat?                  (not (string/blank? community-id))
-        community                        (rf/sub [:communities/community community-id])
-        community-name                   (:name community)
-        community-image                  (get-in community [:images :thumbnail :uri])]
+                message read timestamp album-messages]} notification
+        community-chat?                                 (not (string/blank? community-id))
+        community                                       (rf/sub [:communities/community community-id])
+        community-name                                  (:name community)
+        community-image                                 (get-in community [:images :thumbnail :uri])
+        media-server-port                               (rf/sub [:mediaserver/port])]
     [swipeable props
      [gesture/touchable-without-feedback
       {:on-press (fn []
@@ -106,4 +113,6 @@
 
                                                       :else
                                                       nil)
-                              :body                 (get-message-content message)}}]]]))
+                              :body                 (get-message-content message
+                                                                         album-messages
+                                                                         media-server-port)}}]]]))

test/appium/tests/critical/chats/test_1_1_public_chats.py

@@ -1365,12 +1365,13 @@ class TestOneToOneChatMultipleSharedDevicesNewUiTwo(MultipleSharedDeviceTestCase
             "Message 1", "Message 2", "Message 3", "Message 4"
 
     @marks.testrail_id(702783)
+    @marks.xfail(reason="Data delivery issue")
     def test_1_1_chat_is_shown_message_sent_delivered_from_offline(self):
         # self.chat_2.jump_to_card_by_text(self.username_1)
         # self.chat_1.jump_to_card_by_text(self.username_2)
         self.home_1.just_fyi('Turn on airplane mode and check that offline status is shown on home view')
+        app_package = self.home_1.driver.current_package
         for home in self.homes:
-            app_package = self.home_1.driver.current_package
             home.toggle_airplane_mode()
             if not home.chats_tab.is_element_displayed() and not home.chat_floating_screen.is_element_displayed():
                 home.driver.activate_app(app_package)

test/appium/tests/critical/chats/test_group_chat.py

@@ -402,6 +402,7 @@ class TestGroupChatMultipleDeviceMergedNewUI(MultipleSharedDeviceTestCase):
         self.errors.verify_no_errors()
 
     @marks.testrail_id(702808)
+    @marks.xfail(reason="Data delivery issue")
     def test_group_chat_offline_pn(self):
         for i in range(1, 3):
             self.homes[i].navigate_back_to_home_view()

test/appium/tests/critical/test_public_chat_browsing.py

@@ -309,7 +309,6 @@ class TestCommunityOneDeviceMerged(MultipleSharedDeviceTestCase):
         self.drivers, self.loop = create_shared_drivers(1)
         self.sign_in = SignInView(self.drivers[0])
         self.username = 'first user'
-        self.discovery_community_attributes = "Contributors' test community", 'test anything here', 'Web3', 'Software dev'
 
         self.home = self.sign_in.create_user(username=self.username)
         self.home.communities_tab.click_until_presence_of_element(self.home.plus_community_button)
@@ -322,23 +321,41 @@ class TestCommunityOneDeviceMerged(MultipleSharedDeviceTestCase):
         self.channel = self.community_view.get_channel(self.channel_name).click()
 
     @marks.testrail_id(703503)
-    @marks.xfail(reason="https://github.com/status-im/status-mobile/issues/17175", run=False)
+    @marks.xfail(
+        reason="Request to Join Community button color issue: https://github.com/status-im/status-mobile/issues/17295")
     def test_community_discovery(self):
         self.home.navigate_back_to_home_view()
         self.home.communities_tab.click()
         self.home.discover_communities_button.click()
-        for text in self.discovery_community_attributes:
-            if not self.home.element_by_text(text).is_element_displayed(10):
-                self.errors.append("%s in not in Discovery!" % text)
-        self.home.element_by_text(self.discovery_community_attributes[0]).click()
-        element_templates = {
-            self.community_view.join_button: 'discovery_join_button.png',
-            self.community_view.get_channel_avatar(): 'discovery_general_channel.png',
-        }
-        for element, template in element_templates.items():
-            if element.is_element_differs_from_template(template):
-                element.save_new_screenshot_of_element('%s_different.png' % element.name)
-                self.errors.append("Element %s is different from expected template %s!" % (element.locator, template))
+        self.home.community_card_item.wait_for_visibility_of_element(30)
+
+        if len(self.home.community_card_item.find_elements()) > 1:
+            contributors_test_community_attributes = "Contributors' test community", 'test anything here', \
+                'Web3', 'Software dev'
+            for text in contributors_test_community_attributes:
+                if not self.home.element_by_text(text).is_element_displayed(10):
+                    self.errors.append("'%s' text is not in Discovery!" % text)
+            self.home.element_by_text(contributors_test_community_attributes[0]).click()
+            element_templates = {
+                self.community_view.join_button: 'discovery_join_button.png',
+                self.community_view.get_channel_avatar(): 'discovery_general_channel.png',
+            }
+            for element, template in element_templates.items():
+                if element.is_element_differs_from_template(template):
+                    element.save_new_screenshot_of_element('%s_different.png' % template.split('.')[0])
+                    self.errors.append(
+                        "Element %s is different from expected template %s!" % (element.locator, template))
+            self.community_view.navigate_back_to_home_view()
+            self.home.communities_tab.click()
+            self.home.discover_communities_button.click()
+            self.home.community_card_item.wait_for_visibility_of_element(30)
+            self.home.swipe_up()
+
+        status_ccs_community_attributes = '(old) Status CCs', 'Community for Status CCs', 'Ethereum', \
+            'Software dev', 'Web3'
+        for text in status_ccs_community_attributes:
+            if not self.community_view.element_by_text(text).is_element_displayed(10):
+                self.errors.append("'%s' text is not shown for (old) Status CCs!" % text)
         self.errors.verify_no_errors()
 
     @marks.testrail_id(702846)
@@ -839,8 +856,8 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
             self.channel_2.send_message_button.click()
             message = self.channel_1.get_preview_message_by_text(url)
             message.wait_for_element(60)
-            # if not message.preview_image:
-            #     self.errors.append("No preview is shown for %s" % link_data['url'])
+            if not message.preview_image:
+                self.errors.append("No preview image is shown for %s" % url)
             shown_title = message.preview_title.text
             if shown_title != data['title']:
                 self.errors.append("Title is not equal expected for '%s', actual is '%s'" % (url, shown_title))
@@ -1072,7 +1089,7 @@ class TestCommunityMultipleDeviceMergedTwo(MultipleSharedDeviceTestCase):
         self.channel_2 = self.community_2.get_channel(self.channel_name).click()
 
     @marks.testrail_id(702786)
-    @marks.xfail(reason="Issue with username in PN, issue #6 in 15500")
+    @marks.xfail(reason="Issue with username in PN, https://github.com/status-im/status-mobile/issues/17396")
     def test_community_mentions_push_notification(self):
         self.home_1.navigate_back_to_home_view()
         self.device_1.open_notification_bar()

test/appium/tests/medium/test_activity_center.py

@@ -33,9 +33,8 @@ class TestActivityCenterContactRequestMultipleDevicePR(MultipleSharedDeviceTestC
         self.home_2.add_a_contact_chat_bottom_sheet_button.click()
         self.home_2.element_by_translation_id("paste").click()
         self.home_2.element_by_translation_id("user-found").wait_for_visibility_of_element(10)
-        # TODO: Blocked by 15500
-        # if not self.home_2.element_by_text(self.username_1).is_element_displayed():
-        #     self.errors.append("Username is not shown on 'Add contact' page after entering valid public key")
+        if not self.home_2.element_by_text(self.username_1).is_element_displayed(30):
+            self.errors.append("Username is not shown on 'Add contact' page after entering valid public key")
         chat = self.home_2.get_chat_view()
 
         chat.view_profile_new_contact_button.click_until_presence_of_element(chat.profile_block_contact_button)

test/appium/views/chat_view.py

@@ -517,7 +517,7 @@ class PreviewMessage(ChatElementByText):
     def preview_image(self):
         class PreviewImage(SilentButton):
             def __init__(self, driver, parent_locator: str):
-                super().__init__(driver, prefix=parent_locator, xpath="//*[@content-desc='member-photo']")
+                super().__init__(driver, prefix=parent_locator, xpath="//*[@content-desc='thumbnail']")
 
         return PreviewMessage.return_element_or_empty(PreviewImage(self.driver, self.locator))
 

test/appium/views/home_view.py

@@ -317,6 +317,9 @@ class HomeView(BaseView):
             self.driver,
             xpath="(//*[@content-desc='link-to-profile']/preceding-sibling::*[1]/android.widget.TextView)[1]")
 
+        # Discover communities
+        self.community_card_item = BaseElement(self.driver, accessibility_id="community-card-item")
+
     def wait_for_syncing_complete(self):
         self.driver.info('Waiting for syncing to complete')
         while True: