[ML] File data visualizer moving import buttons (#159722)

Relates to #112285 Removes the black bar at the bottom of the app which housed the import and cancel buttons. Rather than having a button called "Change import settings" I've left this as the "Back" button. "Change import settings" isn't really a correct description of the page the button returns you to. Something like "Rerun analysis of the already selected file" would be accurate, but that is too long for a button. @mdefazio Does this look ok? Any other suggestions? Note, I'd like to keep this PR small, the main aim was just to remove the black bar at the bottom of the page and change the name of the Cancel button after the import has already run. ![image](/~https://github.com/elastic/kibana/assets/22172091/9fc77009-6690-4a6f-9845-800d2486da23) ![image](/~https://github.com/elastic/kibana/assets/22172091/f986d0dd-1f3a-4cda-b715-e7a1a56e8cb6) ![image](/~https://github.com/elastic/kibana/assets/22172091/c24c9358-fa36-4e78-b5df-216c0dd3e734)
elastic · Jun 20, 2023 · ca0b739 · ca0b739
1 parent 610f3a7
commit ca0b739
Show file tree

Hide file tree

Showing 8 changed files with 209 additions and 298 deletions.
diff --git a/...a_visualizer/public/application/file_data_visualizer/components/bottom_bar/bottom_bar.tsx b/...a_visualizer/public/application/file_data_visualizer/components/bottom_bar/bottom_bar.tsx
diff --git a/...ns/data_visualizer/public/application/file_data_visualizer/components/bottom_bar/index.ts b/...ns/data_visualizer/public/application/file_data_visualizer/components/bottom_bar/index.ts
diff --git a/...on/file_data_visualizer/components/file_data_visualizer_view/file_data_visualizer_view.js b/...on/file_data_visualizer/components/file_data_visualizer_view/file_data_visualizer_view.js
@@ -13,7 +13,6 @@ import { EuiSpacer } from '@elastic/eui';
 import { isEqual } from 'lodash';
 
 import { AboutPanel, LoadingPanel } from '../about_panel';
-import { BottomBar } from '../bottom_bar';
 import { ResultsView } from '../results_view';
 import {
   FileCouldNotBeRead,
@@ -54,7 +53,6 @@ export class FileDataVisualizerView extends Component {
       mode: MODE.READ,
       isEditFlyoutVisible: false,
       isExplanationFlyoutVisible: false,
-      bottomBarVisible: false,
       hasPermissionToImport: false,
       fileCouldNotBeReadPermissionError: false,
     };
@@ -85,7 +83,6 @@ export class FileDataVisualizerView extends Component {
     this.setState(
       {
         loading: files.length > 0,
-        bottomBarVisible: files.length > 0,
         loaded: false,
         fileName: '',
         fileContents: '',
@@ -213,30 +210,18 @@ export class FileDataVisualizerView extends Component {
 
   closeEditFlyout = () => {
     this.setState({ isEditFlyoutVisible: false });
-    this.showBottomBar();
   };
 
   showEditFlyout = () => {
     this.setState({ isEditFlyoutVisible: true });
-    this.hideBottomBar();
   };
 
   closeExplanationFlyout = () => {
     this.setState({ isExplanationFlyoutVisible: false });
-    this.showBottomBar();
   };
 
   showExplanationFlyout = () => {
     this.setState({ isExplanationFlyoutVisible: true });
-    this.hideBottomBar();
-  };
-
-  showBottomBar = () => {
-    this.setState({ bottomBarVisible: true });
-  };
-
-  hideBottomBar = () => {
-    this.setState({ bottomBarVisible: false });
   };
 
   setOverrides = (overrides) => {
@@ -282,7 +267,6 @@ export class FileDataVisualizerView extends Component {
       mode,
       isEditFlyoutVisible,
       isExplanationFlyoutVisible,
-      bottomBarVisible,
       hasPermissionToImport,
       fileCouldNotBeReadPermissionError,
     } = this.state;
@@ -333,6 +317,9 @@ export class FileDataVisualizerView extends Component {
                 showEditFlyout={this.showEditFlyout}
                 showExplanationFlyout={this.showExplanationFlyout}
                 disableButtons={isEditFlyoutVisible || isExplanationFlyoutVisible}
+                onChangeMode={this.changeMode}
+                onCancel={this.onCancel}
+                disableImport={hasPermissionToImport === false}
               />
             )}
             <EditFlyout
@@ -347,18 +334,6 @@ export class FileDataVisualizerView extends Component {
             {isExplanationFlyoutVisible && (
               <ExplanationFlyout results={results} closeFlyout={this.closeExplanationFlyout} />
             )}
-
-            {bottomBarVisible && loaded && (
-              <>
-                <BottomBar
-                  mode={MODE.READ}
-                  onChangeMode={this.changeMode}
-                  onCancel={this.onCancel}
-                  disableImport={hasPermissionToImport === false}
-                />
-                <BottomPadding />
-              </>
-            )}
           </>
         )}
         {mode === MODE.IMPORT && (
@@ -369,38 +344,17 @@ export class FileDataVisualizerView extends Component {
               fileContents={fileContents}
               data={data}
               dataViewsContract={this.props.dataViewsContract}
-              showBottomBar={this.showBottomBar}
-              hideBottomBar={this.hideBottomBar}
               fileUpload={this.props.fileUpload}
               getAdditionalLinks={this.props.getAdditionalLinks}
               capabilities={this.props.capabilities}
+              mode={mode}
+              onChangeMode={this.changeMode}
+              onCancel={this.onCancel}
             />
-
-            {bottomBarVisible && (
-              <>
-                <BottomBar
-                  mode={MODE.IMPORT}
-                  onChangeMode={this.changeMode}
-                  onCancel={this.onCancel}
-                />
-                <BottomPadding />
-              </>
-            )}
           </>
         )}
         <Chat />
       </div>
     );
   }
 }
-
-function BottomPadding() {
-  // padding for the BottomBar
-  return (
-    <>
-      <EuiSpacer size="m" />
-      <EuiSpacer size="l" />
-      <EuiSpacer size="l" />
-    </>
-  );
-}