Sak søk v2 (#7020)

* Sak søk v2

* Bruker egen validator

_mocks/featureToggles.ts

@@ -85,4 +85,8 @@ export const featureTogglesFactory = () => [
     key: 'AKSJONSPUNKT_OVERLAPPENDE_SAKER',
     value: process.env.VITE_AKSJONSPUNKT_OVERLAPPENDE_SAKER,
   },
+  {
+    key: 'BRUK_V2_SAK_SOK',
+    value: process.env.VITE_BRUK_V2_SAK_SOK,
+  },
 ];

deploy/dev-fss-k9saksbehandling.yml

@@ -111,3 +111,5 @@ spec:
       value: "true"
     - name: AKSJONSPUNKT_OVERLAPPENDE_SAKER
       value: "true"
+    - name: BRUK_V2_SAK_SOK
+      value: "true"

deploy/prod-fss-k9saksbehandling.yml

@@ -108,3 +108,5 @@ spec:
       value: "true"
     - name: AKSJONSPUNKT_OVERLAPPENDE_SAKER
       value: 'false'
+    - name: BRUK_V2_SAK_SOK
+      value: 'false'

envDir/.env.development

@@ -19,3 +19,4 @@ VITE_BRUK_V2_SAK_DOKUMENTER=true
 VITE_OPPTJENING_READ_ONLY_PERIODER=true
 VITE_BRUK_INNTEKTSGRADERING_I_UTTAK=true
 VITE_AKSJONSPUNKT_OVERLAPPENDE_SAKER=true
+VITE_BRUK_V2_SAK_SOK=true

feature-toggles.json

@@ -90,5 +90,9 @@
   {
     "key": "AKSJONSPUNKT_OVERLAPPENDE_SAKER",
     "value": "${AKSJONSPUNKT_OVERLAPPENDE_SAKER}"
+  },
+  {
+    "key": "BRUK_V2_SAK_SOK",
+    "value": "${BRUK_V2_SAK_SOK}"
   }
 ]

loosely-type-checked-files.json

@@ -449,7 +449,6 @@
   "packages/sak-app/src/data/useVisForhandsvisningAvMelding.tsx",
   "packages/sak-app/src/fagsak/FagsakIndex.tsx",
   "packages/sak-app/src/fagsak/useHentFagsakRettigheter.tsx",
-  "packages/sak-app/src/fagsakSearch/FagsakSearchIndex.tsx",
   "packages/sak-app/src/fagsakprofile/FagsakProfileIndex.spec.tsx",
   "packages/sak-app/src/fagsakprofile/FagsakProfileIndex.tsx",
   "packages/sak-behandling-velger/src/components/BehandlingFilter.tsx",

packages/sak-app/src/fagsakSearch/FagsakSearchIndex.tsx

@@ -1,11 +1,14 @@
-import { useEffect, useMemo } from 'react';
+import { useContext, useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router';
 
 import FagsakSokSakIndex from '@fpsak-frontend/sak-sok';
 import { errorOfType, ErrorTypes, getErrorResponseData } from '@k9-sak-web/rest-api';
 import { RestApiState, useRestApiErrorDispatcher } from '@k9-sak-web/rest-api-hooks';
 import { Fagsak, KodeverkMedNavn } from '@k9-sak-web/types';
 
+import FagsakSøkSakIndexV2 from '@k9-sak-web/gui/sak/fagsakSøk/FagsakSøkSakIndex.js';
+import FeatureTogglesContext from '@k9-sak-web/gui/utils/featureToggles/FeatureTogglesContext.js';
+import { konverterKodeverkTilKode } from '@k9-sak-web/lib/kodeverk/konverterKodeverkTilKode.js';
 import { pathToFagsak } from '../app/paths';
 import { K9sakApiKeys, restApiHooks } from '../data/k9sakApi';
 
@@ -22,6 +25,8 @@ const FagsakSearchIndex = () => {
     K9sakApiKeys.KODEVERK,
   );
 
+  const featureToggles = useContext(FeatureTogglesContext);
+
   const navigate = useNavigate();
   const { removeErrorMessages } = useRestApiErrorDispatcher();
   const goToFagsak = (saksnummer: string) => {
@@ -37,7 +42,7 @@ const FagsakSearchIndex = () => {
   } = restApiHooks.useRestApiRunner<Fagsak[]>(K9sakApiKeys.SEARCH_FAGSAK);
 
   const searchResultAccessDenied = useMemo(
-    () => (errorOfType(error, ErrorTypes.MANGLER_TILGANG_FEIL) ? getErrorResponseData(error) : undefined),
+    () => (error && errorOfType(error, ErrorTypes.MANGLER_TILGANG_FEIL) ? getErrorResponseData(error) : undefined),
     [error],
   );
 
@@ -49,6 +54,21 @@ const FagsakSearchIndex = () => {
     }
   }, [sokFerdig, fagsaker]);
 
+  if (featureToggles?.BRUK_V2_SAK_SOK) {
+    const fagsakerV2 = JSON.parse(JSON.stringify(fagsaker));
+    konverterKodeverkTilKode(fagsakerV2, false);
+    return (
+      <FagsakSøkSakIndexV2
+        fagsaker={fagsakerV2}
+        searchFagsakCallback={searchFagsaker}
+        searchResultReceived={sokFerdig}
+        selectFagsakCallback={(e, saksnummer: string) => goToFagsak(saksnummer)}
+        searchStarted={sokeStatus === RestApiState.LOADING}
+        searchResultAccessDenied={searchResultAccessDenied}
+      />
+    );
+  }
+
   return (
     <FagsakSokSakIndex
       fagsaker={fagsaker}

packages/v2/gui/src/sak/fagsakSøk/FagsakSokSakIndex.stories.tsx

@@ -0,0 +1,93 @@
+import {
+  BehandlingAksjonspunktDtoBehandlingType as behandlingType,
+  BehandlingAksjonspunktDtoFagsakStatus as fagsakStatus,
+  MatchFagsakYtelseType as fagsakYtelseType,
+} from '@k9-sak-web/backend/k9sak/generated';
+import { KodeverkProvider } from '@k9-sak-web/gui/kodeverk/index.js';
+import alleKodeverkV2 from '@k9-sak-web/lib/kodeverk/mocks/alleKodeverkV2.json';
+import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect } from '@storybook/test';
+import FagsakSøkSakIndexV2 from './FagsakSøkSakIndex';
+
+const fagsaker = [
+  {
+    saksnummer: '1',
+    sakstype: fagsakYtelseType.PLEIEPENGER_SYKT_BARN,
+    status: fagsakStatus.OPPRETTET,
+    opprettet: '2017-08-02T00:54:25.455',
+    endret: '',
+  },
+  {
+    saksnummer: '2',
+    sakstype: fagsakYtelseType.OMSORGSPENGER,
+    status: fagsakStatus.OPPRETTET,
+    opprettet: '2017-08-02T00:54:25.455',
+    endret: '',
+  },
+];
+const meta = {
+  title: 'gui/sak/sok',
+  component: FagsakSøkSakIndexV2,
+  decorators: [
+    Story => (
+      <KodeverkProvider
+        behandlingType={behandlingType.FØRSTEGANGSSØKNAD}
+        kodeverk={alleKodeverkV2}
+        klageKodeverk={{}}
+        tilbakeKodeverk={{}}
+      >
+        <Story />
+      </KodeverkProvider>
+    ),
+  ],
+} satisfies Meta<typeof FagsakSøkSakIndexV2>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    fagsaker,
+    searchFagsakCallback: action('button-click'),
+    selectFagsakCallback: action('button-click'),
+    searchResultReceived: false,
+    searchStarted: false,
+  },
+  play: async ({ canvas }) => {
+    expect(canvas.getByLabelText('Saksnummer eller fødselsnummer/D-nummer')).toBeInTheDocument();
+    expect(canvas.getByRole('button', { name: 'Søk' })).toBeInTheDocument();
+    expect(canvas.getByText('Pleiepenger sykt barn')).toBeInTheDocument();
+    expect(canvas.getByText('Omsorgspenger')).toBeInTheDocument();
+  },
+};
+
+export const SøkUtenTreff: Story = {
+  args: {
+    fagsaker: [],
+    searchFagsakCallback: action('button-click'),
+    selectFagsakCallback: action('button-click'),
+    searchResultReceived: true,
+    searchStarted: true,
+  },
+  play: async ({ canvas }) => {
+    expect(canvas.getByText('Søket ga ingen treff')).toBeInTheDocument();
+  },
+};
+
+export const SøkDerEnIkkeHarAdgang: Story = {
+  args: {
+    fagsaker: [],
+    searchFagsakCallback: action('button-click'),
+    selectFagsakCallback: action('button-click'),
+    searchResultReceived: false,
+    searchStarted: false,
+    searchResultAccessDenied: {
+      feilmelding: 'Har ikke adgang',
+    },
+  },
+  play: async ({ canvas }) => {
+    expect(canvas.getByText('Har ikke adgang')).toBeInTheDocument();
+  },
+};

packages/v2/gui/src/sak/fagsakSøk/FagsakSøkSakIndex.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import FagsakSearch from './components/FagsakSearch';
+import type { Fagsak } from './types/Fagsak';
+
+interface OwnProps {
+  fagsaker?: Fagsak[];
+  searchFagsakCallback: () => void;
+  searchResultReceived: boolean;
+  selectFagsakCallback: (e: React.SyntheticEvent, saksnummer: string) => void;
+  searchStarted?: boolean;
+  searchResultAccessDenied?: {
+    feilmelding: string;
+  };
+}
+
+/*
+ * NB! Denne komponenten blir kun brukt lokalt. I alle andre miljø brukes K9LOS
+ */
+const FagsakSøkSakIndexV2 = ({
+  fagsaker = [],
+  searchFagsakCallback,
+  searchResultReceived,
+  selectFagsakCallback,
+  searchStarted = false,
+  searchResultAccessDenied,
+}: OwnProps) => (
+  <FagsakSearch
+    fagsaker={fagsaker}
+    searchFagsakCallback={searchFagsakCallback}
+    searchResultReceived={searchResultReceived}
+    selectFagsakCallback={selectFagsakCallback}
+    searchStarted={searchStarted}
+    searchResultAccessDenied={searchResultAccessDenied}
+  />
+);
+
+export default FagsakSøkSakIndexV2;

packages/v2/gui/src/sak/fagsakSøk/components/FagsakList.spec.tsx

@@ -0,0 +1,38 @@
+import {
+  BehandlingAksjonspunktDtoFagsakStatus as fagsakStatus,
+  MatchFagsakYtelseType as fagsakYtelseType,
+} from '@k9-sak-web/backend/k9sak/generated';
+import { sortFagsaker } from './FagsakList';
+
+describe('<FagsakList>', () => {
+  it('skal sortere søkeresultat der avsluttede skal vises sist, mens sist endrede skal vises først', () => {
+    const fagsak = {
+      saksnummer: '12345',
+      sakstype: fagsakYtelseType.PLEIEPENGER_SYKT_BARN,
+      status: fagsakStatus.UNDER_BEHANDLING,
+      opprettet: '2019-02-17T13:49:18.645',
+      endret: '2019-02-17T13:49:18.645',
+    };
+    const fagsak2 = {
+      saksnummer: '23456',
+      sakstype: fagsakYtelseType.PLEIEPENGER_SYKT_BARN,
+      status: fagsakStatus.UNDER_BEHANDLING,
+      opprettet: '2019-02-18T13:49:18.645',
+      endret: '2019-02-18T13:49:18.645',
+    };
+
+    const fagsak3 = {
+      saksnummer: '34567',
+      sakstype: fagsakYtelseType.PLEIEPENGER_SYKT_BARN,
+      status: fagsakStatus.AVSLUTTET,
+      opprettet: '2019-02-18T13:49:18.645',
+      endret: '2019-02-18T13:49:18.645',
+    };
+
+    const fagsaker = [fagsak, fagsak2, fagsak3];
+    const sorterteFagsaker = sortFagsaker(fagsaker);
+    expect(sorterteFagsaker[0]).toEqual(fagsaker[1]);
+    expect(sorterteFagsaker[1]).toEqual(fagsaker[0]);
+    expect(sorterteFagsaker[2]).toEqual(fagsaker[2]);
+  });
+});

packages/v2/gui/src/sak/fagsakSøk/components/FagsakList.tsx

@@ -0,0 +1,80 @@
+import { BehandlingAksjonspunktDtoFagsakStatus as fagsakStatus } from '@k9-sak-web/backend/k9sak/generated';
+import { useKodeverkContext } from '@k9-sak-web/gui/kodeverk/index.js';
+import { KodeverkType } from '@k9-sak-web/lib/kodeverk/types.js';
+import { Table } from '@navikt/ds-react';
+import React from 'react';
+import type { Fagsak } from '../types/Fagsak';
+import styles from './fagsakList.module.css';
+
+const headerTextCodes = ['Saksnummer', 'Sakstype', 'Status'];
+const lagFagsakSortObj = (fagsak: Fagsak) => ({
+  avsluttet: fagsak.status === fagsakStatus.AVSLUTTET,
+  endret: fagsak.endret ? fagsak.endret : fagsak.opprettet,
+});
+
+export const sortFagsaker = (fagsaker: Fagsak[]) =>
+  fagsaker.toSorted((fagsak1, fagsak2) => {
+    const a = lagFagsakSortObj(fagsak1);
+    const b = lagFagsakSortObj(fagsak2);
+    if (a.avsluttet && !b.avsluttet) {
+      return 1;
+    }
+    if (!a.avsluttet && b.avsluttet) {
+      return -1;
+    }
+    if (a.endret && b.endret) {
+      if (a.endret > b.endret) {
+        return -1;
+      }
+      if (a.endret < b.endret) {
+        return 1;
+      }
+    }
+    return 0;
+  });
+
+interface OwnProps {
+  fagsaker: Fagsak[];
+  selectFagsakCallback: (e: React.SyntheticEvent, saksnummer: string) => void;
+}
+
+/**
+ * FagsakList
+ *
+ * Presentasjonskomponent. Formaterer fagsak-søkeresultatet for visning i tabell. Sortering av fagsakene blir håndtert her.
+ */
+const FagsakList = ({ fagsaker, selectFagsakCallback }: OwnProps) => {
+  const { kodeverkNavnFraKode } = useKodeverkContext();
+
+  return (
+    <Table className={styles.table}>
+      <Table.Header>
+        <Table.Row shadeOnHover={false}>
+          {headerTextCodes.map(text => (
+            <Table.HeaderCell scope="col" key={text}>
+              {text}
+            </Table.HeaderCell>
+          ))}
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {sortFagsaker(fagsaker).map(fagsak => (
+          <Table.Row
+            key={fagsak.saksnummer}
+            id={fagsak.saksnummer}
+            onClick={event => selectFagsakCallback(event, fagsak.saksnummer)}
+            shadeOnHover={false}
+          >
+            <Table.DataCell>{fagsak.saksnummer}</Table.DataCell>
+            <Table.DataCell>{kodeverkNavnFraKode(fagsak.sakstype, KodeverkType.FAGSAK_YTELSE)}</Table.DataCell>
+            <Table.DataCell>
+              {fagsak.status && kodeverkNavnFraKode(fagsak.status, KodeverkType.FAGSAK_STATUS)}
+            </Table.DataCell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  );
+};
+
+export default FagsakList;