[App Search] Create engine view

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

@@ -0,0 +1,136 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { i18n } from '@kbn/i18n';
+
+export const CREATE_ENGINE_TITLE = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.createEngine.title',
+  {
+    defaultMessage: 'Create an Engine',
+  }
+);
+
+export const CREATE_ENGINE_FORM_TITLE = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.createEngine.form.title',
+  {
+    defaultMessage: 'Name your Engine',
+  }
+);
+
+export const CREATE_ENGINE_FORM_ENGINE_NAME_LABEL = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.createEngine.form.engineName.label',
+  {
+    defaultMessage: 'Engine Name',
+  }
+);
+
+export const ALLOWED_CHARS_NOTE = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.createEngine.form.engineName.allowedCharactersNote',
+  {
+    defaultMessage: 'Engine names can only contain lowercase letters, numbers, and hyphens',
+  }
+);
+
+export const SANITIZED_NAME_NOTE = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.createEngine.form.engineName.sanitizedNameNote',
+  {
+    defaultMessage: 'Your engine will be named',
+  }
+);
+
+export const CREATE_ENGINE_FORM_ENGINE_NAME_PLACEHOLDER = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.createEngine.form.engineName.placeholder',
+  {
+    defaultMessage: 'i.e., my-search-engine',
+  }
+);
+
+export const CREATE_ENGINE_FORM_ENGINE_LANGUAGE_LABEL = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.createEngine.form.engineLanguage.label',
+  {
+    defaultMessage: 'Engine Language',
+  }
+);
+
+export const CREATE_ENGINE_FORM_SUBMIT_BUTTON_LABEL = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.createEngine.form.submitButton.label',
+  {
+    defaultMessage: 'Create Engine',
+  }
+);
+
+export const CREATE_ENGINE_SUCCESS_MESSAGE = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.createEngine.successMessage',
+  {
+    defaultMessage: 'Successfully created engine.',
+  }
+);
+
+export const SUPPORTED_LANGUAGES = [
+  {
+    value: 'Universal',
+    text: 'Universal',
+  },
+  {
+    text: '—',
+    disabled: true,
+  },
+  {
+    value: 'zh',
+    text: 'Chinese',
+  },
+  {
+    value: 'da',
+    text: 'Danish',
+  },
+  {
+    value: 'nl',
+    text: 'Dutch',
+  },
+  {
+    value: 'en',
+    text: 'English',
+  },
+  {
+    value: 'fr',
+    text: 'French',
+  },
+  {
+    value: 'de',
+    text: 'German',
+  },
+  {
+    value: 'it',
+    text: 'Italian',
+  },
+  {
+    value: 'ja',
+    text: 'Japanese',
+  },
+  {
+    value: 'ko',
+    text: 'Korean',
+  },
+  {
+    value: 'pt',
+    text: 'Portuguese',
+  },
+  {
+    value: 'pt-br',
+    text: 'Portuguese (Brazil)',
+  },
+  {
+    value: 'ru',
+    text: 'Russian',
+  },
+  {
+    value: 'es',
+    text: 'Spanish',
+  },
+  {
+    value: 'th',
+    text: 'Thai',
+  },
+];

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

@@ -0,0 +1,76 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import '../../../__mocks__/shallow_useeffect.mock';
+import { setMockValues } from '../../../__mocks__';
+
+import { CreateEngine } from './';
+import { DefaultStringBooleanFalse } from '../../../../../../lists/common/schemas/types/default_string_boolean_false';
+
+describe('CreateEngine', () => {
+  const DEFAULT_VALUES = {
+    name: '',
+    rawName: '',
+    language: 'Universal',
+  };
+
+  describe('default values', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('renders', () => {
+      setMockValues(DEFAULT_VALUES);
+      const wrapper = shallow(<CreateEngine />);
+      expect(wrapper.find('[data-test-subj="CreateEngine"]')).toHaveLength(1);
+    });
+
+    it('contains a form', () => {
+      setMockValues(DEFAULT_VALUES);
+      const wrapper = shallow(<CreateEngine />);
+      expect(wrapper.find('[data-test-subj="CreateEngineForm"]')).toHaveLength(1);
+    });
+
+    it('contains a name input', () => {
+      setMockValues(DEFAULT_VALUES);
+      const wrapper = shallow(<CreateEngine />);
+      expect(wrapper.find('[data-test-subj="CreateEngineNameInput"]')).toHaveLength(1);
+    });
+
+    it('contains a language input', () => {
+      setMockValues(DEFAULT_VALUES);
+      const wrapper = shallow(<CreateEngine />);
+      expect(wrapper.find('[data-test-subj="CreateEngineLanguageInput"]')).toHaveLength(1);
+    });
+
+    describe('NewEngineSubmitButton', () => {
+      it('renders', () => {
+        setMockValues(DEFAULT_VALUES);
+        const wrapper = shallow(<CreateEngine />);
+        expect(wrapper.find('[data-test-subj="NewEngineSubmitButton"]')).toHaveLength(1);
+      });
+
+      it('is disabled when name is empty', () => {
+        setMockValues(DEFAULT_VALUES);
+        const wrapper = shallow(<CreateEngine />);
+        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(<CreateEngine />);
+        expect(wrapper.find('[data-test-subj="NewEngineSubmitButton"]').prop('disabled')).toEqual(
+          false
+        );
+      });
+    });
+  });
+});

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

@@ -0,0 +1,123 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+
+import {
+  EuiForm,
+  EuiFlexGroup,
+  EuiFormRow,
+  EuiFlexItem,
+  EuiFieldText,
+  EuiSelect,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+  EuiButton,
+  EuiPanel,
+} from '@elastic/eui';
+import { useActions, useValues } from 'kea';
+
+import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
+import { FlashMessages } from '../../../shared/flash_messages';
+import {
+  ALLOWED_CHARS_NOTE,
+  CREATE_ENGINE_FORM_ENGINE_LANGUAGE_LABEL,
+  CREATE_ENGINE_FORM_ENGINE_NAME_LABEL,
+  CREATE_ENGINE_FORM_ENGINE_NAME_PLACEHOLDER,
+  CREATE_ENGINE_FORM_SUBMIT_BUTTON_LABEL,
+  CREATE_ENGINE_FORM_TITLE,
+  CREATE_ENGINE_TITLE,
+  SANITIZED_NAME_NOTE,
+  SUPPORTED_LANGUAGES,
+} from './constants';
+import { CreateEngineLogic } from './create_engine_logic';
+
+export const CreateEngine: React.FC = () => {
+  const { name, rawName, language } = useValues(CreateEngineLogic);
+  const { setLanguage, setRawName, submitEngine } = useActions(CreateEngineLogic);
+
+  return (
+    <div data-test-subj="CreateEngine">
+      <SetPageChrome trail={[CREATE_ENGINE_TITLE]} />
+      <EuiPageHeader>
+        <EuiPageHeaderSection>
+          <EuiTitle size="l">
+            <h1>{CREATE_ENGINE_TITLE}</h1>
+          </EuiTitle>
+        </EuiPageHeaderSection>
+      </EuiPageHeader>
+      <FlashMessages />
+      <EuiPanel>
+        <EuiForm>
+          <form
+            data-test-subj="CreateEngineForm"
+            onSubmit={(e) => {
+              e.preventDefault();
+              submitEngine();
+            }}
+          >
+            <EuiTitle>
+              <EuiText>{CREATE_ENGINE_FORM_TITLE}</EuiText>
+            </EuiTitle>
+            <EuiSpacer />
+            <EuiFlexGroup>
+              <EuiFlexItem>
+                <EuiFormRow
+                  label={CREATE_ENGINE_FORM_ENGINE_NAME_LABEL}
+                  helpText={
+                    name.length > 0 && rawName !== name ? (
+                      <>
+                        {SANITIZED_NAME_NOTE} <strong>{name}</strong>
+                      </>
+                    ) : (
+                      ALLOWED_CHARS_NOTE
+                    )
+                  }
+                  fullWidth={true}
+                >
+                  <EuiFieldText
+                    name="engine-name"
+                    value={rawName}
+                    onChange={(event) => setRawName(event.currentTarget.value)}
+                    autoComplete="off"
+                    fullWidth={true}
+                    data-test-subj="CreateEngineNameInput"
+                    placeholder={CREATE_ENGINE_FORM_ENGINE_NAME_PLACEHOLDER}
+                    autoFocus={true}
+                  />
+                </EuiFormRow>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiFormRow label={CREATE_ENGINE_FORM_ENGINE_LANGUAGE_LABEL}>
+                  <EuiSelect
+                    name="engine-language"
+                    value={language}
+                    options={SUPPORTED_LANGUAGES}
+                    data-test-subj="CreateEngineLanguageInput"
+                    onChange={(event) => setLanguage(event.target.value)}
+                  />
+                </EuiFormRow>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+            <EuiSpacer />
+            <EuiButton
+              disabled={name.length === 0}
+              type="submit"
+              data-test-subj="NewEngineSubmitButton"
+              fill
+              color="secondary"
+            >
+              {CREATE_ENGINE_FORM_SUBMIT_BUTTON_LABEL}
+            </EuiButton>
+          </form>
+        </EuiForm>
+      </EuiPanel>
+    </div>
+  );
+};