Refactor Sample Data Home section which also fixes flaky sample data functional test

src/core_plugins/kibana/public/home/components/sample_data_set_card.js

@@ -33,23 +33,32 @@ import {
   uninstallSampleDataSet
 } from '../sample_data_sets';
 
+const INSTALLED_STATUS = 'installed';
+const UNINSTALLED_STATUS = 'not_installed';
+
 export class SampleDataSetCard extends React.Component {
 
   constructor(props) {
     super(props);
 
     this.state = {
       isProcessingRequest: false,
+      status: this.props.status,
+    };
+  }
+
+  static getDerivedStateFromProps(nextProps) {
+    return {
+      status: nextProps.status,
     };
   }
 
-  startRequest = async () => {
+  install = async () => {
     const {
       getConfig,
       setConfig,
       id,
       name,
-      onRequestComplete,
       defaultIndex,
       clearIndexPatternsCache,
     } = this.props;
@@ -58,36 +67,53 @@ export class SampleDataSetCard extends React.Component {
       isProcessingRequest: true,
     });
 
-    if (this.isInstalled()) {
-      await uninstallSampleDataSet(id, name, defaultIndex, getConfig, setConfig, clearIndexPatternsCache);
-    } else {
-      await installSampleDataSet(id, name, defaultIndex, getConfig, setConfig, clearIndexPatternsCache);
-    }
+    const isSuccess = await installSampleDataSet(id, name, defaultIndex, getConfig, setConfig, clearIndexPatternsCache);
+
+    this.setState({
+      isProcessingRequest: false,
+      status: isSuccess ? INSTALLED_STATUS : UNINSTALLED_STATUS
+    });
+  }
+
+  uninstall = async () => {
+    const {
+      getConfig,
+      setConfig,
+      id,
+      name,
+      defaultIndex,
+      clearIndexPatternsCache,
+    } = this.props;
+
+    this.setState({
+      isProcessingRequest: true,
+    });
 
-    onRequestComplete();
+    const isSuccess = await uninstallSampleDataSet(id, name, defaultIndex, getConfig, setConfig, clearIndexPatternsCache);
 
     this.setState({
       isProcessingRequest: false,
+      status: isSuccess ? UNINSTALLED_STATUS : INSTALLED_STATUS
     });
   }
 
   isInstalled = () => {
-    if (this.props.status === 'installed') {
+    if (this.state.status === 'installed') {
       return true;
     }
 
     return false;
   }
 
   renderBtn = () => {
-    switch (this.props.status) {
-      case 'installed':
+    switch (this.state.status) {
+      case INSTALLED_STATUS:
         return (
           <EuiFlexGroup justifyContent="spaceBetween">
             <EuiFlexItem grow={false}>
               <EuiButtonEmpty
                 isLoading={this.state.isProcessingRequest}
-                onClick={this.startRequest}
+                onClick={this.uninstall}
                 color="danger"
                 data-test-subj={`removeSampleDataSet${this.props.id}`}
               >
@@ -105,13 +131,13 @@ export class SampleDataSetCard extends React.Component {
           </EuiFlexGroup>
         );
 
-      case 'not_installed':
+      case UNINSTALLED_STATUS:
         return (
           <EuiFlexGroup justifyContent="flexEnd">
             <EuiFlexItem grow={false}>
               <EuiButton
                 isLoading={this.state.isProcessingRequest}
-                onClick={this.startRequest}
+                onClick={this.install}
                 data-test-subj={`addSampleDataSet${this.props.id}`}
               >
                 {this.state.isProcessingRequest ? 'Adding' : 'Add'}
@@ -162,12 +188,11 @@ SampleDataSetCard.propTypes = {
   name: PropTypes.string.isRequired,
   launchUrl: PropTypes.string.isRequired,
   status: PropTypes.oneOf([
-    'installed',
-    'not_installed',
+    INSTALLED_STATUS,
+    UNINSTALLED_STATUS,
     'unknown',
   ]).isRequired,
   statusMsg: PropTypes.string,
-  onRequestComplete: PropTypes.func.isRequired,
   getConfig: PropTypes.func.isRequired,
   setConfig: PropTypes.func.isRequired,
   clearIndexPatternsCache: PropTypes.func.isRequired,

src/core_plugins/kibana/public/home/components/tutorial_directory.js

@@ -200,7 +200,6 @@ export class TutorialDirectory extends React.Component {
             launchUrl={this.props.addBasePath(`/app/kibana#/dashboard/${sampleDataSet.overviewDashboard}`)}
             status={sampleDataSet.status}
             statusMsg={sampleDataSet.statusMsg}
-            onRequestComplete={this.loadSampleDataSets}
             getConfig={this.props.getConfig}
             setConfig={this.props.setConfig}
             clearIndexPatternsCache={this.props.clearIndexPatternsCache}

src/core_plugins/kibana/public/home/sample_data_sets.js

@@ -66,7 +66,7 @@ export async function installSampleDataSet(id, name, defaultIndex, getConfig, se
       title: `Unable to install sample data set: ${name}`,
       text: `${err.message}`,
     });
-    return;
+    return false;
   }
 
   const existingDefaultIndex = await getConfig('defaultIndex');
@@ -80,6 +80,8 @@ export async function installSampleDataSet(id, name, defaultIndex, getConfig, se
     title: `${name} installed`,
     ['data-test-subj']: 'sampleDataSetInstallToast'
   });
+
+  return true;
 }
 
 export async function uninstallSampleDataSet(id, name, defaultIndex, getConfig, setConfig, clearIndexPatternsCache) {
@@ -98,7 +100,7 @@ export async function uninstallSampleDataSet(id, name, defaultIndex, getConfig,
       title: `Unable to uninstall sample data set`,
       text: `${err.message}`,
     });
-    return;
+    return false;
   }
 
   const existingDefaultIndex = await getConfig('defaultIndex');
@@ -112,4 +114,6 @@ export async function uninstallSampleDataSet(id, name, defaultIndex, getConfig,
     title: `${name} uninstalled`,
     ['data-test-subj']: 'sampleDataSetUninstallToast'
   });
+
+  return true;
 }

test/functional/page_objects/home_page.js

@@ -53,10 +53,22 @@ export function HomePageProvider({ getService }) {
 
     async addSampleDataSet(id) {
       await testSubjects.click(`addSampleDataSet${id}`);
+      await this._waitForSampleDataLoadingAction(id);
     }
 
     async removeSampleDataSet(id) {
       await testSubjects.click(`removeSampleDataSet${id}`);
+      await this._waitForSampleDataLoadingAction(id);
+    }
+
+    // loading action is either uninstall and install
+    async _waitForSampleDataLoadingAction(id) {
+      const sampleDataCard = await testSubjects.find(`sampleDataSetCard${id}`);
+      await retry.try(async () => {
+        // waitForDeletedByClassName needs to be inside retry because it will timeout at least once
+        // before action is complete
+        await sampleDataCard.waitForDeletedByClassName('euiLoadingSpinner');
+      });
     }
 
     async launchSampleDataSet(id) {