fix: DashboardPage Flag usage; Markdown to render HTML (#535)

* Allow markdown descriptions to display html

* Fix Flag usage on DashboardPage; Lint

* Code cleanup

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

@@ -18,6 +18,7 @@ import { dashboardMetadata } from 'fixtures/metadata/dashboard';
 import { NO_TIMESTAMP_TEXT } from 'components/constants';
 import * as LogUtils from 'utils/logUtils';
 import { ResourceType } from 'interfaces';
+import { BadgeStyle } from 'config/config-types';
 import ChartList from './ChartList';
 import ImagePreview from './ImagePreview';
 
@@ -146,15 +147,15 @@ describe('DashboardPage', () => {
       ({ wrapper } = setup());
     });
 
-    it('returns success if status === LAST_RUN_SUCCEEDED', () => {
+    it('returns BadgeStyle.SUCCESS if status === LAST_RUN_SUCCEEDED', () => {
       expect(
         wrapper.instance().mapStatusToStyle(Constants.LAST_RUN_SUCCEEDED)
-      ).toBe('success');
+      ).toBe(BadgeStyle.SUCCESS);
     });
 
-    it('returns danger if status !== LAST_RUN_SUCCEEDED', () => {
+    it('returns BadgeStyle.DANGER if status !== LAST_RUN_SUCCEEDED', () => {
       expect(wrapper.instance().mapStatusToStyle('anythingelse')).toBe(
-        'danger'
+        BadgeStyle.DANGER
       );
     });
   });
@@ -226,9 +227,10 @@ describe('DashboardPage', () => {
     });
 
     it('renders a Flag for last run state', () => {
+      const mockStyle = BadgeStyle.DANGER;
       const mapStatusToStyleSpy = jest
         .spyOn(wrapper.instance(), 'mapStatusToStyle')
-        .mockImplementationOnce(() => 'testStyle');
+        .mockImplementationOnce(() => mockStyle);
       wrapper.instance().forceUpdate();
       const element = wrapper.find('.last-run-state').find(Flag);
 
@@ -236,7 +238,7 @@ describe('DashboardPage', () => {
       expect(mapStatusToStyleSpy).toHaveBeenCalledWith(
         props.dashboard.last_run_state
       );
-      expect(element.props().labelStyle).toBe('testStyle');
+      expect(element.props().labelStyle).toBe(mockStyle);
     });
 
     it('renders an ImagePreview with correct props', () => {

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

@@ -39,6 +39,7 @@ import TagInput from 'components/Tags/TagInput';
 import { ResourceType } from 'interfaces';
 
 import { getSourceDisplayName, getSourceIconClass } from 'config/config-utils';
+import { BadgeStyle } from 'config/config-types';
 
 import { getLoggingParams } from 'utils/logUtils';
 
@@ -47,9 +48,6 @@ import ImagePreview from './ImagePreview';
 
 import './styles.scss';
 
-const STATUS_SUCCESS = 'success';
-const STATUS_DANGER = 'danger';
-
 interface DashboardPageState {
   uri: string;
 }
@@ -105,11 +103,11 @@ export class DashboardPage extends React.Component<
     }
   }
 
-  mapStatusToStyle = (status: string): string => {
+  mapStatusToStyle = (status: string): BadgeStyle => {
     if (status === LAST_RUN_SUCCEEDED) {
-      return STATUS_SUCCESS;
+      return BadgeStyle.SUCCESS;
     }
-    return STATUS_DANGER;
+    return BadgeStyle.DANGER;
   };
 
   renderTabs() {

amundsen_application/static/js/components/common/EditableText/index.tsx

@@ -124,7 +124,7 @@ class EditableText extends React.Component<
       return (
         <div className="editable-text">
           <div className="markdown-wrapper">
-            <ReactMarkdown source={this.state.value} />
+            <ReactMarkdown source={this.state.value} escapeHtml={false} />
           </div>
           {this.props.editable && !this.state.value && (
             <a

amundsen_application/static/js/components/common/Flag/index.spec.tsx

@@ -5,8 +5,8 @@ import * as React from 'react';
 
 import { shallow } from 'enzyme';
 
-import Flag, { CaseType, FlagProps, convertText } from '.';
 import { BadgeStyle } from 'config/config-types';
+import Flag, { CaseType, FlagProps, convertText } from '.';
 
 describe('Flag', () => {
   let props: FlagProps;

amundsen_application/static/js/components/common/Flag/index.tsx

@@ -16,7 +16,7 @@ export enum CaseType {
 export interface FlagProps {
   caseType?: string | null;
   text: string;
-  labelStyle?: string;
+  labelStyle?: BadgeStyle;
 }
 
 export function convertText(str: string, caseType: string): string {

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

@@ -10,9 +10,8 @@ import Flag from 'components/common/Flag';
 import { Link } from 'react-router-dom';
 
 import { ResourceType } from 'interfaces';
-import UserListItem, { UserListItemProps } from '.';
-
 import { BadgeStyle } from 'config/config-types';
+import UserListItem, { UserListItemProps } from '.';
 
 describe('UserListItem', () => {
   const setup = (propOverrides?: Partial<UserListItemProps>) => {