Show logged out modal on 401 and stop debounce on fritekst input

navikt · Oct 30, 2024 · 55955b7 · 55955b7
1 parent aa99082
commit 55955b7
Show file tree

Hide file tree

Showing 7 changed files with 164 additions and 85 deletions.
diff --git a/frontend/src/components/case/innlogget/begrunnelse/begrunnelse-page.tsx b/frontend/src/components/case/innlogget/begrunnelse/begrunnelse-page.tsx
@@ -5,6 +5,7 @@ import { Reasons } from '@app/components/case/common/reasons';
 import { DebouncedSaksnummer } from '@app/components/case/common/saksnummer';
 import { VedtakDate } from '@app/components/case/common/vedtak-date';
 import { BegrunnelseText } from '@app/components/case/innlogget/begrunnelse/begrunnelse-text';
+import { LoggedOutModal } from '@app/components/case/innlogget/begrunnelse/logged-out-modal';
 import { redirectToNav } from '@app/functions/redirect-to-nav';
 import { INITIAL_ERRORS } from '@app/hooks/errors/types';
 import { useCaseErrors } from '@app/hooks/errors/use-case-errors';
@@ -39,7 +40,7 @@ const RenderCasebegrunnelsePage = ({ data }: Props) => {
 
   const { skjema, user_loader } = useTranslation();
 
-  const [updateCase] = useUpdateCaseMutation();
+  const [updateCase] = useUpdateCaseMutation({ fixedCacheKey: data.id });
   const [deleteAttachment] = useDeleteAttachmentMutation();
   const [deleteCase, { isLoading }] = useDeleteCaseMutation();
 
@@ -96,90 +97,94 @@ const RenderCasebegrunnelsePage = ({ data }: Props) => {
   );
 
   return (
-    <DigitalFormContainer
-      activeStep={1}
-      isValid={isValid}
-      case={data}
-      page_title={page_title[data.type]}
-      steps={skjema.steps[data.type]}
-      innsendingsytelse={data.innsendingsytelse}
-      title_fragment={title_fragment[data.type]}
-    >
-      <GuidePanel>
-        <BodyLong>{skjema.employer_info[data.type]}</BodyLong>
-      </GuidePanel>
-
-      <PersonligeOpplysningerSummary
-        fornavn={isLoadingUser ? user_loader.loading_user : user.navn.fornavn}
-        etternavn={isLoadingUser ? user_loader.loading_user : user.navn.etternavn}
-        f_or_d_number={
-          isLoadingUser ? user_loader.loading_user : user.folkeregisteridentifikator?.identifikasjonsnummer
-        }
-      />
-
-      {isKlage ? (
-        <Reasons
-          checkedReasons={data.checkboxesSelected}
-          onChange={(reasons) => onChange('checkboxesSelected', reasons)}
+    <>
+      <DigitalFormContainer
+        activeStep={1}
+        isValid={isValid}
+        case={data}
+        page_title={page_title[data.type]}
+        steps={skjema.steps[data.type]}
+        innsendingsytelse={data.innsendingsytelse}
+        title_fragment={title_fragment[data.type]}
+      >
+        <GuidePanel>
+          <BodyLong>{skjema.employer_info[data.type]}</BodyLong>
+        </GuidePanel>
+
+        <PersonligeOpplysningerSummary
+          fornavn={isLoadingUser ? user_loader.loading_user : user.navn.fornavn}
+          etternavn={isLoadingUser ? user_loader.loading_user : user.navn.etternavn}
+          f_or_d_number={
+            isLoadingUser ? user_loader.loading_user : user.folkeregisteridentifikator?.identifikasjonsnummer
+          }
         />
-      ) : null}
-
-      <VedtakDate
-        value={data.vedtakDate}
-        error={errors[FormFieldsIds.VEDTAK_DATE]}
-        type={data.type}
-        onChange={(vedtakDate) => onChange('vedtakDate', vedtakDate)}
-      />
-
-      {isEttersendelseKlage ? (
-        <EttersendelseKaEnhet
-          caseIsAtKA={data.caseIsAtKA}
-          onIsAtKaChange={(caseIsAtKA) => onChange('caseIsAtKA', caseIsAtKA)}
-          error={errors[FormFieldsIds.CASE_IS_AT_KA]}
+
+        {isKlage ? (
+          <Reasons
+            checkedReasons={data.checkboxesSelected}
+            onChange={(reasons) => onChange('checkboxesSelected', reasons)}
+          />
+        ) : null}
+
+        <VedtakDate
+          value={data.vedtakDate}
+          error={errors[FormFieldsIds.VEDTAK_DATE]}
+          type={data.type}
+          onChange={(vedtakDate) => onChange('vedtakDate', vedtakDate)}
         />
-      ) : null}
-
-      {!isKlage ? <Alert variant="info">{skjema.begrunnelse.klageenhet.choose_enhet_explanation}</Alert> : null}
-
-      <DebouncedSaksnummer
-        value={data.userSaksnummer}
-        internalSaksnummer={data.internalSaksnummer}
-        onChange={(userSaksnummer) => onChange('userSaksnummer', userSaksnummer)}
-        error={errors[FormFieldsIds.SAKSNUMMER]}
-      />
-
-      <BegrunnelseText
-        caseId={data.id}
-        value={data.fritekst}
-        description={skjema.begrunnelse.begrunnelse_text.description[data.type]}
-        placeholder={skjema.begrunnelse.begrunnelse_text.placeholder[data.type]}
-        label={skjema.begrunnelse.begrunnelse_text.title[data.type]}
-        error={errors[FormFieldsIds.FRITEKST]}
-        modified={data.modifiedByUser}
-      />
-
-      <AttachmentsSection
-        attachments={data.vedlegg}
-        caseId={data.id}
-        basePath={`${API_PATH}/klanker`}
-        onDelete={deleteAttachment}
-        error={errors[FormFieldsIds.VEDLEGG]}
-      />
-
-      <Errors {...errors} />
-
-      <CenteredContainer>
-        <DeleteCaseButton
-          isLoading={isLoading}
-          onDelete={deleteAndReturn}
-          title={skjema.begrunnelse.delete_title[data.type]}
+
+        {isEttersendelseKlage ? (
+          <EttersendelseKaEnhet
+            caseIsAtKA={data.caseIsAtKA}
+            onIsAtKaChange={(caseIsAtKA) => onChange('caseIsAtKA', caseIsAtKA)}
+            error={errors[FormFieldsIds.CASE_IS_AT_KA]}
+          />
+        ) : null}
+
+        {!isKlage ? <Alert variant="info">{skjema.begrunnelse.klageenhet.choose_enhet_explanation}</Alert> : null}
+
+        <DebouncedSaksnummer
+          value={data.userSaksnummer}
+          internalSaksnummer={data.internalSaksnummer}
+          onChange={(userSaksnummer) => onChange('userSaksnummer', userSaksnummer)}
+          error={errors[FormFieldsIds.SAKSNUMMER]}
         />
 
-        <Button as={Link} variant="primary" onClick={submitKlage} to={NEXT_PAGE_URL} disabled={user === undefined}>
-          {skjema.begrunnelse.next_button}
-        </Button>
-      </CenteredContainer>
-    </DigitalFormContainer>
+        <BegrunnelseText
+          caseId={data.id}
+          value={data.fritekst}
+          description={skjema.begrunnelse.begrunnelse_text.description[data.type]}
+          placeholder={skjema.begrunnelse.begrunnelse_text.placeholder[data.type]}
+          label={skjema.begrunnelse.begrunnelse_text.title[data.type]}
+          error={errors[FormFieldsIds.FRITEKST]}
+          modified={data.modifiedByUser}
+        />
+
+        <AttachmentsSection
+          attachments={data.vedlegg}
+          caseId={data.id}
+          basePath={`${API_PATH}/klanker`}
+          onDelete={deleteAttachment}
+          error={errors[FormFieldsIds.VEDLEGG]}
+        />
+
+        <Errors {...errors} />
+
+        <CenteredContainer>
+          <DeleteCaseButton
+            isLoading={isLoading}
+            onDelete={deleteAndReturn}
+            title={skjema.begrunnelse.delete_title[data.type]}
+          />
+
+          <Button as={Link} variant="primary" onClick={submitKlage} to={NEXT_PAGE_URL} disabled={user === undefined}>
+            {skjema.begrunnelse.next_button}
+          </Button>
+        </CenteredContainer>
+      </DigitalFormContainer>
+
+      <LoggedOutModal fixedCacheKey={data.id} />
+    </>
   );
 };
 

diff --git a/frontend/src/components/case/innlogget/begrunnelse/begrunnelse-text.tsx b/frontend/src/components/case/innlogget/begrunnelse/begrunnelse-text.tsx
@@ -1,5 +1,6 @@
 import { AutosaveProgressIndicator } from '@app/components/autosave-progress/autosave-progress';
 import { FormFieldsIds } from '@app/components/case/common/form-fields-ids';
+import { isError } from '@app/functions/is-api-error';
 import { useOnUnmount } from '@app/hooks/use-on-unmount';
 import { useTranslation } from '@app/language/use-translation';
 import { useUpdateCaseMutation } from '@app/redux-api/case/api';
@@ -15,7 +16,7 @@ interface Props extends Omit<TextareaProps, 'label' | 'onError' | 'onChange'> {
 
 export const BegrunnelseText = ({ caseId, value, modified, error, ...props }: Props) => {
   const [localValue, setLocalValue] = useState(value);
-  const [updateCase, status] = useUpdateCaseMutation();
+  const [updateCase, status] = useUpdateCaseMutation({ fixedCacheKey: caseId });
   const [lastSaved, setLastSaved] = useState<string>(modified);
   const { skjema } = useTranslation();
   const { failed } = skjema.begrunnelse.autosave;
@@ -28,15 +29,17 @@ export const BegrunnelseText = ({ caseId, value, modified, error, ...props }: Pr
     [caseId, updateCase],
   );
 
+  const unauthorized = isError(status.error) && status.error.status === 401;
+
   useEffect(() => {
-    if (value === localValue) {
+    if (value === localValue || unauthorized) {
       return;
     }
 
     const timeout = setTimeout(() => updateFritekst(localValue), 1000);
 
     return () => clearTimeout(timeout);
-  }, [value, localValue, updateFritekst]);
+  }, [value, localValue, updateFritekst, unauthorized]);
 
   useOnUnmount(() => {
     if (value !== localValue) {

diff --git a/frontend/src/components/case/innlogget/begrunnelse/logged-out-modal.tsx b/frontend/src/components/case/innlogget/begrunnelse/logged-out-modal.tsx
@@ -0,0 +1,53 @@
+import { isError } from '@app/functions/is-api-error';
+import { useTranslation } from '@app/language/use-translation';
+import { useUpdateCaseMutation } from '@app/redux-api/case/api';
+import { getLoginRedirectPath } from '@app/user/login';
+import { BodyShort, Button, Modal } from '@navikt/ds-react';
+import { Link } from 'react-router-dom';
+import { styled } from 'styled-components';
+
+export const LoggedOutModal = ({ fixedCacheKey }: { fixedCacheKey: string }) => {
+  const [, { error }] = useUpdateCaseMutation({ fixedCacheKey });
+  const { skjema } = useTranslation();
+
+  const unauthorized = isError(error) && error.status === 401;
+
+  if (!unauthorized) {
+    return null;
+  }
+
+  const { loggedOut, login, logout, yes } = skjema.begrunnelse.loggedOutModal;
+
+  return (
+    <Modal
+      open
+      onClose={() => {}}
+      header={{ heading: loggedOut, closeButton: false }}
+      style={{ padding: 'var(--a-spacing-5)' }}
+    >
+      <ModalBody>
+        <BodyShort>{login}</BodyShort>
+
+        <Buttons>
+          <Button as={Link} to={getLoginRedirectPath()}>
+            {yes}
+          </Button>
+          <Button as={Link} to="/oauth2/logout" variant="secondary">
+            {logout}
+          </Button>
+        </Buttons>
+      </ModalBody>
+    </Modal>
+  );
+};
+
+const ModalBody = styled(Modal.Body)`
+  display: flex;
+  flex-direction: column;
+  gap: var(--a-spacing-4);
+`;
+
+const Buttons = styled.div`
+  display: flex;
+  gap: var(--a-spacing-4);
+`;
diff --git a/frontend/src/language/en.tsx b/frontend/src/language/en.tsx
@@ -41,6 +41,12 @@ export const en: Translations = {
       },
     },
     begrunnelse: {
+      loggedOutModal: {
+        loggedOut: 'You have been logged out',
+        login: 'Do you want to log in again?',
+        yes: 'Yes',
+        logout: 'Log out',
+      },
       autosave: {
         tooltip: 'We are saving your changes automatically.',
         saved: 'Last saved',

diff --git a/frontend/src/language/nb.tsx b/frontend/src/language/nb.tsx
@@ -42,6 +42,12 @@ export const nb = {
       },
     },
     begrunnelse: {
+      loggedOutModal: {
+        loggedOut: 'Du ser ut til å ha blitt logget ut',
+        login: 'Vil du forsøke å logge inn igjen?',
+        yes: 'Ja',
+        logout: 'Logg ut',
+      },
       autosave: {
         tooltip: 'Vi lagrer endringene dine automatisk.',
         saved: 'Sist lagret',

diff --git a/frontend/src/language/nn.tsx b/frontend/src/language/nn.tsx
@@ -41,6 +41,12 @@ export const nn: Translations = {
       },
     },
     begrunnelse: {
+      loggedOutModal: {
+        loggedOut: 'Du ser ut til å ha vorte logga ut',
+        login: 'Vil du prøva å logga inn igjen?',
+        yes: 'Ja',
+        logout: 'Logg ut',
+      },
       autosave: {
         tooltip: 'Vi lagrar endringane dine automatisk.',
         saved: 'Sist lagra',

diff --git a/frontend/src/user/login.ts b/frontend/src/user/login.ts
@@ -1,6 +1,6 @@
 import { currentPath } from '@app/routes/current-path';
 
-const getLoginRedirectPath = (): string => {
+export const getLoginRedirectPath = (): string => {
   const redirectAfter = currentPath(window.location);
 
   return `/oauth2/login?redirect=${redirectAfter}`;