fix(CaseEvents): case tag event parsing (#339)

* fix(CaseEvents): case tag event parsing * feat(CaseEvents): better handling of empty tags list
checkmarble · Jan 19, 2024 · ef2d4b9 · ef2d4b9
1 parent 10598dc
commit ef2d4b9
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 18 deletions.
diff --git a/packages/app-builder/public/locales/en/cases.json b/packages/app-builder/public/locales/en/cases.json
@@ -47,6 +47,8 @@
   "case_detail.history.event_title.file_added": "File added: <Name>{{name}}</Name>",
   "case_detail.history.event_detail.added_by": "Added by: <Avatar/> <User>{{user}}</User>",
   "case_detail.history.event_detail.edited_by": "Edited by: <Avatar/> <User>{{user}}</User>",
+  "case_detail.history.event_detail.case_tags.new": "New tags: <CaseTags/>",
+  "case_detail.history.event_detail.case_tags.none": "removed all tags",
   "case_detail.add_a_comment.label": "Comment",
   "case_detail.add_a_comment.placeholder": "Write a note",
   "case_detail.add_a_comment.post": "post a comment",

diff --git a/packages/app-builder/src/components/Cases/CaseEvents.tsx b/packages/app-builder/src/components/Cases/CaseEvents.tsx
@@ -1,4 +1,8 @@
-import { type CaseEvent } from '@app-builder/models/cases';
+import {
+  type CaseEvent,
+  type CaseTagsUpdatedEvent,
+  type CommentAddedEvent,
+} from '@app-builder/models/cases';
 import { useOrganizationUsers } from '@app-builder/services/organization/organization-users';
 import { getFullName } from '@app-builder/services/user';
 import { formatDateRelative } from '@app-builder/utils/format';
@@ -293,24 +297,10 @@ export function getEventDetail(event: CaseEvent) {
       return <Author userId={event.user_id} type="added_by" />;
     }
     case 'comment_added': {
-      return (
-        <div className="flex flex-col gap-2">
-          <Author userId={event.user_id} type="added_by" />
-          {event.additional_note ? (
-            <div className="text-s text-grey-100 whitespace-break-spaces font-normal">
-              {event.additional_note}
-            </div>
-          ) : null}
-        </div>
-      );
+      return <CommentAddedEventDetail event={event} />;
     }
     case 'tags_updated': {
-      return (
-        <div className="flex flex-col gap-2">
-          <Author userId={event.user_id} type="added_by" />
-          <CaseTags caseTagIds={event.tagIds} />
-        </div>
-      );
+      return <TagsUpdatedEventDetail event={event} />;
     }
     case 'decision_added':
     case 'file_added': {
@@ -323,3 +313,40 @@ export function getEventDetail(event: CaseEvent) {
     }
   }
 }
+
+function CommentAddedEventDetail({ event }: { event: CommentAddedEvent }) {
+  return (
+    <div className="flex flex-col gap-2">
+      <Author userId={event.user_id} type="added_by" />
+      {event.additional_note ? (
+        <div className="text-s text-grey-100 whitespace-break-spaces font-normal">
+          {event.additional_note}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function TagsUpdatedEventDetail({ event }: { event: CaseTagsUpdatedEvent }) {
+  const { t } = useTranslation(casesI18n);
+  return (
+    <div className="flex flex-col gap-2">
+      <Author userId={event.user_id} type="edited_by" />
+      {event.tagIds.length === 0 ? (
+        <p className="text-grey-100 text-s font-normal first-letter:capitalize">
+          {t('cases:case_detail.history.event_detail.case_tags.none')}
+        </p>
+      ) : (
+        <div className="text-grey-100 text-s inline-flex flex-wrap whitespace-pre font-semibold">
+          <Trans
+            t={t}
+            i18nKey="cases:case_detail.history.event_detail.case_tags.new"
+            components={{
+              CaseTags: <CaseTags caseTagIds={event.tagIds} />,
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/app-builder/src/models/cases.ts b/packages/app-builder/src/models/cases.ts
@@ -22,10 +22,21 @@ export function adaptCaseTagsUpdatedEventDto({
 }: CaseTagsUpdatedEventDto): CaseTagsUpdatedEvent {
   return {
     ...rest,
-    tagIds: new_value.split(','),
+    tagIds: new_value === '' ? [] : new_value.split(','),
   };
 }
 
+export type {
+  CaseCreatedEvent,
+  CaseStatusUpdatedEvent,
+  CaseTagsUpdatedEvent,
+  CommentAddedEvent,
+  DecisionAddedEvent,
+  FileAddedEvent,
+  InboxChangedEvent,
+  NameUpdatedEvent,
+};
+
 export type CaseEvent =
   | CaseCreatedEvent
   | CaseStatusUpdatedEvent