From e7eea142ae26cc02002aa6a1ae66b0611ddcb99e Mon Sep 17 00:00:00 2001
From: Konstantin Markov <maga.ot.oz@protonmail.com>
Date: Fri, 10 Jan 2025 00:03:14 +0200
Subject: [PATCH] Contacts field rework (#2173)

---
 client/api/contentProfiles.ts                 |   7 +-
 client/api/utils/constants.ts                 |  13 ++
 .../Assignments/AssignmentEditor.tsx          |   3 +-
 .../AssignmentPreview.tsx                     |   5 +-
 client/components/Contacts/ContactEditor.tsx  | 119 +++++++++++++++
 .../Contacts/ContactEditor/index.tsx          | 127 ----------------
 .../Contacts/ContactField.interface.ts        |  41 ++++++
 client/components/Contacts/ContactField.tsx   | 118 +++++----------
 .../Contacts/ContactInfoContainer/index.tsx   |  54 -------
 client/components/Contacts/ContactLabel.tsx   |  77 +++++-----
 .../components/Contacts/ContactMetaData.tsx   | 101 +++++++++++++
 .../Contacts/ContactMetaData/index.tsx        | 139 ------------------
 .../Contacts/ContactsPreviewList.tsx          |  36 ++---
 .../SelectListPopup.tsx                       |  79 +++++-----
 .../SelectSearchContactsField/index.tsx       |  48 +++---
 client/components/Contacts/index.ts           |   7 -
 .../Coverages/CoveragePreview/index.tsx       |   4 +-
 .../ScheduledUpdate/ScheduledUpdateForm.tsx   |   2 +-
 .../Coverages/ScheduledUpdate/index.tsx       |   7 +-
 client/components/Modal/Footer.tsx            |   7 +-
 client/components/UI/CollapseBox.tsx          |   2 +-
 client/components/UI/FileReadOnlyList.tsx     |   2 +-
 client/components/UI/Popup/Menu.tsx           |  19 +--
 client/components/UI/Popup/Popup.tsx          |  71 ++++-----
 client/components/UI/Preview/Row.tsx          |  51 +++----
 client/components/UI/SearchField/index.tsx    |  49 +++---
 client/components/fields/editor/Contacts.tsx  |   2 +-
 .../fields/editor/CoverageContact.tsx         |   5 +-
 .../fields/editor/Location.interface.ts       |   6 +
 client/components/fields/editor/Location.tsx  |   8 +-
 .../editor/ProfileFieldDefaultValue.tsx       |   3 -
 client/components/fields/preview/Contacts.tsx |   5 +-
 .../field-definitions/category-field.ts       |   3 +-
 .../field-definitions/contacts.ts             |  20 +++
 .../field-definitions/index.ts                |   2 +
 .../profile-fields.ts                         |  18 ++-
 client/extension_bridge.ts                    |  18 ++-
 .../authoring-react-fields/contact/editor.tsx |  33 +++++
 .../authoring-react-fields/contact/index.tsx  |  33 +++++
 .../contact/interfaces.ts                     |   7 +
 .../contact/preview.tsx                       |  12 ++
 client/planning-extension/src/extension.ts    |   2 +
 .../src/extension_bridge.ts                   |  10 +-
 package-lock.json                             |  20 +--
 44 files changed, 690 insertions(+), 705 deletions(-)
 create mode 100644 client/api/utils/constants.ts
 create mode 100644 client/components/Contacts/ContactEditor.tsx
 delete mode 100644 client/components/Contacts/ContactEditor/index.tsx
 create mode 100644 client/components/Contacts/ContactField.interface.ts
 delete mode 100644 client/components/Contacts/ContactInfoContainer/index.tsx
 create mode 100644 client/components/Contacts/ContactMetaData.tsx
 delete mode 100644 client/components/Contacts/ContactMetaData/index.tsx
 delete mode 100644 client/components/Contacts/index.ts
 create mode 100644 client/components/fields/editor/Location.interface.ts
 create mode 100644 client/components/planning-editor-standalone/field-definitions/contacts.ts
 create mode 100644 client/planning-extension/src/authoring-react-fields/contact/editor.tsx
 create mode 100644 client/planning-extension/src/authoring-react-fields/contact/index.tsx
 create mode 100644 client/planning-extension/src/authoring-react-fields/contact/interfaces.ts
 create mode 100644 client/planning-extension/src/authoring-react-fields/contact/preview.tsx

diff --git a/client/api/contentProfiles.ts b/client/api/contentProfiles.ts
index 6136ce23c..81d2d5a48 100644
--- a/client/api/contentProfiles.ts
+++ b/client/api/contentProfiles.ts
@@ -18,6 +18,7 @@ import {sortProfileGroups} from '../utils/contentProfiles';
 import {showModalConnectedToStore} from '../utils/ui';
 import {ContentProfileModal} from '../components/ContentProfiles/ContentProfileModal';
 import {getUsersDefaultLanguage} from '../utils/users';
+import {SYSTEM_REQUIRED_FIELDS} from './utils/constants';
 
 const RESOURCE = 'planning_types';
 
@@ -148,11 +149,7 @@ function showManagePlanningProfileModal(): Promise<void> {
             mainProfile: {
                 label: gettext('Planning Fields'),
                 profile: getProfile('planning'),
-                systemRequiredFields: [
-                    ['planning_date'],
-                    ['slugline', 'headline', 'name'],
-                    ['coverages'],
-                ],
+                systemRequiredFields: SYSTEM_REQUIRED_FIELDS,
                 disableMinMaxFields: [
                     'language',
                     'marked_for_not_publication',
diff --git a/client/api/utils/constants.ts b/client/api/utils/constants.ts
new file mode 100644
index 000000000..6d132f86d
--- /dev/null
+++ b/client/api/utils/constants.ts
@@ -0,0 +1,13 @@
+import {flatMap} from 'lodash';
+
+export const SYSTEM_REQUIRED_FIELDS = [
+    ['planning_date'],
+    ['slugline', 'headline', 'name'],
+    ['coverages'],
+];
+
+export const isSystemRequiredField = (() => {
+    const SYSTEM_REQUIRED_FIELDS_SET = new Set(flatMap(SYSTEM_REQUIRED_FIELDS));
+
+    return (fieldId: string) => SYSTEM_REQUIRED_FIELDS_SET.has(fieldId);
+})();
diff --git a/client/components/Assignments/AssignmentEditor.tsx b/client/components/Assignments/AssignmentEditor.tsx
index 543f2bbf4..a9102c8e4 100644
--- a/client/components/Assignments/AssignmentEditor.tsx
+++ b/client/components/Assignments/AssignmentEditor.tsx
@@ -15,7 +15,8 @@ import {
     SelectInput,
     ColouredValueInput,
 } from '../UI/Form';
-import {ContactsPreviewList, SelectSearchContactsField} from '../Contacts';
+import {ContactsPreviewList} from '../Contacts/ContactsPreviewList';
+import {SelectSearchContactsField} from '../Contacts/SelectSearchContactsField';
 import {superdeskApi} from '../../superdeskApi';
 
 export class AssignmentEditorComponent extends React.Component {
diff --git a/client/components/Assignments/AssignmentPreviewContainer/AssignmentPreview.tsx b/client/components/Assignments/AssignmentPreviewContainer/AssignmentPreview.tsx
index 9ce0d4ef2..cfcd5fdf7 100644
--- a/client/components/Assignments/AssignmentPreviewContainer/AssignmentPreview.tsx
+++ b/client/components/Assignments/AssignmentPreviewContainer/AssignmentPreview.tsx
@@ -14,7 +14,7 @@ import {
 
 import {assignmentUtils, planningUtils} from '../../../utils';
 
-import {ContactsPreviewList} from '../../Contacts';
+import {ContactsPreviewList} from '../../Contacts/ContactsPreviewList';
 import {Row} from '../../UI/Preview';
 import {FileReadOnlyList} from '../../UI';
 import {previewGroupToProfile, renderFieldsForPanel} from '../../fields';
@@ -52,9 +52,6 @@ export class AssignmentPreview extends React.PureComponent<IProps> {
                     <Row label={assignmentUtils.getContactLabel(assignment)}>
                         <ContactsPreviewList
                             contactIds={[contactId]}
-                            scrollInView={true}
-                            scrollIntoViewOptions={{block: 'center'}}
-                            tabEnabled={true}
                         />
                     </Row>
                 )}
diff --git a/client/components/Contacts/ContactEditor.tsx b/client/components/Contacts/ContactEditor.tsx
new file mode 100644
index 000000000..5659e8a73
--- /dev/null
+++ b/client/components/Contacts/ContactEditor.tsx
@@ -0,0 +1,119 @@
+import React from 'react';
+import {gettext} from '../../utils';
+
+import * as ContactFormComponents from 'superdesk-core/scripts/apps/contacts/components/Form';
+import ng from 'superdesk-core/scripts/core/services/ng';
+import {Button, Modal, Spacer} from 'superdesk-ui-framework/react';
+import {IContact} from 'superdesk-api';
+
+interface IProps {
+    currentContact: IContact;
+    onSave: (contact: IContact) => void;
+    closeModal: () => void;
+}
+
+interface IState {
+    dirty: boolean;
+    valid: boolean;
+}
+
+export class ContactEditor extends React.Component<IProps, IState> {
+    contactForm: React.RefObject<ContactFormComponents.ContactFormContainer>;
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            dirty: false,
+            valid: false,
+        };
+        this.contactForm = React.createRef();
+
+        this.onDirty = this.onDirty.bind(this);
+        this.onValidation = this.onValidation.bind(this);
+        this.triggerSave = this.triggerSave.bind(this);
+        this.onSave = this.onSave.bind(this);
+        this.exitEditor = this.exitEditor.bind(this);
+    }
+
+    onDirty() {
+        this.setState({
+            dirty: true,
+        });
+    }
+
+    onValidation(validity) {
+        this.setState({
+            valid: validity,
+        });
+    }
+
+    triggerSave() {
+        if (this.contactForm.current != null) {
+            this.contactForm.current.save();
+        }
+    }
+
+    exitEditor(result) {
+        // wait before exiting contact editor, allowing save changes to be completed on contact form.
+        setTimeout(() => this.props.onSave(result), 800);
+    }
+
+    onSave(result) {
+        this.setState({
+            dirty: false,
+        }, () => {
+            this.exitEditor(result);
+            this.props.closeModal();
+        });
+    }
+
+    render() {
+        const {ContactFormContainer} = ContactFormComponents;
+        const {currentContact} = this.props;
+
+        // Provides required services for Contact components
+        const services = {
+            contacts: ng.get('contacts'),
+            gettext: ng.get('gettext'),
+            notify: ng.get('notify'),
+            privileges: ng.get('privileges'),
+            metadata: ng.get('metadata'),
+        };
+
+        return (
+            <Modal
+                closeOnEscape
+                size="medium"
+                visible
+                headerTemplate={gettext('Add Contact')}
+                footerTemplate={(
+                    <Spacer gap="4" alignItems="end" justifyContent="end" h noGrow>
+                        <Button
+                            onClick={this.props.closeModal}
+                            text={gettext('Cancel')}
+                        />
+                        <Button
+                            style="filled"
+                            type="primary"
+                            onClick={this.triggerSave}
+                            text={gettext('Save')}
+                            disabled={!this.state.valid || !this.state.dirty}
+                        />
+                    </Spacer>
+                )}
+            >
+                <ContactFormContainer
+                    ref={this.contactForm}
+                    contact={currentContact}
+                    svc={services}
+                    onCancel={this.props.closeModal}
+                    onDirty={this.onDirty}
+                    onValidation={this.onValidation}
+                    triggerSave={false}
+                    onSave={this.onSave}
+                    hideActionBar={true}
+                />
+            </Modal>
+        );
+    }
+}
diff --git a/client/components/Contacts/ContactEditor/index.tsx b/client/components/Contacts/ContactEditor/index.tsx
deleted file mode 100644
index 681b564d1..000000000
--- a/client/components/Contacts/ContactEditor/index.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import React from 'react';
-import {Modal} from '../../index';
-import {gettext} from '../../../utils';
-
-import * as ContactFormComponents from 'superdesk-core/scripts/apps/contacts/components/Form';
-import {IContact} from 'superdesk-core/scripts/apps/contacts/Contacts';
-import ng from 'superdesk-core/scripts/core/services/ng';
-
-interface IProps {
-    currentContact: IContact;
-    onCancel(): void;
-    onSave(contact: IContact): void;
-}
-
-interface IState {
-    showModal: boolean;
-    dirty: boolean;
-    valid: boolean;
-}
-
-export class ContactEditor extends React.Component<IProps, IState> {
-    contactForm: React.RefObject<ContactFormComponents.ContactFormContainer>;
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            showModal: true,
-            dirty: false,
-            valid: false,
-        };
-        this.contactForm = React.createRef();
-
-        this.handleCancel = this.handleCancel.bind(this);
-        this.onDirty = this.onDirty.bind(this);
-        this.onValidation = this.onValidation.bind(this);
-        this.triggerSave = this.triggerSave.bind(this);
-        this.onSave = this.onSave.bind(this);
-        this.exitEditor = this.exitEditor.bind(this);
-    }
-
-    handleCancel() {
-        this.setState({
-            showModal: false,
-        }, () => this.props.onCancel());
-    }
-
-    onDirty() {
-        this.setState({
-            dirty: true,
-        });
-    }
-
-    onValidation(validity) {
-        this.setState({
-            valid: validity,
-        });
-    }
-
-    triggerSave() {
-        if (this.contactForm.current != null) {
-            this.contactForm.current.save();
-        }
-    }
-
-    exitEditor(result) {
-        // wait before exiting contact editor, allowing save changes to be completed on contact form.
-        setTimeout(() => this.props.onSave(result), 800);
-    }
-
-    onSave(result) {
-        this.setState({
-            dirty: false,
-            showModal: false,
-        }, () => this.exitEditor(result));
-    }
-
-    render() {
-        const {ContactFormContainer, ActionBar} = ContactFormComponents;
-        const {currentContact} = this.props;
-
-        // Provides required services for Contact components
-        const services = {
-            contacts: ng.get('contacts'),
-            gettext: ng.get('gettext'),
-            notify: ng.get('notify'),
-            privileges: ng.get('privileges'),
-            metadata: ng.get('metadata'),
-        };
-
-        return (
-            <Modal
-                className="contact-details-pane contact-details-pane--editor"
-                large={true}
-                show={this.state.showModal}
-            >
-                <Modal.Header>
-                    <h3 className="modal__heading">{gettext('Add Contact')}</h3>
-                    <a className="icn-btn" aria-label={gettext('Close')} onClick={this.handleCancel}>
-                        <i className="icon-close-small" />
-                    </a>
-                </Modal.Header>
-                <Modal.Body>
-                    <ContactFormContainer
-                        ref={this.contactForm}
-                        contact={currentContact}
-                        svc={services}
-                        onCancel={this.handleCancel}
-                        onDirty={this.onDirty}
-                        onValidation={this.onValidation}
-                        triggerSave={false}
-                        onSave={this.onSave}
-                        hideActionBar={true}
-                    />
-                </Modal.Body>
-                <Modal.Footer>
-                    <ActionBar
-                        svc={services}
-                        onCancel={this.handleCancel}
-                        dirty={this.state.dirty}
-                        valid={this.state.valid}
-                        onSave={this.triggerSave}
-                    />
-                </Modal.Footer>
-            </Modal>
-        );
-    }
-}
diff --git a/client/components/Contacts/ContactField.interface.ts b/client/components/Contacts/ContactField.interface.ts
new file mode 100644
index 000000000..8db613775
--- /dev/null
+++ b/client/components/Contacts/ContactField.interface.ts
@@ -0,0 +1,41 @@
+import {IPrivileges} from '../../interfaces';
+import {IContact} from 'superdesk-api';
+
+interface IBaseProps extends IContactReduxStateProps, IContactReduxDispatchProps {
+    field: string;
+    label: string;
+    querySearch?: boolean;
+    readOnly?: boolean;
+    paddingTop?: boolean;
+    testId?: string;
+    onFocus?(): void;
+    refNode?(node: HTMLElement): void;
+    onPopupOpen?(): void;
+    onPopupClose?(): void;
+}
+
+interface ISingleContactProps extends IBaseProps {
+    singleValue: true;
+    value: IContact['_id'] | null;
+    onChange(field: string, value: IContact['_id'] | null): void;
+}
+
+interface IMultiContactProps extends IBaseProps {
+    singleValue: false;
+    value: Array<IContact['_id']> | null;
+    onChange(field: string, value: Array<IContact['_id']>): void;
+}
+
+export type IContactFieldProps = ISingleContactProps | IMultiContactProps;
+
+export interface IContactReduxDispatchProps {
+    addContact(newContact: Partial<IContact>): void;
+}
+
+export interface IContactReduxStateProps {
+    contacts: Array<IContact>;
+    privileges: IPrivileges;
+}
+
+export type IContactPropsNoRedux =
+    Omit<IContactFieldProps, keyof IContactReduxStateProps | keyof IContactReduxDispatchProps>;
diff --git a/client/components/Contacts/ContactField.tsx b/client/components/Contacts/ContactField.tsx
index ec7d0afa4..7fabcb5b2 100644
--- a/client/components/Contacts/ContactField.tsx
+++ b/client/components/Contacts/ContactField.tsx
@@ -1,49 +1,14 @@
 import React from 'react';
 import {connect} from 'react-redux';
-
 import {superdeskApi} from '../../superdeskApi';
-import {IContactItem, IPrivileges} from '../../interfaces';
-
 import * as selectors from '../../selectors';
 import * as actions from '../../actions';
-
-import {ContactEditor, SelectSearchContactsField, ContactsPreviewList} from './index';
-
-interface IBaseProps {
-    field: string;
-    label: string;
-    querySearch?: boolean;
-    contacts: Array<IContactItem>;
-    privileges: IPrivileges;
-    readOnly?: boolean;
-    paddingTop?: boolean;
-    testId?: string;
-
-    onFocus?(): void;
-    refNode?(node: HTMLElement): void;
-    addContact(contact: Partial<IContactItem>): void;
-    onPopupOpen?(): void;
-    onPopupClose?(): void;
-}
-
-interface ISingleContactProps extends IBaseProps {
-    singleValue: true;
-    value: IContactItem['_id'] | null;
-    onChange(field: string, value: IContactItem['_id'] | null): void;
-}
-
-interface IMultiContactProps extends IBaseProps {
-    singleValue: false;
-    value: Array<IContactItem['_id']> | null;
-    onChange(field: string, value: Array<IContactItem['_id']>): void;
-}
-
-type IProps = ISingleContactProps | IMultiContactProps;
-
-interface IState {
-    showEditModal: boolean;
-    editContact?: IContactItem;
-}
+import {ContactEditor} from './ContactEditor';
+import {SelectSearchContactsField} from './SelectSearchContactsField';
+import {ContactsPreviewList} from './ContactsPreviewList';
+import {IContact, Omit} from 'superdesk-api';
+import {showModal} from '@sourcefabric/common';
+import {IContactFieldProps, IContactReduxStateProps, IContactReduxDispatchProps} from './ContactField.interface';
 
 const mapStateToProps = (state) => ({
     contacts: selectors.general.contacts(state),
@@ -54,37 +19,34 @@ const mapDispatchToProps = (dispatch) => ({
     addContact: (newContact) => dispatch(actions.contacts.addContact(newContact)),
 });
 
-export class ContactFieldComponent extends React.Component<IProps, IState> {
+class ContactFieldComponent extends React.Component<IContactFieldProps> {
     constructor(props) {
         super(props);
 
-        this.state = {
-            showEditModal: false,
-            editContact: null,
-        };
-
         this.onChange = this.onChange.bind(this);
         this.showEditModal = this.showEditModal.bind(this);
-        this.closeEditModal = this.closeEditModal.bind(this);
         this.removeContact = this.removeContact.bind(this);
-        this.onContactSaved = this.onContactSaved.bind(this);
-    }
-
-    showEditModal(contact) {
-        this.setState({
-            showEditModal: true,
-            editContact: contact || {public: false, is_active: true},
-        });
     }
 
-    closeEditModal() {
-        this.setState({
-            showEditModal: false,
-            editContact: null,
-        });
+    /**
+     * @param contact optional because on create there's no contact
+     */
+    showEditModal(contact?: IContact) {
+        const fullContact = contact || ({public: false, is_active: true}) as IContact;
+
+        return showModal(({closeModal}) => (
+            <ContactEditor
+                closeModal={closeModal}
+                currentContact={fullContact}
+                onSave={(contact) => {
+                    this.onChange(contact);
+                    closeModal();
+                }}
+            />
+        ));
     }
 
-    removeContact(contact: IContactItem) {
+    removeContact(contact: IContact) {
         if (this.props.singleValue === true) {
             if (this.props.value === contact._id) {
                 this.props.onChange(this.props.field, null);
@@ -100,12 +62,7 @@ export class ContactFieldComponent extends React.Component<IProps, IState> {
         }
     }
 
-    onContactSaved(contact) {
-        this.onChange(contact);
-        this.closeEditModal();
-    }
-
-    onChange(savedContact: Partial<IContactItem>) {
+    onChange(savedContact: Partial<IContact>) {
         // Update the redux store
         this.props.addContact(savedContact);
 
@@ -118,7 +75,7 @@ export class ContactFieldComponent extends React.Component<IProps, IState> {
             this.props.onChange(
                 this.props.field,
                 [
-                    ...this.props.value,
+                    ...(this.props.value ?? []),
                     savedContact._id,
                 ]
             );
@@ -139,7 +96,7 @@ export class ContactFieldComponent extends React.Component<IProps, IState> {
             readOnly,
         } = this.props;
 
-        let value: Array<IContactItem['_id']>;
+        let value: Array<IContact['_id']>;
 
         if (this.props.value == null) {
             value = [];
@@ -160,37 +117,28 @@ export class ContactFieldComponent extends React.Component<IProps, IState> {
                     label={label}
                     onChange={this.onChange}
                     value={value}
-                    onAdd={privileges.contacts ? this.showEditModal : null}
+                    onAdd={privileges.contacts ? this.showEditModal : undefined}
                     onAddText={privileges.contacts ? gettext('Add Contact') : null}
                     onFocus={onFocus}
                     readOnly={readOnly}
                     onPopupOpen={onPopupOpen}
                     onPopupClose={onPopupClose}
                 />
-
                 <ContactsPreviewList
                     contactIds={value}
                     onEditContact={privileges.contacts ? this.showEditModal : null}
                     onRemoveContact={privileges.contacts ? this.removeContact : null}
-                    scrollInView={true}
-                    scrollIntoViewOptions={{block: 'center'}}
-                    tabEnabled={true}
-                    readOnly={this.props.readOnly}
                 />
-
-                {this.state.showEditModal && this.state.editContact != null && (
-                    <ContactEditor
-                        onCancel={this.closeEditModal}
-                        currentContact={this.state.editContact}
-                        onSave={this.onContactSaved}
-                    />
-                )}
             </div>
         );
     }
 }
 
-export const ContactField = connect(
+export const ContactField = connect<
+    IContactReduxStateProps,
+    IContactReduxDispatchProps,
+    Omit<IContactFieldProps, keyof IContactReduxStateProps | keyof IContactReduxDispatchProps>
+>(
     mapStateToProps,
     mapDispatchToProps
 )(ContactFieldComponent);
diff --git a/client/components/Contacts/ContactInfoContainer/index.tsx b/client/components/Contacts/ContactInfoContainer/index.tsx
deleted file mode 100644
index ff1745ff6..000000000
--- a/client/components/Contacts/ContactInfoContainer/index.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import * as ContactComponents from 'superdesk-core/scripts/apps/contacts/components/index';
-import {renderContents} from 'superdesk-core/scripts/apps/contacts/helpers';
-import ng from 'superdesk-core/scripts/core/services/ng';
-
-
-export class ContactInfoContainer extends React.Component {
-    constructor(props) {
-        super(props);
-        this.handleCancel = this.handleCancel.bind(this);
-    }
-
-    handleCancel() {
-        this.props.onCancel();
-    }
-
-    render() {
-        const {ContactHeader, ContactInfo, ContactFooter} = ContactComponents;
-
-        // Provides required services for Contact components
-        const services = {
-            gettextCatalog: ng.get('gettextCatalog'),
-            $filter: ng.get('$filter'),
-            datetime: ng.get('datetime'),
-        };
-
-        let contents = [
-            'div',
-            {
-                className: 'sd-grid-item contacts',
-            },
-        ];
-
-        contents.push(
-            <ContactHeader item={this.props.currentContact} svc={services} />,
-            <ContactInfo item={this.props.currentContact} svc={services} labelInactive />,
-            <ContactFooter item={this.props.currentContact} svc={services} />
-        );
-
-        return (
-            <div className="contact-popup">
-                <span className="">{renderContents(contents)}</span>
-            </div>
-        );
-    }
-}
-
-ContactInfoContainer.propTypes = {
-    onCancel: PropTypes.func,
-    currentContact: PropTypes.object,
-    target: PropTypes.string,
-};
diff --git a/client/components/Contacts/ContactLabel.tsx b/client/components/Contacts/ContactLabel.tsx
index 7b05a4c74..145a7f2ea 100644
--- a/client/components/Contacts/ContactLabel.tsx
+++ b/client/components/Contacts/ContactLabel.tsx
@@ -1,44 +1,47 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import {get} from 'lodash';
+import {IContact} from 'superdesk-api';
+import {Spacer} from 'superdesk-ui-framework/react';
 
-import {Item, Column} from '../UI/List';
+interface IProps {
+    contact: IContact;
+}
 
-export const ContactLabel = ({contact}) => (
-    <div className="contact-info">
-        <figure
-            className={classNames(
-                'avatar',
-                {organisation: !contact.first_name}
-            )}
-        />
-        <div className="contact-info__data">
-            <h5 className="contact-info__name">
-                {contact.first_name ?
-                    `${contact.first_name} ${contact.last_name} ` :
-                    `${contact.organisation} `
-                }
-                {(contact.first_name && contact.job_title && contact.organisation) && (
-                    <span className="contact-info__job-info">, {contact.job_title}, {contact.organisation}</span>
+export const ContactLabel: React.FunctionComponent<IProps> = ({contact}) => (
+    <div
+        style={{
+            padding: 4,
+            paddingBlockStart: 10,
+        }}
+    >
+        <Spacer h gap="16" justifyContent="center">
+            <div
+                style={{
+                    backgroundColor: 'var(--sd-colour-success)',
+                    borderRadius: '50%',
+                    padding: 4,
+                    width: 32,
+                    height: 32,
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center'
+                }}
+            >
+                <i style={{color: 'white'}} className={`${contact.first_name ? 'icon-user' : 'icon-business'}`} />
+            </div>
+            <div className="contact-info__data">
+                <h5 className="contact-info__name">
+                    {contact.first_name ? `${contact.first_name} ${contact.last_name} ` : `${contact.organisation}`}
+                    {(contact.first_name && contact.job_title && contact.organisation) && (
+                        <span className="contact-info__job-info">, {contact.job_title}, {contact.organisation}</span>
+                    )}
+                </h5>
+                {contact.contact_email[0] && (
+                    <span className="contact-info__mail">
+                        {contact.contact_email[0]}
+                    </span>
                 )}
-            </h5>
-
-            {get(contact, 'contact_email[0]') && (
-                <span className="contact-info__mail">
-                    {contact.contact_email[0]}
-                </span>
-            )}
-        </div>
+            </div>
+        </Spacer>
     </div>
 );
-
-ContactLabel.propTypes = {
-    contact: PropTypes.shape({
-        first_name: PropTypes.string,
-        last_name: PropTypes.string,
-        organisation: PropTypes.string,
-        job_title: PropTypes.string,
-        contact_email: PropTypes.arrayOf(PropTypes.string),
-    }),
-};
diff --git a/client/components/Contacts/ContactMetaData.tsx b/client/components/Contacts/ContactMetaData.tsx
new file mode 100644
index 000000000..4c1884dec
--- /dev/null
+++ b/client/components/Contacts/ContactMetaData.tsx
@@ -0,0 +1,101 @@
+import * as React from 'react';
+import {superdeskApi} from '../../superdeskApi';
+import {onEventCapture} from '../../utils';
+import {StateLabel} from '..';
+import {ContactLabel} from './ContactLabel';
+import './SelectSearchContactsField/style.scss';
+import * as ContactComponents from 'superdesk-core/scripts/apps/contacts/components/index';
+import {IconButton, Spacer, ToggleBox} from 'superdesk-ui-framework/react';
+import ng from 'superdesk-core/scripts/core/services/ng';
+import {IContact} from 'superdesk-api';
+
+interface IProps {
+    contact: IContact;
+    readOnly?: boolean;
+    onEditContact(): void;
+    onRemoveContact(): void;
+}
+
+interface IState {
+    isOpen: boolean;
+}
+
+export class ContactMetaData extends React.PureComponent<IProps, IState> {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isOpen: false,
+        };
+
+        this.editContact = this.editContact.bind(this);
+        this.removeContact = this.removeContact.bind(this);
+    }
+
+    editContact(event: React.MouseEvent<HTMLButtonElement>) {
+        onEventCapture(event);
+        this.props.onEditContact();
+    }
+
+    removeContact(event: React.MouseEvent<HTMLButtonElement>) {
+        onEventCapture(event);
+        this.props.onRemoveContact();
+    }
+
+    render() {
+        const {gettext} = superdeskApi.localization;
+        const {ContactInfo, ContactFooter} = ContactComponents;
+        const {
+            contact,
+            onEditContact,
+            onRemoveContact,
+            readOnly,
+        } = this.props;
+
+        return (
+            <ToggleBox
+                onToggle={(isOpen) => {
+                    this.setState({
+                        isOpen,
+                    });
+                }}
+                header={(
+                    <div style={{backgroundColor: 'white', padding: 4}}>
+                        <Spacer gap="0" h noWrap justifyContent="start">
+                            <ContactLabel contact={contact} />
+                            <StateLabel
+                                item={contact}
+                                verbose={true}
+                                className="pull-right"
+                                fieldName="is_active"
+                            />
+                            <Spacer h gap="4" noWrap justifyContent="end" alignItems="center">
+                                {((!readOnly && onEditContact) && (
+                                    <IconButton
+                                        icon="pencil"
+                                        aria-label={gettext('Edit Contact')}
+                                        ariaValue={gettext('Edit Contact')}
+                                        onClick={this.editContact}
+                                    />
+                                ))}
+                                {((!readOnly && onRemoveContact) && (
+                                    <IconButton
+                                        ariaValue={gettext('Remove Contact')}
+                                        icon="trash"
+                                        aria-label={gettext('Remove Contact')}
+                                        onClick={this.removeContact}
+                                    />
+                                ))}
+                            </Spacer>
+                        </Spacer>
+                    </div>
+                )}
+                getToggleButtonLabel={(isOpen) => isOpen ? gettext('Show less') : gettext('Show more')}
+                variant="custom-header"
+            >
+                <ContactInfo hideHeader={this.state.isOpen} item={this.props.contact} />
+                <ContactFooter item={this.props.contact} />
+            </ToggleBox>
+        );
+    }
+}
diff --git a/client/components/Contacts/ContactMetaData/index.tsx b/client/components/Contacts/ContactMetaData/index.tsx
deleted file mode 100644
index 0983b7017..000000000
--- a/client/components/Contacts/ContactMetaData/index.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import * as React from 'react';
-
-import {IContactItem} from '../../../interfaces';
-import {superdeskApi} from '../../../superdeskApi';
-
-import {onEventCapture} from '../../../utils';
-
-import {StateLabel} from '../../';
-import {Item, Column, Row, ActionMenu} from '../../UI/List';
-import {CollapseBox, IconButton} from '../../UI';
-import {ContactInfoContainer, ContactLabel} from '../';
-
-
-import '../SelectSearchContactsField/style.scss';
-
-interface IProps {
-    contact: IContactItem;
-    scrollInView?: boolean; // defaults to true
-    scrollIntoViewOptions?: any;
-    tabEnabled?: boolean;
-    active?: boolean;
-    readOnly?: boolean;
-    inner?: boolean;
-
-    onEditContact(): void;
-    onRemoveContact(): void;
-}
-
-export class ContactMetaData extends React.PureComponent<IProps> {
-    constructor(props) {
-        super(props);
-
-        this.editContact = this.editContact.bind(this);
-        this.removeContact = this.removeContact.bind(this);
-    }
-
-    editContact(event: React.MouseEvent<HTMLButtonElement>) {
-        onEventCapture(event);
-        this.props.onEditContact();
-    }
-
-    removeContact(event: React.MouseEvent<HTMLButtonElement>) {
-        onEventCapture(event);
-        this.props.onRemoveContact();
-    }
-
-    render() {
-        const {gettext} = superdeskApi.localization;
-        const {
-            contact,
-            scrollInView = true,
-            scrollIntoViewOptions,
-            tabEnabled,
-            onEditContact,
-            onRemoveContact,
-            active,
-            readOnly,
-            inner,
-        } = this.props;
-
-        const contactActions = [];
-
-        if (!readOnly) {
-            if (onEditContact) {
-                contactActions.push(
-                    <IconButton
-                        icon="icon-pencil"
-                        aria-label={gettext('Edit Contact')}
-                        tabIndex={this.props.tabEnabled ? 0 : null}
-                        onClick={this.editContact}
-                    />
-                );
-            }
-
-            if (onRemoveContact) {
-                contactActions.push(
-                    <IconButton
-                        icon="icon-trash"
-                        aria-label={gettext('Remove Contact')}
-                        tabIndex={this.props.tabEnabled ? 0 : null}
-                        onClick={this.removeContact}
-                    />
-                );
-            }
-        }
-
-        const contactListView = (
-            <div>
-                <Item noBg={!active} activated={active} margin={false}>
-                    <div className="sd-list-item__border" />
-                    <Column grow={true} border={false}>
-                        <Row>
-                            <ContactLabel contact={contact} />
-                        </Row>
-                    </Column>
-                    <Column border={false}>
-                        <StateLabel
-                            item={contact}
-                            verbose={true}
-                            className="pull-right"
-                            fieldName="is_active"
-                        />
-                    </Column>
-                    {contactActions.map(
-                        (actionComponent, index) => (
-                            <ActionMenu
-                                key={index}
-                                className="pull-right"
-                            >
-                                {actionComponent}
-                            </ActionMenu>
-                        )
-                    )}
-                </Item>
-            </div>
-        );
-
-        const contactInDetail = (
-            <ContactInfoContainer
-                target="sd-list-item__border"
-                currentContact={contact}
-            />
-        );
-
-        return (
-            <div className="contact-metadata list-item-view">
-                <CollapseBox
-                    collapsedItem={contactListView}
-                    openItem={contactInDetail}
-                    scrollInView={scrollInView}
-                    scrollIntoViewOptions={scrollIntoViewOptions}
-                    tabEnabled={tabEnabled}
-                    tools={contactActions}
-                    inner={inner}
-                />
-            </div>
-        );
-    }
-}
diff --git a/client/components/Contacts/ContactsPreviewList.tsx b/client/components/Contacts/ContactsPreviewList.tsx
index 27c75e594..92d2fd9cc 100644
--- a/client/components/Contacts/ContactsPreviewList.tsx
+++ b/client/components/Contacts/ContactsPreviewList.tsx
@@ -1,32 +1,24 @@
 import React from 'react';
 import {connect} from 'react-redux';
 import {difference, isEqual} from 'lodash';
-
-import {IContactItem} from '../../interfaces';
-
+import {IContact} from 'superdesk-api';
+import {ContactMetaData} from './ContactMetaData';
+import {Spacer} from 'superdesk-ui-framework/react';
 import * as selectors from '../../selectors';
 import * as actions from '../../actions';
-
-import {ContactMetaData} from './';
 import './style.scss';
 
 interface IProps {
-    contacts?: {[key: string]: IContactItem};
-    contactIds: Array<IContactItem['_id']>;
-    scrollInView?: boolean;
-    scrollIntoViewOptions: any;
-    tabEnabled?: boolean;
-    readOnly?: boolean;
-    inner?: boolean;
-
-    fetchContacts(ids: Array<IContactItem['_id']>): Promise<IContactItem>;
-    onEditContact?(contact: IContactItem): void;
-    onRemoveContact?(contact: IContactItem): void;
+    contacts?: {[key: string]: IContact};
+    contactIds: Array<IContact['_id']>;
+    fetchContacts(ids: Array<IContact['_id']>): Promise<IContact>;
+    onEditContact?(contact: IContact): void;
+    onRemoveContact?(contact: IContact): void;
 }
 
 interface IState {
     fetchingContacts: boolean;
-    fetchingIds: Array<IContactItem['_id']>;
+    fetchingIds: Array<IContact['_id']>;
 }
 
 const mapStateToProps = (state) => ({
@@ -75,7 +67,7 @@ class ContactsPreviewListComponent extends React.Component<IProps, IState> {
             .then(this.receiveContacts);
     }
 
-    receiveContacts(contacts) {
+    receiveContacts() {
         // This component may have been unmounted while fetching the data
         // So only update the state if this is still mounted
         if (this._isMounted) {
@@ -92,7 +84,7 @@ class ContactsPreviewListComponent extends React.Component<IProps, IState> {
         }
     }
 
-    componentDidUpdate(prevProps) {
+    componentDidUpdate() {
         if (this.fetchContactsRequired()) {
             this.fetchContacts();
         }
@@ -103,19 +95,17 @@ class ContactsPreviewListComponent extends React.Component<IProps, IState> {
     }
 
     render() {
-        // eslint-disable-next-line no-unused-vars
         const {
             contactIds,
             fetchContacts,
             onEditContact,
             onRemoveContact,
             contacts,
-            scrollInView,
             ...props
         } = this.props;
 
         return (
-            <div className="contacts-list__holder">
+            <Spacer v gap="8" justifyContent="center" alignItems="center">
                 {(contactIds || []).map((contactId) => (contacts[contactId] == null ? null : (
                     <ContactMetaData
                         key={contactId}
@@ -131,7 +121,7 @@ class ContactsPreviewListComponent extends React.Component<IProps, IState> {
                         }
                     />
                 )))}
-            </div>
+            </Spacer>
         );
     }
 }
diff --git a/client/components/Contacts/SelectSearchContactsField/SelectListPopup.tsx b/client/components/Contacts/SelectSearchContactsField/SelectListPopup.tsx
index e25a9a127..861235b32 100644
--- a/client/components/Contacts/SelectSearchContactsField/SelectListPopup.tsx
+++ b/client/components/Contacts/SelectSearchContactsField/SelectListPopup.tsx
@@ -1,25 +1,49 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import classNames from 'classnames';
 import {get} from 'lodash';
-
 import * as actions from '../../../actions';
 import {contactsLoading, contactsTotal, contactsPage} from '../../../selectors/general';
 import {CONTACTS} from '../../../constants';
-
 import {uiUtils, onEventCapture, gettext} from '../../../utils';
 import {KEYCODES} from '../../../constants';
-
 import {SearchField, Button} from '../../UI';
+import {IContact} from 'superdesk-api';
 import {Popup} from '../../UI/Popup';
+import {ContactLabel} from '../ContactLabel';
+import './style.scss';
 
-import {ContactLabel} from '../';
+interface IProps {
+    onChange: (value: IContact) => void;
+    value?: Array<string>;
+    target?: string;
+    onFocus?: () => void;
+    onAdd?: () => void;
+    onAddText?: string;
+    readOnly?: boolean;
+    searchContacts?: (text: string, contactType: string, page: number) => Promise<any>;
+    onPopupOpen?: () => void;
+    onPopupClose?: () => void;
+    contactType?: string;
+    minLength?: number;
+    placeholder?: string;
+    page?: number;
+    loading?: boolean;
+    total?: number;
+}
 
-import './style.scss';
+interface IState {
+    search: boolean;
+    activeOptionIndex: number;
+    openFilterList: boolean;
+    filteredList: Array<any>;
+    options: Array<any>;
+    searchText: string;
+}
 
+export class SelectListPopupComponent extends React.Component<IProps, IState> {
+    dom: {listItems: any; searchField: any;};
 
-export class SelectListPopupComponent extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -50,12 +74,12 @@ export class SelectListPopupComponent extends React.Component {
         }
     }
 
-    onKeyDown(event) {
+    onKeyDown(event: KeyboardEvent) {
         if (event) {
             switch (event.keyCode) {
             case KEYCODES.ENTER:
                 onEventCapture(event);
-                this.handleEnterKey(event);
+                this.handleEnterKey();
                 break;
             case KEYCODES.DOWN:
                 onEventCapture(event);
@@ -63,7 +87,7 @@ export class SelectListPopupComponent extends React.Component {
                 break;
             case KEYCODES.UP:
                 onEventCapture(event);
-                this.handleUpArrowKey(event);
+                this.handleUpArrowKey();
                 break;
             }
         }
@@ -85,7 +109,7 @@ export class SelectListPopupComponent extends React.Component {
         }
     }
 
-    handleUpArrowKey(event) {
+    handleUpArrowKey() {
         this.setState({activeOptionIndex: this.state.activeOptionIndex - 1});
         uiUtils.scrollListItemIfNeeded(this.state.activeOptionIndex, this.dom.listItems);
     }
@@ -105,13 +129,13 @@ export class SelectListPopupComponent extends React.Component {
         }
     }
 
-    onAdd(event) {
+    onAdd() {
         this.closeSearchList();
         this.dom.searchField.resetSearch();
         this.props.onAdd();
     }
 
-    onSelect(opt) {
+    onSelect(opt: IContact) {
         if (this.state.openFilterList) {
             this.props.onChange(opt);
             this.dom.searchField.resetSearch();
@@ -119,12 +143,14 @@ export class SelectListPopupComponent extends React.Component {
         }
     }
 
-    getFilteredOptionList(searchList) {
+    getFilteredOptionList(searchList?: Array<any>) {
         return searchList ? searchList : this.state.options;
     }
 
     filterSearchResults(val) {
-        if (this.props.minLength > 0 && (!val || get(val, 'length') < this.props.minLength)) {
+        const minLen = this.props.minLength ?? 1;
+
+        if (minLen > 0 && (!val || get(val, 'length') < minLen)) {
             this.setState({
                 search: false,
                 filteredList: this.getFilteredOptionList(),
@@ -238,7 +264,7 @@ export class SelectListPopupComponent extends React.Component {
                                 }
 
                                 {this.props.onAdd && (
-                                    <li tabIndex="0">
+                                    <li>
                                         <Button
                                             size="small"
                                             expanded={true}
@@ -258,27 +284,6 @@ export class SelectListPopupComponent extends React.Component {
     }
 }
 
-SelectListPopupComponent.propTypes = {
-    onChange: PropTypes.func.isRequired,
-    value: PropTypes.arrayOf(PropTypes.string),
-    target: PropTypes.string,
-    onFocus: PropTypes.func,
-    onAdd: PropTypes.func,
-    onAddText: PropTypes.string,
-    readOnly: PropTypes.bool,
-    searchContacts: PropTypes.func,
-    onPopupOpen: PropTypes.func,
-    onPopupClose: PropTypes.func,
-    contactType: PropTypes.string,
-    minLength: PropTypes.number,
-    placeholder: PropTypes.string,
-    page: PropTypes.number,
-    loading: PropTypes.bool,
-    total: PropTypes.number,
-};
-
-SelectListPopupComponent.defaultProps = {minLength: 1};
-
 const mapStateToProps = (state) => ({
     loading: contactsLoading(state),
     total: contactsTotal(state),
diff --git a/client/components/Contacts/SelectSearchContactsField/index.tsx b/client/components/Contacts/SelectSearchContactsField/index.tsx
index 9a8b37700..f0abbf4ab 100644
--- a/client/components/Contacts/SelectSearchContactsField/index.tsx
+++ b/client/components/Contacts/SelectSearchContactsField/index.tsx
@@ -1,12 +1,30 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {SelectListPopup} from './SelectListPopup';
 import {LineInput, Label} from '../../UI/Form';
-
+import {IContact} from 'superdesk-api';
 import './style.scss';
 
+interface IProps {
+    value: Array<string>;
+    label: string;
+    readOnly: boolean;
+    field: string;
+    onAddText?: string;
+    contactType?: string;
+    minLengthPopup?: number;
+    placeholder?: string;
+    onPopupOpen: () => void;
+    onPopupClose: () => void;
+    onChange: (contact: IContact) => void;
+    onAdd?: () => void;
+    onFocus?: () => void;
+}
 
-export class SelectSearchContactsField extends React.Component {
+interface IState {
+    openSelectPopup: boolean;
+}
+
+export class SelectSearchContactsField extends React.Component<IProps, IState> {
     constructor(props) {
         super(props);
         this.state = {openSelectPopup: true};
@@ -19,7 +37,7 @@ export class SelectSearchContactsField extends React.Component {
         this.setState({openSelectPopup: !this.state.openSelectPopup});
     }
 
-    onChange(contact) {
+    onChange(contact: IContact) {
         this.props.onChange(contact);
         this.toggleOpenSelectPopup();
     }
@@ -33,7 +51,7 @@ export class SelectSearchContactsField extends React.Component {
             onFocus,
             readOnly,
             contactType,
-            minLengthPopup,
+            minLengthPopup = 1,
             placeholder,
             ...props
         } = this.props;
@@ -62,23 +80,3 @@ export class SelectSearchContactsField extends React.Component {
     }
 }
 
-SelectSearchContactsField.propTypes = {
-    value: PropTypes.arrayOf(PropTypes.string),
-    label: PropTypes.string,
-    readOnly: PropTypes.bool,
-    onChange: PropTypes.func,
-    required: PropTypes.bool,
-    field: PropTypes.string.isRequired,
-    onAdd: PropTypes.func,
-    onAddText: PropTypes.string,
-    onFocus: PropTypes.func,
-    contactType: PropTypes.string,
-    minLengthPopup: PropTypes.number,
-    placeholder: PropTypes.string,
-};
-
-SelectSearchContactsField.defaultProps = {
-    required: false,
-    readOnly: false,
-    minLengthPopup: 1,
-};
diff --git a/client/components/Contacts/index.ts b/client/components/Contacts/index.ts
deleted file mode 100644
index c59f4437a..000000000
--- a/client/components/Contacts/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export {ContactInfoContainer} from './ContactInfoContainer';
-export {ContactEditor} from './ContactEditor';
-export {ContactField} from './ContactField';
-export {SelectSearchContactsField} from './SelectSearchContactsField';
-export {ContactMetaData} from './ContactMetaData';
-export {ContactsPreviewList} from './ContactsPreviewList';
-export {ContactLabel} from './ContactLabel';
diff --git a/client/components/Coverages/CoveragePreview/index.tsx b/client/components/Coverages/CoveragePreview/index.tsx
index 5dd528259..3e46669f9 100644
--- a/client/components/Coverages/CoveragePreview/index.tsx
+++ b/client/components/Coverages/CoveragePreview/index.tsx
@@ -16,7 +16,7 @@ import {Row as PreviewRow} from '../../UI/Preview';
 import {CollapseBox, FileReadOnlyList} from '../../UI';
 import {assignmentUtils, planningUtils} from '../../../utils';
 import {getUserInterfaceLanguageFromCV} from '../../../utils/users';
-import {ContactsPreviewList} from '../../Contacts';
+import {ContactsPreviewList} from '../../Contacts/ContactsPreviewList';
 import {PLANNING, WORKFLOW_STATE} from '../../../constants';
 import {CoverageItem} from '../';
 import {CoveragePreviewTopBar} from './CoveragePreviewTopBar';
@@ -114,8 +114,6 @@ export class CoveragePreview extends React.PureComponent<IProps> {
                     >
                         <ContactsPreviewList
                             contactIds={contactId ? [contactId] : []}
-                            scrollInView={true}
-                            scrollIntoViewOptions={{block: 'center'}}
                         />
                     </PreviewRow>
                 )}
diff --git a/client/components/Coverages/ScheduledUpdate/ScheduledUpdateForm.tsx b/client/components/Coverages/ScheduledUpdate/ScheduledUpdateForm.tsx
index d3006b72b..57a349c20 100644
--- a/client/components/Coverages/ScheduledUpdate/ScheduledUpdateForm.tsx
+++ b/client/components/Coverages/ScheduledUpdate/ScheduledUpdateForm.tsx
@@ -11,7 +11,7 @@ import {
     Field,
 } from '../../UI/Form';
 import {InternalNoteLabel} from '../../';
-import {ContactField} from '../../Contacts';
+import {ContactField} from '../../Contacts/ContactField';
 
 export class ScheduledUpdateForm extends React.Component {
     constructor(props) {
diff --git a/client/components/Coverages/ScheduledUpdate/index.tsx b/client/components/Coverages/ScheduledUpdate/index.tsx
index bdbffccd7..2d90b05a0 100644
--- a/client/components/Coverages/ScheduledUpdate/index.tsx
+++ b/client/components/Coverages/ScheduledUpdate/index.tsx
@@ -5,7 +5,8 @@ import moment from 'moment';
 import {IArticle, IDesk, IUser} from 'superdesk-api';
 import {
     IAssignmentPriority,
-    ICoverageProvider, ICoverageScheduledUpdate,
+    ICoverageProvider,
+    ICoverageScheduledUpdate,
     IGenre,
     IPlanningCoverageItem,
     IPlanningItem,
@@ -13,7 +14,7 @@ import {
 } from '../../../interfaces';
 import {superdeskApi} from '../../../superdeskApi';
 
-import {ContactsPreviewList} from '../../Contacts';
+import {ContactsPreviewList} from '../../Contacts/ContactsPreviewList';
 import {Row as PreviewRow} from '../../UI/Preview';
 import {ItemActionsMenu} from '../../index';
 import {CollapseBox} from '../../UI';
@@ -213,8 +214,6 @@ export class ScheduledUpdate extends React.PureComponent<IProps> {
                     <ContactsPreviewList
                         contactIds={get(value, 'planning.contact_info.length', 0) > 0 ?
                             [value.planning.contact_info] : []}
-                        scrollInView={true}
-                        scrollIntoViewOptions={{block: 'center'}}
                     />
                 </PreviewRow>
                 <PreviewRow
diff --git a/client/components/Modal/Footer.tsx b/client/components/Modal/Footer.tsx
index eab5a2542..29399272e 100644
--- a/client/components/Modal/Footer.tsx
+++ b/client/components/Modal/Footer.tsx
@@ -2,12 +2,7 @@ import React from 'react';
 import {Modal as _Modal} from 'react-bootstrap';
 import classNames from 'classnames';
 
-interface IProps {
-    children: React.ReactNode;
-    flex?: boolean;
-}
-
-export default function Footer({children, flex}: IProps) {
+export default function Footer({children, flex}: {children: React.ReactNode; flex?: boolean;}) {
     return (
         <_Modal.Footer
             className={classNames(
diff --git a/client/components/UI/CollapseBox.tsx b/client/components/UI/CollapseBox.tsx
index 6d54c910a..73d4c0bed 100644
--- a/client/components/UI/CollapseBox.tsx
+++ b/client/components/UI/CollapseBox.tsx
@@ -20,7 +20,7 @@ interface IProps {
 
     collapsedItem: React.ReactNode;
     openItem: React.ReactNode;
-    openItemTopBar: React.ReactNode;
+    openItemTopBar?: React.ReactNode;
     tools: React.ReactNode;
 
     onOpen?(): void;
diff --git a/client/components/UI/FileReadOnlyList.tsx b/client/components/UI/FileReadOnlyList.tsx
index 114c4f9de..641d80f37 100644
--- a/client/components/UI/FileReadOnlyList.tsx
+++ b/client/components/UI/FileReadOnlyList.tsx
@@ -19,7 +19,7 @@ interface IProps {
     formProfile?: IEventFormProfile | IPlanningFormProfile | ICoverageFormProfile;
     item: IEventItem | IPlanningItem | IPlanningCoverageItem;
     createLink(file: IFile): string;
-    files: {[key: string]: IFile};
+    files: Array<IFile>;
     field?: string;
     noToggle: boolean;
 }
diff --git a/client/components/UI/Popup/Menu.tsx b/client/components/UI/Popup/Menu.tsx
index 5b8014ccb..3c8e2dd83 100644
--- a/client/components/UI/Popup/Menu.tsx
+++ b/client/components/UI/Popup/Menu.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+interface IProps {
+    children: React.ReactNode;
+    noPadding?: boolean;
+}
+
 /**
- * @ngdoc react
- * @name Menu
- * @description Menu Component in a popup
+ * Menu Component in a popup
  */
-const Menu = ({children, noPadding}) => (
+const Menu: React.FunctionComponent<IProps> = ({children, noPadding}) => (
     <div
         className={classNames(
             'popup__menu',
@@ -18,11 +20,4 @@ const Menu = ({children, noPadding}) => (
     </div>
 );
 
-Menu.propTypes = {
-    children: PropTypes.node.isRequired,
-    noPadding: PropTypes.bool,
-};
-
-Menu.defaultProps = {noPadding: false};
-
 export default Menu;
diff --git a/client/components/UI/Popup/Popup.tsx b/client/components/UI/Popup/Popup.tsx
index 1090045a1..43269e15c 100644
--- a/client/components/UI/Popup/Popup.tsx
+++ b/client/components/UI/Popup/Popup.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {Portal} from 'react-portal';
 import classNames from 'classnames';
 import {get} from 'lodash';
@@ -13,7 +12,29 @@ import './style.scss';
  * @name Popup
  * @description Main Popup Component which holds the entire popup
  */
-export default class Popup extends React.Component {
+interface PopupProps {
+    children: React.ReactNode;
+    target: string;
+    close: () => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
+    workspaceId?: string;
+    className?: string | object;
+    noPadding?: boolean;
+    popupContainer?: () => HTMLElement;
+    inheritWidth?: boolean;
+    ignoreOnClickElement?: string;
+    onPopupOpen?: () => void;
+    onPopupClose?: () => void;
+}
+
+export default class Popup extends React.Component<PopupProps> {
+    dom: {
+        portal: HTMLElement | null;
+        child: HTMLElement | null;
+        root: HTMLElement | null;
+        parent: HTMLElement | null;
+    };
+
     constructor(props) {
         super(props);
 
@@ -34,7 +55,7 @@ export default class Popup extends React.Component {
     positionPopup() {
         if (this.dom.root) {
             // First render it somewhere not visible
-            this.dom.root.style.zIndex = -1;
+            this.dom.root.style.zIndex = '-1';
 
             // Make sure it's rendered
             this.dom.child.style.display = 'block';
@@ -56,7 +77,7 @@ export default class Popup extends React.Component {
             const targetRect = target.getBoundingClientRect();
 
             // Get the workspace
-            const workspace = document.getElementById(this.props.workspaceId) || document.body;
+            const workspace = document.getElementById(this.props.workspaceId ?? 'main-container') || document.body;
 
             // Compute menu position
             let top = targetRect.top + targetRect.height;
@@ -84,12 +105,12 @@ export default class Popup extends React.Component {
             this.dom.child.style.top = top.toFixed() + 'px';
             this.dom.child.style.left = left.toFixed() + 'px';
             this.dom.child.style.position = 'absolute';
-            this.dom.child.style.zIndex = 9100;
+            this.dom.child.style.zIndex = '9100';
 
-            this.dom.root.style.zIndex = 9000;
+            this.dom.root.style.zIndex = '9000';
             this.dom.root.style.position = 'fixed';
-            this.dom.root.style.top = 0;
-            this.dom.root.style.left = 0;
+            this.dom.root.style.top = '0';
+            this.dom.root.style.left = '0';
         }
     }
 
@@ -97,9 +118,7 @@ export default class Popup extends React.Component {
         document.addEventListener('keydown', this.handleKeydown);
         document.addEventListener('mousedown', this.handleClickOutside);
         this.positionPopup();
-        if (this.props.onPopupOpen) {
-            this.props.onPopupOpen();
-        }
+        this.props.onPopupOpen?.();
     }
 
     componentDidUpdate() {
@@ -109,9 +128,7 @@ export default class Popup extends React.Component {
     componentWillUnmount() {
         document.removeEventListener('keydown', this.handleKeydown);
         document.removeEventListener('mousedown', this.handleClickOutside);
-        if (this.props.onPopupClose) {
-            this.props.onPopupClose();
-        }
+        this.props.onPopupClose?.();
     }
 
     handleClickOutside(event) {
@@ -146,7 +163,7 @@ export default class Popup extends React.Component {
         this.dom.portal = node;
 
         if (this.dom.portal) {
-            this.dom.root = this.dom.portal.defaultNode || this.dom.portal.props.node;
+            this.dom.root = (this.dom.portal as any).defaultNode || (this.dom.portal as any).props.node;
         } else {
             this.dom.root = this.dom.child = null;
         }
@@ -177,27 +194,3 @@ export default class Popup extends React.Component {
         );
     }
 }
-
-Popup.propTypes = {
-    children: PropTypes.node.isRequired,
-    target: PropTypes.string.isRequired,
-    close: PropTypes.func.isRequired,
-    onKeyDown: PropTypes.func,
-    workspaceId: PropTypes.string,
-    className: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.object,
-    ]),
-    noPadding: PropTypes.bool,
-    popupContainer: PropTypes.func,
-    inheritWidth: PropTypes.bool,
-    ignoreOnClickElement: PropTypes.string,
-    onPopupOpen: PropTypes.func,
-    onPopupClose: PropTypes.func,
-};
-
-PropTypes.defaultProps = {
-    workspaceId: 'main-container',
-    noPadding: false,
-    inheritWidth: false,
-};
diff --git a/client/components/UI/Preview/Row.tsx b/client/components/UI/Preview/Row.tsx
index 91c3e8773..a6657475e 100644
--- a/client/components/UI/Preview/Row.tsx
+++ b/client/components/UI/Preview/Row.tsx
@@ -1,13 +1,31 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+interface IProps {
+    label?: string,
+    value?: string | number | React.ReactNode,
+    className?: string,
+    children: React.ReactNode,
+    noPadding?: boolean,
+    enabled?: boolean,
+    flex?: boolean,
+    rowItem?: boolean,
+    dataTestId?: string,
+}
 /**
- * @ngdoc react
- * @name Row
- * @description Row Component to be used in an item preview to show an item's detail
+ * Row Component to be used in an item preview to show an item's detail
  */
-export const Row = ({label, value, className, children, noPadding, enabled, flex, rowItem, dataTestId}) => (
+export const Row: React.FunctionComponent<IProps> = ({
+    label,
+    value,
+    className,
+    children,
+    noPadding,
+    enabled = true,
+    flex,
+    rowItem,
+    dataTestId,
+}) => (
     enabled ? (
         <div
             className={classNames(
@@ -28,26 +46,3 @@ export const Row = ({label, value, className, children, noPadding, enabled, flex
     ) :
         null
 );
-
-Row.propTypes = {
-    label: PropTypes.string,
-    value: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.number,
-        PropTypes.node,
-    ]),
-    className: PropTypes.string,
-    children: PropTypes.node,
-    noPadding: PropTypes.bool,
-    enabled: PropTypes.bool,
-    flex: PropTypes.bool,
-    rowItem: PropTypes.bool,
-    dataTestId: PropTypes.string,
-};
-
-Row.defaultProps = {
-    noPadding: false,
-    enabled: true,
-    flex: false,
-    rowItem: false,
-};
diff --git a/client/components/UI/SearchField/index.tsx b/client/components/UI/SearchField/index.tsx
index a224f19d0..da965ee3c 100644
--- a/client/components/UI/SearchField/index.tsx
+++ b/client/components/UI/SearchField/index.tsx
@@ -1,17 +1,32 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {DebounceInput} from 'react-debounce-input';
 import {uniqueId} from 'lodash';
 import {KEYCODES} from '../constants';
 import {onEventCapture} from '../utils';
 import {gettext} from '../../../utils/gettext';
 
+
+interface IProps {
+    onSearch: (value: any) => void;
+    onSearchClick: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    value?: string;
+    minLength?: number;
+    onFocus?: () => void;
+    readOnly?: boolean;
+    placeholder?: string;
+    autoComplete?: boolean;
+    name?: string;
+}
+
+interface IState {
+    searchInputValue: string;
+    uniqueId: string;
+}
+
 /**
- * @ngdoc react
- * @name SearchField
- * @description Input Field Component with search capabiities
+ * Input Field Component with search capabiities
  */
-export default class SearchField extends React.Component {
+export default class SearchField extends React.Component<IProps, IState> {
     constructor(props) {
         super(props);
         this.state = {
@@ -34,7 +49,7 @@ export default class SearchField extends React.Component {
     }
 
     /** Search events by keywords */
-    onSearchChange(event) {
+    onSearchChange(event: React.ChangeEvent<HTMLInputElement>) {
         const value = event.target.value;
 
         this.setState(
@@ -44,16 +59,16 @@ export default class SearchField extends React.Component {
         );
     }
 
-    onSearchClick(event) {
+    onSearchClick(event: React.KeyboardEvent<HTMLInputElement>) {
         if (this.props.onSearchClick) {
             this.props.onSearchClick(event);
         }
     }
 
-    onKeyDown(event) {
+    onKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
         if (event.keyCode === KEYCODES.ENTER) {
             onEventCapture(event);
-            this.onSearchClick();
+            this.onSearchClick(event);
         }
     }
 
@@ -75,23 +90,9 @@ export default class SearchField extends React.Component {
                 onKeyDown={this.onKeyDown}
                 onFocus={this.props.onFocus}
                 disabled={this.props.readOnly}
-                autoComplete={this.props.autoComplete ? 'on' : 'off'}
+                autoComplete={(this.props.autoComplete ?? true) ? 'on' : 'off'}
                 name={this.props.name}
             />
         );
     }
 }
-
-SearchField.propTypes = {
-    onSearch: PropTypes.func.isRequired,
-    onSearchClick: PropTypes.func.isRequired,
-    value: PropTypes.string,
-    minLength: PropTypes.number,
-    onFocus: PropTypes.func,
-    readOnly: PropTypes.bool,
-    placeholder: PropTypes.string,
-    autoComplete: PropTypes.bool,
-    name: PropTypes.string,
-};
-
-SearchField.defaultProps = {autoComplete: true};
diff --git a/client/components/fields/editor/Contacts.tsx b/client/components/fields/editor/Contacts.tsx
index 9095462c3..89b1ca698 100644
--- a/client/components/fields/editor/Contacts.tsx
+++ b/client/components/fields/editor/Contacts.tsx
@@ -4,7 +4,7 @@ import {get} from 'lodash';
 import {IEditorFieldProps} from '../../../interfaces';
 import {superdeskApi} from '../../../superdeskApi';
 
-import {ContactField} from '../../Contacts';
+import {ContactField} from '../../Contacts/ContactField';
 
 export class EditorFieldContacts extends React.PureComponent<IEditorFieldProps> {
     render() {
diff --git a/client/components/fields/editor/CoverageContact.tsx b/client/components/fields/editor/CoverageContact.tsx
index f26070bb1..1bc50e393 100644
--- a/client/components/fields/editor/CoverageContact.tsx
+++ b/client/components/fields/editor/CoverageContact.tsx
@@ -4,7 +4,8 @@ import {get} from 'lodash';
 import {IEditorFieldProps} from '../../../interfaces';
 import {superdeskApi} from '../../../superdeskApi';
 
-import {ContactField, ContactsPreviewList} from '../../Contacts';
+import {ContactField} from '../../Contacts/ContactField';
+import {ContactsPreviewList} from '../../Contacts/ContactsPreviewList';
 import {Row, Label} from '../../UI/Form';
 
 interface IProps extends IEditorFieldProps {
@@ -31,8 +32,6 @@ export class EditorFieldCoverageContact extends React.PureComponent<IProps> {
                 />
                 <ContactsPreviewList
                     contactIds={[assignmentValue]}
-                    scrollInView={true}
-                    scrollIntoViewOptions={{block: 'center'}}
                 />
             </Row>
         ) : (
diff --git a/client/components/fields/editor/Location.interface.ts b/client/components/fields/editor/Location.interface.ts
new file mode 100644
index 000000000..b05527e21
--- /dev/null
+++ b/client/components/fields/editor/Location.interface.ts
@@ -0,0 +1,6 @@
+import {IEditorFieldProps} from '../../../interfaces';
+
+export interface IEditorFieldLocationProps extends IEditorFieldProps {
+    enableExternalSearch?: boolean;
+    disableAddLocation?: boolean;
+}
diff --git a/client/components/fields/editor/Location.tsx b/client/components/fields/editor/Location.tsx
index 79a36f8e3..b2a6a38da 100644
--- a/client/components/fields/editor/Location.tsx
+++ b/client/components/fields/editor/Location.tsx
@@ -1,14 +1,8 @@
 import * as React from 'react';
-import {IEditorFieldProps, ILocation} from '../../../interfaces';
-
 import {superdeskApi} from '../../../superdeskApi';
 import {GeoLookupInput} from '../../GeoLookupInput';
 import {Row} from '../../UI/Form';
-
-export interface IEditorFieldLocationProps extends IEditorFieldProps {
-    enableExternalSearch?: boolean;
-    disableAddLocation?: boolean;
-}
+import {IEditorFieldLocationProps} from './Location.interface';
 
 export class EditorFieldLocation extends React.PureComponent<IEditorFieldLocationProps> {
     render() {
diff --git a/client/components/fields/editor/ProfileFieldDefaultValue.tsx b/client/components/fields/editor/ProfileFieldDefaultValue.tsx
index 4ec5acc2a..460030141 100644
--- a/client/components/fields/editor/ProfileFieldDefaultValue.tsx
+++ b/client/components/fields/editor/ProfileFieldDefaultValue.tsx
@@ -1,7 +1,4 @@
-import * as React from 'react';
-
 import {IEditorFieldProps, IProfileFieldEntry} from '../../../interfaces';
-
 import {renderFieldsForPanel} from '../index';
 
 interface IProps extends IEditorFieldProps {
diff --git a/client/components/fields/preview/Contacts.tsx b/client/components/fields/preview/Contacts.tsx
index f70c82650..2e2bf29dd 100644
--- a/client/components/fields/preview/Contacts.tsx
+++ b/client/components/fields/preview/Contacts.tsx
@@ -5,7 +5,7 @@ import {superdeskApi} from '../../../superdeskApi';
 import {IListFieldProps} from '../../../interfaces';
 
 import {PreviewFormItem} from './base/PreviewFormItem';
-import {ContactsPreviewList} from '../../Contacts';
+import {ContactsPreviewList} from '../../Contacts/ContactsPreviewList';
 
 export class PreviewFieldContacts extends React.PureComponent<IListFieldProps> {
     render() {
@@ -14,9 +14,6 @@ export class PreviewFieldContacts extends React.PureComponent<IListFieldProps> {
         const children = !contactIds?.length ? null : (
             <ContactsPreviewList
                 contactIds={contactIds}
-                scrollInView={true}
-                scrollIntoViewOptions={{block: 'center'}}
-                tabEnabled={true}
             />
         );
 
diff --git a/client/components/planning-editor-standalone/field-definitions/category-field.ts b/client/components/planning-editor-standalone/field-definitions/category-field.ts
index 5ad76bacf..54b127d94 100644
--- a/client/components/planning-editor-standalone/field-definitions/category-field.ts
+++ b/client/components/planning-editor-standalone/field-definitions/category-field.ts
@@ -1,8 +1,7 @@
 import {IDropdownConfigVocabulary, IAuthoringFieldV2, IVocabularyItem} from 'superdesk-api';
 import {superdeskApi} from '../../../superdeskApi';
-import {IFieldGetter} from '.';
 
-export const getCategoriesField: IFieldGetter = () => ({
+export const getCategoriesField = () => ({
     fieldId: 'anpa_category',
     getField: ({id, required}) => {
         const fieldConfig: IDropdownConfigVocabulary = {
diff --git a/client/components/planning-editor-standalone/field-definitions/contacts.ts b/client/components/planning-editor-standalone/field-definitions/contacts.ts
new file mode 100644
index 000000000..f0527c108
--- /dev/null
+++ b/client/components/planning-editor-standalone/field-definitions/contacts.ts
@@ -0,0 +1,20 @@
+import {IAuthoringFieldV2} from 'superdesk-api';
+import {superdeskApi} from '../../../superdeskApi';
+
+export function getContactsField() {
+    return {
+        fieldId: 'contact',
+        getField: ({id, required}) => {
+            const field: IAuthoringFieldV2 = {
+                id: id,
+                name: superdeskApi.localization.gettext('Contacts'),
+                fieldType: 'contact',
+                fieldConfig: {
+                    required: required,
+                },
+            };
+
+            return field;
+        },
+    };
+}
diff --git a/client/components/planning-editor-standalone/field-definitions/index.ts b/client/components/planning-editor-standalone/field-definitions/index.ts
index 9d6e5c0b6..834eb359e 100644
--- a/client/components/planning-editor-standalone/field-definitions/index.ts
+++ b/client/components/planning-editor-standalone/field-definitions/index.ts
@@ -15,6 +15,7 @@ import {getCategoriesField} from './category-field';
 import {getAgendasField} from './agendas-field';
 import {getSubjectField} from './subject';
 import {getPriorityField} from './priority-field';
+import {getContactsField} from './contacts';
 import {getLocationsField} from './locations-field';
 
 export function getFieldDefinitions(): IFieldDefinitions {
@@ -72,6 +73,7 @@ export function getFieldDefinitions(): IFieldDefinitions {
         getAgendasField(),
         getSubjectField(),
         getCategoriesField(),
+        getContactsField(),
         getPriorityField(),
         getLocationsField(),
         {
diff --git a/client/components/planning-editor-standalone/profile-fields.ts b/client/components/planning-editor-standalone/profile-fields.ts
index 9fb4c2b66..814554a50 100644
--- a/client/components/planning-editor-standalone/profile-fields.ts
+++ b/client/components/planning-editor-standalone/profile-fields.ts
@@ -1,3 +1,4 @@
+import {isSystemRequiredField} from '../../api/utils/constants';
 import {planningApi} from '../../superdeskApi';
 import {getEditorFormGroupsFromProfile} from '../../utils/contentProfiles';
 
@@ -35,12 +36,17 @@ export const getPlanningProfileFields = (options: {embeddedOnly?: boolean}): Arr
 
     for (const fieldId of planningFieldIds) {
         const fieldSchema = planningProfile.schema[fieldId];
+        const shouldBeShown = fieldSchema.show_in_embedded_editor || fieldSchema.required;
 
         /**
-         * If a field does not have show_in_embedded_editor or required toggled on
-         * we must not show it in the embedded editor
+         * If a field does not have show_in_embedded_editor or required toggled on,
+         * or is not a system required field we must not show it in the embedded editor
          */
-        if (options.embeddedOnly && !(fieldSchema.show_in_embedded_editor || fieldSchema.required)) {
+        if (
+            !isSystemRequiredField(fieldId)
+            && options.embeddedOnly
+            && shouldBeShown != true
+        ) {
             continue;
         }
 
@@ -62,5 +68,9 @@ export const getPlanningProfileFields = (options: {embeddedOnly?: boolean}): Arr
         }
     }
 
-    return convertedFieldIds;
+    return convertedFieldIds.concat({
+        fieldId: 'contact',
+        required: true,
+        type: 'normal',
+    });
 };
diff --git a/client/extension_bridge.ts b/client/extension_bridge.ts
index 995b0105a..e27466afd 100644
--- a/client/extension_bridge.ts
+++ b/client/extension_bridge.ts
@@ -10,13 +10,21 @@ import {getVocabularyItemFieldTranslated} from './utils/vocabularies';
 import {getUserInterfaceLanguageFromCV} from './utils/users';
 import {isContentLinkToCoverageAllowed} from './utils/archive';
 import PlanningDetailsWidget, {getItemPlanningInfo} from './components/PlanningDetailsWidget';
+
 import {AttachmentsInputStandalone} from './components/AttachmentsInputStandalone';
+import {IPropsAttachmentsEditorStandalone} from './components/AttachmentsInputStandalone.interface';
+
 import {EditorFieldCoverages} from './components/fields/editor/Coverages';
+import {IPropsEditorFieldCoverages} from './components/fields/editor/coverages.interface';
+
+import {ContactField} from './components/Contacts/ContactField';
+import {IContactPropsNoRedux} from './components/Contacts/ContactField.interface';
+
 import {EditorFieldLocation} from './components/fields/editor/Location';
-import type {IAssignmentItem, IEditorFieldProps, IPlanningAppState, IPlanningItem} from 'interfaces';
-import type {IPropsAttachmentsEditorStandalone} from './components/AttachmentsInputStandalone.interface';
-import type {IPropsEditorFieldCoverages} from './components/fields/editor/coverages.interface';
-import type {IEditorFieldLocationProps} from './components/fields/editor/Location';
+import {IEditorFieldLocationProps} from 'components/fields/editor/Location.interface';
+
+import {IAssignmentItem, IEditorFieldProps, IPlanningAppState} from 'interfaces';
+import {registerEditorField} from './components/fields/resources/registerEditorFields';
 
 // KEEP IN SYNC WITH client/planning-extension/src/extension_bridge.ts
 interface IExtensionBridge {
@@ -39,6 +47,7 @@ interface IExtensionBridge {
     },
     editor: {
         fields: {
+            EditorFieldContact: React.ComponentType<IContactPropsNoRedux>;
             EditorFieldLocation: React.ComponentType<IEditorFieldLocationProps>;
             EditorFieldCoverages: React.ComponentType<IPropsEditorFieldCoverages>;
         },
@@ -98,6 +107,7 @@ export const extensionBridge: IExtensionBridge = {
     },
     editor: {
         fields: {
+            EditorFieldContact: ContactField,
             EditorFieldLocation: EditorFieldLocation,
             EditorFieldCoverages: EditorFieldCoverages,
         },
diff --git a/client/planning-extension/src/authoring-react-fields/contact/editor.tsx b/client/planning-extension/src/authoring-react-fields/contact/editor.tsx
new file mode 100644
index 000000000..eeca16a63
--- /dev/null
+++ b/client/planning-extension/src/authoring-react-fields/contact/editor.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import {
+    IEditorComponentProps,
+    IUrlsFieldUserPreferences,
+} from 'superdesk-api';
+import {IContactFieldConfig, IContactValueOperational} from './interfaces';
+import {extensionBridge} from '../../extension_bridge';
+import {superdesk} from '../../superdesk';
+
+type IProps = IEditorComponentProps<IContactValueOperational, IContactFieldConfig, IUrlsFieldUserPreferences>;
+
+export class Editor extends React.PureComponent<IProps> {
+    render() {
+        const Container = this.props.container;
+        const {EditorFieldContact} = extensionBridge.editor.fields;
+
+        return (
+            <Container>
+                <EditorFieldContact
+                    testId="contact"
+                    field="contact"
+                    label={superdesk.localization.gettext('Contact')}
+                    value={this.props.value as any}
+                    onChange={(_field: string, value: any) => {
+                        this.props.onChange(value);
+                    }}
+                    readOnly={this.props.config.readOnly}
+                    singleValue={this.props.config.singleValue}
+                />
+            </Container>
+        );
+    }
+}
diff --git a/client/planning-extension/src/authoring-react-fields/contact/index.tsx b/client/planning-extension/src/authoring-react-fields/contact/index.tsx
new file mode 100644
index 000000000..0849a419a
--- /dev/null
+++ b/client/planning-extension/src/authoring-react-fields/contact/index.tsx
@@ -0,0 +1,33 @@
+import {ICustomFieldType} from 'superdesk-api';
+import {Editor} from './editor';
+import {Preview} from './preview';
+import {
+    IContactFieldConfig,
+    IContactFieldUserPreferences,
+    IContactValueOperational,
+    IContactValueStorage,
+} from './interfaces';
+import {superdesk} from '../../superdesk';
+
+const {gettext} = superdesk.localization;
+
+export function getContactField(): ICustomFieldType<
+    IContactValueOperational,
+    IContactValueStorage,
+    IContactFieldConfig,
+    IContactFieldUserPreferences
+    > {
+    const field: ReturnType<typeof getContactField> = {
+        id: 'contact',
+        generic: true,
+        label: gettext('Contact'),
+        editorComponent: Editor,
+        previewComponent: Preview,
+
+        hasValue: (valueOperational) => valueOperational != null && valueOperational.length > 0,
+        getEmptyValue: () => [],
+        configComponent: () => null,
+    };
+
+    return field;
+}
diff --git a/client/planning-extension/src/authoring-react-fields/contact/interfaces.ts b/client/planning-extension/src/authoring-react-fields/contact/interfaces.ts
new file mode 100644
index 000000000..fbc4cd0c9
--- /dev/null
+++ b/client/planning-extension/src/authoring-react-fields/contact/interfaces.ts
@@ -0,0 +1,7 @@
+import {ICommonFieldConfig} from 'superdesk-api';
+import {IPlanningCoverageItem} from '../../../../interfaces';
+
+export type IContactValueOperational = Array<IPlanningCoverageItem>;
+export type IContactValueStorage = IContactValueOperational;
+export type IContactFieldUserPreferences = never;
+export type IContactFieldConfig = {singleValue: boolean} & ICommonFieldConfig;
diff --git a/client/planning-extension/src/authoring-react-fields/contact/preview.tsx b/client/planning-extension/src/authoring-react-fields/contact/preview.tsx
new file mode 100644
index 000000000..904e2d887
--- /dev/null
+++ b/client/planning-extension/src/authoring-react-fields/contact/preview.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import {IPreviewComponentProps} from 'superdesk-api';
+import {IContactFieldConfig, IContactValueOperational} from './interfaces';
+
+type IProps = IPreviewComponentProps<IContactValueOperational, IContactFieldConfig>;
+
+export class Preview extends React.PureComponent<IProps> {
+    render() {
+        // not implemented
+        return null;
+    }
+}
diff --git a/client/planning-extension/src/extension.ts b/client/planning-extension/src/extension.ts
index 5a24c1e64..f12eeaab5 100644
--- a/client/planning-extension/src/extension.ts
+++ b/client/planning-extension/src/extension.ts
@@ -22,6 +22,7 @@ import {
 import {getAttachmentsField} from './authoring-react-fields/planning-attachments';
 import {AssignmentsCountTracker} from './assignments-overview/hiddenAssignmentsList';
 import {getCoveragesField} from './authoring-react-fields/coverages';
+import {getContactField} from './authoring-react-fields/contact';
 import {getLocationField} from './authoring-react-fields/location';
 
 function onSpike(superdesk: ISuperdesk, item: IArticle) {
@@ -258,6 +259,7 @@ const extension: IExtension = {
                 customFieldTypes: [
                     getAttachmentsField(),
                     getCoveragesField(),
+                    getContactField(),
                     getLocationField(),
                 ],
             },
diff --git a/client/planning-extension/src/extension_bridge.ts b/client/planning-extension/src/extension_bridge.ts
index ecfd66350..9897810a4 100644
--- a/client/planning-extension/src/extension_bridge.ts
+++ b/client/planning-extension/src/extension_bridge.ts
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import {IArticle, IVocabularyItem} from 'superdesk-api';
-import type {IAssignmentItem, IEditorFieldProps, IPlanningAppState, IPlanningItem} from '../../interfaces';
-import type {IPropsAttachmentsEditorStandalone} from '../../components/AttachmentsInputStandalone.interface';
-import type {IPropsEditorFieldCoverages} from '../../components/fields/editor/coverages.interface';
-import type {IEditorFieldLocationProps} from '../../components/fields/editor/Location';
+import {IAssignmentItem, IEditorFieldProps, IPlanningAppState, IPlanningItem} from '../../interfaces';
+import {IPropsAttachmentsEditorStandalone} from '../../components/AttachmentsInputStandalone.interface';
+import {IContactPropsNoRedux} from '../../components/Contacts/ContactField.interface';
+import {IPropsEditorFieldCoverages} from '../../components/fields/editor/coverages.interface';
+import {IEditorFieldLocationProps} from '../../components/fields/editor/Location.interface';
 
 interface IEditorFieldVocabularyProps extends IEditorFieldProps {
     options: Array<any>;
@@ -37,6 +38,7 @@ interface IExtensionBridge {
     editor: {
         fields: {
             EditorFieldLocation: React.ComponentType<IEditorFieldLocationProps>;
+            EditorFieldContact: React.ComponentType<IContactPropsNoRedux>;
             EditorFieldCoverages: React.ComponentType<IPropsEditorFieldCoverages>;
         },
     }
diff --git a/package-lock.json b/package-lock.json
index c60619276..0d3bdf44a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1790,9 +1790,9 @@
       }
     },
     "caniuse-db": {
-      "version": "1.0.30001690",
-      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30001690.tgz",
-      "integrity": "sha512-9Jw0YwFL5OJlEQzfznw033GzuoIv7XfWoLX0MgjuUTFJydhHanHcMt2zohwdPOgvMz4ssJa9WTiR+cT8IsgfnQ==",
+      "version": "1.0.30001692",
+      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30001692.tgz",
+      "integrity": "sha512-yrbj9o81/cUIK4zZUK9yztbhjqVj7xBvM59UwfuQyd2/5dx6p5PbhlG3sQr4a6LLTZjfd97Zu506jD8skOrHcQ==",
       "dev": true
     },
     "caseless": {
@@ -3265,9 +3265,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.5.78",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.78.tgz",
-      "integrity": "sha512-UmwIt7HRKN1rsJfddG5UG7rCTCTAKoS9JeOy/R0zSenAyaZ8SU3RuXlwcratxhdxGRNpk03iq8O7BA3W7ibLVw==",
+      "version": "1.5.80",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.80.tgz",
+      "integrity": "sha512-LTrKpW0AqIuHwmlVNV+cjFYTnXtM9K37OGhpe0ZI10ScPSxqVSryZHIY3WnCS5NSYbBODRTZyhRMS2h5FAEqAw==",
       "dev": true
     },
     "elliptic": {
@@ -5980,9 +5980,9 @@
       }
     },
     "http-parser-js": {
-      "version": "0.5.8",
-      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
-      "integrity": "sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==",
+      "version": "0.5.9",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.9.tgz",
+      "integrity": "sha512-n1XsPy3rXVxlqxVioEWdC+0+M+SQw0DpJynwtOPo1X+ZlvdzTLtDBIJJlDQTnwZIFJrZSzSGmIOUdP8tu+SgLw==",
       "dev": true
     },
     "http-proxy": {
@@ -12272,7 +12272,7 @@
       }
     },
     "superdesk-core": {
-      "version": "github:superdesk/superdesk-client-core#2a37784a81dfd2e7dcebb7e1cb1c29a1d144a235",
+      "version": "github:superdesk/superdesk-client-core#395672ee1925691a537c8290a6de1bc11f8f94be",
       "from": "github:superdesk/superdesk-client-core#develop",
       "dev": true,
       "requires": {