feature(connections) add tags filter to connections page (#604)

* refactor(connections) remove unused component * feature(connections) add tags filter to connections page
hoophq · Dec 16, 2024 · 4ed3bc8 · 4ed3bc8
1 parent 6f33d87
commit 4ed3bc8
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 36 deletions.
diff --git a/webapp/src/webapp/components/forms.cljs b/webapp/src/webapp/components/forms.cljs
@@ -197,7 +197,7 @@
            full-width?
            dark]}]
   [:div {:class (str " text-sm w-full"
-                     (when-not not-margin-bottom? "mb-regular"))}
+                     (when-not not-margin-bottom? " mb-regular"))}
    [:div {:class "flex items-center gap-2 mb-1"}
     (if dark
       [form-label-dark label]

diff --git a/webapp/src/webapp/connections/views/connection_list.cljs b/webapp/src/webapp/connections/views/connection_list.cljs
@@ -1,6 +1,7 @@
 (ns webapp.connections.views.connection-list
   (:require ["lucide-react" :refer [Wifi Tags EllipsisVertical]]
-            ["@radix-ui/themes" :refer [IconButton DropdownMenu Tooltip]]
+            ["@radix-ui/themes" :refer [IconButton DropdownMenu Tooltip
+                                        Flex Text Badge]]
             [clojure.string :as cs]
             [re-frame.core :as rf]
             [reagent.core :as r]
@@ -29,23 +30,16 @@
    [:div {:class "flex items-center justify-center h-full"}
     [loaders/simple-loader]]])
 
-(defn- tooltip [text position]
-  [:div {:class (str "absolute -bottom-10 flex-col hidden mt-6 w-max "
-                     "group-hover:flex items-center -translate-x-1/2 z-50 "
-                     (if (= position "left")
-                       "-left-4"
-                       "left-1/2"))}
-   [:div {:class (str "relative w-3 h-3 -mb-2 bg-gray-900 transform rotate-45 z-50 "
-                      (if (= position "left")
-                        "left-[30px]"
-                        ""))}]
-   [:span {:class (str "relative bg-gray-900 rounded-md z-50 "
-                       "py-1.5 px-3.5 text-xs text-white leading-none whitespace-no-wrap shadow-lg")}
-    text]])
-
 (defn panel [_]
-  (let [connections (rf/subscribe [:connections])
+  (let [search-string (.. js/window -location -search)
+        url-params (new js/URLSearchParams search-string)
+        tags (.get url-params "tags")
+        connections (rf/subscribe [:connections])
         user (rf/subscribe [:users->current-user])
+        query (r/atom {:tags (if (and tags
+                                      (not (cs/blank? tags)))
+                               (cs/split tags #",")
+                               [])})
         search-focused (r/atom false)
         searched-connections (r/atom nil)
         searched-criteria-connections (r/atom "")
@@ -54,31 +48,68 @@
     (rf/dispatch [:users->get-user])
     (rf/dispatch [:guardrails->get-all])
     (fn []
-      (let [connections-search-results (if (empty? @searched-connections)
-                                         (:results @connections)
-                                         @searched-connections)]
+      (let [connections-search-results (cond->> (if (empty? @searched-connections)
+                                                  (:results @connections)
+                                                  @searched-connections)
+                                         (seq (:tags @query))
+                                         (filter (fn [connection]
+                                                   (some (set (:tags @query))
+                                                         (:tags connection)))))
+            connections-tags (doall (->> (:results @connections)
+                                         (map :tags)
+                                         (apply concat)
+                                 (distinct)))]
         [:div {:class "flex flex-col bg-white rounded-lg h-full p-6 overflow-y-auto"}
          (when (-> @user :data :admin?)
            [:div {:class "absolute top-10 right-4 sm:right-6 lg:top-16 lg:right-20"}
             [button/tailwind-primary {:text "Add connection"
                                       :on-click (fn []
                                                   (rf/dispatch [:navigate :create-connection]))}]])
-         [:header
-          [:div {:class "mb-6"}
-           [searchbox/main
-            {:options (:results @connections)
-             :display-key :name
-             :searchable-keys [:name :type :subtype :tags :status]
-             :on-change-results-cb #(reset! searched-connections %)
-             :hide-results-list true
-             :placeholder "Search by connection name, type, status or anything"
-             :on-focus #(reset! search-focused true)
-             :on-blur #(reset! search-focused false)
-             :name "connection-search"
-             :on-change #(reset! searched-criteria-connections %)
-             :loading? (= @connections-search-status :loading)
-             :size :small
-             :icon-position "left"}]]]
+         [:> Flex {:as "header"
+                   :direction "column"
+                   :gap "3"
+                   :class "mb-4"}
+          [searchbox/main
+           {:options (:results @connections)
+            :display-key :name
+            :searchable-keys [:name :type :subtype :tags :status]
+            :on-change-results-cb #(reset! searched-connections %)
+            :hide-results-list true
+            :placeholder "Search by connection name, type, status or anything"
+            :on-focus #(reset! search-focused true)
+            :on-blur #(reset! search-focused false)
+            :name "connection-search"
+            :on-change #(reset! searched-criteria-connections %)
+            :loading? (= @connections-search-status :loading)
+            :size :small
+            :icon-position "left"}]
+          (when (not-empty connections-tags)
+             [:> Flex {:gap "4"
+                       :align "center"}
+              [:> Text {:size "1"
+                        :color :gray
+                        :weight "bold"}
+               "Tags"]
+              [:> Flex {:gap "2"
+                        :wrap "wrap"
+                        :justify "between"
+                        :position "relative"}
+               (doall
+                 (for [tag connections-tags]
+                   [:> Badge {:variant (if (some #{tag} (get @query :tags)) "solid" "soft")
+                              :as "div"
+                              :on-click #(do
+                                           (if (not (some #{tag} (get @query :tags)))
+                                             (reset! query
+                                                     {:tags (concat (get @query :tags)
+                                                                    [tag])})
+                                             (reset! query
+                                                     {:tags (remove #{tag} (get @query :tags))}))
+                                           (rf/dispatch [:connections->filter-connections @query]))
+                              :key tag
+                              :radius "full"
+                              :class "cursor-pointer"}
+                    tag]))]])]
 
          (if (and (= :loading (:status @connections)) (empty? (:results @connections)))
            [loading-list-view]

diff --git a/webapp/src/webapp/events/connections.cljs b/webapp/src/webapp/events/connections.cljs
@@ -54,6 +54,11 @@
    [{:keys [db]} [_ connections]]
    {:db (assoc db :connections {:results connections :loading false})}))
 
+(rf/reg-event-fx
+  :connections->filter-connections
+  (fn [_ [_ query-params]]
+    {:fx [[:dispatch [:navigate :connections query-params]]]}))
+
 (rf/reg-event-fx
  :connections->create-connection
  (fn