chore: add onSearch callback with loading skeleton (#1373)

Author: andersler

src/organisms/TopBar/FieldMenu/FieldMenu.stories.tsx

@@ -37,6 +37,8 @@ function Wrapper(args: FieldMenuProps & { withField?: boolean }) {
       onClearField={args.onClear ? handleOnClear : undefined}
       showAccessITLink={args.showAccessITLink}
       onSelectField={handleOnSelectField}
+      onSearchChange={args.onSearchChange}
+      isSearching={args.isSearching}
       applicationIcon="acquire"
       applicationName="Acquire"
     >
@@ -207,3 +209,27 @@ export const OnlyOneField: Story = {
     ).toBeInTheDocument();
   },
 };
+
+export const IsSearching: Story = {
+  args: {
+    availableFields: [fields[0]],
+    isSearching: true,
+    onSearchChange: fn(),
+  },
+  play: async ({ canvas, args }) => {
+    const searchValue = 'missing-field';
+    const button = canvas.getByTestId('field-selector-top-bar-button');
+    await userEvent.click(button);
+
+    const searchInput = canvas.getByPlaceholderText(/search fields/i);
+    await userEvent.type(searchInput, searchValue);
+
+    await expect(args.onSearchChange).toHaveBeenCalledWith(searchValue);
+    await expect(
+      canvas.getByTestId('field-menu-search-skeleton')
+    ).toBeInTheDocument();
+    await expect(
+      canvas.queryByText(/no fields matching your search/i)
+    ).not.toBeInTheDocument();
+  },
+};

src/organisms/TopBar/FieldMenu/FieldMenu.styles.ts

@@ -1,6 +1,7 @@
 import { Typography } from '@equinor/eds-core-react';
 
 import { colors, spacings } from 'src/atoms/style';
+import { SkeletonBase } from 'src/molecules/Skeleton/SkeletonBase/SkeletonBase';
 
 import styled, { css } from 'styled-components';
 
@@ -114,3 +115,12 @@ export const TextContainer = styled.div`
     text-transform: capitalize;
   }
 `;
+export const ListItemSkeleton = styled(SkeletonBase)`
+  width: 100%;
+  height: 24px;
+`;
+export const MenuItemSkeletonWrapper = styled.div`
+  border-top: 1px solid ${colors.ui.background__light.rgba};
+  outline: none !important;
+  padding: ${spacings.medium} ${spacings.large};
+`;

src/organisms/TopBar/FieldMenu/FieldMenu.tsx

@@ -13,8 +13,10 @@ import { tokens } from '@equinor/eds-tokens';
 
 import {
   ListContainer,
+  ListItemSkeleton,
   MenuFixedItem,
   MenuItem,
+  MenuItemSkeletonWrapper,
   MenuSection,
   NoFieldsText,
   NoSearchResultsContainer,
@@ -34,6 +36,8 @@ export interface FieldMenuProps {
   onClear?: () => void;
   itemNameSingular?: string; // Defaults to 'field'
   showAccessITLink?: boolean;
+  onSearchChange?: (searchValue: string) => void;
+  isSearching?: boolean;
 }
 
 export const FieldMenu = forwardRef<HTMLDivElement, FieldMenuProps>(
@@ -44,6 +48,8 @@ export const FieldMenu = forwardRef<HTMLDivElement, FieldMenuProps>(
       itemNameSingular = 'field',
       showAccessITLink = true,
       onClear,
+      onSearchChange,
+      isSearching = false,
     },
     ref
   ) => {
@@ -80,9 +86,14 @@ export const FieldMenu = forwardRef<HTMLDivElement, FieldMenuProps>(
     /* v8 ignore next */
     const handleSearchOnChange = (event: ChangeEvent<HTMLInputElement>) => {
       setSearchValue(event.target.value);
+      onSearchChange?.(event.target.value);
     };
 
-    const showSearchInput = availableFields.length >= 4;
+    const showSearchInput =
+      availableFields.length >= 4 ||
+      onSearchChange !== undefined ||
+      isSearching;
+
     const noSearchResult = filteredFields.length === 0 && showSearchInput;
 
     if (!selectedField && !onClear) return null;
@@ -155,7 +166,7 @@ export const FieldMenu = forwardRef<HTMLDivElement, FieldMenuProps>(
                     </div>
                   </MenuFixedItem>
                 )}
-                {noSearchResult ? (
+                {noSearchResult && !isSearching ? (
                   <NoSearchResultsContainer>
                     <NoFieldsText
                       variant="body_short"
@@ -181,6 +192,11 @@ export const FieldMenu = forwardRef<HTMLDivElement, FieldMenuProps>(
                     </MenuItem>
                   ))
                 )}
+                {isSearching && (
+                  <MenuItemSkeletonWrapper>
+                    <ListItemSkeleton data-testid="field-menu-search-skeleton" />
+                  </MenuItemSkeletonWrapper>
+                )}
               </ListContainer>
             </MenuSection>
             {showAccessITLink && !noSearchResult && (

src/organisms/TopBar/TopBar.tsx

@@ -31,6 +31,8 @@ export type TopBarBaseProps = {
   currentField?: Field;
   showAccessITLink?: boolean;
   itemNameSingular?: string; // Defaults to 'field'
+  onSearchChange?: (searchValue: string) => void;
+  isSearching?: boolean;
 } & React.HTMLAttributes<HTMLElement>;
 
 export const TopBar = forwardRef<HTMLDivElement, TopBarBaseProps>(
@@ -50,6 +52,8 @@ export const TopBar = forwardRef<HTMLDivElement, TopBarBaseProps>(
       onClearField,
       showAccessITLink,
       itemNameSingular,
+      onSearchChange,
+      isSearching,
     },
     ref
   ) => (
@@ -73,6 +77,8 @@ export const TopBar = forwardRef<HTMLDivElement, TopBarBaseProps>(
               showAccessITLink={showAccessITLink}
               itemNameSingular={itemNameSingular}
               onClear={onClearField}
+              onSearchChange={onSearchChange}
+              isSearching={isSearching}
             />
           )}
           {isFetching && <CircularProgress size={16} />}