Support custom header or hiding it in ActionListBlock

kausaltech · Nov 6, 2024 · 66c054d · 66c054d
1 parent 48bdb97
commit 66c054d
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 36 deletions.
diff --git a/common/__generated__/graphql.ts b/common/__generated__/graphql.ts
diff --git 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 (
         <ActionListBlock
           categoryId={categoryFilter?.id || page.category.id}
           color={color}
+          heading={block.heading}
+          lead={block.helpText}
         />
       );
     }

diff --git 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 (
     <ActionListSection id={id}>
       <Container>
-        {heading && <SectionHeader>{heading}</SectionHeader>}
+        {/* Terrible hack to be able to hide header completely if it's set to '-' */}
+        {displayHeader && displayHeader !== '-' ? (
+          <SectionHeader>{displayHeader}</SectionHeader>
+        ) : null}
         <ActionCardList
           actions={actionsWithDependencies}
           groupBy={groupBy}

diff --git a/fragments/stream-field.fragment.ts b/fragments/stream-field.fragment.ts
@@ -1,6 +1,6 @@
+import images from '@/common/images';
 import { gql } from '@apollo/client';
 
-import images from '@/common/images';
 import { CATEGORY_FRAGMENT } from './category.fragment';
 
 export const STREAM_FIELD_FRAGMENT = gql`
@@ -73,6 +73,11 @@ export const STREAM_FIELD_FRAGMENT = gql`
       categoryFilter {
         id
       }
+      heading
+      helpText
+      groupByCategoryLevel {
+        id
+      }
     }
     ... on AdaptiveEmbedBlock {
       fullWidth