chore: Updating frontend dependencies (#751)

Signed-off-by: Marcos Iglesias Valle <golodhros@gmail.com>

amundsen_application/static/.betterer.results

@@ -39,7 +39,7 @@ exports[`strict null compilation`] = {
     "js/components/common/EditableSection/index.tsx:3911151831": [
       [130, 12, 7, "Type \'((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | null\' is not assignable to type \'((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined\'.\\n  Type \'null\' is not assignable to type \'((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined\'.", "4055953994"]
     ],
-    "js/components/common/EditableText/index.tsx:3360221846": [
+    "js/components/common/EditableText/index.tsx:4277986546": [
       [55, 4, 13, "Type \'null\' is not assignable to type \'(newValue: string, onSuccess?: (() => any) | undefined, onFailure?: (() => any) | undefined) => void\'.", "67794331"],
       [56, 4, 14, "Type \'null\' is not assignable to type \'((onSuccess?: (() => any) | undefined, onFailure?: (() => any) | undefined) => void) | undefined\'.", "608289123"],
       [92, 4, 22, "Cannot invoke an object which is possibly \'undefined\'.", "2225424112"],
@@ -56,17 +56,12 @@ exports[`strict null compilation`] = {
       [21, 6, 9, "Type \'null\' is not assignable to type \'boolean | undefined\'.", "1517648899"],
       [24, 6, 8, "Type \'null\' is not assignable to type \'boolean | undefined\'.", "2673870115"]
     ],
-    "js/components/common/OwnerEditor/index.tsx:3127875743": [
-      [92, 4, 22, "Cannot invoke an object which is possibly \'undefined\'.", "2225424112"],
-      [97, 4, 22, "Cannot invoke an object which is possibly \'undefined\'.", "2225424112"],
-      [104, 27, 6, "Type \'UpdateMethod.DELETE\' is not assignable to type \'never\'.", "1469012122"],
-      [104, 56, 2, "Type \'string\' is not assignable to type \'never\'.", "5861160"],
-      [109, 27, 6, "Type \'UpdateMethod.PUT\' is not assignable to type \'never\'.", "1469012122"],
-      [109, 53, 2, "Type \'string\' is not assignable to type \'never\'.", "5861160"],
-      [114, 6, 22, "Cannot invoke an object which is possibly \'undefined\'.", "2225424112"],
-      [120, 6, 22, "Cannot invoke an object which is possibly \'undefined\'.", "2225424112"],
-      [127, 12, 5, "Property \'value\' does not exist on type \'HTMLInputElement | null\'.", "189936718"],
-      [129, 6, 21, "Object is possibly \'null\'.", "2411403565"]
+    "js/components/common/OwnerEditor/index.tsx:487917110": [
+      [119, 27, 6, "Type \'import(\\"./js/interfaces/Enums\\").UpdateMethod\' is not assignable to type \'never\'.", "1469012122"],
+      [119, 56, 2, "Type \'string\' is not assignable to type \'never\'.", "5861160"],
+      [124, 27, 6, "Type \'import(\\"./js/interfaces/Enums\\").UpdateMethod\' is not assignable to type \'never\'.", "1469012122"],
+      [124, 53, 2, "Type \'string\' is not assignable to type \'never\'.", "5861160"],
+      [147, 12, 5, "Property \'value\' does not exist on type \'HTMLInputElement | null\'.", "189936718"]
     ],
     "js/components/common/ResourceListItem/DashboardListItem/index.spec.tsx:53357032": [
       [163, 14, 29, "Type \'null\' is not assignable to type \'number\'.", "1157138603"]
@@ -100,9 +95,9 @@ exports[`strict null compilation`] = {
       [63, 22, 6, "Type \'undefined\' is not assignable to type \'GetAllTagsRequest\'.", "1979467425"],
       [66, 4, 4, "Type \'undefined\' is not assignable to type \'Tag[]\'.", "2087952548"],
       [67, 22, 6, "Type \'undefined\' is not assignable to type \'UpdateTagsRequest\'.", "1979467425"],
-      [100, 31, 10, "Type \'UpdateMethod.DELETE\' is not assignable to type \'never\'.", "3392756765"],
+      [100, 31, 10, "Type \'import(\\"./js/interfaces/Enums\\").UpdateMethod\' is not assignable to type \'never\'.", "3392756765"],
       [100, 64, 7, "Type \'string\' is not assignable to type \'never\'.", "1671693616"],
-      [102, 31, 10, "Type \'UpdateMethod.PUT\' is not assignable to type \'never\'.", "3392756765"],
+      [102, 31, 10, "Type \'import(\\"./js/interfaces/Enums\\").UpdateMethod\' is not assignable to type \'never\'.", "3392756765"],
       [102, 61, 7, "Type \'string\' is not assignable to type \'never\'.", "1671693616"]
     ],
     "js/components/common/Tags/TagsList/index.tsx:4084208491": [
@@ -145,8 +140,6 @@ exports[`strict null compilation`] = {
     ],
     "js/ducks/dashboard/reducer.ts:562296055": [
       [49, 2, 17, "Type \'null\' is not assignable to type \'number\'.", "2818833716"],
-      [55, 2, 18, "Type \'null\' is not assignable to type \'number\'.", "2901767208"],
-      [56, 2, 29, "Type \'null\' is not assignable to type \'number\'.", "1157138603"],
       [61, 2, 17, "Type \'null\' is not assignable to type \'number\'.", "3048879712"],
       [64, 2, 17, "Type \'null\' is not assignable to type \'number\'.", "1885086497"],
       [71, 2, 10, "Type \'null\' is not assignable to type \'number\'.", "3382497788"],
@@ -253,10 +246,8 @@ exports[`strict null compilation`] = {
     "js/pages/DashboardPage/DashboardOwnerEditor/index.spec.tsx:4125678807": [
       [29, 19, 11, "Type \'{ manager_id: null; manager_fullname: null; manager_email: null; profile_url: string; role_name: null; display_name: null; github_username: null; team_name: null; last_name: null; full_name: null; ... 6 more ...; user_id: string; }\' is not assignable to type \'User\'.\\n  Types of property \'display_name\' are incompatible.\\n    Type \'null\' is not assignable to type \'string\'.", "2041815528"]
     ],
-    "js/pages/DashboardPage/index.spec.tsx:3245519479": [
-      [53, 4, 8, "Argument of type \'Partial<Location<{} | null | undefined>> | undefined\' is not assignable to parameter of type \'Partial<Location<{} | null | undefined>>\'.\\n  Type \'undefined\' is not assignable to type \'Partial<Location<{} | null | undefined>>\'.", "2700611480"],
-      [213, 10, 18, "Type \'null\' is not assignable to type \'number\'.", "2901767208"],
-      [214, 10, 29, "Type \'null\' is not assignable to type \'number\'.", "1157138603"]
+    "js/pages/DashboardPage/index.spec.tsx:3811826221": [
+      [53, 4, 8, "Argument of type \'Partial<Location<{} | null | undefined>> | undefined\' is not assignable to parameter of type \'Partial<Location<{} | null | undefined>>\'.\\n  Type \'undefined\' is not assignable to type \'Partial<Location<{} | null | undefined>>\'.", "2700611480"]
     ],
     "js/pages/ProfilePage/index.spec.tsx:4086464143": [
       [41, 6, 4, "Argument of type \'null\' is not assignable to parameter of type \'Partial<Location<{} | null | undefined>>\'.", "2087897566"]

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

@@ -105,7 +105,7 @@ describe('EditableText', () => {
 
   describe('render', () => {
     describe('not in edit mode', () => {
-      const { props, wrapper } = setup({
+      const { wrapper } = setup({
         isEditing: false,
         value: '',
       });
@@ -114,9 +114,6 @@ describe('EditableText', () => {
       it('renders a ReactMarkdown component', () => {
         const markdown = wrapper.find(ReactMarkdown);
         expect(markdown.exists()).toBe(true);
-        expect(markdown.props()).toMatchObject({
-          source: wrapper.state().value,
-        });
       });
 
       it('renders an edit link if it is editable and the text is empty', () => {

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

@@ -120,13 +120,16 @@ class EditableText extends React.Component<
   };
 
   render() {
-    if (!this.props.isEditing) {
+    const { isEditing, editable, maxLength } = this.props;
+    const { value = '', isDisabled } = this.state;
+
+    if (!isEditing) {
       return (
         <div className="editable-text">
           <div className="markdown-wrapper">
-            <ReactMarkdown source={this.state.value} escapeHtml={false} />
+            <ReactMarkdown allowDangerousHtml={false}>{value}</ReactMarkdown>
           </div>
-          {this.props.editable && !this.state.value && (
+          {editable && !value && (
             <a
               className="edit-link"
               href="JavaScript:void(0)"
@@ -144,13 +147,13 @@ class EditableText extends React.Component<
         <textarea
           className="editable-textarea"
           rows={2}
-          maxLength={this.props.maxLength}
+          maxLength={maxLength}
           ref={this.textAreaRef}
-          defaultValue={this.state.value}
-          disabled={this.state.isDisabled}
+          defaultValue={value}
+          disabled={isDisabled}
         />
         <div className="editable-textarea-controls">
-          {this.state.isDisabled && (
+          {isDisabled && (
             <>
               <h2 className="label label-danger refresh-message">
                 {REFRESH_MESSAGE}
@@ -158,16 +161,18 @@ class EditableText extends React.Component<
               <button
                 className="btn btn-primary refresh-button"
                 onClick={this.refreshText}
+                type="button"
               >
                 <img className="icon icon-refresh" alt="" />
                 {REFRESH_BUTTON_TEXT}
               </button>
             </>
           )}
-          {!this.state.isDisabled && (
+          {!isDisabled && (
             <button
               className="btn btn-primary update-button"
               onClick={this.updateText}
+              type="button"
             >
               {UPDATE_BUTTON_TEXT}
             </button>
@@ -175,6 +180,7 @@ class EditableText extends React.Component<
           <button
             className="btn btn-default cancel-button"
             onClick={this.exitEditMode}
+            type="button"
           >
             {CANCEL_BUTTON_TEXT}
           </button>

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

@@ -80,54 +80,76 @@ export class OwnerEditor extends React.Component<
   }
 
   componentDidUpdate(prevProps) {
+    const { itemProps } = this.props;
+
     // TODO - itemProps is a new object and this check needs to be fixed
-    if (prevProps.itemProps !== this.props.itemProps) {
+    if (prevProps.itemProps !== itemProps) {
       this.setState({
-        itemProps: this.props.itemProps,
-        tempItemProps: this.props.itemProps,
+        itemProps,
+        tempItemProps: itemProps,
       });
     }
   }
 
   handleShow = () => {
-    this.props.setEditMode(true);
+    const { setEditMode } = this.props;
+
+    if (setEditMode) {
+      setEditMode(true);
+    }
   };
 
   cancelEdit = () => {
-    this.setState({ tempItemProps: this.state.itemProps });
-    this.props.setEditMode(false);
+    const { setEditMode } = this.props;
+    const { itemProps } = this.state;
+
+    this.setState({ tempItemProps: itemProps });
+    if (setEditMode) {
+      setEditMode(false);
+    }
   };
 
   saveEdit = () => {
+    const { itemProps, tempItemProps } = this.state;
+    const { setEditMode, onUpdateList } = this.props;
+
     const updateArray = [];
-    Object.keys(this.state.itemProps).forEach((key) => {
-      if (!this.state.tempItemProps.hasOwnProperty(key)) {
+
+    Object.keys(itemProps).forEach((key) => {
+      if (!tempItemProps.hasOwnProperty(key)) {
         updateArray.push({ method: UpdateMethod.DELETE, id: key });
       }
     });
-    Object.keys(this.state.tempItemProps).forEach((key) => {
-      if (!this.state.itemProps.hasOwnProperty(key)) {
+    Object.keys(tempItemProps).forEach((key) => {
+      if (!itemProps.hasOwnProperty(key)) {
         updateArray.push({ method: UpdateMethod.PUT, id: key });
       }
     });
 
     const onSuccessCallback = () => {
-      this.props.setEditMode(false);
+      if (setEditMode) {
+        setEditMode(false);
+      }
     };
     const onFailureCallback = () => {
       this.setState({
         errorText: Constants.DEFAULT_ERROR_TEXT,
       });
-      this.props.setEditMode(false);
+      if (setEditMode) {
+        setEditMode(false);
+      }
     };
-    this.props.onUpdateList(updateArray, onSuccessCallback, onFailureCallback);
+
+    onUpdateList(updateArray, onSuccessCallback, onFailureCallback);
   };
 
   recordAddItem = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     const { value } = this.inputRef.current;
-    if (value) {
+
+    if (this.inputRef.current && value) {
       this.inputRef.current.value = '';
+
       const newTempItemProps = {
         ...this.state.tempItemProps,
         [value]: { label: value },
@@ -137,23 +159,27 @@ export class OwnerEditor extends React.Component<
   };
 
   recordDeleteItem = (deletedKey: string) => {
-    const newTempItemProps = Object.keys(this.state.tempItemProps)
+    const { tempItemProps } = this.state;
+
+    const newTempItemProps = Object.keys(tempItemProps)
       .filter((key) => {
         return key !== deletedKey;
       })
       .reduce((obj, key) => {
-        obj[key] = this.state.tempItemProps[key];
+        obj[key] = tempItemProps[key];
         return obj;
       }, {});
     this.setState({ tempItemProps: newTempItemProps });
   };
 
   renderModalBody = () => {
-    if (!this.props.isEditing) {
+    const { isEditing, isLoading } = this.props;
+
+    if (!isEditing) {
       return null;
     }
 
-    if (this.props.isLoading) {
+    if (isLoading) {
       return (
         <Modal.Body>
           <LoadingSpinner />
@@ -191,6 +217,7 @@ export class OwnerEditor extends React.Component<
                   /* tslint:disable - TODO: Investigate jsx-no-lambda rule */
                   onClick={() => this.recordDeleteItem(key)}
                   /* tslint:enable */
+                  type="button"
                 >
                   <span className="sr-only">{Constants.DELETE_ITEM}</span>
                   <img className="icon icon-delete" alt="" />
@@ -205,20 +232,21 @@ export class OwnerEditor extends React.Component<
 
   render() {
     const { isEditing, readOnly, resourceType } = this.props;
-    const hasItems = Object.keys(this.state.itemProps).length > 0;
+    const { errorText, itemProps } = this.state;
+    const hasItems = Object.keys(itemProps).length > 0;
 
-    if (this.state.errorText) {
+    if (errorText) {
       return (
         <div className="owner-editor-component">
-          <label className="status-message">{this.state.errorText}</label>
+          <label className="status-message">{errorText}</label>
         </div>
       );
     }
 
     const ownerList = hasItems ? (
       <ul className="component-list">
-        {Object.keys(this.state.itemProps).map((key) => {
-          const owner = this.state.itemProps[key];
+        {Object.keys(itemProps).map((key) => {
+          const owner = itemProps[key];
           const avatarLabel = React.createElement(AvatarLabel, owner);
 
           let listItem;

amundsen_application/static/js/interfaces/Dashboard.ts

@@ -14,8 +14,8 @@ export interface DashboardMetadata {
   group_name: string;
   group_url: string;
   last_run_state: string;
-  last_run_timestamp: number;
-  last_successful_run_timestamp: number;
+  last_run_timestamp: number | null;
+  last_successful_run_timestamp: number | null;
   name: string;
   owners: User[];
   product: string;

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

@@ -168,9 +168,6 @@ describe('DashboardPage', () => {
       it('using a ReactMarkdown component', () => {
         const markdown = wrapper.find(ReactMarkdown);
         expect(markdown.exists()).toBe(true);
-        expect(markdown.props()).toMatchObject({
-          source: props.dashboard.description,
-        });
       });
 
       it('with link to add description if none exists', () => {

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

@@ -240,7 +240,7 @@ export class DashboardPage extends React.Component<
             >
               {hasDescription && (
                 <div className="markdown-wrapper">
-                  <ReactMarkdown source={dashboard.description} />
+                  <ReactMarkdown>{dashboard.description}</ReactMarkdown>
                 </div>
               )}
               {!hasDescription && (

amundsen_application/static/js/utils/dateUtils.ts

@@ -19,7 +19,7 @@ interface StringDateConfig {
 type DateConfig = TimestampDateConfig | EpochDateConfig | StringDateConfig;
 
 // This function is only exported for testing
-export function getMomentDate(config: DateConfig): Moment {
+export function getMomentDate(config: DateConfig): Moment.Moment {
   let moment;
   const { timestamp } = config as TimestampDateConfig;
   const epoch = (config as EpochDateConfig).epochTimestamp;

amundsen_application/static/package.json

@@ -119,7 +119,7 @@
     "ts-node": "^9.0.0",
     "tsconfig-paths": "^3.9.0",
     "tslint": "^6.1.3",
-    "typescript": "^3.9.2",
+    "typescript": "^4.0.5",
     "webpack": "^4.44.1",
     "webpack-bundle-analyzer": "^3.8.0",
     "webpack-cli": "^3.3.11",
@@ -133,7 +133,7 @@
     "core-js": "^3.6.5",
     "form-serialize": "^0.7.2",
     "jquery": "^3.5.0",
-    "moment-timezone": "^0.5.28",
+    "moment-timezone": "^0.5.31",
     "react": "^16.13.1",
     "react-avatar": "^2.5.1",
     "react-bootstrap": "^0.32.4",
@@ -142,7 +142,7 @@
     "react-dom": "^16.13.1",
     "react-js-pagination": "^3.0.3",
     "react-linkify": "^0.2.2",
-    "react-markdown": "^4.3.1",
+    "react-markdown": "^5.0.2",
     "react-redux": "^5.1.0",
     "react-router-dom": "^4.3.1",
     "react-sanitized-html": "^2.0.0",