fix: Muokkaa tabit käyttäytymään linkkien tavalla automaattitestionge…

…lmien vähentämiseksi (#469)

* wip

* korvaa tabit vuorovaikutussivulla

* muokkaa nahtavillaolovaiheen tabit kuntoon

* hyvaksymisvaiheen tabit

* aloita paatoskomponenttien muutokset - muuta kansion nimi hyvaksyminen -> paatos

* poista jatkopaatos komponentit - muutokset tehdään paatos-kansion komponentteihin

* aloita jatkopaatosmuutosten tekemista paatos-komponentteihin

* jatkopaatos1 kuntoon

* korjaa jatkopaatoksien teksteja aineistosivuilla

* poista turhat importit

* korjaa testejä ja korjaa toteutusta, että testit menee taas läpi

* kansalaispuolen tabit uusiks

* korjaa siirrä menneisyyteen painikkeiden siirtämään julkaisua PaatosTyyppiin perustuen

* uudelleennimeä testejä ja korjaile niitä; autotestit saattasi jopa mennä läpi

cypress/integration/2-perusta-projekti/9-hyvaksyntavaihe.spec.js → cypress/integration/2-perusta-projekti/009-hyvaksyntavaihe.spec.js

@@ -2,7 +2,7 @@
 import dayjs from "dayjs";
 import { formatDate } from "../../../src/util/dateUtils";
 import { ProjektiTestCommand } from "../../../common/testUtil.dev";
-import { lisaaPaatosJaAineistot, tallennaKasittelynTilaJaSiirraMenneisyyteen } from './hyvaksyntavaihe';
+import { lisaaPaatosJaAineistot, tallennaKasittelynTilaJaSiirraMenneisyyteen } from "./hyvaksyntavaihe";
 
 const projektiNimi = Cypress.env("projektiNimi");
 const oid = Cypress.env("oid");
@@ -50,17 +50,17 @@ describe("9 - Projektin hyvaksymispaatosavaiheen kuulutustiedot", () => {
     cy.get("#kuulutuksentiedot_tab").click();
 
     const today = formatDate(dayjs());
-    cy.get('[name="hyvaksymisPaatosVaihe.kuulutusPaiva"]').should("be.enabled").type(today, {
+    cy.get('[name="paatos.kuulutusPaiva"]').should("be.enabled").type(today, {
       waitForAnimations: true,
     });
 
-    cy.get('[name="hyvaksymisPaatosVaihe.hallintoOikeus"]').select("HELSINKI");
-    cy.get('[name="hyvaksymisPaatosVaihe.ilmoituksenVastaanottajat.kunnat.0.sahkoposti"]').clear().type("test@vayla.fi");
-    cy.get('[name="hyvaksymisPaatosVaihe.ilmoituksenVastaanottajat.kunnat.1.sahkoposti"]').clear().type("test@vayla.fi");
+    cy.get('[name="paatos.hallintoOikeus"]').select("HELSINKI");
+    cy.get('[name="paatos.ilmoituksenVastaanottajat.kunnat.0.sahkoposti"]').clear().type("test@vayla.fi");
+    cy.get('[name="paatos.ilmoituksenVastaanottajat.kunnat.1.sahkoposti"]').clear().type("test@vayla.fi");
 
     cy.get("#save_and_send_for_acceptance").click();
     cy.contains("Lähetys onnistui", { timeout: 30000 });
-    cy.get("#kuulutuksentiedot_luku_tab").click();
+    cy.get("#kuulutuksentiedot_tab").click();
     cy.get("#button_open_acceptance_dialog")
       .should("be.enabled")
       .scrollIntoView({ offset: { top: 500, left: 0 } })
@@ -70,7 +70,7 @@ describe("9 - Projektin hyvaksymispaatosavaiheen kuulutustiedot", () => {
     cy.contains("Hyväksyminen onnistui", { timeout: 30000 });
 
     cy.reload();
-    cy.get("#kuulutuksentiedot_luku_tab").click();
+    cy.get("#kuulutuksentiedot_tab").click();
 
     cy.contains("Kuulutus nähtäville asettamisesta on julkaistu");
 

cypress/integration/2-perusta-projekti/10-hyvaksyntavaihe.spec.js → cypress/integration/2-perusta-projekti/011-jatkopaatos.spec.js

@@ -75,11 +75,11 @@ describe("10 - Projektin jatkopaatos1vaiheen kuulutustiedot", () => {
 
     // Test that navigation now has "1. jatkaminen" link
 
-    cy.visit(Cypress.env("host") + "/yllapito/projekti/" + oid + "/jatkaminen1", { timeout: 30000 }).reload();
-    cy.contains("Päätös ja päätöksen liitteenä oleva aineistot");
+    cy.visit(Cypress.env("host") + "/yllapito/projekti/" + oid + "/jatkaminen1/aineisto", { timeout: 30000 }).reload();
+    cy.contains("Päätös ja päätöksen liitteenä oleva aineisto");
   });
 
-  it("Lisaa paatokset ja aineistot", { scrollBehavior: "center" }, () => {
+  it("Lisää päätökset ja aineistot", { scrollBehavior: "center" }, () => {
     cy.login("A1");
 
     cy.visit(Cypress.env("host") + "/yllapito/projekti/" + oid + "/jatkaminen1", { timeout: 30000 });
@@ -95,7 +95,7 @@ describe("10 - Projektin jatkopaatos1vaiheen kuulutustiedot", () => {
     selectAllAineistotFromCategory("#aineisto_accordion_Toimeksianto1");
     cy.get("#select_valitut_aineistot_button").click();
 
-    cy.get("#save_jatkopaatos1vaihe_draft").click();
+    cy.get("#save_hyvaksymispaatosvaihe_draft").click();
     cy.contains("Tallennus onnistui").wait(2000); // extra wait added because somehow the next test brings blank  page otherwise
 
     cy.reload();
@@ -120,21 +120,21 @@ describe("10 - Projektin jatkopaatos1vaiheen kuulutustiedot", () => {
     cy.get("#kuulutuksentiedot_tab").click();
 
     const today = formatDate(dayjs());
-    cy.get('[name="jatkoPaatos1Vaihe.kuulutusPaiva"]').should("be.enabled").type(today, {
+    cy.get('[name="paatos.kuulutusPaiva"]').should("be.enabled").type(today, {
       waitForAnimations: true,
     });
 
     const plus4years = dayjs().add(4, "year").year().toString();
     cy.get("#voimassaolovuosi").select(plus4years);
 
-    cy.get('[name="jatkoPaatos1Vaihe.hallintoOikeus"]').select("HELSINKI");
-    cy.get('[name="jatkoPaatos1Vaihe.ilmoituksenVastaanottajat.kunnat.0.sahkoposti"]').clear().type("test@vayla.fi");
-    cy.get('[name="jatkoPaatos1Vaihe.ilmoituksenVastaanottajat.kunnat.1.sahkoposti"]').clear().type("test@vayla.fi");
+    cy.get('[name="paatos.hallintoOikeus"]').select("HELSINKI");
+    cy.get('[name="paatos.ilmoituksenVastaanottajat.kunnat.0.sahkoposti"]').clear().type("test@vayla.fi");
+    cy.get('[name="paatos.ilmoituksenVastaanottajat.kunnat.1.sahkoposti"]').clear().type("test@vayla.fi");
 
     cy.get("#save_and_send_for_acceptance").click();
     cy.contains("Lähetys onnistui", { timeout: 30000 });
 
-    cy.get("#kuulutuksentiedot_luku_tab").click();
+    cy.get("#kuulutuksentiedot_tab").click();
     cy.get("#button_open_acceptance_dialog")
       .should("be.enabled")
       .scrollIntoView({ offset: { top: 500, left: 0 } })
@@ -144,12 +144,11 @@ describe("10 - Projektin jatkopaatos1vaiheen kuulutustiedot", () => {
     cy.contains("Hyväksyminen onnistui", { timeout: 15000 });
 
     cy.reload();
-    cy.get("#kuulutuksentiedot_luku_tab").click();
+    cy.get("#kuulutuksentiedot_tab").click();
 
     cy.contains("Kuulutus nähtäville asettamisesta on julkaistu"); //TODO: vaihda jatkovaiheen tekstit
 
-    cy.visit(Cypress.env("host") + "/suunnitelma/" + oid + "/hyvaksymispaatos");
-    cy.get("#jatkopaatos_tab").click();
+    cy.visit(Cypress.env("host") + "/suunnitelma/" + oid + "/jatkopaatos1");
     cy.contains("Kuulutus hyväksymispäätöksen jatkamisesta");
 
     // cy.visit(Cypress.env("host") + "/sv/suunnitelma/" + oid + "/hyvaksymispaatos");

cypress/integration/2-perusta-projekti/hyvaksyntavaihe.js

@@ -1,6 +1,6 @@
-import { formatDate } from '../../../src/util/dateUtils';
-import dayjs from 'dayjs';
-import { selectAllAineistotFromCategory } from '../../support/util';
+import { formatDate } from "../../../src/util/dateUtils";
+import dayjs from "dayjs";
+import { selectAllAineistotFromCategory } from "../../support/util";
 
 export function tallennaKasittelynTilaJaSiirraMenneisyyteen(oid, projektiNimi, asianumero) {
   cy.visit(Cypress.env("host") + "/yllapito/projekti/" + oid + "/kasittelyntila", {

cypress/integration/4-migraatio/1-migraatio.spec.js

@@ -159,17 +159,17 @@ describe("Migraatio", () => {
     cy.get("#kuulutuksentiedot_tab").click({ force: true });
 
     const today = formatDate(dayjs());
-    cy.get('[name="hyvaksymisPaatosVaihe.kuulutusPaiva"]').should("be.enabled").type(today, {
+    cy.get('[name="paatos.kuulutusPaiva"]').should("be.enabled").type(today, {
       waitForAnimations: true,
     });
 
-    cy.get('[name="hyvaksymisPaatosVaihe.hallintoOikeus"]').select("HELSINKI");
-    cy.get('[name="hyvaksymisPaatosVaihe.ilmoituksenVastaanottajat.kunnat.0.sahkoposti"]').clear().type("test@vayla.fi");
-    cy.get('[name="hyvaksymisPaatosVaihe.ilmoituksenVastaanottajat.kunnat.1.sahkoposti"]').clear().type("test@vayla.fi");
+    cy.get('[name="paatos.hallintoOikeus"]').select("HELSINKI");
+    cy.get('[name="paatos.ilmoituksenVastaanottajat.kunnat.0.sahkoposti"]').clear().type("test@vayla.fi");
+    cy.get('[name="paatos.ilmoituksenVastaanottajat.kunnat.1.sahkoposti"]').clear().type("test@vayla.fi");
 
     cy.get("#save_and_send_for_acceptance").click();
     cy.contains("Lähetys onnistui", { timeout: 30000 });
-    cy.get("#kuulutuksentiedot_luku_tab").click({ force: true });
+    cy.get("#kuulutuksentiedot_tab").click({ force: true });
     cy.get("#button_open_acceptance_dialog")
       .should("be.enabled")
       .scrollIntoView({ offset: { top: 500, left: 0 } })
@@ -179,7 +179,7 @@ describe("Migraatio", () => {
     cy.contains("Hyväksyminen onnistui", { timeout: 30000 });
 
     cy.reload();
-    cy.get("#kuulutuksentiedot_luku_tab").click({ force: true });
+    cy.get("#kuulutuksentiedot_tab").click({ force: true });
 
     cy.contains("Kuulutus nähtäville asettamisesta on julkaistu");
   });
@@ -194,12 +194,13 @@ describe("Migraatio", () => {
     cy.get("p").contains("Navigoi vaiheita").click();
 
     cy.get("#sidenavi_0").should("exist").click({ force: true });
-    cy.contains("span", "Aloituskuulutus");
+    cy.contains("span", "Suunnittelun käynnistäminen");
+    cy.contains("Suunnitelma on tuotu toisesta järjestelmästä, joten tiedoissa voi olla puutteita.");
     cy.get("#sidenavi_1").should("exist").click({ force: true });
-    cy.contains("span", "Suunnittelu");
+    cy.contains("span", "Suunnittelussa");
     cy.contains("Suunnitelma on tuotu toisesta järjestelmästä, joten tiedoissa voi olla puutteita.");
     cy.get("#sidenavi_2").should("exist").click({ force: true });
-    cy.contains("span", "Nähtävilläolo");
+    cy.contains("span", "Suunnitteluaineisto nähtävillä");
     cy.contains("Suunnitelma on tuotu toisesta järjestelmästä, joten tiedoissa voi olla puutteita.");
     cy.get("#sidenavi_3").should("exist").click({ force: true });
     cy.contains("span", "Hyväksymismenettelyssä");

i18n.js

@@ -8,9 +8,13 @@ module.exports = {
     "/yllapito/perusta": ["velho-haku"],
     "/suunnitelma/[oid]/nahtavillaolo": ["aineisto"],
     "/suunnitelma/[oid]/lausuntopyyntoaineistot": ["aineisto"],
-    "/yllapito/projekti/[oid]/nahtavillaolo": ["aineisto"],
-    "/yllapito/projekti/[oid]/hyvaksymispaatos": ["aineisto"],
-    "/yllapito/projekti/[oid]/jatkaminen1": ["aineisto"],
+    "/suunnitelma/[oid]/hyvaksymispaatos": ["aineisto", "paatos"],
+    "/suunnitelma/[oid]/jatkopaatos1": ["aineisto", "paatos"],
+    "/suunnitelma/[oid]/jatkopaatos2": ["aineisto", "paatos"],
+    "/yllapito/projekti/[oid]/nahtavillaolo/aineisto": ["aineisto"],
+    "/yllapito/projekti/[oid]/hyvaksymispaatos/aineisto": ["aineisto"],
+    "/yllapito/projekti/[oid]/jatkaminen1/aineisto": ["aineisto"],
+    "/yllapito/projekti/[oid]/jatkaminen2/aineisto": ["aineisto"],
     "/suunnitelma/[oid]/hyvaksymismenettelyssa": ["hyvaksymismenettelyssa"],
     "/suunnitelma/[oid]/suunnittelu": ["suunnittelu"],
   },

src/components/kansalaisenEtusivu/Hakutulokset.tsx

@@ -21,9 +21,6 @@ type Props = {
 };
 
 export function getSivuTilanPerusteella(tila: Status | null | undefined) {
-  if (!tila) {
-    return "";
-  }
   switch (tila) {
     case Status.ALOITUSKUULUTUS:
       return "aloituskuulutus";
@@ -35,6 +32,8 @@ export function getSivuTilanPerusteella(tila: Status | null | undefined) {
       return "hyvaksymismenettelyssa";
     case Status.HYVAKSYTTY:
       return "hyvaksymispaatos";
+    case Status.JATKOPAATOS_1:
+      return "jatkopaatos1";
     default:
       return "";
   }

src/components/layout/Breadcrumbs.tsx

@@ -6,9 +6,18 @@ import { Container, styled } from "@mui/material";
 import { ProjektiLisatiedolla, useProjekti } from "src/hooks/useProjekti";
 import { ProjektiJulkinen } from "@services/api";
 import { useProjektiJulkinen } from "src/hooks/useProjektiJulkinen";
+import { getValidatedKierrosId } from "src/util/getValidatedKierrosId";
+import classNames from "classnames";
+import { ParsedUrlQueryInput } from "querystring";
 
 interface RouteLabels {
-  [key: string]: { label: string; hideWhenNotCurrentRoute?: boolean; preventTranslation?: boolean };
+  [key: string]: {
+    label: string;
+    hideWhenNotCurrentRoute?: boolean;
+    preventTranslation?: boolean;
+    disableRoute?: boolean;
+    queryParams?: ParsedUrlQueryInput;
+  };
 }
 
 const Breadcrumbs = () => {
@@ -40,7 +49,7 @@ function BreadcrumbsVirkamies(): ReactElement {
   const routeLabels: RouteLabels = useMemo(() => {
     let routes: RouteLabels = {};
     if (router.isReady) {
-      const routeLabels = getVirkamiesRouteLabels(projekti);
+      const routeLabels = getVirkamiesRouteLabels(router, projekti);
       routes = generateRoutes(router, routeLabels);
     }
     return routes;
@@ -49,23 +58,35 @@ function BreadcrumbsVirkamies(): ReactElement {
   return <BreadcrumbComponent isYllapito routeLabels={routeLabels} />;
 }
 
-const getVirkamiesRouteLabels: (projekti: ProjektiLisatiedolla | null | undefined) => RouteLabels = (projekti) => {
+const getVirkamiesRouteLabels: (router: NextRouter, projekti: ProjektiLisatiedolla | null | undefined) => RouteLabels = (
+  router,
+  projekti
+) => {
   const projektiLabel = projekti?.velho.nimi || projekti?.oid || "...";
+  const kierrosId = projekti && getValidatedKierrosId(router, projekti);
   return {
     "/yllapito": { label: "Etusivu", hideWhenNotCurrentRoute: true },
     "/yllapito/perusta": { label: "Projektin perustaminen" },
     "/yllapito/perusta/[oid]": { label: projektiLabel },
     "/yllapito/projekti": { label: "Projektit" },
-    "/yllapito/projekti/[oid]": { label: projektiLabel },
-    "/yllapito/projekti/[oid]/aloituskuulutus": { label: "Aloituskuulutus" },
-    "/yllapito/projekti/[oid]/kasittelyntila": { label: "Käsittelyn tila" },
-    "/yllapito/projekti/[oid]/henkilot": { label: "Henkilöt ja käyttöoikeushallinta" },
-    "/yllapito/projekti/[oid]/suunnittelu": { label: "Suunnittelu ja vuorovaikutus" },
-    "/yllapito/projekti/[oid]/suunnittelu/vuorovaikuttaminen": { label: "Vuorovaikutus" },
-    "/yllapito/projekti/[oid]/suunnittelu/vuorovaikuttaminen/[kierrosId]": { label: "Vuorovaikutus" },
-    "/yllapito/projekti/[oid]/nahtavillaolo": { label: "Nähtävilläolovaihe" },
-    "/yllapito/projekti/[oid]/hyvaksymispaatos": { label: "Hyväksymispäätös" },
-    "/yllapito/projekti/[oid]/jatkaminen1": { label: "1. jatkaminen" },
+    "/yllapito/projekti/[oid]": { label: projektiLabel, queryParams: { oid: projekti?.oid } },
+    "/yllapito/projekti/[oid]/aloituskuulutus": { label: "Aloituskuulutus", queryParams: { oid: projekti?.oid } },
+    "/yllapito/projekti/[oid]/kasittelyntila": { label: "Käsittelyn tila", queryParams: { oid: projekti?.oid } },
+    "/yllapito/projekti/[oid]/henkilot": { label: "Henkilöt ja käyttöoikeushallinta", queryParams: { oid: projekti?.oid } },
+    "/yllapito/projekti/[oid]/suunnittelu": { label: "Suunnittelu ja vuorovaikutus", queryParams: { oid: projekti?.oid } },
+    "/yllapito/projekti/[oid]/suunnittelu/vuorovaikuttaminen": {
+      label: "Vuorovaikutus",
+      disableRoute: true,
+      queryParams: { oid: projekti?.oid },
+    },
+    "/yllapito/projekti/[oid]/suunnittelu/vuorovaikuttaminen/[kierrosId]": {
+      label: kierrosId ? `${kierrosId}. vuorovaikuttaminen` : "Vuorovaikuttaminen",
+      queryParams: { oid: projekti?.oid, kierrosId },
+    },
+    "/yllapito/projekti/[oid]/nahtavillaolo": { label: "Nähtävilläolovaihe", queryParams: { oid: projekti?.oid } },
+    "/yllapito/projekti/[oid]/nahtavillaolo/aineisto": { label: "Aineisto", queryParams: { oid: projekti?.oid } },
+    "/yllapito/projekti/[oid]/hyvaksymispaatos": { label: "Hyväksymispäätös", queryParams: { oid: projekti?.oid } },
+    "/yllapito/projekti/[oid]/jatkaminen1": { label: "1. jatkaminen", queryParams: { oid: projekti?.oid } },
     "/yllapito/ohjeet": { label: "Ohjeet" },
     "/_error": { label: "Virhe" },
   };
@@ -109,9 +130,8 @@ export const generateRoutes = (nextRouter: NextRouter, labels: RouteLabels): Rou
     const jointPathname = joinPath(pathnameSplitted, index);
     if (isRouteVisible(jointPathname)) {
       const routeLabel = labels[jointPathname];
-      const label = routeLabel?.label || pathname;
-      const preventTranslation = !!routeLabel ? routeLabel.preventTranslation : true;
-      reducer[jointPathname] = { label, preventTranslation };
+      const { label = pathname, preventTranslation = true, disableRoute, queryParams } = routeLabel || {};
+      reducer[jointPathname] = { label, preventTranslation, disableRoute, queryParams };
     }
     return reducer;
   }, {});
@@ -128,16 +148,18 @@ const BreadcrumbComponent: FC<{ routeLabels: RouteLabels; isYllapito?: boolean }
           <li className="mr-1 truncate-ellipsis max-w-xs">
             <Link href={isYllapito ? "/yllapito" : "/"}>{t("common:sivustonimi")}</Link>
           </li>
-          {Object.entries(routeLabels).map(([pathname, { label, preventTranslation }]) => (
+          {Object.entries(routeLabels).map(([pathname, { label, preventTranslation, disableRoute, queryParams }]) => (
             <ListItem className="mr-1 truncate-ellipsis max-w-xs" key={pathname}>
-              {!isCurrentRoute(pathname, router) ? (
-                <Link href={{ pathname, query: router.query }}>
+              {!isCurrentRoute(pathname, router) && !disableRoute ? (
+                <Link href={{ pathname, query: queryParams }}>
                   <a>
                     <span>{!isYllapito && !preventTranslation ? t(`common:polut.${label}`) : label}</span>
                   </a>
                 </Link>
               ) : (
-                <span className="font-bold">{!isYllapito && !preventTranslation ? t(`common:polut.${label}`) : label}</span>
+                <span className={classNames(isCurrentRoute(pathname, router) && "font-bold")}>
+                  {!isYllapito && !preventTranslation ? t(`common:polut.${label}`) : label}
+                </span>
               )}
             </ListItem>
           ))}

src/components/layout/HassuMuiThemeProvider.tsx

@@ -226,6 +226,40 @@ export const createLocalizedTheme = (locale: Localization) =>
             },
           },
         },
+        MuiTab: {
+          styleOverrides: {
+            root: {
+              paddingTop: "18px",
+              paddingBottom: "18px",
+              paddingLeft: "40px",
+              paddingRight: "40px",
+              textTransform: "none",
+              fontWeight: 400,
+              fontSize: "1rem",
+              lineHeight: 1.5,
+              color: "#242222",
+              opacity: 1,
+              "&.Mui-selected:not(.Mui-disabled)": {
+                color: "#0064AF",
+              },
+            },
+          },
+        },
+        MuiTabs: {
+          defaultProps: {
+            variant: "scrollable",
+            scrollButtons: "auto",
+          },
+          styleOverrides: {
+            root: {
+              borderBottom: "1px #979797 solid",
+            },
+            indicator: {
+              backgroundColor: "#0064AF",
+              height: "3px",
+            },
+          },
+        },
         MuiFormControlLabel: {
           styleOverrides: {
             root: {

src/components/layout/LinkTab.tsx

@@ -0,0 +1,11 @@
+import { Tab, TabProps } from "@mui/material";
+import Link, { LinkProps } from "next/link";
+import React, { FC } from "react";
+
+export type LinkTabProps = TabProps & { linkProps: LinkProps };
+
+export const LinkTab: FC<LinkTabProps> = ({ linkProps, ...tabProps }) => (
+  <Link {...linkProps} passHref>
+    <Tab {...tabProps} />
+  </Link>
+);

src/components/layout/tabs/Tabs.tsx

@@ -19,7 +19,7 @@ const TabStyle = {
       color: "#999999",
     },
   },
-} as const;
+};
 
 export type TabStyle = keyof typeof TabStyle;
 

src/components/projekti/ProjektiConsumer.tsx

@@ -0,0 +1,17 @@
+import React, { ReactElement } from "react";
+import { ProjektiLisatiedolla, useProjekti, useProjektiOptions } from "src/hooks/useProjekti";
+
+interface ProjektiConsumerProps {
+  children?: (p: ProjektiLisatiedolla) => ReactElement | null;
+  useProjektiOptions?: useProjektiOptions;
+}
+
+const ProjektiConsumer = ({ children, useProjektiOptions }: ProjektiConsumerProps) => {
+  const { data: projekti } = useProjekti(useProjektiOptions);
+  if (!projekti || !children) {
+    return <></>;
+  }
+  return <>{children(projekti)}</>;
+};
+
+export default ProjektiConsumer;