Fix Data Preview Showing Wrong Data (#348)

* Table Preview API uses 'takeLatest' instead of 'takeEvery' to ignore outdated requests

* Blocks the table-details from rendering until new data is fetched.
This prevents the subcomponents from rendering briefly in between
page loads, causing the preview button from requesting more data

* Renamed `didInitialLoad` to `didComponentMount`

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

@@ -54,6 +54,7 @@ class TableDetail extends React.Component<TableDetailProps & RouteComponentProps
   private key: string;
   private schema: string;
   private tableName: string;
+  private didComponentMount: boolean = false;
 
   constructor(props) {
     super(props);
@@ -86,11 +87,13 @@ class TableDetail extends React.Component<TableDetailProps & RouteComponentProps
     }
 
     this.props.getTableData(this.key, searchIndex, source);
+    this.didComponentMount = true;
   }
 
   render() {
     let innerContent;
-    if (this.props.isLoading) {
+    // We want to avoid rendering the previous table's metadata before new data is fetched in componentDidMount
+    if (this.props.isLoading || !this.didComponentMount) {
       innerContent = <LoadingSpinner/>;
     } else if (this.props.statusCode === 500) {
       innerContent = (

amundsen_application/static/js/ducks/tableMetadata/sagas.ts

 import { SagaIterator } from 'redux-saga';
-import { all, call, put, select, takeEvery } from 'redux-saga/effects';
+import { call, put, select, takeEvery, takeLatest } from 'redux-saga/effects';
 
 import * as API from './api/v0';
 
@@ -135,5 +135,5 @@ export function* getPreviewDataWorker(action: GetPreviewDataRequest): SagaIterat
   }
 };
 export function* getPreviewDataWatcher(): SagaIterator {
-  yield takeEvery(GetPreviewData.REQUEST, getPreviewDataWorker);
+  yield takeLatest(GetPreviewData.REQUEST, getPreviewDataWorker);
 };

amundsen_application/static/js/ducks/tableMetadata/tests/index.spec.ts

@@ -570,7 +570,7 @@ describe('reducer', () => {
     describe('getPreviewDataWatcher', () => {
       it('takes every GetPreviewData.REQUEST with getPreviewDataWorker', () => {
         testSaga(getPreviewDataWatcher)
-          .next().takeEvery(GetPreviewData.REQUEST, getPreviewDataWorker)
+          .next().takeLatest(GetPreviewData.REQUEST, getPreviewDataWorker)
           .next().isDone();
       });
     });