From 37ad7cb3bffdd445885781f242c49ac70fbcb724 Mon Sep 17 00:00:00 2001
From: Joystream Stats <dev@joystreamstats.live>
Date: Sat, 5 Nov 2022 19:57:26 +0000
Subject: [PATCH 1/6] Past Elections cosmetics (#3168)

- rebrand `ended at` to `started at` based on QN results
- fix re-appearance of #2656 ('round')
- election round tooltip with handbook link
---
 .../pages/Election/PastElections/PastElections.tsx    |  2 +-
 .../election/pastElection/PastElectionStats.tsx       | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/app/pages/Election/PastElections/PastElections.tsx b/packages/ui/src/app/pages/Election/PastElections/PastElections.tsx
index 06e10b778a..c5ba2de1d1 100644
--- a/packages/ui/src/app/pages/Election/PastElections/PastElections.tsx
+++ b/packages/ui/src/app/pages/Election/PastElections/PastElections.tsx
@@ -48,7 +48,7 @@ export const PastElections = () => {
             <>
               <PastElectionsListHeaders $colLayout={PastElectionsColLayout}>
                 <SortHeader {...getSortProps('cycleId')}>Round</SortHeader>
-                <SortHeader {...getSortProps('updatedAt')}>Election ended at</SortHeader>
+                <SortHeader {...getSortProps('updatedAt')}>Election started at</SortHeader>
                 <ListHeader>Total staked</ListHeader>
                 <ListHeader>Revealed votes</ListHeader>
                 <ListHeader>Total candidates</ListHeader>
diff --git a/packages/ui/src/council/components/election/pastElection/PastElectionStats.tsx b/packages/ui/src/council/components/election/pastElection/PastElectionStats.tsx
index a38d3fbe38..e305e819e2 100644
--- a/packages/ui/src/council/components/election/pastElection/PastElectionStats.tsx
+++ b/packages/ui/src/council/components/election/pastElection/PastElectionStats.tsx
@@ -21,11 +21,16 @@ export const PastElectionStats = ({
   totalVotes,
 }: PastElectionStatsProps) => (
   <Statistics>
-    <StatisticItem title="Ended at">
+    <StatisticItem title="Started at">
       {finishedAtBlock ? formatDateString(finishedAtBlock.timestamp) : '-'}
     </StatisticItem>
-    <StatisticItem title="Election round" tooltipText="Lorem ipsum...">
-      <TextHuge bold>{cycleId} round</TextHuge>
+    <StatisticItem
+      title="Election round"
+      tooltipText="Refers to the on-chain election cycle enumeration."
+      tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/council#election"
+      tooltipLinkText="Read about election cycles"
+    >
+      <TextHuge bold>{cycleId}</TextHuge>
     </StatisticItem>
     <NumericValueStat title="Total candidates" value={totalCandidates} />
     <StatsBlock>

From b067a33cf3656e30c4de09bde0ed173c0033a378 Mon Sep 17 00:00:00 2001
From: Joystream Stats <dev@joystreamstats.live>
Date: Sat, 5 Nov 2022 20:40:35 +0000
Subject: [PATCH 2/6] `StatisticBar` Fixed: Received NaN for the `end`
 attribute

---
 .../components/election/pastElection/PastElectionStats.tsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/council/components/election/pastElection/PastElectionStats.tsx b/packages/ui/src/council/components/election/pastElection/PastElectionStats.tsx
index e305e819e2..076ac597dc 100644
--- a/packages/ui/src/council/components/election/pastElection/PastElectionStats.tsx
+++ b/packages/ui/src/council/components/election/pastElection/PastElectionStats.tsx
@@ -37,9 +37,9 @@ export const PastElectionStats = ({
       <StatisticBar
         title="Revealed votes"
         tooltipText="Votes are kept anonymous and get revealed during the reveal period, after voting is complete. Only revealed votes are counted."
-        value={revealedVotes / totalVotes}
-        numerator={revealedVotes}
-        denominator={totalVotes + ' votes'}
+        value={revealedVotes ?? 0 / totalVotes ?? 0}
+        numerator={revealedVotes ?? 0}
+        denominator={totalVotes ?? 0 + ' votes'}
       />
     </StatsBlock>
   </Statistics>

From 98082b89fd95eae1e84679badcd2de6225236d1d Mon Sep 17 00:00:00 2001
From: Joystream Stats <dev@joystreamstats.live>
Date: Sat, 5 Nov 2022 20:41:35 +0000
Subject: [PATCH 3/6] `BlockInfo` Fixed: <a> cannot appear as a descendant of
 <a>.

 - by passing `noLink` from PastElectionsListRow via BlockTime to BlockInfo
---
 .../common/components/BlockTime/BlockInfo.tsx | 15 +++++++++++-
 .../common/components/BlockTime/BlockTime.tsx | 23 +++++++++++--------
 .../PastElectionsListRow.tsx                  |  2 +-
 3 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/packages/ui/src/common/components/BlockTime/BlockInfo.tsx b/packages/ui/src/common/components/BlockTime/BlockInfo.tsx
index a4c37a4442..a5fe0edfb0 100644
--- a/packages/ui/src/common/components/BlockTime/BlockInfo.tsx
+++ b/packages/ui/src/common/components/BlockTime/BlockInfo.tsx
@@ -13,10 +13,23 @@ export interface BlockInfoProp {
   block: Block
   lessInfo?: boolean
   inline?: boolean
+  noLink?: boolean
 }
 
-export const BlockInfo = ({ block, lessInfo, inline }: BlockInfoProp) => {
+export const BlockInfo = ({ block, lessInfo, inline, noLink }: BlockInfoProp) => {
   const [endpoints] = useNetworkEndpoints()
+
+  // TODO UN-DRY
+  if (noLink)
+    return (
+      <BlockInfoContainer lessInfo={lessInfo} inline={inline}>
+        <BlockIcon />
+        <span>
+          {lessInfo && 'Block'} {formatTokenValue(block.number)}
+        </span>
+      </BlockInfoContainer>
+    )
+
   return (
     <BlockLink
       href={`https://polkadot.js.org/apps/?rpc=${endpoints.nodeRpcEndpoint}/ws-rpc#/explorer/query/${block.number}`}
diff --git a/packages/ui/src/common/components/BlockTime/BlockTime.tsx b/packages/ui/src/common/components/BlockTime/BlockTime.tsx
index da725c6e2f..1e1dfeb8d9 100644
--- a/packages/ui/src/common/components/BlockTime/BlockTime.tsx
+++ b/packages/ui/src/common/components/BlockTime/BlockTime.tsx
@@ -13,6 +13,7 @@ export interface BlockTimeProps extends BlockTimeLayoutProps {
   block: Block
   dateLabel?: string
   lessInfo?: boolean
+  noLink?: boolean
 }
 
 interface BlockTimeLayoutProps {
@@ -20,16 +21,18 @@ interface BlockTimeLayoutProps {
   position?: 'start' | 'end'
 }
 
-export const BlockTime = React.memo(({ block, layout, dateLabel, lessInfo, position = 'start' }: BlockTimeProps) => (
-  <BlockTimeWrapper layout={layout} position={position}>
-    <AboutText>
-      {dateLabel && layout == 'row' && dateLabel + ': '}
-      {formatDateString(block.timestamp, layout === 'column' ? 's' : 'l')}
-    </AboutText>
-    {layout == 'row' && <Separator>{' | '}</Separator>}
-    <BlockInfo block={block} lessInfo={lessInfo} />
-  </BlockTimeWrapper>
-))
+export const BlockTime = React.memo(
+  ({ block, layout, dateLabel, lessInfo, noLink, position = 'start' }: BlockTimeProps) => (
+    <BlockTimeWrapper layout={layout} position={position}>
+      <AboutText>
+        {dateLabel && layout == 'row' && dateLabel + ': '}
+        {formatDateString(block.timestamp, layout === 'column' ? 's' : 'l')}
+      </AboutText>
+      {layout == 'row' && <Separator>{' | '}</Separator>}
+      <BlockInfo block={block} lessInfo={lessInfo} noLink={noLink} />
+    </BlockTimeWrapper>
+  )
+)
 
 const Separator = styled.span`
   font-size: inherit;
diff --git a/packages/ui/src/council/components/election/pastElection/PastElectionsList/PastElectionsListRow.tsx b/packages/ui/src/council/components/election/pastElection/PastElectionsList/PastElectionsListRow.tsx
index 7db781f159..ac49a0206c 100644
--- a/packages/ui/src/council/components/election/pastElection/PastElectionsList/PastElectionsListRow.tsx
+++ b/packages/ui/src/council/components/election/pastElection/PastElectionsList/PastElectionsListRow.tsx
@@ -25,7 +25,7 @@ export const PastElectionsListRow = ({ election }: PastElectionsListRowProps) =>
     >
       <Info>#{election.cycleId}</Info>
       {election.finishedAtBlock ? (
-        <BlockTime block={election.finishedAtBlock} layout="reverse-start" lessInfo />
+        <BlockTime block={election.finishedAtBlock} layout="reverse-start" lessInfo noLink />
       ) : (
         <></>
       )}

From f2d90e3c42c1c590480d7d0bcf8b4ae49f0cff2f Mon Sep 17 00:00:00 2001
From: Joystream Stats <dev@joystreamstats.live>
Date: Wed, 9 Nov 2022 16:46:57 +0000
Subject: [PATCH 4/6] Move external block explorer Link on `BlockInfo` to
 tooltip

---
 .../common/components/BlockTime/BlockInfo.tsx | 36 ++++++++-----------
 .../common/components/BlockTime/BlockTime.tsx | 23 ++++++------
 .../PastElectionsListRow.tsx                  |  2 +-
 3 files changed, 26 insertions(+), 35 deletions(-)

diff --git a/packages/ui/src/common/components/BlockTime/BlockInfo.tsx b/packages/ui/src/common/components/BlockTime/BlockInfo.tsx
index a5fe0edfb0..94c4d98fba 100644
--- a/packages/ui/src/common/components/BlockTime/BlockInfo.tsx
+++ b/packages/ui/src/common/components/BlockTime/BlockInfo.tsx
@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components'
 
 import { BlockIcon } from '@/common/components/icons'
 import { Link } from '@/common/components/Link'
+import { Tooltip } from '@/common/components/Tooltip'
 import { TextSmall } from '@/common/components/typography'
 import { Colors } from '@/common/constants'
 import { useNetworkEndpoints } from '@/common/hooks/useNetworkEndpoints'
@@ -13,35 +14,28 @@ export interface BlockInfoProp {
   block: Block
   lessInfo?: boolean
   inline?: boolean
-  noLink?: boolean
 }
 
-export const BlockInfo = ({ block, lessInfo, inline, noLink }: BlockInfoProp) => {
+export const BlockInfo = ({ block, lessInfo, inline }: BlockInfoProp) => {
   const [endpoints] = useNetworkEndpoints()
-
-  // TODO UN-DRY
-  if (noLink)
-    return (
-      <BlockInfoContainer lessInfo={lessInfo} inline={inline}>
-        <BlockIcon />
-        <span>
-          {lessInfo && 'Block'} {formatTokenValue(block.number)}
-        </span>
-      </BlockInfoContainer>
-    )
+  const explorerURLBase = `https://polkadot.js.org/apps/?rpc=${endpoints.nodeRpcEndpoint}/ws-rpc#/explorer/query/`
+  const tooltipLinkURL = explorerURLBase + block.number
+  const tooltipText = <BlockNetworkInfo>Produced on {block.network} network.</BlockNetworkInfo>
 
   return (
-    <BlockLink
-      href={`https://polkadot.js.org/apps/?rpc=${endpoints.nodeRpcEndpoint}/ws-rpc#/explorer/query/${block.number}`}
-    >
-      <BlockInfoContainer lessInfo={lessInfo} inline={inline}>
+    <BlockInfoContainer lessInfo={lessInfo} inline={inline}>
+      <Tooltip
+        tooltipTitle="Block"
+        tooltipText={tooltipText}
+        tooltipLinkURL={tooltipLinkURL}
+        tooltipLinkText="Open in Block Explorer"
+      >
         <BlockIcon />
         <span>
-          {formatTokenValue(block.number)} {lessInfo && 'block'}
+          {lessInfo && 'Block'} {formatTokenValue(block.number)}
         </span>
-        {/* {!lessInfo && <BlockNetworkInfo>on {block.network} network</BlockNetworkInfo>} */}
-      </BlockInfoContainer>
-    </BlockLink>
+      </Tooltip>
+    </BlockInfoContainer>
   )
 }
 
diff --git a/packages/ui/src/common/components/BlockTime/BlockTime.tsx b/packages/ui/src/common/components/BlockTime/BlockTime.tsx
index 1e1dfeb8d9..da725c6e2f 100644
--- a/packages/ui/src/common/components/BlockTime/BlockTime.tsx
+++ b/packages/ui/src/common/components/BlockTime/BlockTime.tsx
@@ -13,7 +13,6 @@ export interface BlockTimeProps extends BlockTimeLayoutProps {
   block: Block
   dateLabel?: string
   lessInfo?: boolean
-  noLink?: boolean
 }
 
 interface BlockTimeLayoutProps {
@@ -21,18 +20,16 @@ interface BlockTimeLayoutProps {
   position?: 'start' | 'end'
 }
 
-export const BlockTime = React.memo(
-  ({ block, layout, dateLabel, lessInfo, noLink, position = 'start' }: BlockTimeProps) => (
-    <BlockTimeWrapper layout={layout} position={position}>
-      <AboutText>
-        {dateLabel && layout == 'row' && dateLabel + ': '}
-        {formatDateString(block.timestamp, layout === 'column' ? 's' : 'l')}
-      </AboutText>
-      {layout == 'row' && <Separator>{' | '}</Separator>}
-      <BlockInfo block={block} lessInfo={lessInfo} noLink={noLink} />
-    </BlockTimeWrapper>
-  )
-)
+export const BlockTime = React.memo(({ block, layout, dateLabel, lessInfo, position = 'start' }: BlockTimeProps) => (
+  <BlockTimeWrapper layout={layout} position={position}>
+    <AboutText>
+      {dateLabel && layout == 'row' && dateLabel + ': '}
+      {formatDateString(block.timestamp, layout === 'column' ? 's' : 'l')}
+    </AboutText>
+    {layout == 'row' && <Separator>{' | '}</Separator>}
+    <BlockInfo block={block} lessInfo={lessInfo} />
+  </BlockTimeWrapper>
+))
 
 const Separator = styled.span`
   font-size: inherit;
diff --git a/packages/ui/src/council/components/election/pastElection/PastElectionsList/PastElectionsListRow.tsx b/packages/ui/src/council/components/election/pastElection/PastElectionsList/PastElectionsListRow.tsx
index ac49a0206c..7db781f159 100644
--- a/packages/ui/src/council/components/election/pastElection/PastElectionsList/PastElectionsListRow.tsx
+++ b/packages/ui/src/council/components/election/pastElection/PastElectionsList/PastElectionsListRow.tsx
@@ -25,7 +25,7 @@ export const PastElectionsListRow = ({ election }: PastElectionsListRowProps) =>
     >
       <Info>#{election.cycleId}</Info>
       {election.finishedAtBlock ? (
-        <BlockTime block={election.finishedAtBlock} layout="reverse-start" lessInfo noLink />
+        <BlockTime block={election.finishedAtBlock} layout="reverse-start" lessInfo />
       ) : (
         <></>
       )}

From 5197f9c1bf4b4958284dcd932a5bf908571f5601 Mon Sep 17 00:00:00 2001
From: Joystream Stats <dev@joystreamstats.live>
Date: Fri, 9 Dec 2022 02:01:40 +0000
Subject: [PATCH 5/6] Sort by and show `PastElections` end block (#3168)

---
 .../src/app/pages/Election/PastElections/PastElections.tsx | 2 +-
 .../PastElectionsList/PastElectionsListRow.tsx             | 7 ++-----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/app/pages/Election/PastElections/PastElections.tsx b/packages/ui/src/app/pages/Election/PastElections/PastElections.tsx
index c5ba2de1d1..003f87c108 100644
--- a/packages/ui/src/app/pages/Election/PastElections/PastElections.tsx
+++ b/packages/ui/src/app/pages/Election/PastElections/PastElections.tsx
@@ -48,7 +48,7 @@ export const PastElections = () => {
             <>
               <PastElectionsListHeaders $colLayout={PastElectionsColLayout}>
                 <SortHeader {...getSortProps('cycleId')}>Round</SortHeader>
-                <SortHeader {...getSortProps('updatedAt')}>Election started at</SortHeader>
+                <SortHeader {...getSortProps('endedAtBlock')}>Election ended at</SortHeader>
                 <ListHeader>Total staked</ListHeader>
                 <ListHeader>Revealed votes</ListHeader>
                 <ListHeader>Total candidates</ListHeader>
diff --git a/packages/ui/src/council/components/election/pastElection/PastElectionsList/PastElectionsListRow.tsx b/packages/ui/src/council/components/election/pastElection/PastElectionsList/PastElectionsListRow.tsx
index 7db781f159..af27169f2c 100644
--- a/packages/ui/src/council/components/election/pastElection/PastElectionsList/PastElectionsListRow.tsx
+++ b/packages/ui/src/council/components/election/pastElection/PastElectionsList/PastElectionsListRow.tsx
@@ -17,6 +17,7 @@ interface PastElectionsListRowProps {
 }
 
 export const PastElectionsListRow = ({ election }: PastElectionsListRowProps) => {
+  const endedAt = election.finishedAtBlock
   return (
     <PastElectionsListRowItem
       $colLayout={PastElectionsColLayout}
@@ -24,11 +25,7 @@ export const PastElectionsListRow = ({ election }: PastElectionsListRowProps) =>
       to={generatePath(ElectionRoutes.pastElection, { id: election.id })}
     >
       <Info>#{election.cycleId}</Info>
-      {election.finishedAtBlock ? (
-        <BlockTime block={election.finishedAtBlock} layout="reverse-start" lessInfo />
-      ) : (
-        <></>
-      )}
+      {endedAt ? <BlockTime block={endedAt} layout="reverse-start" lessInfo /> : <></>}
       <TokenValue value={election.totalStake} />
       <Fraction numerator={election.revealedVotes} denominator={election.totalVotes} sameSize />
       <CountInfo count={election.totalCandidates} />

From e52dd8f29f08888c86609881dd63e8a8519837f5 Mon Sep 17 00:00:00 2001
From: "l1.media" <31551045+traumschule@users.noreply.github.com>
Date: Wed, 8 Feb 2023 22:07:20 +0000
Subject: [PATCH 6/6] Election `Ended at` label

---
 .../components/election/pastElection/PastElectionStats.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/council/components/election/pastElection/PastElectionStats.tsx b/packages/ui/src/council/components/election/pastElection/PastElectionStats.tsx
index 3b7962dac0..7ba7eb2ac1 100644
--- a/packages/ui/src/council/components/election/pastElection/PastElectionStats.tsx
+++ b/packages/ui/src/council/components/election/pastElection/PastElectionStats.tsx
@@ -21,7 +21,7 @@ export const PastElectionStats = ({
   totalVotes,
 }: PastElectionStatsProps) => (
   <Statistics>
-    <StatisticItem title="Started at">
+    <StatisticItem title="Ended at">
       {finishedAtBlock ? formatDateString(finishedAtBlock.timestamp) : '-'}
     </StatisticItem>
     <StatisticItem