Copy saved search ID (#2956)

* add copy saved search ID * Add hover copy link icon
google · Oct 24, 2023 · 5ff5619 · 5ff5619
1 parent 1670b98
commit 5ff5619
Showing 1 changed file with 41 additions and 11 deletions.
diff --git a/timesketch/frontend-ng/src/components/LeftPanel/SavedSearches.vue b/timesketch/frontend-ng/src/components/LeftPanel/SavedSearches.vue
@@ -32,29 +32,49 @@ limitations under the License.
     <v-expand-transition>
       <div v-show="expanded && meta.views.length">
         <div
-          v-for="savedSearch in meta.views"
-          :key="savedSearch.name"
-          @click="setView(savedSearch)"
-          style="cursor: pointer; font-size: 0.9em"
+          v-for="(savedSearch, key) in meta.views"
+          :key="key"
+          @mouseover="c_key = key"
+          @mouseleave="c_key = -1"
+          style="font-size: 0.9em"
         >
           <v-row no-gutters class="py-1 pl-5 pr-3" :class="$vuetify.theme.dark ? 'dark-hover' : 'light-hover'">
-            <v-col cols="11"
+            <v-col @click="setView(savedSearch)" style="cursor: pointer"
               ><div class="mt-1">{{ savedSearch.name }}</div></v-col
             >
-            <v-col cols="1">
+            <v-col cols="auto">
+              <v-tooltip top open-delay="500">
+                <template v-slot:activator="{ on }">
+                  <v-btn
+                    icon
+                    x-small
+                    style="cursor: pointer"
+                    @click="copySavedSearchUrlToClipboard(savedSearch.id)"
+                    v-on="on"
+                  >
+                    <v-icon small v-show="key == c_key">mdi-link-variant</v-icon>
+                  </v-btn>
+                </template>
+                <span>Copy link to this search</span>
+              </v-tooltip>
               <v-menu offset-y>
                 <template v-slot:activator="{ on, attrs }">
-                  <v-btn small icon v-bind="attrs" v-on="on">
+                  <v-btn small icon v-bind="attrs" v-on="on" class="mr-1">
                     <v-icon small>mdi-dots-vertical</v-icon>
                   </v-btn>
                 </template>
-
                 <v-list dense class="mx-auto">
+                  <v-list-item style="cursor: pointer" @click="copySavedSearchIdToClipboard(savedSearch.id)">
+                    <v-list-item-icon>
+                      <v-icon small>mdi-identifier</v-icon>
+                    </v-list-item-icon>
+                    <v-list-item-title>Copy saved search ID</v-list-item-title>
+                  </v-list-item>
                   <v-list-item style="cursor: pointer" @click="copySavedSearchUrlToClipboard(savedSearch.id)">
                     <v-list-item-icon>
                       <v-icon small>mdi-link-variant</v-icon>
                     </v-list-item-icon>
-                    <v-list-item-title>Copy link to this search </v-list-item-title>
+                    <v-list-item-title>Copy link to this search</v-list-item-title>
                   </v-list-item>
                 </v-list>
               </v-menu>
@@ -75,6 +95,7 @@ export default {
   data: function () {
     return {
       expanded: false,
+      c_key: -1,
     }
   },
   computed: {
@@ -89,13 +110,22 @@ export default {
     setView: function (savedSearch) {
       EventBus.$emit('setActiveView', savedSearch)
     },
+    copySavedSearchIdToClipboard(savedSearchId) {
+      try {
+        navigator.clipboard.writeText(savedSearchId)
+        this.infoSnackBar('Saved Search ID copied to clipboard')
+      } catch (error) {
+        this.errorSnackBar('Failed to load Saved Search ID into the clipboard!')
+        console.error(error)
+      }
+    },
     copySavedSearchUrlToClipboard(savedSearchId) {
       try {
         let searchUrl = window.location.origin + this.$route.path + '?view=' + savedSearchId
         navigator.clipboard.writeText(searchUrl)
-        this.infoSnackBar('Event URL copied to clipboard')
+        this.infoSnackBar('Saved Search URL copied to clipboard')
       } catch (error) {
-        this.errorSnackBar('Failed to load Event URL into the clipboard')
+        this.errorSnackBar('Failed to load Saved Search URL into the clipboard!')
         console.error(error)
       }
     },