Allow close select with multi members (#3764)

packages/page-council/src/Motions/Close.tsx

@@ -0,0 +1,91 @@
+// Copyright 2017-2020 @polkadot/app-council authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { Hash, Proposal, ProposalIndex } from '@polkadot/types/interfaces';
+
+import React, { useState } from 'react';
+import { Button, InputAddress, Modal, ProposedAction, TxButton } from '@polkadot/react-components';
+import { useApi, useToggle, useWeight } from '@polkadot/react-hooks';
+
+import { useTranslation } from '../translate';
+
+interface Props {
+  hasFailed: boolean;
+  hash: Hash;
+  idNumber: ProposalIndex;
+  members: string[];
+  proposal: Proposal;
+}
+
+function Close ({ hasFailed, hash, idNumber, members, proposal }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
+  const { api } = useApi();
+  const [isOpen, toggleOpen] = useToggle();
+  const [accountId, setAccountId] = useState<string | null>(null);
+  const [proposalWeight, proposalLength] = useWeight(proposal);
+
+  // protect against older versions
+  if (!api.tx.council.close) {
+    return null;
+  }
+
+  return (
+    <>
+      {isOpen && (
+        <Modal
+          header={t<string>('Close proposal')}
+          size='large'
+        >
+          <Modal.Content>
+            <Modal.Columns>
+              <Modal.Column>
+                <ProposedAction
+                  idNumber={idNumber}
+                  proposal={proposal}
+                />
+              </Modal.Column>
+              <Modal.Column>
+                <p>{t<string>('The proposal that will be affected. Once closed for the current voting round, it would need to be re-submitted to council for a subsequent voting round.')}</p>
+              </Modal.Column>
+            </Modal.Columns>
+            <Modal.Columns>
+              <Modal.Column>
+                <InputAddress
+                  filter={members}
+                  help={t<string>('Select the account you wish close the proposal with.')}
+                  label={t<string>('sending account')}
+                  onChange={setAccountId}
+                  type='account'
+                />
+              </Modal.Column>
+              <Modal.Column>
+                <p>{t<string>('The council account that will apply the close for the current round.')}</p>
+              </Modal.Column>
+            </Modal.Columns>
+          </Modal.Content>
+          <Modal.Actions onCancel={toggleOpen}>
+            <TxButton
+              accountId={accountId}
+              onStart={toggleOpen}
+              params={
+                api.tx.council.close.meta.args.length === 4
+                  ? hasFailed
+                    ? [hash, idNumber, 0, 0]
+                    : [hash, idNumber, proposalWeight, proposalLength]
+                  : [hash, idNumber]
+              }
+              tx='council.close'
+            />
+          </Modal.Actions>
+        </Modal>
+      )}
+      <Button
+        icon='times'
+        label={t<string>('Close')}
+        onClick={toggleOpen}
+      />
+    </>
+  );
+}
+
+export default React.memo(Close);

packages/page-council/src/Motions/Motion.tsx

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/app-democracy authors & contributors
+// Copyright 2017-2020 @polkadot/app-council authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
 import { AccountId } from '@polkadot/types/interfaces';
@@ -12,6 +12,7 @@ import { BlockToTime } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
+import Close from './Close';
 import Voters from './Voters';
 import Voting from './Voting';
 
@@ -35,8 +36,12 @@ function Motion ({ className = '', isMember, members, motion: { hash, proposal,
   const { hasFailed, isCloseable, isVoteable, remainingBlocks } = useVotingStatus(votes, members.length, 'council');
   const [proposalWeight, proposalLength] = useWeight(proposal);
 
-  const councilId = useMemo(
-    () => allAccounts.find((accountId) => members.includes(accountId)) || null,
+  const [councilId, isMultiMembers] = useMemo(
+    (): [string | null, boolean] => {
+      const councilIds = allAccounts.filter((accountId) => members.includes(accountId));
+
+      return [councilIds[0] || null, councilIds.length > 1];
+    },
     [allAccounts, members]
   );
 
@@ -105,19 +110,31 @@ function Motion ({ className = '', isMember, members, motion: { hash, proposal,
           />
         )}
         {isCloseable && (
-          <TxButton
-            accountId={councilId}
-            icon='times'
-            label={t<string>('Close')}
-            params={
-              api.tx.council.close?.meta.args.length === 4
-                ? hasFailed
-                  ? [hash, index, 0, 0]
-                  : [hash, index, proposalWeight, proposalLength]
-                : [hash, index]
-            }
-            tx='council.close'
-          />
+          isMultiMembers
+            ? (
+              <Close
+                hasFailed={hasFailed}
+                hash={hash}
+                idNumber={index}
+                members={members}
+                proposal={proposal}
+              />
+            )
+            : (
+              <TxButton
+                accountId={councilId}
+                icon='times'
+                label={t<string>('Close')}
+                params={
+                  api.tx.council.close?.meta.args.length === 4
+                    ? hasFailed
+                      ? [hash, index, 0, 0]
+                      : [hash, index, proposalWeight, proposalLength]
+                    : [hash, index]
+                }
+                tx='council.close'
+              />
+            )
         )}
       </td>
       <td className='badge'>

packages/page-council/src/Motions/index.tsx

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/app-democracy authors & contributors
+// Copyright 2017-2020 @polkadot/app-council authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
 import { DeriveCollectiveProposals, DeriveCollectiveProposal } from '@polkadot/api-derive/types';

packages/page-tech-comm/src/Proposals/Close.tsx

@@ -0,0 +1,90 @@
+// Copyright 2017-2020 @polkadot/app-tech-comm authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { Hash, Proposal, ProposalIndex } from '@polkadot/types/interfaces';
+
+import React, { useState } from 'react';
+import { Button, InputAddress, Modal, ProposedAction, TxButton } from '@polkadot/react-components';
+import { useApi, useToggle, useWeight } from '@polkadot/react-hooks';
+
+import { useTranslation } from '../translate';
+
+interface Props {
+  hasFailed: boolean;
+  hash: Hash;
+  idNumber: ProposalIndex;
+  members: string[];
+  proposal: Proposal;
+}
+
+function Close ({ hasFailed, hash, idNumber, members, proposal }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
+  const { api } = useApi();
+  const [isOpen, toggleOpen] = useToggle();
+  const [accountId, setAccountId] = useState<string | null>(null);
+  const [proposalWeight, proposalLength] = useWeight(proposal);
+
+  if (!api.tx.technicalCommittee.close) {
+    return null;
+  }
+
+  return (
+    <>
+      {isOpen && (
+        <Modal
+          header={t<string>('Close proposal')}
+          size='large'
+        >
+          <Modal.Content>
+            <Modal.Columns>
+              <Modal.Column>
+                <ProposedAction
+                  idNumber={idNumber}
+                  proposal={proposal}
+                />
+              </Modal.Column>
+              <Modal.Column>
+                <p>{t<string>('The proposal that will be affected. Once closed for the current voting round, it would need to be re-submitted for a subsequent voting round.')}</p>
+              </Modal.Column>
+            </Modal.Columns>
+            <Modal.Columns>
+              <Modal.Column>
+                <InputAddress
+                  filter={members}
+                  help={t<string>('Select the account you wish close the proposal with.')}
+                  label={t<string>('sending account')}
+                  onChange={setAccountId}
+                  type='account'
+                />
+              </Modal.Column>
+              <Modal.Column>
+                <p>{t<string>('The committee account that will apply the close for the current round.')}</p>
+              </Modal.Column>
+            </Modal.Columns>
+          </Modal.Content>
+          <Modal.Actions onCancel={toggleOpen}>
+            <TxButton
+              accountId={accountId}
+              onStart={toggleOpen}
+              params={
+                api.tx.technicalCommittee.close.meta.args.length === 4
+                  ? hasFailed
+                    ? [hash, idNumber, 0, 0]
+                    : [hash, idNumber, proposalWeight, proposalLength]
+                  : [hash, idNumber]
+              }
+              tx='technicalCommittee.close'
+            />
+          </Modal.Actions>
+        </Modal>
+      )}
+      <Button
+        icon='times'
+        label={t<string>('Close')}
+        onClick={toggleOpen}
+      />
+    </>
+  );
+}
+
+export default React.memo(Close);

packages/page-tech-comm/src/Proposals/Proposal.tsx

@@ -12,6 +12,7 @@ import { Option } from '@polkadot/types';
 import { formatNumber } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
+import Close from './Close';
 import Voting from './Voting';
 
 interface Props {
@@ -39,8 +40,12 @@ function Proposal ({ className = '', imageHash, members, prime }: Props): React.
   const { hasFailed, isCloseable, isVoteable, remainingBlocks } = useVotingStatus(votes, members.length, 'technicalCommittee');
   const [proposalWeight, proposalLength] = useWeight(proposal);
 
-  const councilId = useMemo(
-    () => allAccounts.find((accountId) => members.includes(accountId)) || null,
+  const [councilId, isMultiMembers] = useMemo(
+    (): [string | null, boolean] => {
+      const councilIds = allAccounts.filter((accountId) => members.includes(accountId));
+
+      return [councilIds[0] || null, councilIds.length > 1];
+    },
     [allAccounts, members]
   );
 
@@ -96,19 +101,31 @@ function Proposal ({ className = '', imageHash, members, prime }: Props): React.
           />
         )}
         {isCloseable && (
-          <TxButton
-            accountId={councilId}
-            icon='times'
-            label={t<string>('Close')}
-            params={
-              api.tx.technicalCommittee.close?.meta.args.length === 4
-                ? hasFailed
-                  ? [imageHash, index, 0, 0]
-                  : [imageHash, index, proposalWeight, proposalLength]
-                : [imageHash, index]
-            }
-            tx='technicalCommittee.close'
-          />
+          isMultiMembers
+            ? (
+              <Close
+                hasFailed={hasFailed}
+                hash={imageHash}
+                idNumber={index}
+                members={members}
+                proposal={proposal}
+              />
+            )
+            : (
+              <TxButton
+                accountId={councilId}
+                icon='times'
+                label={t<string>('Close')}
+                params={
+                  api.tx.technicalCommittee.close?.meta.args.length === 4
+                    ? hasFailed
+                      ? [imageHash, index, 0, 0]
+                      : [imageHash, index, proposalWeight, proposalLength]
+                    : [imageHash, index]
+                }
+                tx='technicalCommittee.close'
+              />
+            )
         )}
       </td>
     </tr>