refactor: [M3-9510] - Clean up main search implementation

packages/manager/.changeset/pr-11819-changed-1741629531708.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Updates main search to use new API search implementation for large accounts ([#11819](https://github.com/linode/manager/pull/11819))

packages/manager/.changeset/pr-11819-tech-stories-1741629552993.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Updates main search to not depend on `recompose` library ([#11819](https://github.com/linode/manager/pull/11819))

packages/manager/src/__data__/searchResults.ts

@@ -42,7 +42,7 @@ export const searchbarResult1 = {
     searchText: 'result',
     tags: [],
   },
-  entityType: 'linode' as any,
+  entityType: 'linode' as const,
   label: 'result1',
   value: '111111',
 };
@@ -57,6 +57,7 @@ export const searchbarResult2 = {
     searchText: 'result',
     tags: ['tag1', 'tag2'],
   },
+  entityType: 'nodebalancer' as const,
   label: 'result2',
   value: '222222',
 };

packages/manager/src/components/Tag/Tag.tsx

@@ -58,7 +58,7 @@ export const Tag = (props: TagProps) => {
     if (closeMenu) {
       closeMenu();
     }
-    history.push(`/search/?query=tag:${label}`);
+    history.push(`/search?query=tag:${label}`);
   };
 
   // If maxLength is set, truncate display to that length.

packages/manager/src/constants.ts

@@ -15,6 +15,15 @@ export const ENABLE_DEV_TOOLS = getBooleanEnv(
 export const ENABLE_MAINTENANCE_MODE =
   import.meta.env.REACT_APP_ENABLE_MAINTENANCE_MODE === 'true';
 
+/**
+ * Because Cloud Manager uses two different search implementations depending on the account's
+ * size, we have this environment variable which allows us to force Cloud Manager to use
+ * a desired implementation.
+ *
+ * @example REACT_APP_FORCE_SEARCH_TYPE=api
+ */
+export const FORCE_SEARCH_TYPE = import.meta.env.REACT_APP_FORCE_SEARCH_TYPE;
+
 /** required for the app to function */
 export const APP_ROOT =
   import.meta.env.REACT_APP_APP_ROOT || 'http://localhost:3000';

packages/manager/src/env.d.ts

@@ -18,6 +18,7 @@ interface ImportMetaEnv {
   REACT_APP_DISABLE_NEW_RELIC?: boolean;
   REACT_APP_ENABLE_DEV_TOOLS?: boolean;
   REACT_APP_ENABLE_MAINTENANCE_MODE?: string;
+  REACT_APP_FORCE_SEARCH_TYPE?: 'api' | 'client';
   REACT_APP_GPAY_ENV?: 'PRODUCTION' | 'TEST';
   REACT_APP_GPAY_MERCHANT_ID?: string;
   REACT_APP_LAUNCH_DARKLY_ID?: string;

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.test.tsx

@@ -28,9 +28,13 @@ vi.mock('@linode/queries', async (importOriginal) => ({
   useRegionsQuery: queryMocks.useRegionsQuery,
 }));
 
-vi.mock('src/queries/databases/databases', () => ({
-  useDatabaseTypesQuery: queryMocks.useDatabaseTypesQuery,
-}));
+vi.mock(import('src/queries/databases/databases'), async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...actual,
+    useDatabaseTypesQuery: queryMocks.useDatabaseTypesQuery,
+  };
+});
 
 describe('DatabaseSummaryClusterConfiguration', () => {
   it('should display correctly for default db', async () => {

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.test.tsx

@@ -22,9 +22,13 @@ const queryMocks = vi.hoisted(() => ({
   useDatabaseCredentialsQuery: vi.fn().mockReturnValue({}),
 }));
 
-vi.mock('src/queries/databases/databases', () => ({
-  useDatabaseCredentialsQuery: queryMocks.useDatabaseCredentialsQuery,
-}));
+vi.mock(import('src/queries/databases/databases'), async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...actual,
+    useDatabaseCredentialsQuery: queryMocks.useDatabaseCredentialsQuery,
+  };
+});
 
 describe('DatabaseSummaryConnectionDetails', () => {
   it('should display correctly for default db', async () => {

packages/manager/src/features/Databases/utilities.test.ts

@@ -48,9 +48,13 @@ const queryMocks = vi.hoisted(() => ({
   useDatabaseTypesQuery: vi.fn().mockReturnValue({}),
 }));
 
-vi.mock('src/queries/databases/databases', () => ({
-  useDatabaseTypesQuery: queryMocks.useDatabaseTypesQuery,
-}));
+vi.mock(import('src/queries/databases/databases'), async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...actual,
+    useDatabaseTypesQuery: queryMocks.useDatabaseTypesQuery,
+  };
+});
 
 describe('useIsDatabasesEnabled', () => {
   it('should return correctly for non V1/V2 user', async () => {

packages/manager/src/features/Kubernetes/kubeUtils.ts

@@ -17,7 +17,6 @@ import type {
   KubernetesTieredVersion,
   KubernetesVersion,
 } from '@linode/api-v4/lib/kubernetes';
-import type { Region } from '@linode/api-v4/lib/regions';
 import type { ExtendedType } from 'src/utilities/extendType';
 
 interface ClusterData {
@@ -52,14 +51,10 @@ export const getTotalClusterMemoryCPUAndStorage = (
   );
 };
 
-export const getDescriptionForCluster = (
-  cluster: KubernetesCluster,
-  regions: Region[]
-) => {
-  const region = regions.find((r) => r.id === cluster.region);
+export const getDescriptionForCluster = (cluster: KubernetesCluster) => {
   const description: string[] = [
     `Kubernetes ${cluster.k8s_version}`,
-    region?.label ?? cluster.region,
+    cluster.region,
   ];
 
   if (cluster.control_plane.high_availability) {

packages/manager/src/features/Linodes/presentation.test.tsx

@@ -1,4 +1,4 @@
-import { displayTypeForKubePoolNode, typeLabelDetails } from './presentation';
+import { typeLabelDetails } from './presentation';
 
 describe('Linode presentation helpers', () => {
   describe('type label details', () => {
@@ -27,24 +27,4 @@ describe('Linode presentation helpers', () => {
       expect(typedLabel.includes('4CPU'));
     });
   });
-
-  describe('Display for Kube pool nodes', () => {
-    it('should return a string with heading, size, and CPUs', () => {
-      expect(displayTypeForKubePoolNode('standard', 4096, 2)).toEqual(
-        'Standard 4 GB, 2 CPUs'
-      );
-    });
-
-    it('should pluralize CPUs correctly', () => {
-      expect(displayTypeForKubePoolNode('standard', 2048, 1)).toEqual(
-        'Standard 2 GB, 1 CPU'
-      );
-    });
-
-    it('should format highmem instances', () => {
-      expect(displayTypeForKubePoolNode('highmem', 2048, 1)).toEqual(
-        'High Memory 2 GB, 1 CPU'
-      );
-    });
-  });
 });

packages/manager/src/features/Linodes/presentation.ts

@@ -1,5 +1,3 @@
-import { ExtendedType } from 'src/utilities/extendType';
-
 export const titlecase = (string: string): string => {
   return `${string.substr(0, 1).toUpperCase()}${string.substr(1)}`;
 };
@@ -22,40 +20,3 @@ export const typeLabelDetails = (
   const diskG = disk / 1024;
   return `${cpus} CPU, ${diskG} GB Storage, ${memG} GB RAM`;
 };
-
-export const displayType = (
-  linodeTypeId: null | string,
-  types: Pick<ExtendedType, 'formattedLabel' | 'id'>[]
-): string => {
-  if (linodeTypeId === null) {
-    return 'No Plan';
-  }
-
-  const foundType = types.find((t) => t.id === linodeTypeId);
-  if (foundType && foundType.formattedLabel) {
-    return foundType.formattedLabel;
-  }
-
-  return 'Unknown Plan';
-};
-
-export const displayClass = (category: string) => {
-  const formattedCategory = category === 'highmem' ? 'High Memory' : category;
-  return titlecase(formattedCategory);
-};
-
-export const displaySize = (memory: number) => {
-  const memG = memory / 1024;
-  return `${memG} GB`;
-};
-
-export const displayTypeForKubePoolNode = (
-  category: string,
-  memory: number,
-  vcpus: number
-) => {
-  const label = displayClass(category);
-  const size = displaySize(memory);
-  const cpus = `${vcpus} CPU${vcpus !== 1 ? 's' : ''}`;
-  return `${label} ${size}, ${cpus}`;
-};

packages/manager/src/features/Search/ResultGroup.tsx

@@ -13,12 +13,12 @@ import { TableRow } from 'src/components/TableRow';
 import { StyledButton, StyledTypography } from './ResultGroup.styles';
 import { ResultRow } from './ResultRow';
 
-import type { ResultRowDataOption } from './types';
+import type { SearchableItem } from './search.interfaces';
 
 interface ResultGroupProps {
   entity: string;
   groupSize: number;
-  results: ResultRowDataOption[];
+  results: SearchableItem[];
 }
 
 export const ResultGroup = (props: ResultGroupProps) => {

packages/manager/src/features/Search/ResultRow.tsx

@@ -15,10 +15,10 @@ import {
   StyledTagTableCell,
 } from './ResultRow.styles';
 
-import type { ResultRowDataOption } from './types';
+import type { SearchableItem } from './search.interfaces';
 
 interface ResultRowProps {
-  result: ResultRowDataOption;
+  result: SearchableItem;
 }
 
 export const ResultRow = (props: ResultRowProps) => {
@@ -47,7 +47,9 @@ export const ResultRow = (props: ResultRowProps) => {
         </StyledCreatedTableCell>
 
         <StyledTagTableCell>
-          <Tags data-testid={'result-tags'} tags={result.data.tags} />
+          {result.data.tags && (
+            <Tags data-testid={'result-tags'} tags={result.data.tags} />
+          )}
         </StyledTagTableCell>
       </Hidden>
     </StyledTableRow>