🔥 Hotfix: Show election tab during idle stage

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', () => {