Add an election progress bar

packages/ui/src/app/pages/Election/Election.stories.tsx

@@ -0,0 +1,163 @@
+import { Meta, StoryContext, StoryObj } from '@storybook/react'
+import { FC } from 'react'
+
+import { GetCurrentElectionDocument } from '@/council/queries'
+import { joy } from '@/mocks/helpers'
+import { MocksParameters } from '@/mocks/providers'
+
+import { Election } from './Election'
+
+type Args = {
+  electionStage: 'announcing' | 'revealing' | 'voting' | 'inactive'
+  remainingPeriod: number
+}
+
+type Story = StoryObj<FC<Args>>
+
+export default {
+  title: 'Pages/Election/Election',
+  component: Election,
+  argTypes: {
+    electionStage: {
+      control: { type: 'radio' },
+      options: ['inactive', 'announcing', 'voting', 'revealing'],
+    },
+  },
+  args: {
+    electionStage: 'announcing',
+    remainingPeriod: 10000,
+  },
+  parameters: {
+    currentBlock: 480_2561,
+    idlePeriodDuration: 14400,
+    budgetRefillPeriod: 14400,
+    announcingPeriodDuration: 129600,
+    voteStageDuration: 43200,
+    revealStageDuration: 43200,
+    mocks: ({ args, parameters }: StoryContext<Args>): MocksParameters => {
+      const councilStageDuration =
+        parameters[args.electionStage === 'inactive' ? 'idlePeriodDuration' : 'announcingPeriodDuration']
+      return {
+        chain: {
+          consts: {
+            council: {
+              councilSize: 3,
+              idlePeriodDuration: parameters.idlePeriodDuration,
+              announcingPeriodDuration: parameters.announcingPeriodDuration,
+              budgetRefillPeriod: parameters.budgetRefillPeriod,
+              minCandidateStake: joy(166_666.666666),
+            },
+            referendum: {
+              voteStageDuration: parameters.voteStageDuration,
+              revealStageDuration: parameters.revealStageDuration,
+              minimumStake: joy(166.666666666),
+            },
+          },
+          rpc: {
+            chain: {
+              subscribeNewHeads: {
+                number: parameters.currentBlock,
+              },
+            },
+          },
+          query: {
+            council: {
+              stage: {
+                stage: {
+                  isIdle: args.electionStage === 'inactive',
+                  isAnnouncing: args.electionStage === 'announcing',
+                },
+                changedAt: Math.max(0, parameters.currentBlock - councilStageDuration + args.remainingPeriod),
+              },
+            },
+            referendum: {
+              stage: {
+                isVoting: args.electionStage === 'voting',
+                isRevealing: args.electionStage === 'revealing',
+                asVoting: {
+                  started: Math.max(0, parameters.currentBlock - parameters.voteStageDuration + args.remainingPeriod),
+                },
+                asRevealing: {
+                  started: Math.max(0, parameters.currentBlock - parameters.revealStageDuration + args.remainingPeriod),
+                },
+              },
+            },
+          },
+        },
+        gql: {
+          queries: [
+            {
+              query: GetCurrentElectionDocument,
+              data: {
+                electionRounds: [
+                  {
+                    __typename: 'ElectionRound',
+                    cycleId: 23,
+                    candidates: [
+                      {
+                        id: '0000003s',
+                        member: {
+                          id: '0',
+                          name: 'Jennifer_123',
+                          rootAccount: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
+                          controllerAccount: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
+                          handle: 'Jennifer_123',
+                          isVerified: true,
+                          isFoundingMember: true,
+                          isCouncilMember: false,
+                          roles: [
+                            {
+                              __typename: 'Worker',
+                              id: 'membershipWorkingGroup-0',
+                              createdAt: '2021',
+                              isLead: true,
+                              group: {
+                                __typename: 'WorkingGroup',
+                                name: 'Jennifer_123',
+                              },
+                            },
+                          ],
+                          boundAccounts: [],
+                          inviteCount: 0,
+                          createdAt: '',
+                          metadata: {
+                            name: 'Jennifer_123',
+                          },
+                        },
+                        noteMetadata: {
+                          header: 'Jennifer_123',
+                          bannerUri:
+                            'https://upload.wikimedia.org/wikipedia/commons/b/be/Bliss_location%2C_Sonoma_Valley_in_2006.jpg',
+                          bulletPoints: [
+                            'Amet minim mollit non deserunt ullamco est sit liqua dolor',
+                            'Amet minim mollit non deserunt ullamco est sit liqua dolor',
+                            'Amet minim mollit non deserunt ullamco est sit liqua dolor Amet minim mollit non deserunt ullamco est sit liqua dolor Amet minim mollit non deserunt ullamco est sit liqua dolor Amet minim mollit non deserunt ullamco est sit liqua dolor',
+                          ],
+                          description: 'Test member',
+                        },
+                        stake: '16660000000000',
+                        stakingAccountId: 'j4Sba211111111',
+                        status: 'ACTIVE',
+                        votesReceived: [],
+                      },
+                    ],
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      }
+    },
+  },
+} satisfies Meta<Args>
+
+export const Announcing: Story = {
+  args: { electionStage: 'announcing' },
+}
+export const Voting: Story = {
+  args: { electionStage: 'voting' },
+}
+export const Revealing: Story = {
+  args: { electionStage: 'revealing' },
+}

packages/ui/src/app/pages/Election/Election.tsx

@@ -1,15 +1,15 @@
 import React, { useEffect } from 'react'
 import { useHistory } from 'react-router-dom'
+import styled from 'styled-components'
 
 import { PageHeaderWithButtons, PageHeaderWrapper, PageLayout } from '@/app/components/PageLayout'
 import { ButtonsGroup, CopyButtonTemplate } from '@/common/components/buttons'
 import { LinkIcon } from '@/common/components/icons'
 import { Loading } from '@/common/components/Loading'
 import { MainPanel } from '@/common/components/page/PageContent'
 import { PageTitle } from '@/common/components/page/PageTitle'
-import { BlockDurationStatistics, StatisticItem, Statistics } from '@/common/components/statistics'
+import { StatisticItem, Statistics } from '@/common/components/statistics'
 import { TextHuge } from '@/common/components/typography'
-import { camelCaseToText } from '@/common/helpers'
 import { useRefetchQueries } from '@/common/hooks/useRefetchQueries'
 import { MILLISECONDS_PER_BLOCK } from '@/common/model/formatters'
 import { getUrl } from '@/common/utils/getUrl'
@@ -21,11 +21,11 @@ import { RevealingStage } from '@/council/components/election/revealing/Revealin
 import { VotingStage } from '@/council/components/election/voting/VotingStage'
 import { ElectionRoutes } from '@/council/constants'
 import { useCandidatePreviewViaUrlParameter } from '@/council/hooks/useCandidatePreviewViaUrlParameter'
-import { useCouncilRemainingPeriod } from '@/council/hooks/useCouncilRemainingPeriod'
 import { useCurrentElection } from '@/council/hooks/useCurrentElection'
 import { useElectionStage } from '@/council/hooks/useElectionStage'
 import { Election as ElectionType } from '@/council/types/Election'
 
+import { ElectionProgressBar } from './components/ElectionProgressBar'
 import { ElectionTabs } from './components/ElectionTabs'
 
 const displayElectionRound = (election: ElectionType | undefined): string => {
@@ -40,7 +40,6 @@ export const Election = () => {
   const { isLoading: isLoadingElection, election } = useCurrentElection()
 
   const { isLoading: isLoadingElectionStage, stage: electionStage } = useElectionStage()
-  const remainingPeriod = useCouncilRemainingPeriod()
   const history = useHistory()
   useCandidatePreviewViaUrlParameter()
 
@@ -87,29 +86,21 @@ export const Election = () => {
 
   const main = (
     <MainPanel>
-      <Statistics>
+      <StyledStatistics>
         <StatisticItem
-          title="Stage"
-          tooltipText="Elections occur periodically. Each has a sequence of stages referred to as the election cycle. Stages are: announcing period, voting period and revealing period."
-          tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/council#election"
-        >
-          <TextHuge bold>{camelCaseToText(electionStage)} Period</TextHuge>
-        </StatisticItem>
-        <BlockDurationStatistics
-          title="Period remaining length"
-          value={remainingPeriod}
-          tooltipText="Remaining length of current period before the next one starts."
-          tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/council#election"
-        />
-        <StatisticItem
-          title="Election round"
+          title="Round"
           tooltipText="Elections are held in consecutive rounds. This is the number of current election."
         >
           <TextHuge id="election-round-value" bold>
             {displayElectionRound(election)}
           </TextHuge>
         </StatisticItem>
-      </Statistics>
+        <ElectionProgressBar
+          electionStage={electionStage}
+          title="Election Progress"
+          tooltipText="Elections occur periodically. Each has a sequence of stages referred to as the election cycle. Stages are: announcing period, voting period and revealing period."
+        />
+      </StyledStatistics>
       {electionStage === 'announcing' && (
         <AnnouncingStage election={election} isLoading={!isRefetched && isLoadingElection} />
       )}
@@ -120,3 +111,7 @@ export const Election = () => {
 
   return <PageLayout header={header} main={main} />
 }
+
+const StyledStatistics = styled(Statistics)`
+  grid-template-columns: 250px minmax(500px, 1fr);
+`