fix: added Status text to last run status line for dashboard (#603)

* added Status text to Las Run status line
Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com>

* lint
Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com>

* added Status: to constants
Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com>

* lint again, pre-commit hooks not working again...
Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com>

amundsen_application/static/js/components/DashboardPage/constants.ts

@@ -7,3 +7,4 @@ export const ADD_DESC_TEXT = 'Add Description in';
 export const EDIT_DESC_TEXT = 'Click to edit description in';
 
 export const LAST_RUN_SUCCEEDED = 'succeeded';
+export const STATUS_TEXT = 'Status:';

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

@@ -34,6 +34,7 @@ import {
   DASHBOARD_SOURCE,
   TABLES_PER_PAGE,
   LAST_RUN_SUCCEEDED,
+  STATUS_TEXT,
 } from 'components/DashboardPage/constants';
 import TagInput from 'components/common/Tags/TagInput';
 import { ResourceType } from 'interfaces';
@@ -304,6 +305,7 @@ export class DashboardPage extends React.Component<
                         : NO_TIMESTAMP_TEXT}
                     </time>
                     <div className="last-run-state">
+                      <span className="status">{STATUS_TEXT}</span>
                       <ResourceStatusMarker
                         stateText={dashboard.last_run_state}
                         succeeded={this.mapStatusToBoolean(

amundsen_application/static/js/components/DashboardPage/styles.scss

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 @import 'variables';
+@import 'typography-default';
 
 .dashboard-page {
   .header-section {
@@ -15,8 +16,12 @@
   }
 
   .last-run-state {
-    .flag {
-      margin: $spacer-1 0 0 0;
+    margin-top: $spacer-1;
+    .status {
+      @extend %text-body-w2;
+  
+      display: inline-block;
+      vertical-align: middle;
     }
   }
 

amundsen_application/static/js/components/common/ResourceStatusMarker/styles.scss

@@ -18,6 +18,12 @@ $icon-size: 14px;
   vertical-align: middle;
 }
 
+.failure,
+.success {
+  display: inline-block;
+  margin-left: $spacer-1;
+}
+
 .failure-icon {
   background-color: $icon-status-missed;