feat(APP-3746): Update ProposalDataListItem component to support "advanceable" status

CHANGELOG.md

@@ -11,9 +11,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Update `InputFileAvatar` core component to remove `onFileSelect` property and use `value` and `onChange` properties
   instead
-- Update `IProposalActionUpdateMetadataDaoMetadata` interface `logo` property to `avatar` to better align with actions.
+- Update `IProposalActionUpdateMetadataDaoMetadata` interface `logo` property to `avatar` to better align with actions
 - Bump `softprops/action-gh-release` from 2.2.0 to 2.2.1
 - Update minor and patch NPM dependencies
+- Update `<ProposalDataListItem />` module component to include `statusContext` property and support `ADVANCEABLE`
+  status
+- Remove `<MajorityVotingResult />` and `<ApprovalThresholdResult />` sub-components for `<ProposalDataListItem />`
 
 ## [1.0.62] - 2025-01-08
 

src/modules/assets/copy/modulesCopy.ts

@@ -17,14 +17,6 @@ export const modulesCopy = {
         delegations: 'Delegations',
         votingPower: 'Voting Power',
     },
-    approvalThresholdResult: {
-        stage: 'Stage',
-        outOf: (threshold: string) => `of ${threshold} members`,
-    },
-    majorityVotingResult: {
-        winningOption: 'Winning Option',
-        stage: 'Stage',
-    },
     proposalActionsContainer: {
         emptyHeader: 'No actions added',
     },
@@ -93,18 +85,18 @@ export const modulesCopy = {
         totalHoldersTerm: 'Total token holders',
     },
     proposalDataListItemStatus: {
-        voted: "You've voted",
+        voted: 'Voted',
         ago: 'ago',
         left: 'left',
+        in: 'in',
         statusLabel: {
             ACCEPTED: 'Accepted',
+            ADVANCEABLE: 'Advanceable',
             ACTIVE: 'Active',
-            CHALLENGED: 'Challenged',
             DRAFT: 'Draft',
             EXECUTED: 'Executed',
             EXPIRED: 'Expired',
             FAILED: 'Failed',
-            PARTIALLY_EXECUTED: 'Partially executed',
             PENDING: 'Pending',
             EXECUTABLE: 'Executable',
             REJECTED: 'Rejected',

src/modules/components/proposal/proposalDataListItem/proposalDataListItemStatus/proposalDataListItemStatus.test.tsx

@@ -2,7 +2,6 @@ import { render, screen } from '@testing-library/react';
 import { DateFormat, IconType, formatterUtils } from '../../../../../core';
 import { modulesCopy } from '../../../../assets';
 import { ProposalStatus } from '../../proposalUtils';
-import { proposalDataListItemUtils } from '../proposalDataListItemUtils';
 import { ProposalDataListItemStatus, type IProposalDataListItemStatusProps } from './proposalDataListItemStatus';
 
 describe('<ProposalDataListItemStatus /> component', () => {
@@ -50,32 +49,50 @@ describe('<ProposalDataListItemStatus /> component', () => {
         expect(screen.queryByTestId(IconType.CALENDAR)).not.toBeInTheDocument();
     });
 
-    test.each(proposalDataListItemUtils.ongoingStatuses)(
-        'displays the date and a pinging indicator when the status is %s and voted is false',
-        (status) => {
-            const date = 1719563030308;
-            render(createTestComponent({ date, status, voted: false }));
-
-            const formattedDate = formatterUtils.formatDate(date, { format: DateFormat.RELATIVE })!;
-            expect(screen.getByText(formattedDate)).toBeInTheDocument();
-            expect(screen.getByTestId('statePingAnimation')).toBeInTheDocument();
-        },
-    );
-
-    test.each(proposalDataListItemUtils.ongoingStatuses)(
-        'displays a you-voted label with an icon checkmark when the status is %s and voted is true',
-        (status) => {
-            render(createTestComponent({ status, voted: true }));
-
-            expect(screen.getByText(/You've voted/i)).toBeInTheDocument();
-            expect(screen.getByTestId(IconType.CHECKMARK)).toBeInTheDocument();
-        },
-    );
-
-    it('does not display a you-voted label when the status is not an ongoing one and the voted is true', () => {
+    it('displays the date and a pinging indicator when the status is active and voted is false', () => {
+        const status = ProposalStatus.ACTIVE;
+        const date = 1719563030308;
+        render(createTestComponent({ date, status, voted: false }));
+
+        const formattedDate = formatterUtils.formatDate(date, { format: DateFormat.RELATIVE })!;
+        expect(screen.getByText(formattedDate)).toBeInTheDocument();
+        expect(screen.getByTestId('statePingAnimation')).toBeInTheDocument();
+    });
+
+    it('displays a voted label when the status is active and voted is true', () => {
+        const status = ProposalStatus.ACTIVE;
+        render(createTestComponent({ status, voted: true }));
+
+        expect(screen.getByText(/Voted/i)).toBeInTheDocument();
+        expect(screen.getByTestId(IconType.CHECKMARK)).toBeInTheDocument();
+    });
+
+    it('does not display a voted label when the status is not active and voted is true', () => {
         render(createTestComponent({ status: ProposalStatus.EXECUTED, voted: true }));
 
-        expect(screen.queryByText(/You've voted/i)).not.toBeInTheDocument();
+        expect(screen.queryByText(/Voted/i)).not.toBeInTheDocument();
         expect(screen.queryByTestId(IconType.CHECKMARK)).not.toBeInTheDocument();
     });
+
+    it('displays the status context when statusContext is provided and status is active', () => {
+        const statusContext = 'Stage 1';
+        const status = ProposalStatus.ACTIVE;
+        render(createTestComponent({ statusContext, status }));
+        expect(screen.getByText(statusContext)).toBeInTheDocument();
+    });
+
+    it('displays the status context when statusContext is provided and status is advanceable', () => {
+        const statusContext = 'Stage 1';
+        const status = ProposalStatus.ADVANCEABLE;
+        render(createTestComponent({ status, statusContext }));
+        expect(screen.getByText(modulesCopy.proposalDataListItemStatus.statusLabel[status])).toBeInTheDocument();
+        expect(screen.getByText(statusContext)).toBeInTheDocument();
+    });
+
+    it('does not display the status context when statusContext is provided and status is final', () => {
+        const statusContext = 'Stage 1';
+        const status = ProposalStatus.EXECUTED;
+        render(createTestComponent({ statusContext, status }));
+        expect(screen.queryByText(statusContext)).not.toBeInTheDocument();
+    });
 });