Merge branch 'main' into sec92-rate-limit-assistant

Author: Steve-Mcl

frontend/src/pages/application/Overview.vue

@@ -28,6 +28,7 @@
                 :columns="cloudColumns"
                 :rows="filteredRows"
                 :show-search="true"
+                :search="searchTerm"
                 search-placeholder="Search Instances"
                 :rows-selectable="true"
                 @update:search="updateSearch"
@@ -174,6 +175,11 @@ export default {
             return this.teamMembership.role === Roles.Admin
         }
     },
+    mounted () {
+        if (this.$route?.query?.searchQuery) {
+            this.searchTerm = this.$route.query.searchQuery
+        }
+    },
     methods: {
         selectedCloudRow (cloudInstance) {
             this.$router.push({

frontend/src/pages/team/Applications/components/Application.vue

@@ -1,9 +1,9 @@
 <template>
     <ApplicationHeader :application="localApplication" />
 
-    <InstancesWrapper :application="localApplication" :is-searching="isSearching" @delete-instance="onInstanceDelete" />
+    <InstancesWrapper :application="localApplication" :search-query="searchQuery" @delete-instance="onInstanceDelete" />
 
-    <DevicesWrapper :application="localApplication" :is-searching="isSearching" @delete-device="$emit('device-deleted')" />
+    <DevicesWrapper :application="localApplication" :search-query="searchQuery" @delete-device="$emit('device-deleted')" />
 
     <ConfirmInstanceDeleteDialog ref="confirmInstanceDeleteDialog" @confirm="onInstanceDeleted" />
 </template>
@@ -29,10 +29,10 @@ export default {
             type: Object,
             required: true
         },
-        isSearching: {
-            type: Boolean,
+        searchQuery: {
+            type: String,
             required: false,
-            default: false
+            default: ''
         }
     },
     emits: ['instance-deleted', 'device-deleted'],

frontend/src/pages/team/Applications/components/compact/DevicesWrapper.vue

@@ -27,15 +27,13 @@
             >
                 <DeviceTile :device="device" :application="application" @device-action="onDeviceAction" />
             </div>
-            <div v-if="hasMoreDevices" class="has-more item-wrapper">
-                <router-link :to="{name: 'ApplicationDevices', params: {id: application.id}}">
-                    <span>
-                        {{ remainingDevices }}
-                        More...
-                    </span>
-                    <ChevronRightIcon class="ff-icon" />
-                </router-link>
-            </div>
+            <HasMoreTile
+                v-if="hasMoreDevices"
+                link-to="ApplicationDevices"
+                :remaining="remainingDevices"
+                :application="application"
+                :search-query="searchQuery"
+            />
         </div>
 
         <TeamDeviceCreateDialog
@@ -71,29 +69,28 @@
 </template>
 
 <script>
-import { ChevronRightIcon } from '@heroicons/vue/solid'
-
 import IconDeviceSolid from '../../../../../components/icons/DeviceSolid.js'
 import deviceActionsMixin from '../../../../../mixins/DeviceActions.js'
 import DeviceCredentialsDialog from '../../../Devices/dialogs/DeviceCredentialsDialog.vue'
 import TeamDeviceCreateDialog from '../../../Devices/dialogs/TeamDeviceCreateDialog.vue'
 
 import DeviceTile from './DeviceTile.vue'
+import HasMoreTile from './HasMoreTile.vue'
 
 export default {
     name: 'DevicesWrapper',
-    components: { TeamDeviceCreateDialog, DeviceCredentialsDialog, ChevronRightIcon, IconDeviceSolid, DeviceTile },
+    components: { HasMoreTile, TeamDeviceCreateDialog, DeviceCredentialsDialog, IconDeviceSolid, DeviceTile },
     mixins: [deviceActionsMixin],
     props: {
         application: {
             type: Object,
             required: true,
             default: null
         },
-        isSearching: {
-            type: Boolean,
+        searchQuery: {
+            type: String,
             required: false,
-            default: false
+            default: ''
         }
     },
     emits: ['delete-device'],
@@ -120,6 +117,9 @@ export default {
         },
         devices () {
             return this.application.devices.slice(0, 3)
+        },
+        isSearching () {
+            return this.searchQuery.length > 0
         }
     },
     mounted () {

frontend/src/pages/team/Applications/components/compact/HasMoreTile.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="has-more item-wrapper" data-el="has-more-tile">
+        <router-link :to="{name: linkTo, params: {id: application.id}, query: {searchQuery}}">
+            <span>
+                {{ remaining }}
+                More...
+            </span>
+            <ChevronRightIcon class="ff-icon" />
+        </router-link>
+    </div>
+</template>
+
+<script>
+import { ChevronRightIcon } from '@heroicons/vue/solid'
+
+export default {
+    name: 'HasMoreTile',
+    components: { ChevronRightIcon },
+    props: {
+        application: {
+            type: Object,
+            required: true
+        },
+        remaining: {
+            type: Number,
+            required: true
+        },
+        linkTo: {
+            type: String,
+            required: true
+        },
+        searchQuery: {
+            type: String,
+            required: false,
+            default: ''
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

frontend/src/pages/team/Applications/components/compact/InstancesWrapper.vue

@@ -27,39 +27,37 @@
             >
                 <InstanceTile :instance="instance" @delete-instance="$emit('delete-instance', $event)" />
             </div>
-            <div v-if="hasMoreInstances" class="has-more item-wrapper">
-                <router-link :to="{name: 'ApplicationInstances', params: {id: application.id}}">
-                    <span>
-                        {{ remainingInstances }}
-                        More...
-                    </span>
-                    <ChevronRightIcon class="ff-icon" />
-                </router-link>
-            </div>
+            <HasMoreTile
+                v-if="hasMoreInstances"
+                link-to="ApplicationInstances"
+                :remaining="remainingInstances"
+                :application="application"
+                :search-query="searchQuery"
+            />
         </div>
     </section>
 </template>
 
 <script>
-import { ChevronRightIcon } from '@heroicons/vue/solid'
-
 import IconNodeRedSolid from '../../../../../components/icons/NodeRedSolid.js'
 
+import HasMoreTile from './HasMoreTile.vue'
+
 import InstanceTile from './InstanceTile.vue'
 
 export default {
     name: 'InstancesWrapper',
-    components: { ChevronRightIcon, IconNodeRedSolid, InstanceTile },
+    components: { HasMoreTile, IconNodeRedSolid, InstanceTile },
     props: {
         application: {
             type: Object,
             required: true,
             default: null
         },
-        isSearching: {
-            type: Boolean,
+        searchQuery: {
+            type: String,
             required: false,
-            default: false
+            default: ''
         }
     },
     emits: ['delete-instance'],
@@ -86,6 +84,9 @@ export default {
         },
         threeInstances () {
             return this.application.instanceCount === 3
+        },
+        isSearching () {
+            return this.searchQuery.length > 0
         }
     }
 }

frontend/src/pages/team/Applications/index.vue

@@ -48,7 +48,7 @@
                     <li v-for="application in filteredApplications" :key="application.id" data-el="application-item">
                         <ApplicationListItem
                             :application="application"
-                            :is-searching="filterTerm.length > 0"
+                            :search-query="filterTerm"
                             @instance-deleted="fetchData(false)"
                             @device-deleted="fetchData(false)"
                         />

frontend/src/ui-components/components/data-table/DataTable.vue

@@ -194,7 +194,7 @@ export default {
         },
         filterTerm: {
             get () {
-                return this.search
+                return this.search || this.internalSearch
             },
             set (value) {
                 const valueChanged = value !== this.internalSearch
@@ -259,6 +259,11 @@ export default {
             }
         }
     },
+    mounted () {
+        if (this.$route?.query?.searchQuery) {
+            this.internalSearch = this.$route.query.searchQuery
+        }
+    },
     methods: {
         filterRows (rows) {
             const search = this.internalSearch