Add CurationCreation view

cee-chen · cee-chen · commit 732ee56acb57 · 2021-02-23T20:18:02.000-08:00
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curations_router.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curations_router.tsx
@@ -19,8 +19,8 @@ import {
   ENGINE_CURATION_ADD_RESULT_PATH,
 } from '../../routes';
 
-import { CURATIONS_TITLE } from './constants';
-import { Curations } from './views';
+import { CURATIONS_TITLE, CREATE_NEW_CURATION_TITLE } from './constants';
+import { Curations, CurationCreation } from './views';
 
 interface Props {
   engineBreadcrumb: BreadcrumbTrail;
@@ -35,8 +35,8 @@ export const CurationsRouter: React.FC<Props> = ({ engineBreadcrumb }) => {
         <Curations />
       </Route>
       <Route exact path={ENGINE_CURATIONS_NEW_PATH}>
-        <SetPageChrome trail={[...CURATIONS_BREADCRUMB, 'Create a curation']} />
-        TODO: Curation creation view
+        <SetPageChrome trail={[...CURATIONS_BREADCRUMB, CREATE_NEW_CURATION_TITLE]} />
+        <CurationCreation />
       </Route>
       <Route exact path={ENGINE_CURATION_PATH}>
         <SetPageChrome trail={[...CURATIONS_BREADCRUMB, 'curation queries']} />
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/curation_creation.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/curation_creation.test.tsx
@@ -0,0 +1,41 @@
+/*
+ * 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 } from '../../../../__mocks__';
+
+import React from 'react';
+
+import { shallow } from 'enzyme';
+
+import { CurationQueries } from '../components';
+
+import { CurationCreation } from './curation_creation';
+
+describe('CurationCreation', () => {
+  const actions = {
+    createCuration: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    setMockActions(actions);
+  });
+
+  it('renders', () => {
+    const wrapper = shallow(<CurationCreation />);
+
+    expect(wrapper.find('h1').text()).toEqual('Create new curation');
+    expect(wrapper.find(CurationQueries)).toHaveLength(1);
+  });
+
+  it('calls createCuration on CurationQueries submit', () => {
+    const wrapper = shallow(<CurationCreation />);
+    wrapper.find(CurationQueries).simulate('submit', ['some query']);
+
+    expect(actions.createCuration).toHaveBeenCalledWith(['some query']);
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/curation_creation.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/curation_creation.tsx
@@ -0,0 +1,66 @@
+/*
+ * 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 { useActions } from 'kea';
+
+import {
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiPageContent,
+  EuiTitle,
+  EuiText,
+  EuiSpacer,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { FlashMessages } from '../../../../shared/flash_messages';
+
+import { CurationQueries } from '../components';
+import { CREATE_NEW_CURATION_TITLE } from '../constants';
+import { CurationsLogic } from '../index';
+
+export const CurationCreation: React.FC = () => {
+  const { createCuration } = useActions(CurationsLogic);
+
+  return (
+    <>
+      <EuiPageHeader>
+        <EuiPageHeaderSection>
+          <EuiTitle size="l">
+            <h1>{CREATE_NEW_CURATION_TITLE}</h1>
+          </EuiTitle>
+        </EuiPageHeaderSection>
+      </EuiPageHeader>
+      <FlashMessages />
+      <EuiPageContent>
+        <EuiTitle>
+          <h2>
+            {i18n.translate(
+              'xpack.enterpriseSearch.appSearch.engine.curations.create.curationQueriesTitle',
+              { defaultMessage: 'Curation queries' }
+            )}
+          </h2>
+        </EuiTitle>
+        <EuiText color="subdued">
+          <p>
+            {i18n.translate(
+              'xpack.enterpriseSearch.appSearch.engine.curations.create.curationQueriesDescription',
+              {
+                defaultMessage:
+                  'Add one or multiple queries to curate. You will be able add or remove more queries later.',
+              }
+            )}
+          </p>
+        </EuiText>
+        <EuiSpacer />
+        <CurationQueries queries={['']} onSubmit={(queries) => createCuration(queries)} />
+      </EuiPageContent>
+    </>
+  );
+};
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/index.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/index.ts
@@ -6,3 +6,4 @@
  */
 
 export { Curations } from './curations';
+export { CurationCreation } from './curation_creation';

Original file line number	Diff line number	Diff line change
`@@ -6,3 +6,4 @@`
`6`	`6`	`*/`
`7`	`7`
`8`	`8`	`export { Curations } from './curations';`
	`9`	`+export { CurationCreation } from './curation_creation';`