258060 sort out deployments part v

src/server/common/components/entity-list/_entity-list.scss

@@ -30,13 +30,17 @@
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
-  padding: govuk-spacing(2) + 2 govuk-spacing(2) govuk-spacing(2) govuk-spacing(2);
+  padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) govuk-spacing(2);
   border-bottom: 1px solid $app-grey;
   line-height: 1.4;
 
   &:nth-child(odd) {
     background-color: $app-light-grey;
   }
+
+  &:last-child {
+    border: none;
+  }
 }
 
 .app-entity-list__item {
@@ -50,7 +54,6 @@
   }
 }
 
-// TODO can this be improved? Can CSS grid be used?
 .app-entity-list__item--tiny {
   flex: .2;
   max-width: 80px;

src/server/common/components/entity-list/template.test.js

@@ -81,7 +81,7 @@ describe('Entity List Component', () => {
       expect(getEntity(4).html()).toContain('B. A. Baracus')
 
       expect(getEntity(5).length).toEqual(1)
-      expect(getEntity(5).html()).toContain('14:10:49 Thu 14th Dec 202')
+      expect(getEntity(5).html()).toContain('14:04:49 Thu 14th Dec 2023')
     })
   })
 

src/server/common/components/footer/_footer.scss

@@ -1,6 +1,6 @@
 .app-footer {
   padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(6);
   min-height: govuk-spacing(9);
-  border-top: 1px solid govuk-colour("mid-grey");
-  background: $govuk-canvas-background-colour;
+  border-bottom: 1px solid $app-grey;
+  background-color: $app-light-grey;
 }

src/server/common/components/tabs/_tabs.scss

@@ -32,7 +32,7 @@
   .app-tabs__list-item {
     border-radius: $app-border-radius $app-border-radius 0 0;
     margin: govuk-spacing(2) govuk-spacing(1) 0 0;
-    background-color: govuk-colour("light-grey");
+    background-color: $app-light-grey;
   }
 
   .app-tabs__tab {

src/server/common/templates/partials/navigation/_navigation.scss

@@ -2,7 +2,7 @@ $navigation-height: 60px;
 $border-width: 4px;
 
 .app-navigation {
-  border-bottom: 1px solid govuk-colour("mid-grey");
+  border-bottom: 1px solid $app-grey;
   background-color: $app-light-grey;
 }
 

src/server/deployments/helpers/fetch/fetch-deployment.js

@@ -13,6 +13,7 @@ async function fetchDeployment(deploymentId) {
   })
   const json = await response.json()
 
+  // Portal Backend returns empty array for not found deployments
   if (response.status === 404 || json?.length === 0) {
     throw Boom.boomify(Boom.notFound())
   }

src/server/deployments/helpers/pre/provide-deployment.js

@@ -1,16 +1,11 @@
-import Boom from '@hapi/boom'
-
 import { transformDeployment } from '~/src/server/deployments/transformers/transform-deployment'
 import { fetchDeployment } from '~/src/server/deployments/helpers/fetch/fetch-deployment'
 
 const provideDeployment = {
   method: async function (request) {
     const deploymentId = request.params?.deploymentId
-    const deployment = transformDeployment(await fetchDeployment(deploymentId))
-
-    if (!deployment) {
-      throw Boom.boomify(Boom.notFound())
-    }
+    const deploymentResponse = await fetchDeployment(deploymentId)
+    const deployment = transformDeployment(deploymentResponse)
 
     // If is an XHR call and when the deployment has finished and is running return null to make the poller refresh
     // the page.

src/server/deployments/transformers/transform-deployment.js

@@ -74,7 +74,7 @@ function transformDeployment(deploymentEvents) {
     }
   }
 
-  if (requestedDeployment && deploymentTasks.length) {
+  if (requestedDeployment && deploymentTasks.length > 0) {
     const deploymentTaskIds = [
       ...new Set(
         deploymentTasks

src/server/deployments/transformers/transform-deployments-to-entity-row.js

@@ -26,7 +26,7 @@ function transformDeploymentsToEntityRow(deployedService) {
     },
     {
       kind: 'date',
-      value: deployedService.updatedAt,
+      value: deployedService.createdAt,
       formatString: 'k:mm:ss EE do MMM yyyy'
     }
   ]

src/server/deployments/transformers/transform-deployments-to-entity-row.test.js

@@ -27,7 +27,7 @@ describe('#transformDeploymentsToEntityRow', () => {
       {
         formatString: 'k:mm:ss EE do MMM yyyy',
         kind: 'date',
-        value: '2023-12-14T14:10:49Z'
+        value: '2023-12-14T14:04:49Z'
       }
     ])
   })

src/server/deployments/views/deployment.njk

@@ -14,7 +14,6 @@
 {% endblock %}
 
 {% block tabContent %}
-
   {% if not deployment.status.hasFinished %}
     <div data-js="app-poll"
     data-poll-url="/deployments/{{ deployment.environment }}/{{ deployment.deploymentId }}"
@@ -87,14 +86,14 @@
                   <h2 class="govuk-heading-m govuk-!-margin-bottom-1">Deployed by</h2>
                   <p>{{ deployment.user | sanitizeUser }}</p>
 
-                  <h2 class="govuk-heading-m govuk-!-margin-bottom-1">Last updated</h2>
+                  <h2 class="govuk-heading-m govuk-!-margin-bottom-1">Updated</h2>
                   <p>
                     {{ appTime({ datetime: deployment.deployedAt, formatString: "k:mm:ss EE do MMM yyyy" }) }}
                   </p>
                 </div>
               </div>
 
-              <h2 class="govuk-heading-m govuk-!-margin-top-4 govuk-!-margin-bottom-1">Instances</h2>
+              <h2 class="govuk-heading-m govuk-!-margin-top-4 govuk-!-margin-bottom-1">Instance status</h2>
               <div class="app-row">
                 {% for key, task in deployment.tasks %}
 
@@ -139,4 +138,5 @@
   {% if not deployment.status.hasFinished %}
     </div>
   {% endif %}
+
 {% endblock %}

src/server/deployments/views/list.njk

@@ -18,7 +18,7 @@
         { text: "Version", size: "tiny" },
         { text: "Status", size: "small" },
         { text: "User", size: "large" },
-        { text: "Last updated", size: "large" }
+        { text: "Created", size: "large" }
       ],
       entityRows: entityRows,
       noResult: noResult,