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
This commit is contained in:
Sam Keen 2022-11-07 15:40:08 +00:00 committed by GitHub
parent 5a764d190f
commit e5432888aa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 55 additions and 63 deletions

View File

@ -28,20 +28,13 @@ describe('Proposal Form Terms', () => {
expect(screen.getByText('Error text')).toBeInTheDocument(); expect(screen.getByText('Error text')).toBeInTheDocument();
}); });
it('should render the generic docs link if no custom override', () => { it('should render the docs link', () => {
renderComponent();
expect(
screen.getByText('https://docs.vega.xyz/tutorials/proposals')
).toBeInTheDocument();
});
it('should render the custom docs link if provided', () => {
const register = jest.fn(); const register = jest.fn();
render( render(
<ProposalFormTerms <ProposalFormTerms
registerField={register('proposalTerms')} registerField={register('proposalTerms')}
errorMessage="Error text" errorMessage="Error text"
customDocLink="/custom" docsLink="/custom"
/> />
); );
expect( expect(

View File

@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
import { import {
FormGroup, FormGroup,
InputError, InputError,
Link, ExternalLink,
TextArea, TextArea,
} from '@vegaprotocol/ui-toolkit'; } from '@vegaprotocol/ui-toolkit';
import { useEnvironment } from '@vegaprotocol/environment'; import { useEnvironment } from '@vegaprotocol/environment';
@ -12,14 +12,14 @@ interface ProposalFormTermsProps {
registerField: UseFormRegisterReturn<'proposalTerms'>; registerField: UseFormRegisterReturn<'proposalTerms'>;
errorMessage: string | undefined; errorMessage: string | undefined;
labelOverride?: string; labelOverride?: string;
customDocLink?: string; docsLink?: string;
} }
export const ProposalFormTerms = ({ export const ProposalFormTerms = ({
registerField: register, registerField: register,
errorMessage, errorMessage,
labelOverride, labelOverride,
customDocLink, docsLink,
}: ProposalFormTermsProps) => { }: ProposalFormTermsProps) => {
const { VEGA_DOCS_URL } = useEnvironment(); const { VEGA_DOCS_URL } = useEnvironment();
const { t } = useTranslation(); const { t } = useTranslation();
@ -28,13 +28,13 @@ export const ProposalFormTerms = ({
label={labelOverride || t('ProposalTerms')} label={labelOverride || t('ProposalTerms')}
labelFor="proposal-terms" labelFor="proposal-terms"
> >
{VEGA_DOCS_URL && ( {docsLink && VEGA_DOCS_URL && (
<div className="mt-[-4px] mb-2 text-sm font-light"> <div className="mt-[-4px] mb-2 text-sm font-light">
<span className="mr-1">{t('ProposalTermsText')}</span> <span className="mr-1">{t('ProposalTermsText')}</span>
<Link <ExternalLink
href={`${VEGA_DOCS_URL}/tutorials/proposals${customDocLink || ''}`} href={`${VEGA_DOCS_URL}/tutorials/proposals${docsLink}`}
target="_blank" target="_blank"
>{`${VEGA_DOCS_URL}/tutorials/proposals${customDocLink || ''}`}</Link> >{`${VEGA_DOCS_URL}/tutorials/proposals${docsLink}`}</ExternalLink>
</div> </div>
)} )}

View File

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

View File

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

View File

@ -23,7 +23,7 @@ import {
ProposalFormVoteAndEnactmentDeadline, ProposalFormVoteAndEnactmentDeadline,
} from '../../components/propose'; } from '../../components/propose';
import { ProposalMinRequirements } from '../../components/shared'; 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 { Heading } from '../../../../components/heading';
import { VegaWalletContainer } from '../../../../components/vega-wallet-container'; import { VegaWalletContainer } from '../../../../components/vega-wallet-container';
import { ProposalUserAction } from '../../components/shared'; import { ProposalUserAction } from '../../components/shared';
@ -117,20 +117,20 @@ export const ProposeNewAsset = () => {
{VEGA_DOCS_URL && ( {VEGA_DOCS_URL && (
<p className="text-sm" data-testid="proposal-docs-link"> <p className="text-sm" data-testid="proposal-docs-link">
<span className="mr-1">{t('ProposalTermsText')}</span> <span className="mr-1">{t('ProposalTermsText')}</span>
<Link <ExternalLink
href={`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`} href={`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}
target="_blank" target="_blank"
>{`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}</Link> >{`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}</ExternalLink>
</p> </p>
)} )}
{VEGA_EXPLORER_URL && ( {VEGA_EXPLORER_URL && (
<p className="text-sm"> <p className="text-sm">
{t('MoreAssetsInfo')}{' '} {t('MoreAssetsInfo')}{' '}
<Link <ExternalLink
href={`${VEGA_EXPLORER_URL}/assets`} href={`${VEGA_EXPLORER_URL}/assets`}
target="_blank" target="_blank"
>{`${VEGA_EXPLORER_URL}/assets`}</Link> >{`${VEGA_EXPLORER_URL}/assets`}</ExternalLink>
</p> </p>
)} )}
@ -163,7 +163,7 @@ export const ProposeNewAsset = () => {
})} })}
labelOverride={'Terms.newAsset (JSON format)'} labelOverride={'Terms.newAsset (JSON format)'}
errorMessage={errors?.proposalTerms?.message} errorMessage={errors?.proposalTerms?.message}
customDocLink={DOCS_LINK} docsLink={DOCS_LINK}
/> />
<ProposalFormVoteAndEnactmentDeadline <ProposalFormVoteAndEnactmentDeadline

View File

@ -22,7 +22,7 @@ import {
ProposalFormVoteAndEnactmentDeadline, ProposalFormVoteAndEnactmentDeadline,
} from '../../components/propose'; } from '../../components/propose';
import { ProposalMinRequirements } from '../../components/shared'; 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 { Heading } from '../../../../components/heading';
import { VegaWalletContainer } from '../../../../components/vega-wallet-container'; import { VegaWalletContainer } from '../../../../components/vega-wallet-container';
import { ProposalUserAction } from '../../components/shared'; import { ProposalUserAction } from '../../components/shared';
@ -112,20 +112,20 @@ export const ProposeNewMarket = () => {
{VEGA_DOCS_URL && ( {VEGA_DOCS_URL && (
<p className="text-sm" data-testid="proposal-docs-link"> <p className="text-sm" data-testid="proposal-docs-link">
<span className="mr-1">{t('ProposalTermsText')}</span> <span className="mr-1">{t('ProposalTermsText')}</span>
<Link <ExternalLink
href={`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`} href={`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}
target="_blank" target="_blank"
>{`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}</Link> >{`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}</ExternalLink>
</p> </p>
)} )}
{VEGA_EXPLORER_URL && ( {VEGA_EXPLORER_URL && (
<p className="text-sm"> <p className="text-sm">
{t('MoreMarketsInfo')}{' '} {t('MoreMarketsInfo')}{' '}
<Link <ExternalLink
href={`${VEGA_EXPLORER_URL}/markets`} href={`${VEGA_EXPLORER_URL}/markets`}
target="_blank" target="_blank"
>{`${VEGA_EXPLORER_URL}/markets`}</Link> >{`${VEGA_EXPLORER_URL}/markets`}</ExternalLink>
</p> </p>
)} )}
@ -158,7 +158,7 @@ export const ProposeNewMarket = () => {
})} })}
labelOverride={'Terms.newMarket (JSON format)'} labelOverride={'Terms.newMarket (JSON format)'}
errorMessage={errors?.proposalTerms?.message} errorMessage={errors?.proposalTerms?.message}
customDocLink={DOCS_LINK} docsLink={DOCS_LINK}
/> />
<ProposalFormVoteAndEnactmentDeadline <ProposalFormVoteAndEnactmentDeadline

View File

@ -1,6 +1,7 @@
import Routes from '../../routes'; import Routes from '../../routes';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { ExternalLink } from '@vegaprotocol/ui-toolkit';
import { useEnvironment } from '@vegaprotocol/environment'; import { useEnvironment } from '@vegaprotocol/environment';
import { Heading } from '../../../components/heading'; import { Heading } from '../../../components/heading';
@ -16,21 +17,19 @@ export const Propose = () => {
{VEGA_DOCS_URL && ( {VEGA_DOCS_URL && (
<p> <p>
<span className="mr-1">{t('ProposalTermsText')}</span> <span className="mr-1">{t('ProposalTermsText')}</span>
<Link <ExternalLink
className="underline" href={`${VEGA_DOCS_URL}/tutorials/proposals`}
to={`${VEGA_DOCS_URL}/tutorials/proposals`}
target="_blank" target="_blank"
>{`${VEGA_DOCS_URL}/tutorials/proposals`}</Link> >{`${VEGA_DOCS_URL}/tutorials/proposals`}</ExternalLink>
</p> </p>
)} )}
{VEGA_EXPLORER_URL && ( {VEGA_EXPLORER_URL && (
<p> <p>
{t('MoreProposalsInfo')}{' '} {t('MoreProposalsInfo')}{' '}
<Link <ExternalLink
className="underline" href={`${VEGA_EXPLORER_URL}/governance`}
to={`${VEGA_EXPLORER_URL}/governance`}
target="_blank" target="_blank"
>{`${VEGA_EXPLORER_URL}/governance`}</Link> >{`${VEGA_EXPLORER_URL}/governance`}</ExternalLink>
</p> </p>
)} )}
</div> </div>

View File

@ -5,9 +5,9 @@ import { Heading } from '../../../../components/heading';
import { VegaWalletContainer } from '../../../../components/vega-wallet-container'; import { VegaWalletContainer } from '../../../../components/vega-wallet-container';
import { import {
AsyncRenderer, AsyncRenderer,
ExternalLink,
FormGroup, FormGroup,
InputError, InputError,
Link,
TextArea, TextArea,
} from '@vegaprotocol/ui-toolkit'; } from '@vegaprotocol/ui-toolkit';
import { import {
@ -87,20 +87,20 @@ export const ProposeRaw = () => {
{VEGA_DOCS_URL && ( {VEGA_DOCS_URL && (
<p className="text-sm" data-testid="proposal-docs-link"> <p className="text-sm" data-testid="proposal-docs-link">
<span className="mr-1">{t('ProposalTermsText')}</span> <span className="mr-1">{t('ProposalTermsText')}</span>
<Link <ExternalLink
href={`${VEGA_DOCS_URL}/tutorials/proposals`} href={`${VEGA_DOCS_URL}/tutorials/proposals`}
target="_blank" target="_blank"
>{`${VEGA_DOCS_URL}/tutorials/proposals`}</Link> >{`${VEGA_DOCS_URL}/tutorials/proposals`}</ExternalLink>
</p> </p>
)} )}
{VEGA_EXPLORER_URL && ( {VEGA_EXPLORER_URL && (
<p className="text-sm"> <p className="text-sm">
{t('MoreProposalsInfo')}{' '} {t('MoreProposalsInfo')}{' '}
<Link <ExternalLink
href={`${VEGA_EXPLORER_URL}/governance`} href={`${VEGA_EXPLORER_URL}/governance`}
target="_blank" target="_blank"
>{`${VEGA_EXPLORER_URL}/governance`}</Link> >{`${VEGA_EXPLORER_URL}/governance`}</ExternalLink>
</p> </p>
)} )}

View File

@ -22,7 +22,7 @@ import {
ProposalFormVoteAndEnactmentDeadline, ProposalFormVoteAndEnactmentDeadline,
} from '../../components/propose'; } from '../../components/propose';
import { ProposalMinRequirements } from '../../components/shared'; 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 { Heading } from '../../../../components/heading';
import { VegaWalletContainer } from '../../../../components/vega-wallet-container'; import { VegaWalletContainer } from '../../../../components/vega-wallet-container';
import { ProposalUserAction } from '../../components/shared'; import { ProposalUserAction } from '../../components/shared';
@ -112,20 +112,20 @@ export const ProposeUpdateAsset = () => {
{VEGA_DOCS_URL && ( {VEGA_DOCS_URL && (
<p className="text-sm" data-testid="proposal-docs-link"> <p className="text-sm" data-testid="proposal-docs-link">
<span className="mr-1">{t('ProposalTermsText')}</span> <span className="mr-1">{t('ProposalTermsText')}</span>
<Link <ExternalLink
href={`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`} href={`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}
target="_blank" target="_blank"
>{`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}</Link> >{`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}</ExternalLink>
</p> </p>
)} )}
{VEGA_EXPLORER_URL && ( {VEGA_EXPLORER_URL && (
<p className="text-sm"> <p className="text-sm">
{t('MoreAssetsInfo')}{' '} {t('MoreAssetsInfo')}{' '}
<Link <ExternalLink
href={`${VEGA_EXPLORER_URL}/assets`} href={`${VEGA_EXPLORER_URL}/assets`}
target="_blank" target="_blank"
>{`${VEGA_EXPLORER_URL}/assets`}</Link> >{`${VEGA_EXPLORER_URL}/assets`}</ExternalLink>
</p> </p>
)} )}
@ -160,7 +160,7 @@ export const ProposeUpdateAsset = () => {
})} })}
labelOverride={'Terms.updateAsset (JSON format)'} labelOverride={'Terms.updateAsset (JSON format)'}
errorMessage={errors?.proposalTerms?.message} errorMessage={errors?.proposalTerms?.message}
customDocLink={DOCS_LINK} docsLink={DOCS_LINK}
/> />
<ProposalFormVoteAndEnactmentDeadline <ProposalFormVoteAndEnactmentDeadline

View File

@ -26,11 +26,11 @@ import {
import { ProposalMinRequirements } from '../../components/shared'; import { ProposalMinRequirements } from '../../components/shared';
import { import {
AsyncRenderer, AsyncRenderer,
ExternalLink,
FormGroup, FormGroup,
InputError, InputError,
KeyValueTable, KeyValueTable,
KeyValueTableRow, KeyValueTableRow,
Link,
Select, Select,
} from '@vegaprotocol/ui-toolkit'; } from '@vegaprotocol/ui-toolkit';
import { Heading } from '../../../../components/heading'; import { Heading } from '../../../../components/heading';
@ -175,20 +175,20 @@ export const ProposeUpdateMarket = () => {
{VEGA_DOCS_URL && ( {VEGA_DOCS_URL && (
<p className="text-sm" data-testid="proposal-docs-link"> <p className="text-sm" data-testid="proposal-docs-link">
<span className="mr-1">{t('ProposalTermsText')}</span> <span className="mr-1">{t('ProposalTermsText')}</span>
<Link <ExternalLink
href={`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`} href={`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}
target="_blank" target="_blank"
>{`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}</Link> >{`${VEGA_DOCS_URL}/tutorials/proposals${DOCS_LINK}`}</ExternalLink>
</p> </p>
)} )}
{VEGA_EXPLORER_URL && ( {VEGA_EXPLORER_URL && (
<p className="text-sm"> <p className="text-sm">
{t('MoreMarketsInfo')}{' '} {t('MoreMarketsInfo')}{' '}
<Link <ExternalLink
href={`${VEGA_EXPLORER_URL}/markets`} href={`${VEGA_EXPLORER_URL}/markets`}
target="_blank" target="_blank"
>{`${VEGA_EXPLORER_URL}/markets`}</Link> >{`${VEGA_EXPLORER_URL}/markets`}</ExternalLink>
</p> </p>
)} )}
@ -277,7 +277,7 @@ export const ProposeUpdateMarket = () => {
})} })}
labelOverride={t('ProposeUpdateMarketTerms')} labelOverride={t('ProposeUpdateMarketTerms')}
errorMessage={errors?.proposalTerms?.message} errorMessage={errors?.proposalTerms?.message}
customDocLink={DOCS_LINK} docsLink={DOCS_LINK}
/> />
<ProposalFormVoteAndEnactmentDeadline <ProposalFormVoteAndEnactmentDeadline