Fjern avhengighet til api-client fra frontend-common

Author: fredrikpe

frontend/arrangor-flate/app/routes/$orgnr.utbetaling.$id.bekreft.tsx

@@ -18,11 +18,11 @@ import { PageHeader } from "~/components/PageHeader";
 import { UtbetalingDetaljer } from "~/components/utbetaling/UtbetalingDetaljer";
 import { getOrError, getOrThrowError } from "~/form/form-helpers";
 import { internalNavigation } from "~/internal-navigation";
-import { problemDetailResponse, useOrgnrFromUrl } from "~/utils";
+import { isValidationError, problemDetailResponse, useOrgnrFromUrl } from "~/utils";
 import { getCurrentTab } from "~/utils/currentTab";
 import { Separator } from "../components/Separator";
 import { apiHeaders } from "~/auth/auth.server";
-import { isValidationError, jsonPointerToFieldPath } from "@mr/frontend-common/utils/utils";
+import { jsonPointerToFieldPath } from "@mr/frontend-common/utils/utils";
 
 type BekreftUtbetalingData = {
   utbetaling: ArrFlateUtbetaling;

frontend/arrangor-flate/app/utils.ts

@@ -1,5 +1,5 @@
 import { useParams } from "react-router";
-import { Periode, ProblemDetail } from "api-client";
+import { Periode, ProblemDetail, ValidationError } from "api-client";
 
 export function formaterPeriode(periode: Periode) {
   const start = formaterDato(periode.start);
@@ -43,3 +43,7 @@ export function problemDetailResponse(error: ProblemDetail): Response {
     headers: { "Content-Type": "application/json" },
   });
 }
+
+export function isValidationError(error: unknown): error is ValidationError {
+  return typeof error === "object" && error !== null && "errors" in error;
+}

frontend/frontend-common/QueryKeys.ts

@@ -1,4 +1,11 @@
-import { ProblemDetail } from "@mr/api-client-v2";
+type ProblemDetail = {
+    type: string;
+    title: string;
+    status: number;
+    detail: string;
+    instance?: string;
+    [key: string]: unknown | string | number | undefined;
+};
 
 export function isProblemDetail(error: any): error is ProblemDetail {
   return 'status' in error && 'detail' in error && 'type' in error && 'title' in error;

frontend/frontend-common/components/error-handling/errors.ts

@@ -3,10 +3,9 @@ import Ikonknapp from "../../ikonknapp/Ikonknapp";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import styles from "./FilterTag.module.scss";
 import { MouseEvent } from "react";
-import { NavEnhet } from "@mr/api-client-v2";
 
 interface Props {
-  navEnheter: NavEnhet[];
+  navEnheter: string[];
   onClose?: (e: MouseEvent) => void;
 }
 
@@ -16,7 +15,7 @@ export function NavEnhetFilterTag({ navEnheter, onClose }: Props) {
   }
 
   function tagLabel() {
-    const firstEnhetName = navEnheter[0].navn;
+    const firstEnhetName = navEnheter[0];
     if (navEnheter.length > 1) {
       return `${firstEnhetName} +${navEnheter.length - 1}`;
     }
@@ -30,7 +29,7 @@ export function NavEnhetFilterTag({ navEnheter, onClose }: Props) {
       key="navenhet"
       data-testid="filtertag_navenhet"
       className={styles.filtertag}
-      title={navEnheter.map((enhet) => enhet.navn).join(", ")}
+      title={navEnheter.join(", ")}
     >
       {tagLabel()}
       {onClose ? (

frontend/frontend-common/components/filter/filterTag/NavEnhetFilterTag.tsx

@@ -1,18 +1,22 @@
 import { Tag } from "@navikt/ds-react";
-import { GjennomforingStatusDto } from "@mr/api-client-v2";
 import { useState } from "react";
 import { variantAndName } from "./GjennomforingStatusTag";
 
 interface Props {
-  status: GjennomforingStatusDto;
+  status: string;
+  avbrutt?: {
+      tidspunkt: string;
+      aarsak: string;
+      beskrivelse: string;
+  };
 }
 
-export function GjennomforingStatusMedAarsakTag({ status }: Props) {
+export function GjennomforingStatusMedAarsakTag({ status, avbrutt }: Props) {
   const [expandLabel, setExpandLabel] = useState<boolean>(false);
 
-  const { variant, label } = variantAndName(status.status);
-  const labelWithBeskrivelse = status.avbrutt?.beskrivelse
-    ? `${label} - ${status.avbrutt.beskrivelse}`
+  const { variant, label } = variantAndName(status);
+  const labelWithBeskrivelse = avbrutt?.beskrivelse
+    ? `${label} - ${avbrutt.beskrivelse}`
     : label;
 
   return (

frontend/frontend-common/components/gjennomforing/GjennomforingStatusMedAarsakTag.tsx

@@ -1,8 +1,7 @@
 import { Tag } from "@navikt/ds-react";
-import { GjennomforingStatus } from "@mr/api-client-v2";
 
 interface Props {
-  status: GjennomforingStatus;
+  status: string;
 }
 
 export function GjennomforingStatusTag({ status }: Props) {
@@ -20,18 +19,16 @@ export function GjennomforingStatusTag({ status }: Props) {
   );
 }
 
-export function variantAndName(status: GjennomforingStatus): {
+export function variantAndName(status: string): {
   variant: "alt1" | "success" | "neutral" | "error";
   label: string;
 } {
-  switch (status) {
-    case GjennomforingStatus.GJENNOMFORES:
-      return { variant: "success", label: "Gjennomføres" };
-    case GjennomforingStatus.AVSLUTTET:
-      return { variant: "neutral", label: "Avsluttet" };
-    case GjennomforingStatus.AVBRUTT:
-      return { variant: "error", label: "Avbrutt" };
-    case GjennomforingStatus.AVLYST:
-      return { variant: "error", label: "Avlyst" };
-  }
+  const statusMap: Record<string, { variant: "alt1" | "success" | "neutral" | "error"; label: string }> = {
+    GJENNOMFORES: { variant: "success", label: "Gjennomføres" },
+    AVSLUTTET: { variant: "neutral", label: "Avsluttet" },
+    AVBRUTT: { variant: "error", label: "Avbrutt" },
+    AVLYST: { variant: "error", label: "Avlyst" },
+  };
+
+  return statusMap[status] || { variant: "alt1", label: "Ukjent status" };
 }

frontend/frontend-common/components/gjennomforing/GjennomforingStatusTag.tsx

@@ -1,6 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { BodyShort, Button, Heading, Modal, TextField } from "@navikt/ds-react";
-import { LagretDokumenttype, LagretFilterRequest } from "@mr/api-client-v2";
 import { useEffect, useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import z from "zod";
@@ -15,12 +14,11 @@ const LagreFilterSchema = z.object({
 type InferredLagreFilterSchema = z.infer<typeof LagreFilterSchema>;
 
 interface Props {
-  dokumenttype: LagretDokumenttype;
   filter: any;
-  onLagre: (r: LagretFilterRequest) => void;
+  onLagre: (r: any) => void;
 }
 
-export function LagreFilterButton({ onLagre, dokumenttype, filter }: Props) {
+export function LagreFilterButton({ onLagre, filter }: Props) {
   const [isOpen, setIsOpen] = useState(false);
 
   const form = useForm<InferredLagreFilterSchema>({
@@ -43,8 +41,6 @@ export function LagreFilterButton({ onLagre, dokumenttype, filter }: Props) {
       {
         navn: data.navn,
         filter,
-        type: dokumenttype,
-        sortOrder: 0,
         id: window.crypto.randomUUID(),
       }
     );

frontend/frontend-common/components/lagreFilter/LagreFilterButton.tsx

@@ -1,10 +1,18 @@
 import { TrashFillIcon } from "@navikt/aksel-icons";
 import { Alert, BodyShort, Button, HStack, Radio, RadioGroup } from "@navikt/ds-react";
-import { LagretFilter } from "@mr/api-client-v2";
 import { useRef, useState } from "react";
 import styles from "./LagredeFilterOversikt.module.scss";
 import { VarselModal } from "../varsel/VarselModal";
 
+
+interface LagretFilter {
+    id: string;
+    navn: string;
+    filter: {
+        [key: string]: unknown;
+    };
+}
+
 interface Props {
   lagredeFilter: LagretFilter[];
   filter: any;

frontend/frontend-common/components/lagreFilter/LagredeFilterOversikt.tsx

@@ -4,24 +4,35 @@ import classnames from "classnames";
 import { useState } from "react";
 import styles from "./NavEnhetFilter.module.scss";
 import { addOrRemove } from "../../utils/utils";
-import { NavEnhet, NavRegion } from "@mr/api-client-v2";
+
+interface NavRegion {
+    enhetsnummer: string;
+    navn: string;
+    enheter: Array<NavEnhet>;
+}
+
+interface NavEnhet {
+    enhetsnummer: string;
+    overordnetEnhet: string | null;
+    navn: string;
+}
 
 interface RegionMap {
   [region: string]: NavEnhet[];
 }
 
 interface Props {
   navEnheter: NavEnhet[];
-  setNavEnheter: (navEnheter: NavEnhet[]) => void;
+  setNavEnheter: (navEnheter: string[]) => void;
   regioner: NavRegion[];
 }
 
 export function NavEnhetFilter({ navEnheter, setNavEnheter, regioner }: Props) {
   const regionMap = buildRegionMap(navEnheter);
   const [regionOpen, setRegionOpen] = useState<string[]>([]);
 
-  function regionMapToNavEnheter(regionMap: RegionMap): NavEnhet[] {
-    return Array.from(Object.values(regionMap)).flat(1);
+  function regionMapToNavEnheter(regionMap: RegionMap): string[] {
+    return Array.from(Object.values(regionMap)).flat(1).map(enhet => enhet.enhetsnummer);
   }
 
   function buildRegionMap(navEnheter: NavEnhet[]): RegionMap {
@@ -69,7 +80,7 @@ export function NavEnhetFilter({ navEnheter, setNavEnheter, regioner }: Props) {
   }
 
   function underenhetOnChange(enhet: NavEnhet) {
-    setNavEnheter(addOrRemove(navEnheter, enhet));
+    setNavEnheter(addOrRemove(navEnheter, enhet).map(enhet => enhet.enhetsnummer));
   }
 
   return (

frontend/frontend-common/components/navEnhetFilter/NavEnhetFilter.tsx

@@ -7,8 +7,6 @@ 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 { GjennomforingStatusTag } from "./components/gjennomforing/GjennomforingStatusTag";
-import { GjennomforingStatusMedAarsakTag } from "./components/gjennomforing/GjennomforingStatusMedAarsakTag";
 import { FilterSkeleton } from "./components/skeleton/FilterSkeleton";
 import {
   InlineErrorBoundary,
@@ -19,6 +17,8 @@ import { DetaljerSkeleton } from "./components/skeleton/DetaljerSkeleton";
 import { ListSkeleton } from "./components/skeleton/ListSkeleton";
 import { LokalInformasjonContainer } from "./components/containers/LokalInformasjonContainer";
 import { LagreFilterButton } from "./components/lagreFilter/LagreFilterButton";
+import { GjennomforingStatusTag } from "./components/gjennomforing/GjennomforingStatusTag";
+import { GjennomforingStatusMedAarsakTag } from "./components/gjennomforing/GjennomforingStatusMedAarsakTag";
 import { LagredeFilterOversikt } from "./components/lagreFilter/LagredeFilterOversikt";
 import { TilbakemeldingsLenke } from "./components/tilbakemelding/Tilbakemeldingslenke";
 import { FilterContainer } from "./components/filter/FilterContainer";
@@ -45,10 +45,10 @@ export {
   LagreFilterButton,
   LagredeFilterOversikt,
   TilbakemeldingsLenke,
-  FilterContainer,
-  useOpenFilterWhenThreshold,
   GjennomforingStatusTag,
   GjennomforingStatusMedAarsakTag,
+  FilterContainer,
+  useOpenFilterWhenThreshold,
   useApiQuery,
   useApiSuspenseQuery,
 };

frontend/frontend-common/index.ts

@@ -8,7 +8,6 @@
   "homepage": "https://github.com/navikt/mulighetsrommet#readme",
   "dependencies": {
     "@hookform/resolvers": "4.1.3",
-    "@mr/api-client-v2": "workspace:*",
     "@navikt/aksel-icons": "7.17.3",
     "@navikt/ds-css": "7.17.3",
     "@navikt/ds-react": "7.17.3",

frontend/frontend-common/package.json

@@ -1,9 +1,3 @@
-import {
-  GjennomforingStatus,
-  Tiltakskode,
-  TiltakskodeArena,
-  ValidationError,
-} from "@mr/api-client-v2";
 import { shallowEquals } from "./shallow-equals";
 
 export function addOrRemove<T>(array: T[], item: T): T[] {
@@ -20,10 +14,6 @@ export function addOrRemove<T>(array: T[], item: T): T[] {
   }
 }
 
-export function gjennomforingIsAktiv(status: GjennomforingStatus): boolean {
-  return status === GjennomforingStatus.GJENNOMFORES;
-}
-
 export function formaterNOK(tall: number) {
   return `${formaterTall(tall)} NOK`;
 }
@@ -32,36 +22,12 @@ export function formaterTall(tall: number) {
   return Intl.NumberFormat("no-nb").format(tall);
 }
 
-export function isKursTiltak(tiltakskode?: Tiltakskode, arenaKode?: TiltakskodeArena): boolean {
-  if (tiltakskode) {
-    return [
-      Tiltakskode.JOBBKLUBB,
-      Tiltakskode.GRUPPE_ARBEIDSMARKEDSOPPLAERING,
-      Tiltakskode.GRUPPE_FAG_OG_YRKESOPPLAERING,
-    ].includes(tiltakskode);
-  }
-
-  if (arenaKode) {
-    return [TiltakskodeArena.ENKELAMO, TiltakskodeArena.ENKFAGYRKE].includes(arenaKode);
-  }
-
-  return false;
-}
-
 export function formaterKontoNummer(kontoNummer?: string): string {
   return !kontoNummer
     ? ""
     : `${kontoNummer.substring(0, 4)} ${kontoNummer.substring(4, 6)} ${kontoNummer.substring(6, 11)}`;
 }
 
-export function isValidationError(error: unknown): error is ValidationError {
-  return (
-    typeof error === "object" &&
-      error !== null &&
-    "errors" in error
-  );
-}
-
 export function jsonPointerToFieldPath(pointer: string): string {
   return pointer
     .replace(/^\//, "") // Remove leading slash

frontend/frontend-common/utils/utils.ts

@@ -1,4 +1,4 @@
-import { LagretDokumenttype, LagretFilterRequest, LagretFilterService } from "@mr/api-client-v2";
+import { LagretDokumenttype, LagretFilterService } from "@mr/api-client-v2";
 import { QueryClient } from "@tanstack/react-query";
 import { ActionFunctionArgs } from "react-router";
 import { QueryKeys } from "../QueryKeys";
@@ -37,14 +37,14 @@ export const lagreFilterAction =
     });
   };
 
-export function filterToActionRequest(request: LagretFilterRequest): FormData {
+export function filterToActionRequest(request: any, type: LagretDokumenttype): FormData {
   const formData = new FormData();
   if (request.id) {
     formData.append("id", request.id);
   }
-  formData.append("type", request.type);
   formData.append("filter", JSON.stringify(request.filter));
-  formData.append("sortOrder", request.sortOrder.toString());
+  formData.append("sortOrder", "0");
+  formData.append("type", type);
   formData.append("navn", request.navn);
   return formData;
 }

frontend/mr-admin-flate/src/api/lagret-filter/lagretFilterAction.ts

@@ -1,12 +1,12 @@
 import { useDeleteArrangorKontaktperson } from "@/api/arrangor/useDeleteArrangorKontaktperson";
 import { useUpsertArrangorKontaktperson } from "@/api/arrangor/useUpsertArrangorKontaktperson";
-import { validEmail } from "@/utils/Utils";
+import { isValidationError, validEmail } from "@/utils/Utils";
 import {
   ArrangorKontaktperson,
   ArrangorKontaktpersonAnsvar,
   ProblemDetail,
 } from "@mr/api-client-v2";
-import { isValidationError, jsonPointerToFieldPath } from "@mr/frontend-common/utils/utils";
+import { jsonPointerToFieldPath } from "@mr/frontend-common/utils/utils";
 import { Button, HGrid, TextField, UNSAFE_Combobox } from "@navikt/ds-react";
 import { useState } from "react";
 import { v4 as uuidv4 } from "uuid";

frontend/mr-admin-flate/src/components/arrangor/ArrangorKontaktpersonForm.tsx

@@ -6,7 +6,7 @@ import {
   ArrangorKontaktpersonAnsvar,
   ProblemDetail,
 } from "@mr/api-client-v2";
-import { isValidationError, jsonPointerToFieldPath } from "@mr/frontend-common/utils/utils";
+import { jsonPointerToFieldPath } from "@mr/frontend-common/utils/utils";
 import {
   Button,
   HStack,
@@ -21,6 +21,7 @@ import { RefObject, useRef, useState } from "react";
 import { z } from "zod";
 import { navnForAnsvar } from "./ArrangorKontaktpersonUtils";
 import { SlettKontaktpersonModal } from "./SlettKontaktpersonModal";
+import { isValidationError } from "@/utils/Utils";
 
 interface Props {
   arrangor: Arrangor;