Bounties - Add link redirecting to council/motions (#4536)

packages/page-bounties/src/BountyInfos/VotingSummary.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { DeriveCollectiveProposal } from '@polkadot/api-derive/types';
-import type { BountyStatus } from '@polkadot/types/interfaces';
 
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
@@ -11,20 +10,17 @@ import { ThemeProps } from '@polkadot/react-components/types';
 import { useMembers } from '@polkadot/react-hooks';
 
 import Description from '../Description';
-import { getProposalToDisplay } from '../helpers/extendedStatuses';
 import { bountyLabelColor } from '../theme';
 import { useTranslation } from '../translate';
 
 interface Props {
   className?: string;
-  proposals: DeriveCollectiveProposal[];
-  status: BountyStatus;
+  proposal: DeriveCollectiveProposal;
 }
 
-function VotingSummary ({ className, proposals, status }: Props): JSX.Element {
+function VotingSummary ({ className, proposal }: Props): JSX.Element {
   const { members } = useMembers();
   const { t } = useTranslation();
-  const proposal = useMemo(() => getProposalToDisplay(proposals, status), [proposals, status]);
   const ayes = useMemo(() => proposal?.votes?.ayes?.length, [proposal]);
   const nays = useMemo(() => proposal?.votes?.nays?.length, [proposal]);
   const threshold = useMemo(() => proposal?.votes?.threshold.toNumber(), [proposal]);
@@ -37,9 +33,11 @@ function VotingSummary ({ className, proposals, status }: Props): JSX.Element {
           className={className}
           data-testid='voting-summary'
         >
-          <p className='voting-summary-text'><span>{t('Aye')}</span> <b>{ayes}/{threshold}</b></p>
-          <p className='voting-summary-text'><span>{t('Nay')}</span> <b>{nays}/{nayThreshold}</b></p>
-          <Description description='Voting results' />
+          <div className='votes'>
+            <p className='voting-summary-text'><span>{t('Aye')}</span> <b>{ayes}/{threshold}</b></p>
+            <p className='voting-summary-text'><span>{t('Nay')}</span> <b>{nays}/{nayThreshold}</b></p>
+            <Description description={t<string>('Voting results')} />
+          </div>
         </div>
       )}
     </>

packages/page-bounties/src/BountyInfos/index.tsx

@@ -5,20 +5,24 @@ import type { DeriveCollectiveProposal } from '@polkadot/api-derive/types';
 import type { AccountId, BountyStatus } from '@polkadot/types/interfaces';
 
 import BN from 'bn.js';
-import React from 'react';
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
 
 import { AddressSmall } from '@polkadot/react-components';
 import { BN_HUNDRED } from '@polkadot/util';
 
 import Description from '../Description';
+import { getProposalToDisplay } from '../helpers/extendedStatuses';
 import { useBounties } from '../hooks';
 import { useTranslation } from '../translate';
+import VotingLink from '../Voting/VotingLink';
 import BountyInfo from './BountyInfo';
 import VotingSummary from './VotingSummary';
 
 interface Props {
   beneficiary?: AccountId;
   blocksUntilUpdate?: BN;
+  className?: string;
   proposals?: DeriveCollectiveProposal[];
   status: BountyStatus;
 }
@@ -26,22 +30,19 @@ interface Props {
 export const BLOCKS_PERCENTAGE_LEFT_TO_SHOW_WARNING = 10;
 const BLOCKS_LEFT_TO_SHOW_WARNING = new BN('10000');
 
-function BountyInfos ({ beneficiary, blocksUntilUpdate, proposals, status }: Props): JSX.Element {
+function BountyInfos ({ beneficiary, blocksUntilUpdate, className, proposals, status }: Props): JSX.Element {
   const { t } = useTranslation();
 
   const { bountyUpdatePeriod } = useBounties();
 
   const blocksPercentageLeftToShowWarning = bountyUpdatePeriod?.muln(BLOCKS_PERCENTAGE_LEFT_TO_SHOW_WARNING).div(BN_HUNDRED);
   const blocksToShowWarning = blocksPercentageLeftToShowWarning ?? BLOCKS_LEFT_TO_SHOW_WARNING;
+  const proposalToDisplay = useMemo(() => proposals && getProposalToDisplay(proposals, status), [proposals, status]);
 
   return (
-    <>
-      {proposals && (
-        <VotingSummary
-          proposals={proposals}
-          status={status}
-        />
-      )}
+    <div className={className}>
+      {proposalToDisplay && <VotingSummary proposal={proposalToDisplay}/>}
+      {proposalToDisplay && <VotingLink />}
       {beneficiary && (
         <div>
           <AddressSmall value={beneficiary} />
@@ -66,8 +67,12 @@ function BountyInfos ({ beneficiary, blocksUntilUpdate, proposals, status }: Pro
           type='info'
         />
       )}
-    </>
+    </div>
   );
 }
 
-export default React.memo(BountyInfos);
+export default React.memo(styled(BountyInfos)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`);

packages/page-bounties/src/Voting/VotersColumn.tsx

@@ -59,6 +59,8 @@ function VotersColumn ({ className, option, proposals, status }: Props): React.R
 }
 
 export default React.memo(styled(VotersColumn)(({ theme }: ThemeProps) => `
+  width: 50%;
+  
   .vote-numbers {
     display: flex;
     align-items: center;

packages/page-bounties/src/Voting/VotingLink.tsx

@@ -0,0 +1,27 @@
+// Copyright 2017-2021 @polkadot/app-bounties authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import styled from 'styled-components';
+
+import Description from '../Description';
+import { useTranslation } from '../translate';
+
+interface Props {
+  className?: string;
+}
+
+function VotingLink ({ className }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
+  return (
+    <div className={className}>
+      <a href='#/council/motions'>{t<string>('Voting')}</a>
+      <Description description={t<string>('Go to motions panel')} />
+    </div>
+  );
+}
+
+export default React.memo(styled(VotingLink)`
+  margin: 0 1rem 0 0
+`);

packages/page-treasury/src/Overview/Proposal.tsx

@@ -16,7 +16,6 @@ interface Props {
   className?: string;
   isMember: boolean;
   members: string[];
-  onRespond: () => void;
   proposal: DeriveTreasuryProposal;
   withSend: boolean;
 }

packages/page-treasury/src/Overview/Proposals.tsx

@@ -3,8 +3,7 @@
 
 import type { DeriveTreasuryProposal } from '@polkadot/api-derive/types';
 
-import React, { useCallback, useMemo } from 'react';
-import { useHistory } from 'react-router-dom';
+import React, { useMemo } from 'react';
 
 import { Table } from '@polkadot/react-components';
 
@@ -21,14 +20,6 @@ interface Props {
 
 function ProposalsBase ({ className = '', isApprovals, isMember, members, proposals }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const history = useHistory();
-
-  const _onRespond = useCallback(
-    (): void => {
-      history.push('/council/motions');
-    },
-    [history]
-  );
 
   const header = useMemo(() => [
     [isApprovals ? t<string>('Approved') : t<string>('Proposals'), 'start', 2],
@@ -50,7 +41,6 @@ function ProposalsBase ({ className = '', isApprovals, isMember, members, propos
           isMember={isMember}
           key={proposal.id.toString()}
           members={members}
-          onRespond={_onRespond}
           proposal={proposal}
           withSend={!isApprovals}
         />