diff --git a/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/bottom_bar/bottom_bar.js b/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/bottom_bar/bottom_bar.js
deleted file mode 100644
index 75736d44219ca..0000000000000
--- a/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/bottom_bar/bottom_bar.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-
-import { FormattedMessage } from '@kbn/i18n/react';
-import React from 'react';
-
-import {
-  EuiButton,
-  EuiButtonEmpty,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiBottomBar,
-} from '@elastic/eui';
-
-import { MODE as DATAVISUALIZER_MODE } from '../file_datavisualizer_view';
-
-export function BottomBar({ showBar, mode, changeMode, onCancel, disableImport }) {
-  if (showBar) {
-    if (mode === DATAVISUALIZER_MODE.READ) {
-      return (
-        <EuiBottomBar >
-          <EuiFlexGroup >
-            <EuiFlexItem grow={false}>
-              <EuiButton
-                fill
-                isDisabled={(disableImport === true)}
-                onClick={() => changeMode(DATAVISUALIZER_MODE.IMPORT)}
-              >
-                <FormattedMessage
-                  id="xpack.ml.fileDatavisualizer.bottomBar.readMode.importButtonLabel"
-                  defaultMessage="Import"
-                />
-              </EuiButton>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                color="ghost"
-                onClick={() => onCancel()}
-              >
-                <FormattedMessage
-                  id="xpack.ml.fileDatavisualizer.bottomBar.readMode.cancelButtonLabel"
-                  defaultMessage="Cancel"
-                />
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-
-        </EuiBottomBar>
-      );
-    } else {
-      return (
-        <EuiBottomBar >
-          <EuiFlexGroup >
-            <EuiFlexItem grow={false}>
-              <EuiButton
-                color="ghost"
-                onClick={() => changeMode(DATAVISUALIZER_MODE.READ)}
-              >
-                <FormattedMessage
-                  id="xpack.ml.fileDatavisualizer.bottomBar.backButtonLabel"
-                  defaultMessage="Back"
-                />
-              </EuiButton>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                color="ghost"
-                onClick={() => onCancel()}
-              >
-                <FormattedMessage
-                  id="xpack.ml.fileDatavisualizer.bottomBar.cancelButtonLabel"
-                  defaultMessage="Cancel"
-                />
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiBottomBar>
-      );
-    }
-  }
-  return null;
-}
diff --git a/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/bottom_bar/bottom_bar.tsx b/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/bottom_bar/bottom_bar.tsx
new file mode 100644
index 0000000000000..72e4f88062789
--- /dev/null
+++ b/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/bottom_bar/bottom_bar.tsx
@@ -0,0 +1,94 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FC } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import {
+  EuiBottomBar,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiToolTip,
+} from '@elastic/eui';
+
+import { MODE as DATAVISUALIZER_MODE } from '../file_datavisualizer_view/constants';
+
+interface BottomBarProps {
+  mode: DATAVISUALIZER_MODE;
+  onChangeMode: (mode: DATAVISUALIZER_MODE) => void;
+  onCancel: () => void;
+  disableImport?: boolean;
+}
+
+/**
+ * Bottom bar component for Data Visualizer page.
+ */
+export const BottomBar: FC<BottomBarProps> = ({ mode, onChangeMode, onCancel, disableImport }) => {
+  if (mode === DATAVISUALIZER_MODE.READ) {
+    return (
+      <EuiBottomBar>
+        <EuiFlexGroup>
+          <EuiFlexItem grow={false}>
+            <EuiToolTip
+              position="top"
+              content={
+                disableImport ? (
+                  <FormattedMessage
+                    id="xpack.ml.fileDatavisualizer.bottomBar.missingImportPrivilegesMessage"
+                    defaultMessage="You don't have the privileges required to import data"
+                  />
+                ) : null
+              }
+            >
+              <EuiButton
+                fill
+                isDisabled={disableImport}
+                onClick={() => onChangeMode(DATAVISUALIZER_MODE.IMPORT)}
+              >
+                <FormattedMessage
+                  id="xpack.ml.fileDatavisualizer.bottomBar.readMode.importButtonLabel"
+                  defaultMessage="Import"
+                />
+              </EuiButton>
+            </EuiToolTip>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty color="ghost" onClick={() => onCancel()}>
+              <FormattedMessage
+                id="xpack.ml.fileDatavisualizer.bottomBar.readMode.cancelButtonLabel"
+                defaultMessage="Cancel"
+              />
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiBottomBar>
+    );
+  } else {
+    return (
+      <EuiBottomBar>
+        <EuiFlexGroup>
+          <EuiFlexItem grow={false}>
+            <EuiButton color="ghost" onClick={() => onChangeMode(DATAVISUALIZER_MODE.READ)}>
+              <FormattedMessage
+                id="xpack.ml.fileDatavisualizer.bottomBar.backButtonLabel"
+                defaultMessage="Back"
+              />
+            </EuiButton>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty color="ghost" onClick={() => onCancel()}>
+              <FormattedMessage
+                id="xpack.ml.fileDatavisualizer.bottomBar.cancelButtonLabel"
+                defaultMessage="Cancel"
+              />
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiBottomBar>
+    );
+  }
+};
diff --git a/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/bottom_bar/index.js b/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/bottom_bar/index.ts
similarity index 99%
rename from x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/bottom_bar/index.js
rename to x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/bottom_bar/index.ts
index 236a5aa577f28..24202d7c746b8 100644
--- a/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/bottom_bar/index.js
+++ b/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/bottom_bar/index.ts
@@ -4,5 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-
 export { BottomBar } from './bottom_bar';
diff --git a/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/file_datavisualizer_view/constants.ts b/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/file_datavisualizer_view/constants.ts
new file mode 100644
index 0000000000000..7c463d58c607c
--- /dev/null
+++ b/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/file_datavisualizer_view/constants.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+/**
+ *  File data visualizer modes.
+ */
+export enum MODE {
+  READ,
+  IMPORT,
+}
diff --git a/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/file_datavisualizer_view/file_datavisualizer_view.js b/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/file_datavisualizer_view/file_datavisualizer_view.js
index fee0c423f023d..94e9c2c2ac584 100644
--- a/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/file_datavisualizer_view/file_datavisualizer_view.js
+++ b/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/file_datavisualizer_view/file_datavisualizer_view.js
@@ -31,11 +31,7 @@ import {
   reduceData,
   hasImportPermission,
 } from '../utils';
-
-export const MODE = {
-  READ: 0,
-  IMPORT: 1,
-};
+import { MODE } from './constants';
 
 const UPLOAD_SIZE_MB = 5;
 
@@ -306,13 +302,12 @@ export class FileDataVisualizerView extends Component {
               fields={fields}
             />
 
-            <BottomBar
-              showBar={(bottomBarVisible && loaded)}
+            {(bottomBarVisible && loaded) && <BottomBar
               mode={MODE.READ}
-              changeMode={this.changeMode}
+              onChangeMode={this.changeMode}
               onCancel={this.onCancel}
               disableImport={(hasPermissionToImport === false)}
-            />
+            />}
 
             <BottomPadding />
           </React.Fragment>
@@ -329,12 +324,11 @@ export class FileDataVisualizerView extends Component {
               hideBottomBar={this.hideBottomBar}
             />
 
-            <BottomBar
-              showBar={bottomBarVisible}
+            {bottomBarVisible && <BottomBar
               mode={MODE.IMPORT}
-              changeMode={this.changeMode}
+              onChangeMode={this.changeMode}
               onCancel={this.onCancel}
-            />
+            />}
 
             <BottomPadding />
           </React.Fragment>
diff --git a/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/file_datavisualizer_view/index.js b/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/file_datavisualizer_view/index.js
index 5721b35045434..cc9714d2b4c45 100644
--- a/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/file_datavisualizer_view/index.js
+++ b/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/file_datavisualizer_view/index.js
@@ -5,4 +5,4 @@
  */
 
 
-export { FileDataVisualizerView, MODE } from './file_datavisualizer_view';
+export { FileDataVisualizerView } from './file_datavisualizer_view';
diff --git a/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/utils/utils.js b/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/utils/utils.js
index f9148da5ed826..2707e3f5510db 100644
--- a/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/utils/utils.js
+++ b/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/utils/utils.js
@@ -116,8 +116,12 @@ export function processResults(results) {
   };
 }
 
-// a check for the minimum privileges needed to create and ingest data into an index.
-// if called with no indexName, the check will just look for the minimum cluster privileges.
+/**
+ * A check for the minimum privileges needed to create and ingest data into an index.
+ * If called with no indexName, the check will just look for the minimum cluster privileges.
+ * @param {string} indexName
+ * @returns {Promise<boolean>}
+ */
 export async function hasImportPermission(indexName) {
   const priv = {
     cluster: [