Merge pull request #1411 from ministryofjustice/APS-195

APS-195: Add links to Timeline events

Author: vubalasu

integration_tests/pages/apply/showPage.ts

@@ -125,6 +125,8 @@ export default class ShowPage extends Page {
               timelineEvents[index].createdBy.name,
             )
           }
+          cy.get('.govuk-link').should('have.attr', { time: timelineEvents[index].associatedUrls[0].url })
+          cy.get('.govuk-link').should('contain', timelineEvents[index].associatedUrls[0].type)
           cy.get('time').should('contain', DateFormats.isoDateTimeToUIDateTime(timelineEvents[index].occurredAt))
         })
       })

server/testutils/factories/timelineEvent.ts

@@ -25,4 +25,5 @@ export default Factory.define<TimelineEvent>(() => ({
   ] as const),
   content: Math.random() < 0.5 ? faker.lorem.sentences() : undefined,
   createdBy: userFactory.build(),
+  associatedUrls: [{ type: 'application', url: faker.internet.url() }],
 }))

server/utils/applications/utils.test.ts

@@ -667,6 +667,30 @@ describe('utils', () => {
   describe('mapTimelineEventsForUi', () => {
     it('maps the events into the format required by the MoJ UI Timeline component', () => {
       const timelineEvents = timelineEventFactory.buildList(1)
+      expect(mapTimelineEventsForUi(timelineEvents)).toEqual([
+        {
+          datetime: {
+            timestamp: timelineEvents[0].occurredAt,
+            date: DateFormats.isoDateTimeToUIDateTime(timelineEvents[0].occurredAt),
+          },
+          label: {
+            text: eventTypeTranslations[timelineEvents[0].type],
+          },
+          content: timelineEvents[0].content,
+          createdBy: timelineEvents[0].createdBy.name,
+          associatedUrls: [
+            {
+              type: timelineEvents[0].associatedUrls[0].type,
+              url: timelineEvents[0].associatedUrls[0].url,
+            },
+          ],
+        },
+      ])
+    })
+
+    it('maps the events into the format required by the MoJ UI Timeline component without associatedUrls', () => {
+      const timelineEvents = timelineEventFactory.buildList(1, { associatedUrls: undefined })
+
       expect(mapTimelineEventsForUi(timelineEvents)).toEqual([
         {
           datetime: {

server/utils/applications/utils.ts

@@ -297,6 +297,7 @@ const mapTimelineEventsForUi = (timelineEvents: Array<TimelineEvent>): Array<UiT
           date: DateFormats.isoDateTimeToUIDateTime(timelineEvent.occurredAt),
         },
         content: timelineEvent.content,
+        associatedUrls: timelineEvent.associatedUrls,
       }
       if (timelineEvent.createdBy?.name) {
         return {

server/views/applications/partials/_timeline.njk

@@ -29,22 +29,33 @@
 
         <div class="moj-timeline__header">
           <h3 class="moj-timeline__title">{{event.label.text}}</h3>
-           {% if event.createdBy %}
-              <p class="moj-timeline__byline">by {{event.createdBy}}</p>
+          {% if event.createdBy %}
+            <p class="moj-timeline__byline">by {{event.createdBy}}</p>
             {%endif%}
-        </div>
+          </div>
 
-        <p class="moj-timeline__date">
-          <time datetime="{{event.datetime.timestamp}}">{{event.datetime.date}}</time>
-        </p>
+          <p class="moj-timeline__date">
+            <time datetime="{{event.datetime.timestamp}}">{{event.datetime.date}}</time>
+          </p>
 
-        {% if event.content %}
-          <div class="moj-timeline__description">
-            <p>{{event.content}}</p>
-          </div>
-          {%endif%}
+          {% if event.content %}
+            <div class="moj-timeline__description">
+              <p>{{event.content}}</p>
+            </div>
+            {%endif%}
+            {% if event.associatedUrls %}
+              {% for associatedUrl in event.associatedUrls %}
+                <div class="moj-timeline__description">
+                  <ul class="govuk-list govuk-list--bullet">
+                    <li>
+                      <a class="govuk-link" href="{{associatedUrl.url}}">View {{associatedUrl.type}}</a>
+                    </li>
+                  </ul>
+                </div>
+              {% endfor %}
+              {%endif%}
+            </div>
+          {% endfor %}
         </div>
-      {% endfor %}
-    </div>
 
-  {% endmacro %}
+      {% endmacro %}