Fix/1831: External link component used for proposals docs/explorer links (#1956)

* Fix/1831: External link component used for proposals docs/explorer links * proposal-form-terms.tsx docs link no longer needs to be rendered if a docs link isn't provided
2022-11-07 15:40:08 +00:00 · 2022-11-07 15:40:08 +00:00 · e5432888aa
commit e5432888aa
parent 5a764d190f
10 changed files with 55 additions and 63 deletions
--- a/apps/token/src/routes/governance/components/propose/proposal-form-terms.spec.tsx
+++ b/apps/token/src/routes/governance/components/propose/proposal-form-terms.spec.tsx
@ -28,20 +28,13 @@ describe('Proposal Form Terms', () => {
    expect(screen.getByText('Error text')).toBeInTheDocument();
  });

-  it('should render the generic docs link if no custom override', () => {
-    renderComponent();
-    expect(
-      screen.getByText('https://docs.vega.xyz/tutorials/proposals')
-    ).toBeInTheDocument();
-  });
-
-  it('should render the custom docs link if provided', () => {
+  it('should render the docs link', () => {
    const register = jest.fn();
    render(
      <ProposalFormTerms
        registerField={register('proposalTerms')}
        errorMessage="Error text"
-        customDocLink="/custom"
+        docsLink="/custom"
      />
    );
    expect(
--- a/apps/token/src/routes/governance/components/propose/proposal-form-terms.tsx
+++ b/apps/token/src/routes/governance/components/propose/proposal-form-terms.tsx
@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
 import {
  FormGroup,
  InputError,
-  Link,
+  ExternalLink,
  TextArea,
 } from '@vegaprotocol/ui-toolkit';
 import { useEnvironment } from '@vegaprotocol/environment';
@ -12,14 +12,14 @@ interface ProposalFormTermsProps {
  registerField: UseFormRegisterReturn<'proposalTerms'>;
  errorMessage: string | undefined;
  labelOverride?: string;
-  customDocLink?: string;
+  docsLink?: string;
 }

 export const ProposalFormTerms = ({
  registerField: register,
  errorMessage,
  labelOverride,
-  customDocLink,
+  docsLink,
 }: ProposalFormTermsProps) => {
  const { VEGA_DOCS_URL } = useEnvironment();
  const { t } = useTranslation();
@ -28,13 +28,13 @@ export const ProposalFormTerms = ({
      label={labelOverride || t('ProposalTerms')}
      labelFor="proposal-terms"
    >
-      {VEGA_DOCS_URL && (
+      {docsLink && VEGA_DOCS_URL && (
        <div className="mt-[-4px] mb-2 text-sm font-light">
          <span className="mr-1">{t('ProposalTermsText')}</span>
-          <Link
-            href={`${VEGA_DOCS_URL}/tutorials/proposals${customDocLink || ''}`}
+          <ExternalLink
+            href={`${VEGA_DOCS_URL}/tutorials/proposals${docsLink}`}
            target="_blank"
-          >{`${VEGA_DOCS_URL}/tutorials/proposals${customDocLink || ''}`}</Link>
+          >{`${VEGA_DOCS_URL}/tutorials/proposals${docsLink}`}</ExternalLink>
        </div>
      )}

--- a/apps/token/src/routes/governance/propose/freeform/propose-freeform.tsx
+++ b/apps/token/src/routes/governance/propose/freeform/propose-freeform.tsx
@ -15,7 +15,7 @@ import {
  ProposalFormVoteAndEnactmentDeadline,
 } from '../../components/propose';
 import { ProposalMinRequirements } from '../../components/shared';
-import { AsyncRenderer, Link } from '@vegaprotocol/ui-toolkit';
+import { AsyncRenderer, ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { Heading } from '../../../../components/heading';
 import { VegaWalletContainer } from '../../../../components/vega-wallet-container';
 import { NetworkParams, useNetworkParams } from '@vegaprotocol/react-helpers';
@ -88,20 +88,20 @@ export const ProposeFreeform = () => {
            {VEGA_DOCS_URL && (
              <p className="text-sm" data-testid="proposal-docs-link">
                <span className="mr-1">{t('ProposalTermsText')}</span>
-                <Link
+                <ExternalLink
                  href={`${VEGA_DOCS_URL}/tutorials/proposals/${DOCS_LINK}`}
                  target="_blank"
-                >{`${VEGA_DOCS_URL}/tutorials/proposals/${DOCS_LINK}`}</Link>
+                >{`${VEGA_DOCS_URL}/tutorials/proposals/${DOCS_LINK}`}</ExternalLink>
              </p>
            )}

            {VEGA_EXPLORER_URL && (
              <p className="text-sm">
                {t('MoreProposalsInfo')}{' '}
-                <Link
+                <ExternalLink
                  href={`${VEGA_EXPLORER_URL}/governance`}
                  target="_blank"
-                >{`${VEGA_EXPLORER_URL}/governance`}</Link>
+                >{`${VEGA_EXPLORER_URL}/governance`}</ExternalLink>
              </p>
            )}

--- a/apps/token/src/routes/governance/propose/network-parameter/propose-network-parameter.tsx
+++ b/apps/token/src/routes/governance/propose/network-parameter/propose-network-parameter.tsx
@ -23,10 +23,10 @@ import {
 import { ProposalMinRequirements } from '../../components/shared';
 import {
  AsyncRenderer,
+  ExternalLink,
  FormGroup,
  Input,
  InputError,
-  Link,
  Select,
  SyntaxHighlighter,
  TextArea,
@ -155,20 +155,20 @@ export const ProposeNetworkParameter = () => {
            {VEGA_DOCS_URL && (
              <p className="text-sm" data-testid="proposal-docs-link">
                <span className="mr-1">{t('ProposalTermsText')}</span>
-                <Link
+                <ExternalLink
                  href={`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}
                  target="_blank"
-                >{`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}</Link>
+                >{`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}</ExternalLink>
              </p>
            )}

            {VEGA_EXPLORER_URL && (
              <p className="text-sm">
                {t('MoreNetParamsInfo')}{' '}
-                <Link
+                <ExternalLink
                  href={`${VEGA_EXPLORER_URL}/network-parameters`}
                  target="_blank"
-                >{`${VEGA_EXPLORER_URL}/network-parameters`}</Link>
+                >{`${VEGA_EXPLORER_URL}/network-parameters`}</ExternalLink>
              </p>
            )}

--- a/apps/token/src/routes/governance/propose/new-asset/propose-new-asset.tsx
+++ b/apps/token/src/routes/governance/propose/new-asset/propose-new-asset.tsx
@ -23,7 +23,7 @@ import {
  ProposalFormVoteAndEnactmentDeadline,
 } from '../../components/propose';
 import { ProposalMinRequirements } from '../../components/shared';
-import { AsyncRenderer, Link } from '@vegaprotocol/ui-toolkit';
+import { AsyncRenderer, ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { Heading } from '../../../../components/heading';
 import { VegaWalletContainer } from '../../../../components/vega-wallet-container';
 import { ProposalUserAction } from '../../components/shared';
@ -117,20 +117,20 @@ export const ProposeNewAsset = () => {
            {VEGA_DOCS_URL && (
              <p className="text-sm" data-testid="proposal-docs-link">
                <span className="mr-1">{t('ProposalTermsText')}</span>
-                <Link
+                <ExternalLink
                  href={`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}
                  target="_blank"
-                >{`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}</Link>
+                >{`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}</ExternalLink>
              </p>
            )}

            {VEGA_EXPLORER_URL && (
              <p className="text-sm">
                {t('MoreAssetsInfo')}{' '}
-                <Link
+                <ExternalLink
                  href={`${VEGA_EXPLORER_URL}/assets`}
                  target="_blank"
-                >{`${VEGA_EXPLORER_URL}/assets`}</Link>
+                >{`${VEGA_EXPLORER_URL}/assets`}</ExternalLink>
              </p>
            )}

@ -163,7 +163,7 @@ export const ProposeNewAsset = () => {
                  })}
                  labelOverride={'Terms.newAsset (JSON format)'}
                  errorMessage={errors?.proposalTerms?.message}
-                  customDocLink={DOCS_LINK}
+                  docsLink={DOCS_LINK}
                />

                <ProposalFormVoteAndEnactmentDeadline
--- a/apps/token/src/routes/governance/propose/new-market/propose-new-market.tsx
+++ b/apps/token/src/routes/governance/propose/new-market/propose-new-market.tsx
@ -22,7 +22,7 @@ import {
  ProposalFormVoteAndEnactmentDeadline,
 } from '../../components/propose';
 import { ProposalMinRequirements } from '../../components/shared';
-import { AsyncRenderer, Link } from '@vegaprotocol/ui-toolkit';
+import { AsyncRenderer, ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { Heading } from '../../../../components/heading';
 import { VegaWalletContainer } from '../../../../components/vega-wallet-container';
 import { ProposalUserAction } from '../../components/shared';
@ -112,20 +112,20 @@ export const ProposeNewMarket = () => {
            {VEGA_DOCS_URL && (
              <p className="text-sm" data-testid="proposal-docs-link">
                <span className="mr-1">{t('ProposalTermsText')}</span>
-                <Link
+                <ExternalLink
                  href={`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}
                  target="_blank"
-                >{`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}</Link>
+                >{`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}</ExternalLink>
              </p>
            )}

            {VEGA_EXPLORER_URL && (
              <p className="text-sm">
                {t('MoreMarketsInfo')}{' '}
-                <Link
+                <ExternalLink
                  href={`${VEGA_EXPLORER_URL}/markets`}
                  target="_blank"
-                >{`${VEGA_EXPLORER_URL}/markets`}</Link>
+                >{`${VEGA_EXPLORER_URL}/markets`}</ExternalLink>
              </p>
            )}

@ -158,7 +158,7 @@ export const ProposeNewMarket = () => {
                  })}
                  labelOverride={'Terms.newMarket (JSON format)'}
                  errorMessage={errors?.proposalTerms?.message}
-                  customDocLink={DOCS_LINK}
+                  docsLink={DOCS_LINK}
                />

                <ProposalFormVoteAndEnactmentDeadline
--- a/apps/token/src/routes/governance/propose/propose.tsx
+++ b/apps/token/src/routes/governance/propose/propose.tsx
@ -1,6 +1,7 @@
 import Routes from '../../routes';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
+import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { useEnvironment } from '@vegaprotocol/environment';
 import { Heading } from '../../../components/heading';

@ -16,21 +17,19 @@ export const Propose = () => {
          {VEGA_DOCS_URL && (
            <p>
              <span className="mr-1">{t('ProposalTermsText')}</span>
-              <Link
-                className="underline"
-                to={`${VEGA_DOCS_URL}/tutorials/proposals`}
+              <ExternalLink
+                href={`${VEGA_DOCS_URL}/tutorials/proposals`}
                target="_blank"
-              >{`${VEGA_DOCS_URL}/tutorials/proposals`}</Link>
+              >{`${VEGA_DOCS_URL}/tutorials/proposals`}</ExternalLink>
            </p>
          )}
          {VEGA_EXPLORER_URL && (
            <p>
              {t('MoreProposalsInfo')}{' '}
-              <Link
-                className="underline"
-                to={`${VEGA_EXPLORER_URL}/governance`}
+              <ExternalLink
+                href={`${VEGA_EXPLORER_URL}/governance`}
                target="_blank"
-              >{`${VEGA_EXPLORER_URL}/governance`}</Link>
+              >{`${VEGA_EXPLORER_URL}/governance`}</ExternalLink>
            </p>
          )}
        </div>
--- a/apps/token/src/routes/governance/propose/raw/propose-raw.tsx
+++ b/apps/token/src/routes/governance/propose/raw/propose-raw.tsx
@ -5,9 +5,9 @@ import { Heading } from '../../../../components/heading';
 import { VegaWalletContainer } from '../../../../components/vega-wallet-container';
 import {
  AsyncRenderer,
+  ExternalLink,
  FormGroup,
  InputError,
-  Link,
  TextArea,
 } from '@vegaprotocol/ui-toolkit';
 import {
@ -87,20 +87,20 @@ export const ProposeRaw = () => {
            {VEGA_DOCS_URL && (
              <p className="text-sm" data-testid="proposal-docs-link">
                <span className="mr-1">{t('ProposalTermsText')}</span>
-                <Link
+                <ExternalLink
                  href={`${VEGA_DOCS_URL}/tutorials/proposals`}
                  target="_blank"
-                >{`${VEGA_DOCS_URL}/tutorials/proposals`}</Link>
+                >{`${VEGA_DOCS_URL}/tutorials/proposals`}</ExternalLink>
              </p>
            )}

            {VEGA_EXPLORER_URL && (
              <p className="text-sm">
                {t('MoreProposalsInfo')}{' '}
-                <Link
+                <ExternalLink
                  href={`${VEGA_EXPLORER_URL}/governance`}
                  target="_blank"
-                >{`${VEGA_EXPLORER_URL}/governance`}</Link>
+                >{`${VEGA_EXPLORER_URL}/governance`}</ExternalLink>
              </p>
            )}

--- a/apps/token/src/routes/governance/propose/update-asset/propose-update-asset.tsx
+++ b/apps/token/src/routes/governance/propose/update-asset/propose-update-asset.tsx
@ -22,7 +22,7 @@ import {
  ProposalFormVoteAndEnactmentDeadline,
 } from '../../components/propose';
 import { ProposalMinRequirements } from '../../components/shared';
-import { AsyncRenderer, Link } from '@vegaprotocol/ui-toolkit';
+import { AsyncRenderer, ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { Heading } from '../../../../components/heading';
 import { VegaWalletContainer } from '../../../../components/vega-wallet-container';
 import { ProposalUserAction } from '../../components/shared';
@ -112,20 +112,20 @@ export const ProposeUpdateAsset = () => {
            {VEGA_DOCS_URL && (
              <p className="text-sm" data-testid="proposal-docs-link">
                <span className="mr-1">{t('ProposalTermsText')}</span>
-                <Link
+                <ExternalLink
                  href={`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}
                  target="_blank"
-                >{`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}</Link>
+                >{`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}</ExternalLink>
              </p>
            )}

            {VEGA_EXPLORER_URL && (
              <p className="text-sm">
                {t('MoreAssetsInfo')}{' '}
-                <Link
+                <ExternalLink
                  href={`${VEGA_EXPLORER_URL}/assets`}
                  target="_blank"
-                >{`${VEGA_EXPLORER_URL}/assets`}</Link>
+                >{`${VEGA_EXPLORER_URL}/assets`}</ExternalLink>
              </p>
            )}

@ -160,7 +160,7 @@ export const ProposeUpdateAsset = () => {
                  })}
                  labelOverride={'Terms.updateAsset (JSON format)'}
                  errorMessage={errors?.proposalTerms?.message}
-                  customDocLink={DOCS_LINK}
+                  docsLink={DOCS_LINK}
                />

                <ProposalFormVoteAndEnactmentDeadline
--- a/apps/token/src/routes/governance/propose/update-market/propose-update-market.tsx
+++ b/apps/token/src/routes/governance/propose/update-market/propose-update-market.tsx
@ -26,11 +26,11 @@ import {
 import { ProposalMinRequirements } from '../../components/shared';
 import {
  AsyncRenderer,
+  ExternalLink,
  FormGroup,
  InputError,
  KeyValueTable,
  KeyValueTableRow,
-  Link,
  Select,
 } from '@vegaprotocol/ui-toolkit';
 import { Heading } from '../../../../components/heading';
@ -175,20 +175,20 @@ export const ProposeUpdateMarket = () => {
            {VEGA_DOCS_URL && (
              <p className="text-sm" data-testid="proposal-docs-link">
                <span className="mr-1">{t('ProposalTermsText')}</span>
-                <Link
+                <ExternalLink
                  href={`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}
                  target="_blank"
-                >{`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}</Link>
+                >{`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}</ExternalLink>
              </p>
            )}

            {VEGA_EXPLORER_URL && (
              <p className="text-sm">
                {t('MoreMarketsInfo')}{' '}
-                <Link
+                <ExternalLink
                  href={`${VEGA_EXPLORER_URL}/markets`}
                  target="_blank"
-                >{`${VEGA_EXPLORER_URL}/markets`}</Link>
+                >{`${VEGA_EXPLORER_URL}/markets`}</ExternalLink>
              </p>
            )}

@ -277,7 +277,7 @@ export const ProposeUpdateMarket = () => {
                  })}
                  labelOverride={t('ProposeUpdateMarketTerms')}
                  errorMessage={errors?.proposalTerms?.message}
-                  customDocLink={DOCS_LINK}
+                  docsLink={DOCS_LINK}
                />

                <ProposalFormVoteAndEnactmentDeadline