Merge branch 'acceptance' into production

.github/workflows/django-code-quality.yml

@@ -53,7 +53,7 @@ jobs:
         uses: psf/black@stable
         with:
           options: --check --line-length 100 --exclude "^.*\b(migrations)\b.*$"
-          version: "~= 22.12"
+          version: "~= 24.4.2"
       - name: Run Tests
         run: |
           python manage.py test

docker-compose.yml

@@ -61,7 +61,6 @@ services:
     environment:
       ALLOWED_HOSTS: "*"
       AZURE_ACCOUNT_NAME: holonstorage
-#      AZURE_STORAGE_KEY:
       MEDIA_LOCATION: media-dev
       STATIC_LOCATION: static-dev
       DB_HOST: db
@@ -73,6 +72,7 @@ services:
       DOMAIN_HOST: http://localhost:8000
       N_WORKERS: 2
       DJANGO_SETTINGS_MODULE: pipit.settings.prod
+      SENTRY_ENVIRONMENT: local
     env_file: ./docker/config/python.env
 
   python-test:

docker/config/python.example.env

@@ -14,3 +14,4 @@ DOMAIN_HOST="https://pizzaoven.holontool.nl"
 # Set to enable remote debugging with PyCharm or IntelliJ
 PYCHARM_IP=172.17.0.1
 PYCHARM_PORT=9222
+SENTRY_DSN=https://764e9f2b886741bcbcfd2acd74a7f7b0@o4505045746384896.ingest.sentry.io/4505045759361024

frontend/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "next/babel",
+      {
+        "preset-react": {
+          "runtime": "automatic",
+          "importSource": "@emotion/react"
+        }
+      }
+    ]
+  ],
+  "plugins": ["@emotion/babel-plugin"]
+}

frontend/.eslintrc.json

@@ -6,8 +6,6 @@
       "plugin:@typescript-eslint/recommended"
     ],
     "rules": {
-      "@typescript-eslint/no-explicit-any": "error",
-      "@typescript-eslint/no-unused-vars": "error"
+      "@typescript-eslint/no-unused-vars": ["error", { "args": "none" }]
     }
   }
-

frontend/components/Blocks/ContentBlocks.tsx

@@ -4,10 +4,10 @@ import {
   CardBlockVariant,
   Graphcolor,
   HeroBlockVariant,
-  PageProps,
+  PageProps, SectionVariant, StepIndicatorVariant,
   TextAndMediaVariant,
   TitleBlockVariant,
-  WikiLinks,
+  WikiLink,
 } from "../../containers/types";
 import ButtonsAndMediaBlock from "./ButtonsAndMediaBlock/ButtonsAndMediaBlock";
 import CardBlock from "./CardsBlock/CardBlock";
@@ -20,9 +20,10 @@ import { Content, SavedElements } from "./SectionBlock/types";
 import TableBlock from "./TableBlock/TableBlock";
 import TextAndMediaBlock from "./TextAndMediaBlock/TextAndMediaBlock";
 import TitleBlock from "./TitleBlock/TitleBlock";
+import {StepIndicatorWrapper} from "@/components/Storyline/Steps/StepIndicatorWrapper";
 
 type ContentBlockProps = PageProps<
-  TextAndMediaVariant | HeroBlockVariant | TitleBlockVariant | CardBlockVariant
+  TextAndMediaVariant | HeroBlockVariant | TitleBlockVariant | CardBlockVariant | SectionVariant | StepIndicatorVariant
 >;
 
 const ContentBlocks = ({
@@ -37,7 +38,7 @@ const ContentBlocks = ({
   feedbackmodals?: FeedbackModal[];
   pagetype?: string;
   graphcolors?: Graphcolor[];
-  wikilinks?: WikiLinks[];
+  wikilinks?: WikiLink[];
   pagetitle?: string;
 }) => {
   let targetValuesPreviousSections = new Map();
@@ -269,6 +270,52 @@ const ContentBlocks = ({
             return <TitleBlock key={`titleblock ${contentItem.id}`} data={contentItem} />;
           case "card_block":
             return <CardBlock key={`cardsblock ${contentItem.id}`} data={contentItem} />;
+          case "step_indicator":
+            return (
+              <StepIndicatorWrapper key={contentItem.id} stepIndicatorBlock={contentItem}>
+                  {contentItem.value.map((section) => {
+                      switch (section.type) {
+                        case "step_anchor":
+                          // anchor to scroll to
+                          return (
+                            <span id={section.id} key={section.id} style={{
+                              display: "block",
+                              position: "relative",
+                              top: "-4.5rem", // compensate for fixed site header
+                              visibility: "hidden",
+                            }} />
+                          )
+                        case "section":
+                          sectionCount++;
+                          const newContent = addTargetValues(targetValuesPreviousSections, section);
+                          //if there are any savedValues in the parameters, these are added to the section
+                          const savedValuesContent =
+                            Object.keys(savedValues).length !== 0
+                              ? addSavedValues(savedValues, newContent, sectionCount)
+                              : newContent;
+                          updateTargetValues(section.value.content);
+
+                          return (
+                            <SectionBlock
+                              key={`section ${section.id}`}
+                              pageSectionCount={sectionCount}
+                              data={savedValuesContent}
+                              pagetype={pagetype}
+                              feedbackmodals={feedbackmodals ?? []}
+                              graphcolors={graphcolors ?? []}
+                              savePageValues={saveSectionValues}
+                              saveScenario={saveScenario}
+                              scenarioDiffElements={scenarioDiffElements}
+                              wikilinks={wikilinks}
+                              pagetitle={pagetitle}
+                            />
+                          )
+                        default:
+                          console.log("Not implemented block type: ", section);
+                      }
+                  })}
+              </StepIndicatorWrapper>
+            )
           case "section":
             sectionCount++;
             const newContent = addTargetValues(targetValuesPreviousSections, contentItem);

frontend/components/Blocks/SectionBlock/CostBenefitModal/CostBenefitModal.tsx

@@ -2,7 +2,7 @@ import CostBenefitChart from "@/components/CostBenefit/CostBenefitChart";
 import CostBenefitDetail from "@/components/CostBenefit/CostBenefitDetail";
 import CostBenefitTable from "@/components/CostBenefit/CostBenefitTable";
 import InteractiveInputPopover from "@/components/InteractiveInputs/InteractiveInputPopover";
-import { Graphcolor, WikiLinks } from "@/containers/types";
+import { Graphcolor, WikiLink } from "@/containers/types";
 import { Tab } from "@headlessui/react";
 import classNames from "classnames";
 import { useEffect, useState } from "react";
@@ -33,7 +33,7 @@ type Props = {
     overview: Record<string, unknown>;
   };
   graphcolors: Graphcolor[];
-  wikilinks?: WikiLinks[];
+  wikilinks?: WikiLink[];
   pagetitle?: string;
 };
 
@@ -50,12 +50,16 @@ export default function CostBenefitModal({
 
   useEffect(() => {
     costBenefitData.detail && setSubgroup(Object.keys(costBenefitData.detail)[0]);
-  }, []);
 
-  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
-    e.preventDefault();
-    handleClose();
-  };
+      window.location.hash = "#kosten-baten-" + Math.round(Math.random() * 10_000)
+      const handlePopState = (event: PopStateEvent) => {
+          handleClose()
+      }
+
+      window.addEventListener('popstate', handlePopState)
+
+      return () => window.removeEventListener('popstate', handlePopState)
+  }, []);
 
   const convertGraphData = data => {
     const returnArr: unknown[] = [];
@@ -78,7 +82,9 @@ export default function CostBenefitModal({
 
   return (
     <div className="h-screen bg-white">
-      <div className="bg-white py-6 px-10 lg:px-16 fixed top-[5rem] min-[699px]:top-[5.5rem] inset-x-0 mx-auto h-[calc(100%-5rem)] md:h-[calc(100%-5.5rem)] z-30">
+      <div className="bg-white py-6 px-10 top-0 lg:px-16 fixed inset-x-0 mx-auto z-50" style={{
+          height: "100%",
+      }}>
         <div className="block h-full w-full">
           <div className="flex flex-1 flex-col h-full">
             <Tab.Group selectedIndex={selectedIndex} onChange={setSelectedIndex}>
@@ -134,7 +140,7 @@ export default function CostBenefitModal({
                     ))}
                 </div>
                 <div className="xl:w-[28%] flex flex-row-reverse">
-                  <CloseButton onClick={handleClick} />
+                  <CloseButton onClick={() => history.back()} />
                 </div>
               </div>
 

frontend/components/Blocks/SectionBlock/HolarchyTab/HolarchyTab.tsx

@@ -7,8 +7,18 @@ import HolarchyFeedbackImage, {
 import ContentColumn from "../ContentColumn";
 import LegendModal, { LegendItem } from "./LegendModal";
 import {KPIsByScale} from "@/api/holon";
+import {CloseButton} from "@/components/Button/CloseButton"
+import {ChevronLeftIcon} from "@heroicons/react/20/solid"
+import {WikiLink} from "@/containers/types"
+import InteractiveInputPopover, {
+    PopoverHorizontalPosition,
+} from "@/components/InteractiveInputs/InteractiveInputPopover"
+import {useEffect} from "react"
 
 type HolarchyTab = {
+  id: string;
+  pagetitle: string;
+  wikilink?: WikiLink;
   holarchyFeedbackImages: Array<HolarchyFeedbackImageProps>;
   legendItems: Array<LegendItem>;
   content: Array<Content>;
@@ -20,10 +30,13 @@ type HolarchyTab = {
   textLabelLocal: string;
   loading: boolean;
   kpis: KPIsByScale;
-  legend: boolean;
+  closeHolarchyModal: () => void,
 };
 
 export default function HolarchyTab({
+  id,
+  pagetitle,
+  wikilink,
   holarchyFeedbackImages,
   legendItems,
   content,
@@ -35,48 +48,87 @@ export default function HolarchyTab({
   textLabelLocal,
   loading,
   kpis,
-  legend,
+  closeHolarchyModal,
 }: HolarchyTab) {
   const levels = ["national", "intermediate", "local"];
 
+  useEffect(() => {
+      window.location.hash = "#holarchie-" + id
+      const handlePopState = (event: PopStateEvent) => {
+          // prevent scrolling back to a section after closing the modal
+          window.location.hash = "#"
+          closeHolarchyModal()
+      }
+
+      window.addEventListener('popstate', handlePopState)
+
+      return () => window.removeEventListener('popstate', handlePopState)
+  })
+
   return (
-    <div className="w-screen h-screen bg-white">
-      <div className="bg-white fixed top-[4.7rem] min-[700px]:top-[4.7rem] overflow-auto md:overflow-hidden inset-x-0 mx-auto h-[calc(100%-11rem)] min-[700px]:h-[calc(100%-8rem)] w-screen z-15 mt-14 grid grid-rows-9 grid-cols-1 md:grid-cols-3 md:grid-rows-3 ">
-        {/*Interactive input -  left column */}
-        {levels.map((level, index) => {
-          const cssClasses = [
-            "row-start-1 bg-holon-holarchy-national",
-            "row-start-2 bg-holon-holarchy-intermediate",
-            "row-start-3 bg-holon-holarchy-local",
-          ];
-          return (
-            <div
-              key={index}
-              className={`${cssClasses[index]} p-4  overflow-auto row-span-1 col-start-1 col-span-1 md:col-start-1 md:col-span-1  md:row-span-1  `}>
-              <p className="font-semibold	">
-                {level == "national"
-                  ? textLabelNational
-                  : level == "local"
-                  ? textLabelLocal
-                  : level == "intermediate"
-                  ? textLabelIntermediate
-                  : ""}
-              </p>
-              <ContentColumn
-                dataContent={dataContent}
-                content={content}
-                handleContentChange={handleContentChange}
-                handleMedia={handleMedia}
-                selectedLevel={level}
-              />
-            </div>
-          );
-        })}
+    <div
+        className="bg-white fixed top-0 overflow-auto md:overflow-hidden inset-x-0 mx-auto w-screen"
+        style={{
+            height: "100vh",
+            display: "flex",
+            flexDirection: "column",
+            zIndex: 50,
+        }}
+    >
+        <div
+            className="sticky flex flex-row items-center bg-white px-10 lg:px-16 pl-4 shadow-[0_3px_2px_-2px_rgba(0,0,0,0.3)]"
+            style={{
+                justifyContent: "space-between",
+            }}
+        >
+          <button onClick={() => history.back()} style={{display: "flex", alignItems: "center"}}>
+              <ChevronLeftIcon style={{width: "2rem"}}/>
+              Terug naar {pagetitle}
+          </button>
+          <CloseButton onClick={() => history.back()} style={{
+            padding: ".5rem",
+            height: "100%",
+            width: "3rem",
+          }}/>
+        </div>
+        <div className="bg-white z-15 grid grid-rows-9 grid-cols-1 md:grid-cols-3 md:grid-rows-3" style={{
+            flexGrow: "1",
+            overflow: "hidden",
+        }}>
+          {/* Left column: Legend + Interactive input in  */}
+          <div className="bg-gray-100 p-4 grid-rows-3 overflow-y-auto row-span-3 col-start-1 col-span-1 relative">
+            {wikilink && (
+                <InteractiveInputPopover
+                    style={{position: "absolute", top: "1rem", right: "1rem"}}
+                    textColor="text-holon-blue-900"
+                    name={"Meer informatie"}
+                    titleWikiPage={`Meer informatie over Holarchie binnen ${pagetitle}`}
+                    linkWikiPage={wikilink.value}
+                    target="_blank"
+                    popoverHorizontalPosition={PopoverHorizontalPosition.LEFT}
+                />
+            )}
+            <LegendModal data={legendItems}/>
+            <br/>
+            {/* Display content in order national - regional - local */}
+            {levels.map((level, index) => {
+              return (
+                  <ContentColumn
+                    key={index}
+                    dataContent={dataContent}
+                    content={content}
+                    handleContentChange={handleContentChange}
+                    handleMedia={handleMedia}
+                    selectedLevel={level}
+                  />
+              );
+            })}
+          </div>
 
         <div className="row-span-1 row-start-4 col-start-1 col-span-1 md:col-start-2  md:col-span-1  md:row-span-3 md:row-start-1 grid grid-rows grid-rows-3 overflow-hidden">
           {/*image - highest block*/}
           <div className="row-start-1 bg-holon-holarchy-national row-span-1 col-start-1 col-span-1 ">
-            {legend && <LegendModal data={legendItems} />}
+
           </div>
 
           {/*image - middle block showing image*/}