feat(#2661): show status on all markets list (#2669)

apps/trading-e2e/src/integration/markets.cy.ts

@@ -80,7 +80,7 @@ describe('markets table', { tags: '@smoke' }, () => {
     cy.getByTestId('view-market-list-link')
       .should('have.attr', 'href', '#/markets/all')
       .click();
-    cy.get('[data-testid="Active markets"]').should(
+    cy.get('[data-testid="All markets"]').should(
       'have.attr',
       'data-state',
       'active'

apps/trading/client-pages/markets/markets-page.tsx

@@ -14,7 +14,7 @@ export const MarketsPage = () => {
   }, [updateTitle]);
   return (
     <Tabs>
-      <Tab id="active-markets" name={t('Active markets')}>
+      <Tab id="all-markets" name={t('All markets')}>
         <Markets />
       </Tab>
       <Tab id="proposed-markets" name={t('Proposed markets')}>

libs/market-list/src/lib/components/markets-container/market-list-table.tsx

@@ -15,7 +15,7 @@ import { AgGridDynamic as AgGrid, ButtonLink } from '@vegaprotocol/ui-toolkit';
 import { AgGridColumn } from 'ag-grid-react';
 import type { AgGridReact } from 'ag-grid-react';
 import * as Schema from '@vegaprotocol/types';
-import type { MarketWithData } from '../../';
+import type { MarketFieldsFragment, MarketWithData } from '../../';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
 
 const { MarketTradingMode, AuctionTrigger } = Schema;
@@ -62,28 +62,6 @@ export const MarketListTable = forwardRef<
         headerName={t('Description')}
         field="tradableInstrument.instrument.name"
       />
-      <AgGridColumn
-        headerName={t('Settlement asset')}
-        field="tradableInstrument.instrument.product.settlementAsset"
-        cellRenderer={({
-          value,
-        }: VegaICellRendererParams<
-          MarketWithData,
-          'tradableInstrument.instrument.product.settlementAsset'
-        >) =>
-          value ? (
-            <ButtonLink
-              onClick={(e) => {
-                openAssetDetailsDialog(value.id, e.target as HTMLElement);
-              }}
-            >
-              {value.symbol}
-            </ButtonLink>
-          ) : (
-            ''
-          )
-        }
-      />
       <AgGridColumn
         headerName={t('Trading mode')}
         field="data"
@@ -103,6 +81,15 @@ export const MarketListTable = forwardRef<
             : Schema.MarketTradingModeMapping[tradingMode];
         }}
       />
+      <AgGridColumn
+        headerName={t('Status')}
+        field="state"
+        valueGetter={({
+          data,
+        }: VegaValueGetterParams<MarketFieldsFragment, 'state'>) => {
+          return data?.state ? Schema.MarketStateMapping[data?.state] : '-';
+        }}
+      />
       <AgGridColumn
         headerName={t('Best bid')}
         field="data.bestBidPrice"
@@ -175,6 +162,28 @@ export const MarketListTable = forwardRef<
             : addDecimalsFormatNumber(data.data.markPrice, data.decimalPlaces)
         }
       />
+      <AgGridColumn
+        headerName={t('Settlement asset')}
+        field="tradableInstrument.instrument.product.settlementAsset"
+        cellRenderer={({
+          value,
+        }: VegaICellRendererParams<
+          MarketWithData,
+          'tradableInstrument.instrument.product.settlementAsset'
+        >) =>
+          value ? (
+            <ButtonLink
+              onClick={(e) => {
+                openAssetDetailsDialog(value.id, e.target as HTMLElement);
+              }}
+            >
+              {value.symbol}
+            </ButtonLink>
+          ) : (
+            ''
+          )
+        }
+      />
       <AgGridColumn headerName={t('Market ID')} field="id" />
     </AgGrid>
   );