Feat/971: Add link to the make proposal form (#972)

* Feat/971: Add link to the make proposal form

* Feat/971: Basic render test for the page title and new proposal link

apps/token/src/components/heading/heading.tsx

@@ -1,12 +1,19 @@
-export interface HeadingProps {
+import classNames from 'classnames';
+
+interface HeadingProps {
   title?: string;
+  centerContent?: boolean;
 }
 
-export const Heading = ({ title }: HeadingProps) => {
+export const Heading = ({ title, centerContent = true }: HeadingProps) => {
   if (!title) return null;
 
   return (
-    <header className="my-0 mx-auto">
+    <header
+      className={classNames('my-0', {
+        'mx-auto': centerContent,
+      })}
+    >
       <h1 className="font-alpha calt">{title}</h1>
     </header>
   );

apps/token/src/routes/governance/components/proposals-list/proposals-list.spec.tsx

@@ -84,6 +84,12 @@ afterAll(() => {
 });
 
 describe('Proposals list', () => {
+  it('Render a page title and link to the make proposal form', () => {
+    render(renderComponent([]));
+    expect(screen.getByText('Governance')).toBeInTheDocument();
+    expect(screen.getByTestId('new-proposal-link')).toBeInTheDocument();
+  });
+
   it('Culls failed proposals', () => {
     render(renderComponent([failedProposal]));
     expect(screen.queryByTestId('open-proposals')).not.toBeInTheDocument();

apps/token/src/routes/governance/components/proposals-list/proposals-list.tsx

@@ -1,10 +1,13 @@
 import { isFuture } from 'date-fns';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Heading } from '../../../../components/heading';
 import { ProposalsListItem } from '../proposals-list-item';
 import { ProposalsListFilter } from '../proposals-list-filter';
 import type { Proposals_proposals } from '../../proposals/__generated__/Proposals';
+import { Routes } from '../../../router-config';
+import { Button } from '@vegaprotocol/ui-toolkit';
+import { Link } from 'react-router-dom';
 
 interface ProposalsListProps {
   proposals: Proposals_proposals[];
@@ -44,7 +47,17 @@ export const ProposalsList = ({ proposals }: ProposalsListProps) => {
 
   return (
     <>
-      <Heading title={t('pageTitleGovernance')} />
+      <div className="grid xs:grid-cols-2 items-center">
+        <Heading centerContent={false} title={t('pageTitleGovernance')} />
+        <Link
+          className="mb-16 xs:justify-self-end"
+          data-testid="new-proposal-link"
+          to={`${Routes.GOVERNANCE}/propose`}
+        >
+          <Button variant={'primary'}>{t('NewProposal')}</Button>
+        </Link>
+      </div>
+
       {failedProposalsCulled.length > 0 && (
         <ProposalsListFilter setFilterString={setFilterString} />
       )}