Logged in: Remove option to override internal saksnummer

Author: eriksson-daniel

frontend/src/components/case/common/saksnummer.tsx

@@ -1,18 +1,19 @@
 import { FormFieldsIds } from '@app/components/case/common/form-fields-ids';
 import { useTranslation } from '@app/language/use-translation';
-import { PencilIcon } from '@navikt/aksel-icons';
-import { BodyShort, Button, Label, TextField } from '@navikt/ds-react';
-import { useEffect, useRef, useState } from 'react';
-import { styled } from 'styled-components';
+import { BodyShort, Heading, TextField } from '@navikt/ds-react';
+import { useEffect, useState } from 'react';
 
-interface Props {
+interface UserSaksnummerProps {
   value: string | null;
-  internalSaksnummer?: string | null;
   onChange: (saksnummer: string | null) => void;
   error: string | undefined;
 }
 
-export const DebouncedSaksnummer = ({ value, onChange, ...props }: Props) => {
+interface Props extends UserSaksnummerProps {
+  internalSaksnummer: string | null;
+}
+
+const DebouncedUserSaksnummer = ({ value, onChange, error }: UserSaksnummerProps) => {
   const [localValue, setLocalValue] = useState(value);
 
   useEffect(() => {
@@ -25,56 +26,49 @@ export const DebouncedSaksnummer = ({ value, onChange, ...props }: Props) => {
     return () => clearTimeout(timeout);
   }, [onChange, value, localValue]);
 
-  return <Saksnummer {...props} value={localValue} onChange={setLocalValue} />;
+  return <UserSaksnummer error={error} value={localValue} onChange={setLocalValue} />;
 };
 
-export const Saksnummer = ({ value, internalSaksnummer, onChange, error }: Props) => {
-  const inputRef = useRef<HTMLInputElement>(null);
+const InternalSaksnummer = ({ internalSaksnummer }: { internalSaksnummer: string }) => {
   const { skjema } = useTranslation();
 
-  const usersaksnummer = (
+  if (typeof internalSaksnummer === 'string' && internalSaksnummer.length !== 0) {
+    return (
+      <section>
+        <Heading size="xsmall">{skjema.begrunnelse.saksnummer.internalTitle}</Heading>
+        <BodyShort>{internalSaksnummer}</BodyShort>
+      </section>
+    );
+  }
+};
+
+const UserSaksnummer = ({ value, onChange, error }: UserSaksnummerProps) => {
+  const { skjema } = useTranslation();
+
+  return (
     <TextField
       id={FormFieldsIds.SAKSNUMMER}
       label={skjema.begrunnelse.saksnummer.title}
       value={value ?? ''}
       onChange={({ target }) => onChange(target.value)}
       htmlSize={24}
       error={error}
-      ref={inputRef}
     />
   );
+};
 
-  if (value !== null) {
-    return usersaksnummer;
+export const Saksnummer = ({ value, internalSaksnummer, onChange, error }: Props) => {
+  if (typeof internalSaksnummer === 'string' && internalSaksnummer.length !== 0) {
+    return <InternalSaksnummer internalSaksnummer={internalSaksnummer} />;
   }
 
+  return <UserSaksnummer value={value} onChange={onChange} error={error} />;
+};
+
+export const DebouncedSaksnummer = ({ value, internalSaksnummer, onChange, error }: Props) => {
   if (typeof internalSaksnummer === 'string' && internalSaksnummer.length !== 0) {
-    return (
-      <div>
-        <Label>{skjema.begrunnelse.saksnummer.internalTitle}</Label>
-        <Row>
-          <BodyShort>{internalSaksnummer}</BodyShort>
-          <Button
-            title={skjema.begrunnelse.saksnummer.change}
-            onClick={() => {
-              onChange(internalSaksnummer);
-              setTimeout(() => inputRef.current?.focus(), 0);
-            }}
-            size="small"
-            icon={<PencilIcon aria-hidden />}
-            variant="tertiary"
-          />
-        </Row>
-      </div>
-    );
+    return <InternalSaksnummer internalSaksnummer={internalSaksnummer} />;
   }
 
-  return usersaksnummer;
+  return <DebouncedUserSaksnummer value={value} onChange={onChange} error={error} />;
 };
-
-const Row = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  column-gap: 8px;
-`;