fix(governance,environment): adjust proposal user journey (#4679)

Co-authored-by: Joe <joe@vega.xyz>

apps/governance-e2e/src/integration/view/proposal.cy.ts

@@ -37,11 +37,39 @@ context(
     });
 
     // 3002-PROP-023 3004-PMAC-002 3005-PASN-002 3006-PASC-002 3007-PNEC-002 3008-PFRO-003
-    it('should have button for link to more information on proposals', function () {
-      const proposalsUrl = 'https://docs.vega.xyz/mainnet/tutorials/proposals';
-      cy.getByTestId('new-proposal-link')
-        .find('a')
-        .should('have.attr', 'href', proposalsUrl);
+    it('new proposal page should have button for link to more information on proposals', function () {
+      cy.getByTestId('new-proposal-link').click();
+      cy.url().should('include', '/proposals/propose/raw');
+      cy.contains('To see Explorer data on proposals visit').within(() => {
+        cy.getByTestId('external-link').should(
+          'have.attr',
+          'href',
+          'https://explorer.fairground.wtf/governance'
+        );
+      });
+      cy.contains(
+        '1. Sense check your proposal with the community on the forum:'
+      ).within(() => {
+        cy.getByTestId('external-link').should(
+          'have.attr',
+          'href',
+          'https://community.vega.xyz/c/governance/25'
+        );
+      });
+      cy.contains(
+        '2. Use the appropriate proposal template in the docs:'
+      ).within(() => {
+        cy.getByTestId('external-link').should(
+          'have.attr',
+          'href',
+          'https://docs.vega.xyz/mainnet/tutorials/proposals'
+        );
+      });
+      cy.contains('Connect your wallet to submit a proposal').should(
+        'be.visible'
+      );
+      cy.getByTestId('connect-to-vega-wallet-btn').should('exist');
+      navigateTo(navigation.proposals);
     });
 
     it('should be able to see a working link for - find out more about Vega governance', function () {

apps/governance/src/i18n/translations/dev.json

@@ -708,7 +708,7 @@
   "NewAssetProposal": "New asset proposal",
   "UpdateAssetProposal": "Update asset proposal",
   "NewFreeformProposal": "New freeform proposal",
-  "NewRawProposal": "New raw proposal",
+  "NewRawProposal": "New proposal",
   "MinProposalRequirements": "You must have at least {{value}} VEGA associated to make a proposal",
   "MinProposalVoteRequirements": "You must have at least {{value}} VEGA associated to vote on this proposal",
   "totalSupply": "Total Supply",
@@ -870,5 +870,9 @@
   "Upgraded at": "Upgraded at",
   "dataIsIdentical": "Data is identical",
   "updatesToMarket": "Updates to market",
-  "viewAsParty": "View as party"
+  "viewAsParty": "View as party",
+  "HowToPropose": "How to make a proposal",
+  "HowToProposeRawStep1": "1. Sense check your proposal with the community on the forum:",
+  "HowToProposeRawStep2": "2. Use the appropriate proposal template in the docs:",
+  "HowToProposeRawStep3": "3. Submit on-chain below"
 }

apps/governance/src/routes/proposals/components/proposals-list/proposals-list.tsx

@@ -7,18 +7,13 @@ import { ProposalsListItem } from '../proposals-list-item';
 import { ProtocolUpgradeProposalsListItem } from '../protocol-upgrade-proposals-list-item/protocol-upgrade-proposals-list-item';
 import { ProposalsListFilter } from '../proposals-list-filter';
 import Routes from '../../../routes';
-import {
-  Button,
-  Toggle,
-  VegaIcon,
-  VegaIconNames,
-} from '@vegaprotocol/ui-toolkit';
+import { Button, Toggle } from '@vegaprotocol/ui-toolkit';
 import { Link } from 'react-router-dom';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
 import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
-import { DocsLinks, ExternalLinks } from '@vegaprotocol/environment';
+import { ExternalLinks } from '@vegaprotocol/environment';
 
 interface ProposalsListProps {
   proposals: Array<ProposalFieldsFragment | ProposalQuery['proposal']>;
@@ -145,18 +140,13 @@ export const ProposalsList = ({
           title={t('pageTitleProposals')}
         />
 
-        {DocsLinks && (
-          <div className="xs:justify-self-end" data-testid="new-proposal-link">
-            <ExternalLink href={DocsLinks.PROPOSALS_GUIDE}>
-              <Button variant="primary" size="sm">
-                <div className="flex items-center gap-1">
-                  {t('NewProposal')}
-                  <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} size={13} />
-                </div>
-              </Button>
-            </ExternalLink>
-          </div>
-        )}
+        <div className="xs:justify-self-end" data-testid="new-proposal-link">
+          <Link to={`${Routes.PROPOSALS}/propose/raw`}>
+            <Button variant="primary" size="sm">
+              <div className="flex items-center gap-1">{t('NewProposal')}</div>
+            </Button>
+          </Link>
+        </div>
       </div>
 
       <p className="mb-8">

apps/governance/src/routes/proposals/propose/raw/propose-raw.tsx

@@ -1,12 +1,17 @@
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { useEnvironment, DocsLinks } from '@vegaprotocol/environment';
-import { Heading } from '../../../../components/heading';
+import {
+  useEnvironment,
+  DocsLinks,
+  ExternalLinks,
+} from '@vegaprotocol/environment';
+import { Heading, SubHeading } from '../../../../components/heading';
 import {
   AsyncRenderer,
   ExternalLink,
   FormGroup,
   InputError,
+  RoundedWrapper,
   TextArea,
 } from '@vegaprotocol/ui-toolkit';
 import { validateJson } from '@vegaprotocol/utils';
@@ -79,15 +84,6 @@ export const ProposeRaw = () => {
             spamProtectionMin={params.spam_protection_proposal_min_tokens}
           />
 
-          {DocsLinks && (
-            <p className="text-sm" data-testid="proposal-docs-link">
-              <span className="mr-1">{t('ProposalTermsText')}</span>
-              <ExternalLink href={DocsLinks.PROPOSALS_GUIDE} target="_blank">
-                {DocsLinks.PROPOSALS_GUIDE}
-              </ExternalLink>
-            </p>
-          )}
-
           {VEGA_EXPLORER_URL && (
             <p className="text-sm">
               {t('MoreProposalsInfo')}{' '}
@@ -98,12 +94,44 @@ export const ProposeRaw = () => {
             </p>
           )}
 
+          <section data-testid="how-to" className="my-10">
+            <RoundedWrapper paddingBottom={true}>
+              <SubHeading title={t('HowToPropose')} />
+              <ul>
+                <li className="p-1">
+                  {t('HowToProposeRawStep1')}{' '}
+                  {ExternalLinks && (
+                    <span data-testid="proposal-docs-link">
+                      <ExternalLink
+                        href={ExternalLinks.PROPOSALS_FORUM}
+                        target="_blank"
+                      >
+                        {ExternalLinks.PROPOSALS_FORUM}
+                      </ExternalLink>
+                    </span>
+                  )}
+                </li>
+                <li className="p-1">
+                  {t('HowToProposeRawStep2')}{' '}
+                  {DocsLinks && (
+                    <span data-testid="proposal-docs-link">
+                      <ExternalLink
+                        href={DocsLinks.PROPOSALS_GUIDE}
+                        target="_blank"
+                      >
+                        {DocsLinks.PROPOSALS_GUIDE}
+                      </ExternalLink>
+                    </span>
+                  )}
+                </li>
+                <li className="p-1">{t('HowToProposeRawStep3')}</li>
+              </ul>
+            </RoundedWrapper>
+          </section>
+
           <div data-testid="raw-proposal-form">
             <form onSubmit={handleSubmit(onSubmit)}>
-              <FormGroup
-                label="Make a proposal by submitting JSON"
-                labelFor="proposal-data"
-              >
+              <FormGroup label="Valid JSON required" labelFor="proposal-data">
                 <TextArea
                   id="proposal-data"
                   className="min-h-[200px]"

libs/environment/src/hooks/use-links.ts

@@ -159,6 +159,7 @@ export const ExternalLinks = {
   DISCORD: 'https://vega.xyz/discord',
   GOVERNANCE_PAGE: 'https://vega.xyz/governance',
   VALIDATOR_FORUM: 'https://community.vega.xyz/c/mainnet-validator-candidates',
+  PROPOSALS_FORUM: 'https://community.vega.xyz/c/governance/25',
   MARGIN_CREDIT_RISK:
     'https://vega.xyz/papers/margins-and-credit-risk.pdf#page=7',
   VEGA_WALLET_URL: 'https://vega.xyz/wallet',