[Search][a11y] Fixing connectors pageHeader hierarchy content

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/connector_description.tsx

@@ -0,0 +1,16 @@
+/*
+ * 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 { Connector } from '@kbn/search-connectors';
+
+import { ConnectorField } from './connector_field';
+
+export const ConnectorDescription: React.FC<{ connector: Connector }> = ({ connector }) => (
+  <ConnectorField connector={connector} field="description" />
+);

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/connector_detail.tsx

@@ -28,7 +28,8 @@ import { SearchIndexPipelines } from '../search_index/pipelines/pipelines';
 import { getHeaderActions } from '../shared/header_actions/header_actions';
 
 import { ConnectorConfiguration } from './connector_configuration';
-import { ConnectorNameAndDescription } from './connector_name_and_description';
+import { ConnectorDescription } from './connector_description';
+import { ConnectorName } from './connector_name';
 import { ConnectorViewLogic } from './connector_view_logic';
 import { ConnectorDetailOverview } from './overview';
 
@@ -246,7 +247,8 @@ export const ConnectorDetail: React.FC = () => {
       pageViewTelemetry={tabId}
       isLoading={isLoading}
       pageHeader={{
-        pageTitle: connector ? <ConnectorNameAndDescription connector={connector} /> : '...',
+        description: connector ? <ConnectorDescription connector={connector} /> : '...',
+        pageTitle: connector ? <ConnectorName connector={connector} /> : '...',
         rightSideGroupProps: {
           gutterSize: 's',
           responsive: false,

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/connector_field.tsx

@@ -0,0 +1,110 @@
+/*
+ * 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, { ChangeEvent, useEffect, useState } from 'react';
+
+import { useActions, useValues } from 'kea';
+
+import { EuiFlexItem, EuiInlineEditText, EuiInlineEditTitle } from '@elastic/eui';
+
+import { i18n } from '@kbn/i18n';
+import { Connector } from '@kbn/search-connectors';
+
+import { ConnectorNameAndDescriptionLogic } from './connector_name_and_description_logic';
+
+interface ConnectorFieldProps {
+  connector: Connector;
+  field: 'name' | 'description'; // The field to edit
+  isTitle?: boolean; // Whether to render a title (`EuiInlineEditTitle`) or text (`EuiInlineEditText`)
+}
+
+export const ConnectorField: React.FC<ConnectorFieldProps> = ({ connector, field, isTitle }) => {
+  const [value, setValue] = useState<string | null>(connector[field]);
+  const [resolverObject, setResolverObject] = useState({
+    rej: () => {},
+    res: () => {},
+  });
+  const { saveNameAndDescription, setConnector } = useActions(ConnectorNameAndDescriptionLogic);
+  const { status, isLoading, isFailed, isSuccess } = useValues(ConnectorNameAndDescriptionLogic);
+
+  useEffect(() => {
+    setConnector(connector);
+  }, [connector]);
+
+  useEffect(() => {
+    if (isSuccess) resolverObject.res();
+    if (isFailed) resolverObject.rej();
+  }, [status]);
+
+  const getValidationPromiseResolvers = () => {
+    const resolvers = {
+      rej: () => {},
+      res: () => {},
+    };
+    const promise = new Promise<void>((resolve, reject) => {
+      resolvers.res = resolve;
+      resolvers.rej = reject;
+    });
+    setResolverObject(resolvers);
+    return promise;
+  };
+
+  const handleSave = async (newValue: string) => {
+    setValue(newValue);
+    saveNameAndDescription({ ...connector, [field]: newValue });
+    await getValidationPromiseResolvers();
+    return true;
+  };
+
+  const handleCancel = (previousValue: string) => {
+    setValue(previousValue);
+  };
+
+  const Component = isTitle ? EuiInlineEditTitle : EuiInlineEditText;
+
+  return (
+    <EuiFlexItem grow={false}>
+      <Component
+        inputAriaLabel={i18n.translate(
+          `xpack.enterpriseSearch.content.connectors.nameAndDescription.${field}.ariaLabel`,
+          {
+            defaultMessage: `Edit connector ${field}`,
+          }
+        )}
+        placeholder={i18n.translate(
+          `xpack.enterpriseSearch.content.connectors.nameAndDescription.${field}.placeholder`,
+          {
+            defaultMessage: field === 'name' ? 'Add a name to your connector' : 'Add a description',
+          }
+        )}
+        value={value || ''}
+        isLoading={isLoading}
+        isInvalid={field === 'name' && !value?.trim()}
+        size="m"
+        heading={isTitle ? 'h1' : 'span'}
+        editModeProps={{
+          cancelButtonProps: { onClick: () => handleCancel(connector[field] || '') },
+          formRowProps:
+            field === 'name' && !value?.trim()
+              ? {
+                  error: [
+                    i18n.translate(
+                      'xpack.enterpriseSearch.content.nameAndDescription.name.error.empty',
+                      { defaultMessage: 'Connector name cannot be empty' }
+                    ),
+                  ],
+                }
+              : undefined,
+          inputProps: { readOnly: isLoading },
+        }}
+        onSave={handleSave}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => setValue(e.target.value)}
+        onCancel={() => handleCancel(connector[field] || '')}
+      />
+    </EuiFlexItem>
+  );
+};

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/connector_name.tsx

@@ -0,0 +1,16 @@
+/*
+ * 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 { Connector } from '@kbn/search-connectors';
+
+import { ConnectorField } from './connector_field';
+
+export const ConnectorName: React.FC<{ connector: Connector }> = ({ connector }) => (
+  <ConnectorField connector={connector} field="name" isTitle />
+);

x-pack/plugins/translations/translations/fr-FR.json

@@ -17473,10 +17473,6 @@
     "xpack.enterpriseSearch.content.connectors.deleteModal.delete.crawler.description": "Vous êtes sur le point de supprimer le robot d'indexation suivant :",
     "xpack.enterpriseSearch.content.connectors.deleteModal.syncsWarning.indexNameDescription": "Cette action ne peut pas être annulée. Veuillez saisir {connectorName} pour confirmer.",
     "xpack.enterpriseSearch.content.connectors.deleteModal.title": "Supprimer {connectorCount} connecteur ?",
-    "xpack.enterpriseSearch.content.connectors.nameAndDescription.description.ariaLabel": "Modifier la description du connecteur",
-    "xpack.enterpriseSearch.content.connectors.nameAndDescription.description.placeholder": "Ajouter une description",
-    "xpack.enterpriseSearch.content.connectors.nameAndDescription.name.ariaLabel": "Modifier le nom du connecteur",
-    "xpack.enterpriseSearch.content.connectors.nameAndDescription.name.placeholder": "Ajouter un nom pour votre connecteur",
     "xpack.enterpriseSearch.content.connectors.overview.connectorErrorCallOut.title": "Votre connecteur a rapporté une erreur",
     "xpack.enterpriseSearch.content.connectors.overview.connectorIndexDoesntExistCallOut.description": "Le connecteur va créer l'index lors de sa prochaine synchronisation. Vous pouvez également créer l’index {indexName} manuellement avec les paramètres et les mappings de votre choix.",
     "xpack.enterpriseSearch.content.connectors.overview.connectorIndexDoesntExistCallOut.title": "L'index attaché n'existe pas",

x-pack/plugins/translations/translations/ja-JP.json

@@ -17448,10 +17448,6 @@
     "xpack.enterpriseSearch.content.connectors.deleteModal.delete.crawler.description": "このコネクターを削除しようとしています：",
     "xpack.enterpriseSearch.content.connectors.deleteModal.syncsWarning.indexNameDescription": "この操作は元に戻すことができません。{connectorName}を入力して確認してください。",
     "xpack.enterpriseSearch.content.connectors.deleteModal.title": "\"{connectorCount}\"コネクターを削除しますか？",
-    "xpack.enterpriseSearch.content.connectors.nameAndDescription.description.ariaLabel": "コネクターの説明を編集",
-    "xpack.enterpriseSearch.content.connectors.nameAndDescription.description.placeholder": "説明を追加",
-    "xpack.enterpriseSearch.content.connectors.nameAndDescription.name.ariaLabel": "コネクター名を編集",
-    "xpack.enterpriseSearch.content.connectors.nameAndDescription.name.placeholder": "コネクターに名前を追加",
     "xpack.enterpriseSearch.content.connectors.overview.connectorErrorCallOut.title": "コネクターでエラーが発生しました",
     "xpack.enterpriseSearch.content.connectors.overview.connectorIndexDoesntExistCallOut.description": "コネクターは、次回の同期でインデックスを作成します。あるいは、任意の設定とマッピングを使用して、手動でインデックス{indexName}を作成できます。",
     "xpack.enterpriseSearch.content.connectors.overview.connectorIndexDoesntExistCallOut.title": "付けられたインデックスが存在しません",

x-pack/plugins/translations/translations/zh-CN.json

@@ -17116,10 +17116,6 @@
     "xpack.enterpriseSearch.content.connectors.deleteModal.delete.crawler.description": "您即将删除此网络爬虫：",
     "xpack.enterpriseSearch.content.connectors.deleteModal.syncsWarning.indexNameDescription": "此操作无法撤消。请尝试 {connectorName} 以确认。",
     "xpack.enterpriseSearch.content.connectors.deleteModal.title": "删除 {connectorCount} 个连接器？",
-    "xpack.enterpriseSearch.content.connectors.nameAndDescription.description.ariaLabel": "编辑连接器描述",
-    "xpack.enterpriseSearch.content.connectors.nameAndDescription.description.placeholder": "添加描述",
-    "xpack.enterpriseSearch.content.connectors.nameAndDescription.name.ariaLabel": "编辑连接器名称",
-    "xpack.enterpriseSearch.content.connectors.nameAndDescription.name.placeholder": "为连接器添加名称",
     "xpack.enterpriseSearch.content.connectors.overview.connectorErrorCallOut.title": "您的连接器报告了错误",
     "xpack.enterpriseSearch.content.connectors.overview.connectorIndexDoesntExistCallOut.description": "此连接器将在其下次同步时创建索引，或者，您也可以使用所需设置和映射手动创建索引 {indexName}。",
     "xpack.enterpriseSearch.content.connectors.overview.connectorIndexDoesntExistCallOut.title": "附加的索引不存在",