Feat/1076 proposal not found (#1432)

* feat: add not found page

* test: add tests for not found

* Update apps/token/src/i18n/translations/dev.json

Co-authored-by: candida-d <62548908+candida-d@users.noreply.github.com>

* test: fix test for new updated copy

Co-authored-by: candida-d <62548908+candida-d@users.noreply.github.com>

apps/token/src/i18n/translations/dev.json

@@ -684,5 +684,7 @@
   "MoreProposalsInfo": "To see Explorer data on proposals visit",
   "MoreNetParamsInfo": "To see Explorer data on network params visit",
   "MoreMarketsInfo": "To see Explorer data on existing markets visit",
-  "MoreAssetsInfo": "To see Explorer data on existing assets visit"
+  "MoreAssetsInfo": "To see Explorer data on existing assets visit",
+  "ProposalNotFound": "Proposal not found",
+  "ProposalNotFoundDetails": "The proposal you are looking for is not here, it may have been enacted before the last chain restore. You could check the Vega forums/discord instead for information about it."
 }

apps/token/src/routes/governance/components/proposal-not-found/index.tsx

@@ -0,0 +1 @@
+export { ProposalNotFound } from './proposal-not-found';

apps/token/src/routes/governance/components/proposal-not-found/proposal-not-found.spec.tsx

@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react';
+import { ProposalNotFound } from './proposal-not-found';
+
+describe('Proposal container', () => {
+  it('Renders not found if the proposal is not found', () => {
+    render(<ProposalNotFound />);
+    expect(screen.getByText('Proposal not found')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'The proposal you are looking for is not here, it may have been enacted before the last chain restore. You could check the Vega forums/discord instead for information about it.'
+      )
+    ).toBeInTheDocument();
+  });
+});

apps/token/src/routes/governance/components/proposal-not-found/proposal-not-found.tsx

@@ -0,0 +1,15 @@
+import { useTranslation } from 'react-i18next';
+
+export const ProposalNotFound = () => {
+  const { t } = useTranslation();
+  return (
+    <section data-testid="proposal-not-found">
+      <header>
+        <h2 className="text-lg mx-0 mt-0 mb-1 font-semibold">
+          {t('ProposalNotFound')}
+        </h2>
+      </header>
+      <p>{t('ProposalNotFoundDetails')}</p>
+    </section>
+  );
+};

apps/token/src/routes/governance/proposal/proposal-container.spec.tsx

@@ -0,0 +1,58 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { generateProposal } from '../test-helpers/generate-proposals';
+import type { Proposal_proposal } from './__generated__/Proposal';
+import { ProposalContainer, PROPOSAL_QUERY } from './proposal-container';
+import { MockedProvider } from '@apollo/client/testing';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+
+jest.mock('../components/proposal', () => ({
+  Proposal: () => <div data-testid="proposal" />,
+}));
+
+jest.mock('../components/proposal-not-found', () => ({
+  ProposalNotFound: () => <div data-testid="proposal-not-found" />,
+}));
+
+const renderComponent = (proposal: Proposal_proposal | null, id: string) => {
+  return (
+    <MemoryRouter initialEntries={[`/governance/${id}`]}>
+      <MockedProvider
+        mocks={[
+          {
+            request: {
+              query: PROPOSAL_QUERY,
+              variables: {
+                proposalId: id,
+              },
+            },
+            result: { data: { proposal } },
+          },
+        ]}
+      >
+        <Routes>
+          <Route
+            path={`/governance/:proposalId`}
+            element={<ProposalContainer />}
+          />
+        </Routes>
+      </MockedProvider>
+    </MemoryRouter>
+  );
+};
+
+describe('Proposal container', () => {
+  it('Renders not found if the proposal is not found', async () => {
+    render(renderComponent(null, 'foo'));
+    await waitFor(() => {
+      expect(screen.getByTestId('proposal-not-found')).toBeInTheDocument();
+    });
+  });
+
+  it('Renders proposal details if proposal is found', async () => {
+    const proposal = generateProposal({ id: 'foo' });
+    render(renderComponent(proposal, 'foo'));
+    await waitFor(() => {
+      expect(screen.getByTestId('proposal')).toBeInTheDocument();
+    });
+  });
+});

apps/token/src/routes/governance/proposal/proposal-container.tsx

@@ -4,6 +4,7 @@ import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { Proposal } from '../components/proposal';
+import { ProposalNotFound } from '../components/proposal-not-found';
 import { PROPOSAL_FRAGMENT } from '../proposal-fragment';
 import type {
   Proposal as ProposalQueryResult,
@@ -26,6 +27,7 @@ export const ProposalContainer = () => {
     ProposalVariables
   >(PROPOSAL_QUERY, {
     fetchPolicy: 'network-only',
+    errorPolicy: 'ignore',
     variables: { proposalId: params.proposalId || '' },
     skip: !params.proposalId,
   });
@@ -37,7 +39,11 @@ export const ProposalContainer = () => {
 
   return (
     <AsyncRenderer loading={loading} error={error} data={data}>
-      {data && data.proposal && <Proposal proposal={data.proposal} />}
+      {data?.proposal ? (
+        <Proposal proposal={data.proposal} />
+      ) : (
+        <ProposalNotFound />
+      )}
     </AsyncRenderer>
   );
 };