Skip to content

Commit

Permalink
🔥 Hotfix: Show election tab during idle stage (#4806)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
thesan authored Mar 14, 2024
1 parent 040f293 commit 560532c
Show file tree
Hide file tree
Showing 9 changed files with 40 additions and 40 deletions.
10 changes: 10 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
4 changes: 1 addition & 3 deletions packages/ui/src/app/components/SideBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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 (
<>
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/app/pages/Council/Council.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
)}
Expand Down
5 changes: 4 additions & 1 deletion packages/ui/src/app/pages/Election/Election.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

Expand Down Expand Up @@ -152,6 +152,9 @@ export default {
},
} satisfies Meta<Args>

export const Idle: Story = {
args: { electionStage: 'inactive' },
}
export const Announcing: Story = {
args: { electionStage: 'announcing' },
}
Expand Down
46 changes: 20 additions & 26 deletions packages/ui/src/app/pages/Election/Election.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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'
Expand All @@ -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])
Expand All @@ -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 />} />
}
Expand Down Expand Up @@ -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} />
)}
Expand All @@ -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'};
`
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/test/council/components/ElectionTabs.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ describe('CouncilTabs', () => {

renderComponent()

expect(screen.queryByText(/^Election$/i)).toBeNull()
expect(screen.queryByText(/^Election$/i)).not.toBeNull()
})

it('Announcing', () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/test/council/pages/Election.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ describe('UI: Election page', () => {

const { queryByText } = await renderComponent()

expect(queryByText('Round')).not.toBeNull()
expect(queryByText('Round')).toBeNull()
})

describe('Active', () => {
Expand Down

0 comments on commit 560532c

Please sign in to comment.