🔥 Hotfix: Show election tab during idle stage (#4806)

* Show election tab during idle periods

* Display "Idle stage" instead of "Normal period"

* Revert mocked council stage fix

* Bump version to `3.3.1`

* Fix failing test

CHANGELOG.md

@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [3.3.1] - 2024-03-14
+
+### Added
+- Show election tab during idle stage.
+
+### Changed
+- Rename "Normal period" to "Idle stage".
+
+
 ## [3.3.0 (Nara)][3.3.0] - 2024-03-13
 
 ### Added
@@ -349,6 +358,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.1.1] - 2022-12-02
 
 [unreleased]: https://github.com/Joystream/pioneer/compare/v3.3.0...HEAD
+[3.3.1]: https://github.com/Joystream/pioneer/compare/v3.3.0...v3.3.1
 [3.3.0]: https://github.com/Joystream/pioneer/compare/v3.2.0...v3.3.0
 [3.2.0]: https://github.com/Joystream/pioneer/compare/v3.1.0...v3.2.0
 [3.1.0]: https://github.com/Joystream/pioneer/compare/v3.0.0...v3.1.0

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joystream/pioneer",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "license": "GPL-3.0-only",
   "scripts": {
     "build": "node --max_old_space_size=4096 ./build.js",

packages/ui/src/app/components/SideBar.tsx

@@ -36,7 +36,6 @@ import { useNetworkEndpoints } from '@/common/hooks/useNetworkEndpoints'
 import { useResponsive } from '@/common/hooks/useResponsive'
 import { useToggle } from '@/common/hooks/useToggle'
 import { CouncilRoutes, ElectionRoutes } from '@/council/constants'
-import { useElectionStage } from '@/council/hooks/useElectionStage'
 import { ForumRoutes } from '@/forum/constant'
 import { ProfileComponent } from '@/memberships/components/ProfileComponent'
 import { ProposalsRoutes } from '@/proposals/constants/routes'
@@ -67,10 +66,9 @@ export const SideBarContent = () => {
   const { wallet } = useMyAccounts()
   const { isMobileWallet } = useResponsive()
   const [comingSoonListActive, toggleComingSoonListActive] = useToggle(false)
-  const { stage: electionStage } = useElectionStage()
   const [endpoints] = useNetworkEndpoints()
 
-  const electionLink = electionStage === 'inactive' ? ElectionRoutes.pastElections : ElectionRoutes.currentElection
+  const electionLink = ElectionRoutes.currentElection
 
   return (
     <>

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

@@ -46,7 +46,7 @@ export const Council = () => {
     <MainPanel>
       <StatisticsStyle>
         {electionStage === 'inactive' ? (
-          <BlockDurationStatistics title="Normal period remaining length" value={idlePeriodRemaining} />
+          <BlockDurationStatistics title="Idle stage remaining length" value={idlePeriodRemaining} />
         ) : (
           <ViewElectionButton />
         )}

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

@@ -8,7 +8,7 @@ import { MocksParameters } from '@/mocks/providers'
 import { Election } from './Election'
 
 type Args = {
-  electionStage: 'announcing' | 'revealing' | 'voting' | 'inactive'
+  electionStage: 'inactive' | 'announcing' | 'revealing' | 'voting'
   remainingPeriod: number
 }
 
@@ -152,6 +152,9 @@ export default {
   },
 } satisfies Meta<Args>
 
+export const Idle: Story = {
+  args: { electionStage: 'inactive' },
+}
 export const Announcing: Story = {
   args: { electionStage: 'announcing' },
 }

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

@@ -1,9 +1,9 @@
-import React, { useEffect } from 'react'
-import { useHistory } from 'react-router-dom'
+import React from 'react'
 import styled from 'styled-components'
 
 import { PageHeaderWithButtons, PageHeaderWrapper, PageLayout } from '@/app/components/PageLayout'
 import { ButtonsGroup, CopyButtonTemplate } from '@/common/components/buttons'
+import { EmptyPagePlaceholder } from '@/common/components/EmptyPagePlaceholder/EmptyPagePlaceholder'
 import { LinkIcon } from '@/common/components/icons'
 import { Loading } from '@/common/components/Loading'
 import { MainPanel } from '@/common/components/page/PageContent'
@@ -24,7 +24,7 @@ import { ElectionRoutes } from '@/council/constants'
 import { useCandidatePreviewViaUrlParameter } from '@/council/hooks/useCandidatePreviewViaUrlParameter'
 import { useCurrentElection } from '@/council/hooks/useCurrentElection'
 import { useElectionStage } from '@/council/hooks/useElectionStage'
-import { Election as ElectionType } from '@/council/types/Election'
+import { ElectionStage, Election as ElectionType } from '@/council/types/Election'
 
 import { ElectionProgressBar } from './components/ElectionProgressBar'
 import { ElectionTabs } from './components/ElectionTabs'
@@ -42,7 +42,6 @@ export const Election = () => {
   const { isLoading: isLoadingElection, election } = useCurrentElection()
 
   const { isLoading: isLoadingElectionStage, stage: electionStage } = useElectionStage()
-  const history = useHistory()
   useCandidatePreviewViaUrlParameter()
 
   useRefetchQueries({ after: electionStage === 'announcing' }, [electionStage])
@@ -51,12 +50,6 @@ export const Election = () => {
     [electionStage]
   )
 
-  useEffect(() => {
-    if (!isLoadingElectionStage && electionStage === 'inactive') {
-      history.replace(ElectionRoutes.pastElections)
-    }
-  }, [electionStage])
-
   if (isLoadingElectionStage) {
     return <PageLayout header={null} main={<Loading />} />
   }
@@ -88,21 +81,26 @@ export const Election = () => {
 
   const main = (
     <MainPanel>
-      <StyledStatistics size={size}>
-        <StatisticItem
-          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>
+      <StyledStatistics size={size} stage={electionStage}>
+        {electionStage !== 'inactive' && (
+          <StatisticItem
+            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>
+        )}
         <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 === 'inactive' && (
+        <EmptyPagePlaceholder title="There are no ongoing elections" copy="" button={null} />
+      )}
       {electionStage === 'announcing' && (
         <AnnouncingStage election={election} isLoading={!isRefetched && isLoadingElection} />
       )}
@@ -114,11 +112,7 @@ export const Election = () => {
   return <PageLayout header={header} main={main} />
 }
 
-const StyledStatistics = styled(Statistics)<{ size: string }>`
-  grid-template-columns: ${({ size }) =>
-    size === 'xxs'
-      ? 'repeat(auto-fit, minmax(238px, 1fr))'
-      : size === 'xs'
-      ? 'repeat(auto-fit, minmax(400px, 1fr))'
-      : '200px minmax(400px, 1fr)'};
+const StyledStatistics = styled(Statistics)<{ size: string; stage: ElectionStage }>`
+  grid-template-columns: ${({ size, stage }) =>
+    stage === 'inactive' || size === 'xxs' || size === 'xs' ? '1fr' : '200px 1fr'};
 `

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

@@ -3,23 +3,18 @@ import React from 'react'
 import { TabsDefinition, usePageTabs } from '@/app/hooks/usePageTabs'
 import { Tabs } from '@/common/components/Tabs'
 import { ElectionRoutes } from '@/council/constants'
-import { useElectionStage } from '@/council/hooks/useElectionStage'
 import { useElectionStatusChanged } from '@/council/hooks/useElectionStatusChanged'
 
 export const ElectionTabs = () => {
-  const { stage: electionStage } = useElectionStage()
   const { hasChanged } = useElectionStatusChanged()
 
   const pages: TabsDefinition[] = [
+    ['Election', ElectionRoutes.currentElection, { hasChanges: hasChanged }],
     ['Past Votes', ElectionRoutes.pastVotes],
     ['Past Elections', ElectionRoutes.pastElections],
     ['Blacklisted Accounts', ElectionRoutes.blacklistedAccounts],
   ]
 
-  if (electionStage !== 'inactive') {
-    pages.unshift(['Election', ElectionRoutes.currentElection, { hasChanges: hasChanged }])
-  }
-
   const tabs = usePageTabs(pages)
 
   return <Tabs tabs={tabs} />

packages/ui/test/council/components/ElectionTabs.test.tsx

@@ -28,7 +28,7 @@ describe('CouncilTabs', () => {
 
     renderComponent()
 
-    expect(screen.queryByText(/^Election$/i)).toBeNull()
+    expect(screen.queryByText(/^Election$/i)).not.toBeNull()
   })
 
   it('Announcing', () => {

packages/ui/test/council/pages/Election.test.tsx

@@ -107,7 +107,7 @@ describe('UI: Election page', () => {
 
     const { queryByText } = await renderComponent()
 
-    expect(queryByText('Round')).not.toBeNull()
+    expect(queryByText('Round')).toBeNull()
   })
 
   describe('Active', () => {