Sign off field implementation in react

scripts/apps/authoring-react/field-adapters/index.tsx

@@ -51,6 +51,7 @@ import {getKeywordsAdapter} from './keywords';
 import {dateline} from './dateline';
 import {description_text} from './description_text';
 import {body_footer} from './body_footer';
+import {sign_off} from './sign_off';
 
 export function getBaseFieldsAdapter(): IFieldsAdapter<IArticle> {
     const adapter: IFieldsAdapter<IArticle> = {
@@ -78,6 +79,7 @@ export function getBaseFieldsAdapter(): IFieldsAdapter<IArticle> {
         dateline: dateline,
         description_text: description_text,
         body_footer: body_footer,
+        sign_off: sign_off,
     };
 
     return adapter;

scripts/apps/authoring-react/field-adapters/sign_off.tsx

@@ -0,0 +1,144 @@
+/* eslint-disable react/display-name */
+/* eslint-disable react/no-multi-comp */
+import {
+    IArticle,
+    IAuthoringFieldV2,
+    IFieldAdapter,
+    IEditor3Config,
+    IRestApiResponse,
+    ITreeWithLookup,
+    IUser,
+    IEditor3ValueOperational,
+} from 'superdesk-api';
+import {gettext} from 'core/utils';
+import {retrieveStoredValueEditor3Generic, storeEditor3ValueBase} from '.';
+import {appConfig} from 'appConfig';
+import {httpRequestJsonLocal} from 'core/helpers/network';
+import {ReactNode} from 'react';
+import React from 'react';
+import {MultiSelectTreeWithTemplate} from 'core/ui/components/MultiSelectTreeWithTemplate';
+import {convertToRaw, ContentState} from 'draft-js';
+import {editor3ToOperationalFormat} from '../fields/editor3';
+import {UserAvatar} from 'apps/users/components/UserAvatar';
+import {Spacer} from 'superdesk-ui-framework/react';
+
+interface IProps {
+    onChange: (value: IEditor3ValueOperational) => void;
+    readOnly: boolean;
+    language: string;
+}
+
+class UsersDropdown extends React.Component<IProps> {
+    render(): ReactNode {
+        return (
+            <div
+                style={{
+                    marginBlockStart: 8,
+                    marginBlockEnd: 8,
+                }}
+            >
+                <MultiSelectTreeWithTemplate
+                    kind="asynchronous"
+                    searchOptions={(term, callback) => {
+                        const abortController = new AbortController();
+
+                        httpRequestJsonLocal<IRestApiResponse<IUser>>({
+                            method: 'GET',
+                            path: '/users',
+                            urlParams: {
+                                where: {display_name: term},
+                                max_results: 50,
+                            },
+                            abortSignal: abortController.signal,
+                        }).then((res) => {
+                            const tree: ITreeWithLookup<IUser> = {
+                                nodes: res._items.map((user) => ({value: user})),
+                                lookup: {},
+                            };
+
+                            callback(tree);
+                        });
+
+                        return () => abortController.abort();
+                    }}
+                    values={[] as Array<IUser>}
+                    onChange={(value) => {
+                        const val = editor3ToOperationalFormat(
+                            {
+                                rawContentState: convertToRaw(
+                                    ContentState.createFromText(value[0][appConfig.user.sign_off_mapping]),
+                                ),
+                            },
+                            this.props.language,
+                        );
+
+                        this.props.onChange(val);
+                    }}
+                    readOnly={this.props.readOnly}
+                    optionTemplate={
+                        ({item}) => (
+                            <Spacer h gap="8" noGrow>
+                                <UserAvatar user={item} size="small" />
+                                <span>{item[appConfig.user.sign_off_mapping]}</span>
+                            </Spacer>
+                        )
+                    }
+                    getId={(option) => option._id}
+                    getLabel={(option) => option[appConfig.user.sign_off_mapping]}
+                />
+            </div>
+        );
+    }
+}
+
+export const sign_off: IFieldAdapter<IArticle> = {
+    getFieldV2: (_, fieldSchema) => {
+        const allowUserDropdown = appConfig.user != null && appConfig.user.sign_off_mapping;
+
+        const fieldConfig: IEditor3Config = {
+            minLength: fieldSchema?.minlength,
+            maxLength: fieldSchema?.maxlength,
+            singleLine: true,
+            helperComponent: allowUserDropdown
+                ? ({onChange, language, readOnly}) => {
+                    return (
+                        <UsersDropdown
+                            onChange={onChange}
+                            language={language}
+                            readOnly={readOnly}
+                        />
+                    );
+                } : undefined,
+        };
+
+        const fieldV2: IAuthoringFieldV2 = {
+            id: 'sign_off',
+            name: gettext('Sign Off'),
+            fieldType: 'editor3',
+            fieldConfig,
+        };
+
+        return fieldV2;
+    },
+
+    retrieveStoredValue: (item: IArticle, authoringStorage) => retrieveStoredValueEditor3Generic(
+        'sign_off',
+        item,
+        authoringStorage,
+    ),
+
+    storeValue: (value, item, config) => {
+        const result = storeEditor3ValueBase(
+            'sign_off',
+            item,
+            value,
+            config,
+        );
+
+        const articleUpdated = {...result.article};
+
+        articleUpdated.sign_off = result.stringValue;
+
+        return articleUpdated;
+    },
+};

scripts/apps/authoring-react/fields/editor3/editor.tsx

@@ -39,10 +39,11 @@ import {countWords} from 'core/count-words';
 import {getReadingTimeText} from 'apps/authoring/authoring/directives/ReadingTime';
 import {addEditorEventListener, dispatchEditorEvent} from '../../authoring-react-editor-events';
 import {getAutocompleteSuggestions} from 'core/helpers/editor';
-import {ContentState, EditorState, Modifier} from 'draft-js';
+import {ContentState, EditorState, convertToRaw} from 'draft-js';
 import {Select, Option} from 'superdesk-ui-framework/react';
 import {appendText} from 'core/editor3/helpers/draftInsertEntity';
 import {SpacerBlock} from 'core/ui/components/Spacer';
+import {editor3ToOperationalFormat} from '.';
 
 interface IUserPreferences {
     characterLimitMode?: CharacterLimitUiBehavior;
@@ -415,8 +416,21 @@ export class Editor extends React.PureComponent<IProps, IState> {
             ? this.props.getVocabularyItems(this.props.config.vocabularyId)
             : null;
 
+        const HelperComponent = this.props.config.helperComponent;
+
         return (
             <Container miniToolbar={miniToolbar}>
+                {
+                    HelperComponent != null && (
+                        <HelperComponent
+                            language={this.props.language}
+                            readOnly={this.props.readOnly}
+                            onChange={(value) => {
+                                this.props.onChange(value);
+                            }}
+                        />
+                    )
+                }
                 <Provider store={store}>
                     <ReactContextForEditor3.Provider value={store}>
                         {

scripts/core/superdesk-api.d.ts

@@ -401,6 +401,14 @@ declare module 'superdesk-api' {
         // read time, character count, word count; defaults to true
         showStatistics?: boolean;
 
+        // allows having another component control the field value
+        // e.g. picking from a custom vocabulary with predefined values
+        helperComponent?: React.ComponentType<{
+            onChange: (value: IEditor3ValueOperational) => void;
+            language: string;
+            readOnly: boolean;
+        }>;
+
         /**
          * Value - field ID of editor3 field.
          *