Merge pull request #4944 from minvws/release/2.84.0

release/2.84.0

.github/workflows/codeql-analysis.yml

@@ -23,7 +23,7 @@ on:
 jobs:
   analyze:
     name: Analyze
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     permissions:
       actions: read
       contents: read
@@ -32,6 +32,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
+        node-version: [ 18.18.2 ]
         language: ['javascript']
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
         # Learn more:
@@ -41,6 +42,11 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v2
 
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
         uses: github/codeql-action/init@v1

.github/workflows/infra-acceptance.yml

@@ -10,7 +10,7 @@ jobs:
   trigger-acceptance-build:
     environment: Acceptance
     name: Call Azure Pipeline
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - name: Azure Pipelines Action
         uses: Azure/[email protected]

.github/workflows/infra-develop.yml

@@ -8,7 +8,7 @@ jobs:
   trigger-develop-build:
     environment: Development
     name: Call Azure Pipeline
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - name: Azure Pipelines Action
         uses: Azure/pipelines@v1

.github/workflows/infra.yml

@@ -8,7 +8,7 @@ on:
 jobs:
   build:
     name: Call Azure Pipeline
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - name: Azure Pipelines Action
         uses: Azure/pipelines@v1

.github/workflows/main.yml

@@ -4,20 +4,28 @@ on: pull_request
 
 jobs:
   init:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - name: Cancel previous workflow
         uses: styfle/[email protected]
         with:
           access_token: ${{ github.token }}
 
   lint:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
+    strategy:
+      matrix:
+        node-version: [18.18.2]
     needs: init
     steps:
       - name: Check out repository
         uses: actions/checkout@v2
 
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
@@ -38,7 +46,10 @@ jobs:
         run: yarn lint
 
   compile:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
+    strategy:
+      matrix:
+        node-version: [18.18.2]
     needs: init
     steps:
       - name: Get target branch name (pull request)
@@ -49,6 +60,11 @@ jobs:
       - name: Check out repository
         uses: actions/checkout@v2
 
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
@@ -83,12 +99,20 @@ jobs:
         run: yarn typecheck
 
   test:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
+    strategy:
+      matrix:
+        node-version: [18.18.2]
     needs: init
     steps:
       - name: Check out repository
         uses: actions/checkout@v2
 
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
@@ -118,7 +142,7 @@ jobs:
         run: yarn test:ci
 
   docker:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     needs: init
     if: contains(github.head_ref, 'release')
     steps:

.github/workflows/sync-sanity-lokalize.yml

@@ -7,11 +7,19 @@ on:
 
 jobs:
   sync-after-feature:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
+    strategy:
+      matrix:
+        node-version: [18.18.2]
     steps:
       - name: Check out repository
         uses: actions/checkout@v2
 
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn config get cacheFolder)"

packages/app/.env.local.example

@@ -16,3 +16,5 @@ SANITY_PREVIEW_SECRET=
 
 # set content of version string
 NEXT_PUBLIC_COMMIT_ID=n/a
+
+NEXT_PUBLIC_PHASE=develop

packages/app/schema/nl/deceased_cbs.json

@@ -24,13 +24,13 @@
           "type": "integer"
         },
         "expected": {
-          "type": "integer"
+          "type": ["integer", "null"]
         },
         "expected_min": {
-          "type": "integer"
+          "type": ["integer", "null"]
         },
         "expected_max": {
-          "type": "integer"
+          "type": ["integer", "null"]
         },
         "date_start_unix": {
           "type": "integer"

packages/app/src/components/aside/menu.tsx

@@ -1,27 +1,37 @@
-import css from '@styled-system/css';
-import { resolveHref } from 'next/dist/shared/lib/router/router';
-import { NextRouter, useRouter } from 'next/router';
-import { ReactNode } from 'react';
-import styled from 'styled-components';
-import { UrlObject } from 'url';
-import chevronUrl from '~/assets/chevron.svg';
-import { Box } from '~/components/base';
 import { Anchor, Heading } from '~/components/typography';
-import { ExpandedSidebarMap, Layout } from '~/domain/layout/logic/types';
-import { space, SpaceValue } from '~/style/theme';
-import { colors } from '@corona-dashboard/common';
+import { AsideTitle } from './title';
 import { asResponsiveArray } from '~/style/utils';
+import { Box } from '~/components/base';
+import { colors } from '@corona-dashboard/common';
+import { ExpandedSidebarMap, Layout } from '~/domain/layout/logic/types';
 import { Link } from '~/utils/link';
+import { NextRouter, useRouter } from 'next/router';
+import { ReactNode } from 'react';
+import { resolveHref } from 'next/dist/shared/lib/router/router';
+import { space, SpaceValue } from '~/style/theme';
+import { UrlObject } from 'url';
 import { useBreakpoints } from '~/utils/use-breakpoints';
-import { AsideTitle } from './title';
+import { useCollapsible } from '~/utils/use-collapsible';
+import chevronUrl from '~/assets/chevron.svg';
+import css from '@styled-system/css';
+import styled from 'styled-components';
+import { ArchivedPath, useArchivedPaths } from '~/utils/use-archived-paths';
 
 type Url = UrlObject | string;
 
 export function MenuRenderer({ items }: { items: ExpandedSidebarMap<Layout> }) {
   return (
     <>
       {items.map((x) =>
-        'items' in x ? (
+        'items' in x && (x.key === 'archived_metrics' || x.title === 'Gearchiveerd') ? (
+          <CollapsibleCategoryMenu {...x}>
+            {x.items.map((item) => (
+              // item includes key, ESLint gives a false positive here
+              // eslint-disable-next-line react/jsx-key
+              <MenuItemLink {...item} />
+            ))}
+          </CollapsibleCategoryMenu>
+        ) : 'items' in x ? (
           <CategoryMenu {...x}>
             {x.items.map((item) => (
               // item includes key, ESLint gives a false positive here
@@ -45,6 +55,32 @@ export function Menu({ children, spacing }: { children: ReactNode; spacing?: Spa
   );
 }
 
+export function CollapsibleCategoryMenu({ title, children, icon }: { children: ReactNode; title?: string; icon: ReactNode; key: string }) {
+  const router = useRouter();
+  const archivedPaths = useArchivedPaths();
+  const collapsible = useCollapsible({ isOpen: isCurrentRouteArchivedPage(router, archivedPaths) });
+  return (
+    <Box as="li" spacing={2} borderTop={`1px solid ${colors.gray2}`}>
+      {title && icon && (
+        <>
+          <Box display="flex" flexDirection="row" flexWrap="nowrap" alignItems="center">
+            <Box width="100%">
+              <Box paddingX={space[2]} paddingTop={space[3]} display="flex" justifyContent="space-between" alignItems="center">
+                <Box display="flex" alignItems="center">
+                  <Icon>{icon}</Icon>
+                  <Heading level={5}>{title}</Heading>
+                </Box>
+                <Box pr={space[1]}>{collapsible.button()}</Box>
+              </Box>
+            </Box>
+          </Box>
+          {collapsible.content(<Menu>{children}</Menu>)}
+        </>
+      )}
+    </Box>
+  );
+}
+
 export function CategoryMenu({ title, children, icon }: { children: ReactNode; title?: string; icon: ReactNode }) {
   return (
     <Box as="li" spacing={2}>
@@ -99,6 +135,25 @@ function isActivePath(router: NextRouter, href: Url) {
   return currentPath === hrefPath;
 }
 
+function isCurrentRouteArchivedPage(router: NextRouter, archivedPaths: ArchivedPath) {
+  const currentPath = (router.asPath || '/').split('?')[0];
+  const code = String(router.query.code);
+
+  if (currentPath.includes('landelijk')) {
+    return Object.values(archivedPaths.nl).some((archivedPathFunction) => archivedPathFunction() === currentPath);
+  }
+
+  if (currentPath.includes('gemeente')) {
+    return Object.values(archivedPaths.gm).some((archivedPathFunction) => archivedPathFunction(code) === currentPath);
+  }
+
+  if (currentPath.includes('verantwoording')) {
+    return Object.values(archivedPaths.dataExplained).some((archivedPathFunction) => archivedPathFunction() === currentPath);
+  }
+
+  return false;
+}
+
 const Unavailable = styled.span(
   css({
     display: 'block',

packages/app/src/components/time-series-chart/components/series.tsx

@@ -115,6 +115,7 @@ function SeriesUnmemoized<T extends TimestampedValue>({ seriesConfig, seriesList
                   fillOpacity={config.fillOpacity}
                   getX={getX}
                   getY={getY}
+                  bandPadding={config.bandPadding}
                   bounds={bounds}
                   yScale={yScale}
                   id={id}

packages/app/src/components/time-series-chart/logic/series.ts

@@ -123,6 +123,7 @@ export interface BarSeriesDefinition<T extends TimestampedValue> extends SeriesC
   shortLabel?: string;
   color: string;
   fillOpacity?: number;
+  bandPadding?: number;
 }
 
 export interface BarOutOfBoundsSeriesDefinition<T extends TimestampedValue> extends SeriesCommonDefinition {

packages/app/src/pages/index.tsx

@@ -16,8 +16,9 @@ import { TopicalSectionHeader } from '~/domain/topical/components/topical-sectio
 import { TopicalThemeHeader } from '~/domain/topical/components/topical-theme-header';
 import { Languages, SiteText } from '~/locale';
 import { getArticleParts, getPagePartsQuery } from '~/queries/get-page-parts-query';
+import { getThermometerStructureQuery } from '~/queries/get-thermometer-structure-query';
 import { getTopicalStructureQuery } from '~/queries/get-topical-structure-query';
-import { TopicalSanityData } from '~/queries/query-types';
+import { ThermometerConfig, TopicalSanityData } from '~/queries/query-types';
 import { StaticProps, createGetStaticProps } from '~/static-props/create-get-static-props';
 import { createGetContent, getLastGeneratedDate, getLokalizeTexts } from '~/static-props/get-data';
 import { space } from '~/style/theme';
@@ -40,17 +41,20 @@ export const getStaticProps = createGetStaticProps(
     const { content } = await createGetContent<{
       parts: PagePartQueryResult<ArticleParts | LinkParts | RichTextParts>;
       topicalStructure: TopicalSanityData;
+      thermometerStructure: ThermometerConfig;
     }>((context) => {
       const { locale } = context;
       return `{
         "parts": ${getPagePartsQuery('topical_page')},
-        "topicalStructure": ${getTopicalStructureQuery(locale)}
+        "topicalStructure": ${getTopicalStructureQuery(locale)},
+        "thermometerStructure": ${getThermometerStructureQuery(locale)}
       }`;
     })(context);
     return {
       content: {
         articles: getArticleParts(content.parts.pageParts, 'topicalPageArticles')?.articles,
         topicalStructure: content.topicalStructure,
+        thermometerStructure: content.thermometerStructure,
       },
     };
   }
@@ -59,9 +63,9 @@ export const getStaticProps = createGetStaticProps(
 const Home = (props: StaticProps<typeof getStaticProps>) => {
   const { pageText, content, lastGenerated } = props;
 
-  const { topicalStructure } = content;
+  const { topicalStructure, thermometerStructure } = content;
 
-  const { topicalConfig, thermometer, kpiThemes, weeklySummary, advice } = topicalStructure;
+  const { topicalConfig, kpiThemes, weeklySummary, advice } = topicalStructure;
 
   const { textNl, textShared } = useDynamicLokalizeTexts<LokalizeTexts>(pageText, selectLokalizeTexts);
 
@@ -77,7 +81,7 @@ const Home = (props: StaticProps<typeof getStaticProps>) => {
     md: `repeat(3, 1fr)`,
   };
 
-  const { currentSeverityLevel, currentSeverityLevelTexts } = getThermometerSeverityLevels(thermometer);
+  const { currentSeverityLevel, currentSeverityLevelTexts } = getThermometerSeverityLevels(thermometerStructure);
 
   return (
     <Layout {...metadata} lastGenerated={lastGenerated}>