Refactor props structure

Signed-off-by: Milos Dzepina <milos@aragon.org>

Author: milosh86

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

@@ -24,9 +24,11 @@ type Story = StoryObj<typeof ProposalActionSimulationStructure>;
 export const Success: Story = {
     args: {
         totalActions: 3,
-        lastSimulation: DateTime.now().minus({ seconds: 10 }),
-        status: 'success',
-        tenderlyUrl: 'https://dashboard.tenderly.co/simulation/12345',
+        lastSimulation: {
+            timestamp: DateTime.now().minus({ seconds: 10 }).toMillis(),
+            url: 'https://dashboard.tenderly.co/simulation/12345',
+            status: 'success',
+        },
     },
 };
 
@@ -36,9 +38,11 @@ export const Success: Story = {
 export const Failure: Story = {
     args: {
         totalActions: 2,
-        lastSimulation: DateTime.now().minus({ seconds: 10 }),
-        status: 'failure',
-        tenderlyUrl: 'https://dashboard.tenderly.co/simulation/12345',
+        lastSimulation: {
+            timestamp: DateTime.now().minus({ seconds: 10 }).toMillis(),
+            url: 'https://dashboard.tenderly.co/simulation/12345',
+            status: 'failure',
+        },
     },
 };
 
@@ -48,7 +52,6 @@ export const Failure: Story = {
 export const Loading: Story = {
     args: {
         totalActions: 5,
-        status: 'unknown',
         isSimulating: true,
     },
 };
@@ -59,7 +62,6 @@ export const Loading: Story = {
 export const NoPreviousSimulation: Story = {
     args: {
         totalActions: 1,
-        status: 'unknown',
     },
 };
 
@@ -69,8 +71,11 @@ export const NoPreviousSimulation: Story = {
 export const WithErrorMessage: Story = {
     args: {
         totalActions: 2,
-        lastSimulation: DateTime.now().minus({ weeks: 2 }),
-        status: 'success',
+        lastSimulation: {
+            timestamp: DateTime.now().minus({ weeks: 2 }).toMillis(),
+            url: 'https://dashboard.tenderly.co/simulation/12345',
+            status: 'success',
+        },
         error: 'Simulation failed to run. Please try again.',
     },
 };
@@ -81,8 +86,11 @@ export const WithErrorMessage: Story = {
 export const RecentSimulation: Story = {
     args: {
         totalActions: 7,
-        lastSimulation: DateTime.now().minus({ minutes: 5 }),
-        status: 'success',
+        lastSimulation: {
+            timestamp: DateTime.now().minus({ minutes: 5 }).toMillis(),
+            url: 'https://dashboard.tenderly.co/simulation/12345',
+            status: 'success',
+        },
     },
 };
 
@@ -92,8 +100,11 @@ export const RecentSimulation: Story = {
 export const OldSimulation: Story = {
     args: {
         totalActions: 2,
-        lastSimulation: DateTime.now().minus({ weeks: 2 }),
-        status: 'success',
+        lastSimulation: {
+            timestamp: DateTime.now().minus({ weeks: 2 }).toMillis(),
+            url: 'https://dashboard.tenderly.co/simulation/12345',
+            status: 'success',
+        },
     },
 };
 
@@ -103,10 +114,12 @@ export const OldSimulation: Story = {
 export const NotSimulatable: Story = {
     args: {
         totalActions: 3,
-        lastSimulation: DateTime.now().minus({ hours: 2 }),
-        status: 'success',
+        lastSimulation: {
+            timestamp: DateTime.now().minus({ hours: 2 }).toMillis(),
+            url: 'https://dashboard.tenderly.co/simulation/12345',
+            status: 'success',
+        },
         isSimulatable: false,
-        tenderlyUrl: 'https://dashboard.tenderly.co/simulation/12345',
     },
 };
 

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

@@ -8,7 +8,6 @@ describe('<ProposalActionSimulationStructure /> component', () => {
     const createTestComponent = (props?: Partial<IProposalActionSimulationStructureProps>) => {
         const completeProps: IProposalActionSimulationStructureProps = {
             totalActions: 3,
-            status: 'success',
             ...props,
         };
 
@@ -44,29 +43,62 @@ describe('<ProposalActionSimulationStructure /> component', () => {
 
     it('renders relative time for recent simulation', () => {
         const recentTime = DateTime.now().minus({ days: 2 });
-        render(createTestComponent({ lastSimulation: recentTime }));
+        render(createTestComponent({ 
+            lastSimulation: {
+                timestamp: recentTime.toMillis(),
+                url: 'https://dashboard.tenderly.co/simulation/12345',
+                status: 'success'
+            }
+        }));
         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 }));
+        render(createTestComponent({ 
+            lastSimulation: {
+                timestamp: veryRecentTime.toMillis(),
+                url: 'https://dashboard.tenderly.co/simulation/12345',
+                status: 'success'
+            }
+        }));
         expect(screen.getByText('Now')).toBeInTheDocument();
     });
 
     it('renders the execution status label', () => {
         render(
             createTestComponent({
-                status: 'success',
+                lastSimulation: {
+                    timestamp: DateTime.now().toMillis(),
+                    url: 'https://dashboard.tenderly.co/simulation/12345',
+                    status: 'success'
+                }
             }),
         );
         expect(screen.getByText('Likely to succeed')).toBeInTheDocument();
     });
 
+    it('renders failure status label', () => {
+        render(
+            createTestComponent({
+                lastSimulation: {
+                    timestamp: DateTime.now().toMillis(),
+                    url: 'https://dashboard.tenderly.co/simulation/12345',
+                    status: 'failure'
+                }
+            }),
+        );
+        expect(screen.getByText('Likely to fail')).toBeInTheDocument();
+    });
+
+    it('renders unknown status when no lastSimulation is provided', () => {
+        render(createTestComponent());
+        expect(screen.getByText('Unknown')).toBeInTheDocument();
+    });
+
     it('renders loading state when execution status is loading', () => {
         render(
             createTestComponent({
-                status: 'unknown',
                 isSimulating: true,
             }),
         );

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

@@ -19,9 +19,9 @@ export interface IProposalActionSimulationStructureProps {
      */
     totalActions: number;
     /**
-     * Last simulation date.
+     * Last simulation data including timestamp, URL, and status.
      */
-    lastSimulation?: DateTime;
+    lastSimulation?: { timestamp: number; url: string; status: 'success' | 'failure' };
     /**
      * Whether simulation is currently running.
      */
@@ -30,18 +30,10 @@ export interface IProposalActionSimulationStructureProps {
      * Whether the proposal can be simulated.
      */
     isSimulatable?: boolean;
-    /**
-     * Simulation status result.
-     */
-    status: 'success' | 'failure' | 'unknown';
     /**
      * Callback when simulate again button is clicked.
      */
     onSimulate?: () => void;
-    /**
-     * URL for tenderly simulation.
-     */
-    tenderlyUrl?: string;
     /**
      * Additional class names applied to the wrapper div.
      */
@@ -54,23 +46,13 @@ export interface IProposalActionSimulationStructureProps {
 }
 
 export const ProposalActionSimulationStructure: React.FC<IProposalActionSimulationStructureProps> = (props) => {
-    const {
-        totalActions,
-        lastSimulation,
-        isSimulating,
-        isSimulatable = true,
-        status,
-        onSimulate,
-        tenderlyUrl,
-        className,
-        error,
-    } = props;
+    const { totalActions, lastSimulation, isSimulating, isSimulatable = true, onSimulate, className, error } = props;
 
     const { copy } = useGukModulesContext();
     const simulationCopy = copy.proposalActionSimulationStructure;
 
     const statusConfig = useMemo(() => {
-        switch (status) {
+        switch (lastSimulation?.status) {
             case 'success':
                 return {
                     icon: IconType.CHECKMARK,
@@ -85,7 +67,6 @@ export const ProposalActionSimulationStructure: React.FC<IProposalActionSimulati
                     textColor: 'text-critical-800',
                     variant: 'critical' as const,
                 };
-            case 'unknown':
             default:
                 return {
                     icon: IconType.INFO,
@@ -94,13 +75,14 @@ export const ProposalActionSimulationStructure: React.FC<IProposalActionSimulati
                     variant: 'neutral' as const,
                 };
         }
-    }, [simulationCopy, status]);
+    }, [simulationCopy, lastSimulation?.status]);
 
-    const formatSimulationDate = (date?: DateTime) => {
-        if (!date) {
+    const formatSimulationDate = (timestamp?: number) => {
+        if (!timestamp) {
             return copy.proposalActionSimulationStructure.never;
         }
 
+        const date = DateTime.fromMillis(timestamp);
         const now = DateTime.now();
         const diffInMinutes = now.diff(date, 'minutes').minutes;
         const diffInDays = now.diff(date, 'days').days;
@@ -128,7 +110,7 @@ export const ProposalActionSimulationStructure: React.FC<IProposalActionSimulati
                             {simulationCopy.simulating}
                         </span>
                     ) : (
-                        formatSimulationDate(lastSimulation)
+                        formatSimulationDate(lastSimulation?.timestamp)
                     )}
                 </DefinitionList.Item>
 
@@ -173,8 +155,8 @@ export const ProposalActionSimulationStructure: React.FC<IProposalActionSimulati
                 <Button
                     variant="tertiary"
                     size="md"
-                    disabled={!tenderlyUrl}
-                    href={tenderlyUrl}
+                    disabled={!lastSimulation?.url}
+                    href={lastSimulation?.url}
                     target="_blank"
                     iconRight={IconType.LINK_EXTERNAL}
                 >