✨ Integrate error handling for webhooks UI

frontend/src/app/main/data/events.cljs

@@ -222,7 +222,7 @@
                   :body (http/transit-data {:events events})}]
       (->> (http/send! params)
            (rx/mapcat rp/handle-response)
-           (rx/catch (fn [cause]
+           (rx/catch (fn [_]
                        (l/error :hint "unexpected error on persisting audit events")
                        (rx/of nil)))))
 

frontend/src/app/main/ui/dashboard/team.cljs

@@ -587,53 +587,78 @@
 (s/def ::webhook-form
   (s/keys :req-un [::uri ::mtype]))
 
-(mf/defc webhook-modal {::mf/register modal/components
+(def valid-webhook-mtypes
+  [{:label "application/json" :value "application/json"}
+   {:label "application/x-www-form-urlencoded" :value "application/x-www-form-urlencoded"}
+   {:label "application/transit+json" :value "application/transit+json"}])
+
+(defn- extract-status
+  [error-code]
+  (-> error-code (str/split #":") second))
+
+(mf/defc webhook-modal
+  {::mf/register modal/components
    ::mf/register-as :webhook}
   [{:keys [webhook] :as props}]
   (let [initial (mf/use-memo (fn [] (or webhook {:is-active false :mtype "application/json"})))
         form    (fm/use-form :spec ::webhook-form
                              :initial initial)
-        mtypes [{:label "application/json" :value "application/json"}
-                {:label "application/x-www-form-urlencoded" :value "application/x-www-form-urlencoded"}
-                {:label "application/transit+json" :value "application/transit+json"}]
-
         on-success
-        (fn [message]
+        (mf/use-fn
+         (fn [_]
+           (let [message (tr "dashboard.webhooks.create.success")]
              (st/emit! (dd/fetch-team-webhooks)
                        (msg/success message)
-                    (modal/hide)))
+                       (modal/hide)))))
 
         on-error
-        (fn [message {:keys [type code hint] :as error}]
+        (mf/use-fn
-          (let [message (if (and (= type :validation) (= code :webhook-validation))
+         (fn [form {:keys [type code hint] :as error}]
-                          (str message " "
+           (if (and (= type :validation)
-                               (case hint
+                    (= code :webhook-validation))
-                                 "ssl-validation" (tr "errors.webhooks.ssl-validation")
+             (let [message (cond
-                                 "")) ;; TODO Add more error codes when back defines them
+                             (= hint "unknown")
-                          message)]
+                             (tr "errors.webhooks.unexpected")
-            (rx/of (msg/error message))))
+                             (= hint "ssl-validation-error")
+                             (tr "errors.webhooks.ssl-validation")
+                             (= hint "timeout")
+                             (tr "errors.webhooks.timeout")
+                             (= hint "connection-error")
+                             (tr "errors.webhooks.connection")
+                             (str/starts-with? hint "unexpected-status")
+                             (tr "errors.webhooks.unexpected-status" (extract-status hint)))]
+               (swap! form assoc-in [:errors :uri] {:message message}))
+             (rx/throw error))))
 
         on-create-submit
-        (fn []
+        (mf/use-fn
-          (let [mdata   {:on-success #(on-success (tr "dashboard.webhooks.create.success"))
+         (fn [form]
-                         :on-error   (partial on-error (tr "dashboard.webhooks.create.error"))}
+           (let [cdata  (:clean-data @form)
-                webhook {:uri        (get-in @form [:clean-data :uri])
+                 mdata  {:on-success (partial on-success form)
-                         :mtype      (get-in @form [:clean-data :mtype])
+                         :on-error   (partial on-error form)}
-                         :is-active  (get-in @form [:clean-data :is-active])}]
+                 params {:uri        (:uri cdata)
-            (st/emit! (dd/create-team-webhook (with-meta webhook mdata)))))
+                         :mtype      (:mtype cdata)
+                         :is-active  (:is-active cdata)}]
+             (st/emit! (dd/create-team-webhook
+                        (with-meta params mdata))))))
 
         on-update-submit
-        (fn []
+        (mf/use-fn
-          (let [mdata   {:on-success #(on-success (tr "dashboard.webhooks.update.success"))
+         (fn [form]
-                         :on-error   (partial on-error (tr "dashboard.webhooks.update.error"))}
+           (let [params (:clean-data @form)
-                webhook (get @form :clean-data)]
+                 mdata  {:on-success (partial on-success form)
-            (st/emit! (dd/update-team-webhook (with-meta webhook mdata)))))
+                         :on-error   (partial on-error form)}]
+             (st/emit! (dd/update-team-webhook
+                        (with-meta params mdata))))))
 
         on-submit
-        #(let [data (:clean-data @form)]
+        (mf/use-fn
+         (fn [form]
+           (prn @form)
+           (let [data (:clean-data @form)]
              (if (:id data)
-             (on-update-submit)
+               (on-update-submit form)
-             (on-create-submit)))]
+               (on-create-submit form)))))]
 
     [:div.modal-overlay
      [:div.modal-container.webhooks-modal
@@ -659,7 +684,7 @@
                         :placeholder (tr "modals.create-webhook.url.placeholder")}]]
 
          [:div.fields-row
-          [:& fm/select {:options mtypes
+          [:& fm/select {:options valid-webhook-mtypes
                          :label (tr "dashboard.webhooks.content-type")
                          :default "application/json"
                          :name :mtype}]]]
@@ -704,7 +729,6 @@
      {:on-click #(st/emit! (modal/show :webhook {}))}
      [:span (tr "dashboard.webhooks.create")]]]])
 
-
 (mf/defc webhook-actions
   [{:keys [on-edit on-delete] :as props}]
   (let [show? (mf/use-state false)]
@@ -731,53 +755,50 @@
   [{:keys [webhook] :as props}]
   (let [on-edit #(st/emit! (modal/show :webhook {:webhook webhook}))
         error-code (:error-code webhook)
-          extract-status
+
-          (fn [error-code]
-            (let [status (-> error-code
-                             (str/split  "-")
-                             last
-                             parse-long)]
-              (if (nil? status)
-                ""
-                status)))
         delete-fn
         (fn []
           (let [params {:id (:id webhook)}
                 mdata  {:on-success #(st/emit! (dd/fetch-team-webhooks))}]
             (st/emit! (dd/delete-team-webhook (with-meta params mdata)))))
-          on-delete #(st/emit! (modal/show
+
+        on-delete
+        (fn []
+          (st/emit! (modal/show
                      {:type :confirm
                       :title (tr "modals.delete-webhook.title")
                       :message (tr "modals.delete-webhook.message")
                       :accept-label (tr "modals.delete-webhook.accept")
-                                 :on-accept delete-fn}))
+                      :on-accept delete-fn})))
-          last-delivery-text (cond
-                               (nil? error-code)
-                               (tr "webhooks.last-delivery.success")
 
-                               (= error-code "ssl-validation")
+        last-delivery-text
-                               (str (tr "errors.webhooks.last-delivery") " " (tr "errors.webhooks.ssl-validation"))
+        (if (nil? error-code)
+          (tr "webhooks.last-delivery.success")
+          (str (tr "errors.webhooks.last-delivery")
+               (cond
+                 (= error-code "ssl-validation-error")
+                 (dm/str " " (tr "errors.webhooks.ssl-validation"))
 
                  (str/starts-with? error-code "unexpected-status")
-                               (str (tr "errors.webhooks.last-delivery")
+                 (dm/str " " (tr "errors.webhooks.unexpected-status" (extract-status error-code))))))]
-                                    " "
-                                    (tr "errors.webhooks.unexpected-status" (extract-status error-code)))
 
-                               :else
-                               (tr "errors.webhooks.last-delivery"))]
     [:div.table-row
      [:div.table-field.last-delivery
       [:div.icon-container
-         [:& last-delivery-icon {:success? (nil? error-code) :text last-delivery-text}]]]
+       [:& last-delivery-icon
+        {:success? (nil? error-code)
+         :text last-delivery-text}]]]
      [:div.table-field.uri
       [:div (:uri webhook)]]
      [:div.table-field.active
-        [:div (if (:is-active webhook) (tr "labels.active") (tr "labels.inactive"))]]
+      [:div (if (:is-active webhook)
+              (tr "labels.active")
+              (tr "labels.inactive"))]]
      [:div.table-field.actions
-        [:& webhook-actions {:on-edit on-edit
+      [:& webhook-actions
+       {:on-edit on-edit
         :on-delete on-delete}]]]))
 
-
 (mf/defc webhooks-list
   [{:keys [webhooks] :as props}]
   [:div.dashboard-table

frontend/translations/en.po

@@ -690,6 +690,21 @@ msgstr "Is active"
 msgid "dashboard.webhooks.active.explain"
 msgstr "When this hook is triggered event details will be delivered"
 
+msgid "dashboard.webhooks.update.success"
+msgstr "Webhook updated successfully."
+
+msgid "dashboard.webhooks.create.success"
+msgstr "Webhook created successfully."
+
+msgid "errors.webhooks.unexpected"
+msgstr "Unexpected error on validating"
+
+msgid "errors.webhooks.timeout"
+msgstr "Timeout"
+
+msgid "errors.webhooks.connection"
+msgstr "Connection error, url not reacheable"
+
 msgid "webhooks.last-delivery.success"
 msgstr "Last delivery was successfull."
 
@@ -702,18 +717,6 @@ msgstr "Error on SSL validation."
 msgid "errors.webhooks.unexpected-status"
 msgstr "Unexpected status %s"
 
-msgid "dashboard.webhooks.update.error"
-msgstr "Error on updating webhook."
-
-msgid "dashboard.webhooks.update.success"
-msgstr "Webhook updated successfully."
-
-msgid "dashboard.webhooks.create.error"
-msgstr "Error on creating webhook."
-
-msgid "dashboard.webhooks.create.success"
-msgstr "Webhook created successfully."
-
 #: src/app/main/ui/alert.cljs
 msgid "ds.alert-ok"
 msgstr "Ok"

frontend/translations/es.po

@@ -737,6 +737,21 @@ msgstr "Cuando se active este webhook se enviarán detalles del evento"
 msgid "webhooks.last-delivery.success"
 msgstr "El último envío fue correcto."
 
+msgid "dashboard.webhooks.update.success"
+msgstr "Webhook modificado con éxito"
+
+msgid "dashboard.webhooks.create.success"
+msgstr "Webhook creado con éxito"
+
+msgid "errors.webhooks.timeout"
+msgstr "Timeout"
+
+msgid "errors.webhooks.unexpected"
+msgstr "Error inesperado al validar"
+
+msgid "errors.webhooks.connection"
+msgstr "Error de conexion, la url no es alcanzable"
+
 msgid "errors.webhooks.last-delivery"
 msgstr "Hubo un problema en el último envío."
 
@@ -746,18 +761,6 @@ msgstr "Error en la validación SSL."
 msgid "errors.webhooks.unexpected-status"
 msgstr "Estado inesperado %s"
 
-msgid "dashboard.webhooks.update.error"
-msgstr "Error modificando el webhook"
-
-msgid "dashboard.webhooks.update.success"
-msgstr "Webhook modificado con éxito"
-
-msgid "dashboard.webhooks.create.error"
-msgstr "Error creando con éxito"
-
-msgid "dashboard.webhooks.create.success"
-msgstr "Webhook creado con éxito"
-
 #: src/app/main/ui/alert.cljs
 msgid "ds.alert-ok"
 msgstr "Ok"