From 37d5dd6637067cf42f7015e0cff1e5104e42a1b9 Mon Sep 17 00:00:00 2001
From: Sander Philipse <94373878+sphilipse@users.noreply.github.com>
Date: Wed, 27 Jul 2022 12:56:50 +0200
Subject: [PATCH] [Enterprise Search] Fix scheduling callout and restrict width
 (#137255)

---
 .../components/layout/page_template.tsx       |   3 +-
 .../connector/connector_scheduling.tsx        | 102 ++++++++++++------
 2 files changed, 71 insertions(+), 34 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/layout/page_template.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/layout/page_template.tsx
index 54dca0f8d921b..d512175f2842e 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/layout/page_template.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/layout/page_template.tsx
@@ -23,9 +23,10 @@ export const EnterpriseSearchContentPageTemplate: React.FC<PageTemplateProps> =
     <EnterpriseSearchPageTemplateWrapper
       {...pageTemplateProps}
       solutionNav={{
-        name: ENTERPRISE_SEARCH_CONTENT_PLUGIN.NAME,
         items: useEnterpriseSearchNav(),
+        name: ENTERPRISE_SEARCH_CONTENT_PLUGIN.NAME,
       }}
+      restrictWidth
       setPageChrome={pageChrome && <SetEnterpriseSearchChrome trail={pageChrome} />}
     >
       {pageViewTelemetry && (
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_scheduling.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_scheduling.tsx
index f1cc04e726072..a0b9d08e457c3 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_scheduling.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_scheduling.tsx
@@ -7,6 +7,8 @@
 
 import React, { useState } from 'react';
 
+import { generatePath } from 'react-router-dom';
+
 import { useActions, useValues } from 'kea';
 
 import {
@@ -27,14 +29,18 @@ import { i18n } from '@kbn/i18n';
 import { Status } from '../../../../../../common/types/api';
 import { ConnectorStatus } from '../../../../../../common/types/connectors';
 import { ConnectorIndex } from '../../../../../../common/types/indices';
+import { EuiButtonTo } from '../../../../shared/react_router_helpers';
 import { UnsavedChangesPrompt } from '../../../../shared/unsaved_changes_prompt';
 import { UpdateConnectorSchedulingApiLogic } from '../../../api/connector_package/update_connector_scheduling_api_logic';
 
+import { SEARCH_INDEX_TAB_PATH } from '../../../routes';
 import { IngestionStatus } from '../../../types';
 import { isConnectorIndex } from '../../../utils/indices';
 
 import { IndexViewLogic } from '../index_view_logic';
 
+import { SearchIndexTabId } from '../search_index';
+
 import { ConnectorSchedulingLogic } from './connector_scheduling_logic';
 
 export const ConnectorSchedulingComponent: React.FC = () => {
@@ -60,41 +66,52 @@ export const ConnectorSchedulingComponent: React.FC = () => {
     return <></>;
   }
 
-  if (index.connector.status === ConnectorStatus.CREATED) {
+  if (
+    index.connector.status === ConnectorStatus.CREATED ||
+    index.connector.status === ConnectorStatus.NEEDS_CONFIGURATION
+  ) {
     return (
-      <EuiText size="s">
-        {i18n.translate(
-          'xpack.enterpriseSearch.content.indices.connectorScheduling.notConnected.title',
-          {
-            defaultMessage:
-              'Configure and deploy your connector, then return here to set your sync schedule. This schedule will dictate the interval that the connector will sync with your data source for updated documents.',
-          }
-        )}
-      </EuiText>
+      <>
+        <EuiSpacer />
+        <EuiCallOut
+          iconType="iInCircle"
+          title={i18n.translate(
+            'xpack.enterpriseSearch.content.indices.connectorScheduling.notConnected.title',
+            {
+              defaultMessage: 'Configure your connector to schedule a sync',
+            }
+          )}
+        >
+          <EuiText size="s">
+            {i18n.translate(
+              'xpack.enterpriseSearch.content.indices.connectorScheduling.notConnected.description',
+              {
+                defaultMessage:
+                  'Configure and deploy your connector, then return here to set your sync schedule. This schedule will dictate the interval that the connector will sync with your data source for updated documents.',
+              }
+            )}
+          </EuiText>
+          <EuiSpacer size="s" />
+          <EuiButtonTo
+            to={generatePath(SEARCH_INDEX_TAB_PATH, {
+              indexName: index.connector.name,
+              tabId: SearchIndexTabId.CONFIGURATION,
+            })}
+            fill
+            size="s"
+          >
+            {i18n.translate(
+              'xpack.enterpriseSearch.content.indices.connectorScheduling.notConnected.button.label',
+              {
+                defaultMessage: 'Configure',
+              }
+            )}
+          </EuiButtonTo>
+        </EuiCallOut>
+      </>
     );
   }
 
-  const editor = (
-    <CronEditor
-      fieldToPreferredValueMap={fieldToPreferredValueMap}
-      cronExpression={simpleCron.expression}
-      frequency={simpleCron.frequency}
-      onChange={({
-        cronExpression: expression,
-        frequency,
-        fieldToPreferredValueMap: newFieldToPreferredValueMap,
-      }) => {
-        setSimpleCron({
-          expression,
-          frequency,
-        });
-        setFieldToPreferredValueMap(newFieldToPreferredValueMap);
-        setScheduling({ ...scheduling, interval: expression });
-        setHasChanges(true);
-      }}
-    />
-  );
-
   return (
     <>
       <UnsavedChangesPrompt
@@ -105,7 +122,7 @@ export const ConnectorSchedulingComponent: React.FC = () => {
         )}
       />
       <EuiSpacer />
-      <EuiPanel hasShadow={false} hasBorder>
+      <EuiPanel hasShadow={false} hasBorder className="schedulingPanel">
         <EuiFlexGroup direction="column">
           {ingestionStatus === IngestionStatus.ERROR ? (
             <EuiCallOut
@@ -143,7 +160,26 @@ export const ConnectorSchedulingComponent: React.FC = () => {
               )}
             </EuiText>
           </EuiFlexItem>
-          <EuiFlexItem>{editor}</EuiFlexItem>
+          <EuiFlexItem>
+            <CronEditor
+              fieldToPreferredValueMap={fieldToPreferredValueMap}
+              cronExpression={simpleCron.expression}
+              frequency={simpleCron.frequency}
+              onChange={({
+                cronExpression: expression,
+                frequency,
+                fieldToPreferredValueMap: newFieldToPreferredValueMap,
+              }) => {
+                setSimpleCron({
+                  expression,
+                  frequency,
+                });
+                setFieldToPreferredValueMap(newFieldToPreferredValueMap);
+                setScheduling({ ...scheduling, interval: expression });
+                setHasChanges(true);
+              }}
+            />
+          </EuiFlexItem>
           <EuiFlexItem>
             <EuiFlexGroup>
               <EuiFlexItem grow={false}>