change display text when no date set

closes VICE-1529
flag=react_discussions_post

Test Plan:
-create a discussion with multiple due dates
	-leave due, available, and until empty
-open multiple due date tray
-verify cells for displaying empty dates have
	no date text

Change-Id: I2654052f8a8b36569bdfe5ffb4b836a3c2a65258
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/265920
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Caleb Guanzon <cguanzon@instructure.com>
QA-Review: Caleb Guanzon <cguanzon@instructure.com>
Product-Review: Caleb Guanzon <cguanzon@instructure.com>

ui/features/discussion_topics_post/react/components/Alert/Alert.js

@@ -110,7 +110,9 @@ export function Alert({...props}) {
                     <Grid.Row key={item.id}>
                       <Grid.Col width={{small: 4, medium: 5, large: 2, xLarge: 6}}>
                         <Text size="medium">
-                          {item.dueAt ? DateHelper.formatDatetimeForDiscussions(item.dueAt) : ''}
+                          {item.dueAt
+                            ? DateHelper.formatDatetimeForDiscussions(item.dueAt)
+                            : I18n.t('No Due Date')}
                         </Text>
                       </Grid.Col>
                       <Grid.Col width={{small: 4, medium: 2, large: 4, xLarge: 1}}>
@@ -122,12 +124,14 @@ export function Alert({...props}) {
                         <Text size="medium">
                           {item.unlockAt
                             ? DateHelper.formatDatetimeForDiscussions(item.unlockAt)
-                            : ''}
+                            : I18n.t('No Start Date')}
                         </Text>
                       </Grid.Col>
                       <Grid.Col width={{small: 4, medium: 5, large: 2, xLarge: 6}}>
                         <Text size="medium">
-                          {item.lockAt ? DateHelper.formatDatetimeForDiscussions(item.lockAt) : ''}
+                          {item.lockAt
+                            ? DateHelper.formatDatetimeForDiscussions(item.lockAt)
+                            : I18n.t('No End Date')}
                         </Text>
                       </Grid.Col>
                     </Grid.Row>

ui/features/discussion_topics_post/react/components/Alert/__tests__/Alert.test.js

@@ -22,33 +22,34 @@ import React from 'react'
 
 import {fireEvent, render} from '@testing-library/react'
 
+const overrides = [
+  {
+    id: 'QXNzaWdebTVubC0x',
+    _id: '1',
+    dueAt: '2021-03-30T23:59:59-06:00',
+    lockAt: '2021-04-03T23:59:59-06:00',
+    unlockAt: '2021-03-24T00:00:00-06:00',
+    title: 'assignment override 1'
+  },
+  {
+    id: 'QXMzaWdebTubeC0x',
+    _id: '2',
+    dueAt: '2021-03-27T23:59:59-06:00',
+    lockAt: '2021-04-03T23:59:59-06:00',
+    unlockAt: '2021-03-21T00:00:00-06:00',
+    title: 'assignment override 2'
+  },
+  {
+    id: 'BXMzaWdebTVubC0x',
+    _id: '3',
+    dueAt: '2021-03-27T23:59:59-06:00',
+    lockAt: '2021-09-03T23:59:59-06:00',
+    unlockAt: '2021-03-21T00:00:00-06:00',
+    title: 'assignment override 3'
+  }
+]
+
 const setup = withOverrides => {
-  const overrides = [
-    {
-      id: 'QXNzaWdebTVubC0x',
-      _id: '1',
-      dueAt: '2021-03-30T23:59:59-06:00',
-      lockAt: '2021-04-03T23:59:59-06:00',
-      unlockAt: '2021-03-24T00:00:00-06:00',
-      title: 'assignment override 1'
-    },
-    {
-      id: 'QXMzaWdebTubeC0x',
-      _id: '2',
-      dueAt: '2021-03-27T23:59:59-06:00',
-      lockAt: '2021-04-03T23:59:59-06:00',
-      unlockAt: '2021-03-21T00:00:00-06:00',
-      title: 'assignment override 2'
-    },
-    {
-      id: 'BXMzaWdebTVubC0x',
-      _id: '3',
-      dueAt: '2021-03-27T23:59:59-06:00',
-      lockAt: '2021-09-03T23:59:59-06:00',
-      unlockAt: '2021-03-21T00:00:00-06:00',
-      title: 'assignment override 3'
-    }
-  ]
   return withOverrides
     ? render(
         <Alert
@@ -91,4 +92,16 @@ describe('Alert', () => {
     expect(await findByTestId('due-dates-tray-heading')).toBeTruthy()
     expect(await findByText('Sep 4 5:59am')).toBeTruthy()
   })
+
+  it('correct text is shown when a date is not set', async () => {
+    overrides[2].dueAt = null
+    overrides[2].unlockAt = null
+    overrides[2].lockAt = null
+    const {queryByText, findByText} = setup(true)
+    expect(await queryByText('Show due dates (3)')).toBeTruthy()
+    fireEvent.click(queryByText('Show due dates (3)'))
+    expect(await findByText('No Due Date')).toBeTruthy()
+    expect(await findByText('No Start Date')).toBeTruthy()
+    expect(await findByText('No End Date')).toBeTruthy()
+  })
 })