[App Search] Migrate Create Engine view

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_creation/constants.ts

@@ -0,0 +1,215 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const DEFAULT_LANGUAGE = 'Universal';
+
+export const ENGINE_CREATION_TITLE = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.engineCreation.title',
+  {
+    defaultMessage: 'Create an engine',
+  }
+);
+
+export const ENGINE_CREATION_FORM_TITLE = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.engineCreation.form.title',
+  {
+    defaultMessage: 'Name your engine',
+  }
+);
+
+export const ENGINE_CREATION_FORM_ENGINE_NAME_LABEL = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.engineCreation.form.engineName.label',
+  {
+    defaultMessage: 'Engine name',
+  }
+);
+
+export const ALLOWED_CHARS_NOTE = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.engineCreation.form.engineName.allowedCharactersHelpText',
+  {
+    defaultMessage: 'Engine names can only contain lowercase letters, numbers, and hyphens',
+  }
+);
+
+export const SANITIZED_NAME_NOTE = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.engineCreation.form.engineName.sanitizedNameHelpText',
+  {
+    defaultMessage: 'Your engine will be named',
+  }
+);
+
+export const ENGINE_CREATION_FORM_ENGINE_NAME_PLACEHOLDER = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.engineCreation.form.engineName.placeholder',
+  {
+    defaultMessage: 'i.e., my-search-engine',
+  }
+);
+
+export const ENGINE_CREATION_FORM_ENGINE_LANGUAGE_LABEL = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.engineCreation.form.engineLanguage.label',
+  {
+    defaultMessage: 'Engine language',
+  }
+);
+
+export const ENGINE_CREATION_FORM_SUBMIT_BUTTON_LABEL = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.engineCreation.form.submitButton.buttonLabel',
+  {
+    defaultMessage: 'Create engine',
+  }
+);
+
+export const ENGINE_CREATION_SUCCESS_MESSAGE = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.engineCreation.successMessage',
+  {
+    defaultMessage: 'Successfully created engine.',
+  }
+);
+
+export const SUPPORTED_LANGUAGES = [
+  {
+    value: 'Universal',
+    text: i18n.translate(
+      'xpack.enterpriseSearch.appSearch.engineCreation.supportedLanguages.universalDropDownOptionLabel',
+      {
+        defaultMessage: 'Universal',
+      }
+    ),
+  },
+  {
+    text: '—',
+    disabled: true,
+  },
+  {
+    value: 'zh',
+    text: i18n.translate(
+      'xpack.enterpriseSearch.appSearch.engineCreation.supportedLanguages.chineseDropDownOptionLabel',
+      {
+        defaultMessage: 'Chinese',
+      }
+    ),
+  },
+  {
+    value: 'da',
+    text: i18n.translate(
+      'xpack.enterpriseSearch.appSearch.engineCreation.supportedLanguages.danishDropDownOptionLabel',
+      {
+        defaultMessage: 'Danish',
+      }
+    ),
+  },
+  {
+    value: 'nl',
+    text: i18n.translate(
+      'xpack.enterpriseSearch.appSearch.engineCreation.supportedLanguages.dutchDropDownOptionLabel',
+      {
+        defaultMessage: 'Dutch',
+      }
+    ),
+  },
+  {
+    value: 'en',
+    text: i18n.translate(
+      'xpack.enterpriseSearch.appSearch.engineCreation.supportedLanguages.englishDropDownOptionLabel',
+      {
+        defaultMessage: 'English',
+      }
+    ),
+  },
+  {
+    value: 'fr',
+    text: i18n.translate(
+      'xpack.enterpriseSearch.appSearch.engineCreation.supportedLanguages.frenchDropDownOptionLabel',
+      {
+        defaultMessage: 'French',
+      }
+    ),
+  },
+  {
+    value: 'de',
+    text: i18n.translate(
+      'xpack.enterpriseSearch.appSearch.engineCreation.supportedLanguages.germanDropDownOptionLabel',
+      {
+        defaultMessage: 'German',
+      }
+    ),
+  },
+  {
+    value: 'it',
+    text: i18n.translate(
+      'xpack.enterpriseSearch.appSearch.engineCreation.supportedLanguages.italianDropDownOptionLabel',
+      {
+        defaultMessage: 'Italian',
+      }
+    ),
+  },
+  {
+    value: 'ja',
+    text: i18n.translate(
+      'xpack.enterpriseSearch.appSearch.engineCreation.supportedLanguages.japaneseDropDownOptionLabel',
+      {
+        defaultMessage: 'Japanese',
+      }
+    ),
+  },
+  {
+    value: 'ko',
+    text: i18n.translate(
+      'xpack.enterpriseSearch.appSearch.engineCreation.supportedLanguages.koreanDropDownOptionLabel',
+      {
+        defaultMessage: 'Korean',
+      }
+    ),
+  },
+  {
+    value: 'pt',
+    text: i18n.translate(
+      'xpack.enterpriseSearch.appSearch.engineCreation.supportedLanguages.portugueseDropDownOptionLabel',
+      {
+        defaultMessage: 'Portuguese',
+      }
+    ),
+  },
+  {
+    value: 'pt-br',
+    text: i18n.translate(
+      'xpack.enterpriseSearch.appSearch.engineCreation.supportedLanguages.portugueseBrazilDropDownOptionLabel',
+      {
+        defaultMessage: 'Portuguese (Brazil)',
+      }
+    ),
+  },
+  {
+    value: 'ru',
+    text: i18n.translate(
+      'xpack.enterpriseSearch.appSearch.engineCreation.supportedLanguages.russianDropDownOptionLabel',
+      {
+        defaultMessage: 'Russian',
+      }
+    ),
+  },
+  {
+    value: 'es',
+    text: i18n.translate(
+      'xpack.enterpriseSearch.appSearch.engineCreation.supportedLanguages.spanishDropDownOptionLabel',
+      {
+        defaultMessage: 'Spanish',
+      }
+    ),
+  },
+  {
+    value: 'th',
+    text: i18n.translate(
+      'xpack.enterpriseSearch.appSearch.engineCreation.supportedLanguages.thaiDropDownOptionLabel',
+      {
+        defaultMessage: 'Thai',
+      }
+    ),
+  },
+];

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_creation/engine_creation.test.tsx

@@ -0,0 +1,119 @@
+/*
+ * 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 { setMockActions, setMockValues } from '../../../__mocks__';
+
+import React from 'react';
+
+import { shallow } from 'enzyme';
+
+import { EngineCreation } from './';
+
+describe('EngineCreation', () => {
+  const DEFAULT_VALUES = {
+    name: '',
+    rawName: '',
+    language: 'Universal',
+  };
+
+  const MOCK_ACTIONS = {
+    setRawName: jest.fn(),
+    setLanguage: jest.fn(),
+    submitEngine: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    setMockValues(DEFAULT_VALUES);
+    setMockActions(MOCK_ACTIONS);
+  });
+
+  it('renders', () => {
+    const wrapper = shallow(<EngineCreation />);
+    expect(wrapper.find('[data-test-subj="EngineCreation"]')).toHaveLength(1);
+  });
+
+  it('EngineCreationForm calls submitEngine on form submit', () => {
+    const wrapper = shallow(<EngineCreation />);
+    const simulatedEvent = {
+      preventDefault: jest.fn(),
+    };
+    wrapper.find('[data-test-subj="EngineCreationForm"]').simulate('submit', simulatedEvent);
+
+    expect(MOCK_ACTIONS.submitEngine).toHaveBeenCalledTimes(1);
+  });
+
+  it('EngineCreationNameInput calls setRawName on change', () => {
+    const wrapper = shallow(<EngineCreation />);
+    const simulatedEvent = {
+      currentTarget: { value: 'new-raw-name' },
+    };
+    wrapper.find('[data-test-subj="EngineCreationNameInput"]').simulate('change', simulatedEvent);
+
+    expect(MOCK_ACTIONS.setRawName).toHaveBeenCalledWith('new-raw-name');
+  });
+
+  it('EngineCreationLanguageInput calls setLanguage on change', () => {
+    const wrapper = shallow(<EngineCreation />);
+    const simulatedEvent = {
+      currentTarget: { value: 'English' },
+    };
+    wrapper
+      .find('[data-test-subj="EngineCreationLanguageInput"]')
+      .simulate('change', simulatedEvent);
+
+    expect(MOCK_ACTIONS.setLanguage).toHaveBeenCalledWith('English');
+  });
+
+  describe('NewEngineSubmitButton', () => {
+    it('is disabled when name is empty', () => {
+      setMockValues({ ...DEFAULT_VALUES, name: '', rawName: '' });
+      const wrapper = shallow(<EngineCreation />);
+
+      expect(wrapper.find('[data-test-subj="NewEngineSubmitButton"]').prop('disabled')).toEqual(
+        true
+      );
+    });
+
+    it('is enabled when name has a value', () => {
+      setMockValues({ ...DEFAULT_VALUES, name: 'test', rawName: 'test' });
+      const wrapper = shallow(<EngineCreation />);
+
+      expect(wrapper.find('[data-test-subj="NewEngineSubmitButton"]').prop('disabled')).toEqual(
+        false
+      );
+    });
+  });
+
+  describe('EngineCreationNameFormRow', () => {
+    it('renders sanitized name helptext when the raw name is being sanitized', () => {
+      setMockValues({
+        ...DEFAULT_VALUES,
+        name: 'un-sanitized-name',
+        rawName: 'un-----sanitized-------name',
+      });
+      const wrapper = shallow(<EngineCreation />);
+      const formRow = wrapper.find('[data-test-subj="EngineCreationNameFormRow"]').dive();
+
+      expect(formRow.contains('Your engine will be named')).toBeTruthy();
+    });
+
+    it('renders allowed character helptext when rawName and sanitizedName match', () => {
+      setMockValues({
+        ...DEFAULT_VALUES,
+        name: 'pre-sanitized-name',
+        rawName: 'pre-sanitized-name',
+      });
+      const wrapper = shallow(<EngineCreation />);
+      const formRow = wrapper.find('[data-test-subj="EngineCreationNameFormRow"]').dive();
+
+      expect(
+        formRow.contains('Engine names can only contain lowercase letters, numbers, and hyphens')
+      ).toBeTruthy();
+    });
+  });
+});