From 2af3cc3e947f5c7e181fcd2822c14f6dbc477d6e Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Mon, 4 Sep 2023 16:24:34 -0700
Subject: [PATCH] chore: use tab menu for propose link

---
 .../client-pages/markets/markets-page.tsx     | 28 +++++++++++++++++--
 .../trading/client-pages/markets/proposed.tsx | 20 +------------
 .../proposals-list/proposals-list.tsx         | 19 ++++++-------
 3 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/apps/trading/client-pages/markets/markets-page.tsx b/apps/trading/client-pages/markets/markets-page.tsx
index b2403ccc9..b2f3e7bef 100644
--- a/apps/trading/client-pages/markets/markets-page.tsx
+++ b/apps/trading/client-pages/markets/markets-page.tsx
@@ -1,27 +1,49 @@
 import React, { useEffect } from 'react';
 import { titlefy } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { LocalStoragePersistTabs as Tabs, Tab } from '@vegaprotocol/ui-toolkit';
+import {
+  LocalStoragePersistTabs as Tabs,
+  Tab,
+  TradingAnchorButton,
+} from '@vegaprotocol/ui-toolkit';
 import { Markets } from './markets';
 import { Proposed } from './proposed';
 import { usePageTitleStore } from '../../stores';
 import { Closed } from './closed';
+import {
+  DApp,
+  TOKEN_NEW_MARKET_PROPOSAL,
+  useLinks,
+} from '@vegaprotocol/environment';
 
 export const MarketsPage = () => {
   const { updateTitle } = usePageTitleStore((store) => ({
     updateTitle: store.updateTitle,
   }));
+
+  const tokenLink = useLinks(DApp.Token);
+  const externalLink = tokenLink(TOKEN_NEW_MARKET_PROPOSAL);
+
   useEffect(() => {
     updateTitle(titlefy(['Markets']));
   }, [updateTitle]);
+
   return (
     <div className="h-full pt-0.5 pb-3 px-1.5">
-      <div className="h-full my-1 border border-default rounded-sm">
+      <div className="h-full my-1 border rounded-sm border-default">
         <Tabs storageKey="console-markets">
           <Tab id="open-markets" name={t('Open markets')}>
             <Markets />
           </Tab>
-          <Tab id="proposed-markets" name={t('Proposed markets')}>
+          <Tab
+            id="proposed-markets"
+            name={t('Proposed markets')}
+            menu={
+              <TradingAnchorButton size="extra-small" href={externalLink}>
+                {t('Propose a new market')}
+              </TradingAnchorButton>
+            }
+          >
             <Proposed />
           </Tab>
           <Tab id="closed-markets" name={t('Closed markets')}>
diff --git a/apps/trading/client-pages/markets/proposed.tsx b/apps/trading/client-pages/markets/proposed.tsx
index 009190e17..67a20cbc9 100644
--- a/apps/trading/client-pages/markets/proposed.tsx
+++ b/apps/trading/client-pages/markets/proposed.tsx
@@ -1,24 +1,6 @@
-import { t } from '@vegaprotocol/i18n';
-import {
-  DApp,
-  TOKEN_NEW_MARKET_PROPOSAL,
-  useLinks,
-} from '@vegaprotocol/environment';
 import { ProposalsList } from '@vegaprotocol/proposals';
-import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { SuccessorMarketRenderer } from './successor-market-cell';
 
 export const Proposed = () => {
-  const tokenLink = useLinks(DApp.Token);
-  const externalLink = tokenLink(TOKEN_NEW_MARKET_PROPOSAL);
-  return (
-    <>
-      <div className="h-[400px]">
-        <ProposalsList SuccessorMarketRenderer={SuccessorMarketRenderer} />
-      </div>
-      <ExternalLink className="py-4 px-[11px] text-sm" href={externalLink}>
-        {t('Propose a new market')}
-      </ExternalLink>
-    </>
-  );
+  return <ProposalsList SuccessorMarketRenderer={SuccessorMarketRenderer} />;
 };
diff --git a/libs/proposals/src/components/proposals-list/proposals-list.tsx b/libs/proposals/src/components/proposals-list/proposals-list.tsx
index 38ab2b753..9cdb01aef 100644
--- a/libs/proposals/src/components/proposals-list/proposals-list.tsx
+++ b/libs/proposals/src/components/proposals-list/proposals-list.tsx
@@ -35,16 +35,13 @@ export const ProposalsList = ({
   const { columnDefs, defaultColDef } = useColumnDefs();
 
   return (
-    <div className="relative h-full">
-      <AgGrid
-        className="w-full h-full"
-        columnDefs={columnDefs}
-        rowData={filteredData}
-        defaultColDef={defaultColDef}
-        getRowId={({ data }) => data.id}
-        overlayNoRowsTemplate={t('No markets')}
-        components={{ SuccessorMarketRenderer, MarketNameProposalCell }}
-      />
-    </div>
+    <AgGrid
+      columnDefs={columnDefs}
+      rowData={filteredData}
+      defaultColDef={defaultColDef}
+      getRowId={({ data }) => data.id}
+      overlayNoRowsTemplate={t('No markets')}
+      components={{ SuccessorMarketRenderer, MarketNameProposalCell }}
+    />
   );
 };