feat(APP-4058): Implement ActionSimulation component

.changeset/young-flies-think.md

@@ -0,0 +1,5 @@
+---
+'@aragon/gov-ui-kit': minor
+---
+
+Implement `ProposalActionSimulationStructure` component

src/modules/assets/copy/modulesCopy.ts

@@ -81,6 +81,22 @@ export const modulesCopy = {
         totalTokenSupplyTerm: 'Total token supply',
         totalHoldersTerm: 'Total token holders',
     },
+    proposalActionSimulationStructure: {
+        action: 'action',
+        actions: 'actions',
+        totalActionsTerm: 'Total actions',
+        lastSimulationTerm: 'Last simulation',
+        never: 'Never',
+        executableTerm: 'Executable',
+        simulateAgain: 'Simulate again',
+        simulate: 'Simulate',
+        simulating: 'Simulating',
+        viewOnTenderly: 'View on Tenderly',
+        likelyToSucceed: 'Likely to succeed',
+        likelyToFail: 'Likely to fail',
+        unknown: 'Unknown',
+        now: 'Now',
+    },
     proposalDataListItemStatus: {
         voted: 'Voted',
         ago: 'ago',

src/modules/components/proposal/index.ts

@@ -1,4 +1,5 @@
 export * from './proposalActions';
+export * from './proposalActionSimulationStructure';
 export * from './proposalDataListItem';
 export * from './proposalUtils';
 export * from './proposalVoting';

src/modules/components/proposal/proposalActionSimulationStructure/index.ts

@@ -0,0 +1 @@
+export { ProposalActionSimulationStructure } from './proposalActionSimulationStructure';

src/modules/components/proposal/proposalActionSimulationStructure/proposalActionSimulationStructure.stories.tsx

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DateTime } from 'luxon';
+import { ProposalActionSimulationStructure } from './proposalActionSimulationStructure';
+
+const meta: Meta<typeof ProposalActionSimulationStructure> = {
+    title: 'Modules/Components/Proposal/ProposalActionSimulation/ProposalActionSimulationStructure',
+    component: ProposalActionSimulationStructure,
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/ISSDryshtEpB7SUSdNqAcw/Governance-UI-Kit?node-id=30069-34747&t=tQiF5klPD9cjUit6-4',
+        },
+    },
+    args: {
+        className: 'flex-1',
+    },
+};
+
+type Story = StoryObj<typeof ProposalActionSimulationStructure>;
+
+/**
+ * Completed simulation with positive outcome
+ */
+export const Success: Story = {
+    args: {
+        totalActions: 3,
+        lastSimulation: DateTime.now().minus({ seconds: 10 }),
+        status: 'success',
+        tenderlyUrl: 'https://dashboard.tenderly.co/simulation/12345',
+    },
+};
+
+/**
+ * Completed simulation with negative outcome (can't be executed)
+ */
+export const Failure: Story = {
+    args: {
+        totalActions: 2,
+        lastSimulation: DateTime.now().minus({ seconds: 10 }),
+        status: 'failure',
+        tenderlyUrl: 'https://dashboard.tenderly.co/simulation/12345',
+    },
+};
+
+/**
+ * Loading state while simulation is running
+ */
+export const Loading: Story = {
+    args: {
+        totalActions: 5,
+        status: 'unknown',
+        isSimulating: true,
+    },
+};
+
+/**
+ * No simulation has been run yet
+ */
+export const NoPreviousSimulation: Story = {
+    args: {
+        totalActions: 1,
+        status: 'unknown',
+    },
+};
+
+/**
+ * With error message displayed
+ */
+export const WithErrorMessage: Story = {
+    args: {
+        totalActions: 2,
+        lastSimulation: DateTime.now().minus({ weeks: 2 }),
+        status: 'success',
+        error: 'Simulation failed to run. Please try again.',
+    },
+};
+
+/**
+ * Recent simulation (shows "Now")
+ */
+export const RecentSimulation: Story = {
+    args: {
+        totalActions: 7,
+        lastSimulation: DateTime.now().minus({ minutes: 5 }),
+        status: 'success',
+    },
+};
+
+/**
+ * Old simulation (shows formatted date)
+ */
+export const OldSimulation: Story = {
+    args: {
+        totalActions: 2,
+        lastSimulation: DateTime.now().minus({ weeks: 2 }),
+        status: 'success',
+    },
+};
+
+/**
+ * Not simulatable - only shows Tenderly link
+ */
+export const NotSimulatable: Story = {
+    args: {
+        totalActions: 3,
+        lastSimulation: DateTime.now().minus({ hours: 2 }),
+        status: 'success',
+        isSimulatable: false,
+        tenderlyUrl: 'https://dashboard.tenderly.co/simulation/12345',
+    },
+};
+
+export default meta;

src/modules/components/proposal/proposalActionSimulationStructure/proposalActionSimulationStructure.test.tsx

@@ -0,0 +1,88 @@
+import { render, screen } from '@testing-library/react';
+import { DateTime } from 'luxon';
+import { GukCoreProvider } from '../../../../core';
+import type { IProposalActionSimulationStructureProps } from './proposalActionSimulationStructure';
+import { ProposalActionSimulationStructure } from './proposalActionSimulationStructure';
+
+describe('<ProposalActionSimulationStructure /> component', () => {
+    const createTestComponent = (props?: Partial<IProposalActionSimulationStructureProps>) => {
+        const completeProps: IProposalActionSimulationStructureProps = {
+            totalActions: 3,
+            status: 'success',
+            ...props,
+        };
+
+        return (
+            <GukCoreProvider>
+                <ProposalActionSimulationStructure {...completeProps} />
+            </GukCoreProvider>
+        );
+    };
+
+    it('renders all definition list items', () => {
+        render(createTestComponent());
+
+        expect(screen.getByText('Total actions')).toBeInTheDocument();
+        expect(screen.getByText('Last simulation')).toBeInTheDocument();
+        expect(screen.getByText('Executable')).toBeInTheDocument();
+    });
+
+    it('renders the total actions count', () => {
+        render(createTestComponent({ totalActions: 5 }));
+        expect(screen.getByText('5 actions')).toBeInTheDocument();
+    });
+
+    it('renders singular action text for one action', () => {
+        render(createTestComponent({ totalActions: 1 }));
+        expect(screen.getByText('1 action')).toBeInTheDocument();
+    });
+
+    it('renders "Never" when no last simulation is provided', () => {
+        render(createTestComponent());
+        expect(screen.getByText('Never')).toBeInTheDocument();
+    });
+
+    it('renders relative time for recent simulation', () => {
+        const recentTime = DateTime.now().minus({ days: 2 });
+        render(createTestComponent({ lastSimulation: recentTime }));
+        expect(screen.getByText('2 days ago')).toBeInTheDocument();
+    });
+
+    it('renders "Now" for very recent simulation', () => {
+        const veryRecentTime = DateTime.now().minus({ seconds: 30 });
+        render(createTestComponent({ lastSimulation: veryRecentTime }));
+        expect(screen.getByText('Now')).toBeInTheDocument();
+    });
+
+    it('renders the execution status label', () => {
+        render(
+            createTestComponent({
+                status: 'success',
+            }),
+        );
+        expect(screen.getByText('Likely to succeed')).toBeInTheDocument();
+    });
+
+    it('renders loading state when execution status is loading', () => {
+        render(
+            createTestComponent({
+                status: 'unknown',
+                isSimulating: true,
+            }),
+        );
+
+        expect(screen.getAllByText('Simulating')).toHaveLength(3);
+    });
+
+    it('shows simulate button by default when isSimulatable is not specified', () => {
+        render(createTestComponent());
+
+        expect(screen.getByText(/simulate/i)).toBeInTheDocument();
+    });
+
+    it('hides simulate button when isSimulatable is false', () => {
+        render(createTestComponent({ isSimulatable: false }));
+
+        expect(screen.queryByText(/simulate/i)).toBeNull();
+    });
+});