feat: 1651 market select snags (#1874)

* feat: #1651 market select snags * fix: #1651 fix markets.cy.ts cypress test * fix: #1651 prevent default and stop propagation on select markets asset click
2022-10-28 13:41:33 +01:00 · 2022-10-28 13:41:33 +01:00 · a90970399c
commit a90970399c
parent b86c3386c6
5 changed files with 109 additions and 69 deletions
--- a/apps/trading-e2e/src/integration/markets.cy.ts
+++ b/apps/trading-e2e/src/integration/markets.cy.ts
@ -37,15 +37,15 @@ describe('markets table', { tags: '@smoke' }, () => {
    cy.getByTestId('market-name').should('not.be.empty');
  });

-  it('Able to select market from dropdown', () => {
+  it('able to select market from dropdown', () => {
    openMarketDropDown();
-    cy.getByTestId('market-link-market-0').should('be.visible').click();
+    cy.getByTestId('market-link-market-0').first().should('be.visible').click();
    cy.contains('ACTIVE MARKET').should('be.visible');
    cy.url().should('include', '/markets/market-0');
    cy.getByTestId('popover-trigger').should('not.be.empty');
  });

-  it('Able to open and sort full market list - market page', () => {
+  it('able to open and sort full market list - market page', () => {
    const ExpectedSortedMarkets = [
      'AAPL.MF21',
      'BTCUSD.MF21',
--- a/apps/trading/components/select-market/select-market-columns.tsx
+++ b/apps/trading/components/select-market/select-market-columns.tsx
@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { TradingModeTooltip } from '@vegaprotocol/deal-ticket';
 import { FeesCell } from '@vegaprotocol/market-info';
 import {
  calcCandleHigh,
@ -17,9 +18,13 @@ import {
  MarketTradingMode,
  MarketTradingModeMapping,
 } from '@vegaprotocol/types';
-import { PriceCellChange, Sparkline, Tooltip } from '@vegaprotocol/ui-toolkit';
+import {
+  Link,
+  PriceCellChange,
+  Sparkline,
+  Tooltip,
+} from '@vegaprotocol/ui-toolkit';
 import isNil from 'lodash/isNil';
-import Link from 'next/link';

 import type { CandleClose } from '@vegaprotocol/types';
 import type {
@ -30,6 +35,31 @@ type Market = MarketWithData & MarketWithCandles;

 export const cellClassNames = 'py-1 first:text-left text-right';

+const TradingMode = ({ market }: { market: Market }) => {
+  return (
+    <Tooltip
+      description={
+        market && (
+          <TradingModeTooltip
+            tradingMode={market.tradingMode}
+            trigger={market.data?.trigger || null}
+          />
+        )
+      }
+    >
+      <span>
+        {market.tradingMode ===
+          MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
+        market.data?.trigger &&
+        market.data.trigger !== AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED
+          ? `${MarketTradingModeMapping[market.tradingMode]}
+                     - ${AuctionTriggerMapping[market.data.trigger]}`
+          : MarketTradingModeMapping[market.tradingMode]}
+      </span>
+    </Tooltip>
+  );
+};
+
 const FeesInfo = () => {
  return (
    <Tooltip
@ -174,10 +204,30 @@ export const columns = (
  const candleLow = market.candles && calcCandleLow(market.candles);
  const candleHigh = market.candles && calcCandleHigh(market.candles);
  const candleVolume = market.candles && calcCandleVolume(market.candles);
+  const handleKeyPress = (
+    event: React.KeyboardEvent<HTMLAnchorElement>,
+    id: string
+  ) => {
+    if (event.key === 'Enter' && onSelect) {
+      return onSelect(id);
+    }
+  };
  const selectMarketColumns: Column[] = [
    {
      kind: ColumnKind.Market,
-      value: market.tradableInstrument.instrument.code,
+      value: (
+        <Link
+          href={`/markets/${market.id}`}
+          data-testid={`market-link-${market.id}`}
+          onKeyPress={(event) => handleKeyPress(event, market.id)}
+          onClick={(e) => {
+            e.preventDefault();
+            onSelect(market.id);
+          }}
+        >
+          {market.tradableInstrument.instrument.code}
+        </Link>
+      ),
      className: cellClassNames,
      onlyOnDetailed: false,
    },
@ -227,15 +277,16 @@ export const columns = (
      value: (
        <button
          data-dialog-trigger
-          className="inline hover:underline"
-          onClick={(e) =>
+          className="inline underline"
+          onClick={(e) => {
+            e.stopPropagation();
            onCellClick(
              e,
              ColumnKind.Asset,
              market.tradableInstrument.instrument.product.settlementAsset
                .symbol
-            )
-          }
+            );
+          }}
        >
          {market.tradableInstrument.instrument.product.settlementAsset.symbol}
        </button>
@ -293,14 +344,7 @@ export const columns = (
    },
    {
      kind: ColumnKind.TradingMode,
-      value:
-        market.tradingMode ===
-          MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
-        market.data?.trigger &&
-        market.data.trigger !== AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED
-          ? `${MarketTradingModeMapping[market.tradingMode]}
-                     - ${AuctionTriggerMapping[market.data.trigger]}`
-          : MarketTradingModeMapping[market.tradingMode],
+      value: <TradingMode market={market} />,
      className: `${cellClassNames} hidden lg:table-cell`,
      onlyOnDetailed: true,
      dataTestId: 'trading-mode-col',
@ -347,17 +391,16 @@ export const columnsPositionMarkets = (
    {
      kind: ColumnKind.Market,
      value: (
-        <Link href={`/markets/${market.id}`} passHref={true}>
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid,jsx-a11y/no-static-element-interactions */}
-          <a
-            onKeyPress={(event) => handleKeyPress(event, market.id)}
-            onClick={() => {
-              onSelect(market.id);
-            }}
-            data-testid={`market-link-${market.id}`}
-          >
-            {market.tradableInstrument.instrument.code}
-          </a>
+        <Link
+          href={`/markets/${market.id}`}
+          data-testid={`market-link-${market.id}`}
+          onKeyPress={(event) => handleKeyPress(event, market.id)}
+          onClick={(e) => {
+            e.preventDefault();
+            onSelect(market.id);
+          }}
+        >
+          {market.tradableInstrument.instrument.code}
        </Link>
      ),
      className: cellClassNames,
@ -409,8 +452,9 @@ export const columnsPositionMarkets = (
      value: (
        <button
          data-dialog-trigger
-          className="inline hover:underline"
+          className="inline underline"
          onClick={(e) => {
+            e.stopPropagation();
            if (!onCellClick) return;
            onCellClick(
              e,
@ -475,14 +519,7 @@ export const columnsPositionMarkets = (
    },
    {
      kind: ColumnKind.TradingMode,
-      value:
-        market.tradingMode ===
-          MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
-        market.data?.trigger &&
-        market.data.trigger !== AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED
-          ? `${MarketTradingModeMapping[market.tradingMode]}
-                     - ${AuctionTriggerMapping[market.data.trigger]}`
-          : MarketTradingModeMapping[market.tradingMode],
+      value: <TradingMode market={market} />,
      className: `${cellClassNames} hidden lg:table-cell`,
      onlyOnDetailed: true,
      dataTestId: 'trading-mode-col',
--- a/apps/trading/components/select-market/select-market.spec.tsx
+++ b/apps/trading/components/select-market/select-market.spec.tsx
@ -1,16 +1,17 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { AuctionTrigger, MarketTradingMode } from '@vegaprotocol/types';
+
+import {
+  SelectAllMarketsTableBody,
+  SelectMarketLandingTable,
+} from './select-market';
+
 import type { ReactNode } from 'react';
 import type {
  MarketWithCandles,
  MarketWithData,
  MarketData,
 } from '@vegaprotocol/market-list';
-import {
-  SelectAllMarketsTableBody,
-  SelectMarketLandingTable,
-} from './select-market';
-
 type Market = MarketWithCandles & MarketWithData;

 jest.mock(
@ -162,7 +163,7 @@ describe('SelectMarket', () => {
    expect(screen.getByText('ABCDEF')).toBeTruthy(); // name
    expect(screen.getByText('25.00%')).toBeTruthy(); // price change
    expect(container).toHaveTextContent(/1,000/); // volume
-    fireEvent.click(screen.getByTestId(`market-link-1`));
+    fireEvent.click(screen.getAllByTestId(`market-link-1`)[0]);
    expect(onSelect).toHaveBeenCalledWith('1');
  });

@ -177,9 +178,9 @@ describe('SelectMarket', () => {
        onSelect={onSelect}
      />
    );
-    fireEvent.click(screen.getByTestId(`market-link-1`));
+    fireEvent.click(screen.getAllByTestId(`market-link-1`)[0]);
    expect(onSelect).toHaveBeenCalledWith('1');
-    fireEvent.click(screen.getByTestId(`market-link-2`));
+    fireEvent.click(screen.getAllByTestId(`market-link-2`)[0]);
    expect(onSelect).toHaveBeenCalledWith('2');
  });
 });
--- a/apps/trading/components/select-market/select-market.tsx
+++ b/apps/trading/components/select-market/select-market.tsx
@ -1,34 +1,35 @@
-import type { ReactNode } from 'react';
-import { useMemo, useState } from 'react';
+import { useMarketList } from '@vegaprotocol/market-list';
+import { positionsDataProvider } from '@vegaprotocol/positions';
 import { t, useDataProvider } from '@vegaprotocol/react-helpers';
 import {
  Dialog,
  Icon,
  Intent,
-  Loader,
  Link,
+  Loader,
  Popover,
 } from '@vegaprotocol/ui-toolkit';
-import { useMarketList } from '@vegaprotocol/market-list';
-import type {
-  MarketWithCandles,
-  MarketWithData,
-} from '@vegaprotocol/market-list';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import type { PositionFieldsFragment } from '@vegaprotocol/positions';
-import { positionsDataProvider } from '@vegaprotocol/positions';
+import { useMemo, useState } from 'react';
+
+import {
+  columnHeaders,
+  columnHeadersPositionMarkets,
+  columns,
+  columnsPositionMarkets,
+} from './select-market-columns';
 import {
  SelectMarketTableHeader,
  SelectMarketTableRow,
 } from './select-market-table';
-import type { Column, OnCellClickHandler } from './select-market-columns';
-import {
-  columnHeadersPositionMarkets,
-  columnsPositionMarkets,
-  columnHeaders,
-  columns,
-} from './select-market-columns';

+import type { ReactNode } from 'react';
+import type {
+  MarketWithCandles,
+  MarketWithData,
+} from '@vegaprotocol/market-list';
+import type { PositionFieldsFragment } from '@vegaprotocol/positions';
+import type { Column, OnCellClickHandler } from './select-market-columns';
 type Market = MarketWithCandles & MarketWithData;

 export const SelectMarketLandingTable = ({
--- a/libs/deal-ticket/src/components/trading-mode-tooltip/trading-mode-tooltip.tsx
+++ b/libs/deal-ticket/src/components/trading-mode-tooltip/trading-mode-tooltip.tsx
@ -1,13 +1,14 @@
 import { t } from '@vegaprotocol/react-helpers';
-import { MarketTradingMode, AuctionTrigger } from '@vegaprotocol/types';
+import { AuctionTrigger, MarketTradingMode } from '@vegaprotocol/types';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
-import type { ReactNode } from 'react';
+
 import { MarketDataGrid } from './market-data-grid';

+import type { ReactNode } from 'react';
 type TradingModeTooltipProps = {
  tradingMode: MarketTradingMode | null;
  trigger: AuctionTrigger | null;
-  compiledGrid: { label: ReactNode; value?: ReactNode }[];
+  compiledGrid?: { label: ReactNode; value?: ReactNode }[];
 };

 export const TradingModeTooltip = ({
@ -38,7 +39,7 @@ export const TradingModeTooltip = ({
              {t('Find out more')}
            </ExternalLink>
          </p>
-          <MarketDataGrid grid={compiledGrid} />
+          {compiledGrid && <MarketDataGrid grid={compiledGrid} />}
        </section>
      );
    }
@ -57,7 +58,7 @@ export const TradingModeTooltip = ({
                  {t('Find out more')}
                </ExternalLink>
              </p>
-              <MarketDataGrid grid={compiledGrid} />
+              {compiledGrid && <MarketDataGrid grid={compiledGrid} />}
            </section>
          );
        }
@ -72,7 +73,7 @@ export const TradingModeTooltip = ({
                  {t('Find out more')}
                </ExternalLink>
              </p>
-              <MarketDataGrid grid={compiledGrid} />
+              {compiledGrid && <MarketDataGrid grid={compiledGrid} />}
            </section>
          );
        }