add team search to leadership analytics (#4277)

* add team search to leadership analytics * linting * add missing props in test * typecheck
yldio · May 20, 2024 · 16499c7 · 16499c7
1 parent 1b28a2c
commit 16499c7
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 10 deletions.
diff --git a/apps/crn-frontend/src/analytics/leadership/Leadership.tsx b/apps/crn-frontend/src/analytics/leadership/Leadership.tsx
@@ -8,7 +8,7 @@ import { analytics } from '@asap-hub/routing';
 import { FC, useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
 
-import { usePagination, usePaginationParams } from '../../hooks';
+import { usePagination, usePaginationParams, useSearch } from '../../hooks';
 import { useAnalyticsLeadership } from './state';
 
 type MetricResponse = {
@@ -66,11 +66,12 @@ const Leadership: FC<Record<string, never>> = () => {
 
   const { currentPage, pageSize } = usePaginationParams();
 
+  const { debouncedSearchQuery, searchQuery, setSearchQuery } = useSearch();
   const { items, total } = useAnalyticsLeadership({
     sort,
     currentPage,
     pageSize,
-    searchQuery: '',
+    searchQuery: debouncedSearchQuery,
     filters: new Set(),
   });
 
@@ -80,6 +81,8 @@ const Leadership: FC<Record<string, never>> = () => {
     <AnalyticsLeadershipPageBody
       metric={metric}
       setMetric={setMetric}
+      searchQuery={searchQuery}
+      onChangeSearch={setSearchQuery}
       sort={sort}
       setSort={setSort}
       sortingDirection={sortingDirection}

diff --git a/apps/crn-frontend/src/analytics/leadership/__tests__/Leadership.test.tsx b/apps/crn-frontend/src/analytics/leadership/__tests__/Leadership.test.tsx
@@ -80,6 +80,7 @@ const renderPage = async (
             currentPage: 0,
             pageSize: 10,
             sort: 'team_asc',
+            searchQuery: '',
           }),
         );
       }}

diff --git a/apps/crn-frontend/src/analytics/leadership/state.ts b/apps/crn-frontend/src/analytics/leadership/state.ts
@@ -18,7 +18,7 @@ type Options = GetListOptions & { sort: SortLeadershipAndMembership };
 
 const analyticsLeadershipIndexState = atomFamily<
   { ids: ReadonlyArray<string>; total: number } | Error | undefined,
-  Pick<Options, 'currentPage' | 'pageSize' | 'sort'>
+  Pick<Options, 'currentPage' | 'pageSize' | 'sort' | 'searchQuery'>
 >({
   key: 'analyticsLeadershipIndex',
   default: undefined,
@@ -34,7 +34,7 @@ export const analyticsLeadershipListState = atomFamily<
 
 export const analyticsLeadershipState = selectorFamily<
   ListAnalyticsTeamLeadershipResponse | Error | undefined,
-  Pick<Options, 'currentPage' | 'pageSize' | 'sort'>
+  Pick<Options, 'currentPage' | 'pageSize' | 'sort' | 'searchQuery'>
 >({
   key: 'teams',
   get:

diff --git a/packages/react-components/src/templates/AnalyticsLeadershipPageBody.tsx b/packages/react-components/src/templates/AnalyticsLeadershipPageBody.tsx
@@ -4,10 +4,10 @@ import {
 } from '@asap-hub/model';
 import { css } from '@emotion/react';
 import { ComponentProps } from 'react';
-import { PageControls } from '..';
+import { PageControls, SearchField } from '..';
 import { Dropdown, Headline3, Paragraph, Subtitle } from '../atoms';
 import { LeadershipMembershipTable } from '../organisms';
-import { perRem } from '../pixels';
+import { rem } from '../pixels';
 
 type MetricOption = 'working-group' | 'interest-group';
 type MetricData = {
@@ -41,20 +41,33 @@ type LeadershipAndMembershipAnalyticsProps = ComponentProps<
   setSortingDirection: React.Dispatch<
     React.SetStateAction<LeadershipAndMembershipSortingDirection>
   >;
+  searchQuery: string;
+  onChangeSearch: (newSearchQuery: string) => void;
 };
 
 const metricDropdownStyles = css({
-  marginBottom: `${48 / perRem}em`,
+  marginBottom: rem(48),
 });
 
 const tableHeaderStyles = css({
-  paddingBottom: `${24 / perRem}em`,
+  paddingBottom: rem(24),
 });
 
 const pageControlsStyles = css({
   justifySelf: 'center',
-  paddingTop: `${36 / perRem}em`,
-  paddingBottom: `${36 / perRem}em`,
+  paddingTop: rem(36),
+  paddingBottom: rem(36),
+});
+
+const searchContainerStyles = css({
+  display: 'flex',
+  gap: rem(18),
+  alignItems: 'center',
+  paddingBottom: rem(33),
+});
+
+const searchStyles = css({
+  flexGrow: 1,
 });
 
 const LeadershipPageBody: React.FC<LeadershipAndMembershipAnalyticsProps> = ({
@@ -65,6 +78,8 @@ const LeadershipPageBody: React.FC<LeadershipAndMembershipAnalyticsProps> = ({
   metric,
   setMetric,
   data,
+  searchQuery,
+  onChangeSearch,
   ...pageControlProps
 }) => (
   <article>
@@ -84,6 +99,16 @@ const LeadershipPageBody: React.FC<LeadershipAndMembershipAnalyticsProps> = ({
         membership role within a Working Group.
       </Paragraph>
     </div>
+    <div css={searchContainerStyles}>
+      <Subtitle>Teams:</Subtitle>
+      <span css={searchStyles}>
+        <SearchField
+          value={searchQuery}
+          placeholder="Enter team names..."
+          onChange={onChangeSearch}
+        />
+      </span>
+    </div>
     <LeadershipMembershipTable
       metric={metric}
       data={data}

diff --git a/packages/react-components/src/templates/__tests__/AnalyticsLeadershipPageBody.test.tsx b/packages/react-components/src/templates/__tests__/AnalyticsLeadershipPageBody.test.tsx
@@ -15,6 +15,8 @@ describe('AnalyticsLeadershipPageBody', () => {
     setSort: jest.fn(),
     sortingDirection: initialSortingDirection,
     setSortingDirection: jest.fn(),
+    searchQuery: '',
+    onChangeSearch: jest.fn(),
   };
   it('renders interest group tab', () => {
     const { getAllByText } = render(

diff --git a/packages/react-components/src/templates/__tests__/LeadershipPageBody.test.tsx b/packages/react-components/src/templates/__tests__/LeadershipPageBody.test.tsx
@@ -12,6 +12,8 @@ const pageControlProps = {
 it('renders the selected metric', () => {
   render(
     <AnalyticsLeadershipPageBody
+      searchQuery=""
+      onChangeSearch={jest.fn()}
       metric={'interest-group'}
       data={[]}
       setMetric={() => {}}