fix: Fix dashboard timestamp & dashboard owner text color (#472)

* Update UI for dashboard related timestamps when they don't exist

* Fix AvatarLabel text color in resource detail left panel

* Code cleanup

amundsen_application/static/css/_layouts.scss

@@ -116,6 +116,12 @@ $resource-header-height: 84px;
           font-size: 16px;
         }
       }
+
+      .avatar-label-component {
+        .avatar-label {
+          color: $text-primary;
+        }
+      }
     }
 
     > .right-panel {

amundsen_application/static/js/components/DashboardPage/index.spec.tsx

@@ -23,6 +23,8 @@ import * as LogUtils from 'utils/logUtils';
 
 import { ResourceType } from 'interfaces';
 
+import { NO_TIMESTAMP_TEXT } from 'components/constants';
+
 const MOCK_DISPLAY_NAME = 'displayName';
 const MOCK_ICON_CLASS = 'dashboard-icon';
 
@@ -184,6 +186,24 @@ describe('DashboardPage', () => {
     it('renders an ImagePreview with correct props', () => {
       expect(wrapper.find(ImagePreview).props().uri).toBe(wrapper.state().uri);
     })
+
+    describe('renders timestamps correctly when unavailable', () => {
+      const { wrapper } = setup({
+        dashboard: {
+          ...dashboardMetadata,
+          last_run_timestamp: null,
+          last_successful_run_timestamp: null
+        }
+      });
+
+      it('last_run_timestamp', () => {
+        expect(wrapper.find('.last-run-timestamp').text()).toEqual(NO_TIMESTAMP_TEXT)
+      });
+
+      it('last_successful_run_timestamp', () => {
+        expect(wrapper.find('.last-successful-run-timestamp').text()).toEqual(NO_TIMESTAMP_TEXT)
+      });
+    });
   });
 
   describe('renderTabs', () => {

amundsen_application/static/js/components/DashboardPage/index.tsx

@@ -20,7 +20,7 @@ import { DashboardMetadata } from 'interfaces/Dashboard';
 import ImagePreview from './ImagePreview';
 import QueryList from 'components/DashboardPage/QueryList';
 import ChartList from 'components/DashboardPage/ChartList';
-import { formatDateTimeShort } from '../../utils/dateUtils';
+import { formatDateTimeShort } from 'utils/dateUtils';
 import ResourceList from 'components/common/ResourceList';
 import {
   ADD_DESC_TEXT,
@@ -38,6 +38,8 @@ import { getSourceDisplayName, getSourceIconClass } from 'config/config-utils';
 
 import { getLoggingParams } from 'utils/logUtils';
 
+import { NO_TIMESTAMP_TEXT } from 'components/constants';
+
 import './styles.scss';
 
 export interface RouteProps {
@@ -259,15 +261,23 @@ export class DashboardPage extends React.Component<DashboardPageProps, Dashboard
                 </EditableSection>
                 <section className="metadata-section">
                   <div className="section-title title-3">Last Successful Run</div>
-                  <div className="body-2 text-primary">
-                    { formatDateTimeShort({ epochTimestamp: dashboard.last_successful_run_timestamp }) }
+                  <div className="last-successful-run-timestamp body-2 text-primary">
+                    {
+                      dashboard.last_successful_run_timestamp ?
+                      formatDateTimeShort({ epochTimestamp: dashboard.last_successful_run_timestamp }) :
+                      NO_TIMESTAMP_TEXT
+                    }
                   </div>
                 </section>
                 <section className="metadata-section">
                   <div className="section-title title-3">Last Run</div>
                   <div>
-                    <div className="body-2 text-primary">
-                      { formatDateTimeShort({ epochTimestamp: dashboard.last_run_timestamp }) }
+                    <div className="last-run-timestamp body-2 text-primary">
+                      {
+                        dashboard.last_run_timestamp ?
+                        formatDateTimeShort({ epochTimestamp: dashboard.last_run_timestamp }) :
+                        NO_TIMESTAMP_TEXT
+                      }
                     </div>
                     <div className="last-run-state">
                       <Flag

amundsen_application/static/js/components/TableDetail/OwnerEditor/styles.scss

@@ -9,7 +9,6 @@
       margin-left: 4px;
       width: calc(100% - 28px);
       word-break: break-word;
-      color: $text-primary;
     }
   }
 

amundsen_application/static/js/components/common/ResourceListItem/DashboardListItem/index.spec.tsx

@@ -15,6 +15,8 @@ const MOCK_DISPLAY_NAME = 'displayName';
 const MOCK_ICON_CLASS = 'test-class';
 const MOCK_DATE = 'Jan 1, 2000';
 
+import { NO_TIMESTAMP_TEXT } from 'components/constants';
+
 import { dashboardSummary } from 'fixtures/metadata/dashboard';
 
 jest.mock('config/config-utils', () => (
@@ -120,7 +122,7 @@ describe('DashboardListItem', () => {
       });
 
       describe('for successful run timestamp', () => {
-        it('does not render timestamp if it doesnt exist', () => {
+        it('renders default text if it doesnt exist', () => {
           const { props, wrapper } = setup({ dashboard: {
             group_name: 'Amundsen Team',
             group_url: 'product/group',
@@ -133,7 +135,8 @@ describe('DashboardListItem', () => {
             cluster: 'cluster',
             last_successful_run_timestamp: null
           }});
-          expect(wrapper.find('.resource-badges').children()).toHaveLength(1);
+          expect(wrapper.find('.resource-badges').find('.title-3').text()).toBe(Constants.LAST_RUN_TITLE);
+          expect(wrapper.find('.resource-badges').find('.body-secondary-3').text()).toBe(NO_TIMESTAMP_TEXT);
         });
 
         it('renders if timestamp exists', () => {

amundsen_application/static/js/components/common/ResourceListItem/DashboardListItem/index.tsx

@@ -13,6 +13,7 @@ import { ResourceType, DashboardResource } from 'interfaces';
 import { formatDate } from 'utils/dateUtils';
 
 import * as Constants from './constants';
+import { NO_TIMESTAMP_TEXT } from 'components/constants';
 
 export interface DashboardListItemProps {
   dashboard: DashboardResource;
@@ -53,15 +54,16 @@ class DashboardListItem extends React.Component<DashboardListItemProps, {}> {
             { getSourceDisplayName(dashboard.product, dashboard.type) }
           </div>
           <div className="resource-badges">
-            {
-               dashboard.last_successful_run_timestamp &&
-               <div>
-                 <div className="title-3">{ Constants.LAST_RUN_TITLE }</div>
-                 <div className="body-secondary-3">
-                   { formatDate({ epochTimestamp: dashboard.last_successful_run_timestamp }) }
-                 </div>
+            <div>
+               <div className="title-3">{ Constants.LAST_RUN_TITLE }</div>
+               <div className="body-secondary-3">
+                 {
+                   dashboard.last_successful_run_timestamp ?
+                   formatDate({ epochTimestamp: dashboard.last_successful_run_timestamp }) :
+                   NO_TIMESTAMP_TEXT
+                 }
                </div>
-             }
+            </div>
             <img className="icon icon-right" />
           </div>
         </Link>

amundsen_application/static/js/components/constants.ts

+/* This file should contain any constants shared across multiple components */
+export const NO_TIMESTAMP_TEXT = 'No timestamp available';