From 68632cdedbbfa69f749695f5fcfcfd12cc9f5263 Mon Sep 17 00:00:00 2001
From: Stephen Hand <steveh@techmatters.org>
Date: Fri, 8 Dec 2023 11:01:27 +0000
Subject: [PATCH 1/7] Update timeline view to show recent timeline only, with
 updated header to match

---
 .../src/components/case/CaseHome.tsx          |  4 ++--
 .../src/components/case/Timeline.tsx          | 20 +++++++++++--------
 plugin-hrm-form/src/states/case/timeline.ts   |  4 ++--
 .../src/translations/en-CA/flexUI.json        |  3 ++-
 .../src/translations/en-MT/flexUI.json        |  3 ++-
 .../src/translations/en-NZ/flexUI.json        |  3 ++-
 .../src/translations/en-US/flexUI.json        |  3 ++-
 .../src/translations/es-CL/flexUI.json        |  3 ++-
 .../src/translations/es-CO/flexUI.json        |  3 ++-
 .../src/translations/es-ES/flexUI.json        |  3 ++-
 .../src/translations/hu-HU/flexUI.json        |  3 ++-
 .../src/translations/pl-PL/flexUI.json        |  3 ++-
 .../src/translations/pt-BR/flexUI.json        |  3 ++-
 .../src/translations/ro-RO/flexUI.json        |  3 ++-
 .../src/translations/th-TH/flexUI.json        |  3 ++-
 15 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/plugin-hrm-form/src/components/case/CaseHome.tsx b/plugin-hrm-form/src/components/case/CaseHome.tsx
index c06d9fc125..519c73020c 100644
--- a/plugin-hrm-form/src/components/case/CaseHome.tsx
+++ b/plugin-hrm-form/src/components/case/CaseHome.tsx
@@ -37,6 +37,7 @@ import { RootState } from '../../states';
 import { CaseDetails } from '../../states/case/types';
 import { Case, Contact, CustomITask, EntryInfo, StandaloneITask } from '../../types/types';
 import * as RoutingActions from '../../states/routing/actions';
+import { newCloseModalAction } from '../../states/routing/actions';
 import InformationRow from './InformationRow';
 import TimelineInformationRow from './TimelineInformationRow';
 import DocumentInformationRow from './DocumentInformationRow';
@@ -49,7 +50,6 @@ import { isStandaloneITask } from './Case';
 import selectContactByTaskSid from '../../states/contacts/selectContactByTaskSid';
 import asyncDispatch from '../../states/asyncDispatch';
 import { connectToCaseAsyncAction } from '../../states/contacts/saveContact';
-import { newCloseModalAction } from '../../states/routing/actions';
 import { BannerContainer, Text } from '../caseMergingBanners/styles';
 import InfoIcon from '../caseMergingBanners/InfoIcon';
 import { selectCurrentTopmostRouteForTask } from '../../states/routing/getRoute';
@@ -279,7 +279,7 @@ const CaseHome: React.FC<Props> = ({
           <CaseSummary task={task} />
         </Box>
         <Box margin="25px 0 0 0">
-          <Timeline taskSid={task.taskSid} can={can} />
+          <Timeline taskSid={task.taskSid} can={can} page={0} pageSize={5} />
         </Box>
         <Box margin="25px 0 0 0">
           <CaseSection
diff --git a/plugin-hrm-form/src/components/case/Timeline.tsx b/plugin-hrm-form/src/components/case/Timeline.tsx
index a109e054a5..15661b684f 100644
--- a/plugin-hrm-form/src/components/case/Timeline.tsx
+++ b/plugin-hrm-form/src/components/case/Timeline.tsx
@@ -25,13 +25,13 @@ import DialogContent from '@material-ui/core/DialogContent';
 import CallTypeIcon from '../common/icons/CallTypeIcon';
 import TimelineIcon from './TimelineIcon';
 import {
+  CaseDetailsBorder,
   CaseSectionFont,
-  ViewButton,
-  TimelineRow,
+  TimelineCallTypeIcon,
   TimelineDate,
+  TimelineRow,
   TimelineText,
-  TimelineCallTypeIcon,
-  CaseDetailsBorder,
+  ViewButton,
 } from '../../styles/case';
 import { Box, Row } from '../../styles/HrmStyles';
 import CaseAddButton from './CaseAddButton';
@@ -39,7 +39,7 @@ import { CustomITask } from '../../types/types';
 import { isConnectedCaseActivity } from '../../states/case/caseActivities';
 import { ConnectedCaseActivity, NoteActivity, ReferralActivity } from '../../states/case/types';
 import { getPermissionsForContact, PermissionActions, PermissionActionType } from '../../permissions';
-import { NewCaseSubroutes, CaseItemAction, CaseSectionSubroute } from '../../states/routing/types';
+import { CaseItemAction, CaseSectionSubroute, NewCaseSubroutes } from '../../states/routing/types';
 import { newOpenModalAction } from '../../states/routing/actions';
 import { RootState } from '../../states';
 import { selectCaseActivities } from '../../states/case/timeline';
@@ -48,13 +48,16 @@ import selectCurrentRouteCaseState from '../../states/case/selectCurrentRouteCas
 type OwnProps = {
   can: (action: PermissionActionType) => boolean;
   taskSid: CustomITask['taskSid'];
+  pageSize: number;
+  page: number;
+  titleCode?: string;
 };
 
-const mapStateToProps = (state: RootState, { taskSid }: OwnProps) => {
+const mapStateToProps = (state: RootState, { taskSid, pageSize, page }: OwnProps) => {
   const { connectedCase } = selectCurrentRouteCaseState(state, taskSid) ?? {};
 
   return {
-    timelineActivities: connectedCase ? selectCaseActivities(state, connectedCase.id) : [],
+    timelineActivities: connectedCase ? selectCaseActivities(state, connectedCase.id, pageSize, page) : [],
     connectedCase,
   };
 };
@@ -79,6 +82,7 @@ const Timeline: React.FC<Props> = ({
   openViewCaseSectionModal,
   openAddCaseSectionModal,
   connectedCase,
+  titleCode = 'Case-TimelineSection',
 }) => {
   const [mockedMessage, setMockedMessage] = useState(null);
 
@@ -127,7 +131,7 @@ const Timeline: React.FC<Props> = ({
         <Box marginBottom="10px">
           <Row>
             <CaseSectionFont id="Case-TimelineSection-label">
-              <Template code="Case-TimelineSection" />
+              <Template code={titleCode} />
             </CaseSectionFont>
             <Box marginLeft="auto">
               <CaseAddButton
diff --git a/plugin-hrm-form/src/states/case/timeline.ts b/plugin-hrm-form/src/states/case/timeline.ts
index 31be3cb84c..28646432c1 100644
--- a/plugin-hrm-form/src/states/case/timeline.ts
+++ b/plugin-hrm-form/src/states/case/timeline.ts
@@ -19,7 +19,7 @@ import { namespace } from '../storeNamespaces';
 import { getActivitiesFromCase, getActivitiesFromContacts, sortActivities } from './caseActivities';
 import { selectSavedContacts } from './connectedContacts';
 
-export const selectCaseActivities = (state: RootState, caseId: string) => {
+export const selectCaseActivities = (state: RootState, caseId: string, pageSize: number, page: number) => {
   const {
     [namespace]: { configuration, connectedCase },
   } = state;
@@ -41,5 +41,5 @@ export const selectCaseActivities = (state: RootState, caseId: string) => {
     ),
     ...getActivitiesFromContacts(selectSavedContacts(state, caseForTask)),
   ];
-  return sortActivities(timelineActivities);
+  return sortActivities(timelineActivities).slice(page * pageSize, (page + 1) * pageSize);
 };
diff --git a/plugin-hrm-form/src/translations/en-CA/flexUI.json b/plugin-hrm-form/src/translations/en-CA/flexUI.json
index 4d0f50dd9b..4da6c40395 100644
--- a/plugin-hrm-form/src/translations/en-CA/flexUI.json
+++ b/plugin-hrm-form/src/translations/en-CA/flexUI.json
@@ -193,7 +193,8 @@
   "Error-ContinueWithoutRecording": "Error from backend system.  Are you sure you want to end the task without recording?",
   "Error-Form": "There is a problem with your submission.  Please check the form for errors.",
   "Error-Unexpected": "Unexpected error has occurred",
-  "Case-TimelineSection": "Timeline",
+  "Case-TimelineSection": "Recent Timeline",
+  "Case-TimelineViewTitle": "Timeline",
   "Case-AddDocumentSection": "Documents",
   "Case-CaseDetailsChildName": "Child Name",
   "Case-CaseDetailsOwner": "Counsellor",
diff --git a/plugin-hrm-form/src/translations/en-MT/flexUI.json b/plugin-hrm-form/src/translations/en-MT/flexUI.json
index 1fdac2ca92..6979a42c5c 100644
--- a/plugin-hrm-form/src/translations/en-MT/flexUI.json
+++ b/plugin-hrm-form/src/translations/en-MT/flexUI.json
@@ -123,7 +123,8 @@
   "Bottombar-Close": "Close",
   "BottomBar-OpenNewCase": "Open New Case",
   "BottomBar-AddToExistingCase": "Add to Existing Case",
-  "Case-TimelineSection": "Timeline",
+  "Case-TimelineSection": "Recent Timeline",
+  "Case-TimelineViewTitle": "Timeline",
   "Case-AddHouseholdSection": "Household Information",
   "Case-AddPerpetratorSection": "Perpetrators",
   "Case-AddIncidentSection": "Incidents",
diff --git a/plugin-hrm-form/src/translations/en-NZ/flexUI.json b/plugin-hrm-form/src/translations/en-NZ/flexUI.json
index 8b629927f8..961da4e4fc 100644
--- a/plugin-hrm-form/src/translations/en-NZ/flexUI.json
+++ b/plugin-hrm-form/src/translations/en-NZ/flexUI.json
@@ -63,7 +63,8 @@
   "Case-ReferralComments": "Comments",
   "Case-ReferralDate": "Date",
   "Case-ReferralReferredTo": "Referred To...",
-  "Case-TimelineSection": "Timeline",
+  "Case-TimelineSection": "Recent Timeline",
+  "Case-TimelineViewTitle": "Timeline",
   "Case-ViewButton": "View",
   "Case-ViewDocument": "View Document",
   "Case-ViewHousehold": "View Risk to Self Report",
diff --git a/plugin-hrm-form/src/translations/en-US/flexUI.json b/plugin-hrm-form/src/translations/en-US/flexUI.json
index e2a595c7aa..0abb33c51a 100644
--- a/plugin-hrm-form/src/translations/en-US/flexUI.json
+++ b/plugin-hrm-form/src/translations/en-US/flexUI.json
@@ -154,7 +154,8 @@
   "Error-CategoryRequired": "Required 1 category minimum, 3 categories maximum",
   "Error-Unexpected": "Unexpected error has occurred",
   "Case-CaseNumber": "Case #",
-  "Case-TimelineSection": "Timeline",
+  "Case-TimelineSection": "Recent Timeline",
+  "Case-TimelineViewTitle": "Timeline",
   "Case-Timeline-DraftContactSummaryPlaceholder": "In Progress",
   "Case-AddPerpetratorSection": "Perpetrators",
   "Case-AddIncidentSection": "Incidents",
diff --git a/plugin-hrm-form/src/translations/es-CL/flexUI.json b/plugin-hrm-form/src/translations/es-CL/flexUI.json
index 2e39c315c0..96d433cc7b 100644
--- a/plugin-hrm-form/src/translations/es-CL/flexUI.json
+++ b/plugin-hrm-form/src/translations/es-CL/flexUI.json
@@ -120,7 +120,8 @@
   "Bottombar-Close": "Cerrar",
   "BottomBar-OpenNewCase": "Abrir Nuevo Caso",
   "BottomBar-AddToExistingCase": "Agregar al Caso Existente",
-  "Case-TimelineSection": "Historial",
+  "Case-TimelineSection": "Cronología reciente",
+  "Case-TimelineViewTitle": "Historial",
   "Case-AddHouseholdSection": "Información del Hogar",
   "Case-AddPerpetratorSection": "Perpetradores",
   "Case-AddIncidentSection": "Incidentes",
diff --git a/plugin-hrm-form/src/translations/es-CO/flexUI.json b/plugin-hrm-form/src/translations/es-CO/flexUI.json
index 4ff9ec08b2..1fc61695fd 100644
--- a/plugin-hrm-form/src/translations/es-CO/flexUI.json
+++ b/plugin-hrm-form/src/translations/es-CO/flexUI.json
@@ -120,7 +120,8 @@
   "Bottombar-Close": "Cerrar",
   "BottomBar-OpenNewCase": "Abrir Nuevo Caso",
   "BottomBar-AddToExistingCase": "Agregar al Caso Existente",
-  "Case-TimelineSection": "Historial",
+  "Case-TimelineSection": "Cronología reciente",
+  "Case-TimelineViewTitle": "Historial",
   "Case-AddHouseholdSection": "Información del Hogar",
   "Case-AddPerpetratorSection": "Perpetradores",
   "Case-AddIncidentSection": "Incidentes",
diff --git a/plugin-hrm-form/src/translations/es-ES/flexUI.json b/plugin-hrm-form/src/translations/es-ES/flexUI.json
index dc56a5849a..ff5bd2a96b 100644
--- a/plugin-hrm-form/src/translations/es-ES/flexUI.json
+++ b/plugin-hrm-form/src/translations/es-ES/flexUI.json
@@ -123,7 +123,8 @@
   "Bottombar-Close": "Cerrar",
   "BottomBar-OpenNewCase": "Abrir Nuevo Caso",
   "BottomBar-AddToExistingCase": "Agregar al Caso Existente",
-  "Case-TimelineSection": "Historial",
+  "Case-TimelineSection": "Cronología reciente",
+  "Case-TimelineViewTitle": "Historial",
   "Case-AddHouseholdSection": "Información del Hogar",
   "Case-AddPerpetratorSection": "Perpetradores",
   "Case-AddIncidentSection": "Incidentes",
diff --git a/plugin-hrm-form/src/translations/hu-HU/flexUI.json b/plugin-hrm-form/src/translations/hu-HU/flexUI.json
index c3f326d10b..f6d21c6dfc 100644
--- a/plugin-hrm-form/src/translations/hu-HU/flexUI.json
+++ b/plugin-hrm-form/src/translations/hu-HU/flexUI.json
@@ -119,7 +119,8 @@
   "Bottombar-Close": "Bezárás",
   "BottomBar-OpenNewCase": "Új eset megnyitása",
   "BottomBar-AddToExistingCase": "Hozzáadás egy meglévő esethez",
-  "Case-TimelineSection": "Idővonal",
+  "Case-TimelineSection": "Legutóbbi idővonal",
+  "Case-TimelineViewTitle": "Idővonal",
   "Case-AddHouseholdSection": "Kapcsolati információk",
   "Case-AddPerpetratorSection": "Elkövetők",
   "Case-AddIncidentSection": "Események",
diff --git a/plugin-hrm-form/src/translations/pl-PL/flexUI.json b/plugin-hrm-form/src/translations/pl-PL/flexUI.json
index 5198b6669d..911649724a 100644
--- a/plugin-hrm-form/src/translations/pl-PL/flexUI.json
+++ b/plugin-hrm-form/src/translations/pl-PL/flexUI.json
@@ -123,7 +123,8 @@
     "Bottombar-Close": "Blisko",
     "BottomBar-OpenNewCase": "Otwórz nową sprawę",
     "BottomBar-AddToExistingCase": "Dodaj do istniejącej skrzynki",
-    "Case-TimelineSection": "Oś czasu",
+    "Case-TimelineSection": "Najnowsza oś czasu",
+    "Case-TimelineViewTitle": "Oś czasu",
     "Case-AddHouseholdSection": "Informacje o gospodarstwie domowym",
     "Case-AddPerpetratorSection": "Sprawcy",
     "Case-AddIncidentSection": "Incydenty",
diff --git a/plugin-hrm-form/src/translations/pt-BR/flexUI.json b/plugin-hrm-form/src/translations/pt-BR/flexUI.json
index 1bd388c59c..943e99c4f3 100644
--- a/plugin-hrm-form/src/translations/pt-BR/flexUI.json
+++ b/plugin-hrm-form/src/translations/pt-BR/flexUI.json
@@ -108,7 +108,8 @@
   "Error-Form": "Há um problema com o seu envio. Verifique se há erros no formulário.",
   "RequiredFieldError": "Este campo é obrigatório.",
   "BottomBar-OpenNewCase": "Abrir novo caso",
-  "Case-TimelineSection": "Linha do tempo",
+  "Case-TimelineSection": "Linha do tempo recente",
+  "Case-TimelineViewTitle": "Linha do tempo",
   "Case-AddHouseholdSection": "Informação de moradia",
   "Case-AddPerpetratorSection": "Perpetradores/autor da violência",
   "Case-AddIncidentSection": "Incidentes",
diff --git a/plugin-hrm-form/src/translations/ro-RO/flexUI.json b/plugin-hrm-form/src/translations/ro-RO/flexUI.json
index 2d2fb76d0b..3e2651edc2 100644
--- a/plugin-hrm-form/src/translations/ro-RO/flexUI.json
+++ b/plugin-hrm-form/src/translations/ro-RO/flexUI.json
@@ -123,7 +123,8 @@
     "Bottombar-Close": "Închide",
     "BottomBar-OpenNewCase": "Deschideți un nou caz",
     "BottomBar-AddToExistingCase": "Adăugați la cazul existent",
-    "Case-TimelineSection": "Cronologie",
+    "Case-TimelineSection": "Cronologie recentă",
+    "Case-TimelineViewTitle": "Cronologie",
     "Case-AddHouseholdSection": "Informații de uz casnic",
     "Case-AddPerpetratorSection": "Făptuitori",
     "Case-AddIncidentSection": "Incidente",
diff --git a/plugin-hrm-form/src/translations/th-TH/flexUI.json b/plugin-hrm-form/src/translations/th-TH/flexUI.json
index 6a87689d79..9414a87b3d 100644
--- a/plugin-hrm-form/src/translations/th-TH/flexUI.json
+++ b/plugin-hrm-form/src/translations/th-TH/flexUI.json
@@ -63,7 +63,8 @@
   "Case-ReferralComments": "หมายเหตุ",
   "Case-ReferralDate": "วันที่ส่งต่อ",
   "Case-ReferralReferredTo": "อ้างถึง...",
-  "Case-TimelineSection": "ไทม์ไลน์",
+  "Case-TimelineSection": "ไทม์ไลน์ล่าสุด",
+  "Case-TimelineViewTitle": "ไทม์ไลน์",
   "Case-ViewButton": "แสดง",
   "Case-ViewDocument": "ดูเอกสาร",
   "Case-ViewHousehold": "ดูสมาชิกในครัวเรือน",

From cc4f501aff1f3781f3a6ff57a6eaee6d68574f62 Mon Sep 17 00:00:00 2001
From: Stephen Hand <steveh@techmatters.org>
Date: Fri, 8 Dec 2023 11:08:55 +0000
Subject: [PATCH 2/7] Update timeline view to show recent timeline only, with
 updated header to match

---
 .../src/components/case/CaseHome.tsx          |  2 +-
 .../case/{ => timeline}/Timeline.tsx          | 26 +++++++++----------
 .../case/{ => timeline}/TimelineIcon.tsx      | 23 ++++++++--------
 3 files changed, 25 insertions(+), 26 deletions(-)
 rename plugin-hrm-form/src/components/case/{ => timeline}/Timeline.tsx (90%)
 rename plugin-hrm-form/src/components/case/{ => timeline}/TimelineIcon.tsx (84%)

diff --git a/plugin-hrm-form/src/components/case/CaseHome.tsx b/plugin-hrm-form/src/components/case/CaseHome.tsx
index 519c73020c..b0a04d426b 100644
--- a/plugin-hrm-form/src/components/case/CaseHome.tsx
+++ b/plugin-hrm-form/src/components/case/CaseHome.tsx
@@ -23,7 +23,7 @@ import { DefinitionVersion } from 'hrm-form-definitions';
 import { CaseContainer } from '../../styles/case';
 import { BottomButtonBar, Box, Flex, SaveAndEndButton, StyledNextStepButton } from '../../styles/HrmStyles';
 import CaseDetailsComponent from './CaseDetails';
-import Timeline from './Timeline';
+import Timeline from './timeline/Timeline';
 import CaseSection from './CaseSection';
 import {
   getPermissionsForCase,
diff --git a/plugin-hrm-form/src/components/case/Timeline.tsx b/plugin-hrm-form/src/components/case/timeline/Timeline.tsx
similarity index 90%
rename from plugin-hrm-form/src/components/case/Timeline.tsx
rename to plugin-hrm-form/src/components/case/timeline/Timeline.tsx
index 15661b684f..91df1bf6bc 100644
--- a/plugin-hrm-form/src/components/case/Timeline.tsx
+++ b/plugin-hrm-form/src/components/case/timeline/Timeline.tsx
@@ -22,7 +22,7 @@ import { Template } from '@twilio/flex-ui';
 import Dialog from '@material-ui/core/Dialog';
 import DialogContent from '@material-ui/core/DialogContent';
 
-import CallTypeIcon from '../common/icons/CallTypeIcon';
+import CallTypeIcon from '../../common/icons/CallTypeIcon';
 import TimelineIcon from './TimelineIcon';
 import {
   CaseDetailsBorder,
@@ -32,18 +32,18 @@ import {
   TimelineRow,
   TimelineText,
   ViewButton,
-} from '../../styles/case';
-import { Box, Row } from '../../styles/HrmStyles';
-import CaseAddButton from './CaseAddButton';
-import { CustomITask } from '../../types/types';
-import { isConnectedCaseActivity } from '../../states/case/caseActivities';
-import { ConnectedCaseActivity, NoteActivity, ReferralActivity } from '../../states/case/types';
-import { getPermissionsForContact, PermissionActions, PermissionActionType } from '../../permissions';
-import { CaseItemAction, CaseSectionSubroute, NewCaseSubroutes } from '../../states/routing/types';
-import { newOpenModalAction } from '../../states/routing/actions';
-import { RootState } from '../../states';
-import { selectCaseActivities } from '../../states/case/timeline';
-import selectCurrentRouteCaseState from '../../states/case/selectCurrentRouteCase';
+} from '../../../styles/case';
+import { Box, Row } from '../../../styles/HrmStyles';
+import CaseAddButton from '../CaseAddButton';
+import { CustomITask } from '../../../types/types';
+import { isConnectedCaseActivity } from '../../../states/case/caseActivities';
+import { ConnectedCaseActivity, NoteActivity, ReferralActivity } from '../../../states/case/types';
+import { getPermissionsForContact, PermissionActions, PermissionActionType } from '../../../permissions';
+import { CaseItemAction, CaseSectionSubroute, NewCaseSubroutes } from '../../../states/routing/types';
+import { newOpenModalAction } from '../../../states/routing/actions';
+import { RootState } from '../../../states';
+import { selectCaseActivities } from '../../../states/case/timeline';
+import selectCurrentRouteCaseState from '../../../states/case/selectCurrentRouteCase';
 
 type OwnProps = {
   can: (action: PermissionActionType) => boolean;
diff --git a/plugin-hrm-form/src/components/case/TimelineIcon.tsx b/plugin-hrm-form/src/components/case/timeline/TimelineIcon.tsx
similarity index 84%
rename from plugin-hrm-form/src/components/case/TimelineIcon.tsx
rename to plugin-hrm-form/src/components/case/timeline/TimelineIcon.tsx
index 26694264e7..3b42373e53 100644
--- a/plugin-hrm-form/src/components/case/TimelineIcon.tsx
+++ b/plugin-hrm-form/src/components/case/timeline/TimelineIcon.tsx
@@ -16,23 +16,22 @@
 
 /* eslint-disable react/no-multi-comp */
 import React from 'react';
-import PropTypes from 'prop-types';
 import * as Flex from '@twilio/flex-ui';
+import { TaskChannelDefinition } from '@twilio/flex-ui';
 import NoteIcon from '@material-ui/icons/NoteAddOutlined';
 import AssignmentInd from '@material-ui/icons/AssignmentIndOutlined';
 import ReplyIcon from '@material-ui/icons/Reply';
-import { TaskChannelDefinition } from '@twilio/flex-ui';
 
-import { TimelineIconContainer } from '../../styles/case';
-import { channelTypes, ChannelTypes } from '../../states/DomainConstants';
-import TwitterIcon from '../common/icons/TwitterIcon';
-import InstagramIcon from '../common/icons/InstagramIcon';
-import LineIcon from '../common/icons/LineIcon';
-import WhatsappIcon from '../common/icons/WhatsappIcon';
-import FacebookIcon from '../common/icons/FacebookIcon';
-import SmsIcon from '../common/icons/SmsIcon';
-import CallIcon from '../common/icons/CallIcon';
-import { colors } from '../../channels/colors';
+import { TimelineIconContainer } from '../../../styles/case';
+import { channelTypes, ChannelTypes } from '../../../states/DomainConstants';
+import TwitterIcon from '../../common/icons/TwitterIcon';
+import InstagramIcon from '../../common/icons/InstagramIcon';
+import LineIcon from '../../common/icons/LineIcon';
+import WhatsappIcon from '../../common/icons/WhatsappIcon';
+import FacebookIcon from '../../common/icons/FacebookIcon';
+import SmsIcon from '../../common/icons/SmsIcon';
+import CallIcon from '../../common/icons/CallIcon';
+import { colors } from '../../../channels/colors';
 
 type IconType = ChannelTypes | 'note' | 'referral';
 

From df932b9064f00e8eedb61cc6eb0f56110ed26111 Mon Sep 17 00:00:00 2001
From: Stephen Hand <steveh@techmatters.org>
Date: Mon, 11 Dec 2023 14:44:07 +0000
Subject: [PATCH 3/7] Implement CHI-1976 & CHI-1975

---
 .github/workflows/global-qa-release-tag.yml   |   2 +-
 plugin-hrm-form/src/components/case/Case.tsx  |   6 +
 .../src/components/case/CaseHome.tsx          |  97 ++++++-------
 .../case/timeline/FullTimelineView.tsx        |  91 ++++++++++++
 .../src/components/case/timeline/Timeline.tsx | 134 +++++++++---------
 .../caseMergingBanners/AddToCaseBanner.tsx    | 102 +++++++++++++
 .../src/states/case/caseActivities.ts         |   5 +
 plugin-hrm-form/src/states/case/timeline.ts   |   9 +-
 plugin-hrm-form/src/states/routing/types.ts   |  16 ++-
 .../src/translations/en-CA/flexUI.json        |   6 +-
 .../src/translations/en-MT/flexUI.json        |   6 +-
 .../src/translations/en-NZ/flexUI.json        |   6 +-
 .../src/translations/en-US/flexUI.json        |   6 +-
 .../src/translations/es-CL/flexUI.json        |   6 +-
 .../src/translations/es-CO/flexUI.json        |   6 +-
 .../src/translations/es-ES/flexUI.json        |   6 +-
 .../src/translations/hu-HU/flexUI.json        |   6 +-
 .../src/translations/pl-PL/flexUI.json        |   6 +-
 .../src/translations/pt-BR/flexUI.json        |   6 +-
 .../src/translations/ro-RO/flexUI.json        |   6 +-
 .../src/translations/th-TH/flexUI.json        |   6 +-
 21 files changed, 376 insertions(+), 158 deletions(-)
 create mode 100644 plugin-hrm-form/src/components/case/timeline/FullTimelineView.tsx
 create mode 100644 plugin-hrm-form/src/components/caseMergingBanners/AddToCaseBanner.tsx

diff --git a/.github/workflows/global-qa-release-tag.yml b/.github/workflows/global-qa-release-tag.yml
index 0c2d39cfe1..be7cb9cf1d 100644
--- a/.github/workflows/global-qa-release-tag.yml
+++ b/.github/workflows/global-qa-release-tag.yml
@@ -94,6 +94,6 @@ jobs:
           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           aws-region: ${{ secrets.AWS_DEFAULT_REGION }}
-          slack-message: "`[Flex]` Release from ${{ github.ref_type }} `${{ github.ref_name }}` requested by `${{ github.triggering_actor }}` completed with SHA ${{ github.sha }}. Release tag is ${{ steps.create_pre_release.outputs.generated-pre-release-tag }} :rocket:."
+          slack-message: "`[Flex]` Release from ${{ github.ref_type }} `${{ github.ref_name }}` requested by `${{ github.triggering_actor }}` completed with SHA ${{ github.sha }}. Release tag is `${{ steps.create_pre_release.outputs.generated-pre-release-tag }}` :rocket:."
         env:
           SLACK_BOT_TOKEN: ${{ env.GITHUB_ACTIONS_SLACK_BOT_TOKEN }}
\ No newline at end of file
diff --git a/plugin-hrm-form/src/components/case/Case.tsx b/plugin-hrm-form/src/components/case/Case.tsx
index 6e56a91383..8a5fd2cac7 100644
--- a/plugin-hrm-form/src/components/case/Case.tsx
+++ b/plugin-hrm-form/src/components/case/Case.tsx
@@ -67,6 +67,7 @@ import selectContactByTaskSid from '../../states/contacts/selectContactByTaskSid
 import selectCurrentRouteCaseState from '../../states/case/selectCurrentRouteCase';
 import { selectCounselorsHash } from '../../states/configuration/selectCounselorsHash';
 import { selectCurrentDefinitionVersion, selectDefinitionVersions } from '../../states/configuration/selectDefinitions';
+import FullTimelineView from './timeline/FullTimelineView';
 
 export const isStandaloneITask = (task): task is StandaloneITask => {
   return task && task.taskSid === 'standalone-task-sid';
@@ -316,6 +317,11 @@ const Case: React.FC<Props> = ({
       />
     );
   }
+
+  if (routing.subroute === 'timeline') {
+    return <FullTimelineView task={task} />;
+  }
+
   return loading || !definitionVersion ? (
     <CenteredContainer>
       <CircularProgress size={50} />
diff --git a/plugin-hrm-form/src/components/case/CaseHome.tsx b/plugin-hrm-form/src/components/case/CaseHome.tsx
index b0a04d426b..7c8caea788 100644
--- a/plugin-hrm-form/src/components/case/CaseHome.tsx
+++ b/plugin-hrm-form/src/components/case/CaseHome.tsx
@@ -20,18 +20,19 @@ import { Template } from '@twilio/flex-ui';
 import { connect, ConnectedProps } from 'react-redux';
 import { DefinitionVersion } from 'hrm-form-definitions';
 
-import { CaseContainer } from '../../styles/case';
-import { BottomButtonBar, Box, Flex, SaveAndEndButton, StyledNextStepButton } from '../../styles/HrmStyles';
+import { CaseContainer, CaseDetailsBorder, ViewButton } from '../../styles/case';
+import { BottomButtonBar, Box, SaveAndEndButton, StyledNextStepButton } from '../../styles/HrmStyles';
 import CaseDetailsComponent from './CaseDetails';
 import Timeline from './timeline/Timeline';
 import CaseSection from './CaseSection';
+import { PermissionActions, PermissionActionType } from '../../permissions';
 import {
-  getPermissionsForCase,
-  getPermissionsForContact,
-  PermissionActions,
-  PermissionActionType,
-} from '../../permissions';
-import { AppRoutes, CaseItemAction, CaseSectionSubroute, NewCaseSubroutes } from '../../states/routing/types';
+  AppRoutes,
+  CaseItemAction,
+  CaseRoute,
+  CaseSectionSubroute,
+  NewCaseSubroutes,
+} from '../../states/routing/types';
 import CaseSummary from './CaseSummary';
 import { RootState } from '../../states';
 import { CaseDetails } from '../../states/case/types';
@@ -45,16 +46,15 @@ import { householdSectionApi } from '../../states/case/sections/household';
 import { perpetratorSectionApi } from '../../states/case/sections/perpetrator';
 import { getAseloFeatureFlags } from '../../hrmConfig';
 import NavigableContainer from '../NavigableContainer';
-import ConnectToCaseButton from './ConnectToCaseButton';
 import { isStandaloneITask } from './Case';
 import selectContactByTaskSid from '../../states/contacts/selectContactByTaskSid';
 import asyncDispatch from '../../states/asyncDispatch';
 import { connectToCaseAsyncAction } from '../../states/contacts/saveContact';
-import { BannerContainer, Text } from '../caseMergingBanners/styles';
-import InfoIcon from '../caseMergingBanners/InfoIcon';
 import { selectCurrentTopmostRouteForTask } from '../../states/routing/getRoute';
 import selectCurrentRouteCaseState from '../../states/case/selectCurrentRouteCase';
 import CaseCreatedBanner from '../caseMergingBanners/CaseCreatedBanner';
+import AddToCaseBanner from '../caseMergingBanners/AddToCaseBanner';
+import { selectCaseActivityCount } from '../../states/case/timeline';
 
 export type CaseHomeProps = {
   task: CustomITask | StandaloneITask;
@@ -69,23 +69,23 @@ export type CaseHomeProps = {
 // eslint-disable-next-line no-use-before-define
 type Props = CaseHomeProps & ConnectedProps<typeof connector>;
 
+const MAX_ACTIVITIES_IN_TIMELINE_SECTION = 5;
+
 const CaseHome: React.FC<Props> = ({
   definitionVersion,
   task,
   openModal,
-  closeModal,
-  connectCaseToTaskContact,
   handleClose,
   handleSaveAndEnd,
   caseDetails,
   can,
   connectedCaseState,
-  taskContact,
   isCreating,
+  hasMoreActivities,
   // eslint-disable-next-line sonarjs/cognitive-complexity
 }) => {
   if (!connectedCaseState) return null; // narrow type before deconstructing
-  const caseId = connectedCaseState.connectedCase.id.toString();
+  const caseId = connectedCaseState.connectedCase.id;
   const {
     enable_upload_documents: enableUploadDocuments,
     enable_case_merging: enableCaseMerging,
@@ -99,6 +99,10 @@ const CaseHome: React.FC<Props> = ({
     openModal({ route: 'case', subroute: targetSubroute, action: CaseItemAction.Add, caseId });
   };
 
+  const onViewFullTimelineClick = () => {
+    openModal({ route: 'case', subroute: 'timeline', caseId, page: 0 });
+  };
+
   const onPrintCase = () => {
     openModal({ route: 'case', subroute: 'case-print-view', caseId });
   };
@@ -126,21 +130,6 @@ const CaseHome: React.FC<Props> = ({
     followUpDate,
   } = caseDetails;
   const statusLabel = definitionVersion.caseStatus[status]?.label ?? status;
-  const isConnectedToTaskContact = taskContact && taskContact.caseId === id;
-
-  const { connectedCase } = connectedCaseState;
-
-  const { can: canForCase } = getPermissionsForCase(connectedCase.twilioWorkerId, connectedCase.status);
-  const { can: canForContact } = getPermissionsForContact(taskContact?.twilioWorkerId);
-
-  const showConnectToCaseButton = Boolean(
-    taskContact &&
-      !taskContact.caseId &&
-      !isConnectedToTaskContact &&
-      connectedCase.connectedContacts?.length &&
-      canForCase(PermissionActions.UPDATE_CASE_CONTACTS) &&
-      canForContact(PermissionActions.ADD_CONTACT_TO_CASE),
-  );
 
   const itemRowRenderer = (itemTypeName: string, viewSubroute: CaseSectionSubroute, items: EntryInfo[]) => {
     const itemRows = () => {
@@ -228,27 +217,7 @@ const CaseHome: React.FC<Props> = ({
           borderBottom: isCreating ? '1px solid #e5e5e5' : 'none',
         }}
       >
-        {showConnectToCaseButton && (
-          <BannerContainer color="yellow" style={{ paddingTop: '12px', paddingBottom: '12px' }}>
-            <Flex width="100%" justifyContent="space-between">
-              <Flex alignItems="center">
-                <InfoIcon color="#fed44b" />
-                <Text>
-                  <Template code="CaseMerging-AddContactToCase" />
-                </Text>
-              </Flex>
-              <ConnectToCaseButton
-                caseId={connectedCase.id.toString()}
-                isConnectedToTaskContact={isConnectedToTaskContact}
-                onClickConnectToTaskContact={() => {
-                  connectCaseToTaskContact(taskContact, connectedCaseState.connectedCase);
-                  closeModal();
-                }}
-                color="black"
-              />
-            </Flex>
-          </BannerContainer>
-        )}
+        <AddToCaseBanner task={task} />
 
         {isCreating && (
           <Box marginBottom="14px" width="100%">
@@ -278,8 +247,20 @@ const CaseHome: React.FC<Props> = ({
         <Box margin="25px 0 0 0">
           <CaseSummary task={task} />
         </Box>
-        <Box margin="25px 0 0 0">
-          <Timeline taskSid={task.taskSid} can={can} page={0} pageSize={5} />
+        <Box margin="25px 0 0 0" style={{ textAlign: 'center' }}>
+          <CaseDetailsBorder>
+            <Timeline
+              taskSid={task.taskSid}
+              page={0}
+              pageSize={5}
+              titleCode={hasMoreActivities ? 'Case-RecentTimelineTitle' : 'Case-TimelineTitle'}
+            />
+            {hasMoreActivities && (
+              <ViewButton style={{ marginTop: '10px' }} withDivider={false} onClick={onViewFullTimelineClick}>
+                <Template code="Case-Timeline-OpenFullTimelineButton" />
+              </ViewButton>
+            )}
+          </CaseDetailsBorder>
         </Box>
         <Box margin="25px 0 0 0">
           <CaseSection
@@ -348,10 +329,16 @@ CaseHome.displayName = 'CaseHome';
 const mapStateToProps = (state: RootState, { task }: CaseHomeProps) => {
   const connectedCaseState = selectCurrentRouteCaseState(state, task.taskSid);
   const taskContact = isStandaloneITask(task) ? undefined : selectContactByTaskSid(state, task.taskSid)?.savedContact;
-  const routing = selectCurrentTopmostRouteForTask(state, task.taskSid);
+  const routing = selectCurrentTopmostRouteForTask(state, task.taskSid) as CaseRoute;
   const isCreating = routing.route === 'case' && routing.isCreating;
+  const activityCount = routing.route === 'case' ? selectCaseActivityCount(state, routing.caseId) : 0;
 
-  return { isCreating, connectedCaseState, taskContact };
+  return {
+    isCreating,
+    connectedCaseState,
+    taskContact,
+    hasMoreActivities: activityCount > MAX_ACTIVITIES_IN_TIMELINE_SECTION,
+  };
 };
 
 const mapDispatchToProps = (dispatch: Dispatch<any>, { task }: CaseHomeProps) => ({
diff --git a/plugin-hrm-form/src/components/case/timeline/FullTimelineView.tsx b/plugin-hrm-form/src/components/case/timeline/FullTimelineView.tsx
new file mode 100644
index 0000000000..5e67f4b747
--- /dev/null
+++ b/plugin-hrm-form/src/components/case/timeline/FullTimelineView.tsx
@@ -0,0 +1,91 @@
+/**
+ * Copyright (C) 2021-2023 Technology Matters
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see https://www.gnu.org/licenses/.
+ */
+
+import React, { Dispatch } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+import { Template } from '@twilio/flex-ui';
+
+import NavigableContainer from '../../NavigableContainer';
+import { CaseLayout } from '../../../styles/case';
+import { CustomITask, StandaloneITask } from '../../../types/types';
+import AddToCaseBanner from '../../caseMergingBanners/AddToCaseBanner';
+import Timeline from './Timeline';
+import { RootState } from '../../../states';
+import { selectCurrentTopmostRouteForTask } from '../../../states/routing/getRoute';
+import { CaseTimelineRoute, ChangeRouteMode } from '../../../states/routing/types';
+import { selectCaseActivityCount } from '../../../states/case/timeline';
+import Pagination from '../../Pagination';
+import { changeRoute } from '../../../states/routing/actions';
+
+type MyProps = {
+  task: CustomITask | StandaloneITask;
+};
+
+const TIMELINE_PAGE_SIZE = 2;
+
+const mapStateToProps = (state: RootState, { task }: MyProps) => {
+  const { caseId, page = 0 } = selectCurrentTopmostRouteForTask(state, task.taskSid) as CaseTimelineRoute;
+  return {
+    page,
+    activityCount: selectCaseActivityCount(state, caseId),
+    caseId,
+  };
+};
+
+const mapDispatchToProps = (dispatch: Dispatch<any>, { task }: MyProps) => {
+  return {
+    changePage: (caseId: string) => (page: number) =>
+      dispatch(
+        changeRoute({ route: 'case', subroute: 'timeline', caseId, page }, task.taskSid, ChangeRouteMode.Replace),
+      ),
+  };
+};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+type Props = MyProps & ConnectedProps<typeof connector>;
+
+const FullTimelineView: React.FC<Props> = ({ task, page, activityCount, changePage, caseId }: Props) => {
+  const changePageForThisCase = changePage(caseId);
+
+  return (
+    <CaseLayout>
+      <NavigableContainer task={task} titleCode="Case Timeline">
+        <AddToCaseBanner task={task} />
+        <Timeline taskSid={task.taskSid} pageSize={TIMELINE_PAGE_SIZE} page={page} titleCode="Case-TimelineTitle" />
+        <p>
+          <Template
+            code="Case-Timeline-PaginationDescription"
+            from={page * TIMELINE_PAGE_SIZE + 1}
+            to={Math.min((page + 1) * TIMELINE_PAGE_SIZE, activityCount)}
+            total={activityCount}
+          />
+        </p>
+        {activityCount > TIMELINE_PAGE_SIZE && (
+          <Pagination
+            pagesCount={Math.ceil(activityCount / TIMELINE_PAGE_SIZE)}
+            page={page}
+            handleChangePage={changePageForThisCase}
+          />
+        )}
+      </NavigableContainer>
+    </CaseLayout>
+  );
+};
+
+FullTimelineView.displayName = 'FullTimelineView';
+
+export default connector(FullTimelineView);
diff --git a/plugin-hrm-form/src/components/case/timeline/Timeline.tsx b/plugin-hrm-form/src/components/case/timeline/Timeline.tsx
index 91df1bf6bc..b6fa8b303b 100644
--- a/plugin-hrm-form/src/components/case/timeline/Timeline.tsx
+++ b/plugin-hrm-form/src/components/case/timeline/Timeline.tsx
@@ -15,7 +15,7 @@
  */
 
 /* eslint-disable react/prop-types */
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import { parseISO } from 'date-fns';
 import { Template } from '@twilio/flex-ui';
@@ -25,7 +25,6 @@ import DialogContent from '@material-ui/core/DialogContent';
 import CallTypeIcon from '../../common/icons/CallTypeIcon';
 import TimelineIcon from './TimelineIcon';
 import {
-  CaseDetailsBorder,
   CaseSectionFont,
   TimelineCallTypeIcon,
   TimelineDate,
@@ -38,7 +37,7 @@ import CaseAddButton from '../CaseAddButton';
 import { CustomITask } from '../../../types/types';
 import { isConnectedCaseActivity } from '../../../states/case/caseActivities';
 import { ConnectedCaseActivity, NoteActivity, ReferralActivity } from '../../../states/case/types';
-import { getPermissionsForContact, PermissionActions, PermissionActionType } from '../../../permissions';
+import { getPermissionsForCase, getPermissionsForContact, PermissionActions } from '../../../permissions';
 import { CaseItemAction, CaseSectionSubroute, NewCaseSubroutes } from '../../../states/routing/types';
 import { newOpenModalAction } from '../../../states/routing/actions';
 import { RootState } from '../../../states';
@@ -46,7 +45,6 @@ import { selectCaseActivities } from '../../../states/case/timeline';
 import selectCurrentRouteCaseState from '../../../states/case/selectCurrentRouteCase';
 
 type OwnProps = {
-  can: (action: PermissionActionType) => boolean;
   taskSid: CustomITask['taskSid'];
   pageSize: number;
   page: number;
@@ -76,19 +74,25 @@ const connector = connect(mapStateToProps, mapDispatchToProps);
 type Props = OwnProps & ConnectedProps<typeof connector>;
 
 const Timeline: React.FC<Props> = ({
-  can,
   timelineActivities,
   openContactModal,
   openViewCaseSectionModal,
   openAddCaseSectionModal,
   connectedCase,
-  titleCode = 'Case-TimelineSection',
+  titleCode = 'Case-RecentTimelineTitle',
 }) => {
   const [mockedMessage, setMockedMessage] = useState(null);
 
+  const { can } = useMemo(
+    () =>
+      connectedCase ? getPermissionsForCase(connectedCase.twilioWorkerId, connectedCase.status) : { can: () => false },
+    [connectedCase],
+  );
+
   if (!connectedCase || !timelineActivities) {
     return null;
   }
+
   const caseId = connectedCase.id.toString();
   const handleViewNoteClick = ({ id }: NoteActivity) => {
     openViewCaseSectionModal(caseId, NewCaseSubroutes.Note, id);
@@ -123,69 +127,67 @@ const Timeline: React.FC<Props> = ({
   };
 
   return (
-    <CaseDetailsBorder>
-      <Box marginTop="25px">
-        <Dialog onClose={() => setMockedMessage(null)} open={Boolean(mockedMessage)}>
-          <DialogContent>{mockedMessage}</DialogContent>
-        </Dialog>
-        <Box marginBottom="10px">
-          <Row>
-            <CaseSectionFont id="Case-TimelineSection-label">
-              <Template code={titleCode} />
-            </CaseSectionFont>
-            <Box marginLeft="auto">
-              <CaseAddButton
-                templateCode="Case-Note"
-                onClick={handleAddNoteClick}
-                disabled={!can(PermissionActions.ADD_NOTE)}
-              />
-              <CaseAddButton
-                templateCode="Case-Referral"
-                onClick={handleAddReferralClick}
-                disabled={!can(PermissionActions.ADD_REFERRAL)}
-                withDivider
-              />
-            </Box>
-          </Row>
-        </Box>
-        {timelineActivities &&
-          timelineActivities.length > 0 &&
-          timelineActivities.map((activity, index) => {
-            const date = parseISO(activity.date).toLocaleDateString(navigator.language);
-            let canViewActivity = true;
-            if (isConnectedCaseActivity(activity)) {
-              if (activity.showViewButton) {
-                const { can } = getPermissionsForContact(activity.twilioWorkerId);
-                canViewActivity = can(PermissionActions.VIEW_CONTACT);
-              } else {
-                canViewActivity = false;
-              }
+    <Box marginTop="25px">
+      <Dialog onClose={() => setMockedMessage(null)} open={Boolean(mockedMessage)}>
+        <DialogContent>{mockedMessage}</DialogContent>
+      </Dialog>
+      <Box marginBottom="10px">
+        <Row>
+          <CaseSectionFont id="Case-RecentTimelineTitle-label">
+            <Template code={titleCode} />
+          </CaseSectionFont>
+          <Box marginLeft="auto">
+            <CaseAddButton
+              templateCode="Case-Note"
+              onClick={handleAddNoteClick}
+              disabled={!can(PermissionActions.ADD_NOTE)}
+            />
+            <CaseAddButton
+              templateCode="Case-Referral"
+              onClick={handleAddReferralClick}
+              disabled={!can(PermissionActions.ADD_REFERRAL)}
+              withDivider
+            />
+          </Box>
+        </Row>
+      </Box>
+      {timelineActivities &&
+        timelineActivities.length > 0 &&
+        timelineActivities.map((activity, index) => {
+          const date = parseISO(activity.date).toLocaleDateString(navigator.language);
+          let canViewActivity = true;
+          if (isConnectedCaseActivity(activity)) {
+            if (activity.showViewButton) {
+              const { can } = getPermissionsForContact(activity.twilioWorkerId);
+              canViewActivity = can(PermissionActions.VIEW_CONTACT);
+            } else {
+              canViewActivity = false;
             }
-
-            return (
-              <TimelineRow key={index}>
-                <TimelineDate>{date}</TimelineDate>
-                <TimelineIcon type={isConnectedCaseActivity(activity) ? activity.channel : activity.type} />
-                {isConnectedCaseActivity(activity) && (
-                  <TimelineCallTypeIcon>
-                    <CallTypeIcon callType={activity.callType} fontSize="18px" />
-                  </TimelineCallTypeIcon>
-                )}
-                <TimelineText>{activity?.text}</TimelineText>
-                {canViewActivity && (
+          }
+
+          return (
+            <TimelineRow key={index}>
+              <TimelineDate>{date}</TimelineDate>
+              <TimelineIcon type={isConnectedCaseActivity(activity) ? activity.channel : activity.type} />
+              {isConnectedCaseActivity(activity) && (
+                <TimelineCallTypeIcon>
+                  <CallTypeIcon callType={activity.callType} fontSize="18px" />
+                </TimelineCallTypeIcon>
+              )}
+              <TimelineText>{activity?.text}</TimelineText>
+              {canViewActivity && (
+                <Box marginLeft="auto">
                   <Box marginLeft="auto">
-                    <Box marginLeft="auto">
-                      <ViewButton onClick={() => handleViewClick(activity)}>
-                        <Template code="Case-ViewButton" />
-                      </ViewButton>
-                    </Box>
+                    <ViewButton onClick={() => handleViewClick(activity)}>
+                      <Template code="Case-ViewButton" />
+                    </ViewButton>
                   </Box>
-                )}
-              </TimelineRow>
-            );
-          })}
-      </Box>
-    </CaseDetailsBorder>
+                </Box>
+              )}
+            </TimelineRow>
+          );
+        })}
+    </Box>
   );
 };
 Timeline.displayName = 'Timeline';
diff --git a/plugin-hrm-form/src/components/caseMergingBanners/AddToCaseBanner.tsx b/plugin-hrm-form/src/components/caseMergingBanners/AddToCaseBanner.tsx
new file mode 100644
index 0000000000..3102485d71
--- /dev/null
+++ b/plugin-hrm-form/src/components/caseMergingBanners/AddToCaseBanner.tsx
@@ -0,0 +1,102 @@
+/**
+ * Copyright (C) 2021-2023 Technology Matters
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see https://www.gnu.org/licenses/.
+ */
+import React, { Dispatch } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+import { Template } from '@twilio/flex-ui';
+
+import { Case, Contact, CustomITask, StandaloneITask } from '../../types/types';
+import { getPermissionsForCase, getPermissionsForContact, PermissionActions } from '../../permissions';
+import { RootState } from '../../states';
+import selectCurrentRouteCaseState from '../../states/case/selectCurrentRouteCase';
+import { isStandaloneITask } from '../case/Case';
+import selectContactByTaskSid from '../../states/contacts/selectContactByTaskSid';
+import { BannerContainer, Text } from './styles';
+import { Flex } from '../../styles/HrmStyles';
+import InfoIcon from './InfoIcon';
+import ConnectToCaseButton from '../case/ConnectToCaseButton';
+import asyncDispatch from '../../states/asyncDispatch';
+import { connectToCaseAsyncAction } from '../../states/contacts/saveContact';
+import { newCloseModalAction } from '../../states/routing/actions';
+
+type MyProps = {
+  task: CustomITask | StandaloneITask;
+};
+
+const mapStateToProps = (state: RootState, { task }: MyProps) => {
+  const { connectedCase } = selectCurrentRouteCaseState(state, task.taskSid) ?? {};
+  const taskContact = isStandaloneITask(task) ? undefined : selectContactByTaskSid(state, task.taskSid)?.savedContact;
+  return { connectedCase, taskContact };
+};
+
+const mapDispatchToProps = (dispatch: Dispatch<any>, { task }: MyProps) => ({
+  connectCaseToTaskContact: async (taskContact: Contact, cas: Case) =>
+    asyncDispatch(dispatch)(connectToCaseAsyncAction(taskContact.id, cas.id)),
+  closeModal: () => dispatch(newCloseModalAction(task.taskSid, 'tabbed-forms')),
+});
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+type Props = MyProps & ConnectedProps<typeof connector>;
+
+const AddToCaseBanner: React.FC<Props> = ({
+  connectedCase,
+  taskContact,
+  connectCaseToTaskContact,
+  closeModal,
+}: Props) => {
+  const { can: canForCase } = getPermissionsForCase(connectedCase.twilioWorkerId, connectedCase.status);
+  const { can: canForContact } = getPermissionsForContact(taskContact?.twilioWorkerId);
+  const isConnectedToTaskContact = taskContact && taskContact.caseId === connectedCase.id;
+
+  const showConnectToCaseButton = Boolean(
+    taskContact &&
+      !taskContact.caseId &&
+      !isConnectedToTaskContact &&
+      connectedCase?.connectedContacts?.length &&
+      canForCase(PermissionActions.UPDATE_CASE_CONTACTS) &&
+      canForContact(PermissionActions.ADD_CONTACT_TO_CASE),
+  );
+
+  if (!showConnectToCaseButton) {
+    return null;
+  }
+
+  return (
+    <BannerContainer color="yellow" style={{ paddingTop: '12px', paddingBottom: '12px' }}>
+      <Flex width="100%" justifyContent="space-between">
+        <Flex alignItems="center">
+          <InfoIcon color="#fed44b" />
+          <Text>
+            <Template code="CaseMerging-AddContactToCase" />
+          </Text>
+        </Flex>
+        <ConnectToCaseButton
+          caseId={connectedCase.id}
+          isConnectedToTaskContact={isConnectedToTaskContact}
+          onClickConnectToTaskContact={() => {
+            connectCaseToTaskContact(taskContact, connectedCase);
+            closeModal();
+          }}
+          color="black"
+        />
+      </Flex>
+    </BannerContainer>
+  );
+};
+
+AddToCaseBanner.displayName = 'AddToCaseBanner';
+
+export default connector(AddToCaseBanner);
diff --git a/plugin-hrm-form/src/states/case/caseActivities.ts b/plugin-hrm-form/src/states/case/caseActivities.ts
index 87eb64e106..0744d457f2 100644
--- a/plugin-hrm-form/src/states/case/caseActivities.ts
+++ b/plugin-hrm-form/src/states/case/caseActivities.ts
@@ -142,6 +142,11 @@ export const getActivitiesFromContacts = (sourceContacts: Contact[]): Activity[]
   return connectedContactActivities(sourceContacts);
 };
 
+export const getActivityCount = (sourceCase: Case): number =>
+  (sourceCase?.info?.counsellorNotes?.length ?? 0) +
+  (sourceCase?.info?.referrals?.length ?? 0) +
+  (sourceCase?.connectedContacts?.length ?? 0);
+
 /**
  * Sort activities from most recent to oldest.
  * @param activities Activities to sort
diff --git a/plugin-hrm-form/src/states/case/timeline.ts b/plugin-hrm-form/src/states/case/timeline.ts
index 28646432c1..1e90896a16 100644
--- a/plugin-hrm-form/src/states/case/timeline.ts
+++ b/plugin-hrm-form/src/states/case/timeline.ts
@@ -16,7 +16,7 @@
 
 import { RootState } from '..';
 import { namespace } from '../storeNamespaces';
-import { getActivitiesFromCase, getActivitiesFromContacts, sortActivities } from './caseActivities';
+import { getActivitiesFromCase, getActivitiesFromContacts, getActivityCount, sortActivities } from './caseActivities';
 import { selectSavedContacts } from './connectedContacts';
 
 export const selectCaseActivities = (state: RootState, caseId: string, pageSize: number, page: number) => {
@@ -26,10 +26,6 @@ export const selectCaseActivities = (state: RootState, caseId: string, pageSize:
   const { definitionVersions, currentDefinitionVersion } = configuration;
   const caseState = connectedCase.cases[caseId];
 
-  /**
-   * Gets the activities timeline from current caseId
-   * If the case is just being created, adds the case's description as a new activity
-   */
   if (!caseState?.connectedCase) return [];
 
   const { connectedCase: caseForTask } = caseState;
@@ -43,3 +39,6 @@ export const selectCaseActivities = (state: RootState, caseId: string, pageSize:
   ];
   return sortActivities(timelineActivities).slice(page * pageSize, (page + 1) * pageSize);
 };
+
+export const selectCaseActivityCount = ({ [namespace]: { connectedCase } }: RootState, caseId: string) =>
+  getActivityCount(connectedCase.cases[caseId]?.connectedCase) ?? 0;
diff --git a/plugin-hrm-form/src/states/routing/types.ts b/plugin-hrm-form/src/states/routing/types.ts
index c72947b7ea..23cbca249f 100644
--- a/plugin-hrm-form/src/states/routing/types.ts
+++ b/plugin-hrm-form/src/states/routing/types.ts
@@ -66,15 +66,11 @@ export const NewCaseSectionSubroutes = {
   CaseSummary: 'caseSummary',
 } as const;
 
-const OtherCaseRoutes = {
-  CasePrintView: 'case-print-view',
-} as const;
-
 export type CaseSectionSubroute = typeof NewCaseSectionSubroutes[keyof typeof NewCaseSectionSubroutes];
 
 export const NewCaseSubroutes = Object.freeze({
   ...NewCaseSectionSubroutes,
-  ...OtherCaseRoutes,
+  CasePrintView: 'case-print-view',
 });
 
 export enum CaseItemAction {
@@ -130,8 +126,13 @@ export type ViewCaseSectionRoute = CaseSectionRoute & {
   id: string;
 };
 
+export type CaseTimelineRoute = CaseCoreRoute & {
+  subroute: 'timeline';
+  page: number;
+};
+
 export type CasePrintRoute = CaseCoreRoute & {
-  subroute: typeof OtherCaseRoutes.CasePrintView;
+  subroute: 'case-print-view';
 };
 
 export type CaseRoute =
@@ -139,7 +140,8 @@ export type CaseRoute =
   | EditCaseSectionRoute
   | ViewCaseSectionRoute
   | CaseHomeRoute
-  | CasePrintRoute;
+  | CasePrintRoute
+  | CaseTimelineRoute;
 
 export const PROFILE_TABS = {
   cases: 'cases',
diff --git a/plugin-hrm-form/src/translations/en-CA/flexUI.json b/plugin-hrm-form/src/translations/en-CA/flexUI.json
index 4da6c40395..c642789e7c 100644
--- a/plugin-hrm-form/src/translations/en-CA/flexUI.json
+++ b/plugin-hrm-form/src/translations/en-CA/flexUI.json
@@ -193,8 +193,10 @@
   "Error-ContinueWithoutRecording": "Error from backend system.  Are you sure you want to end the task without recording?",
   "Error-Form": "There is a problem with your submission.  Please check the form for errors.",
   "Error-Unexpected": "Unexpected error has occurred",
-  "Case-TimelineSection": "Recent Timeline",
-  "Case-TimelineViewTitle": "Timeline",
+  "Case-RecentTimelineTitle": "Recent Timeline",
+  "Case-TimelineTitle": "Timeline",
+  "Case-Timeline-PaginationDescription": "Showing {{from}}-{{to}} of {{total}}",
+  "Case-Timeline-OpenFullTimelineButton": "Show All Timeline Items",
   "Case-AddDocumentSection": "Documents",
   "Case-CaseDetailsChildName": "Child Name",
   "Case-CaseDetailsOwner": "Counsellor",
diff --git a/plugin-hrm-form/src/translations/en-MT/flexUI.json b/plugin-hrm-form/src/translations/en-MT/flexUI.json
index 6979a42c5c..c4254f3b23 100644
--- a/plugin-hrm-form/src/translations/en-MT/flexUI.json
+++ b/plugin-hrm-form/src/translations/en-MT/flexUI.json
@@ -123,8 +123,10 @@
   "Bottombar-Close": "Close",
   "BottomBar-OpenNewCase": "Open New Case",
   "BottomBar-AddToExistingCase": "Add to Existing Case",
-  "Case-TimelineSection": "Recent Timeline",
-  "Case-TimelineViewTitle": "Timeline",
+  "Case-RecentTimelineTitle": "Recent Timeline",
+  "Case-TimelineTitle": "Timeline",
+  "Case-Timeline-PaginationDescription": "Showing {{from}}-{{to}} of {{total}}",
+  "Case-Timeline-OpenFullTimelineButton": "Show All Timeline Items",
   "Case-AddHouseholdSection": "Household Information",
   "Case-AddPerpetratorSection": "Perpetrators",
   "Case-AddIncidentSection": "Incidents",
diff --git a/plugin-hrm-form/src/translations/en-NZ/flexUI.json b/plugin-hrm-form/src/translations/en-NZ/flexUI.json
index 961da4e4fc..40f58619dc 100644
--- a/plugin-hrm-form/src/translations/en-NZ/flexUI.json
+++ b/plugin-hrm-form/src/translations/en-NZ/flexUI.json
@@ -63,8 +63,10 @@
   "Case-ReferralComments": "Comments",
   "Case-ReferralDate": "Date",
   "Case-ReferralReferredTo": "Referred To...",
-  "Case-TimelineSection": "Recent Timeline",
-  "Case-TimelineViewTitle": "Timeline",
+  "Case-RecentTimelineTitle": "Recent Timeline",
+  "Case-TimelineTitle": "Timeline",
+  "Case-Timeline-PaginationDescription": "Showing {{from}}-{{to}} of {{total}}",
+  "Case-Timeline-OpenFullTimelineButton": "Show All Timeline Items",
   "Case-ViewButton": "View",
   "Case-ViewDocument": "View Document",
   "Case-ViewHousehold": "View Risk to Self Report",
diff --git a/plugin-hrm-form/src/translations/en-US/flexUI.json b/plugin-hrm-form/src/translations/en-US/flexUI.json
index 0abb33c51a..f1f6d09c8a 100644
--- a/plugin-hrm-form/src/translations/en-US/flexUI.json
+++ b/plugin-hrm-form/src/translations/en-US/flexUI.json
@@ -154,8 +154,10 @@
   "Error-CategoryRequired": "Required 1 category minimum, 3 categories maximum",
   "Error-Unexpected": "Unexpected error has occurred",
   "Case-CaseNumber": "Case #",
-  "Case-TimelineSection": "Recent Timeline",
-  "Case-TimelineViewTitle": "Timeline",
+  "Case-RecentTimelineTitle": "Recent Timeline",
+  "Case-TimelineTitle": "Timeline",
+  "Case-Timeline-PaginationDescription": "Showing {{from}}-{{to}} of {{total}}",
+  "Case-Timeline-OpenFullTimelineButton": "Show All Timeline Items",
   "Case-Timeline-DraftContactSummaryPlaceholder": "In Progress",
   "Case-AddPerpetratorSection": "Perpetrators",
   "Case-AddIncidentSection": "Incidents",
diff --git a/plugin-hrm-form/src/translations/es-CL/flexUI.json b/plugin-hrm-form/src/translations/es-CL/flexUI.json
index 96d433cc7b..16772f4401 100644
--- a/plugin-hrm-form/src/translations/es-CL/flexUI.json
+++ b/plugin-hrm-form/src/translations/es-CL/flexUI.json
@@ -120,8 +120,10 @@
   "Bottombar-Close": "Cerrar",
   "BottomBar-OpenNewCase": "Abrir Nuevo Caso",
   "BottomBar-AddToExistingCase": "Agregar al Caso Existente",
-  "Case-TimelineSection": "Cronología reciente",
-  "Case-TimelineViewTitle": "Historial",
+  "Case-RecentTimelineTitle": "Cronología reciente",
+  "Case-TimelineTitle": "Historial",
+  "Case-Timeline-PaginationDescription": "Mostrando {{from}}-{{to}} de {{total}}",
+  "Case-Timeline-OpenFullTimelineButton": "Mostrar todos los elementos de la línea de tiempo",
   "Case-AddHouseholdSection": "Información del Hogar",
   "Case-AddPerpetratorSection": "Perpetradores",
   "Case-AddIncidentSection": "Incidentes",
diff --git a/plugin-hrm-form/src/translations/es-CO/flexUI.json b/plugin-hrm-form/src/translations/es-CO/flexUI.json
index 1fc61695fd..2d7cca4d96 100644
--- a/plugin-hrm-form/src/translations/es-CO/flexUI.json
+++ b/plugin-hrm-form/src/translations/es-CO/flexUI.json
@@ -120,8 +120,10 @@
   "Bottombar-Close": "Cerrar",
   "BottomBar-OpenNewCase": "Abrir Nuevo Caso",
   "BottomBar-AddToExistingCase": "Agregar al Caso Existente",
-  "Case-TimelineSection": "Cronología reciente",
-  "Case-TimelineViewTitle": "Historial",
+  "Case-RecentTimelineTitle": "Cronología reciente",
+  "Case-TimelineTitle": "Historial",
+  "Case-Timeline-PaginationDescription": "Mostrando {{from}}-{{to}} de {{total}}",
+  "Case-Timeline-OpenFullTimelineButton": "Mostrar todos los elementos de la línea de tiempo",
   "Case-AddHouseholdSection": "Información del Hogar",
   "Case-AddPerpetratorSection": "Perpetradores",
   "Case-AddIncidentSection": "Incidentes",
diff --git a/plugin-hrm-form/src/translations/es-ES/flexUI.json b/plugin-hrm-form/src/translations/es-ES/flexUI.json
index ff5bd2a96b..52dba01142 100644
--- a/plugin-hrm-form/src/translations/es-ES/flexUI.json
+++ b/plugin-hrm-form/src/translations/es-ES/flexUI.json
@@ -123,8 +123,10 @@
   "Bottombar-Close": "Cerrar",
   "BottomBar-OpenNewCase": "Abrir Nuevo Caso",
   "BottomBar-AddToExistingCase": "Agregar al Caso Existente",
-  "Case-TimelineSection": "Cronología reciente",
-  "Case-TimelineViewTitle": "Historial",
+  "Case-RecentTimelineTitle": "Cronología reciente",
+  "Case-TimelineTitle": "Historial",
+  "Case-Timeline-PaginationDescription": "Mostrando {{from}}-{{to}} de {{total}}",
+  "Case-Timeline-OpenFullTimelineButton": "Mostrar todos los elementos de la línea de tiempo",
   "Case-AddHouseholdSection": "Información del Hogar",
   "Case-AddPerpetratorSection": "Perpetradores",
   "Case-AddIncidentSection": "Incidentes",
diff --git a/plugin-hrm-form/src/translations/hu-HU/flexUI.json b/plugin-hrm-form/src/translations/hu-HU/flexUI.json
index f6d21c6dfc..6024677169 100644
--- a/plugin-hrm-form/src/translations/hu-HU/flexUI.json
+++ b/plugin-hrm-form/src/translations/hu-HU/flexUI.json
@@ -119,8 +119,10 @@
   "Bottombar-Close": "Bezárás",
   "BottomBar-OpenNewCase": "Új eset megnyitása",
   "BottomBar-AddToExistingCase": "Hozzáadás egy meglévő esethez",
-  "Case-TimelineSection": "Legutóbbi idővonal",
-  "Case-TimelineViewTitle": "Idővonal",
+  "Case-RecentTimelineTitle": "Legutóbbi idővonal",
+  "Case-TimelineTitle": "Idővonal",
+  "Case-Timeline-PaginationDescription": "{{total}}/{{from}}-{{to}} megjelenítése",
+  "Case-Timeline-OpenFullTimelineButton": "Az összes idővonal-elem megjelenítése",
   "Case-AddHouseholdSection": "Kapcsolati információk",
   "Case-AddPerpetratorSection": "Elkövetők",
   "Case-AddIncidentSection": "Események",
diff --git a/plugin-hrm-form/src/translations/pl-PL/flexUI.json b/plugin-hrm-form/src/translations/pl-PL/flexUI.json
index 911649724a..bf9bdad914 100644
--- a/plugin-hrm-form/src/translations/pl-PL/flexUI.json
+++ b/plugin-hrm-form/src/translations/pl-PL/flexUI.json
@@ -123,8 +123,10 @@
     "Bottombar-Close": "Blisko",
     "BottomBar-OpenNewCase": "Otwórz nową sprawę",
     "BottomBar-AddToExistingCase": "Dodaj do istniejącej skrzynki",
-    "Case-TimelineSection": "Najnowsza oś czasu",
-    "Case-TimelineViewTitle": "Oś czasu",
+    "Case-RecentTimelineTitle": "Najnowsza oś czasu",
+    "Case-TimelineTitle": "Oś czasu",
+    "Case-Timeline-PaginationDescription": "Wyświetlanie {{from}}-{{to}} z {{total}}",
+    "Case-Timeline-OpenFullTimelineButton": "Pokaż wszystkie elementy osi czasu",
     "Case-AddHouseholdSection": "Informacje o gospodarstwie domowym",
     "Case-AddPerpetratorSection": "Sprawcy",
     "Case-AddIncidentSection": "Incydenty",
diff --git a/plugin-hrm-form/src/translations/pt-BR/flexUI.json b/plugin-hrm-form/src/translations/pt-BR/flexUI.json
index 943e99c4f3..a079acc37f 100644
--- a/plugin-hrm-form/src/translations/pt-BR/flexUI.json
+++ b/plugin-hrm-form/src/translations/pt-BR/flexUI.json
@@ -108,8 +108,10 @@
   "Error-Form": "Há um problema com o seu envio. Verifique se há erros no formulário.",
   "RequiredFieldError": "Este campo é obrigatório.",
   "BottomBar-OpenNewCase": "Abrir novo caso",
-  "Case-TimelineSection": "Linha do tempo recente",
-  "Case-TimelineViewTitle": "Linha do tempo",
+  "Case-RecentTimelineTitle": "Linha do tempo recente",
+  "Case-TimelineTitle": "Linha do tempo",
+  "Case-Timeline-PaginationDescription": "Mostrando {{from}}-{{to}} de {{total}}",
+  "Case-Timeline-OpenFullTimelineButton": "Mostrar todos os itens da linha do tempo",
   "Case-AddHouseholdSection": "Informação de moradia",
   "Case-AddPerpetratorSection": "Perpetradores/autor da violência",
   "Case-AddIncidentSection": "Incidentes",
diff --git a/plugin-hrm-form/src/translations/ro-RO/flexUI.json b/plugin-hrm-form/src/translations/ro-RO/flexUI.json
index 3e2651edc2..7b5a90757b 100644
--- a/plugin-hrm-form/src/translations/ro-RO/flexUI.json
+++ b/plugin-hrm-form/src/translations/ro-RO/flexUI.json
@@ -123,8 +123,10 @@
     "Bottombar-Close": "Închide",
     "BottomBar-OpenNewCase": "Deschideți un nou caz",
     "BottomBar-AddToExistingCase": "Adăugați la cazul existent",
-    "Case-TimelineSection": "Cronologie recentă",
-    "Case-TimelineViewTitle": "Cronologie",
+    "Case-RecentTimelineTitle": "Cronologie recentă",
+    "Case-TimelineTitle": "Cronologie",
+    "Case-Timeline-PaginationDescription": "Mostrando {{from}}-{{to}} de {{total}}",
+    "Case-Timeline-OpenFullTimelineButton": "Se afișează {{from}}-{{to}} din {{total}}",
     "Case-AddHouseholdSection": "Informații de uz casnic",
     "Case-AddPerpetratorSection": "Făptuitori",
     "Case-AddIncidentSection": "Incidente",
diff --git a/plugin-hrm-form/src/translations/th-TH/flexUI.json b/plugin-hrm-form/src/translations/th-TH/flexUI.json
index 9414a87b3d..d450e8de73 100644
--- a/plugin-hrm-form/src/translations/th-TH/flexUI.json
+++ b/plugin-hrm-form/src/translations/th-TH/flexUI.json
@@ -63,8 +63,10 @@
   "Case-ReferralComments": "หมายเหตุ",
   "Case-ReferralDate": "วันที่ส่งต่อ",
   "Case-ReferralReferredTo": "อ้างถึง...",
-  "Case-TimelineSection": "ไทม์ไลน์ล่าสุด",
-  "Case-TimelineViewTitle": "ไทม์ไลน์",
+  "Case-RecentTimelineTitle": "ไทม์ไลน์ล่าสุด",
+  "Case-TimelineTitle": "ไทม์ไลน์",
+  "Case-Timeline-PaginationDescription": "กำลังแสดง {{from}}-{{to}} จาก {{total}}",
+  "Case-Timeline-OpenFullTimelineButton": "แสดงรายการไทม์ไลน์ทั้งหมด",
   "Case-ViewButton": "แสดง",
   "Case-ViewDocument": "ดูเอกสาร",
   "Case-ViewHousehold": "ดูสมาชิกในครัวเรือน",

From 385619464ff459a0158ee58f3a44724139bfeddb Mon Sep 17 00:00:00 2001
From: Stephen Hand <steveh@techmatters.org>
Date: Mon, 11 Dec 2023 14:47:52 +0000
Subject: [PATCH 4/7] Reset 'timeline items per page' to 25

---
 .../src/components/case/timeline/FullTimelineView.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugin-hrm-form/src/components/case/timeline/FullTimelineView.tsx b/plugin-hrm-form/src/components/case/timeline/FullTimelineView.tsx
index 5e67f4b747..1b71b081be 100644
--- a/plugin-hrm-form/src/components/case/timeline/FullTimelineView.tsx
+++ b/plugin-hrm-form/src/components/case/timeline/FullTimelineView.tsx
@@ -34,7 +34,7 @@ type MyProps = {
   task: CustomITask | StandaloneITask;
 };
 
-const TIMELINE_PAGE_SIZE = 2;
+const TIMELINE_PAGE_SIZE = 25;
 
 const mapStateToProps = (state: RootState, { task }: MyProps) => {
   const { caseId, page = 0 } = selectCurrentTopmostRouteForTask(state, task.taskSid) as CaseTimelineRoute;

From c10953dda544f1aba85fe512413254f8caab247a Mon Sep 17 00:00:00 2001
From: Stephen Hand <steveh@techmatters.org>
Date: Mon, 11 Dec 2023 14:52:29 +0000
Subject: [PATCH 5/7] Update new button copy to match mock

---
 plugin-hrm-form/src/translations/en-US/flexUI.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugin-hrm-form/src/translations/en-US/flexUI.json b/plugin-hrm-form/src/translations/en-US/flexUI.json
index f1f6d09c8a..3d93288991 100644
--- a/plugin-hrm-form/src/translations/en-US/flexUI.json
+++ b/plugin-hrm-form/src/translations/en-US/flexUI.json
@@ -157,7 +157,7 @@
   "Case-RecentTimelineTitle": "Recent Timeline",
   "Case-TimelineTitle": "Timeline",
   "Case-Timeline-PaginationDescription": "Showing {{from}}-{{to}} of {{total}}",
-  "Case-Timeline-OpenFullTimelineButton": "Show All Timeline Items",
+  "Case-Timeline-OpenFullTimelineButton": "See All Timeline Items",
   "Case-Timeline-DraftContactSummaryPlaceholder": "In Progress",
   "Case-AddPerpetratorSection": "Perpetrators",
   "Case-AddIncidentSection": "Incidents",

From 2aa916cdf495d532c9ba4ee13f7a98265e22fdd4 Mon Sep 17 00:00:00 2001
From: Stephen Hand <steveh@techmatters.org>
Date: Mon, 11 Dec 2023 15:37:55 +0000
Subject: [PATCH 6/7] Allow substitution vlaues to be passed into
 NavigableContainer for the title. Separate timeline feature flag. Renames &
 extra translations

---
 plugin-hrm-form/src/components/NavigableContainer.tsx |  4 +++-
 plugin-hrm-form/src/components/case/CaseHome.tsx      | 11 +++++++----
 ...eInformationRow.tsx => IncidentInformationRow.tsx} |  8 ++++----
 .../src/components/case/timeline/FullTimelineView.tsx | 11 ++++++++---
 .../src/components/case/timeline/Timeline.tsx         |  4 ++--
 plugin-hrm-form/src/translations/en-CA/flexUI.json    |  5 +++--
 plugin-hrm-form/src/translations/en-MT/flexUI.json    |  5 +++--
 plugin-hrm-form/src/translations/en-NZ/flexUI.json    |  5 +++--
 plugin-hrm-form/src/translations/en-US/flexUI.json    |  5 +++--
 plugin-hrm-form/src/translations/es-CL/flexUI.json    |  7 +++++--
 plugin-hrm-form/src/translations/es-CO/flexUI.json    |  5 +++--
 plugin-hrm-form/src/translations/es-ES/flexUI.json    |  5 +++--
 plugin-hrm-form/src/translations/hu-HU/flexUI.json    |  5 +++--
 plugin-hrm-form/src/translations/pl-PL/flexUI.json    |  5 +++--
 plugin-hrm-form/src/translations/pt-BR/flexUI.json    |  5 +++--
 plugin-hrm-form/src/translations/ro-RO/flexUI.json    |  5 +++--
 plugin-hrm-form/src/translations/th-TH/flexUI.json    |  5 +++--
 plugin-hrm-form/src/types/types.ts                    |  1 +
 18 files changed, 63 insertions(+), 38 deletions(-)
 rename plugin-hrm-form/src/components/case/{TimelineInformationRow.tsx => IncidentInformationRow.tsx} (90%)

diff --git a/plugin-hrm-form/src/components/NavigableContainer.tsx b/plugin-hrm-form/src/components/NavigableContainer.tsx
index d3e556f0dd..1d749bcb57 100644
--- a/plugin-hrm-form/src/components/NavigableContainer.tsx
+++ b/plugin-hrm-form/src/components/NavigableContainer.tsx
@@ -40,6 +40,7 @@ type FocusTarget = 'back' | 'close';
 type OwnProps = {
   task: CustomITask | StandaloneITask;
   titleCode: string;
+  titleValues?: Record<string, string>;
   onGoBack?: () => void;
   onCloseModal?: () => void;
   focusPriority: FocusTarget[];
@@ -79,6 +80,7 @@ const NavigableContainer: React.FC<Props> = ({
   closeModal,
   onCloseModal = () => closeModal(),
   titleCode,
+  titleValues = {},
   hasHistory,
   isModal,
   focusPriority = ['back', 'close'],
@@ -115,7 +117,7 @@ const NavigableContainer: React.FC<Props> = ({
           )}
         </Box>
         <NavigableContainerTitle data-testid="NavigableContainer-Title">
-          <Template code={titleCode} />
+          <Template code={titleCode} {...titleValues} />
         </NavigableContainerTitle>
         {isModal && (
           <HeaderCloseButton
diff --git a/plugin-hrm-form/src/components/case/CaseHome.tsx b/plugin-hrm-form/src/components/case/CaseHome.tsx
index 7c8caea788..a2c083f0b6 100644
--- a/plugin-hrm-form/src/components/case/CaseHome.tsx
+++ b/plugin-hrm-form/src/components/case/CaseHome.tsx
@@ -40,7 +40,7 @@ import { Case, Contact, CustomITask, EntryInfo, StandaloneITask } from '../../ty
 import * as RoutingActions from '../../states/routing/actions';
 import { newCloseModalAction } from '../../states/routing/actions';
 import InformationRow from './InformationRow';
-import TimelineInformationRow from './TimelineInformationRow';
+import IncidentInformationRow from './IncidentInformationRow';
 import DocumentInformationRow from './DocumentInformationRow';
 import { householdSectionApi } from '../../states/case/sections/household';
 import { perpetratorSectionApi } from '../../states/case/sections/perpetrator';
@@ -89,6 +89,7 @@ const CaseHome: React.FC<Props> = ({
   const {
     enable_upload_documents: enableUploadDocuments,
     enable_case_merging: enableCaseMerging,
+    enable_separate_timeline_view: enableSeparateTimelineView,
   } = getAseloFeatureFlags();
 
   const onViewCaseItemClick = (targetSubroute: CaseSectionSubroute) => (id: string) => {
@@ -170,7 +171,7 @@ const CaseHome: React.FC<Props> = ({
       <>
         {incidents.map((item, index) => {
           return (
-            <TimelineInformationRow
+            <IncidentInformationRow
               key={`incident-${index}`}
               onClickView={() => onViewCaseItemClick(NewCaseSubroutes.Incident)(item.id)}
               definition={caseForms.IncidentForm}
@@ -252,8 +253,10 @@ const CaseHome: React.FC<Props> = ({
             <Timeline
               taskSid={task.taskSid}
               page={0}
-              pageSize={5}
-              titleCode={hasMoreActivities ? 'Case-RecentTimelineTitle' : 'Case-TimelineTitle'}
+              pageSize={enableSeparateTimelineView ? 5 : Number.MAX_SAFE_INTEGER}
+              titleCode={
+                hasMoreActivities && enableSeparateTimelineView ? 'Case-Timeline-RecentTitle' : 'Case-Timeline-Title'
+              }
             />
             {hasMoreActivities && (
               <ViewButton style={{ marginTop: '10px' }} withDivider={false} onClick={onViewFullTimelineClick}>
diff --git a/plugin-hrm-form/src/components/case/TimelineInformationRow.tsx b/plugin-hrm-form/src/components/case/IncidentInformationRow.tsx
similarity index 90%
rename from plugin-hrm-form/src/components/case/TimelineInformationRow.tsx
rename to plugin-hrm-form/src/components/case/IncidentInformationRow.tsx
index 46030e077a..ac0b0f7232 100644
--- a/plugin-hrm-form/src/components/case/TimelineInformationRow.tsx
+++ b/plugin-hrm-form/src/components/case/IncidentInformationRow.tsx
@@ -20,7 +20,7 @@ import React from 'react';
 import { Template } from '@twilio/flex-ui';
 import type { FormDefinition, LayoutDefinition } from 'hrm-form-definitions';
 
-import { TimelineRow, TimelineText, TimelineLabel, ViewButton, RowItemContainer } from '../../styles/case';
+import { RowItemContainer, TimelineLabel, TimelineRow, TimelineText, ViewButton } from '../../styles/case';
 import { Box, HiddenText } from '../../styles/HrmStyles';
 import { formatValue } from '../common/forms/helpers';
 import type { Incident } from '../../types/types';
@@ -35,7 +35,7 @@ type OwnProps = {
 const RowItem: React.FC = ({ children }) => <RowItemContainer style={{ flex: 1 }}>{children}</RowItemContainer>;
 RowItem.displayName = 'RowItem';
 
-const TimelineInformationRow: React.FC<OwnProps> = ({ definition, values, layoutDefinition, onClickView }) => {
+const IncidentInformationRow: React.FC<OwnProps> = ({ definition, values, layoutDefinition, onClickView }) => {
   return (
     <TimelineRow>
       {layoutDefinition.previewFields.map((name, index) => {
@@ -66,6 +66,6 @@ const TimelineInformationRow: React.FC<OwnProps> = ({ definition, values, layout
   );
 };
 
-TimelineInformationRow.displayName = 'TimelineInformationRow';
+IncidentInformationRow.displayName = 'IncidentInformationRow';
 
-export default TimelineInformationRow;
+export default IncidentInformationRow;
diff --git a/plugin-hrm-form/src/components/case/timeline/FullTimelineView.tsx b/plugin-hrm-form/src/components/case/timeline/FullTimelineView.tsx
index 1b71b081be..a6d30c3207 100644
--- a/plugin-hrm-form/src/components/case/timeline/FullTimelineView.tsx
+++ b/plugin-hrm-form/src/components/case/timeline/FullTimelineView.tsx
@@ -63,10 +63,15 @@ const FullTimelineView: React.FC<Props> = ({ task, page, activityCount, changePa
 
   return (
     <CaseLayout>
-      <NavigableContainer task={task} titleCode="Case Timeline">
+      <NavigableContainer
+        task={task}
+        titleCode="Case-Timeline-ModalTitle"
+        titleValues={{ caseId }}
+        style={{ textAlign: 'center' }}
+      >
         <AddToCaseBanner task={task} />
-        <Timeline taskSid={task.taskSid} pageSize={TIMELINE_PAGE_SIZE} page={page} titleCode="Case-TimelineTitle" />
-        <p>
+        <Timeline taskSid={task.taskSid} pageSize={TIMELINE_PAGE_SIZE} page={page} titleCode="Case-Timeline-Title" />
+        <p style={{ marginTop: '10px', fontStyle: 'italic' }}>
           <Template
             code="Case-Timeline-PaginationDescription"
             from={page * TIMELINE_PAGE_SIZE + 1}
diff --git a/plugin-hrm-form/src/components/case/timeline/Timeline.tsx b/plugin-hrm-form/src/components/case/timeline/Timeline.tsx
index b6fa8b303b..ed0433181b 100644
--- a/plugin-hrm-form/src/components/case/timeline/Timeline.tsx
+++ b/plugin-hrm-form/src/components/case/timeline/Timeline.tsx
@@ -79,7 +79,7 @@ const Timeline: React.FC<Props> = ({
   openViewCaseSectionModal,
   openAddCaseSectionModal,
   connectedCase,
-  titleCode = 'Case-RecentTimelineTitle',
+  titleCode = 'Case-Timeline-RecentTitle',
 }) => {
   const [mockedMessage, setMockedMessage] = useState(null);
 
@@ -133,7 +133,7 @@ const Timeline: React.FC<Props> = ({
       </Dialog>
       <Box marginBottom="10px">
         <Row>
-          <CaseSectionFont id="Case-RecentTimelineTitle-label">
+          <CaseSectionFont id="Case-TimelineSection-label">
             <Template code={titleCode} />
           </CaseSectionFont>
           <Box marginLeft="auto">
diff --git a/plugin-hrm-form/src/translations/en-CA/flexUI.json b/plugin-hrm-form/src/translations/en-CA/flexUI.json
index c642789e7c..4356c3cbcb 100644
--- a/plugin-hrm-form/src/translations/en-CA/flexUI.json
+++ b/plugin-hrm-form/src/translations/en-CA/flexUI.json
@@ -193,10 +193,11 @@
   "Error-ContinueWithoutRecording": "Error from backend system.  Are you sure you want to end the task without recording?",
   "Error-Form": "There is a problem with your submission.  Please check the form for errors.",
   "Error-Unexpected": "Unexpected error has occurred",
-  "Case-RecentTimelineTitle": "Recent Timeline",
-  "Case-TimelineTitle": "Timeline",
+  "Case-Timeline-RecentTitle": "Recent Timeline",
+  "Case-Timeline-Title": "Timeline",
   "Case-Timeline-PaginationDescription": "Showing {{from}}-{{to}} of {{total}}",
   "Case-Timeline-OpenFullTimelineButton": "Show All Timeline Items",
+  "Case-Timeline-ModalTitle": "Referral #{{caseId}} Timeline",
   "Case-AddDocumentSection": "Documents",
   "Case-CaseDetailsChildName": "Child Name",
   "Case-CaseDetailsOwner": "Counsellor",
diff --git a/plugin-hrm-form/src/translations/en-MT/flexUI.json b/plugin-hrm-form/src/translations/en-MT/flexUI.json
index c4254f3b23..2684f745a1 100644
--- a/plugin-hrm-form/src/translations/en-MT/flexUI.json
+++ b/plugin-hrm-form/src/translations/en-MT/flexUI.json
@@ -123,10 +123,11 @@
   "Bottombar-Close": "Close",
   "BottomBar-OpenNewCase": "Open New Case",
   "BottomBar-AddToExistingCase": "Add to Existing Case",
-  "Case-RecentTimelineTitle": "Recent Timeline",
-  "Case-TimelineTitle": "Timeline",
+  "Case-Timeline-RecentTitle": "Recent Timeline",
+  "Case-Timeline-Title": "Timeline",
   "Case-Timeline-PaginationDescription": "Showing {{from}}-{{to}} of {{total}}",
   "Case-Timeline-OpenFullTimelineButton": "Show All Timeline Items",
+  "Case-Timeline-ModalTitle": "Case #{{caseId}} Timeline",
   "Case-AddHouseholdSection": "Household Information",
   "Case-AddPerpetratorSection": "Perpetrators",
   "Case-AddIncidentSection": "Incidents",
diff --git a/plugin-hrm-form/src/translations/en-NZ/flexUI.json b/plugin-hrm-form/src/translations/en-NZ/flexUI.json
index 40f58619dc..d07f2025c3 100644
--- a/plugin-hrm-form/src/translations/en-NZ/flexUI.json
+++ b/plugin-hrm-form/src/translations/en-NZ/flexUI.json
@@ -63,10 +63,11 @@
   "Case-ReferralComments": "Comments",
   "Case-ReferralDate": "Date",
   "Case-ReferralReferredTo": "Referred To...",
-  "Case-RecentTimelineTitle": "Recent Timeline",
-  "Case-TimelineTitle": "Timeline",
+  "Case-Timeline-RecentTitle": "Recent Timeline",
+  "Case-Timeline-Title": "Timeline",
   "Case-Timeline-PaginationDescription": "Showing {{from}}-{{to}} of {{total}}",
   "Case-Timeline-OpenFullTimelineButton": "Show All Timeline Items",
+  "Case-Timeline-ModalTitle": "Case #{{caseId}} Timeline",
   "Case-ViewButton": "View",
   "Case-ViewDocument": "View Document",
   "Case-ViewHousehold": "View Risk to Self Report",
diff --git a/plugin-hrm-form/src/translations/en-US/flexUI.json b/plugin-hrm-form/src/translations/en-US/flexUI.json
index 3d93288991..f518c0e1ac 100644
--- a/plugin-hrm-form/src/translations/en-US/flexUI.json
+++ b/plugin-hrm-form/src/translations/en-US/flexUI.json
@@ -154,11 +154,12 @@
   "Error-CategoryRequired": "Required 1 category minimum, 3 categories maximum",
   "Error-Unexpected": "Unexpected error has occurred",
   "Case-CaseNumber": "Case #",
-  "Case-RecentTimelineTitle": "Recent Timeline",
-  "Case-TimelineTitle": "Timeline",
+  "Case-Timeline-RecentTitle": "Recent Timeline",
+  "Case-Timeline-Title": "Timeline",
   "Case-Timeline-PaginationDescription": "Showing {{from}}-{{to}} of {{total}}",
   "Case-Timeline-OpenFullTimelineButton": "See All Timeline Items",
   "Case-Timeline-DraftContactSummaryPlaceholder": "In Progress",
+  "Case-Timeline-ModalTitle": "Case #{{caseId}} Timeline",
   "Case-AddPerpetratorSection": "Perpetrators",
   "Case-AddIncidentSection": "Incidents",
   "Case-AddHouseholdSection": "Household Information",
diff --git a/plugin-hrm-form/src/translations/es-CL/flexUI.json b/plugin-hrm-form/src/translations/es-CL/flexUI.json
index 16772f4401..4b9ad0a4c5 100644
--- a/plugin-hrm-form/src/translations/es-CL/flexUI.json
+++ b/plugin-hrm-form/src/translations/es-CL/flexUI.json
@@ -120,10 +120,13 @@
   "Bottombar-Close": "Cerrar",
   "BottomBar-OpenNewCase": "Abrir Nuevo Caso",
   "BottomBar-AddToExistingCase": "Agregar al Caso Existente",
-  "Case-RecentTimelineTitle": "Cronología reciente",
-  "Case-TimelineTitle": "Historial",
+
+  "Case-Timeline-RecentTitle": "Cronología reciente",
+  "Case-Timeline-Title": "Historial",
+  "Case-TimelineModalTitle": "Historial",
   "Case-Timeline-PaginationDescription": "Mostrando {{from}}-{{to}} de {{total}}",
   "Case-Timeline-OpenFullTimelineButton": "Mostrar todos los elementos de la línea de tiempo",
+  "Case-Timeline-ModalTitle": "Caso #{{caseId}} Cronología",
   "Case-AddHouseholdSection": "Información del Hogar",
   "Case-AddPerpetratorSection": "Perpetradores",
   "Case-AddIncidentSection": "Incidentes",
diff --git a/plugin-hrm-form/src/translations/es-CO/flexUI.json b/plugin-hrm-form/src/translations/es-CO/flexUI.json
index 2d7cca4d96..b70348b7a8 100644
--- a/plugin-hrm-form/src/translations/es-CO/flexUI.json
+++ b/plugin-hrm-form/src/translations/es-CO/flexUI.json
@@ -120,10 +120,11 @@
   "Bottombar-Close": "Cerrar",
   "BottomBar-OpenNewCase": "Abrir Nuevo Caso",
   "BottomBar-AddToExistingCase": "Agregar al Caso Existente",
-  "Case-RecentTimelineTitle": "Cronología reciente",
-  "Case-TimelineTitle": "Historial",
+  "Case-Timeline-RecentTitle": "Cronología reciente",
+  "Case-Timeline-Title": "Historial",
   "Case-Timeline-PaginationDescription": "Mostrando {{from}}-{{to}} de {{total}}",
   "Case-Timeline-OpenFullTimelineButton": "Mostrar todos los elementos de la línea de tiempo",
+  "Case-Timeline-ModalTitle": "Caso #{{caseId}} Cronología",
   "Case-AddHouseholdSection": "Información del Hogar",
   "Case-AddPerpetratorSection": "Perpetradores",
   "Case-AddIncidentSection": "Incidentes",
diff --git a/plugin-hrm-form/src/translations/es-ES/flexUI.json b/plugin-hrm-form/src/translations/es-ES/flexUI.json
index 52dba01142..93debfd940 100644
--- a/plugin-hrm-form/src/translations/es-ES/flexUI.json
+++ b/plugin-hrm-form/src/translations/es-ES/flexUI.json
@@ -123,10 +123,11 @@
   "Bottombar-Close": "Cerrar",
   "BottomBar-OpenNewCase": "Abrir Nuevo Caso",
   "BottomBar-AddToExistingCase": "Agregar al Caso Existente",
-  "Case-RecentTimelineTitle": "Cronología reciente",
-  "Case-TimelineTitle": "Historial",
+  "Case-Timeline-RecentTitle": "Cronología reciente",
+  "Case-Timeline-Title": "Historial",
   "Case-Timeline-PaginationDescription": "Mostrando {{from}}-{{to}} de {{total}}",
   "Case-Timeline-OpenFullTimelineButton": "Mostrar todos los elementos de la línea de tiempo",
+  "Case-Timeline-ModalTitle": "Caso #{{caseId}} Cronología",
   "Case-AddHouseholdSection": "Información del Hogar",
   "Case-AddPerpetratorSection": "Perpetradores",
   "Case-AddIncidentSection": "Incidentes",
diff --git a/plugin-hrm-form/src/translations/hu-HU/flexUI.json b/plugin-hrm-form/src/translations/hu-HU/flexUI.json
index 6024677169..835b826ffb 100644
--- a/plugin-hrm-form/src/translations/hu-HU/flexUI.json
+++ b/plugin-hrm-form/src/translations/hu-HU/flexUI.json
@@ -119,10 +119,11 @@
   "Bottombar-Close": "Bezárás",
   "BottomBar-OpenNewCase": "Új eset megnyitása",
   "BottomBar-AddToExistingCase": "Hozzáadás egy meglévő esethez",
-  "Case-RecentTimelineTitle": "Legutóbbi idővonal",
-  "Case-TimelineTitle": "Idővonal",
+  "Case-Timeline-RecentTitle": "Legutóbbi idővonal",
+  "Case-Timeline-Title": "Idővonal",
   "Case-Timeline-PaginationDescription": "{{total}}/{{from}}-{{to}} megjelenítése",
   "Case-Timeline-OpenFullTimelineButton": "Az összes idővonal-elem megjelenítése",
+  "Case-Timeline-ModalTitle": "{{caseId}}. eset idővonala",
   "Case-AddHouseholdSection": "Kapcsolati információk",
   "Case-AddPerpetratorSection": "Elkövetők",
   "Case-AddIncidentSection": "Események",
diff --git a/plugin-hrm-form/src/translations/pl-PL/flexUI.json b/plugin-hrm-form/src/translations/pl-PL/flexUI.json
index bf9bdad914..ee725404f6 100644
--- a/plugin-hrm-form/src/translations/pl-PL/flexUI.json
+++ b/plugin-hrm-form/src/translations/pl-PL/flexUI.json
@@ -123,10 +123,11 @@
     "Bottombar-Close": "Blisko",
     "BottomBar-OpenNewCase": "Otwórz nową sprawę",
     "BottomBar-AddToExistingCase": "Dodaj do istniejącej skrzynki",
-    "Case-RecentTimelineTitle": "Najnowsza oś czasu",
-    "Case-TimelineTitle": "Oś czasu",
+    "Case-Timeline-RecentTitle": "Najnowsza oś czasu",
+    "Case-Timeline-Title": "Oś czasu",
     "Case-Timeline-PaginationDescription": "Wyświetlanie {{from}}-{{to}} z {{total}}",
     "Case-Timeline-OpenFullTimelineButton": "Pokaż wszystkie elementy osi czasu",
+    "Case-Timeline-ModalTitle": "Sprawa nr{{caseId}} Oś czasu",
     "Case-AddHouseholdSection": "Informacje o gospodarstwie domowym",
     "Case-AddPerpetratorSection": "Sprawcy",
     "Case-AddIncidentSection": "Incydenty",
diff --git a/plugin-hrm-form/src/translations/pt-BR/flexUI.json b/plugin-hrm-form/src/translations/pt-BR/flexUI.json
index a079acc37f..fadc1351a2 100644
--- a/plugin-hrm-form/src/translations/pt-BR/flexUI.json
+++ b/plugin-hrm-form/src/translations/pt-BR/flexUI.json
@@ -108,10 +108,11 @@
   "Error-Form": "Há um problema com o seu envio. Verifique se há erros no formulário.",
   "RequiredFieldError": "Este campo é obrigatório.",
   "BottomBar-OpenNewCase": "Abrir novo caso",
-  "Case-RecentTimelineTitle": "Linha do tempo recente",
-  "Case-TimelineTitle": "Linha do tempo",
+  "Case-Timeline-RecentTitle": "Linha do tempo recente",
+  "Case-Timeline-Title": "Linha do tempo",
   "Case-Timeline-PaginationDescription": "Mostrando {{from}}-{{to}} de {{total}}",
   "Case-Timeline-OpenFullTimelineButton": "Mostrar todos os itens da linha do tempo",
+  "Case-Timeline-ModalTitle": "Linha do tempo do caso nº{{caseId}}",
   "Case-AddHouseholdSection": "Informação de moradia",
   "Case-AddPerpetratorSection": "Perpetradores/autor da violência",
   "Case-AddIncidentSection": "Incidentes",
diff --git a/plugin-hrm-form/src/translations/ro-RO/flexUI.json b/plugin-hrm-form/src/translations/ro-RO/flexUI.json
index 7b5a90757b..97cdd49627 100644
--- a/plugin-hrm-form/src/translations/ro-RO/flexUI.json
+++ b/plugin-hrm-form/src/translations/ro-RO/flexUI.json
@@ -123,10 +123,11 @@
     "Bottombar-Close": "Închide",
     "BottomBar-OpenNewCase": "Deschideți un nou caz",
     "BottomBar-AddToExistingCase": "Adăugați la cazul existent",
-    "Case-RecentTimelineTitle": "Cronologie recentă",
-    "Case-TimelineTitle": "Cronologie",
+    "Case-Timeline-RecentTitle": "Cronologie recentă",
+    "Case-Timeline-Title": "Cronologie",
     "Case-Timeline-PaginationDescription": "Mostrando {{from}}-{{to}} de {{total}}",
     "Case-Timeline-OpenFullTimelineButton": "Se afișează {{from}}-{{to}} din {{total}}",
+    "Case-Timeline-ModalTitle": "Cazul #{{caseId}} Cronologie",
     "Case-AddHouseholdSection": "Informații de uz casnic",
     "Case-AddPerpetratorSection": "Făptuitori",
     "Case-AddIncidentSection": "Incidente",
diff --git a/plugin-hrm-form/src/translations/th-TH/flexUI.json b/plugin-hrm-form/src/translations/th-TH/flexUI.json
index d450e8de73..2522a19a0b 100644
--- a/plugin-hrm-form/src/translations/th-TH/flexUI.json
+++ b/plugin-hrm-form/src/translations/th-TH/flexUI.json
@@ -63,10 +63,11 @@
   "Case-ReferralComments": "หมายเหตุ",
   "Case-ReferralDate": "วันที่ส่งต่อ",
   "Case-ReferralReferredTo": "อ้างถึง...",
-  "Case-RecentTimelineTitle": "ไทม์ไลน์ล่าสุด",
-  "Case-TimelineTitle": "ไทม์ไลน์",
+  "Case-Timeline-RecentTitle": "ไทม์ไลน์ล่าสุด",
+  "Case-Timeline-Title": "ไทม์ไลน์",
   "Case-Timeline-PaginationDescription": "กำลังแสดง {{from}}-{{to}} จาก {{total}}",
   "Case-Timeline-OpenFullTimelineButton": "แสดงรายการไทม์ไลน์ทั้งหมด",
+  "Case-Timeline-ModalTitle": "กรณี #{{caseId}} เส้นเวลา",
   "Case-ViewButton": "แสดง",
   "Case-ViewDocument": "ดูเอกสาร",
   "Case-ViewHousehold": "ดูสมาชิกในครัวเรือน",
diff --git a/plugin-hrm-form/src/types/types.ts b/plugin-hrm-form/src/types/types.ts
index 652f6f2ae1..2514ab25da 100644
--- a/plugin-hrm-form/src/types/types.ts
+++ b/plugin-hrm-form/src/types/types.ts
@@ -278,6 +278,7 @@ export type FeatureFlags = {
   enable_client_profiles: boolean; // Enables Client Profiles
   enable_case_merging: boolean; // Enables adding contacts to existing cases
   enable_confirm_on_browser_close: boolean; // Enables confirmation dialog on browser close when there are unsaved changes
+  enable_separate_timeline_view: boolean; // Enables confirmation dialog on browser close when there are unsaved changes
 };
 /* eslint-enable camelcase */
 

From ec4dad5b5e438e86f887bad0dfeae3e0cd32eab5 Mon Sep 17 00:00:00 2001
From: Stephen Hand <steveh@techmatters.org>
Date: Thu, 21 Dec 2023 19:54:58 +0000
Subject: [PATCH 7/7] Fix some merge issues

---
 .../src/components/case/timeline/FullTimelineView.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugin-hrm-form/src/components/case/timeline/FullTimelineView.tsx b/plugin-hrm-form/src/components/case/timeline/FullTimelineView.tsx
index a6d30c3207..2064e9c51a 100644
--- a/plugin-hrm-form/src/components/case/timeline/FullTimelineView.tsx
+++ b/plugin-hrm-form/src/components/case/timeline/FullTimelineView.tsx
@@ -27,7 +27,7 @@ import { RootState } from '../../../states';
 import { selectCurrentTopmostRouteForTask } from '../../../states/routing/getRoute';
 import { CaseTimelineRoute, ChangeRouteMode } from '../../../states/routing/types';
 import { selectCaseActivityCount } from '../../../states/case/timeline';
-import Pagination from '../../Pagination';
+import Pagination from '../../pagination';
 import { changeRoute } from '../../../states/routing/actions';
 
 type MyProps = {