[App Search] [Crawler] Add tooltip to explain path pattern (#114779) (#…

…114909)

7.13.0 adds a wildcard character to (non-regex) path patterns. This change updates the UI help text to explain this.

Co-authored-by: Orhan Toy <[email protected]>

x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/components/crawl_rules_table.tsx

@@ -9,7 +9,16 @@ import React from 'react';
 
 import { useActions } from 'kea';
 
-import { EuiCode, EuiFieldText, EuiLink, EuiSelect, EuiText } from '@elastic/eui';
+import {
+  EuiCode,
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIconTip,
+  EuiLink,
+  EuiSelect,
+  EuiText,
+} from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -27,6 +36,7 @@ import {
   getReadableCrawlerPolicy,
   getReadableCrawlerRule,
 } from '../types';
+import { getCrawlRulePathPatternTooltip } from '../utils';
 
 interface CrawlRulesTableProps {
   description?: React.ReactNode;
@@ -130,13 +140,24 @@ export const CrawlRulesTable: React.FC<CrawlRulesTableProps> = ({
     },
     {
       editingRender: (crawlRule, onChange, { isInvalid, isLoading }) => (
-        <EuiFieldText
-          fullWidth
-          value={(crawlRule as CrawlRule).pattern}
-          onChange={(e) => onChange(e.target.value)}
-          disabled={isLoading}
-          isInvalid={isInvalid}
-        />
+        <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+          <EuiFlexItem>
+            <EuiFieldText
+              fullWidth
+              value={(crawlRule as CrawlRule).pattern}
+              onChange={(e) => onChange(e.target.value)}
+              disabled={isLoading}
+              isInvalid={isInvalid}
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiIconTip
+              content={getCrawlRulePathPatternTooltip(crawlRule as CrawlRule)}
+              type="iInCircle"
+              position="top"
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
       ),
       render: (crawlRule) => <EuiCode>{(crawlRule as CrawlRule).pattern}</EuiCode>,
       name: i18n.translate(

x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/utils.test.ts

@@ -26,6 +26,7 @@ import {
   crawlRequestServerToClient,
   getDeleteDomainConfirmationMessage,
   getDeleteDomainSuccessMessage,
+  getCrawlRulePathPatternTooltip,
 } from './utils';
 
 const DEFAULT_CRAWL_RULE: CrawlRule = {
@@ -292,3 +293,28 @@ describe('getDeleteDomainSuccessMessage', () => {
     expect(getDeleteDomainSuccessMessage('https://elastic.co/')).toContain('https://elastic.co');
   });
 });
+
+describe('getCrawlRulePathPatternTooltip', () => {
+  it('includes regular expression', () => {
+    const crawlRule: CrawlRule = {
+      id: '-',
+      policy: CrawlerPolicies.allow,
+      rule: CrawlerRules.regex,
+      pattern: '.*',
+    };
+
+    expect(getCrawlRulePathPatternTooltip(crawlRule)).toContain('regular expression');
+  });
+
+  it('includes meta', () => {
+    const crawlRule: CrawlRule = {
+      id: '-',
+      policy: CrawlerPolicies.allow,
+      rule: CrawlerRules.beginsWith,
+      pattern: '/elastic',
+    };
+
+    expect(getCrawlRulePathPatternTooltip(crawlRule)).not.toContain('regular expression');
+    expect(getCrawlRulePathPatternTooltip(crawlRule)).toContain('meta');
+  });
+});

x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/utils.ts

@@ -16,6 +16,8 @@ import {
   CrawlerDomainValidationStep,
   CrawlRequestFromServer,
   CrawlRequest,
+  CrawlRule,
+  CrawlerRules,
   CrawlEventFromServer,
   CrawlEvent,
 } from './types';
@@ -159,3 +161,23 @@ export const getDeleteDomainSuccessMessage = (domainUrl: string) => {
     }
   );
 };
+
+export const getCrawlRulePathPatternTooltip = (crawlRule: CrawlRule) => {
+  if (crawlRule.rule === CrawlerRules.regex) {
+    return i18n.translate(
+      'xpack.enterpriseSearch.appSearch.crawler.crawlRulesTable.regexPathPatternTooltip',
+      {
+        defaultMessage:
+          'The path pattern is a regular expression compatible with the Ruby language regular expression engine.',
+      }
+    );
+  }
+
+  return i18n.translate(
+    'xpack.enterpriseSearch.appSearch.crawler.crawlRulesTable.pathPatternTooltip',
+    {
+      defaultMessage:
+        'The path pattern is a literal string except for the asterisk (*) character, which is a meta character that will match anything.',
+    }
+  );
+};