ASAP-521 Display Inactive team badge on the FE and fix CSV (#4318)

* ASAP-521 Display Inactive team badge on the FE and fix CSV * fix display icon in the frontend
yldio · Jul 2, 2024 · 36980aa · 36980aa
1 parent 753edeb
commit 36980aa
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 28 deletions.
diff --git a/apps/crn-frontend/src/analytics/leadership/Leadership.tsx b/apps/crn-frontend/src/analytics/leadership/Leadership.tsx
@@ -18,6 +18,7 @@ import { useAnalyticsLeadership } from './state';
 type MetricResponse = {
   id: string;
   displayName: string;
+  inactiveSince?: string;
   workingGroupLeadershipRoleCount: number;
   workingGroupPreviousLeadershipRoleCount: number;
   workingGroupMemberCount: number;
@@ -37,6 +38,7 @@ const getDataForMetric = (
     return data.map((row) => ({
       id: row.id,
       name: row.displayName,
+      inactiveSince: row.inactiveSince,
       leadershipRoleCount: row.workingGroupLeadershipRoleCount,
       previousLeadershipRoleCount: row.workingGroupPreviousLeadershipRoleCount,
       memberCount: row.workingGroupMemberCount,
@@ -46,6 +48,7 @@ const getDataForMetric = (
   return data.map((row) => ({
     id: row.id,
     name: row.displayName,
+    inactiveSince: row.inactiveSince,
     leadershipRoleCount: row.interestGroupLeadershipRoleCount,
     previousLeadershipRoleCount: row.interestGroupPreviousLeadershipRoleCount,
     memberCount: row.interestGroupMemberCount,

diff --git a/apps/crn-frontend/src/analytics/leadership/__tests__/export.test.ts b/apps/crn-frontend/src/analytics/leadership/__tests__/export.test.ts
@@ -17,18 +17,57 @@ describe('leadershipToCSV', () => {
     };
 
     expect(leadershipToCSV('working-group')(data)).toEqual({
-      team: 'Team 1',
-      currentlyInALeadershipRole: '1',
-      previouslyInALeadershipRole: '2',
-      currentlyAMember: '3',
-      previouslyAMember: '4',
+      Team: 'Team 1',
+      'Team Status': 'Active',
+      'Inactive Since': '',
+      'Currently in a leadership role': '1',
+      'Previously in a leadership role': '2',
+      'Currently a member': '3',
+      'Previously a member': '4',
     });
     expect(leadershipToCSV('interest-group')(data)).toEqual({
-      team: 'Team 1',
-      currentlyInALeadershipRole: '5',
-      previouslyInALeadershipRole: '6',
-      currentlyAMember: '7',
-      previouslyAMember: '8',
+      Team: 'Team 1',
+      'Team Status': 'Active',
+      'Inactive Since': '',
+      'Currently in a leadership role': '5',
+      'Previously in a leadership role': '6',
+      'Currently a member': '7',
+      'Previously a member': '8',
+    });
+  });
+
+  it('handles data with inactive team', () => {
+    const data = {
+      id: '1',
+      displayName: 'Team 1',
+      inactiveSince: '2022-09-30T09:00:00Z',
+      workingGroupLeadershipRoleCount: 1,
+      workingGroupPreviousLeadershipRoleCount: 2,
+      workingGroupMemberCount: 3,
+      workingGroupPreviousMemberCount: 4,
+      interestGroupLeadershipRoleCount: 5,
+      interestGroupPreviousLeadershipRoleCount: 6,
+      interestGroupMemberCount: 7,
+      interestGroupPreviousMemberCount: 8,
+    };
+
+    expect(leadershipToCSV('working-group')(data)).toEqual({
+      Team: 'Team 1',
+      'Team Status': 'Inactive',
+      'Inactive Since': '2022-09-30',
+      'Currently in a leadership role': '1',
+      'Previously in a leadership role': '2',
+      'Currently a member': '3',
+      'Previously a member': '4',
+    });
+    expect(leadershipToCSV('interest-group')(data)).toEqual({
+      Team: 'Team 1',
+      'Team Status': 'Inactive',
+      'Inactive Since': '2022-09-30',
+      'Currently in a leadership role': '5',
+      'Previously in a leadership role': '6',
+      'Currently a member': '7',
+      'Previously a member': '8',
     });
   });
 });

diff --git a/apps/crn-frontend/src/analytics/leadership/export.ts b/apps/crn-frontend/src/analytics/leadership/export.ts
@@ -13,13 +13,18 @@ export const leadershipToCSV =
     const metricPrefix =
       metric === 'working-group' ? 'workingGroup' : 'interestGroup';
     return {
-      team: data.displayName,
-      currentlyInALeadershipRole:
+      Team: data.displayName,
+      'Team Status': data.inactiveSince ? 'Inactive' : 'Active',
+      'Inactive Since': data.inactiveSince
+        ? data.inactiveSince.split('T')[0]
+        : '',
+      'Currently in a leadership role':
         data[`${metricPrefix}LeadershipRoleCount`].toString(),
-      previouslyInALeadershipRole:
+      'Previously in a leadership role':
         data[`${metricPrefix}PreviousLeadershipRoleCount`].toString(),
-      currentlyAMember: data[`${metricPrefix}MemberCount`].toString(),
-      previouslyAMember: data[`${metricPrefix}PreviousMemberCount`].toString(),
+      'Currently a member': data[`${metricPrefix}MemberCount`].toString(),
+      'Previously a member':
+        data[`${metricPrefix}PreviousMemberCount`].toString(),
     };
   };
 

diff --git a/apps/crn-server/src/utils/analytics/leadership.ts b/apps/crn-server/src/utils/analytics/leadership.ts
@@ -43,6 +43,7 @@ export const getTeamLeadershipItem = (team: Team) => {
   return {
     id: team.sys.id,
     displayName: team.displayName || '',
+    inactiveSince: team.inactiveSince,
     _tags: team.displayName ? [team.displayName] : [],
     interestGroupLeadershipRoleCount: team.inactiveSince
       ? 0

diff --git a/packages/model/src/analytics.ts b/packages/model/src/analytics.ts
@@ -110,7 +110,7 @@ export type FetchAnalyticsOptions = FetchPaginationOptions & {
 
 export type AnalyticsTeamLeadershipDataObject = Pick<
   TeamResponse,
-  'id' | 'displayName'
+  'id' | 'displayName' | 'inactiveSince'
 > & {
   // Working Groups
   workingGroupLeadershipRoleCount: number;

diff --git a/packages/react-components/src/organisms/LeadershipMembershipTable.tsx b/packages/react-components/src/organisms/LeadershipMembershipTable.tsx
@@ -5,7 +5,11 @@ import { ComponentProps } from 'react';
 import { Card, Link } from '../atoms';
 import { borderRadius } from '../card';
 import { charcoal, neutral200, steel } from '../colors';
-import { AlphabeticalSortingIcon, NumericalSortingIcon } from '../icons';
+import {
+  AlphabeticalSortingIcon,
+  InactiveBadgeIcon,
+  NumericalSortingIcon,
+} from '../icons';
 import { perRem, tabletScreen } from '../pixels';
 import LeadershipPageBody from '../templates/AnalyticsLeadershipPageBody';
 
@@ -62,6 +66,11 @@ const titleStyles = css({
   gap: `${8 / perRem}em`,
 });
 
+const teamNameStyles = css({
+  display: 'flex',
+  gap: `${3 / perRem}em`,
+});
+
 const buttonStyles = css({
   width: `${24 / perRem}em`,
   margin: 0,
@@ -240,10 +249,11 @@ const LeadershipMembershipTable: React.FC<LeadershipMembershipTableProps> = ({
         {data.map((row) => (
           <div key={row.id} css={[rowStyles]}>
             <span css={[titleStyles, rowTitleStyles]}>Team</span>
-            <p>
+            <p css={teamNameStyles}>
               <Link href={network({}).teams({}).team({ teamId: row.id }).$}>
                 {row.name}
               </Link>
+              {row.inactiveSince && <InactiveBadgeIcon />}
             </p>
             <span css={[titleStyles, rowTitleStyles]}>
               Currently in a leadership role

diff --git a/packages/react-components/src/organisms/__tests__/LeadershipMembershipTable.test.tsx b/packages/react-components/src/organisms/__tests__/LeadershipMembershipTable.test.tsx
@@ -1,18 +1,22 @@
 import { initialSortingDirection } from '@asap-hub/model';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { ComponentProps } from 'react';
 import LeadershipMembershipTable from '../LeadershipMembershipTable';
 
-const data = [
-  {
-    name: 'Test Team',
-    id: '1',
-    leadershipRoleCount: 1,
-    previousLeadershipRoleCount: 2,
-    memberCount: 3,
-    previousMemberCount: 4,
-  },
-];
+type DataItem = ComponentProps<
+  typeof LeadershipMembershipTable
+>['data'][number];
+
+const dataItem: DataItem = {
+  name: 'Test Team',
+  id: '1',
+  leadershipRoleCount: 1,
+  previousLeadershipRoleCount: 2,
+  memberCount: 3,
+  previousMemberCount: 4,
+};
+const data: DataItem[] = [dataItem];
 
 describe('LeadershipMembershipTable', () => {
   it('renders data', () => {
@@ -29,6 +33,34 @@ describe('LeadershipMembershipTable', () => {
     expect(getByText('Test Team')).toBeInTheDocument();
   });
 
+  it('renders team inactive badge', () => {
+    const { getByTitle, queryByTitle, rerender } = render(
+      <LeadershipMembershipTable
+        data={[{ ...dataItem, inactiveSince: '2022-09-30T09:00:00Z' }]}
+        metric={'working-group'}
+        sort="team_asc"
+        setSort={jest.fn()}
+        sortingDirection={initialSortingDirection}
+        setSortingDirection={jest.fn()}
+      />,
+    );
+
+    expect(getByTitle('Inactive Team')).toBeInTheDocument();
+
+    rerender(
+      <LeadershipMembershipTable
+        data={[{ ...dataItem, inactiveSince: undefined }]}
+        metric={'working-group'}
+        sort="team_asc"
+        setSort={jest.fn()}
+        sortingDirection={initialSortingDirection}
+        setSortingDirection={jest.fn()}
+      />,
+    );
+
+    expect(queryByTitle('Inactive Team')).not.toBeInTheDocument();
+  });
+
   it.each`
     metric              | sort                             | sortingDirection                                              | iconTitle                                                                       | newSort                          | newSortingDirection
     ${'working-group'}  | ${'team_asc'}                    | ${{ ...initialSortingDirection, team: 'asc' }}                | ${'Active Alphabetical Ascending Sort Icon'}                                    | ${'team_desc'}                   | ${{ ...initialSortingDirection, team: 'desc' }}

diff --git a/packages/react-components/src/templates/AnalyticsLeadershipPageBody.tsx b/packages/react-components/src/templates/AnalyticsLeadershipPageBody.tsx
@@ -20,6 +20,7 @@ type MetricOption = 'working-group' | 'interest-group';
 type MetricData = {
   id: string;
   name: string;
+  inactiveSince?: string;
   leadershipRoleCount: number;
   previousLeadershipRoleCount: number;
   memberCount: number;