From 16023a7e70f20234cac5a1ece1ab6d65ded6d3bb Mon Sep 17 00:00:00 2001
From: HO <93981322+VWSCoronaDashboard19@users.noreply.github.com>
Date: Thu, 10 Nov 2022 13:27:04 +0100
Subject: [PATCH] Added extra subtitle field for topical page in Sanity (#4485)

* fix: added extra subtitle field for topical page in Sanity

* fix: add nullable type
---
 .../topical/components/topical-theme-header.tsx | 17 ++++-------------
 packages/app/src/pages/index.tsx                | 12 +-----------
 .../src/queries/get-topical-structure-query.ts  |  1 +
 packages/app/src/queries/query-types.ts         |  1 +
 packages/cms/src/schemas/topical/thermometer.ts |  5 +++++
 5 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/packages/app/src/domain/topical/components/topical-theme-header.tsx b/packages/app/src/domain/topical/components/topical-theme-header.tsx
index 32a329128b..b26cd806d5 100644
--- a/packages/app/src/domain/topical/components/topical-theme-header.tsx
+++ b/packages/app/src/domain/topical/components/topical-theme-header.tsx
@@ -6,25 +6,21 @@ import { TopicalIcon } from '@corona-dashboard/common/src/types';
 import DynamicIcon from '~/components/get-icon-by-name';
 import theme from '~/style/theme';
 import { PortableTextEntry } from '@sanity/block-content-to-react';
-import { Markdown } from '~/components';
 import { fontSizes } from '~/style/theme';
 
 interface TopicalThemeHeaderProps {
   title: string;
   subtitle?: PortableTextEntry[] | null;
-  subtitleThermometer?: string | null;
   icon: TopicalIcon;
 }
 
-export const TopicalThemeHeader = ({ title, subtitle, subtitleThermometer, icon }: TopicalThemeHeaderProps) => {
+export const TopicalThemeHeader = ({ title, subtitle, icon }: TopicalThemeHeaderProps) => {
   return (
     <Box spacing={3}>
       <Box display="flex" justifyContent="start" alignItems="center">
-        {icon && (
-          <TopicalThemeHeaderIcon>
-            <DynamicIcon name={icon} aria-hidden="true" />
-          </TopicalThemeHeaderIcon>
-        )}
+        <TopicalThemeHeaderIcon>
+          <DynamicIcon name={icon} aria-hidden="true" />
+        </TopicalThemeHeaderIcon>
         <Heading level={2}>{title}</Heading>
       </Box>
       {subtitle && (
@@ -32,11 +28,6 @@ export const TopicalThemeHeader = ({ title, subtitle, subtitleThermometer, icon
           <RichContent blocks={subtitle} />
         </Box>
       )}
-      {subtitleThermometer && (
-        <Box fontSize={3}>
-          <Markdown content={subtitleThermometer} />
-        </Box>
-      )}
     </Box>
   );
 };
diff --git a/packages/app/src/pages/index.tsx b/packages/app/src/pages/index.tsx
index 6535b090b0..74f6b46aff 100644
--- a/packages/app/src/pages/index.tsx
+++ b/packages/app/src/pages/index.tsx
@@ -116,17 +116,7 @@ const Home = (props: StaticProps<typeof getStaticProps>) => {
 
           {currentSeverityLevelTexts && (
             <Box marginY={space[5]} paddingX={{ _: space[3], sm: space[4] }} maxWidth={TOPICAL_SEVERITY_INDICATOR_TILE_MAX_WIDTH}>
-              <TopicalThemeHeader
-                title={thermometer.title}
-                subtitleThermometer={
-                  thermometer.levelDescription &&
-                  replaceVariablesInText(thermometer.levelDescription, {
-                    level: currentSeverityLevel,
-                    label: currentSeverityLevelTexts.label,
-                  })
-                }
-                icon={THERMOMETER_ICON_NAME}
-              />
+              <TopicalThemeHeader title={thermometer.title} subtitle={thermometer.subTitle} icon={THERMOMETER_ICON_NAME} />
 
               <SeverityIndicatorTile
                 level={currentSeverityLevel}
diff --git a/packages/app/src/queries/get-topical-structure-query.ts b/packages/app/src/queries/get-topical-structure-query.ts
index 5045ba9ec6..a981ef2405 100644
--- a/packages/app/src/queries/get-topical-structure-query.ts
+++ b/packages/app/src/queries/get-topical-structure-query.ts
@@ -54,6 +54,7 @@ export function getTopicalStructureQuery(locale: string) {
         _type == 'thermometer' && !(_id in path("drafts.**"))
       ][0]{
         'title': title.${locale},
+        'subTitle': subTitle.${locale},
         currentLevel,
         'thermometerLevels': thermometerLevels[]->{
           'level': level,
diff --git a/packages/app/src/queries/query-types.ts b/packages/app/src/queries/query-types.ts
index 6e5301c4a7..325bcd32ec 100644
--- a/packages/app/src/queries/query-types.ts
+++ b/packages/app/src/queries/query-types.ts
@@ -11,6 +11,7 @@ export interface TopicalSanityData {
 
 interface ThermometerConfig {
   title: string;
+  subTitle: PortableTextEntry[] | null;
   currentLevel: SeverityLevel;
   datesLabel: string;
   levelDescription: string;
diff --git a/packages/cms/src/schemas/topical/thermometer.ts b/packages/cms/src/schemas/topical/thermometer.ts
index 254978d645..ff19b183bb 100644
--- a/packages/cms/src/schemas/topical/thermometer.ts
+++ b/packages/cms/src/schemas/topical/thermometer.ts
@@ -16,6 +16,11 @@ export const thermometer = {
       type: 'localeString',
       validation: REQUIRED,
     },
+    {
+      title: 'De beschrijving van de thermometer',
+      name: 'subTitle',
+      type: 'localeRichContentBlock'
+    },
     {
       title: 'Huidige stand',
       name: 'currentLevel',