chore: improve resource explorer stories

packages/react-components/src/components/resource-explorers/explorers/asset-explorer/internal-asset-explorer.tsx

@@ -57,7 +57,7 @@ export function InternalAssetExplorer({
   const tableResourceDefinition =
     customTableResourceDefinition ??
     createDefaultAssetTableDefinition((asset) => {
-      if ((asset.hierarchies ?? []).length > 0) {
+      if ((asset.hierarchies ?? []).length > 0 && parameters === undefined) {
         return (
           <Link onFollow={() => onClickAssetName(asset)}>{asset.name}</Link>
         );

packages/react-components/src/components/resource-explorers/explorers/asset-explorer/use-assets/use-assets.ts

@@ -53,7 +53,9 @@ export function useAssets({
   const shouldRequestAssetModelAssets =
     !shouldRequestChildAssets && isEveryAssetModelAssetsParameters(parameters);
   const shouldRequestRootAssets =
-    !shouldRequestAssetModelAssets && !shouldRequestChildAssets;
+    !shouldRequestAssetModelAssets &&
+    !shouldRequestChildAssets &&
+    parameters === undefined;
 
   const assetSearchResult = useAssetSearch({
     parameters: shouldRequestSearchedAssets ? parameters : [],
@@ -85,7 +87,15 @@ export function useAssets({
     ? assetModelAssetsQueryResult
     : shouldRequestChildAssets
     ? childAssetsQueryResult
-    : rootAssetsQueryResult;
+    : shouldRequestRootAssets
+    ? rootAssetsQueryResult
+    : {
+        assets: [],
+        isLoading: false,
+        error: undefined,
+        hasNextPage: false,
+        nextPage: () => {},
+      };
 
   return queryResult;
 }

packages/react-components/src/components/resource-explorers/explorers/time-series-explorer/internal-time-series-explorer.tsx

@@ -32,7 +32,7 @@ import { DEFAULT_TIME_SERIES_DROP_DOWN_DEFINITION } from '../../constants/drop-d
 
 export function InternalTimeSeriesExplorer({
   requestFns,
-  parameters = [],
+  parameters = [{}],
   resourceName = DEFAULT_TIME_SERIES_RESOURCE_NAME,
   pluralResourceName = DEFAULT_PLURAL_TIME_SERIES_RESOURCE_NAME,
   isTimeSeriesDisabled = DEFAULT_IS_RESOURCE_DISABLED,

packages/react-components/src/components/resource-explorers/requests/use-multiple-list-requests/types.ts

@@ -0,0 +1,9 @@
+type Parameters = readonly unknown[];
+
+export type QueryKey = readonly [
+  {
+    resourceId: string;
+    allParameters: Parameters;
+    currentParameters: Parameters[number];
+  }
+];

packages/react-components/src/components/resource-explorers/requests/use-multiple-list-requests/use-cached-resources.ts

@@ -1,21 +1,33 @@
 import { useQueryClient } from '@tanstack/react-query';
+
+import type { QueryKey } from './types';
 import { resourceExplorerQueryClient } from '../resource-explorer-query-client';
 
 export interface UseCachedResourcesOptions {
+  resourceId: string;
   allParameters: readonly unknown[];
 }
 
 export type UseCachedResourcesResult<Resource> = Resource[];
 
 /** Use resources loaded into the cache. */
 export function useCachedResources<Resource>({
+  resourceId,
   allParameters,
 }: UseCachedResourcesOptions): UseCachedResourcesResult<Resource> {
   const queryClient = useQueryClient(resourceExplorerQueryClient);
 
   const resourcePages = queryClient.getQueriesData<Resource[]>({
-    queryKey: [{ allParameters }],
+    queryKey: [{ resourceId, allParameters }],
+    // Further filter the data to prevent partial matching on allParameters
+    predicate: (query) => {
+      return (
+        JSON.stringify((query.queryKey as QueryKey)[0].allParameters) ===
+        JSON.stringify(allParameters)
+      );
+    },
   });
+
   const resources = resourcePages.flatMap(([_, resources = []]) => resources);
 
   return resources;

packages/react-components/src/components/resource-explorers/requests/use-multiple-list-requests/use-multiple-list-requests.ts

@@ -2,6 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 
 import { useQueryPagination } from './use-two-dimensional-pagination';
 import { useCachedResources } from './use-cached-resources';
+import type { QueryKey } from './types';
 import {
   ListRequestBaseParams,
   ListRequestBaseResponse,
@@ -24,16 +25,6 @@ export interface UseMultipleListRequestsResult<Resource>
   resources: Resource[];
 }
 
-type Parameters = readonly unknown[];
-
-type QueryKey = [
-  {
-    resourceId: string;
-    allParameters: Parameters;
-    currentParameters: Parameters[number];
-  }
-];
-
 /** Use paginated resources across multiple queries. */
 export function useMultipleListRequests<
   Params extends ListRequestBaseParams,
@@ -99,6 +90,7 @@ export function useMultipleListRequests<
   );
 
   const resources = useCachedResources<Resource>({
+    resourceId,
     allParameters: parameters,
   });
 

packages/react-components/src/components/resource-explorers/testing/helpers/table.tsx

@@ -62,6 +62,18 @@ export function queryColumnDisplayCheckbox(columnName: string) {
   return screen.queryByRole('checkbox', { name: columnName });
 }
 
+export function getSearchField() {
+  return screen.getByLabelText('Search');
+}
+
+export function querySearchField() {
+  return screen.queryByLabelText('Search');
+}
+
+export async function typeSearchStatement(searchStatement: string) {
+  await userEvent.type(getSearchField(), searchStatement);
+}
+
 export async function clickSearch() {
   await waitFor(() => {
     userEvent.click(screen.getByRole('button', { name: 'Search' }));
@@ -72,3 +84,14 @@ export async function clickSearch() {
     expect(screen.queryByText(/Loading/)).not.toBeInTheDocument();
   });
 }
+
+export async function pressReturnKeyToSearch() {
+  await waitFor(() => {
+    userEvent.keyboard('{Enter}');
+    expect(screen.getByText(/Loading/)).toBeVisible();
+  });
+
+  await waitFor(() => {
+    expect(screen.queryByText(/Loading/)).not.toBeInTheDocument();
+  });
+}

packages/react-components/src/components/resource-explorers/testing/table-variant/asset-model-table.spec.tsx

@@ -47,7 +47,7 @@ describe('asset model table', () => {
       expect(screen.getByText('(0)')).toBeVisible();
 
       // Search
-      expect(screen.queryByLabelText('Search')).not.toBeInTheDocument();
+      expect(table.querySearchField()).not.toBeInTheDocument();
 
       // Filter
       expect(screen.queryByLabelText('Filter')).not.toBeInTheDocument();

packages/react-components/src/components/resource-explorers/testing/table-variant/asset-property-table.spec.tsx

@@ -59,7 +59,7 @@ describe('asset property table', () => {
       expect(screen.getByText('(0)')).toBeVisible();
 
       // Search
-      expect(screen.queryByLabelText('Search')).not.toBeInTheDocument();
+      expect(table.querySearchField()).not.toBeInTheDocument();
 
       // Filter
       expect(screen.queryByLabelText('Filter')).not.toBeInTheDocument();
@@ -90,7 +90,7 @@ describe('asset property table', () => {
         <AssetPropertyExplorer tableSettings={{ isSearchEnabled: true }} />
       );
 
-      expect(screen.getByLabelText('Search')).toBeVisible();
+      expect(table.getSearchField()).toBeVisible();
     });
 
     it('renders with filter enabled', () => {
@@ -364,14 +364,13 @@ describe('asset property table', () => {
         .mockResolvedValue({ rows: [] } satisfies Awaited<
           ReturnType<ExecuteQuery>
         >);
-      const user = userEvent.setup();
       render(
         <AssetPropertyExplorer
           requestFns={{ executeQuery }}
           tableSettings={{ isSearchEnabled: true }}
         />
       );
-      await user.type(screen.getByLabelText('Search'), 'Asset Property');
+      await table.typeSearchStatement('Asset Property');
       await table.clickSearch();
 
       const queryStatement = executeQuery.mock.calls[0][0].queryStatement;
@@ -415,15 +414,14 @@ describe('asset property table', () => {
       const executeQuery = jest.fn().mockResolvedValue({
         rows: [assetPropertyRow1, assetPropertyRow2, assetPropertyRow3],
       } satisfies Awaited<ReturnType<ExecuteQuery>>);
-      const user = userEvent.setup();
       render(
         <AssetPropertyExplorer
           requestFns={{ executeQuery }}
           tableSettings={{ isSearchEnabled: true }}
         />
       );
 
-      await user.type(screen.getByLabelText('Search'), 'Asset Property');
+      await table.typeSearchStatement('Asset Property');
       await table.clickSearch();
 
       // Name is rendered
@@ -548,6 +546,24 @@ describe('asset property table', () => {
         screen.queryByText(assetPropertyRow3.data[3].scalarValue)
       ).not.toBeInTheDocument();
     });
+
+    it('initiates search when user presses enter/return key', async () => {
+      const executeQuery = jest
+        .fn()
+        .mockResolvedValue({ rows: [] } satisfies Awaited<
+          ReturnType<ExecuteQuery>
+        >);
+      render(
+        <AssetPropertyExplorer
+          requestFns={{ executeQuery }}
+          tableSettings={{ isSearchEnabled: true }}
+        />
+      );
+      await table.typeSearchStatement('Asset Property');
+      await table.pressReturnKeyToSearch();
+
+      expect(executeQuery).toHaveBeenCalledOnce();
+    });
   });
 
   describe('latest values', () => {

packages/react-components/src/components/resource-explorers/testing/table-variant/asset-table.spec.tsx

@@ -45,7 +45,7 @@ describe('asset table', () => {
       expect(screen.getByText('(0)')).toBeVisible();
 
       // Search
-      expect(screen.queryByLabelText('Search')).not.toBeInTheDocument();
+      expect(table.querySearchField()).not.toBeInTheDocument();
 
       // Filter
       expect(screen.queryByLabelText('Filter')).not.toBeInTheDocument();
@@ -72,7 +72,7 @@ describe('asset table', () => {
     it('renders with search enabled', () => {
       render(<AssetExplorer tableSettings={{ isSearchEnabled: true }} />);
 
-      expect(screen.getByLabelText('Search')).toBeVisible();
+      expect(table.getSearchField()).toBeVisible();
     });
 
     it('renders with filter enabled', () => {
@@ -249,14 +249,13 @@ describe('asset table', () => {
         .mockResolvedValue({ rows: [] } satisfies Awaited<
           ReturnType<ExecuteQuery>
         >);
-      const user = userEvent.setup();
       render(
         <AssetExplorer
           requestFns={{ executeQuery }}
           tableSettings={{ isSearchEnabled: true }}
         />
       );
-      await user.type(screen.getByLabelText('Search'), 'Asset');
+      await table.typeSearchStatement('Asset');
       await table.clickSearch();
 
       const queryStatement = executeQuery.mock.calls[0][0].queryStatement;
@@ -299,15 +298,14 @@ describe('asset table', () => {
       const executeQuery = jest.fn().mockResolvedValue({
         rows: [assetRow1, assetRow2, assetRow3],
       } satisfies Awaited<ReturnType<ExecuteQuery>>);
-      const user = userEvent.setup();
       render(
         <AssetExplorer
           requestFns={{ executeQuery }}
           tableSettings={{ isSearchEnabled: true }}
         />
       );
 
-      await user.type(screen.getByLabelText('Search'), 'Asset');
+      await table.typeSearchStatement('Asset');
       await table.clickSearch();
 
       // Name is rendered
@@ -408,6 +406,24 @@ describe('asset table', () => {
         screen.queryByText(assetRow3.data[3].scalarValue)
       ).not.toBeInTheDocument();
     });
+
+    it('initiates search when user presses enter/return key', async () => {
+      const executeQuery = jest
+        .fn()
+        .mockResolvedValue({ rows: [] } satisfies Awaited<
+          ReturnType<ExecuteQuery>
+        >);
+      render(
+        <AssetExplorer
+          requestFns={{ executeQuery }}
+          tableSettings={{ isSearchEnabled: true }}
+        />
+      );
+      await table.typeSearchStatement('Asset');
+      await table.pressReturnKeyToSearch();
+
+      expect(executeQuery).toHaveBeenCalledOnce();
+    });
   });
 
   describe('selection', () => {

packages/react-components/src/components/resource-explorers/testing/table-variant/time-series-table.spec.tsx

@@ -52,7 +52,7 @@ describe('time series table', () => {
       expect(screen.getByText('(0)')).toBeVisible();
 
       // Search
-      expect(screen.queryByLabelText('Search')).not.toBeInTheDocument();
+      expect(table.querySearchField()).not.toBeInTheDocument();
 
       // Filter
       expect(screen.queryByLabelText('Filter')).not.toBeInTheDocument();

packages/react-components/src/components/resource-explorers/types/resource-explorer.ts

@@ -17,7 +17,7 @@ import {
 } from './drop-down';
 
 /** Props common to all resource explorers. */
-export type CommonResourceExplorerProps<Resource> = {
+export type CommonResourceExplorerProps<Resource = unknown> = {
   /** TODO */
   requestFns?: unknown;
 

packages/react-components/src/components/resource-explorers/variants/resource-table/resource-table-search.tsx

@@ -20,6 +20,12 @@ export function ResourceTableSearch({
 }: ResourceTableSearchProps) {
   const [searchInputValue, setSearchInputValue] = useState('');
 
+  function handleKeyDown(key: string) {
+    if (key === 'Enter') {
+      onClickSearch(searchInputValue);
+    }
+  }
+
   function handleClickSearch() {
     onClickSearch(searchInputValue);
   }
@@ -49,6 +55,7 @@ export function ResourceTableSearch({
           onChange={({ detail: { value } }) => setSearchInputValue(value)}
           placeholder='Search for resources'
           controlId='search'
+          onKeyDown={({ detail: { key } }) => handleKeyDown(key)}
         />
       </div>