feat(#862): show current node and button to open node switcher (#1894)

* feat: add node url to footer, add link to change node

* feat: add test for trading footer

* chore: add comment about url manipulation

* fix: #862 fix cypress tests

* fix: #862 remove constant link

Co-authored-by: Madalina Raicu <madalina@raygroup.uk>

apps/trading-e2e/src/integration/market-info.cy.ts

@@ -4,7 +4,6 @@ import { connectVegaWallet } from '../support/vega-wallet';
 const marketInfoBtn = 'Info';
 const row = 'key-value-table-row';
 const marketTitle = 'accordion-title';
-const link = 'link';
 const externalLink = 'external-link';
 
 describe('market info is displayed', { tags: '@smoke' }, () => {
@@ -154,7 +153,10 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
     validateMarketDataRow(1, 'Supplied Stake', '0.56767 tBTC');
     validateMarketDataRow(2, 'Market Value Proxy', '6.77678 tBTC');
 
-    cy.getByTestId(link).should('have.text', 'View liquidity provision table');
+    cy.getByTestId('view-liquidity-link').should(
+      'have.text',
+      'View liquidity provision table'
+    );
   });
 
   it('oracle displayed', () => {

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

@@ -52,7 +52,9 @@ describe('markets table', { tags: '@smoke' }, () => {
       'ETHBTC.QM21',
       'SOLUSD',
     ];
-    cy.getByTestId('link').should('have.attr', 'href', '/markets').click();
+    cy.getByTestId('view-market-list-link')
+      .should('have.attr', 'href', '/markets')
+      .click();
     cy.url().should('eq', Cypress.config('baseUrl') + '/markets');
     cy.contains('AAPL.MF21').should('be.visible');
     cy.contains('Market').click(); // sort by market name

apps/trading/components/footer/footer.spec.tsx

@@ -0,0 +1,26 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Footer } from './footer';
+import { useEnvironment } from '@vegaprotocol/environment';
+
+jest.mock('@vegaprotocol/environment');
+
+describe('Footer', () => {
+  it('renders a button to open node switcher', () => {
+    const mockOpenNodeSwitcher = jest.fn();
+    const node = 'n99.somenetwork.vega.xyz';
+    const nodeUrl = `https://${node}`;
+
+    // @ts-ignore mock env hook
+    useEnvironment.mockImplementation(() => ({
+      VEGA_URL: `https://api.${node}/graphql`,
+      setNodeSwitcherOpen: mockOpenNodeSwitcher,
+    }));
+
+    render(<Footer />);
+
+    fireEvent.click(screen.getByRole('button'));
+    expect(mockOpenNodeSwitcher).toHaveBeenCalled();
+    const link = screen.getByText(node);
+    expect(link).toHaveAttribute('href', nodeUrl);
+  });
+});

apps/trading/components/footer/footer.tsx

@@ -1,9 +1,28 @@
+import { useEnvironment } from '@vegaprotocol/environment';
+import { t } from '@vegaprotocol/react-helpers';
+import { ButtonLink, Link } from '@vegaprotocol/ui-toolkit';
+
 export const Footer = () => {
+  const { VEGA_URL, setNodeSwitcherOpen } = useEnvironment();
   return (
-    <footer className="px-4 py-2 text-xs border-t border-default bg-neutral-100 dark:bg-neutral-800">
+    <footer className="px-4 py-1 text-xs border-t border-default">
       <div className="flex justify-between">
-        <div>Status</div>
+        <div className="flex gap-2">
+          {VEGA_URL && <NodeUrl url={VEGA_URL} />}
+          <ButtonLink onClick={setNodeSwitcherOpen}>{t('Change')}</ButtonLink>
+        </div>
       </div>
     </footer>
   );
 };
+
+const NodeUrl = ({ url }: { url: string }) => {
+  // get base url from api url, api sub domain
+  const urlObj = new URL(url);
+  const nodeUrl = urlObj.origin.replace(/^[^.]+\./g, '');
+  return (
+    <Link href={'https://' + nodeUrl} target="_blank">
+      {nodeUrl}
+    </Link>
+  );
+};

apps/trading/components/select-market/select-market.tsx

@@ -65,7 +65,9 @@ export const SelectMarketLandingTable = ({
         </table>
       </div>
       <div className="mt-4 text-md">
-        <Link href="/markets">{'Or view full market list'}</Link>
+        <Link href="/markets" data-testid="view-market-list-link">
+          {'Or view full market list'}
+        </Link>
       </div>
     </>
   );

libs/market-info/src/components/market-info/info-market.tsx

@@ -320,7 +320,10 @@ export const Info = ({ market, onSelect }: InfoProps) => {
           assetSymbol={assetSymbol}
         >
           <Link passHref={true} href={`/liquidity/${market.id}`}>
-            <UiToolkitLink onClick={() => onSelect(market.id)}>
+            <UiToolkitLink
+              onClick={() => onSelect(market.id)}
+              data-testid="view-liquidity-link"
+            >
               {t('View liquidity provision table')}
             </UiToolkitLink>
           </Link>