Redakatør maltekst/text history: Show name of editor instead of navident

navikt · Oct 1, 2024 · d05edd0 · d05edd0
1 parent 7230ce9
commit d05edd0
Show file tree

Hide file tree

Showing 14 changed files with 75 additions and 97 deletions.
diff --git a/frontend/src/components/datetime/datetime.tsx b/frontend/src/components/datetime/datetime.tsx
@@ -1,24 +1,24 @@
 import { CalendarIcon, ClockIcon } from '@navikt/aksel-icons';
 import { styled } from 'styled-components';
 import { isoDateTimeToPretty } from '@app/domain/date';
-import { IEditor } from '@app/types/common-text-types';
+import { IEdit } from '@app/types/common-text-types';
 
 interface Props {
   created: string;
-  lastEditor: IEditor | undefined;
+  lastEdit: IEdit | undefined;
 }
 
-export const ModifiedCreatedDateTime = ({ lastEditor, created }: Props) => {
-  const isModified = lastEditor !== undefined;
+export const ModifiedCreatedDateTime = ({ lastEdit, created }: Props) => {
+  const isModified = lastEdit !== undefined;
   const Icon = isModified ? CalendarIcon : ClockIcon;
 
-  const dateTime = isModified ? lastEditor.created : created;
+  const dateTime = isModified ? lastEdit.created : created;
   const title = isModified ? 'Sist endret' : 'Opprettet';
 
   return (
     <Wrapper>
       <DateTime icon={<Icon aria-hidden style={{ flexShrink: 0 }} />} dateTime={dateTime} title={title} />
-      {lastEditor === undefined ? null : <span>av {lastEditor.navIdent}</span>}
+      {lastEdit === undefined ? null : <span>av {lastEdit.actor.navIdent}</span>}
     </Wrapper>
   );
 };

diff --git a/frontend/src/components/editor-name/editor-name.tsx b/frontend/src/components/editor-name/editor-name.tsx
diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/draft.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/draft.tsx
@@ -1,7 +1,6 @@
 import { Loader } from '@navikt/ds-react';
 import { DateTime } from '@app/components/datetime/datetime';
 import { EditableTitle } from '@app/components/editable-title/editable-title';
-import { EditorName } from '@app/components/editor-name/editor-name';
 import { Filters } from '@app/components/maltekstseksjoner/filters';
 import { MaltekstseksjonTexts } from '@app/components/maltekstseksjoner/maltekstseksjon/texts';
 import {
@@ -46,7 +45,7 @@ export const DraftMaltekstSection = ({ maltekstseksjon, query, onDraftDeleted }:
 
   const isUpdating = isUpdatingTitle || isUpdatingTemplateSections || isUpdatingHjemmelIdList || isUpdatingUtfall;
 
-  const lastEditor = maltekstseksjon.editors.at(-1);
+  const lastEdit = maltekstseksjon.edits.at(-1);
 
   return (
     <Container>
@@ -62,7 +61,7 @@ export const DraftMaltekstSection = ({ maltekstseksjon, query, onDraftDeleted }:
             <strong>Sist endret:</strong>
             {isUpdating ? <Loader size="xsmall" /> : <DateTime dateTime={maltekstseksjon.modified} />}
           </DateTimeContainer>
-          <span>av {lastEditor === undefined ? 'Ukjent' : <EditorName editorId={lastEditor.navIdent} />}</span>
+          <span>av {lastEdit === undefined ? 'Ukjent' : lastEdit.actor.navn}</span>
           <TextHistory {...maltekstseksjon} isUpdating={isUpdating} />
         </MetadataContainer>
         <Filters maltekst={maltekstseksjon} query={query} />

diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-published.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-published.tsx
@@ -5,7 +5,6 @@ import { useParams } from 'react-router';
 import { styled } from 'styled-components';
 import { DateTime } from '@app/components/datetime/datetime';
 import { getTitle } from '@app/components/editable-title/editable-title';
-import { EditorName } from '@app/components/editor-name/editor-name';
 import { MaltekstseksjonTexts } from '@app/components/maltekstseksjoner/maltekstseksjon/texts';
 import {
   TagContainer,
@@ -37,7 +36,7 @@ interface MaltekstProps {
 
 export const PublishedMaltekstSection = ({ maltekstseksjon, query, onDraftCreated }: MaltekstProps) => {
   const { textId: activeTextId } = useParams<{ textId: string }>();
-  const { id, title, textIdList, publishedDateTime, versionId, publishedBy } = maltekstseksjon;
+  const { id, title, textIdList, publishedDateTime, versionId, publishedByActor } = maltekstseksjon;
   const [createDraft, { isLoading }] = useCreateDraftFromVersionMutation();
 
   const onCreateDraft = useCallback(async () => {
@@ -57,7 +56,7 @@ export const PublishedMaltekstSection = ({ maltekstseksjon, query, onDraftCreate
               <strong>Publisert:</strong>
               <DateTime dateTime={publishedDateTime} icon={<CalendarIcon aria-hidden style={{ flexShrink: 0 }} />} />
             </DateTimeContainer>
-            av {publishedBy === null ? 'Ukjent' : <EditorName editorId={publishedBy} />}
+            av {publishedByActor.navn}
           </LabelValue>
           <TextHistory {...maltekstseksjon} isUpdating={false} />
         </Row>

diff --git a/frontend/src/components/maltekstseksjoner/texts/text-draft-footer.tsx b/frontend/src/components/maltekstseksjoner/texts/text-draft-footer.tsx
@@ -1,7 +1,6 @@
 import { UploadIcon } from '@navikt/aksel-icons';
 import { Button, ErrorMessage, Loader } from '@navikt/ds-react';
 import { styled } from 'styled-components';
-import { EditorName } from '@app/components/editor-name/editor-name';
 import { AllMaltekstseksjonReferences } from '@app/components/malteksteksjon-references/maltekstseksjon-references';
 import { DeleteDraftButton } from '@app/components/smart-editor-texts/delete-draft-button';
 import { isoDateTimeToPretty } from '@app/domain/date';
@@ -29,7 +28,7 @@ export const DraftTextFooter = ({
 }: Props) => {
   const [, { isLoading: isPublishing }] = usePublishMutation({ fixedCacheKey: text.id });
   const { id, title, modified } = text;
-  const [lastEditor] = text.editors;
+  const [lastEdit] = text.edits;
 
   return (
     <ButtonsContainer>
@@ -57,11 +56,7 @@ export const DraftTextFooter = ({
         </div>
         Sist endret:{' '}
         {isSaving ? <Loader size="xsmall" /> : <time dateTime={modified}>{isoDateTimeToPretty(modified)}</time>}
-        {lastEditor === undefined ? null : (
-          <span>
-            , av: <EditorName editorId={lastEditor.navIdent} />
-          </span>
-        )}
+        {lastEdit === undefined ? null : <span>, av: {lastEdit.actor.navn}</span>}
       </Right>
     </ButtonsContainer>
   );

diff --git a/frontend/src/components/maltekstseksjoner/texts/text-published-footer.tsx b/frontend/src/components/maltekstseksjoner/texts/text-published-footer.tsx
@@ -1,7 +1,6 @@
 import { Button } from '@navikt/ds-react';
 import { useCallback } from 'react';
 import { styled } from 'styled-components';
-import { EditorName } from '@app/components/editor-name/editor-name';
 import { AllMaltekstseksjonReferences } from '@app/components/malteksteksjon-references/maltekstseksjon-references';
 import { useTextQuery } from '@app/components/smart-editor-texts/hooks/use-text-query';
 import { isoDateTimeToPretty } from '@app/domain/date';
@@ -42,7 +41,7 @@ export const PublishedTextFooter = ({ text, onDraftCreated, maltekstseksjonId, h
           />
         </div>
         Publisert: <time dateTime={publishedDateTime}>{isoDateTimeToPretty(publishedDateTime)}</time>, av:{' '}
-        <EditorName editorId={text.publishedBy} />
+        {text.publishedByActor.navn}
       </Right>
     </Container>
   );

diff --git a/frontend/src/components/smart-editor-texts/edit/changelog.tsx b/frontend/src/components/smart-editor-texts/edit/changelog.tsx
@@ -3,7 +3,7 @@ import { Fragment, useCallback, useRef } from 'react';
 import { styled } from 'styled-components';
 import { isoDateTimeToPretty } from '@app/domain/date';
 import { TextChangeType } from '@app/types/common-text-types';
-import { IText } from '@app/types/texts/responses';
+import { IPublishedText, IText } from '@app/types/texts/responses';
 
 interface Props {
   versions: IText[];
@@ -39,11 +39,11 @@ export const Changelog = ({ versions }: Props) => {
               {versions.flatMap((version) => (
                 <Fragment key={version.versionId}>
                   {version.published ? <Version {...version} /> : null}
-                  {version.editors.map(({ created, changeType, navIdent }) => (
-                    <Table.Row key={`${changeType}-${created}-${navIdent}`}>
+                  {version.edits.map(({ created, changeType, actor }) => (
+                    <Table.Row key={`${changeType}-${created}-${actor.navIdent}`}>
                       <Table.DataCell>{isoDateTimeToPretty(created)}</Table.DataCell>
                       <Table.DataCell>{CHANGE_TYPE_NAMES[changeType]}</Table.DataCell>
-                      <Table.DataCell>{navIdent}</Table.DataCell>
+                      <Table.DataCell>{actor.navn}</Table.DataCell>
                     </Table.Row>
                   ))}
                 </Fragment>
@@ -56,11 +56,11 @@ export const Changelog = ({ versions }: Props) => {
   );
 };
 
-const Version = ({ publishedBy, publishedDateTime }: IText) => (
+const Version = ({ publishedByActor, publishedDateTime }: IPublishedText) => (
   <VersionRow>
     <Table.DataCell>{isoDateTimeToPretty(publishedDateTime)}</Table.DataCell>
     <Table.DataCell>Publisert</Table.DataCell>
-    <Table.DataCell>{publishedBy}</Table.DataCell>
+    <Table.DataCell>{publishedByActor.navn}</Table.DataCell>
   </VersionRow>
 );
 

diff --git a/frontend/src/components/smart-editor-texts/edit/edit.tsx b/frontend/src/components/smart-editor-texts/edit/edit.tsx
@@ -44,7 +44,7 @@ export const Edit = ({ text, onDraftDeleted, children, status, onPublish, delete
 
   const { enhet, templateSection, utfall, ytelseHjemmel } = useMetadataFilters(textType);
 
-  const [lastEditor] = text.editors.filter(
+  const [lastEdit] = text.edits.filter(
     (e) =>
       e.changeType === TextChangeType.TEXT_ENHETER ||
       e.changeType === TextChangeType.TEXT_SECTIONS ||
@@ -68,7 +68,7 @@ export const Edit = ({ text, onDraftDeleted, children, status, onPublish, delete
 
         <LineContainer>
           <strong>Sist endret:</strong>
-          <ModifiedCreatedDateTime lastEditor={lastEditor} created={created} />
+          <ModifiedCreatedDateTime lastEdit={lastEdit} created={created} />
         </LineContainer>
 
         <LineContainer>

diff --git a/frontend/src/components/smart-editor-texts/edit/footer.tsx b/frontend/src/components/smart-editor-texts/edit/footer.tsx
@@ -2,15 +2,14 @@ import { TrashIcon, UploadIcon } from '@navikt/aksel-icons';
 import { Button, ErrorMessage } from '@navikt/ds-react';
 import { useMemo, useState } from 'react';
 import { styled } from 'styled-components';
-import { EditorName } from '@app/components/editor-name/editor-name';
 import { AllMaltekstseksjonReferences } from '@app/components/malteksteksjon-references/maltekstseksjon-references';
 import { SavedStatus, SavedStatusProps } from '@app/components/saved-status/saved-status';
 import { isoDateTimeToPretty } from '@app/domain/date';
 import { isGodFormuleringType, isRegelverkType, isRichTextType } from '@app/functions/is-rich-plain-text';
 import { useRedaktoerLanguage } from '@app/hooks/use-redaktoer-language';
 import { usePublishMutation } from '@app/redux-api/texts/mutations';
 import { useGetTextVersionsQuery } from '@app/redux-api/texts/queries';
-import { IEditor, TextChangeType } from '@app/types/common-text-types';
+import { IEdit, TextChangeType } from '@app/types/common-text-types';
 import { TextType } from '@app/types/texts/common';
 import { LANGUAGE_NAMES, Language } from '@app/types/texts/language';
 import { IText } from '@app/types/texts/responses';
@@ -30,7 +29,7 @@ export const Footer = ({ text, onDraftDeleted, status, onPublish, deleteTranslat
   const { data: versions = [] } = useGetTextVersionsQuery(text.id);
   const lastPublishedVersion = useMemo(() => versions.find((version) => version.published), [versions]);
 
-  const { id, editors, publishedMaltekstseksjonIdList, draftMaltekstseksjonIdList, textType } = text;
+  const { id, edits, publishedMaltekstseksjonIdList, draftMaltekstseksjonIdList, textType } = text;
 
   const isDraft = text.publishedDateTime === null;
 
@@ -57,7 +56,7 @@ export const Footer = ({ text, onDraftDeleted, status, onPublish, deleteTranslat
         />
 
         <SavedStatus {...status} />
-        <LastEditor editors={editors} textType={textType} />
+        <LastEdit edits={edits} textType={textType} />
       </Row>
     </Container>
   );
@@ -95,12 +94,12 @@ const DeleteLanguageVersion = ({ deleteTranslation }: DeleteLanguageVersionProps
   );
 };
 
-interface LastEditorProps {
-  editors: IEditor[];
+interface LastEditProps {
+  edits: IEdit[];
   textType: TextType;
 }
 
-const LastEditor = ({ editors, textType }: LastEditorProps) => {
+const LastEdit = ({ edits, textType }: LastEditProps) => {
   const language = useRedaktoerLanguage();
   const changeType: TextChangeType = useMemo(() => {
     if (isRichTextType(textType) || isGodFormuleringType(textType)) {
@@ -114,7 +113,7 @@ const LastEditor = ({ editors, textType }: LastEditorProps) => {
     return language === Language.NB ? TextChangeType.PLAIN_TEXT_NB : TextChangeType.PLAIN_TEXT_NN;
   }, [language, textType]);
 
-  const [lastEdit] = editors.filter(
+  const [lastEdit] = edits.filter(
     (e) => e.changeType === changeType || e.changeType === TextChangeType.TEXT_VERSION_CREATED,
   );
 
@@ -123,10 +122,10 @@ const LastEditor = ({ editors, textType }: LastEditorProps) => {
   }
 
   return (
-    <LastEditorContainer>
+    <LastEditContainer>
       Sist endret: <time dateTime={lastEdit.created}>{isoDateTimeToPretty(lastEdit.created)}</time>, av:{' '}
-      <EditorName editorId={lastEdit.navIdent} />
-    </LastEditorContainer>
+      {lastEdit.actor.navn}
+    </LastEditContainer>
   );
 };
 
@@ -137,7 +136,7 @@ const Container = styled.div`
   padding: 16px;
 `;
 
-const LastEditorContainer = styled.span`
+const LastEditContainer = styled.span`
   display: flex;
   align-items: center;
   white-space: pre;

diff --git a/frontend/src/components/text-history/text-history.tsx b/frontend/src/components/text-history/text-history.tsx
@@ -2,45 +2,45 @@ import { CalendarIcon, ClockDashedIcon, PencilWritingIcon, UploadIcon } from '@n
 import { Button, Tag } from '@navikt/ds-react';
 import { useRef, useState } from 'react';
 import { styled } from 'styled-components';
-import { EditorName } from '@app/components/editor-name/editor-name';
 import { isoDateTimeToPretty } from '@app/domain/date';
 import { useOnClickOutside } from '@app/hooks/use-on-click-outside';
 import { pushEvent } from '@app/observability';
+import { INavEmployee } from '@app/types/bruker';
 import { IEditor } from '@app/types/maltekstseksjoner/responses';
 
 interface PublishedProps {
   publishedDateTime: string;
-  publishedBy: string;
+  publishedByActor: INavEmployee;
 }
 
 interface DraftProps {
   publishedDateTime: null;
-  publishedBy: null;
+  publishedByActor: null;
 }
 
 interface Props {
   published: boolean;
   modified: string;
   created: string;
-  createdBy: string;
-  editors: IEditor[];
+  createdByActor: INavEmployee;
+  edits: IEditor[];
   isUpdating: boolean;
 }
 
 export const TextHistory = ({
   publishedDateTime,
-  publishedBy,
+  publishedByActor,
   created,
-  createdBy,
-  editors,
+  createdByActor,
+  edits,
 }: Props & (PublishedProps | DraftProps)) => {
-  const [showEditors, setShowEditors] = useState(false);
+  const [showEdits, setShowEdits] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
-  useOnClickOutside(ref, () => setShowEditors(false));
+  useOnClickOutside(ref, () => setShowEdits(false));
 
   return (
     <EditorHistoryContainer ref={ref}>
-      {showEditors && (
+      {showEdits && (
         <EditorList>
           {publishedDateTime !== null ? (
             <ListItem>
@@ -50,19 +50,19 @@ export const TextHistory = ({
               </StyledTag>
               <span>
                 {' '}
-                av <EditorName editorId={publishedBy} /> {isoDateTimeToPretty(publishedDateTime)}
+                av {publishedByActor.navn} {isoDateTimeToPretty(publishedDateTime)}
               </span>
             </ListItem>
           ) : null}
-          {editors.map((editor) => (
-            <ListItem key={editor.navIdent}>
+          {edits.map((edit) => (
+            <ListItem key={edit.actor.navIdent}>
               <StyledTag variant="warning" size="xsmall">
                 <PencilWritingIcon aria-hidden />
                 Endret
               </StyledTag>
               <span>
                 {' '}
-                av <EditorName key={editor.navIdent} editorId={editor.navIdent} /> {isoDateTimeToPretty(editor.created)}
+                av {edit.actor.navn} {isoDateTimeToPretty(edit.created)}
               </span>
             </ListItem>
           ))}
@@ -73,7 +73,7 @@ export const TextHistory = ({
             </StyledTag>
             <span>
               {' '}
-              av <EditorName editorId={createdBy} /> {isoDateTimeToPretty(created)}
+              av {createdByActor.navn} {isoDateTimeToPretty(created)}
             </span>
           </ListItem>
         </EditorList>
@@ -82,13 +82,13 @@ export const TextHistory = ({
         variant="tertiary"
         size="xsmall"
         onClick={() => {
-          const enabled = !showEditors;
+          const enabled = !showEdits;
           pushEvent('toggle-text-history', 'texts', { enabled: enabled.toString() });
-          setShowEditors(enabled);
+          setShowEdits(enabled);
         }}
         icon={<ClockDashedIcon aria-hidden />}
       >
-        {showEditors ? 'Skjul' : 'Vis'} historikk
+        {showEdits ? 'Skjul' : 'Vis'} historikk
       </Button>
     </EditorHistoryContainer>
   );