From 6802f4a4da0f442885886df4c09a35c834b12bdb Mon Sep 17 00:00:00 2001
From: Carlos Alcaide Corvo <ccorvo@hashicorp.com>
Date: Thu, 18 May 2023 09:08:44 -0700
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20Add=20template=20con?=
 =?UTF-8?q?ditionals=20for=20dates=20and=20duration=20(#257)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add template conditionals within session-recordings for start_date,
end_date and duration fields.
---
 .../scopes/scope/session-recordings/index.hbs | 30 +++++++------
 .../channels-by-connection/channel.hbs        | 34 ++++++++------
 .../channels-by-connection/index.hbs          | 44 +++++++++++--------
 3 files changed, 62 insertions(+), 46 deletions(-)

diff --git a/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs b/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs
index 9a65b5707..d794afc31 100644
--- a/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs
@@ -24,11 +24,13 @@
           <B.Tr>
             {{! Time }}
             <B.Td>
-              <span class='hds-foreground-faint'>
-                <time datetime={{format-date-iso B.data.start_time}}>
-                  {{format-date-iso-human B.data.start_time}}
-                </time>
-              </span>
+              {{#if B.data.start_time}}
+                <span class='hds-foreground-faint'>
+                  <time datetime={{format-date-iso B.data.start_time}}>
+                    {{format-date-iso-human B.data.start_time}}
+                  </time>
+                </span>
+              {{/if}}
             </B.Td>
             {{! User }}
             <B.Td>
@@ -58,14 +60,16 @@
             </B.Td>
             {{! Duration }}
             <B.Td>
-              <div
-                class='session-recording-list-cell-item hds-foreground-faint'
-              >
-                <span><FlightIcon @name='clock' /></span>
-                <span>
-                  {{format-time-duration B.data.duration}}
-                </span>
-              </div>
+              {{#if B.data.duration}}
+                <div
+                  class='session-recording-list-cell-item hds-foreground-faint'
+                >
+                  <span><FlightIcon @name='clock' /></span>
+                  <span>
+                    {{format-time-duration B.data.duration}}
+                  </span>
+                </div>
+              {{/if}}
             </B.Td>
             <B.Td align='right'>
               {{#if (can 'read session-recording' B.data)}}
diff --git a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs
index 95c2c41b7..7966259da 100644
--- a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs
+++ b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs
@@ -73,21 +73,27 @@
           <h2>{{t 'resources.session-recording.channel.details'}}</h2>
           <MetadataList @orientation='vertical' as |list|>
             {{! Start time }}
-            <list.Item @icon='calendar' @color='faint'>
-              {{t 'form.started.label'}}
-              <time
-                datetime={{format-date-iso @model.channelRecording.start_time}}
-              >
-                {{format-date-iso-human @model.channelRecording.start_time}}
-              </time>
-            </list.Item>
+            {{#if @model.channelRecording.start_time}}
+              <list.Item @icon='calendar' @color='faint'>
+                {{t 'form.started.label'}}
+                <time
+                  datetime={{format-date-iso
+                    @model.channelRecording.start_time
+                  }}
+                >
+                  {{format-date-iso-human @model.channelRecording.start_time}}
+                </time>
+              </list.Item>
+            {{/if}}
             {{! Duration }}
-            <list.Item @icon='clock' @color='faint'>
-              {{t
-                'resources.session-recording.duration'
-                time=(format-time-duration @model.channelRecording.duration)
-              }}
-            </list.Item>
+            {{#if @model.channelRecording.duration}}
+              <list.Item @icon='clock' @color='faint'>
+                {{t
+                  'resources.session-recording.duration'
+                  time=(format-time-duration @model.channelRecording.duration)
+                }}
+              </list.Item>
+            {{/if}}
             {{! Bytes up }}
             <list.Item @icon='arrow-up' @color='success'>
               {{t
diff --git a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/index.hbs b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/index.hbs
index 364e756fc..1061ba87e 100644
--- a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/index.hbs
@@ -77,9 +77,11 @@
                         }}
                       </list.Item>
                       {{! Duration }}
-                      <list.Item @icon='clock' @color='faint'>
-                        {{format-time-duration B.data.duration}}
-                      </list.Item>
+                      {{#if B.data.duration}}
+                        <list.Item @icon='clock' @color='faint'>
+                          {{format-time-duration B.data.duration}}
+                        </list.Item>
+                      {{/if}}
                     </MetadataList>
                   </B.Td>
                   <B.Td>
@@ -111,23 +113,27 @@
 
             <MetadataList @orientation='vertical' as |list|>
               {{! Start time }}
-              <list.Item @icon='calendar' @color='faint'>
-                {{t 'form.started.label'}}
-                <time
-                  datetime={{format-date-iso
-                    @model.sessionRecording.start_time
-                  }}
-                >
-                  {{format-date-iso-human @model.sessionRecording.start_time}}
-                </time>
-              </list.Item>
+              {{#if @model.sessionRecording.start_time}}
+                <list.Item @icon='calendar' @color='faint'>
+                  {{t 'form.started.label'}}
+                  <time
+                    datetime={{format-date-iso
+                      @model.sessionRecording.start_time
+                    }}
+                  >
+                    {{format-date-iso-human @model.sessionRecording.start_time}}
+                  </time>
+                </list.Item>
+              {{/if}}
               {{! Duration }}
-              <list.Item @icon='clock' @color='faint'>
-                {{t
-                  'resources.session-recording.duration'
-                  time=(format-time-duration @model.sessionRecording.duration)
-                }}
-              </list.Item>
+              {{#if @model.sessionRecording.duration}}
+                <list.Item @icon='clock' @color='faint'>
+                  {{t
+                    'resources.session-recording.duration'
+                    time=(format-time-duration @model.sessionRecording.duration)
+                  }}
+                </list.Item>
+              {{/if}}
               {{! Bytes up }}
               <list.Item @icon='arrow-up' @color='success'>
                 {{t