Merge pull request #4141 from FlowFuse/4014_search-applications-view

Add search bar and allow searching through applications
FlowFuse · Jul 9, 2024 · 8718b1d · 8718b1d
2 parents b832636 + 44804fc
commit 8718b1d
Show file tree

Hide file tree

Showing 2 changed files with 119 additions and 4 deletions.
diff --git a/frontend/src/pages/team/Applications/index.vue b/frontend/src/pages/team/Applications/index.vue
@@ -36,15 +36,26 @@
             <ff-loading v-if="loading" message="Loading Applications..." />
 
             <template v-else-if="!loading && applications.size > 0">
-                <ul class="ff-applications-list" data-el="applications-list">
-                    <li v-for="application in applicationsList" :key="application.id">
+                <ff-text-input
+                    v-model="filterTerm"
+                    class="ff-data-table--search"
+                    data-form="search"
+                    placeholder="Search Applications..."
+                >
+                    <template #icon><SearchIcon /></template>
+                </ff-text-input>
+                <ul v-if="filteredApplications.length > 0" class="ff-applications-list" data-el="applications-list">
+                    <li v-for="application in filteredApplications" :key="application.id">
                         <ApplicationListItem
                             :application="application"
                             @instance-deleted="fetchData(false)"
                             @device-deleted="fetchData(false)"
                         />
                     </li>
                 </ul>
+                <p v-else class="no-results">
+                    No Data Found. Try Another Search.
+                </p>
             </template>
 
             <EmptyState v-else>
@@ -86,7 +97,7 @@
 </template>
 
 <script>
-import { PlusSmIcon } from '@heroicons/vue/outline'
+import { PlusSmIcon, SearchIcon } from '@heroicons/vue/outline'
 
 import teamApi from '../../../api/team.js'
 import EmptyState from '../../../components/EmptyState.vue'
@@ -100,6 +111,7 @@ const ASSOCIATIONS_LIMIT = 3
 export default {
     name: 'TeamApplications',
     components: {
+        SearchIcon,
         ApplicationListItem,
         EmptyState,
         PlusSmIcon
@@ -111,12 +123,25 @@ export default {
             applications: new Map(),
             columns: [
                 { label: 'Name', class: ['flex-grow'], key: 'name', sortable: true }
-            ]
+            ],
+            filterTerm: ''
         }
     },
     computed: {
         applicationsList () {
             return Array.from(this.applications.values())
+        },
+        filteredApplications () {
+            if (this.filterTerm) {
+                return this.applicationsList.filter(app => {
+                    const includes = []
+                    const appNameMatch = app.name.toLowerCase().includes(this.filterTerm.toLowerCase())
+
+                    includes.push(appNameMatch)
+
+                    return includes.includes(true)
+                })
+            } return this.applicationsList
         }
     },
     watch: {
@@ -222,4 +247,9 @@ export default {
 
 <style lang="scss">
 @import "../../../stylesheets/components/applications-list";
+
+.no-results {
+  text-align: center;
+  color: $ff-grey-400;
+}
 </style>
diff --git a/test/e2e/frontend/cypress/tests/applications/overview.spec.js b/test/e2e/frontend/cypress/tests/applications/overview.spec.js
@@ -342,5 +342,90 @@ describe('FlowForge - Applications', () => {
                         .should('not.be.disabled')
                 })
         })
+
+        describe('can search through', () => {
+            it('applications', () => {
+                cy.intercept(
+                    'GET',
+                    '/api/*/teams/*/applications/status*',
+                    {
+                        count: 1,
+                        applications: [
+                            { id: '1', instances: [], devices: [] },
+                            { id: '2', instances: [], devices: [] },
+                            { id: '3', instances: [], devices: [] }
+                        ]
+                    }
+                ).as('getAppStatuses')
+                cy.intercept('get', '/api/*/applications/*/devices*', {
+                    meta: {},
+                    count: 0,
+                    devices: []
+                }).as('getDevices')
+                cy.intercept(
+                    'GET',
+                    '/api/*/teams/*/applications*',
+                    {
+                        count: 1,
+                        applications: [
+                            {
+                                id: '1',
+                                name: 'My First App',
+                                description: 'My first empty app description',
+                                instancesSummary: {
+                                    instances: []
+                                },
+                                devicesSummary: {
+                                    devices: []
+                                }
+                            },
+                            {
+                                id: '2',
+                                name: 'My Second App',
+                                description: 'My second empty app description',
+                                instancesSummary: {
+                                    instances: []
+                                },
+                                devicesSummary: {
+                                    devices: []
+                                }
+                            },
+                            {
+                                id: '3',
+                                name: 'My Third App',
+                                description: 'My third empty app description',
+                                instancesSummary: {
+                                    instances: []
+                                },
+                                devicesSummary: {
+                                    devices: []
+                                }
+                            }
+                        ]
+                    }
+                ).as('getApplication')
+
+                cy.home()
+
+                cy.wait('@getAppStatuses')
+                cy.wait('@getApplication')
+                cy.wait('@getDevices')
+
+                // check that we have three apps
+                cy.get('[data-el="applications-list"]').children().should('have.length', 3)
+
+                // check that we have three apps after searching a term common to all three
+                cy.get('[data-form="search"]').type('my')
+                cy.get('[data-el="applications-list"]').children().should('have.length', 3)
+
+                // check that we have three apps after clearing the search input
+                cy.get('[data-form="search"] input').clear()
+                cy.get('[data-el="applications-list"]').children().should('have.length', 3)
+
+                // check that we have a single app after searching a term unique to one
+                cy.get('[data-form="search"] input').type('second')
+                cy.get('[data-el="applications-list"]').children().should('have.length', 1).contains('My Second App')
+            })
+        })
     })
 })