Putting the deduplication controls inside a datapanel. (elastic#109002)

XavierM · Aug 18, 2021 · 869c4b0 · 869c4b0
1 parent 1930857
commit 869c4b0
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 60 deletions.
diff --git a/...app_search/components/crawler/components/deduplication_panel/deduplication_panel.test.tsx b/...app_search/components/crawler/components/deduplication_panel/deduplication_panel.test.tsx
@@ -26,6 +26,8 @@ import {
 
 import { mountWithIntl, rerender } from '../../../../../test_helpers';
 
+import { DataPanel } from '../../../data_panel';
+
 import { DeduplicationPanel } from './deduplication_panel';
 
 const MOCK_ACTIONS = {
@@ -60,7 +62,7 @@ describe('DeduplicationPanel', () => {
   it('contains a button to reset to defaults', () => {
     const wrapper = shallow(<DeduplicationPanel />);
 
-    wrapper.find(EuiButton).simulate('click');
+    wrapper.find(DataPanel).dive().find(EuiButton).simulate('click');
 
     expect(MOCK_ACTIONS.submitDeduplicationUpdate).toHaveBeenCalledWith(MOCK_VALUES.domain, {
       fields: [],

diff --git a/...ions/app_search/components/crawler/components/deduplication_panel/deduplication_panel.tsx b/...ions/app_search/components/crawler/components/deduplication_panel/deduplication_panel.tsx
@@ -21,15 +21,14 @@ import {
   EuiSelectable,
   EuiSpacer,
   EuiSwitch,
-  EuiText,
-  EuiTitle,
 } from '@elastic/eui';
 
 import { EuiSelectableLIOption } from '@elastic/eui/src/components/selectable/selectable_option';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { DOCS_PREFIX } from '../../../../routes';
+import { DataPanel } from '../../../data_panel';
 import { CrawlerSingleDomainLogic } from '../../crawler_single_domain_logic';
 
 import { getCheckedOptionLabels, getSelectableOptions } from './utils';
@@ -52,62 +51,56 @@ export const DeduplicationPanel: React.FC = () => {
   const selectableOptions = getSelectableOptions(domain, showAllFields);
 
   return (
-    <div className="deduplicationPanel">
-      <EuiFlexGroup direction="row" alignItems="stretch">
-        <EuiFlexItem>
-          <EuiTitle size="s">
-            <h2>
-              {i18n.translate('xpack.enterpriseSearch.appSearch.crawler.deduplicationPanel.title', {
-                defaultMessage: 'Duplicate document handling',
-              })}
-            </h2>
-          </EuiTitle>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiButton
-            color="warning"
-            iconType="refresh"
-            size="s"
-            onClick={() => submitDeduplicationUpdate(domain, { fields: [] })}
-            disabled={deduplicationFields.length === 0}
-          >
-            {i18n.translate(
-              'xpack.enterpriseSearch.appSearch.crawler.deduplicationPanel.resetToDefaultsButtonLabel',
-              {
-                defaultMessage: 'Reset to defaults',
-              }
-            )}
-          </EuiButton>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiSpacer size="m" />
-      <EuiText size="s" color="subdued">
-        <p>
-          <FormattedMessage
-            id="xpack.enterpriseSearch.appSearch.crawler.deduplicationPanel.description"
-            defaultMessage="The web crawler only indexes unique pages. Choose which fields the crawler should use when
-            considering which pages are duplicates. Deselect all schema fields to allow duplicate
-            documents on this domain. {documentationLink}."
-            values={{
-              documentationLink: (
-                <EuiLink
-                  href={`${DOCS_PREFIX}/web-crawler-reference.html#web-crawler-reference-content-deduplication`}
-                  target="_blank"
-                  external
-                >
-                  {i18n.translate(
-                    'xpack.enterpriseSearch.appSearch.crawler.deduplicationPanel.learnMoreMessage',
-                    {
-                      defaultMessage: 'Learn more about content hashing',
-                    }
-                  )}
-                </EuiLink>
-              ),
-            }}
-          />
-        </p>
-      </EuiText>
-      <EuiSpacer size="l" />
+    <DataPanel
+      hasBorder
+      title={
+        <h2>
+          {i18n.translate('xpack.enterpriseSearch.appSearch.crawler.deduplicationPanel.title', {
+            defaultMessage: 'Duplicate document handling',
+          })}
+        </h2>
+      }
+      action={
+        <EuiButton
+          color="warning"
+          iconType="refresh"
+          size="s"
+          onClick={() => submitDeduplicationUpdate(domain, { fields: [] })}
+          disabled={deduplicationFields.length === 0}
+        >
+          {i18n.translate(
+            'xpack.enterpriseSearch.appSearch.crawler.deduplicationPanel.resetToDefaultsButtonLabel',
+            {
+              defaultMessage: 'Reset to defaults',
+            }
+          )}
+        </EuiButton>
+      }
+      subtitle={
+        <FormattedMessage
+          id="xpack.enterpriseSearch.appSearch.crawler.deduplicationPanel.description"
+          defaultMessage="The web crawler only indexes unique pages. Choose which fields the crawler should use when
+          considering which pages are duplicates. Deselect all schema fields to allow duplicate
+          documents on this domain. {documentationLink}."
+          values={{
+            documentationLink: (
+              <EuiLink
+                href={`${DOCS_PREFIX}/web-crawler-reference.html#web-crawler-reference-content-deduplication`}
+                target="_blank"
+                external
+              >
+                {i18n.translate(
+                  'xpack.enterpriseSearch.appSearch.crawler.deduplicationPanel.learnMoreMessage',
+                  {
+                    defaultMessage: 'Learn more about content hashing',
+                  }
+                )}
+              </EuiLink>
+            ),
+          }}
+        />
+      }
+    >
       <EuiSwitch
         label="Prevent duplicate documents"
         checked={deduplicationEnabled}
@@ -117,6 +110,7 @@ export const DeduplicationPanel: React.FC = () => {
             : submitDeduplicationUpdate(domain, { enabled: true })
         }
       />
+      <EuiSpacer />
       <EuiFlexGroup>
         <EuiFlexItem>
           <div className="selectableWrapper">
@@ -209,6 +203,6 @@ export const DeduplicationPanel: React.FC = () => {
           </div>
         </EuiFlexItem>
       </EuiFlexGroup>
-    </div>
+    </DataPanel>
   );
 };