[Enterprise Search] Refactor SchemaExistingField component to SchemaFieldTypeSelect (#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 <42973632+kibanamachine@users.noreply.github.com>

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',
-  }
-);

x-pack/plugins/enterprise_search/public/applications/shared/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 />);
+  it('passes disabled state', () => {
+    const wrapper = shallow(<SchemaFieldTypeSelect {...props} disabled />);
 
-    expect(wrapper.find('.c-stui-engine-schema-field__name').contains(props.fieldName)).toBeFalsy();
-  });
-
-  it('renders unconfirmed message', () => {
-    const wrapper = shallow(<SchemaExistingField {...props} unconfirmed />);
-
-    expect(wrapper.find('.c-stui-engine-schema-field__status').exists()).toBeTruthy();
+    expect(wrapper.find(EuiSelect).prop('disabled')).toEqual(true);
   });
 });

x-pack/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"
+    />
+  );
+};

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';

x-pack/plugins/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', () => {

x-pack/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>

x-pack/plugins/enterprise_search/public/applications/shared/schema/schema_existing_field.tsx

@@ -1,56 +0,0 @@
-/*
- * 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 classNames from 'classnames';
-
-import { EuiSelect } from '@elastic/eui';
-
-import { fieldTypeSelectOptions, RECENTY_ADDED } from './constants';
-
-interface ISchemaExistingFieldProps {
-  disabled?: boolean;
-  fieldName: string;
-  fieldType?: string;
-  unconfirmed?: boolean;
-  hideName?: boolean;
-  updateExistingFieldType?(fieldName: string, fieldType: string): void;
-}
-
-export const SchemaExistingField: React.FC<ISchemaExistingFieldProps> = ({
-  disabled,
-  fieldName,
-  fieldType,
-  unconfirmed,
-  hideName,
-  updateExistingFieldType,
-}) => {
-  const fieldCssClass = classNames('c-stui-engine-schema-field', {
-    'c-stui-engine-schema-field--recently-added': unconfirmed,
-  });
-
-  return (
-    <div className={fieldCssClass} id={`field_${fieldName}`}>
-      <div className="c-stui-engine-schema-field__name">{!hideName ? fieldName : ''}</div>
-      {unconfirmed && <div className="c-stui-engine-schema-field__status">{RECENTY_ADDED}</div>}
-      {fieldType && updateExistingFieldType && (
-        <div className="o-stui-select-container o-stui-select-container--align-right">
-          <EuiSelect
-            name={fieldName}
-            required
-            value={fieldType}
-            options={fieldTypeSelectOptions}
-            disabled={disabled}
-            onChange={(e) => updateExistingFieldType(fieldName, e.target.value)}
-            data-test-subj="SchemaSelect"
-          />
-        </div>
-      )}
-    </div>
-  );
-};

x-pack/plugins/enterprise_search/public/applications/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', () => {

x-pack/plugins/enterprise_search/public/applications/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}
               />

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": "デプロイの構成を編集",

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": "编辑您的部署的配置",