[ML] Indicate missing required privileges for import in File Data Viz (…

…#50147) (#50221)

* [ML] show a tooltip which indicates missing required privileges for data import

* [ML] fix export

* [ML] PR comments

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>
+    );
+  }
+};

x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/bottom_bar/index.js → 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';

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,
+}

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>

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';

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: [