[Enterprise Search] Refactor SchemaExistingField component to SchemaF…

…ieldTypeSelect (elastic#98955) * Refactor SchemaExistingField to just the select component - Removes unnecessary CSS, conditionals, etc. (letting AS & WS manage their own table/row views & styling) + Move to its own component folder for organization * Update WS to use new SchemaFieldTypeSelect component * Update SchemaAddFieldModal to dogfood SchemaFieldTypeSelect component - DRY's out fieldTypeSelectOptions to only having to exist within SchemaFieldTypeSelect * i18n cleanup Co-authored-by: Kibana Machine <[email protected]>
academo · Apr 30, 2021 · 8810e84 · 8810e84
1 parent 2236633
commit 8810e84
Show file tree

Hide file tree

Showing 11 changed files with 64 additions and 113 deletions.
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/schema/constants.ts b/x-pack/plugins/enterprise_search/public/applications/shared/schema/constants.ts
@@ -7,13 +7,6 @@
 
 import { i18n } from '@kbn/i18n';
 
-import { SchemaType } from './types';
-
-export const fieldTypeSelectOptions = Object.values(SchemaType).map((type) => ({
-  value: type,
-  text: type,
-}));
-
 export const FIELD_NAME_CORRECT_NOTE = i18n.translate(
   'xpack.enterpriseSearch.schema.addFieldModal.fieldNameNote.correct',
   {
@@ -76,10 +69,3 @@ export const ERROR_TABLE_VIEW_LINK = i18n.translate(
     defaultMessage: 'View',
   }
 );
-
-export const RECENTY_ADDED = i18n.translate(
-  'xpack.enterpriseSearch.schema.existingField.status.recentlyAdded',
-  {
-    defaultMessage: 'Recently Added',
-  }
-);
diff --git a/...red/schema/schema_existing_field.test.tsx → ...d/schema/field_type_select/index.test.tsx b/...red/schema/schema_existing_field.test.tsx → ...d/schema/field_type_select/index.test.tsx
@@ -11,9 +11,9 @@ import { shallow } from 'enzyme';
 
 import { EuiSelect } from '@elastic/eui';
 
-import { SchemaExistingField } from './';
+import { SchemaFieldTypeSelect } from './';
 
-describe('SchemaExistingField', () => {
+describe('SchemaFieldTypeSelect', () => {
   const updateExistingFieldType = jest.fn();
   const props = {
     fieldName: 'foo',
@@ -22,33 +22,21 @@ describe('SchemaExistingField', () => {
   };
 
   it('renders', () => {
-    const wrapper = shallow(<SchemaExistingField {...props} />);
+    const wrapper = shallow(<SchemaFieldTypeSelect {...props} />);
 
     expect(wrapper.find(EuiSelect)).toHaveLength(1);
   });
 
-  it('renders no EuiSelect without props', () => {
-    const wrapper = shallow(<SchemaExistingField fieldName="foo" />);
-
-    expect(wrapper.find(EuiSelect)).toHaveLength(0);
-  });
-
   it('calls updateExistingFieldType when the select value is changed', () => {
-    const wrapper = shallow(<SchemaExistingField {...props} />);
+    const wrapper = shallow(<SchemaFieldTypeSelect {...props} />);
     wrapper.find(EuiSelect).simulate('change', { target: { value: 'bar' } });
 
     expect(updateExistingFieldType).toHaveBeenCalledWith(props.fieldName, 'bar');
   });
 
-  it('doesn`t render fieldName when hidden', () => {
-    const wrapper = shallow(<SchemaExistingField {...props} hideName />);
-
-    expect(wrapper.find('.c-stui-engine-schema-field__name').contains(props.fieldName)).toBeFalsy();
-  });
-
-  it('renders unconfirmed message', () => {
-    const wrapper = shallow(<SchemaExistingField {...props} unconfirmed />);
+  it('passes disabled state', () => {
+    const wrapper = shallow(<SchemaFieldTypeSelect {...props} disabled />);
 
-    expect(wrapper.find('.c-stui-engine-schema-field__status').exists()).toBeTruthy();
+    expect(wrapper.find(EuiSelect).prop('disabled')).toEqual(true);
   });
 });
diff --git a/...k/plugins/enterprise_search/public/applications/shared/schema/field_type_select/index.tsx b/...k/plugins/enterprise_search/public/applications/shared/schema/field_type_select/index.tsx
@@ -0,0 +1,39 @@
+/*
+ * 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 { EuiSelect } from '@elastic/eui';
+
+import { SchemaType } from '../types';
+
+interface Props {
+  fieldName: string;
+  fieldType: string;
+  updateExistingFieldType(fieldName: string, fieldType: string): void;
+  disabled?: boolean;
+}
+
+export const SchemaFieldTypeSelect: React.FC<Props> = ({
+  fieldName,
+  fieldType,
+  updateExistingFieldType,
+  disabled,
+}) => {
+  const fieldTypeOptions = Object.values(SchemaType).map((type) => ({ value: type, text: type }));
+  return (
+    <EuiSelect
+      name={fieldName}
+      required
+      value={fieldType}
+      options={fieldTypeOptions}
+      disabled={disabled}
+      onChange={(e) => updateExistingFieldType(fieldName, e.target.value)}
+      data-test-subj="SchemaSelect"
+    />
+  );
+};
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/schema/index.ts b/x-pack/plugins/enterprise_search/public/applications/shared/schema/index.ts
@@ -6,4 +6,4 @@
  */
 
 export { SchemaAddFieldModal } from './schema_add_field_modal';
-export { SchemaExistingField } from './schema_existing_field';
+export { SchemaFieldTypeSelect } from './field_type_select';
diff --git a/...ugins/enterprise_search/public/applications/shared/schema/schema_add_field_modal.test.tsx b/...ugins/enterprise_search/public/applications/shared/schema/schema_add_field_modal.test.tsx
@@ -9,12 +9,12 @@ import React from 'react';
 
 import { shallow, mount } from 'enzyme';
 
-import { EuiFieldText, EuiModal, EuiSelect } from '@elastic/eui';
+import { EuiFieldText, EuiModal } from '@elastic/eui';
 
 import { FIELD_NAME_CORRECTED_PREFIX } from './constants';
 import { SchemaType } from './types';
 
-import { SchemaAddFieldModal } from './';
+import { SchemaFieldTypeSelect, SchemaAddFieldModal } from './';
 
 describe('SchemaAddFieldModal', () => {
   const addNewField = jest.fn();
@@ -77,13 +77,13 @@ describe('SchemaAddFieldModal', () => {
     );
   });
 
-  it('handles option change', () => {
+  it('handles field type select change', () => {
     const wrapper = shallow(<SchemaAddFieldModal {...props} />);
-    wrapper.find(EuiSelect).simulate('change', { target: { value: SchemaType.Number } });
+    const fieldTypeUpdate = wrapper.find(SchemaFieldTypeSelect).prop('updateExistingFieldType');
 
-    expect(wrapper.find('[data-test-subj="SchemaSelect"]').prop('value')).toEqual(
-      SchemaType.Number
-    );
+    fieldTypeUpdate('_', SchemaType.Number); // The fieldName arg is irrelevant for this modal
+
+    expect(wrapper.find(SchemaFieldTypeSelect).prop('fieldType')).toEqual(SchemaType.Number);
   });
 
   it('handles form submission', () => {

diff --git a/...ck/plugins/enterprise_search/public/applications/shared/schema/schema_add_field_modal.tsx b/...ck/plugins/enterprise_search/public/applications/shared/schema/schema_add_field_modal.tsx
@@ -20,14 +20,12 @@ import {
   EuiModalFooter,
   EuiModalHeader,
   EuiModalHeaderTitle,
-  EuiSelect,
   EuiSpacer,
 } from '@elastic/eui';
 
 import { CANCEL_BUTTON_LABEL } from '../constants';
 
 import {
-  fieldTypeSelectOptions,
   FIELD_NAME_CORRECT_NOTE,
   FIELD_NAME_CORRECTED_PREFIX,
   FIELD_NAME_MODAL_TITLE,
@@ -36,6 +34,8 @@ import {
 } from './constants';
 import { SchemaType } from './types';
 
+import { SchemaFieldTypeSelect } from './';
+
 interface ISchemaAddFieldModalProps {
   disableForm?: boolean;
   addFieldFormErrors?: string[] | null;
@@ -113,13 +113,11 @@ export const SchemaAddFieldModal: React.FC<ISchemaAddFieldModalProps> = ({
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiFormRow label="Field type" data-test-subj="SchemaAddFieldTypeRow">
-                  <EuiSelect
-                    name="select-add"
-                    required
-                    value={newFieldType}
-                    options={fieldTypeSelectOptions}
+                  <SchemaFieldTypeSelect
+                    fieldName=""
+                    fieldType={newFieldType}
+                    updateExistingFieldType={(_, type: SchemaType) => updateNewFieldType(type)}
                     disabled={disableForm}
-                    onChange={(e) => updateNewFieldType(e.target.value as SchemaType)}
                     data-test-subj="SchemaSelect"
                   />
                 </EuiFormRow>

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/schema/schema_existing_field.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/schema/schema_existing_field.tsx
diff --git a/...ons/workplace_search/views/content_sources/components/schema/schema_fields_table.test.tsx b/...ons/workplace_search/views/content_sources/components/schema/schema_fields_table.test.tsx
@@ -13,7 +13,7 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { SchemaExistingField } from '../../../../../shared/schema/schema_existing_field';
+import { SchemaFieldTypeSelect } from '../../../../../shared/schema';
 
 import { SchemaFieldsTable } from './schema_fields_table';
 
@@ -31,7 +31,7 @@ describe('SchemaFieldsTable', () => {
     setMockValues({ filterValue, filteredSchemaFields });
     const wrapper = shallow(<SchemaFieldsTable />);
 
-    expect(wrapper.find(SchemaExistingField)).toHaveLength(1);
+    expect(wrapper.find(SchemaFieldTypeSelect)).toHaveLength(1);
   });
 
   it('handles no results', () => {

diff --git a/...ications/workplace_search/views/content_sources/components/schema/schema_fields_table.tsx b/...ications/workplace_search/views/content_sources/components/schema/schema_fields_table.tsx
@@ -21,7 +21,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { SchemaExistingField } from '../../../../../shared/schema/schema_existing_field';
+import { SchemaFieldTypeSelect } from '../../../../../shared/schema';
 
 import {
   SCHEMA_ERRORS_TABLE_FIELD_NAME_HEADER,
@@ -53,11 +53,9 @@ export const SchemaFieldsTable: React.FC = () => {
               </EuiFlexGroup>
             </EuiTableRowCell>
             <EuiTableRowCell align="right">
-              <SchemaExistingField
+              <SchemaFieldTypeSelect
                 disabled={fieldName === 'id'}
-                key={fieldName}
                 fieldName={fieldName}
-                hideName
                 fieldType={filteredSchemaFields[fieldName]}
                 updateExistingFieldType={updateExistingFieldType}
               />

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -7631,7 +7631,6 @@
     "xpack.enterpriseSearch.schema.errorsTable.heading.error": "エラー",
     "xpack.enterpriseSearch.schema.errorsTable.heading.id": "ID",
     "xpack.enterpriseSearch.schema.errorsTable.link.view": "表示",
-    "xpack.enterpriseSearch.schema.existingField.status.recentlyAdded": "最近追加された項目",
     "xpack.enterpriseSearch.setupGuide.cloud.step1.instruction1": "Elastic Cloud コンソールにアクセスして、{editDeploymentLink}。",
     "xpack.enterpriseSearch.setupGuide.cloud.step1.instruction1LinkText": "デプロイの編集",
     "xpack.enterpriseSearch.setupGuide.cloud.step1.title": "デプロイの構成を編集",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -7701,7 +7701,6 @@
     "xpack.enterpriseSearch.schema.errorsTable.heading.error": "错误",
     "xpack.enterpriseSearch.schema.errorsTable.heading.id": "ID",
     "xpack.enterpriseSearch.schema.errorsTable.link.view": "查看",
-    "xpack.enterpriseSearch.schema.existingField.status.recentlyAdded": "最近添加",
     "xpack.enterpriseSearch.setupGuide.cloud.step1.instruction1": "访问 Elastic Cloud 控制台以{editDeploymentLink}。",
     "xpack.enterpriseSearch.setupGuide.cloud.step1.instruction1LinkText": "编辑您的部署",
     "xpack.enterpriseSearch.setupGuide.cloud.step1.title": "编辑您的部署的配置",