chore: Update to Superdesk v2.7 (#23)

* chore: Update to Superdesk v2.7 Fixing extension registration and code due to changes in extension API * fix unit test
superdesk · Mar 28, 2024 · 8225bcd · 8225bcd
1 parent 40729a9
commit 8225bcd
Show file tree

Hide file tree

Showing 24 changed files with 1,161 additions and 918 deletions.
diff --git a/client/extensions/tga-author-profile-fields/package.json b/client/extensions/tga-author-profile-fields/package.json
@@ -11,6 +11,6 @@
         "typescript": "~4.9.5"
     },
     "peerDependencies": {
-        "superdesk-ui-framework": "3.0.9"
+        "superdesk-ui-framework": "*"
     }
 }
diff --git a/client/extensions/tga-author-profile-fields/src/components/profileId/editor.tsx b/client/extensions/tga-author-profile-fields/src/components/profileId/editor.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 
-import {IUser, IEditorComponentProps} from 'superdesk-api';
+import {ICommonFieldConfig, IEditorComponentProps, IUser} from 'superdesk-api';
 import {superdesk} from '../../superdesk';
 
-type IProps = IEditorComponentProps<IUser['_id'] | undefined, {}>
+export type IProfileIdValue = string | undefined;
+type IProps = IEditorComponentProps<IProfileIdValue, ICommonFieldConfig, never>;
 
 export class ProfileIDField extends React.PureComponent<IProps> {
     private _mounted: boolean = false;
@@ -31,7 +32,7 @@ export class ProfileIDField extends React.PureComponent<IProps> {
 
     changeProfileId(user: IUser) {
         if (this._mounted) {
-            this.props.setValue(user._id);
+            this.props.onChange(user._id);
             window.dispatchEvent(new CustomEvent('content--custom-profile-id--changed', {detail: user}));
         }
     }
@@ -46,6 +47,7 @@ export class ProfileIDField extends React.PureComponent<IProps> {
                 disabled={this.props.readOnly}
                 autoFocus={false}
                 horizontalSpacing={false}
+                clearable={false}
             />
         );
     }

diff --git a/client/extensions/tga-author-profile-fields/src/components/profileId/preview.tsx b/client/extensions/tga-author-profile-fields/src/components/profileId/preview.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+
+import {ICommonFieldConfig, IPreviewComponentProps, IUser} from 'superdesk-api';
+import {IProfileIdValue} from './editor';
+import {superdesk} from '../../superdesk';
+
+type IProps = IPreviewComponentProps<IProfileIdValue, ICommonFieldConfig>;
+
+interface IState {
+    user?: IUser;
+}
+
+export class ProfileIdPreview extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {user: undefined};
+    }
+
+    componentDidMount() {
+        if (this.props.value != null) {
+            const {dataApi} = superdesk;
+
+            dataApi.findOne<IUser>('users', this.props.value).then((user) => {
+                this.setState({user: user});
+            });
+        }
+    }
+
+    render() {
+        const {UserAvatar, Spacer} = superdesk.components;
+
+        return this.props.value == null || this.state.user == null ? null : (
+            <div className="form__row">
+                {/*Mimics same layout as the SelectUser component's dropdown, taken from client-core*/}
+                <Spacer h={true} gap="8" noWrap={true} justifyContent="start">
+                    <div>
+                        <UserAvatar userId={this.props.value} />
+                    </div>
+                    <Spacer v={true} gap="4" noWrap={true}>
+                        <div>{this.state.user.display_name}</div>
+                        <div style={{fontSize: '1.2rem'}}>@{this.state.user.username}</div>
+                    </Spacer>
+                </Spacer>
+            </div>
+        );
+    }
+}
diff --git a/client/extensions/tga-author-profile-fields/src/components/profileText/config.tsx b/client/extensions/tga-author-profile-fields/src/components/profileText/config.tsx
@@ -19,7 +19,7 @@ export class ProfileTextFieldConfig extends React.PureComponent<IProps> {
         const {gettext} = superdesk.localization;
 
         return (
-            <Spacer type="vertical" spacing="medium">
+            <Spacer v={true} gap="8">
                 <Switch
                     label={{content: gettext('Use Editor 3')}}
                     value={config?.use_editor_3 == true}

diff --git a/client/extensions/tga-author-profile-fields/src/components/profileText/editor.tsx b/client/extensions/tga-author-profile-fields/src/components/profileText/editor.tsx
@@ -1,12 +1,14 @@
 import * as React from 'react';
 
-import {IUser} from 'superdesk-api';
+import {IEditorComponentProps, IUser} from 'superdesk-api';
 import {superdesk} from '../../superdesk';
-import {IProfileTextFieldProps} from './interfaces';
+import {IProfileTextFieldConfig, IProfileTextValue} from './interfaces';
 import {Input} from 'superdesk-ui-framework/react'
 
-export class ProfileTextField extends React.PureComponent<IProfileTextFieldProps> {
-    constructor(props: IProfileTextFieldProps) {
+type IProps = IEditorComponentProps<IProfileTextValue, IProfileTextFieldConfig, never>;
+
+export class ProfileTextField extends React.PureComponent<IProps> {
+    constructor(props: IProps) {
         super(props);
 
         this.onProfileIDChanged = this.onProfileIDChanged.bind(this);
@@ -25,16 +27,16 @@ export class ProfileTextField extends React.PureComponent<IProfileTextFieldProps
 
         switch (this.props.fieldId) {
         case 'profile_first_name':
-            this.props.setValue(user.first_name || '');
+            this.props.onChange(user.first_name || '');
             break;
         case 'profile_last_name':
-            this.props.setValue(user.last_name || '');
+            this.props.onChange(user.last_name || '');
             break;
         case 'profile_email':
-            this.props.setValue(user.email || '');
+            this.props.onChange(user.email || '');
             break;
         case 'profile_biography':
-            this.props.setValue(user.biography || '');
+            this.props.onChange(user.biography || '');
             break;
         }
     }
@@ -46,7 +48,7 @@ export class ProfileTextField extends React.PureComponent<IProfileTextFieldProps
             <Editor3Html
                 key={this.props.item.extra?.profile_id}
                 value={this.props.value ?? ''}
-                onChange={this.props.setValue}
+                onChange={this.props.onChange}
                 readOnly={this.props.readOnly}
             />
         ) : (
@@ -55,7 +57,7 @@ export class ProfileTextField extends React.PureComponent<IProfileTextFieldProps
                 value={this.props.value}
                 type="text"
                 disabled={this.props.readOnly}
-                onChange={this.props.setValue}
+                onChange={this.props.onChange}
             />
         );
     }

diff --git a/client/extensions/tga-author-profile-fields/src/components/profileText/interfaces.ts b/client/extensions/tga-author-profile-fields/src/components/profileText/interfaces.ts
@@ -1,8 +1,8 @@
-import {IEditorComponentProps} from 'superdesk-api';
+import {ICommonFieldConfig} from 'superdesk-api';
 
-export interface IProfileTextFieldConfig {
+export interface IProfileTextFieldConfig extends ICommonFieldConfig {
     use_editor_3: boolean;
     exclude_from_content_api: boolean;
 }
 
-export type IProfileTextFieldProps = IEditorComponentProps<string | undefined, IProfileTextFieldConfig>;
+export type IProfileTextValue = string | undefined;
diff --git a/client/extensions/tga-author-profile-fields/src/components/profileText/preview.tsx b/client/extensions/tga-author-profile-fields/src/components/profileText/preview.tsx
@@ -1,11 +1,14 @@
 import * as React from 'react';
 
 import {IPreviewComponentProps} from 'superdesk-api';
+import {IProfileTextFieldConfig, IProfileTextValue} from './interfaces';
 
-export class ProfileTextPreview extends React.PureComponent<IPreviewComponentProps<string>> {
+type IProps = IPreviewComponentProps<IProfileTextValue, IProfileTextFieldConfig>;
+
+export class ProfileTextPreview extends React.PureComponent<IProps> {
     render() {
-        return (
-            <div className="form__row form__row--small-padding">
+        return this.props.value == null || this.props.value.length === 0 ? null : (
+            <div className="form__row">
                 <div dangerouslySetInnerHTML={{__html: this.props.value}} />
             </div>
         );

diff --git a/client/extensions/tga-author-profile-fields/src/components/vocab/config.tsx b/client/extensions/tga-author-profile-fields/src/components/vocab/config.tsx
@@ -59,7 +59,7 @@ export class VocabularyFieldConfig extends React.Component<IProps, IState> {
         const {gettext} = superdesk.localization;
 
         return (
-            <Spacer type="vertical" spacing="medium">
+            <Spacer v={true} gap="8">
                 <Select
                     value={config?.vocabulary_name}
                     label={gettext('Vocabulary')}

diff --git a/client/extensions/tga-author-profile-fields/src/components/vocab/editor.tsx b/client/extensions/tga-author-profile-fields/src/components/vocab/editor.tsx
@@ -2,14 +2,13 @@ import * as React from 'react';
 
 import {ILiveResourcesProps, IRestApiResponse, IVocabulary, IVocabularyItem, IEditorComponentProps} from 'superdesk-api';
 import {superdesk} from '../../superdesk';
-import {IVocabularyFieldConfig} from './interfaces';
+import {IVocabularyFieldConfig, IVocabularyFieldArrayValue} from './interfaces';
 
 import {Select, Option, MultiSelect, Label} from 'superdesk-ui-framework/react';
 
-type IVocabularyFieldValue = IVocabularyItem | Array<IVocabularyItem> | null | undefined;
-type IVocabularyFieldProps = IEditorComponentProps<IVocabularyFieldValue, IVocabularyFieldConfig>
+type IVocabularyFieldProps = IEditorComponentProps<IVocabularyFieldArrayValue, IVocabularyFieldConfig, never>;
 
-function getValueAsArray(value: IVocabularyFieldValue): Array<IVocabularyItem> {
+function getValueAsArray(value: IVocabularyFieldArrayValue): Array<IVocabularyItem> {
     if (value == null) {
         return [];
     } else if (!Array.isArray(value)) {
@@ -19,7 +18,7 @@ function getValueAsArray(value: IVocabularyFieldValue): Array<IVocabularyItem> {
     return value;
 }
 
-function getValueAsDictionary(value: IVocabularyFieldValue): IVocabularyItem | null {
+function getValueAsDictionary(value: IVocabularyFieldArrayValue): IVocabularyItem | null {
     if (value == null) {
         return null;
     } else if (Array.isArray(value)) {
@@ -55,7 +54,7 @@ export class VocabularyField extends React.PureComponent<IVocabularyFieldProps>
                             placeholder={'Select an item'}
                             optionLabel={(item) => item?.name || ''}
                             onChange={(newValues) => {
-                                this.props.setValue(newValues);
+                                this.props.onChange(newValues);
                             }}
                             filter={true}
                             labelHidden={true}
@@ -79,7 +78,7 @@ export class VocabularyField extends React.PureComponent<IVocabularyFieldProps>
                     ) : (
                         <Select
                             onChange={(qcode) => {
-                                this.props.setValue(items.find((item) => item.qcode === qcode));
+                                this.props.onChange(items.find((item) => item.qcode === qcode));
                             }}
                             value={getValueAsDictionary(this.props.value)?.qcode}
                             inlineLabel={true}

diff --git a/client/extensions/tga-author-profile-fields/src/components/vocab/interfaces.ts b/client/extensions/tga-author-profile-fields/src/components/vocab/interfaces.ts
@@ -1,5 +1,10 @@
-export interface IVocabularyFieldConfig {
+import {IVocabularyItem, ICommonFieldConfig} from 'superdesk-api';
+
+export interface IVocabularyFieldConfig extends ICommonFieldConfig {
     vocabulary_name: string;
     allow_freetext: boolean;
     exclude_from_content_api: boolean;
 }
+
+export type IVocabularyFieldValue = IVocabularyItem | null | undefined;
+export type IVocabularyFieldArrayValue = Array<IVocabularyItem> | IVocabularyFieldValue;
diff --git a/client/extensions/tga-author-profile-fields/src/components/vocab/preview.tsx b/client/extensions/tga-author-profile-fields/src/components/vocab/preview.tsx
@@ -1,11 +1,14 @@
 import * as React from 'react';
 
-import {IPreviewComponentProps, IVocabularyItem} from 'superdesk-api';
+import {IPreviewComponentProps} from 'superdesk-api';
+import {IVocabularyFieldArrayValue, IVocabularyFieldConfig} from './interfaces';
 import {SimpleList, SimpleListItem, Label} from 'superdesk-ui-framework/react';
 
-export class VocabularyPreview extends React.PureComponent<IPreviewComponentProps<IVocabularyItem | Array<IVocabularyItem>>> {
+type IProps = IPreviewComponentProps<IVocabularyFieldArrayValue, IVocabularyFieldConfig>;
+
+export class VocabularyPreview extends React.PureComponent<IProps> {
     render() {
-        return (
+        return this.props.value == null || this.props.value.length === 0 ? null : (
             <div className="form__row form__row--small-padding">
                 {!Array.isArray(this.props.value) ? (
                     <p className="sd-text__normal">

diff --git a/client/extensions/tga-author-profile-fields/src/components/vocab/singleValuePreview.tsx b/client/extensions/tga-author-profile-fields/src/components/vocab/singleValuePreview.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import {IPreviewComponentProps} from 'superdesk-api';
+import {IVocabularyFieldValue, IVocabularyFieldConfig} from './interfaces';
+
+type IProps = IPreviewComponentProps<IVocabularyFieldValue, IVocabularyFieldConfig>;
+
+export class SingleVocabularyPreview extends React.PureComponent<IProps> {
+    render() {
+        return this.props.value == null || this.props.value.length === 0 ? null : (
+            <div className="form__row form__row--small-padding">
+                <p className="sd-text__normal">
+                    {this.props.value.name}
+                </p>
+            </div>
+        );
+    }
+}
diff --git a/client/extensions/tga-author-profile-fields/src/components/vocab/typeaheadEditor.tsx b/client/extensions/tga-author-profile-fields/src/components/vocab/typeaheadEditor.tsx
@@ -4,11 +4,10 @@ import {ILiveResourcesProps, IRestApiResponse, IVocabulary, IVocabularyItem, IEd
 import {superdesk} from '../../superdesk';
 
 import {Autocomplete} from 'superdesk-ui-framework/react';
-import {IVocabularyFieldConfig} from "./interfaces";
+import {IVocabularyFieldConfig, IVocabularyFieldValue} from "./interfaces";
 
 
-type IVocabularyFieldValue = IVocabularyItem | null | undefined;
-type IVocabularyFieldProps = IEditorComponentProps<IVocabularyFieldValue, IVocabularyFieldConfig>
+type IVocabularyFieldProps = IEditorComponentProps<IVocabularyFieldValue, IVocabularyFieldConfig, never>;
 const NEW_ITEM_PREFIX = '_new:';
 
 export class VocabularyTypeaheadField extends React.PureComponent<IVocabularyFieldProps> {
@@ -58,7 +57,7 @@ export class VocabularyTypeaheadField extends React.PureComponent<IVocabularyFie
                             onChange={(val) => {
                                 if (val.length === 0) {
                                     // Remove the selected item
-                                    this.props.setValue(null);
+                                    this.props.onChange(null);
                                 }
                             }}
                             onSelect={(value: any) => {
@@ -69,7 +68,7 @@ export class VocabularyTypeaheadField extends React.PureComponent<IVocabularyFie
                                     newItem.qcode = newItem.name.replace(/ /g, '_');
                                 }
 
-                                this.props.setValue(newItem);
+                                this.props.onChange(newItem);
                             }}
                             disabled={this.props.readOnly}
                         />