Move external links to referendum expansion (#8671)

* Move external links to referendum expansion

* Additional ref info

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

@@ -45,7 +45,7 @@ function Group ({ activeIssuance, className, isMember, members, palletReferenda,
       ),
       isExpanded && trackInfo && (
         <tr>
-          <th colSpan={9}>Hello expanded</th>
+          <th colSpan={9} />
         </tr>
       )
     ],
@@ -56,8 +56,8 @@ function Group ({ activeIssuance, className, isMember, members, palletReferenda,
     () => [
       [
         [trackName ? <>{trackName}<div className='sub'>{trackInfo?.text}</div></> : t('referenda'), 'start', 5],
-        [undefined, 'number', 3],
-        [headerButton]
+        [undefined, 'number', 2],
+        [headerButton, 'media--1000']
       ],
       trackName
         ? `track:${trackName}`

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

@@ -126,6 +126,7 @@ function Ongoing ({ isMember, members, palletReferenda, palletVote, ranks, track
       />
       <td className='middle chart'>
         <Progress
+          className='media--1300'
           total={tallyTotal}
           value={tally.ayes}
         />

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

@@ -302,6 +302,27 @@ function getChartProps (bestNumber: BN, blockInterval: BN, chartProps: ChartResu
   });
 }
 
+function extractInfo (info: PalletReferendaReferendumInfoConvictionVotingTally | PalletReferendaReferendumInfoRankedCollectiveTally): { enactAt: { at: boolean, blocks: BN } | null, nextAlarm: null | BN, submittedIn: null | BN } {
+  let enactAt: { at: boolean, blocks: BN } | null = null;
+  let nextAlarm: BN | null = null;
+  let submittedIn: BN | null = null;
+
+  if (info.isOngoing) {
+    const { alarm, enactment, submitted } = info.asOngoing;
+
+    enactAt = {
+      at: enactment.isAt,
+      blocks: enactment.isAt
+        ? enactment.asAt
+        : enactment.asAfter
+    };
+    nextAlarm = alarm.unwrapOr([null])[0];
+    submittedIn = submitted;
+  }
+
+  return { enactAt, nextAlarm, submittedIn };
+}
+
 function Referendum (props: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const bestNumber = useBestNumber();
@@ -326,6 +347,11 @@ function Referendum (props: Props): React.ReactElement<Props> {
     [bestNumber, blockInterval, chartResult, id, isExpanded, t, track]
   );
 
+  const { enactAt, nextAlarm, submittedIn } = useMemo(
+    () => extractInfo(info),
+    [info]
+  );
+
   const chartLegend = useMemo(
     () => [
       [
@@ -344,29 +370,25 @@ function Referendum (props: Props): React.ReactElement<Props> {
 
   return (
     <>
-      <tr className={`${className}${chartProps && isExpanded ? ' noBorder' : ''}`}>
+      <tr className={`${className}${isExpanded ? ' noBorder' : ''}`}>
         <td className='number'>
           <h1>{formatNumber(id)}</h1>
         </td>
         <Component {...props} />
-        <td className='links media--1000'>
-          <LinkExternal
-            data={id}
-            type={palletReferenda}
+        <td className='action media--1000'>
+          <ExpandButton
+            expanded={isExpanded}
+            onClick={toggleExpanded}
           />
         </td>
-        <td className='links media--1000'>
-          {chartResult && (
-            <ExpandButton
-              expanded={isExpanded}
-              onClick={toggleExpanded}
-            />
-          )}
-        </td>
       </tr>
-      <tr className={`${className} ${chartProps && isExpanded ? 'isExpanded' : 'isCollapsed'}`}>
-        {chartProps && isExpanded && (
-          <td colSpan={10}>
+      <tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'}`}>
+        <td />
+        <td
+          className='columar'
+          colSpan={7}
+        >
+          {chartProps && (
             <Columar>
               <Columar.Column className='chartColumn'>
                 <h1>{t<string>('approval / {{percent}}%', { replace: { percent: chartProps[0].progress.percent.toFixed(1) } })}</h1>
@@ -383,8 +405,37 @@ function Referendum (props: Props): React.ReactElement<Props> {
                 />
               </Columar.Column>
             </Columar>
-          </td>
-        )}
+          )}
+          <Columar size='tiny'>
+            <Columar.Column>
+              <LinkExternal
+                data={id}
+                type={palletReferenda}
+                withTitle
+              />
+            </Columar.Column>
+            <Columar.Column>
+              {submittedIn && (
+                <>
+                  <h5>{t<string>('Submitted at')}</h5>
+                  <label>#{formatNumber(submittedIn)}</label>
+                </>
+              )}
+              {enactAt && (
+                <>
+                  <h5>{enactAt.at ? t<string>('Enact at') : t<string>('Enact after')}</h5>
+                  <label>{enactAt.at && '#'}{formatNumber(enactAt.blocks)}</label>
+                </>
+              )}
+              {nextAlarm && (
+                <>
+                  <h5>{t<string>('Next alarm')}</h5>
+                  <label>#{formatNumber(nextAlarm)}</label>
+                </>
+              )}
+            </Columar.Column>
+          </Columar>
+        </td>
       </tr>
     </>
   );

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

@@ -76,6 +76,7 @@ function Votes ({ className = '', id, isConvictionVote, palletVote, tally }: Pro
   return (
     <td className={`${className} expand`}>
       <Expander
+        className='media--1200'
         renderChildren={ayes && renderAyes}
         summary={
           isConvictionVote
@@ -89,6 +90,7 @@ function Votes ({ className = '', id, isConvictionVote, palletVote, tally }: Pro
         }
       />
       <Expander
+        className='media--1200'
         renderChildren={nays && renderNays}
         summary={
           isConvictionVote

packages/react-components/src/Table/index.tsx

@@ -262,6 +262,10 @@ export default React.memo(styled(Table)`
         }
       }
 
+      &.chart {
+        padding: 0;
+      }
+
       &.combined {
         border-top-width: 0;
       }
@@ -358,6 +362,10 @@ export default React.memo(styled(Table)`
         .ui--Columar .ui--Column {
           margin: 1rem 0 0.75rem 0;
           padding: 0;
+
+          * + h5 {
+            margin-top: 1rem;
+          }
         }
       }