[Enterprise Search] Name and description flyout for connectors (#143827)

elastic · Nov 15, 2022 · 8974e82 · 8974e82
1 parent 879b101
commit 8974e82
Show file tree

Hide file tree

Showing 9 changed files with 219 additions and 84 deletions.
diff --git a/...ise_search/public/applications/enterprise_search_content/__mocks__/search_indices.mock.ts b/...ise_search/public/applications/enterprise_search_content/__mocks__/search_indices.mock.ts
@@ -191,7 +191,7 @@ export const indices: ElasticsearchIndexWithIngestion[] = [
     count: 1,
     crawler: {
       id: '5',
-      index_name: 'crawler',
+      index_name: 'connector-crawler',
     },
     hidden: false,
     name: 'crawler',

diff --git a/...erprise_search/public/applications/enterprise_search_content/__mocks__/view_index.mock.ts b/...erprise_search/public/applications/enterprise_search_content/__mocks__/view_index.mock.ts
@@ -205,7 +205,7 @@ export const crawlerIndex: CrawlerViewIndex = {
   count: 1,
   crawler: {
     id: '5',
-    index_name: 'crawler',
+    index_name: 'connector-crawler',
   },
   hidden: false,
   ingestionMethod: IngestionMethod.CRAWLER,

diff --git a/..._index/connector/connector_name_and_description/connector_name_and_description_flyout.tsx b/..._index/connector/connector_name_and_description/connector_name_and_description_flyout.tsx
@@ -0,0 +1,99 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { useValues, useActions } from 'kea';
+
+import {
+  EuiFlyout,
+  EuiFlyoutHeader,
+  EuiFlyoutBody,
+  EuiFormRow,
+  EuiText,
+  EuiSpacer,
+  EuiFlyoutFooter,
+  EuiButtonEmpty,
+  EuiButton,
+  EuiTitle,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '@elastic/eui';
+
+import { i18n } from '@kbn/i18n';
+
+import { Status } from '../../../../../../../common/types/api';
+import { CANCEL_BUTTON_LABEL } from '../../../../../shared/constants';
+
+import { ConnectorNameAndDescriptionApiLogic } from '../../../../api/connector/update_connector_name_and_description_api_logic';
+
+import { ConnectorNameAndDescriptionFormContent } from './connector_name_and_description_form_content';
+import { ConnectorNameAndDescriptionLogic } from './connector_name_and_description_logic';
+
+export const ConnectorNameAndDescriptionFlyout: React.FC = () => {
+  const { status } = useValues(ConnectorNameAndDescriptionApiLogic);
+  const { isEditing } = useValues(ConnectorNameAndDescriptionLogic);
+  const { saveNameAndDescription, setIsEditing } = useActions(ConnectorNameAndDescriptionLogic);
+
+  if (!isEditing) return null;
+
+  return (
+    <EuiFlyout onClose={() => setIsEditing(false)} size="s">
+      <EuiFlyoutHeader>
+        <EuiTitle size="m">
+          <h3>
+            {i18n.translate(
+              'xpack.enterpriseSearch.content.indices.configurationConnector.nameAndDescriptionFlyout.title',
+              {
+                defaultMessage: 'Describe this crawler',
+              }
+            )}
+          </h3>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+
+      <EuiFlyoutBody>
+        <EuiFormRow>
+          <EuiText size="s">
+            {i18n.translate(
+              'xpack.enterpriseSearch.content.indices.configurationConnector.nameAndDescriptionFlyout.description',
+              {
+                defaultMessage:
+                  'By naming and describing this connector your colleagues and wider team will know what this connector is meant for.',
+              }
+            )}
+          </EuiText>
+        </EuiFormRow>
+        <EuiSpacer />
+        <ConnectorNameAndDescriptionFormContent />
+      </EuiFlyoutBody>
+
+      <EuiFlyoutFooter>
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              onClick={() => setIsEditing(false)}
+              isLoading={status === Status.LOADING}
+            >
+              {CANCEL_BUTTON_LABEL}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton isLoading={status === Status.LOADING} fill onClick={saveNameAndDescription}>
+              {i18n.translate(
+                'xpack.enterpriseSearch.content.indices.configurationConnector.nameAndDescriptionFlyout.saveButtonLabel',
+                {
+                  defaultMessage: 'Save name and description',
+                }
+              )}
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlyoutFooter>
+    </EuiFlyout>
+  );
+};
diff --git a/...ch_index/connector/connector_name_and_description/connector_name_and_description_form.tsx b/...ch_index/connector/connector_name_and_description/connector_name_and_description_form.tsx
@@ -12,40 +12,23 @@ import { useActions, useValues } from 'kea';
 import {
   EuiButton,
   EuiButtonEmpty,
-  EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
   EuiForm,
   EuiFormRow,
-  EuiTextArea,
 } from '@elastic/eui';
 
 import { Status } from '../../../../../../../common/types/api';
-import {
-  NAME_LABEL,
-  DESCRIPTION_LABEL,
-  SAVE_BUTTON_LABEL,
-  CANCEL_BUTTON_LABEL,
-} from '../../../../../shared/constants';
+import { SAVE_BUTTON_LABEL, CANCEL_BUTTON_LABEL } from '../../../../../shared/constants';
 import { ConnectorNameAndDescriptionApiLogic } from '../../../../api/connector/update_connector_name_and_description_api_logic';
-import { isConnectorIndex } from '../../../../utils/indices';
-import { IndexViewLogic } from '../../index_view_logic';
 
+import { ConnectorNameAndDescriptionFormContent } from './connector_name_and_description_form_content';
 import { ConnectorNameAndDescriptionLogic } from './connector_name_and_description_logic';
 
 export const ConnectorNameAndDescriptionForm: React.FC = () => {
-  const { index } = useValues(IndexViewLogic);
   const { status } = useValues(ConnectorNameAndDescriptionApiLogic);
-  const {
-    localNameAndDescription: { name, description },
-  } = useValues(ConnectorNameAndDescriptionLogic);
-  const { saveNameAndDescription, setIsEditing, updateLocalNameAndDescription } = useActions(
-    ConnectorNameAndDescriptionLogic
-  );
 
-  if (!isConnectorIndex(index)) {
-    return <></>;
-  }
+  const { saveNameAndDescription, setIsEditing } = useActions(ConnectorNameAndDescriptionLogic);
 
   return (
     <EuiForm
@@ -55,24 +38,7 @@ export const ConnectorNameAndDescriptionForm: React.FC = () => {
       }}
       component="form"
     >
-      <EuiFormRow label={NAME_LABEL}>
-        <EuiFieldText
-          required
-          value={name ?? ''}
-          onChange={(event) => {
-            updateLocalNameAndDescription({ name: event.target.value });
-          }}
-        />
-      </EuiFormRow>
-      <EuiFormRow label={DESCRIPTION_LABEL}>
-        <EuiTextArea
-          placeholder={'Optional'}
-          value={description || ''}
-          onChange={(event) => {
-            updateLocalNameAndDescription({ description: event.target.value });
-          }}
-        />
-      </EuiFormRow>
+      <ConnectorNameAndDescriptionFormContent />
       <EuiFormRow>
         <EuiFlexGroup>
           <EuiFlexItem grow={false}>

diff --git a/.../connector/connector_name_and_description/connector_name_and_description_form_content.tsx b/.../connector/connector_name_and_description/connector_name_and_description_form_content.tsx
@@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { useActions, useValues } from 'kea';
+
+import { EuiFieldText, EuiFormRow, EuiTextArea } from '@elastic/eui';
+
+import { NAME_LABEL, DESCRIPTION_LABEL, OPTIONAL_LABEL } from '../../../../../shared/constants';
+
+import { ConnectorNameAndDescriptionLogic } from './connector_name_and_description_logic';
+
+export const ConnectorNameAndDescriptionFormContent: React.FC = () => {
+  const {
+    localNameAndDescription: { name, description },
+  } = useValues(ConnectorNameAndDescriptionLogic);
+  const { updateLocalNameAndDescription } = useActions(ConnectorNameAndDescriptionLogic);
+
+  return (
+    <>
+      <EuiFormRow label={NAME_LABEL}>
+        <EuiFieldText
+          required
+          value={name ?? ''}
+          onChange={(event) => {
+            updateLocalNameAndDescription({ name: event.target.value });
+          }}
+        />
+      </EuiFormRow>
+      <EuiFormRow label={DESCRIPTION_LABEL}>
+        <EuiTextArea
+          placeholder={OPTIONAL_LABEL}
+          value={description || ''}
+          onChange={(event) => {
+            updateLocalNameAndDescription({ description: event.target.value });
+          }}
+        />
+      </EuiFormRow>
+    </>
+  );
+};
diff --git a/...ch_index/connector/connector_name_and_description/connector_name_and_description_logic.ts b/...ch_index/connector/connector_name_and_description/connector_name_and_description_logic.ts
@@ -26,7 +26,7 @@ import {
   CachedFetchIndexApiLogicActions,
 } from '../../../../api/index/cached_fetch_index_api_logic';
 import { FetchIndexApiResponse } from '../../../../api/index/fetch_index_api_logic';
-import { isConnectorIndex } from '../../../../utils/indices';
+import { isConnectorIndex, isCrawlerIndex } from '../../../../utils/indices';
 
 type NameAndDescription = Partial<Pick<Connector, 'name' | 'description'>>;
 
@@ -72,7 +72,9 @@ export const ConnectorNameAndDescriptionLogic = kea<
   },
   events: ({ actions, values }) => ({
     afterMount: () =>
-      actions.setNameAndDescription(isConnectorIndex(values.index) ? values.index.connector : {}),
+      actions.setNameAndDescription(
+        isConnectorIndex(values.index) || isCrawlerIndex(values.index) ? values.index.connector : {}
+      ),
   }),
   listeners: ({ actions, values }) => ({
     apiError: (error) => flashAPIErrors(error),
@@ -92,7 +94,7 @@ export const ConnectorNameAndDescriptionLogic = kea<
     },
     makeRequest: () => clearFlashMessages(),
     saveNameAndDescription: () => {
-      if (isConnectorIndex(values.index)) {
+      if (isConnectorIndex(values.index) || isCrawlerIndex(values.index)) {
         actions.makeRequest({
           connectorId: values.index.connector.id,
           indexName: values.index.connector.index_name,

diff --git a/...ic/applications/enterprise_search_content/components/search_index/crawler_total_stats.tsx b/...ic/applications/enterprise_search_content/components/search_index/crawler_total_stats.tsx
@@ -9,10 +9,18 @@ import React from 'react';
 
 import { useValues } from 'kea';
 
-import { EuiStatProps, EuiFlexGroup, EuiFlexItem, EuiPanel, EuiStat } from '@elastic/eui';
+import {
+  EuiStatProps,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiStat,
+  EuiSpacer,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { CrawlerLogic } from './crawler/crawler_logic';
+import { NameAndDescriptionStats } from './name_and_description_stats';
 import { OverviewLogic } from './overview.logic';
 
 export const CrawlerTotalStats: React.FC = () => {
@@ -60,14 +68,18 @@ export const CrawlerTotalStats: React.FC = () => {
   ];
 
   return (
-    <EuiFlexGroup direction="row">
-      {stats.map((item, index) => (
-        <EuiFlexItem key={index}>
-          <EuiPanel color={index === 0 ? 'primary' : 'subdued'} hasShadow={false} paddingSize="l">
-            <EuiStat {...item} />
-          </EuiPanel>
-        </EuiFlexItem>
-      ))}
-    </EuiFlexGroup>
+    <>
+      <NameAndDescriptionStats />
+      <EuiSpacer />
+      <EuiFlexGroup direction="row">
+        {stats.map((item, index) => (
+          <EuiFlexItem key={index}>
+            <EuiPanel color={index === 0 ? 'primary' : 'subdued'} hasShadow={false} paddingSize="l">
+              <EuiStat {...item} />
+            </EuiPanel>
+          </EuiFlexItem>
+        ))}
+      </EuiFlexGroup>
+    </>
   );
 };