From 560532c61bfe773881b5f2fd561b4e4cdaab532e Mon Sep 17 00:00:00 2001 From: Theophile Sandoz Date: Thu, 14 Mar 2024 18:43:35 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20Hotfix:=20Show=20election=20tab?= =?UTF-8?q?=20during=20idle=20stage=20(#4806)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 | 10 ++++ packages/ui/package.json | 2 +- packages/ui/src/app/components/SideBar.tsx | 4 +- packages/ui/src/app/pages/Council/Council.tsx | 2 +- .../app/pages/Election/Election.stories.tsx | 5 +- .../ui/src/app/pages/Election/Election.tsx | 46 ++++++++----------- .../Election/components/ElectionTabs.tsx | 7 +-- .../council/components/ElectionTabs.test.tsx | 2 +- .../ui/test/council/pages/Election.test.tsx | 2 +- 9 files changed, 40 insertions(+), 40 deletions(-) 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", 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/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' ? ( - + ) : ( )} 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/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', () => { 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', () => {