Expand Treasury inline in council proposals (#2588)

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 0.42.0-beta.x
+
+- Expand Treasury proposal inline in council (for approve/reject)
+
 # 0.41.1 Apr 20, 2020
 
 - Fix for searching child identities on parent name (Thanks to https://github.com/krogla)

packages/page-democracy/src/Overview/ProposalCell.tsx

@@ -2,13 +2,15 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { Hash, Proposal } from '@polkadot/types/interfaces';
+import { Hash, Proposal, ProposalIndex } from '@polkadot/types/interfaces';
 
 import React from 'react';
 import { registry } from '@polkadot/react-api';
 import { Call, Expander } from '@polkadot/react-components';
+import { Compact } from '@polkadot/types';
 
 import { useTranslation } from '../translate';
+import TreasuryCell from './TreasuryCell';
 
 interface Props {
   className?: string;
@@ -29,6 +31,7 @@ function ProposalCell ({ className, imageHash, proposal }: Props): React.ReactEl
   }
 
   const { meta, method, section } = registry.findMetaCall(proposal.callIndex);
+  const isTreasury = section === 'treasury' && ['approveProposal', 'rejectProposal'].includes(method);
 
   return (
     <td className={`${className} all`}>
@@ -37,8 +40,11 @@ function ProposalCell ({ className, imageHash, proposal }: Props): React.ReactEl
         <Call
           labelHash={t('proposal hash')}
           value={proposal}
-          withHash
+          withHash={!isTreasury}
         />
+        {isTreasury && (
+          <TreasuryCell value={proposal.args[0] as Compact<ProposalIndex>} />
+        )}
       </Expander>
     </td>
   );

packages/page-democracy/src/Overview/TreasuryCell.tsx

@@ -0,0 +1,64 @@
+// Copyright 2017-2020 @polkadot/app-democracy authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { ProposalIndex, TreasuryProposal } from '@polkadot/types/interfaces';
+import { TypeDef } from '@polkadot/types/types';
+
+import React, { useEffect, useState } from 'react';
+import { useApi, useCall } from '@polkadot/react-hooks';
+import Params from '@polkadot/react-params';
+import { Compact, Option, getTypeDef } from '@polkadot/types';
+
+interface Props {
+  className?: string;
+  value: Compact<ProposalIndex>;
+}
+
+interface Param {
+  name: string;
+  type: TypeDef;
+}
+
+interface Value {
+  isValid: boolean;
+  value: TreasuryProposal;
+}
+
+function TreasuryCell ({ className, value }: Props): React.ReactElement<Props> | null {
+  const { api } = useApi();
+  const [proposalId] = useState(value.unwrap());
+  const proposal = useCall<TreasuryProposal | null>(api.query.treasury.proposals, [proposalId], {
+    transform: (optProp: Option<TreasuryProposal>) => optProp.unwrapOr(null)
+  });
+  const [{ params, values }, setExtracted] = useState<{ params: Param[]; values: Value[] }>({ params: [], values: [] });
+
+  useEffect((): void => {
+    proposal && setExtracted({
+      params: [{
+        name: 'proposal',
+        type: getTypeDef('TreasuryProposal')
+      }],
+      values: [{
+        isValid: true,
+        value: proposal
+      }]
+    });
+  }, [proposal]);
+
+  if (!proposal) {
+    return null;
+  }
+
+  return (
+    <div className={className}>
+      <Params
+        isDisabled
+        params={params}
+        values={values}
+      />
+    </div>
+  );
+}
+
+export default React.memo(TreasuryCell);

packages/react-params/src/index.tsx

@@ -15,6 +15,7 @@ import translate from './translate';
 import { createValue } from './values';
 
 interface Props extends I18nProps {
+  children?: React.ReactNode;
   isDisabled?: boolean;
   onChange?: (value: RawParams) => void;
   onEnter?: () => void;
@@ -74,7 +75,7 @@ class Params extends React.PureComponent<Props, State> {
   }
 
   public render (): React.ReactNode {
-    const { className, isDisabled, onEnter, onEscape, overrides, params, style, withBorder = true } = this.props;
+    const { children, className, isDisabled, onEnter, onEscape, overrides, params, style, withBorder = true } = this.props;
     const { values = this.props.values } = this.state;
 
     if (!values || !values.length) {
@@ -103,6 +104,7 @@ class Params extends React.PureComponent<Props, State> {
               />
             ))}
           </div>
+          {children}
         </ErrorBoundary>
       </div>
     );