Referenda track filters (#8488)

packages/page-referenda/src/Referenda/Submit.tsx

@@ -196,11 +196,11 @@ function Submit ({ className = '', isMember, members, palletReferenda, tracks }:
                 onChange={setTrack}
                 options={trackOpts}
               />
-              {trackInfo?.text && (
+              {false && trackInfo?.text && (
                 <Input
                   isDisabled
                   label={t<string>('track overview')}
-                  value={trackInfo.text}
+                  value={trackInfo?.text}
                 />
               )}
               {!trackInfo?.origin && (

packages/page-referenda/src/Referenda/index.tsx

@@ -3,11 +3,11 @@
 
 import type { PalletReferenda, PalletVote, ReferendaGroup } from '../types';
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 import AddPreimage from '@polkadot/app-preimages/Preimages/Add';
-import { Button, Table } from '@polkadot/react-components';
+import { Button, Dropdown, Table } from '@polkadot/react-components';
 import { useAccounts, useApi } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
@@ -33,6 +33,28 @@ function Referenda ({ className, members, palletReferenda, palletVote }: Props):
   const { allAccounts } = useAccounts();
   const [grouped, tracks] = useReferenda(palletReferenda);
   const summary = useSummary(palletReferenda, grouped);
+  const [trackSelected, setTrackSelected] = useState(-1);
+
+  const trackOpts = useMemo(
+    () => [{ text: t<string>('All active/available tracks'), value: -1 }].concat(
+      grouped
+        .map(({ trackId, trackName }) => ({
+          text: trackName,
+          value: trackId ? trackId.toNumber() : -1
+        }))
+        .filter((v): v is { text: string, value: number } => !!v.text)
+    ),
+    [grouped, t]
+  );
+
+  const filtered = useMemo(
+    () => (
+      trackSelected === -1
+        ? grouped
+        : grouped.filter(({ trackId }) => !!trackId && trackId.eqn(trackSelected))
+    ) || [{ referenda: [] }],
+    [grouped, trackSelected]
+  );
 
   const isMember = useMemo(
     () => !members || allAccounts.some((a) => members.includes(a)),
@@ -43,6 +65,13 @@ function Referenda ({ className, members, palletReferenda, palletVote }: Props):
     <div className={className}>
       <Summary summary={summary} />
       <Button.Group>
+        <Dropdown
+          className='topDropdown'
+          label={t<string>('selected track')}
+          onChange={setTrackSelected}
+          options={trackOpts}
+          value={trackSelected}
+        />
         <AddPreimage />
         <Submit
           isMember={isMember}
@@ -51,7 +80,7 @@ function Referenda ({ className, members, palletReferenda, palletVote }: Props):
           tracks={tracks}
         />
       </Button.Group>
-      {grouped.map(({ referenda, trackId, trackName }: ReferendaGroup) => (
+      {filtered.map(({ referenda, trackId, trackName }: ReferendaGroup) => (
         <Table
           empty={referenda && t<string>('No active referenda')}
           header={[
@@ -87,4 +116,13 @@ export default React.memo(styled(Referenda)`
     padding-left: 1.5rem;
     text-overflow: ellipsis;
   }
+
+  .ui--Dropdown.topDropdown {
+    min-width: 25rem;
+    padding-left: 0;
+
+    > label {
+      left: 1.55rem !important;
+    }
+  }
 `);

packages/react-components/src/Button/Group.tsx

@@ -40,7 +40,7 @@ export default React.memo(styled(ButtonGroup)`
     display: inline-block;
   }
 
-  .ui--ToggleGroup {
+  .ui--ToggleGroup, .ui--Dropdown {
     float: left;
   }
 `);