feat: [M3-7011] - Add firewalls to search result queries (#11023)

* Add firewalls to search result queries * Added changeset: Firewalls to search result queries * Update tests * Change search bar text and update e2e tests * Added changeset: Firewall attributes 'created_dt' to 'created' and 'updated_dt' to 'updated' * Add customized Firewall description * Move getFirewallDescription to Firewalls/shared.ts
linode · Oct 7, 2024 · d1edee6 · d1edee6
1 parent 34d5d1f
commit d1edee6
Show file tree

Hide file tree

Showing 15 changed files with 106 additions and 40 deletions.
diff --git a/packages/api-v4/.changeset/pr-11023-changed-1727944517923.md b/packages/api-v4/.changeset/pr-11023-changed-1727944517923.md
@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Changed
+---
+
+Firewall attributes 'created_dt' to 'created' and 'updated_dt' to 'updated' ([#11023](https://github.com/linode/manager/pull/11023))
diff --git a/packages/api-v4/src/firewalls/types.ts b/packages/api-v4/src/firewalls/types.ts
@@ -12,8 +12,8 @@ export interface Firewall {
   label: string;
   tags: string[];
   rules: FirewallRules;
-  created_dt: string;
-  updated_dt: string;
+  created: string;
+  updated: string;
   entities: {
     id: number;
     type: FirewallDeviceEntityType;

diff --git a/packages/manager/.changeset/pr-11023-added-1727785979860.md b/packages/manager/.changeset/pr-11023-added-1727785979860.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Firewalls to search result queries ([#11023](https://github.com/linode/manager/pull/11023))
diff --git a/packages/manager/cypress/e2e/core/linodes/smoke-delete-linode.spec.ts b/packages/manager/cypress/e2e/core/linodes/smoke-delete-linode.spec.ts
@@ -14,9 +14,7 @@ const confirmDeletion = (linodeLabel: string) => {
   cy.findByText(linodeLabel).should('not.exist');
 
   // Confirm the linode instance is removed
-  cy.findByText(
-    'Search for Linodes, Volumes, NodeBalancers, Domains, Buckets, Tags...'
-  )
+  cy.findByText('Search Products, IP Addresses, Tags...')
     .click()
     .type(`${linodeLabel}{enter}`);
   cy.findByText('You searched for ...').should('be.visible');

diff --git a/packages/manager/cypress/e2e/core/linodes/smoke-linode-landing-table.spec.ts b/packages/manager/cypress/e2e/core/linodes/smoke-linode-landing-table.spec.ts
@@ -113,9 +113,7 @@ describe('linode landing checks', () => {
       getVisible('[aria-label="open menu"]');
       getVisible('[data-qa-add-new-menu-button="true"]');
       getVisible('[data-qa-search-icon="true"]');
-      fbtVisible(
-        'Search for Linodes, Volumes, NodeBalancers, Domains, Buckets, Tags...'
-      );
+      fbtVisible('Search Products, IP Addresses, Tags...');
 
       cy.findByLabelText('Help & Support')
         .should('be.visible')

diff --git a/packages/manager/src/__data__/firewalls.ts b/packages/manager/src/__data__/firewalls.ts
@@ -1,8 +1,8 @@
-import { Firewall } from '@linode/api-v4/lib/firewalls';
-import { FirewallDeviceEntityType } from '@linode/api-v4/lib/firewalls';
+import type { Firewall } from '@linode/api-v4/lib/firewalls';
+import type { FirewallDeviceEntityType } from '@linode/api-v4/lib/firewalls';
 
 export const firewall: Firewall = {
-  created_dt: '2019-09-11T19:44:38.526Z',
+  created: '2019-09-11T19:44:38.526Z',
   entities: [
     {
       id: 1,
@@ -37,11 +37,11 @@ export const firewall: Firewall = {
   },
   status: 'enabled',
   tags: [],
-  updated_dt: '2019-09-11T19:44:38.526Z',
+  updated: '2019-09-11T19:44:38.526Z',
 };
 
 export const firewall2: Firewall = {
-  created_dt: '2019-12-11T19:44:38.526Z',
+  created: '2019-12-11T19:44:38.526Z',
   entities: [
     {
       id: 1,
@@ -71,7 +71,7 @@ export const firewall2: Firewall = {
   },
   status: 'disabled',
   tags: [],
-  updated_dt: '2019-12-11T19:44:38.526Z',
+  updated: '2019-12-11T19:44:38.526Z',
 };
 
 export const firewalls = [firewall, firewall2];
diff --git a/packages/manager/src/factories/firewalls.ts b/packages/manager/src/factories/firewalls.ts
@@ -29,7 +29,7 @@ export const firewallRulesFactory = Factory.Sync.makeFactory<FirewallRules>({
 });
 
 export const firewallFactory = Factory.Sync.makeFactory<Firewall>({
-  created_dt: '2020-01-01 00:00:00',
+  created: '2020-01-01 00:00:00',
   entities: [
     {
       id: 1,
@@ -43,7 +43,7 @@ export const firewallFactory = Factory.Sync.makeFactory<Firewall>({
   rules: firewallRulesFactory.build(),
   status: 'enabled',
   tags: [],
-  updated_dt: '2020-01-01 00:00:00',
+  updated: '2020-01-01 00:00:00',
 });
 
 export const firewallDeviceFactory = Factory.Sync.makeFactory<FirewallDevice>({

diff --git a/packages/manager/src/features/Firewalls/shared.ts b/packages/manager/src/features/Firewalls/shared.ts
@@ -1,11 +1,14 @@
+import { capitalize } from 'src/utilities/capitalize';
 import { truncateAndJoinList } from 'src/utilities/stringUtils';
 
+import { PORT_PRESETS } from './FirewallDetail/Rules/shared';
+
 import type { Grants, Profile } from '@linode/api-v4';
 import type {
+  Firewall,
   FirewallRuleProtocol,
   FirewallRuleType,
 } from '@linode/api-v4/lib/firewalls/types';
-import { PORT_PRESETS } from './FirewallDetail/Rules/shared';
 
 export type FirewallPreset = 'dns' | 'http' | 'https' | 'mysql' | 'ssh';
 
@@ -258,3 +261,11 @@ export const checkIfUserCanModifyFirewall = (
       ?.permissions === 'read_write'
   );
 };
+
+export const getFirewallDescription = (firewall: Firewall) => {
+  const description = [
+    `Status: ${capitalize(firewall.status)}`,
+    `Services Assigned: ${firewall.entities.length}`,
+  ];
+  return description.join(', ');
+};
diff --git a/packages/manager/src/features/Search/SearchLanding.tsx b/packages/manager/src/features/Search/SearchLanding.tsx
@@ -10,6 +10,7 @@ import { Typography } from 'src/components/Typography';
 import { useAPISearch } from 'src/features/Search/useAPISearch';
 import { useIsLargeAccount } from 'src/hooks/useIsLargeAccount';
 import { useAllDomainsQuery } from 'src/queries/domains';
+import { useAllFirewallsQuery } from 'src/queries/firewalls';
 import { useAllImagesQuery } from 'src/queries/images';
 import { useAllKubernetesClustersQuery } from 'src/queries/kubernetes';
 import { useAllLinodesQuery } from 'src/queries/linodes/linodes';
@@ -45,6 +46,7 @@ import type { RouteComponentProps } from 'react-router-dom';
 const displayMap = {
   buckets: 'Buckets',
   domains: 'Domains',
+  firewalls: 'Firewalls',
   images: 'Images',
   kubernetesClusters: 'Kubernetes',
   linodes: 'Linodes',
@@ -85,6 +87,12 @@ export const SearchLanding = (props: SearchLandingProps) => {
     isLoading: areDomainsLoading,
   } = useAllDomainsQuery(shouldFetchAllEntities);
 
+  const {
+    data: firewalls,
+    error: firewallsError,
+    isLoading: areFirewallsLoading,
+  } = useAllFirewallsQuery(shouldFetchAllEntities);
+
   const {
     data: kubernetesClusters,
     error: kubernetesClustersError,
@@ -177,7 +185,8 @@ export const SearchLanding = (props: SearchLandingProps) => {
         _privateImages ?? [],
         regions ?? [],
         searchableLinodes ?? [],
-        nodebalancers ?? []
+        nodebalancers ?? [],
+        firewalls ?? []
       );
     }
   }, [
@@ -194,6 +203,7 @@ export const SearchLanding = (props: SearchLandingProps) => {
     regions,
     nodebalancers,
     linodes,
+    firewalls,
   ]);
 
   const getErrorMessage = () => {
@@ -205,6 +215,7 @@ export const SearchLanding = (props: SearchLandingProps) => {
       [imagesError, 'Images'],
       [nodebalancersError, 'NodeBalancers'],
       [kubernetesClustersError, 'Kubernetes'],
+      [firewallsError, 'Firewalls'],
       [
         objectStorageBuckets && objectStorageBuckets.errors.length > 0,
         `Object Storage in ${objectStorageBuckets?.errors
@@ -238,7 +249,8 @@ export const SearchLanding = (props: SearchLandingProps) => {
       areVolumesLoading ||
       areKubernetesClustersLoading ||
       areImagesLoading ||
-      areNodeBalancersLoading;
+      areNodeBalancersLoading ||
+      areFirewallsLoading;
 
   const errorMessage = getErrorMessage();
 

diff --git a/packages/manager/src/features/Search/search.interfaces.ts b/packages/manager/src/features/Search/search.interfaces.ts
@@ -13,6 +13,7 @@ export interface SearchableItem<T = number | string> {
 export type SearchableEntityType =
   | 'bucket'
   | 'domain'
+  | 'firewall'
   | 'image'
   | 'kubernetesCluster'
   | 'linode'
@@ -25,6 +26,7 @@ export type SearchField = 'ips' | 'label' | 'tags' | 'type';
 export interface SearchResultsByEntity {
   buckets: SearchableItem[];
   domains: SearchableItem[];
+  firewalls: SearchableItem[];
   images: SearchableItem[];
   kubernetesClusters: SearchableItem[];
   linodes: SearchableItem[];

diff --git a/packages/manager/src/features/Search/utils.test.ts b/packages/manager/src/features/Search/utils.test.ts
@@ -1,8 +1,9 @@
 import { searchableItems } from 'src/__data__/searchableItems';
-import { SearchableItem } from 'src/features/Search/search.interfaces';
 
 import { separateResultsByEntity } from './utils';
 
+import type { SearchableItem } from 'src/features/Search/search.interfaces';
+
 const data = searchableItems as SearchableItem[];
 
 describe('separate results by entity', () => {
@@ -15,6 +16,7 @@ describe('separate results by entity', () => {
     expect(results).toHaveProperty('nodebalancers');
     expect(results).toHaveProperty('kubernetesClusters');
     expect(results).toHaveProperty('buckets');
+    expect(results).toHaveProperty('firewalls');
   });
 
   it('the value of each entity type is an array', () => {
@@ -25,13 +27,15 @@ describe('separate results by entity', () => {
     expect(results.nodebalancers).toBeInstanceOf(Array);
     expect(results.kubernetesClusters).toBeInstanceOf(Array);
     expect(results.buckets).toBeInstanceOf(Array);
+    expect(results.firewalls).toBeInstanceOf(Array);
   });
 
   it('returns empty results if there is no data', () => {
     const newResults = separateResultsByEntity([]);
     expect(newResults).toEqual({
       buckets: [],
       domains: [],
+      firewalls: [],
       images: [],
       kubernetesClusters: [],
       linodes: [],

diff --git a/packages/manager/src/features/Search/utils.ts b/packages/manager/src/features/Search/utils.ts
@@ -1,8 +1,12 @@
-import { SearchResultsByEntity, SearchableItem } from './search.interfaces';
+import type {
+  SearchResultsByEntity,
+  SearchableItem,
+} from './search.interfaces';
 
 export const emptyResults: SearchResultsByEntity = {
   buckets: [],
   domains: [],
+  firewalls: [],
   images: [],
   kubernetesClusters: [],
   linodes: [],
@@ -16,6 +20,7 @@ export const separateResultsByEntity = (
   const separatedResults: SearchResultsByEntity = {
     buckets: [],
     domains: [],
+    firewalls: [],
     images: [],
     kubernetesClusters: [],
     linodes: [],

diff --git a/packages/manager/src/features/Search/withStoreSearch.tsx b/packages/manager/src/features/Search/withStoreSearch.tsx
@@ -1,31 +1,34 @@
-import {
-  Image,
-  KubernetesCluster,
-  NodeBalancer,
-  Region,
-  Volume,
-} from '@linode/api-v4';
-import { Domain } from '@linode/api-v4/lib/domains';
-import { ObjectStorageBucket } from '@linode/api-v4/lib/object-storage';
 import * as React from 'react';
 import { compose, withStateHandlers } from 'recompose';
 
 import {
   bucketToSearchableItem,
   domainToSearchableItem,
+  firewallToSearchableItem,
   imageToSearchableItem,
   kubernetesClusterToSearchableItem,
   nodeBalToSearchableItem,
   volumeToSearchableItem,
 } from 'src/store/selectors/getSearchEntities';
 
 import { refinedSearch } from './refinedSearch';
-import {
+import { emptyResults, separateResultsByEntity } from './utils';
+
+import type {
   SearchResults,
   SearchResultsByEntity,
   SearchableItem,
 } from './search.interfaces';
-import { emptyResults, separateResultsByEntity } from './utils';
+import type {
+  Firewall,
+  Image,
+  KubernetesCluster,
+  NodeBalancer,
+  Region,
+  Volume,
+} from '@linode/api-v4';
+import type { Domain } from '@linode/api-v4/lib/domains';
+import type { ObjectStorageBucket } from '@linode/api-v4/lib/object-storage';
 
 interface HandlerProps {
   search: (
@@ -37,7 +40,8 @@ interface HandlerProps {
     images: Image[],
     regions: Region[],
     searchableLinodes: SearchableItem<number | string>[],
-    nodebalancers: NodeBalancer[]
+    nodebalancers: NodeBalancer[],
+    firewalls: Firewall[]
   ) => SearchResults;
 }
 export interface SearchProps extends HandlerProps {
@@ -83,7 +87,8 @@ export default () => (Component: React.ComponentType<any>) => {
           images: Image[],
           regions: Region[],
           searchableLinodes: SearchableItem<number | string>[],
-          nodebalancers: NodeBalancer[]
+          nodebalancers: NodeBalancer[],
+          firewalls: Firewall[]
         ) => {
           const searchableBuckets = objectStorageBuckets.map((bucket) =>
             bucketToSearchableItem(bucket)
@@ -97,14 +102,15 @@ export default () => (Component: React.ComponentType<any>) => {
           const searchableImages = images.map((image) =>
             imageToSearchableItem(image)
           );
-
           const searchableClusters = clusters.map((cluster) =>
             kubernetesClusterToSearchableItem(cluster, regions)
           );
-
           const searchableNodebalancers = nodebalancers.map((nodebalancer) =>
             nodeBalToSearchableItem(nodebalancer)
           );
+          const searchableFirewalls = firewalls.map((firewall) =>
+            firewallToSearchableItem(firewall)
+          );
           const results = search(
             [
               ...searchableLinodes,
@@ -114,6 +120,7 @@ export default () => (Component: React.ComponentType<any>) => {
               ...searchableVolumes,
               ...searchableClusters,
               ...searchableNodebalancers,
+              ...searchableFirewalls,
             ],
             query
           );