feat(trading): add resources dropdown to console nav (#3249)

apps/trading-e2e/.env

@@ -1,5 +1,6 @@
 NX_ETHEREUM_PROVIDER_URL=http://localhost:8545
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_VEGA_CONFIG_URL=''
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet

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

@@ -25,6 +25,23 @@ describe('Desktop view', { tags: '@smoke' }, () => {
           });
       });
     });
+
+    it('Resources dropdown should be correctly rendered', () => {
+      const resourceSelector = 'ul li:last-child';
+      ['Docs', 'Give Feedback'].forEach((text, index) => {
+        cy.get('nav').find(resourceSelector).contains('Resources').click();
+        cy.get('nav')
+          .find(resourceSelector)
+          .find('.navigation-content li')
+          .eq(index)
+          .find('a')
+          .then((element) => {
+            expect(element.attr('target')).to.eq('_blank');
+            expect(element.attr('href')).to.not.be.empty;
+            expect(element.text()).to.eq(text);
+          });
+      });
+    });
   });
 });
 

apps/trading/.env

@@ -1,5 +1,6 @@
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/stagnet3/vegawallet-stagnet3.toml
 NX_VEGA_ENV=STAGNET3

apps/trading/.env.capsule

@@ -1,5 +1,6 @@
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_VEGA_CONFIG_URL=''
 NX_VEGA_ENV=CUSTOM

apps/trading/.env.devnet

@@ -1,5 +1,6 @@
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/devnet1/vegawallet-devnet1.toml
 NX_VEGA_ENV=DEVNET

apps/trading/.env.mainnet

@@ -1,5 +1,6 @@
 NX_ETHEREUM_PROVIDER_URL=https://mainnet.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://etherscan.io
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks/master/mainnet1/mainnet1.toml
 NX_VEGA_ENV=MAINNET
 NX_VEGA_EXPLORER_URL=https://explorer.vega.xyz

apps/trading/.env.mirror

@@ -1,5 +1,6 @@
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/mainnet-mirror/vegawallet-mainnet-mirror.toml
 NX_VEGA_ENV=MIRROR

apps/trading/.env.sandbox

@@ -1,5 +1,6 @@
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_HOSTED_WALLET_URL=https://wallet.sandbox.vega.xyz
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/sandbox/vegawallet-sandbox.toml
 NX_VEGA_ENV=SANDBOX

apps/trading/.env.stagnet1

@@ -1,5 +1,6 @@
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/stagnet1/vegawallet-stagnet1.toml
 NX_VEGA_ENV=STAGNET1

apps/trading/.env.stagnet3

@@ -1,5 +1,6 @@
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/stagnet3/vegawallet-stagnet3.toml
 NX_VEGA_ENV=STAGNET3

apps/trading/.env.testnet

@@ -1,5 +1,6 @@
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/fairground/vegawallet-fairground.toml
 NX_VEGA_ENV=TESTNET

apps/trading/.env.validator-testnet

@@ -1,5 +1,6 @@
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks/master/testnet2/testnet2.toml
 NX_VEGA_ENV=VALIDATOR_TESTNET

apps/trading/components/navbar/navbar.tsx

@@ -1,8 +1,9 @@
-import type { ComponentProps } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import {
   DApp,
   NetworkSwitcher,
   TOKEN_GOVERNANCE,
+  useEnvironment,
   useLinks,
 } from '@vegaprotocol/environment';
 import { t } from '@vegaprotocol/i18n';
@@ -17,6 +18,8 @@ import {
   ExternalLink,
   Icon,
   NavigationBreakpoint,
+  NavigationTrigger,
+  NavigationContent,
 } from '@vegaprotocol/ui-toolkit';
 
 import { Links, Routes } from '../../pages/client-router';
@@ -26,6 +29,7 @@ export const Navbar = ({
 }: {
   theme: ComponentProps<typeof Navigation>['theme'];
 }) => {
+  const { VEGA_DOCS_URL, GITHUB_FEEDBACK_URL } = useEnvironment();
   const tokenLink = useLinks(DApp.Token);
   const { marketId } = useGlobalStore((store) => ({
     marketId: store.marketId,
@@ -75,13 +79,29 @@ export const Navbar = ({
           </NavigationLink>
         </NavigationItem>
         <NavigationItem>
-          <ExternalLink href={tokenLink(TOKEN_GOVERNANCE)}>
+          <NavExternalLink href={tokenLink(TOKEN_GOVERNANCE)}>
-            <span className="flex items-center gap-2">
+            {t('Governance')}
-              <span>{t('Governance')}</span>{' '}
+          </NavExternalLink>
-              <Icon name="arrow-top-right" size={3} />
-            </span>
-          </ExternalLink>
         </NavigationItem>
+        {VEGA_DOCS_URL && GITHUB_FEEDBACK_URL && (
+          <NavigationItem>
+            <NavigationTrigger>{t('Resources')}</NavigationTrigger>
+            <NavigationContent>
+              <NavigationList>
+                <NavigationItem>
+                  <NavExternalLink href={VEGA_DOCS_URL}>
+                    {t('Docs')}
+                  </NavExternalLink>
+                </NavigationItem>
+                <NavigationItem>
+                  <NavExternalLink href={GITHUB_FEEDBACK_URL}>
+                    {t('Give Feedback')}
+                  </NavExternalLink>
+                </NavigationItem>
+              </NavigationList>
+            </NavigationContent>
+          </NavigationItem>
+        )}
       </NavigationList>
       <NavigationList
         className="[.drawer-content_&]:border-t [.drawer-content_&]:border-t-vega-light-200 dark:[.drawer-content_&]:border-t-vega-dark-200 [.drawer-content_&]:pt-8 [.drawer-content_&]:mt-4"
@@ -98,3 +118,20 @@ export const Navbar = ({
     </Navigation>
   );
 };
+
+const NavExternalLink = ({
+  children,
+  href,
+}: {
+  children: ReactNode;
+  href: string;
+}) => {
+  return (
+    <ExternalLink href={href}>
+      <span className="flex items-center gap-2">
+        <span>{children}</span>
+        <Icon name="arrow-top-right" size={3} />
+      </span>
+    </ExternalLink>
+  );
+};