From 66c054d3d88dc8229a622c51c3f33de99d9928a8 Mon Sep 17 00:00:00 2001 From: Tero Tikkanen Date: Wed, 6 Nov 2024 10:26:41 +0200 Subject: [PATCH] Support custom header or hiding it in ActionListBlock --- common/__generated__/graphql.ts | 25 +++++++++--- components/common/StreamField.tsx | 42 +++++++++++--------- components/contentblocks/ActionListBlock.tsx | 34 +++++++++++----- fragments/stream-field.fragment.ts | 7 +++- 4 files changed, 72 insertions(+), 36 deletions(-) diff --git a/common/__generated__/graphql.ts b/common/__generated__/graphql.ts index 534e8d9c8..554453c9a 100644 --- a/common/__generated__/graphql.ts +++ b/common/__generated__/graphql.ts @@ -6998,9 +6998,12 @@ type StreamFieldFragment_ActionCategoryFilterCardsBlock_Fragment = ( ); type StreamFieldFragment_ActionListBlock_Fragment = ( - { id?: string | null, blockType: string, field: string, categoryFilter?: ( + { heading?: string | null, helpText?: string | null, id?: string | null, blockType: string, field: string, categoryFilter?: ( { id: string } & { __typename?: 'Category' } + ) | null, groupByCategoryLevel?: ( + { id: string } + & { __typename?: 'CategoryLevel' } ) | null } & { __typename?: 'ActionListBlock' } ); @@ -10360,9 +10363,12 @@ export type GetContentPageQuery = ( ) | null> | null } & { __typename?: 'ActionCategoryFilterCardsBlock' } ) | ( - { id?: string | null, blockType: string, field: string, categoryFilter?: ( + { heading?: string | null, helpText?: string | null, id?: string | null, blockType: string, field: string, categoryFilter?: ( { id: string } & { __typename?: 'Category' } + ) | null, groupByCategoryLevel?: ( + { id: string } + & { __typename?: 'CategoryLevel' } ) | null } & { __typename?: 'ActionListBlock' } ) | ( @@ -11068,9 +11074,12 @@ export type GetContentPageQuery = ( ) | null> | null } & { __typename?: 'ActionCategoryFilterCardsBlock' } ) | ( - { id?: string | null, blockType: string, field: string, categoryFilter?: ( + { heading?: string | null, helpText?: string | null, id?: string | null, blockType: string, field: string, categoryFilter?: ( { id: string } & { __typename?: 'Category' } + ) | null, groupByCategoryLevel?: ( + { id: string } + & { __typename?: 'CategoryLevel' } ) | null } & { __typename?: 'ActionListBlock' } ) | ( @@ -11470,9 +11479,12 @@ export type GetContentPageQuery = ( ) | null> | null } & { __typename?: 'ActionCategoryFilterCardsBlock' } ) | ( - { id?: string | null, blockType: string, field: string, categoryFilter?: ( + { heading?: string | null, helpText?: string | null, id?: string | null, blockType: string, field: string, categoryFilter?: ( { id: string } & { __typename?: 'Category' } + ) | null, groupByCategoryLevel?: ( + { id: string } + & { __typename?: 'CategoryLevel' } ) | null } & { __typename?: 'ActionListBlock' } ) | ( @@ -11887,9 +11899,12 @@ export type GetHomePageQuery = ( ) | null> | null } & { __typename?: 'ActionCategoryFilterCardsBlock' } ) | ( - { id?: string | null, blockType: string, field: string, categoryFilter?: ( + { id?: string | null, heading?: string | null, helpText?: string | null, blockType: string, field: string, categoryFilter?: ( { id: string } & { __typename?: 'Category' } + ) | null, groupByCategoryLevel?: ( + { id: string } + & { __typename?: 'CategoryLevel' } ) | null } & { __typename?: 'ActionListBlock' } ) | ( diff --git a/components/common/StreamField.tsx b/components/common/StreamField.tsx index 74ef78527..7637233bc 100644 --- a/components/common/StreamField.tsx +++ b/components/common/StreamField.tsx @@ -1,33 +1,34 @@ import React from 'react'; -import { Container, Row, Col, ColProps } from 'reactstrap'; -import { gql } from '@apollo/client'; -import { ColumnProps } from 'reactstrap/types/lib/Col'; -import { usePlan } from 'context/plan'; -import images, { getBgImageAlignment } from 'common/images'; + +import type { StreamFieldFragmentFragment } from 'common/__generated__/graphql'; +import { getBgImageAlignment } from 'common/images'; import RichText from 'components/common/RichText'; -import QuestionAnswerBlock from 'components/contentblocks/QuestionAnswerBlock'; +import AccessibilityStatementComplianceStatusBlock from 'components/contentblocks/AccessibilityStatementComplianceStatusBlock'; +import AccessibilityStatementContactFormBlock from 'components/contentblocks/AccessibilityStatementContactFormBlock'; +import AccessibilityStatementContactInformationBlock from 'components/contentblocks/AccessibilityStatementContactInformationBlock'; +import AccessibilityStatementPreparationInformationBlock from 'components/contentblocks/AccessibilityStatementPreparationInformationBlock'; +import ActionCategoryFilterCardsBlock from 'components/contentblocks/ActionCategoryFilterCardsBlock'; +import ActionHighlightsBlock from 'components/contentblocks/ActionHighlightsBlock'; import ActionListBlock from 'components/contentblocks/ActionListBlock'; +import ActionStatusGraphsBlock from 'components/contentblocks/ActionStatusGraphsBlock'; +import CardListBlock from 'components/contentblocks/CardListBlock'; +import CartographyVisualisationBlock from 'components/contentblocks/CartographyVisualisationBlock'; import CategoryListBlock from 'components/contentblocks/CategoryListBlock'; import CategoryTreeBlock from 'components/contentblocks/CategoryTreeBlock'; -import IndicatorGroupBlock from 'components/contentblocks/IndicatorGroupBlock'; import FrontPageHeroBlock from 'components/contentblocks/FrontPageHeroBlock'; -import IndicatorShowcaseBlock from 'components/contentblocks/IndicatorShowcaseBlock'; -import CardListBlock from 'components/contentblocks/CardListBlock'; -import ActionHighlightsBlock from 'components/contentblocks/ActionHighlightsBlock'; -import ActionStatusGraphsBlock from 'components/contentblocks/ActionStatusGraphsBlock'; +import IndicatorGroupBlock from 'components/contentblocks/IndicatorGroupBlock'; import IndicatorHighlightsBlock from 'components/contentblocks/IndicatorHighlightsBlock'; +import IndicatorShowcaseBlock from 'components/contentblocks/IndicatorShowcaseBlock'; +import QuestionAnswerBlock from 'components/contentblocks/QuestionAnswerBlock'; import RelatedIndicatorsBlock from 'components/contentblocks/RelatedIndicatorsBlock'; import RelatedPlanListBlock from 'components/contentblocks/RelatedPlanListBlock'; -import ActionCategoryFilterCardsBlock from 'components/contentblocks/ActionCategoryFilterCardsBlock'; -import AccessibilityStatementComplianceStatusBlock from 'components/contentblocks/AccessibilityStatementComplianceStatusBlock'; -import AccessibilityStatementPreparationInformationBlock from 'components/contentblocks/AccessibilityStatementPreparationInformationBlock'; -import AccessibilityStatementContactFormBlock from 'components/contentblocks/AccessibilityStatementContactFormBlock'; -import AccessibilityStatementContactInformationBlock from 'components/contentblocks/AccessibilityStatementContactInformationBlock'; - -import type { StreamFieldFragmentFragment } from 'common/__generated__/graphql'; -import CartographyVisualisationBlock from 'components/contentblocks/CartographyVisualisationBlock'; +import { usePlan } from 'context/plan'; +import { Col, ColProps, Container, Row } from 'reactstrap'; +import { ColumnProps } from 'reactstrap/types/lib/Col'; import styled, { useTheme } from 'styled-components'; + import { STREAM_FIELD_FRAGMENT } from '@/fragments/stream-field.fragment'; + import { ErrorBoundary } from './ErrorBoundary'; import { ErrorPage } from './ErrorPage'; @@ -191,10 +192,13 @@ function StreamFieldBlock(props: StreamFieldBlockProps) { } case 'ActionListBlock': { const { categoryFilter } = block; + console.log('actionlistblock', block); return ( ); } diff --git a/components/contentblocks/ActionListBlock.tsx b/components/contentblocks/ActionListBlock.tsx index 8edacff1a..be3f36bf1 100644 --- a/components/contentblocks/ActionListBlock.tsx +++ b/components/contentblocks/ActionListBlock.tsx @@ -1,19 +1,20 @@ -import React, { useContext, useEffect } from 'react'; -import PropTypes from 'prop-types'; -import { Container, Row, Col } from 'reactstrap'; -import styled from 'styled-components'; -import { gql } from '@apollo/client'; -import { useQuery } from '@apollo/experimental-nextjs-app-support/ssr'; +import React, { useEffect } from 'react'; import { getActionTermContext } from 'common/i18n'; import ActionCard from 'components/actions/ActionCard'; import ActionCardList from 'components/actions/ActionCardList'; import ContentLoader from 'components/common/ContentLoader'; import ErrorMessage from 'components/common/ErrorMessage'; -import PlanContext, { usePlan } from 'context/plan'; +import { usePlan } from 'context/plan'; import { useTranslations } from 'next-intl'; -import { mapActionsToExpandDependencies } from '@/utils/actions.utils'; +import PropTypes from 'prop-types'; +import { Container } from 'reactstrap'; +import styled from 'styled-components'; + import { useWorkflowSelector } from '@/context/workflow-selector'; +import { mapActionsToExpandDependencies } from '@/utils/actions.utils'; +import { gql } from '@apollo/client'; +import { useQuery } from '@apollo/experimental-nextjs-app-support/ssr'; const GET_ACTION_LIST_FOR_BLOCK = gql` query GetActionListForBlock( @@ -48,8 +49,14 @@ const SectionHeader = styled.h2` } `; +type ActionListBlockProps = { + id?: string; + categoryId?: string; + heading?: string; + lead?: string; +}; const ActionListBlock = (props) => { - const { id = '', categoryId, color } = props; + const { id = '', categoryId, heading, lead } = props; const t = useTranslations(); const plan = usePlan(); @@ -77,11 +84,16 @@ const ActionListBlock = (props) => { const actionsWithDependencies = planActions?.map(mapActionsToExpandDependencies) ?? []; - const heading = t('actions', getActionTermContext(plan)); + const displayHeader = heading + ? heading + : t('actions', getActionTermContext(plan)); return ( - {heading && {heading}} + {/* Terrible hack to be able to hide header completely if it's set to '-' */} + {displayHeader && displayHeader !== '-' ? ( + {displayHeader} + ) : null}