[8.x] [ES3][Search] Create Index Page (#199402) (#199703)

# Backport This will backport the following commits from `main` to `8.x`: - [[ES3][Search] Create Index Page (#199402)](#199402)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  --------- Co-authored-by: Elastic Machine <[email protected]>
elastic · Nov 12, 2024 · 8c95788 · 8c95788
1 parent f157662
commit 8c95788
Show file tree

Hide file tree

Showing 51 changed files with 1,460 additions and 624 deletions.
diff --git a/packages/deeplinks/search/constants.ts b/packages/deeplinks/search/constants.ts
@@ -25,3 +25,4 @@ export const SEARCH_ELASTICSEARCH = 'enterpriseSearchElasticsearch';
 export const SEARCH_VECTOR_SEARCH = 'enterpriseSearchVectorSearch';
 export const SEARCH_SEMANTIC_SEARCH = 'enterpriseSearchSemanticSearch';
 export const SEARCH_AI_SEARCH = 'enterpriseSearchAISearch';
+export const SEARCH_INDICES_CREATE_INDEX = 'createIndex';
diff --git a/packages/deeplinks/search/deep_links.ts b/packages/deeplinks/search/deep_links.ts
@@ -22,6 +22,7 @@ import {
   SEARCH_HOMEPAGE,
   SEARCH_INDICES_START,
   SEARCH_INDICES,
+  SEARCH_INDICES_CREATE_INDEX,
   SEARCH_ELASTICSEARCH,
   SEARCH_VECTOR_SEARCH,
   SEARCH_SEMANTIC_SEARCH,
@@ -55,6 +56,8 @@ export type AppsearchLinkId = 'engines';
 
 export type RelevanceLinkId = 'inferenceEndpoints';
 
+export type SearchIndicesLinkId = typeof SEARCH_INDICES_CREATE_INDEX;
+
 export type DeepLinkId =
   | EnterpriseSearchApp
   | EnterpriseSearchContentApp
@@ -77,4 +80,5 @@ export type DeepLinkId =
   | SearchElasticsearch
   | SearchVectorSearch
   | SearchSemanticSearch
-  | SearchAISearch;
+  | SearchAISearch
+  | `${SearchIndices}:${SearchIndicesLinkId}`;
diff --git a/x-pack/plugins/index_management/public/application/components/no_match/no_match.tsx b/x-pack/plugins/index_management/public/application/components/no_match/no_match.tsx
@@ -8,6 +8,7 @@
 import React from 'react';
 import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
+import type { SharePluginStart } from '@kbn/share-plugin/public';
 import { CreateIndexButton } from '../../sections/home/index_list/create_index/create_index_button';
 import { ExtensionsService } from '../../../services/extensions_service';
 
@@ -16,11 +17,13 @@ export const NoMatch = ({
   filter,
   resetFilter,
   extensionsService,
+  share,
 }: {
   loadIndices: () => void;
   filter: string;
   resetFilter: () => void;
   extensionsService: ExtensionsService;
+  share?: SharePluginStart;
 }) => {
   if (filter) {
     return (
@@ -62,7 +65,7 @@ export const NoMatch = ({
 
   if (extensionsService.emptyListContent) {
     return extensionsService.emptyListContent.renderContent({
-      createIndexButton: <CreateIndexButton loadIndices={loadIndices} />,
+      createIndexButton: <CreateIndexButton loadIndices={loadIndices} share={share} />,
     });
   }
 
@@ -85,7 +88,7 @@ export const NoMatch = ({
           />
         </p>
       }
-      actions={<CreateIndexButton loadIndices={loadIndices} />}
+      actions={<CreateIndexButton loadIndices={loadIndices} share={share} />}
     />
   );
 };
diff --git a/...nagement/public/application/sections/home/index_list/create_index/create_index_button.tsx b/...nagement/public/application/sections/home/index_list/create_index/create_index_button.tsx
@@ -7,22 +7,32 @@
 
 import React, { useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
+import type { SharePluginStart } from '@kbn/share-plugin/public';
 import { EuiButton } from '@elastic/eui';
 
 import { CreateIndexModal } from './create_index_modal';
 
-export const CreateIndexButton = ({ loadIndices }: { loadIndices: () => void }) => {
+export interface CreateIndexButtonProps {
+  loadIndices: () => void;
+  share?: SharePluginStart;
+}
+
+export const CreateIndexButton = ({ loadIndices, share }: CreateIndexButtonProps) => {
   const [createIndexModalOpen, setCreateIndexModalOpen] = useState<boolean>(false);
+  const createIndexUrl = share?.url.locators.get('SEARCH_CREATE_INDEX')?.useUrl({});
+  const actionProp = createIndexUrl
+    ? { href: createIndexUrl }
+    : { onClick: () => setCreateIndexModalOpen(true) };
 
   return (
     <>
       <EuiButton
         fill
         iconType="plusInCircleFilled"
-        onClick={() => setCreateIndexModalOpen(true)}
         key="createIndexButton"
         data-test-subj="createIndexButton"
         data-telemetry-id="idxMgmt-indexList-createIndexButton"
+        {...actionProp}
       >
         <FormattedMessage
           id="xpack.idxMgmt.indexTable.createIndexButton"

diff --git a/...s/index_management/public/application/sections/home/index_list/index_table/index_table.js b/...s/index_management/public/application/sections/home/index_list/index_table/index_table.js
@@ -545,9 +545,10 @@ export class IndexTable extends Component {
 
     return (
       <AppContextConsumer>
-        {({ services, config, core }) => {
+        {({ services, config, core, plugins }) => {
           const { extensionsService } = services;
           const { application, http } = core;
+          const { share } = plugins;
           const columnConfigs = getColumnConfigs({
             showIndexStats: config.enableIndexStats,
             showSizeAndDocCount: config.enableSizeAndDocCount,
@@ -669,7 +670,7 @@ export class IndexTable extends Component {
                   </>
                 )}
                 <EuiFlexItem grow={false}>
-                  <CreateIndexButton loadIndices={loadIndices} />
+                  <CreateIndexButton loadIndices={loadIndices} share={share} />
                 </EuiFlexItem>
               </EuiFlexGroup>
 
@@ -714,6 +715,7 @@ export class IndexTable extends Component {
                         <EuiTableRowCell align="center" colSpan={columnsCount}>
                           <NoMatch
                             loadIndices={loadIndices}
+                            share={share}
                             filter={filter}
                             resetFilter={() => filterChanged('')}
                             extensionsService={extensionsService}

diff --git a/x-pack/plugins/search_indices/public/analytics/constants.ts b/x-pack/plugins/search_indices/public/analytics/constants.ts
@@ -12,9 +12,9 @@ export enum AnalyticsEvents {
   startCreateIndexPageModifyIndexName = 'start_modify_index_name',
   startCreateIndexClick = 'start_create_index',
   startCreateIndexLanguageSelect = 'start_code_lang_select',
+  startCreateIndexRunInConsole = 'start_cta_run_in_console',
   startCreateIndexCodeCopyInstall = 'start_code_copy_install',
   startCreateIndexCodeCopy = 'start_code_copy',
-  startCreateIndexRunInConsole = 'start_cta_run_in_console',
   startCreateIndexCreatedRedirect = 'start_index_created_api',
   startFileUploadClick = 'start_file_upload',
   indexDetailsInstallCodeCopy = 'index_details_code_copy_install',
@@ -23,4 +23,15 @@ export enum AnalyticsEvents {
   indexDetailsNavDataTab = 'index_details_nav_data_tab',
   indexDetailsNavSettingsTab = 'index_details_nav_settings_tab',
   indexDetailsNavMappingsTab = 'index_details_nav_mappings_tab',
+  createIndexPageOpened = 'create_index_page_opened',
+  createIndexShowCodeClick = 'create_index_show_code',
+  createIndexShowUIClick = 'create_index_show_create_index_ui',
+  createIndexPageModifyIndexName = 'create_index_modify_index_name',
+  createIndexCreateIndexClick = 'create_index_click_create',
+  createIndexLanguageSelect = 'create_index_code_lang_select',
+  createIndexRunInConsole = 'create_index_run_in_console',
+  createIndexCodeCopyInstall = 'create_index_copy_install',
+  createIndexCodeCopy = 'create_index_code_copy',
+  createIndexFileUploadClick = 'create_index_file_upload',
+  createIndexIndexCreatedRedirect = 'create_index_created_api',
 }
diff --git a/x-pack/plugins/search_indices/public/components/create_index/create_index.tsx b/x-pack/plugins/search_indices/public/components/create_index/create_index.tsx
@@ -0,0 +1,114 @@
+/*
+ * 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, { useCallback, useState } from 'react';
+
+import type { IndicesStatusResponse, UserStartPrivilegesResponse } from '../../../common';
+
+import { AnalyticsEvents } from '../../analytics/constants';
+import { AvailableLanguages } from '../../code_examples';
+import { useKibana } from '../../hooks/use_kibana';
+import { useUsageTracker } from '../../hooks/use_usage_tracker';
+import { CreateIndexFormState } from '../../types';
+import { generateRandomIndexName } from '../../utils/indices';
+import { getDefaultCodingLanguage } from '../../utils/language';
+
+import { CreateIndexPanel } from '../shared/create_index_panel';
+
+import { CreateIndexCodeView } from './create_index_code_view';
+import { CreateIndexUIView } from './create_index_ui_view';
+
+function initCreateIndexState() {
+  const defaultIndexName = generateRandomIndexName();
+  return {
+    indexName: defaultIndexName,
+    defaultIndexName,
+    codingLanguage: getDefaultCodingLanguage(),
+  };
+}
+
+export interface CreateIndexProps {
+  indicesData?: IndicesStatusResponse;
+  userPrivileges?: UserStartPrivilegesResponse;
+}
+
+enum CreateIndexViewMode {
+  UI = 'ui',
+  Code = 'code',
+}
+
+export const CreateIndex = ({ indicesData, userPrivileges }: CreateIndexProps) => {
+  const { application } = useKibana().services;
+  const [createIndexView, setCreateIndexView] = useState<CreateIndexViewMode>(
+    userPrivileges?.privileges.canCreateIndex === false
+      ? CreateIndexViewMode.Code
+      : CreateIndexViewMode.UI
+  );
+  const [formState, setFormState] = useState<CreateIndexFormState>(initCreateIndexState);
+  const usageTracker = useUsageTracker();
+  const onChangeView = useCallback(
+    (id: string) => {
+      switch (id) {
+        case CreateIndexViewMode.UI:
+          usageTracker.click(AnalyticsEvents.createIndexShowUIClick);
+          setCreateIndexView(CreateIndexViewMode.UI);
+          return;
+        case CreateIndexViewMode.Code:
+          usageTracker.click(AnalyticsEvents.createIndexShowCodeClick);
+          setCreateIndexView(CreateIndexViewMode.Code);
+          return;
+      }
+    },
+    [usageTracker]
+  );
+  const onChangeCodingLanguage = useCallback(
+    (language: AvailableLanguages) => {
+      setFormState({
+        ...formState,
+        codingLanguage: language,
+      });
+      usageTracker.count([
+        AnalyticsEvents.createIndexLanguageSelect,
+        `${AnalyticsEvents.createIndexLanguageSelect}_${language}`,
+      ]);
+    },
+    [usageTracker, formState, setFormState]
+  );
+  const onClose = useCallback(() => {
+    application.navigateToApp('management', { deepLinkId: 'index_management' });
+  }, [application]);
+
+  return (
+    <CreateIndexPanel
+      createIndexView={createIndexView}
+      onChangeView={onChangeView}
+      onClose={onClose}
+    >
+      {createIndexView === CreateIndexViewMode.UI && (
+        <CreateIndexUIView
+          formState={formState}
+          setFormState={setFormState}
+          userPrivileges={userPrivileges}
+        />
+      )}
+      {createIndexView === CreateIndexViewMode.Code && (
+        <CreateIndexCodeView
+          indicesData={indicesData}
+          selectedLanguage={formState.codingLanguage}
+          indexName={formState.indexName}
+          changeCodingLanguage={onChangeCodingLanguage}
+          canCreateApiKey={userPrivileges?.privileges.canCreateApiKeys}
+          analyticsEvents={{
+            runInConsole: AnalyticsEvents.createIndexRunInConsole,
+            installCommands: AnalyticsEvents.createIndexCodeCopyInstall,
+            createIndex: AnalyticsEvents.createIndexCodeCopy,
+          }}
+        />
+      )}
+    </CreateIndexPanel>
+  );
+};
diff --git a/x-pack/plugins/search_indices/public/components/create_index/create_index_code_view.tsx b/x-pack/plugins/search_indices/public/components/create_index/create_index_code_view.tsx
@@ -0,0 +1,26 @@
+/*
+ * 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 type { IndicesStatusResponse } from '../../../common';
+import {
+  CreateIndexCodeView as SharedCreateIndexCodeView,
+  CreateIndexCodeViewProps as SharedCreateIndexCodeViewProps,
+} from '../shared/create_index_code_view';
+
+import { useIndicesRedirect } from './hooks/use_indices_redirect';
+
+export interface CreateIndexCodeViewProps extends SharedCreateIndexCodeViewProps {
+  indicesData?: IndicesStatusResponse;
+}
+
+export const CreateIndexCodeView = ({ indicesData, ...props }: CreateIndexCodeViewProps) => {
+  useIndicesRedirect(indicesData);
+
+  return <SharedCreateIndexCodeView {...props} />;
+};
diff --git a/x-pack/plugins/search_indices/public/components/create_index/create_index_page.tsx b/x-pack/plugins/search_indices/public/components/create_index/create_index_page.tsx
@@ -0,0 +1,60 @@
+/*
+ * 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, { useMemo } from 'react';
+import { i18n } from '@kbn/i18n';
+
+import { EuiLoadingLogo, EuiPageTemplate } from '@elastic/eui';
+import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
+
+import { useKibana } from '../../hooks/use_kibana';
+import { useIndicesStatusQuery } from '../../hooks/api/use_indices_status';
+import { useUserPrivilegesQuery } from '../../hooks/api/use_user_permissions';
+import { LoadIndicesStatusError } from '../shared/load_indices_status_error';
+
+import { CreateIndex } from './create_index';
+import { usePageChrome } from '../../hooks/use_page_chrome';
+import { IndexManagementBreadcrumbs } from '../shared/breadcrumbs';
+
+const CreateIndexLabel = i18n.translate('xpack.searchIndices.createIndex.docTitle', {
+  defaultMessage: 'Create Index',
+});
+
+export const CreateIndexPage = () => {
+  const { console: consolePlugin } = useKibana().services;
+  const {
+    data: indicesData,
+    isInitialLoading,
+    isError: hasIndicesStatusFetchError,
+    error: indicesFetchError,
+  } = useIndicesStatusQuery();
+  const { data: userPrivileges } = useUserPrivilegesQuery();
+
+  const embeddableConsole = useMemo(
+    () => (consolePlugin?.EmbeddableConsole ? <consolePlugin.EmbeddableConsole /> : null),
+    [consolePlugin]
+  );
+  usePageChrome(CreateIndexLabel, [...IndexManagementBreadcrumbs, { text: CreateIndexLabel }]);
+
+  return (
+    <EuiPageTemplate
+      offset={0}
+      restrictWidth={false}
+      data-test-subj="elasticsearchCreateIndexPage"
+      grow={false}
+    >
+      <KibanaPageTemplate.Section alignment="center" restrictWidth={false} grow>
+        {isInitialLoading && <EuiLoadingLogo />}
+        {hasIndicesStatusFetchError && <LoadIndicesStatusError error={indicesFetchError} />}
+        {!isInitialLoading && !hasIndicesStatusFetchError && (
+          <CreateIndex indicesData={indicesData} userPrivileges={userPrivileges} />
+        )}
+      </KibanaPageTemplate.Section>
+      {embeddableConsole}
+    </EuiPageTemplate>
+  );
+};