From d5d692b958077e9a7eb1fd4bbc3835c94b3d58ac Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Wed, 30 Sep 2020 16:09:58 +0200
Subject: [PATCH] [ML] ExpandableSection component.

---
 .../expandable_section.scss}                  |   2 +-
 .../expandable_section/expandable_section.tsx |  52 +++++
 .../components/expandable_section/index.ts    |   7 +
 .../outlier_exploration.tsx                   | 214 ++++++++----------
 4 files changed, 157 insertions(+), 118 deletions(-)
 rename x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/{outlier_exploration/outlier_exploration.scss => expandable_section/expandable_section.scss} (66%)
 create mode 100644 x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section.tsx
 create mode 100644 x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/index.ts

diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.scss b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section.scss
similarity index 66%
rename from x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.scss
rename to x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section.scss
index 920e774857872..e296744b2737d 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.scss
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section.scss
@@ -1,3 +1,3 @@
-.mlSectionPanel {
+.mlExpandableSection {
   padding: 0 $euiSizeS $euiSizeS $euiSizeS;
 }
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section.tsx
new file mode 100644
index 0000000000000..24fa52ec0d9e2
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section.tsx
@@ -0,0 +1,52 @@
+/*
+ * 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 './expandable_section.scss';
+
+import React, { useState, FC, ReactNode } from 'react';
+
+import { EuiButtonEmpty, EuiPanel } from '@elastic/eui';
+
+interface ExpandableSectionProps {
+  content: ReactNode;
+  headerContent: ReactNode;
+  isExpanded?: boolean;
+  title: ReactNode;
+}
+
+export const ExpandableSection: FC<ExpandableSectionProps> = ({
+  headerContent,
+  // For now we don't have a need for complete external control
+  // and just want to pass in a default value. If we wanted
+  // full external control we'd also need to add a onToggleExpanded()
+  // callback.
+  isExpanded: isExpandedDefault = true,
+  content,
+  title,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(isExpandedDefault);
+  const toggleExpanded = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <EuiPanel paddingSize="none" data-test-subj="mlDFAnalyticsOutlierExplorationTablePanel">
+      <div className="mlExpandableSection">
+        <EuiButtonEmpty
+          onClick={toggleExpanded}
+          iconType={isExpanded ? 'arrowUp' : 'arrowDown'}
+          size="l"
+          iconSide="right"
+          flush="left"
+        >
+          {title}
+        </EuiButtonEmpty>
+        {headerContent}
+      </div>
+      {isExpanded && content}
+    </EuiPanel>
+  );
+};
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/index.ts b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/index.ts
new file mode 100644
index 0000000000000..7ca72a1cf1dda
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/index.ts
@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { ExpandableSection } from './expandable_section';
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx
index 9e795e5b2d2a5..aee4a6bb021b3 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx
@@ -4,8 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import './outlier_exploration.scss';
-
 import React, { useEffect, useState, FC } from 'react';
 
 import { i18n } from '@kbn/i18n';
@@ -13,13 +11,11 @@ import { FormattedMessage } from '@kbn/i18n/react';
 
 import {
   EuiBadge,
-  EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
   EuiLoadingContent,
   EuiLoadingSpinner,
-  EuiPanel,
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
@@ -47,6 +43,7 @@ import {
 } from '../../../analytics_management/components/analytics_list/common';
 import { ExpandedRow } from '../../../analytics_management/components/analytics_list/expanded_row';
 
+import { ExpandableSection } from '../expandable_section';
 import { ExplorationQueryBar } from '../exploration_query_bar';
 import { IndexPatternPrompt } from '../index_pattern_prompt';
 
@@ -106,16 +103,6 @@ export const OutlierExploration: FC<ExplorationProps> = React.memo(({ jobId }) =
     fetchStats();
   }, [jobConfig?.id]);
 
-  const [isExpandedAnalysisDetails, setIsExpandedAnalysisDetails] = useState(false);
-  const toggleExpandedAnalysisDetails = () => {
-    setIsExpandedAnalysisDetails(!isExpandedAnalysisDetails);
-  };
-
-  const [isExpandedResultsTable, setIsExpandedResultsTable] = useState(true);
-  const toggleExpandedResultsTable = () => {
-    setIsExpandedResultsTable(!isExpandedResultsTable);
-  };
-
   return (
     <>
       {(columnsWithCharts.length > 0 || searchQuery !== defaultSearchQuery) &&
@@ -126,60 +113,8 @@ export const OutlierExploration: FC<ExplorationProps> = React.memo(({ jobId }) =
           </>
         )}
 
-      <EuiPanel paddingSize="none">
-        <div className="mlSectionPanel">
-          <EuiButtonEmpty
-            onClick={toggleExpandedAnalysisDetails}
-            iconType={isExpandedAnalysisDetails ? 'arrowUp' : 'arrowDown'}
-            size="l"
-            iconSide="right"
-            flush="left"
-          >
-            <FormattedMessage
-              id="xpack.ml.dataframe.analytics.exploration.analysisSectionTitle"
-              defaultMessage="Analysis"
-            />
-          </EuiButtonEmpty>
-          {expandedRowItem === undefined && <EuiLoadingContent lines={1} />}
-          {expandedRowItem !== undefined && (
-            <EuiFlexGroup>
-              <EuiFlexItem grow={false}>
-                <EuiText size="xs" color="subdued">
-                  <p>
-                    <FormattedMessage
-                      id="xpack.ml.dataframe.analytics.exploration.analysisTypeLabel"
-                      defaultMessage="Type"
-                    />
-                  </p>
-                </EuiText>
-                <EuiBadge>{expandedRowItem.job_type}</EuiBadge>
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiText size="xs" color="subdued">
-                  <p>
-                    <FormattedMessage
-                      id="xpack.ml.dataframe.analytics.exploration.analysisSourceIndexLabel"
-                      defaultMessage="Source index"
-                    />
-                  </p>
-                </EuiText>
-                <EuiBadge>{expandedRowItem.config.source.index}</EuiBadge>
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiText size="xs" color="subdued">
-                  <p>
-                    <FormattedMessage
-                      id="xpack.ml.dataframe.analytics.exploration.analysisDestinationIndexLabel"
-                      defaultMessage="Destination index"
-                    />
-                  </p>
-                </EuiText>
-                <EuiBadge>{expandedRowItem.config.dest.index}</EuiBadge>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          )}
-        </div>
-        {isExpandedAnalysisDetails && (
+      <ExpandableSection
+        content={
           <>
             <EuiHorizontalRule size="full" margin="none" />
             {expandedRowItem === undefined && (
@@ -196,54 +131,60 @@ export const OutlierExploration: FC<ExplorationProps> = React.memo(({ jobId }) =
               tableItems.length > 0 &&
               expandedRowItem !== undefined && <ExpandedRow item={expandedRowItem} />}
           </>
-        )}
-      </EuiPanel>
+        }
+        headerContent={
+          <>
+            {expandedRowItem === undefined && <EuiLoadingContent lines={1} />}
+            {expandedRowItem !== undefined && (
+              <EuiFlexGroup>
+                <EuiFlexItem grow={false}>
+                  <EuiText size="xs" color="subdued">
+                    <p>
+                      <FormattedMessage
+                        id="xpack.ml.dataframe.analytics.exploration.analysisTypeLabel"
+                        defaultMessage="Type"
+                      />
+                    </p>
+                  </EuiText>
+                  <EuiBadge>{expandedRowItem.job_type}</EuiBadge>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiText size="xs" color="subdued">
+                    <p>
+                      <FormattedMessage
+                        id="xpack.ml.dataframe.analytics.exploration.analysisSourceIndexLabel"
+                        defaultMessage="Source index"
+                      />
+                    </p>
+                  </EuiText>
+                  <EuiBadge>{expandedRowItem.config.source.index}</EuiBadge>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiText size="xs" color="subdued">
+                    <p>
+                      <FormattedMessage
+                        id="xpack.ml.dataframe.analytics.exploration.analysisDestinationIndexLabel"
+                        defaultMessage="Destination index"
+                      />
+                    </p>
+                  </EuiText>
+                  <EuiBadge>{expandedRowItem.config.dest.index}</EuiBadge>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            )}
+          </>
+        }
+        isExpanded={false}
+        title={
+          <FormattedMessage
+            id="xpack.ml.dataframe.analytics.exploration.analysisSectionTitle"
+            defaultMessage="Analysis"
+          />
+        }
+      />
       <EuiSpacer size="m" />
-      <EuiPanel paddingSize="none" data-test-subj="mlDFAnalyticsOutlierExplorationTablePanel">
-        <div style={{ padding: '10px' }}>
-          <EuiButtonEmpty
-            onClick={toggleExpandedResultsTable}
-            iconType={isExpandedResultsTable ? 'arrowUp' : 'arrowDown'}
-            size="l"
-            iconSide="right"
-            flush="left"
-          >
-            <FormattedMessage
-              id="xpack.ml.dataframe.analytics.exploration.explorationTableTitle"
-              defaultMessage="Results"
-            />
-          </EuiButtonEmpty>
-          {(columnsWithCharts.length === 0 || tableItems.length === 0) && (
-            <EuiLoadingContent lines={1} />
-          )}
-          {columnsWithCharts.length > 0 && tableItems.length > 0 && (
-            <EuiFlexGroup>
-              <EuiFlexItem grow={false}>
-                <EuiText size="xs" color="subdued">
-                  <p>
-                    <FormattedMessage
-                      id="xpack.ml.dataframe.analytics.exploration.explorationTableTotalDocsLabel"
-                      defaultMessage="Total docs"
-                    />
-                  </p>
-                </EuiText>
-                <EuiBadge>{outlierData.rowCount}</EuiBadge>
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <ColorRangeLegend
-                  colorRange={colorRange}
-                  title={i18n.translate(
-                    'xpack.ml.dataframe.analytics.exploration.colorRangeLegendTitle',
-                    {
-                      defaultMessage: 'Feature influence score',
-                    }
-                  )}
-                />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          )}
-        </div>
-        {isExpandedResultsTable && (
+      <ExpandableSection
+        content={
           <>
             {jobConfig !== undefined && needsDestIndexPattern && (
               <IndexPatternPrompt destIndex={jobConfig.dest.index} />
@@ -262,8 +203,47 @@ export const OutlierExploration: FC<ExplorationProps> = React.memo(({ jobId }) =
                 </>
               )}
           </>
-        )}
-      </EuiPanel>
+        }
+        headerContent={
+          <>
+            {(columnsWithCharts.length === 0 || tableItems.length === 0) && (
+              <EuiLoadingContent lines={1} />
+            )}
+            {columnsWithCharts.length > 0 && tableItems.length > 0 && (
+              <EuiFlexGroup>
+                <EuiFlexItem grow={false}>
+                  <EuiText size="xs" color="subdued">
+                    <p>
+                      <FormattedMessage
+                        id="xpack.ml.dataframe.analytics.exploration.explorationTableTotalDocsLabel"
+                        defaultMessage="Total docs"
+                      />
+                    </p>
+                  </EuiText>
+                  <EuiBadge>{outlierData.rowCount}</EuiBadge>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <ColorRangeLegend
+                    colorRange={colorRange}
+                    title={i18n.translate(
+                      'xpack.ml.dataframe.analytics.exploration.colorRangeLegendTitle',
+                      {
+                        defaultMessage: 'Feature influence score',
+                      }
+                    )}
+                  />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            )}
+          </>
+        }
+        title={
+          <FormattedMessage
+            id="xpack.ml.dataframe.analytics.exploration.explorationTableTitle"
+            defaultMessage="Results"
+          />
+        }
+      />
       <EuiSpacer size="m" />
     </>
   );