[Search] Create index with same name (#177849)

## Summary Fix Attach box missing attach same name index button https://github.com/elastic/kibana/assets/1410658/5422f211-ccf1-4103-9842-ceb0d012bf0b https://github.com/elastic/kibana/assets/1410658/cec53494-3804-4d90-97f5-0758ff3ee5a9 ### Checklist Delete any items that are not applicable to this PR. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
elastic · Feb 29, 2024 · df833b2 · df833b2
1 parent 4f2c335
commit df833b2
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 16 deletions.
diff --git a/..._search/public/applications/enterprise_search_content/api/index/index_exists_api_logic.ts b/..._search/public/applications/enterprise_search_content/api/index/index_exists_api_logic.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { createApiLogic } from '../../../shared/api_logic/create_api_logic';
+import { Actions, createApiLogic } from '../../../shared/api_logic/create_api_logic';
 import { HttpLogic } from '../../../shared/http';
 
 export interface IndexExistsApiParams {
@@ -27,3 +27,5 @@ export const fetchIndexExists = async ({
 };
 
 export const IndexExistsApiLogic = createApiLogic(['index_exists_api_logic'], fetchIndexExists);
+
+export type IndexExistsApiLogicActions = Actions<IndexExistsApiParams, IndexExistsApiResponse>;
diff --git a/...c/applications/enterprise_search_content/components/connector_detail/attach_index_box.tsx b/...c/applications/enterprise_search_content/components/connector_detail/attach_index_box.tsx
@@ -38,10 +38,20 @@ export interface AttachIndexBoxProps {
 }
 
 export const AttachIndexBox: React.FC<AttachIndexBoxProps> = ({ connector }) => {
-  const { createIndex, attachIndex, setConnector } = useActions(AttachIndexLogic);
-  const { isLoading: isSaveLoading } = useValues(AttachIndexLogic);
+  const { createIndex, attachIndex, setConnector, checkIndexExists } = useActions(AttachIndexLogic);
+  const {
+    isLoading: isSaveLoading,
+    isExistLoading,
+    canCreateSameNameIndex,
+  } = useValues(AttachIndexLogic);
   const [selectedIndex, setSelectedIndex] = useState<{ label: string; shouldCreate?: boolean }>();
   const [selectedLanguage] = useState<string>();
+  const [showError, setShowError] = useState<boolean>(false);
+  useEffect(() => {
+    if (!canCreateSameNameIndex) {
+      setShowError(true);
+    }
+  }, [canCreateSameNameIndex]);
 
   const { makeRequest } = useActions(FetchAllIndicesAPILogic);
   const { data, status } = useValues(FetchAllIndicesAPILogic);
@@ -65,6 +75,9 @@ export const AttachIndexBox: React.FC<AttachIndexBoxProps> = ({ connector }) =>
   useEffect(() => {
     setConnector(connector);
     makeRequest({});
+    if (!connector.index_name) {
+      checkIndexExists({ indexName: connector.name });
+    }
   }, [connector.id]);
 
   return (
@@ -99,10 +112,23 @@ export const AttachIndexBox: React.FC<AttachIndexBoxProps> = ({ connector }) =>
               'xpack.enterpriseSearch.attachIndexBox.euiFormRow.associatedIndexLabel',
               { defaultMessage: 'Associated index' }
             )}
-            helpText={i18n.translate(
-              'xpack.enterpriseSearch.attachIndexBox.euiFormRow.associatedIndexHelpTextLabel',
-              { defaultMessage: 'You can use an existing index or create a new one' }
-            )}
+            helpText={
+              showError
+                ? ''
+                : i18n.translate(
+                    'xpack.enterpriseSearch.attachIndexBox.euiFormRow.associatedIndexHelpTextLabel',
+                    { defaultMessage: 'You can use an existing index or create a new one' }
+                  )
+            }
+            error={
+              showError
+                ? i18n.translate(
+                    'xpack.enterpriseSearch.attachIndexBox.euiFormRow.associatedIndexErrorTextLabel',
+                    { defaultMessage: 'You can use another existing index or create a new one' }
+                  )
+                : undefined
+            }
+            isInvalid={showError}
           >
             <EuiComboBox
               placeholder={i18n.translate(
@@ -118,7 +144,12 @@ export const AttachIndexBox: React.FC<AttachIndexBoxProps> = ({ connector }) =>
               )}
               isLoading={isLoading}
               options={options}
-              onChange={(selection) => setSelectedIndex(selection[0] || undefined)}
+              onChange={(selection) => {
+                if (showError) {
+                  setShowError(false);
+                }
+                setSelectedIndex(selection[0] || undefined);
+              }}
               selectedOptions={selectedIndex ? [selectedIndex] : undefined}
               onCreateOption={(value) => {
                 setSelectedIndex({ label: value.trim(), shouldCreate: true });
@@ -130,6 +161,21 @@ export const AttachIndexBox: React.FC<AttachIndexBoxProps> = ({ connector }) =>
       </EuiFlexGroup>
       <EuiSpacer />
       <EuiFlexGroup>
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            color="primary"
+            fill
+            onClick={() => {
+              createIndex({ indexName: connector.name, language: null });
+            }}
+            isLoading={isSaveLoading || isExistLoading}
+            disabled={!canCreateSameNameIndex}
+          >
+            {i18n.translate('xpack.enterpriseSearch.attachIndexBox.createSameIndexButtonLabel', {
+              defaultMessage: 'Create and attach an index with same name',
+            })}
+          </EuiButton>
+        </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiButton onClick={() => onSave()} disabled={!selectedIndex} isLoading={isSaveLoading}>
             {i18n.translate('xpack.enterpriseSearch.attachIndexBox.saveConfigurationButtonLabel', {

diff --git a/.../applications/enterprise_search_content/components/connector_detail/attach_index_logic.ts b/.../applications/enterprise_search_content/components/connector_detail/attach_index_logic.ts
@@ -19,11 +19,18 @@ import {
   CreateApiIndexApiLogic,
   CreateApiIndexApiLogicActions,
 } from '../../api/index/create_api_index_api_logic';
+import {
+  IndexExistsApiLogic,
+  IndexExistsApiLogicActions,
+} from '../../api/index/index_exists_api_logic';
 
 export interface AttachIndexActions {
   attachIndex: AttachIndexApiLogicActions['makeRequest'];
   attachIndexApiError: AttachIndexApiLogicActions['apiError'];
   attachIndexApiSuccess: AttachIndexApiLogicActions['apiSuccess'];
+  checkIndexExists: IndexExistsApiLogicActions['makeRequest'];
+  checkIndexExistsApiError: IndexExistsApiLogicActions['apiError'];
+  checkIndexExistsApiSuccess: IndexExistsApiLogicActions['apiSuccess'];
   createIndex: CreateApiIndexApiLogicActions['makeRequest'];
   createIndexApiError: CreateApiIndexApiLogicActions['apiError'];
   createIndexApiSuccess: CreateApiIndexApiLogicActions['apiSuccess'];
@@ -32,8 +39,11 @@ export interface AttachIndexActions {
 
 export interface AttachIndexValues {
   attachApiStatus: Status;
+  canCreateSameNameIndex: boolean;
   connector: Connector | null;
   createIndexApiStatus: Status;
+  indexExistsApiStatus: Status;
+  isExistLoading: boolean;
   isLoading: boolean;
 }
 
@@ -53,12 +63,20 @@ export const AttachIndexLogic = kea<MakeLogicType<AttachIndexValues, AttachIndex
         'apiSuccess as createIndexApiSuccess',
         'apiError as createIndexApiError',
       ],
+      IndexExistsApiLogic,
+      [
+        'makeRequest as checkIndexExists',
+        'apiSuccess as checkIndexExistsApiSuccess',
+        'apiError as checkIndexExistsApiError',
+      ],
     ],
     values: [
       AttachIndexApiLogic,
       ['status as attachApiStatus'],
       CreateApiIndexApiLogic,
       ['status as createIndexApiStatus'],
+      IndexExistsApiLogic,
+      ['status as indexExistsApiStatus'],
     ],
   },
   listeners: ({ actions, values }) => ({
@@ -77,6 +95,12 @@ export const AttachIndexLogic = kea<MakeLogicType<AttachIndexValues, AttachIndex
   }),
   path: ['enterprise_search', 'content', 'attach_index_logic'],
   reducers: {
+    canCreateSameNameIndex: [
+      false,
+      {
+        checkIndexExistsApiSuccess: (_, { exists }) => !exists,
+      },
+    ],
     connector: [
       null,
       {
@@ -85,10 +109,17 @@ export const AttachIndexLogic = kea<MakeLogicType<AttachIndexValues, AttachIndex
     ],
   },
   selectors: ({ selectors }) => ({
+    isExistLoading: [
+      () => [selectors.indexExistsApiStatus],
+      (indexExistsApiStatus: AttachIndexValues['indexExistsApiStatus']) =>
+        Status.LOADING === indexExistsApiStatus,
+    ],
     isLoading: [
       () => [selectors.attachApiStatus, selectors.createIndexApiStatus],
-      (attachStatus, createStatus) =>
-        attachStatus === Status.LOADING || createStatus === Status.LOADING,
+      (
+        attachStatus: AttachIndexValues['attachApiStatus'],
+        createStatus: AttachIndexValues['createIndexApiStatus']
+      ) => attachStatus === Status.LOADING || createStatus === Status.LOADING,
     ],
   }),
 });
diff --git a/.../enterprise_search_content/components/connector_detail/native_connector_configuration.tsx b/.../enterprise_search_content/components/connector_detail/native_connector_configuration.tsx
@@ -136,12 +136,6 @@ export const NativeConnectorConfiguration: React.FC = () => {
                 <EuiSpacer />
               </>
             )}
-            {!connector.index_name && (
-              <>
-                <AttachIndexBox connector={connector} />
-                <EuiSpacer />
-              </>
-            )}
             <EuiSteps
               steps={[
                 {
@@ -236,6 +230,12 @@ export const NativeConnectorConfiguration: React.FC = () => {
               ]}
             />
           </EuiPanel>
+          {!connector.index_name && (
+            <>
+              <EuiSpacer />
+              <AttachIndexBox connector={connector} />
+            </>
+          )}
         </EuiFlexItem>
         <EuiFlexItem grow={1}>
           <EuiFlexGroup direction="column">