diff --git a/webapp/package.json b/webapp/package.json index f70b4296..87896205 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -1,6 +1,6 @@ { "name": "webapp", - "version": "1.34.0", + "version": "1.34.1", "scripts": { "ancient": "clojure -Sdeps '{:deps {com.github.liquidz/antq {:mvn/version \"RELEASE\"}}}' -m antq.core", "genversion": "npx genversion src/webapp/version.js", diff --git a/webapp/src/webapp/audit/views/session_details.cljs b/webapp/src/webapp/audit/views/session_details.cljs index d6988daf..dff3e490 100644 --- a/webapp/src/webapp/audit/views/session_details.cljs +++ b/webapp/src/webapp/audit/views/session_details.cljs @@ -4,6 +4,7 @@ ["@heroicons/react/24/outline" :as hero-outline-icon] ["clipboard" :as clipboardjs] ["react" :as react] + ["@radix-ui/themes" :refer [Tooltip]] [clojure.string :as cs] [re-frame.core :as rf] [reagent.core :as r] @@ -168,13 +169,6 @@ (str total-redact " " (if (<= total-redact 1) "item" "items"))]]]]]]))])) -(defn- tooltip [text] - [:div {:class "absolute -bottom-10 left-1/2 flex-col hidden mt-6 w-max group-hover:flex items-center -translate-x-1/2"} - [:div {:class "w-3 h-3 -mb-2 bg-gray-900 transform rotate-45"}] - [: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 main [session] (let [user (rf/subscribe [:users->current-user]) session-details (rf/subscribe [:audit->session-details]) @@ -248,30 +242,31 @@ [:div {:class "relative flex gap-2.5 items-start pr-3"} [:div {:class "relative group"} - [tooltip "Re-run"] - [:div {:class "rounded-full p-2 bg-gray-100 hover:bg-gray-200 transition cursor-pointer" - :on-click #(re-run-session session)} - [:> hero-outline-icon/PlayIcon {:class "h-5 w-5 text-gray-600"}]]] + [:> Tooltip {:content "Re-run session"} + [:div {:class "rounded-full p-2 bg-gray-100 hover:bg-gray-200 transition cursor-pointer" + :on-click #(re-run-session session)} + [:> hero-outline-icon/PlayIcon {:class "h-5 w-5 text-gray-600"}]]]] [:div {:class "relative group"} - [tooltip "Copy link"] - [:div {:class "rounded-full p-2 bg-gray-100 hover:bg-gray-200 transition cursor-pointer copy-to-clipboard-url" - :data-clipboard-text (str (-> js/document .-location .-origin) - (routes/url-for :sessions) - "/" (:id session))} - [:> hero-outline-icon/ClipboardDocumentIcon {:class "h-5 w-5 text-gray-600"}]]] + [:> Tooltip {:content "Copy link"} + [:div {:class "rounded-full p-2 bg-gray-100 hover:bg-gray-200 transition cursor-pointer copy-to-clipboard-url" + :data-clipboard-text (str (-> js/document .-location .-origin) + (routes/url-for :sessions) + "/" (:id session))} + [:> hero-outline-icon/ClipboardDocumentIcon {:class "h-5 w-5 text-gray-600"}]]]] (when (and (= (:verb session) "exec") (or (:output session) (:event_stream session)) (not disabled-download)) [:div {:class "relative"} - [:div {:class "relative rounded-full p-2 bg-gray-100 hover:bg-gray-200 transition cursor-pointer group" - :on-click #(rf/dispatch [:audit->session-file-generate - (:id session) - (get export-dictionary (keyword (:type session)) "txt")])} - [tooltip (str "Download " (cs/upper-case - (get export-dictionary (keyword (:type session)) "txt")))] - [:> hero-outline-icon/ArrowDownTrayIcon {:class "h-5 w-5 text-gray-600"}]]])]] + [:> Tooltip {:content (str "Download " + (cs/upper-case + (get export-dictionary (keyword (:type session)) "txt")))} + [:div {:class "relative rounded-full p-2 bg-gray-100 hover:bg-gray-200 transition cursor-pointer group" + :on-click #(rf/dispatch [:audit->session-file-generate + (:id session) + (get export-dictionary (keyword (:type session)) "txt")])} + [:> hero-outline-icon/ArrowDownTrayIcon {:class "h-5 w-5 text-gray-600"}]]]])]] (when (-> session :labels :runbookFile) [:div {:class "text-xs text-gray-500"} diff --git a/webapp/src/webapp/components/accordion.cljs b/webapp/src/webapp/components/accordion.cljs index 32dbd1ac..45832dbc 100644 --- a/webapp/src/webapp/components/accordion.cljs +++ b/webapp/src/webapp/components/accordion.cljs @@ -40,7 +40,7 @@ [:div {:className "flex flex-col items-start"} [:> Text {:size "5" :weight "bold" :className "text-[--gray-12]"} title] - [:> Text {:size "3" :className "text-[--gray-11]"} subtitle]]] + [:> Text {:size "3" :className "text-[--gray-11] text-left"} subtitle]]] [:div {:className "flex space-x-3 items-center"} (when show-icon? [status-icon status]) diff --git a/webapp/src/webapp/components/modal.cljs b/webapp/src/webapp/components/modal.cljs index 197504a4..b43634d2 100644 --- a/webapp/src/webapp/components/modal.cljs +++ b/webapp/src/webapp/components/modal.cljs @@ -1,6 +1,6 @@ (ns webapp.components.modal (:require ["@heroicons/react/24/outline" :as hero-outline-icon] - ["@radix-ui/themes" :refer [Box Dialog VisuallyHidden ScrollArea]] + ["@radix-ui/themes" :refer [Box Dialog VisuallyHidden Tooltip]] [re-frame.core :as rf])) (defmulti markup identity) @@ -22,15 +22,11 @@ "bg-white shadow-sm rounded-lg " "mx-auto mt-16 lg:mt-large p-regular overflow-auto " modal-size)} - [:div {:class (str "absolute right-4 top-4 p-2 rounded-full bg-gray-100" - " hover:bg-gray-200 transition cursor-pointer z-10 group") - :on-click modal-on-click-out} - [:div {:class "absolute -bottom-10 left-1/2 flex-col hidden mt-6 w-max group-hover:flex items-center -translate-x-1/2"} - [:div {:class "w-3 h-3 -mb-2 bg-gray-900 transform rotate-45"}] - [: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")} - "Close"]] - [:> hero-outline-icon/XMarkIcon {:class "h-5 w-5 text-gray-600"}]] + [:> Tooltip {:content "Close"} + [:div {:class (str "absolute right-4 top-4 p-2 rounded-full bg-gray-100" + " hover:bg-gray-200 transition cursor-pointer z-10 group") + :on-click modal-on-click-out} + [:> hero-outline-icon/XMarkIcon {:class "h-5 w-5 text-gray-600"}]]] component]])) (defmethod markup :default [_] nil) diff --git a/webapp/src/webapp/connections/views/connection_list.cljs b/webapp/src/webapp/connections/views/connection_list.cljs index 623616b7..8e4c4a75 100644 --- a/webapp/src/webapp/connections/views/connection_list.cljs +++ b/webapp/src/webapp/connections/views/connection_list.cljs @@ -1,5 +1,6 @@ (ns webapp.connections.views.connection-list - (:require ["@heroicons/react/16/solid" :as hero-micro-icon] + (:require ["lucide-react" :refer [Wifi Tags EllipsisVertical]] + ["@radix-ui/themes" :refer [IconButton DropdownMenu Tooltip]] [clojure.string :as cs] [re-frame.core :as rf] [reagent.core :as r] @@ -112,7 +113,7 @@ (when (seq (:tags connection)) [:div {:class "relative group flex items-center gap-2 text-xs text-gray-700"} [:div - [:> hero-micro-icon/TagIcon {:class "w-4 h-4"}]] + [:> Tags {:size 16}]] [:span {:class "text-nowrap font-semibold"} (str (first (:tags connection)) (when (> (count (:tags connection)) 1) @@ -131,16 +132,23 @@ (= "tcp" (:subtype connection)))) [:div {:class "relative cursor-pointer group" :on-click #(rf/dispatch [:connections->start-connect (:name connection)])} - [tooltip "Hoop Access" (when (not (-> @user :data :admin?)) - "left")] - [:> hero-micro-icon/SignalIcon {:class "w-6 h-6 text-gray-700"}]]) + [:> Tooltip {:content "Hoop Access"} + [:> IconButton {:size 1 :variant "ghost" :color "gray"} + [:> Wifi {:size 16}]]]]) - (when (and (-> @user :data :admin?) - (not (= (:managed_by connection) "hoopagent"))) - [:div {:class "relative cursor-pointer group" - :on-click (fn [] - (rf/dispatch [:plugins->get-my-plugins]) - (rf/dispatch [:connections->get-connection {:connection-name (:name connection)}]) - (rf/dispatch [:modal->open {:content [create-update-connection/main :update connection]}]))} - [tooltip "Configure" "left"] - [:> hero-micro-icon/AdjustmentsHorizontalIcon {:class "w-6 h-6 text-gray-700"}]])]])))]])])))) + [:> DropdownMenu.Root {:dir "rtl"} + [:> DropdownMenu.Trigger + [:> IconButton {:size 1 :variant "ghost" :color "gray"} + [:> EllipsisVertical {:size 16}]]] + [:> DropdownMenu.Content + (when (and (-> @user :data :admin?) + (not (= (:managed_by connection) "hoopagent"))) + [:> DropdownMenu.Item {:on-click (fn [] + (rf/dispatch [:plugins->get-my-plugins]) + (rf/dispatch [:connections->get-connection {:connection-name (:name connection)}]) + (rf/dispatch [:modal->open {:content [create-update-connection/main :update connection]}]))} + "Configure"]) + [:> DropdownMenu.Item {:color "red" + :on-click (fn [] + (rf/dispatch [:connections->delete-connection (:name connection)]))} + "Delete"]]]]])))]])]))))