Merge pull request #4681 from navikt/refactor/veilederflate-gjennomfo…

…ring-status Refactor/veilederflate gjennomforing status
navikt · Nov 25, 2024 · d35d8e7 · d35d8e7
2 parents c92ceb6 + f202b3f
commit d35d8e7
Show file tree

Hide file tree

Showing 15 changed files with 138 additions and 127 deletions.
diff --git a/frontend/frontend-common/components/gjennomforing/GjennomforingStatusMedAarsakTag.tsx b/frontend/frontend-common/components/gjennomforing/GjennomforingStatusMedAarsakTag.tsx
@@ -0,0 +1,36 @@
+import { Tag } from "@navikt/ds-react";
+import { TiltaksgjennomforingStatusDto } from "@mr/api-client";
+import { useState } from "react";
+import { variantAndName } from "./GjennomforingStatusTag";
+
+interface Props {
+  status: TiltaksgjennomforingStatusDto;
+}
+
+export function GjennomforingStatusMedAarsakTag({ status }: Props) {
+  const [expandLabel, setExpandLabel] = useState<boolean>(false);
+
+  const { variant, label } = variantAndName(status.status);
+  const labelWithBeskrivelse = status.avbrutt?.beskrivelse
+    ? `${label} - ${status.avbrutt.beskrivelse}`
+    : label;
+
+  return (
+    <Tag
+      style={{
+        maxWidth: "400px",
+      }}
+      size="small"
+      onMouseEnter={() => setExpandLabel(true)}
+      onMouseLeave={() => setExpandLabel(false)}
+      aria-label={`Gjennomføringstatus: ${label}`}
+      variant={variant}
+    >
+      {expandLabel ? labelWithBeskrivelse : truncate(labelWithBeskrivelse, 30)}
+    </Tag>
+  );
+}
+
+function truncate(text: string, maxLength: number): string {
+  return text.length > maxLength ? `${text.substring(0, maxLength - 3)}...` : text;
+}
diff --git a/frontend/frontend-common/components/gjennomforing/GjennomforingStatusTag.tsx b/frontend/frontend-common/components/gjennomforing/GjennomforingStatusTag.tsx
@@ -0,0 +1,34 @@
+import { Tag } from "@navikt/ds-react";
+import { TiltaksgjennomforingStatus } from "@mr/api-client";
+
+interface Props {
+  status: TiltaksgjennomforingStatus;
+}
+
+export function GjennomforingStatusTag({ status }: Props) {
+  const { variant, label } = variantAndName(status);
+
+  return (
+    <Tag size="small" aria-label={`Gjennomføringstatus: ${label}`} variant={variant}>
+      {label}
+    </Tag>
+  );
+}
+
+export function variantAndName(status: TiltaksgjennomforingStatus): {
+  variant: "alt1" | "success" | "neutral" | "error";
+  label: string;
+} {
+  switch (status) {
+    case TiltaksgjennomforingStatus.GJENNOMFORES:
+      return { variant: "success", label: "Gjennomføres" };
+    case TiltaksgjennomforingStatus.AVSLUTTET:
+      return { variant: "neutral", label: "Avsluttet" };
+    case TiltaksgjennomforingStatus.AVBRUTT:
+      return { variant: "error", label: "Avbrutt" };
+    case TiltaksgjennomforingStatus.AVLYST:
+      return { variant: "error", label: "Avlyst" };
+    case TiltaksgjennomforingStatus.PLANLAGT:
+      return { variant: "alt1", label: "Planlagt" };
+  }
+}
diff --git a/frontend/frontend-common/components/tags/TiltaksgjennomforingStatusTag.tsx b/frontend/frontend-common/components/tags/TiltaksgjennomforingStatusTag.tsx
diff --git a/frontend/frontend-common/index.ts b/frontend/frontend-common/index.ts
@@ -8,7 +8,8 @@ import { NavEnhetFilterTag } from "./components/filter/filterTag/NavEnhetFilterT
 import { FilterTag } from "./components/filter/filterTag/FilterTag";
 import { FilterTagsContainer } from "./components/filter/filterTag/FilterTagsContainer";
 import { FilterAccordionHeader } from "./components/filter/accordionHeader/FilterAccordionHeader";
-import { TiltaksgjennomforingStatusTag } from "./components/tags/TiltaksgjennomforingStatusTag";
+import { GjennomforingStatusTag } from "./components/gjennomforing/GjennomforingStatusTag";
+import { GjennomforingStatusMedAarsakTag } from "./components/gjennomforing/GjennomforingStatusMedAarsakTag";
 import { FilterSkeleton } from "./components/skeleton/FilterSkeleton";
 import { Drawer } from "./components/drawer/Drawer";
 import {
@@ -44,7 +45,6 @@ export {
   InlineErrorBoundary,
   InlineFallback,
   ReloadAppFallback,
-  TiltaksgjennomforingStatusTag,
   OversiktSkeleton,
   DetaljerSkeleton,
   ListSkeleton,
@@ -54,4 +54,6 @@ export {
   TilbakemeldingsLenke,
   FilterContainer,
   useOpenFilterWhenThreshold,
+  GjennomforingStatusTag,
+  GjennomforingStatusMedAarsakTag,
 };
diff --git a/frontend/mr-admin-flate/src/components/tabell/TiltaksgjennomforingsTabell.tsx b/frontend/mr-admin-flate/src/components/tabell/TiltaksgjennomforingsTabell.tsx
@@ -9,7 +9,6 @@ import {
 import { Alert, Pagination, Table, Tag, VStack } from "@navikt/ds-react";
 import { useAtom, WritableAtom } from "jotai";
 import { OpenAPI, SorteringTiltaksgjennomforinger } from "@mr/api-client";
-import { TiltaksgjennomforingStatusTag } from "@mr/frontend-common";
 import { Lenke } from "@mr/frontend-common/components/lenke/Lenke";
 import { ToolbarContainer } from "@mr/frontend-common/components/toolbar/toolbarContainer/ToolbarContainer";
 import { ToolbarMeny } from "@mr/frontend-common/components/toolbar/toolbarMeny/ToolbarMeny";
@@ -22,6 +21,7 @@ import { PagineringsOversikt } from "../paginering/PagineringOversikt";
 import styles from "./Tabell.module.scss";
 import { APPLICATION_NAME } from "@/constants";
 import { EksporterTabellKnapp } from "@/components/eksporterTabell/EksporterTabellKnapp";
+import { GjennomforingStatusTag } from "@mr/frontend-common";
 
 const SkjulKolonne = ({ children, skjul }: { children: React.ReactNode; skjul: boolean }) => {
   return skjul ? null : <>{children}</>;
@@ -266,7 +266,7 @@ export function TiltaksgjennomforingsTabell({
 
                       <SkjulKolonne skjul={!!skjulKolonner?.status}>
                         <Table.DataCell>
-                          <TiltaksgjennomforingStatusTag status={tiltaksgjennomforing.status} />
+                          <GjennomforingStatusTag status={tiltaksgjennomforing.status.status} />
                         </Table.DataCell>
                       </SkjulKolonne>
                       <Table.DataCell>

diff --git a/frontend/mr-admin-flate/src/components/tilsagn/TilsagnSkjema.tsx b/frontend/mr-admin-flate/src/components/tilsagn/TilsagnSkjema.tsx
@@ -2,17 +2,18 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { FormProvider, useForm } from "react-hook-form";
 import { InferredOpprettTilsagnSchema, OpprettTilsagnSchema } from "./OpprettTilsagnSchema";
 import { useEffect } from "react";
-import { HGrid, DatePicker, BodyShort, Alert, HStack, Button, Box } from "@navikt/ds-react";
-import { addYear, formaterDato } from "../../utils/Utils";
+import { Alert, BodyShort, Box, Button, DatePicker, HGrid, HStack } from "@navikt/ds-react";
+import { addYear, formaterDato } from "@/utils/Utils";
 import { ControlledDateInput } from "../skjema/ControlledDateInput";
 import { FormGroup } from "../skjema/FormGroup";
 import { ApiError, TilsagnDto, TilsagnRequest, TiltaksgjennomforingDto } from "@mr/api-client";
 import { UseMutationResult } from "@tanstack/react-query";
 import { AFTBeregningSkjema } from "./AFTBeregningSkjema";
 import { FriBeregningSkjema } from "./FriBeregningSkjema";
-import { ControlledSokeSelect, TiltaksgjennomforingStatusTag } from "@mr/frontend-common";
+import { ControlledSokeSelect } from "@mr/frontend-common";
 import { Metadata } from "../detaljside/Metadata";
 import { useKostnadssted } from "@/api/enhet/useKostnadssted";
+import { GjennomforingStatusTag } from "@mr/frontend-common";
 
 interface Props {
   tiltaksgjennomforing: TiltaksgjennomforingDto;
@@ -80,7 +81,7 @@ export function TilsagnSkjema({
             <Metadata header="Antall plasser" verdi={tiltaksgjennomforing.antallPlasser} />
             <Metadata
               header="Status"
-              verdi={<TiltaksgjennomforingStatusTag status={tiltaksgjennomforing.status} />}
+              verdi={<GjennomforingStatusTag status={tiltaksgjennomforing.status.status} />}
             />
           </HGrid>
         </Box>

diff --git a/...tend/mr-admin-flate/src/components/tiltaksgjennomforinger/TiltaksgjennomforingerListe.tsx b/...tend/mr-admin-flate/src/components/tiltaksgjennomforinger/TiltaksgjennomforingerListe.tsx
@@ -5,7 +5,7 @@ import styles from "./TiltaksgjennomforingerListe.module.scss";
 import { TiltaksgjennomforingFilter } from "@/api/atoms";
 import { TiltaksgjennomforingDto } from "@mr/api-client";
 import { ReactNode } from "react";
-import { TiltaksgjennomforingStatusTag } from "@mr/frontend-common";
+import { GjennomforingStatusTag } from "@mr/frontend-common";
 
 interface Props {
   filter: Partial<TiltaksgjennomforingFilter>;
@@ -38,7 +38,7 @@ export function TiltaksgjennomforingerListe(props: Props) {
           <li key={gjennomforing.id} className={styles.gjennomforingsliste_element}>
             <BodyShort>{gjennomforing.navn}</BodyShort>
             <BodyShort>{gjennomforing.tiltaksnummer}</BodyShort>
-            <TiltaksgjennomforingStatusTag status={gjennomforing.status} />
+            <GjennomforingStatusTag status={gjennomforing.status.status} />
             {props.action(gjennomforing)}
           </li>
         ))}

diff --git a/frontend/mr-admin-flate/src/pages/tiltaksgjennomforinger/TiltaksgjennomforingPage.tsx b/frontend/mr-admin-flate/src/pages/tiltaksgjennomforinger/TiltaksgjennomforingPage.tsx
@@ -14,9 +14,10 @@ import { PREVIEW_ARBEIDSMARKEDSTILTAK_URL } from "@/constants";
 import { useNavigateAndReplaceUrl } from "@/hooks/useNavigateWithoutReplacingUrl";
 import { ContainerLayout } from "@/layouts/ContainerLayout";
 import commonStyles from "../Page.module.scss";
-import { TiltaksgjennomforingStatusTag } from "@mr/frontend-common";
-import { TiltaksgjennomforingStatus, Toggles } from "@mr/api-client";
+import { Toggles } from "@mr/api-client";
 import { useFeatureToggle } from "@/api/features/useFeatureToggle";
+import { GjennomforingStatusMedAarsakTag } from "@mr/frontend-common";
+import { gjennomforingIsAktiv } from "@mr/frontend-common/utils/utils";
 
 function createBrodsmuler(
   tiltaksgjennomforingId: string,
@@ -93,37 +94,32 @@ export function TiltaksgjennomforingPage() {
         <div
           className={classNames(
             headerStyles.header_outer_container,
-            tiltaksgjennomforing?.id
-              ? headerStyles.header_outer_container_forhandsvisningsknapp
-              : null,
+            headerStyles.header_outer_container_forhandsvisningsknapp,
           )}
         >
           <div className={headerStyles.tiltaksnavn_status}>
             <TiltaksgjennomforingIkon />
             <VStack>
               <Heading className={headerStyles.navn} size="large" level="2">
-                {tiltaksgjennomforing?.navn ?? "..."}
+                {tiltaksgjennomforing.navn}
               </Heading>
-              <ShowOpphavValue value={tiltaksgjennomforing?.opphav} />
+              <ShowOpphavValue value={tiltaksgjennomforing.opphav} />
             </VStack>
-            <TiltaksgjennomforingStatusTag status={tiltaksgjennomforing.status} showAvbruttAarsak />
+            <GjennomforingStatusMedAarsakTag status={tiltaksgjennomforing.status} />
             <DupliserTiltak tiltaksgjennomforing={tiltaksgjennomforing} />
           </div>
-          {tiltaksgjennomforing?.id &&
-            [TiltaksgjennomforingStatus.GJENNOMFORES, TiltaksgjennomforingStatus.PLANLAGT].includes(
-              tiltaksgjennomforing.status.status,
-            ) && (
-              <div className={headerStyles.forhandsvisningsknapp}>
-                <Lenkeknapp
-                  size="small"
-                  isExternal={true}
-                  variant="secondary"
-                  to={`${PREVIEW_ARBEIDSMARKEDSTILTAK_URL}/tiltak/${tiltaksgjennomforing.id}`}
-                >
-                  Forhåndsvis i Modia
-                </Lenkeknapp>
-              </div>
-            )}
+          {gjennomforingIsAktiv(tiltaksgjennomforing.status.status) && (
+            <div className={headerStyles.forhandsvisningsknapp}>
+              <Lenkeknapp
+                size="small"
+                isExternal={true}
+                variant="secondary"
+                to={`${PREVIEW_ARBEIDSMARKEDSTILTAK_URL}/tiltak/${tiltaksgjennomforing.id}`}
+              >
+                Forhåndsvis i Modia
+              </Lenkeknapp>
+            </div>
+          )}
         </div>
       </Header>
 

diff --git a/frontend/mr-admin-flate/src/pages/tiltaksgjennomforinger/TiltaksgjennomforingSkjemaPage.tsx b/frontend/mr-admin-flate/src/pages/tiltaksgjennomforinger/TiltaksgjennomforingSkjemaPage.tsx
@@ -11,10 +11,10 @@ import { ErrorMeldinger } from "@/components/tiltaksgjennomforinger/Tiltaksgjenn
 import { useHentAnsatt } from "@/api/ansatt/useHentAnsatt";
 import { Brodsmule, Brodsmuler } from "@/components/navigering/Brodsmuler";
 import { TiltaksgjennomforingIkon } from "@/components/ikoner/TiltaksgjennomforingIkon";
-import { TiltaksgjennomforingStatusTag } from "@mr/frontend-common";
 import { SkjemaContainer } from "@/components/skjema/SkjemaContainer";
 import { SkjemaContent } from "@/components/skjema/SkjemaContent";
 import { defaultTiltaksgjennomforingData } from "@/components/tiltaksgjennomforinger/TiltaksgjennomforingSkjemaConst";
+import { GjennomforingStatusMedAarsakTag } from "@mr/frontend-common";
 
 export function TiltaksgjennomforingSkjemaPage() {
   const navigate = useNavigate();
@@ -109,7 +109,7 @@ export function TiltaksgjennomforingSkjemaPage() {
           {redigeringsModus ? "Rediger gjennomføring" : "Opprett ny tiltaksgjennomføring"}
         </Heading>
         {tiltaksgjennomforing ? (
-          <TiltaksgjennomforingStatusTag status={tiltaksgjennomforing.status} showAvbruttAarsak />
+          <GjennomforingStatusMedAarsakTag status={tiltaksgjennomforing.status} />
         ) : null}
       </Header>
       <ContainerLayout>

diff --git a/frontend/mulighetsrommet-veileder-flate/src/api/queries/useArbeidsmarkedstiltakById.ts b/frontend/mulighetsrommet-veileder-flate/src/api/queries/useArbeidsmarkedstiltakById.ts
@@ -8,11 +8,20 @@ import {
   VeilederflateTiltakGruppe,
   VeilederTiltakService,
 } from "@mr/api-client";
+import { gjennomforingIsAktiv } from "@mr/frontend-common/utils/utils";
 
 export function isTiltakGruppe(tiltak: VeilederflateTiltak): tiltak is VeilederflateTiltakGruppe {
   return tiltak.type === "TILTAK_GRUPPE";
 }
 
+export function isTiltakAktivt(gjennomforing: VeilederflateTiltak): boolean {
+  if (typeof gjennomforing.status === "string") {
+    return gjennomforingIsAktiv(gjennomforing.status);
+  } else {
+    return gjennomforingIsAktiv(gjennomforing.status.status);
+  }
+}
+
 export function isTiltakEgenRegi(
   tiltak: VeilederflateTiltak,
 ): tiltak is VeilederflateTiltakEnkeltplassAnskaffet {

diff --git a/...mulighetsrommet-veileder-flate/src/apps/modia/views/ModiaArbeidsmarkedstiltakDetaljer.tsx b/...mulighetsrommet-veileder-flate/src/apps/modia/views/ModiaArbeidsmarkedstiltakDetaljer.tsx
@@ -24,11 +24,11 @@ import {
   VeilederflateTiltakstype,
 } from "@mr/api-client";
 import { InlineErrorBoundary, TilbakemeldingsLenke, useTitle } from "@mr/frontend-common";
-import { gjennomforingIsAktiv } from "@mr/frontend-common/utils/utils";
 import { Chat2Icon } from "@navikt/aksel-icons";
 import { Alert, Button } from "@navikt/ds-react";
 import { useAtomValue } from "jotai";
 import {
+  isTiltakAktivt,
   isTiltakGruppe,
   useModiaArbeidsmarkedstiltakById,
 } from "@/api/queries/useArbeidsmarkedstiltakById";
@@ -108,18 +108,16 @@ export function ModiaArbeidsmarkedstiltakDetaljer() {
               </Button>
             )}
 
-            {gjennomforingIsAktiv(tiltak.status.status) ? (
-              <PameldingKometApnerSnart tiltak={tiltak} />
-            ) : null}
+            {isTiltakAktivt(tiltak) ? <PameldingKometApnerSnart tiltak={tiltak} /> : null}
 
-            {isTiltakGruppe(tiltak) && gjennomforingIsAktiv(tiltak.status.status) ? (
+            {isTiltakGruppe(tiltak) && isTiltakAktivt(tiltak) ? (
               <PameldingForGruppetiltak
                 brukerHarRettPaaValgtTiltak={brukerHarRettPaaValgtTiltak}
                 tiltak={tiltak}
               />
             ) : null}
 
-            {brukerdata.erUnderOppfolging && gjennomforingIsAktiv(tiltak.status.status) ? (
+            {brukerdata.erUnderOppfolging && isTiltakAktivt(tiltak) ? (
               <DelMedBruker
                 delMedBrukerInfo={delMedBrukerInfo ?? undefined}
                 veiledernavn={resolveName(veilederdata)}

diff --git a/frontend/mulighetsrommet-veileder-flate/src/layouts/TiltakHeader.tsx b/frontend/mulighetsrommet-veileder-flate/src/layouts/TiltakHeader.tsx
@@ -1,6 +1,6 @@
 import { VeilederflateTiltak } from "@mr/api-client";
-import { TiltaksgjennomforingStatusTag } from "@mr/frontend-common";
-import { gjennomforingIsAktiv } from "@mr/frontend-common/utils/utils";
+import { isTiltakAktivt } from "@/api/queries/useArbeidsmarkedstiltakById";
+import { GjennomforingStatusTag } from "@mr/frontend-common";
 import { BodyLong, Heading, HStack, VStack } from "@navikt/ds-react";
 import styles from "./TiltakHeader.module.scss";
 
@@ -21,8 +21,10 @@ export function TiltakHeader({ tiltak }: Props) {
             </BodyLong>
           </VStack>
         </Heading>
-        {!gjennomforingIsAktiv(tiltak.status.status) && (
-          <TiltaksgjennomforingStatusTag status={tiltak.status} />
+        {!isTiltakAktivt(tiltak) && (
+          <GjennomforingStatusTag
+            status={typeof tiltak.status === "string" ? tiltak.status : tiltak.status.status}
+          />
         )}
       </HStack>
       {tiltakstype.beskrivelse && (