From 5ec121e0d85565730e5e03770bb45046b48c4d06 Mon Sep 17 00:00:00 2001 From: Theophile Sandoz Date: Thu, 14 Mar 2024 14:49:32 +0100 Subject: [PATCH 1/5] Show election tab during idle periods --- packages/ui/src/app/components/SideBar.tsx | 4 +- .../app/pages/Election/Election.stories.tsx | 5 +- .../ui/src/app/pages/Election/Election.tsx | 46 ++++++++----------- .../Election/components/ElectionTabs.tsx | 7 +-- .../ui/src/council/hooks/useElectionStage.ts | 8 ++-- .../council/components/ElectionTabs.test.tsx | 2 +- 6 files changed, 31 insertions(+), 41 deletions(-) diff --git a/packages/ui/src/app/components/SideBar.tsx b/packages/ui/src/app/components/SideBar.tsx index e0e6953329..49ec938860 100644 --- a/packages/ui/src/app/components/SideBar.tsx +++ b/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 ( <> diff --git a/packages/ui/src/app/pages/Election/Election.stories.tsx b/packages/ui/src/app/pages/Election/Election.stories.tsx index 622b4d8529..27f0efe831 100644 --- a/packages/ui/src/app/pages/Election/Election.stories.tsx +++ b/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 +export const Idle: Story = { + args: { electionStage: 'inactive' }, +} export const Announcing: Story = { args: { electionStage: 'announcing' }, } diff --git a/packages/ui/src/app/pages/Election/Election.tsx b/packages/ui/src/app/pages/Election/Election.tsx index 78434d7e57..caa48230cb 100644 --- a/packages/ui/src/app/pages/Election/Election.tsx +++ b/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 } /> } @@ -88,21 +81,26 @@ export const Election = () => { const main = ( - - - - {displayElectionRound(election)} - - + + {electionStage !== 'inactive' && ( + + + {displayElectionRound(election)} + + + )} + {electionStage === 'inactive' && ( + + )} {electionStage === 'announcing' && ( )} @@ -114,11 +112,7 @@ export const Election = () => { return } -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'}; ` diff --git a/packages/ui/src/app/pages/Election/components/ElectionTabs.tsx b/packages/ui/src/app/pages/Election/components/ElectionTabs.tsx index 1e2bcd432d..971f19d219 100644 --- a/packages/ui/src/app/pages/Election/components/ElectionTabs.tsx +++ b/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 diff --git a/packages/ui/src/council/hooks/useElectionStage.ts b/packages/ui/src/council/hooks/useElectionStage.ts index 38c4e7ff35..6325decf6c 100644 --- a/packages/ui/src/council/hooks/useElectionStage.ts +++ b/packages/ui/src/council/hooks/useElectionStage.ts @@ -26,9 +26,9 @@ export const useElectionStage = (): UseElectionStage => { export const electionStageObservable = (api: Api) => { const councilObservable = api.query.council.stage().pipe( concatMap(({ stage: councilStage, changedAt }): Observable => { - if (councilStage.isIdle) { + if (councilStage.isIdle.valueOf()) { return of({ stage: 'inactive', changedAt }) - } else if (councilStage.isAnnouncing) { + } else if (councilStage.isAnnouncing.valueOf()) { return of({ stage: 'announcing', changedAt }) } return EMPTY @@ -36,9 +36,9 @@ export const electionStageObservable = (api: Api) => { ) const referendumObservable = api.query.referendum.stage().pipe( concatMap((referendumStage): Observable => { - if (referendumStage.isVoting) { + if (referendumStage.isVoting.valueOf()) { return of({ stage: 'voting', changedAt: referendumStage.asVoting.started }) - } else if (referendumStage.isRevealing) { + } else if (referendumStage.isRevealing.valueOf()) { return of({ stage: 'revealing', changedAt: referendumStage.asRevealing.started }) } return EMPTY diff --git a/packages/ui/test/council/components/ElectionTabs.test.tsx b/packages/ui/test/council/components/ElectionTabs.test.tsx index a5d9c3ffa7..8ddfeac90a 100644 --- a/packages/ui/test/council/components/ElectionTabs.test.tsx +++ b/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', () => { From 7ae69e35cb229c7ec1e771c728cfb5db52cd8c20 Mon Sep 17 00:00:00 2001 From: Theophile Sandoz Date: Thu, 14 Mar 2024 14:52:59 +0100 Subject: [PATCH 2/5] Display "Idle stage" instead of "Normal period" --- packages/ui/src/app/pages/Council/Council.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/app/pages/Council/Council.tsx b/packages/ui/src/app/pages/Council/Council.tsx index 3de3bcdb0f..16f697f82f 100644 --- a/packages/ui/src/app/pages/Council/Council.tsx +++ b/packages/ui/src/app/pages/Council/Council.tsx @@ -46,7 +46,7 @@ export const Council = () => { {electionStage === 'inactive' ? ( - + ) : ( )} From 931952c7ec0f4746afc58a8b312f2568dbb8b07f Mon Sep 17 00:00:00 2001 From: Theophile Sandoz Date: Thu, 14 Mar 2024 15:18:06 +0100 Subject: [PATCH 3/5] Revert mocked council stage fix --- packages/ui/src/council/hooks/useElectionStage.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/ui/src/council/hooks/useElectionStage.ts b/packages/ui/src/council/hooks/useElectionStage.ts index 6325decf6c..38c4e7ff35 100644 --- a/packages/ui/src/council/hooks/useElectionStage.ts +++ b/packages/ui/src/council/hooks/useElectionStage.ts @@ -26,9 +26,9 @@ export const useElectionStage = (): UseElectionStage => { export const electionStageObservable = (api: Api) => { const councilObservable = api.query.council.stage().pipe( concatMap(({ stage: councilStage, changedAt }): Observable => { - if (councilStage.isIdle.valueOf()) { + if (councilStage.isIdle) { return of({ stage: 'inactive', changedAt }) - } else if (councilStage.isAnnouncing.valueOf()) { + } else if (councilStage.isAnnouncing) { return of({ stage: 'announcing', changedAt }) } return EMPTY @@ -36,9 +36,9 @@ export const electionStageObservable = (api: Api) => { ) const referendumObservable = api.query.referendum.stage().pipe( concatMap((referendumStage): Observable => { - if (referendumStage.isVoting.valueOf()) { + if (referendumStage.isVoting) { return of({ stage: 'voting', changedAt: referendumStage.asVoting.started }) - } else if (referendumStage.isRevealing.valueOf()) { + } else if (referendumStage.isRevealing) { return of({ stage: 'revealing', changedAt: referendumStage.asRevealing.started }) } return EMPTY From 070cd7acc44f437ee53dba011eee2b58190e7237 Mon Sep 17 00:00:00 2001 From: Theophile Sandoz Date: Thu, 14 Mar 2024 15:23:27 +0100 Subject: [PATCH 4/5] Bump version to `3.3.1` --- CHANGELOG.md | 10 ++++++++++ packages/ui/package.json | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 287a98263e..4baf478d49 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/packages/ui/package.json b/packages/ui/package.json index 55013b64f6..73c7ba0519 100644 --- a/packages/ui/package.json +++ b/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", From ad7a748cc70918777966bd2fd769a1d06f18c659 Mon Sep 17 00:00:00 2001 From: Theophile Sandoz Date: Thu, 14 Mar 2024 16:32:33 +0100 Subject: [PATCH 5/5] Fix failing test --- packages/ui/test/council/pages/Election.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/test/council/pages/Election.test.tsx b/packages/ui/test/council/pages/Election.test.tsx index 660826fa7c..22b105ddaf 100644 --- a/packages/ui/test/council/pages/Election.test.tsx +++ b/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', () => {