Switch to authoring react in broadcasting

scripts/appConfig.ts

@@ -46,6 +46,15 @@ export const debugInfo = {
     translationsLoaded: false,
 };
 
-//
-export const authoringReactViewEnabled = localStorage.getItem('authoring-react-enabled') != null;
+export const authoringReactEnabledUserSelection = false;
+
+/**
+ * Authoring react has to be enabled in the broadcasting
+ * module regardless of the user selection.
+ * */
+export let authoringReactViewEnabled = true;
 export const uiFrameworkAuthoringPanelTest = false;
+
+export function setAuthoringReact(enabled: boolean) {
+    authoringReactViewEnabled = enabled;
+}

scripts/apps/authoring-react/fields/linked-items/index.tsx

@@ -37,15 +37,17 @@ export function getLinkedItemsField(): ILinkedItemsField {
         contributions: {
             authoring: {
                 onCloseAfter: (item) => {
-                    const itemId = item._id;
-                    const storedItemId = sdApi.localStorage.getItem(`open-item-after-related-closed--${itemId}`);
-
-                    /**
-                     * If related item was just created and saved, open the original item
-                     * that triggered the creation of this related item.
-                     */
-                    if (storedItemId != null) {
-                        openArticle(storedItemId, 'edit');
+                    if (item?._id != null) {
+                        const itemId = item._id;
+                        const storedItemId = sdApi.localStorage.getItem(`open-item-after-related-closed--${itemId}`);
+
+                        /**
+                         * If related item was just created and saved, open the original item
+                         * that triggered the creation of this related item.
+                         */
+                        if (storedItemId != null) {
+                            openArticle(storedItemId, 'edit');
+                        }
                     }
                 },
             },

scripts/apps/authoring-react/manage-widget-registration.ts

@@ -12,7 +12,7 @@ import {getMacrosWidget} from './macros/macros';
 import {getPackagesWidget} from './packages';
 import {getMetadataWidget} from './article-widgets/metadata/metadata';
 
-const authoringReactWidgetsExtension = 'authoring-react-widgets';
+export const authoringReactWidgetsExtension = 'authoring-react-widgets';
 
 export function registerAuthoringReactWidgets() {
     const sidebarWidgets: IExtensionActivationResult['contributions']['authoringSideWidgets'] = [

scripts/apps/authoring/metadata/views/MetaDataDropdownSingleSelectReact.tsx

@@ -25,7 +25,7 @@ export class MetaDataDropdownSingleSelectReact extends React.PureComponent<IProp
         return (
             <div className="sd-line-input sd-line-input--no-label sd-line-input--is-select">
                 <select
-                    value={selectedValue}
+                    value={selectedValue ?? ''}
                     onChange={(event) => {
                         const _qcode = event.target.value;
 
@@ -35,7 +35,7 @@ export class MetaDataDropdownSingleSelectReact extends React.PureComponent<IProp
                     tabIndex={tabIndex}
                     className="sd-line-input__select"
                 >
-                    <option value="" disabled selected hidden>{gettext('-- Choose --')}</option>
+                    <option value="" disabled hidden>{gettext('-- Choose --')}</option>
                     {
                         optionsWithTranslations.map(({label, value}) => (
                             <option key={value} value={value}>{label}</option>

scripts/core/datetime/datetime.ts

@@ -8,11 +8,11 @@ const ISO_DATE_FORMAT = 'YYYY-MM-DD';
 const ISO_WEEK_FORMAT = 'YYYY-W';
 const ISO_YEAR_FORMAT = 'YYYY';
 
-const LONG_FORMAT = appConfig.longDateFormat || 'LLL';
-const TIME_FORMAT = appConfig.shortTimeFormat || 'hh:mm';
-const DATE_FORMAT = appConfig.shortDateFormat || 'MM/DD';
-const WEEK_FORMAT = appConfig.shortWeekFormat || 'dddd, ' + TIME_FORMAT;
-const ARCHIVE_FORMAT = appConfig.ArchivedDateFormat || DATE_FORMAT;
+const LONG_FORMAT = appConfig?.longDateFormat || 'LLL';
+const TIME_FORMAT = appConfig?.shortTimeFormat || 'hh:mm';
+const DATE_FORMAT = appConfig?.shortDateFormat || 'MM/DD';
+const WEEK_FORMAT = appConfig?.shortWeekFormat || 'dddd, ' + TIME_FORMAT;
+const ARCHIVE_FORMAT = appConfig?.ArchivedDateFormat || DATE_FORMAT;
 const SERVER_FORMAT = 'YYYY-MM-DDTHH:mm:ssZZ';
 
 /**

scripts/core/menu/authoring-switch.ts

@@ -0,0 +1,45 @@
+import {authoringReactEnabledUserSelection, extensions, setAuthoringReact} from 'appConfig';
+import {registerAuthoringReactFields} from 'apps/authoring-react/fields/register-fields';
+import {registerAuthoringReactWidgets, authoringReactWidgetsExtension} from 'apps/authoring-react/manage-widget-registration';
+import {unregisterInternalExtension} from 'core/helpers/register-internal-extension';
+import {trimStartExact} from 'core/helpers/utils';
+import {flatMap} from 'lodash';
+import ng from 'core/services/ng';
+
+export const switchAuthoring = (url: string) => {
+    const extensionUrls = flatMap(
+        Object.values(extensions).map(({activationResult}) => activationResult),
+        (activationResult) => activationResult.contributions?.pages ?? [],
+    ).map((page) => page.url);
+
+    const parsedPath = new URL(url);
+    const isNavigatingToAnExtensionPage = extensionUrls.find(
+        (url) => url.startsWith(trimStartExact(parsedPath.hash, '#')),
+    ) != null;
+
+    const action: 'register' | 'deregister' = (() => {
+        if (isNavigatingToAnExtensionPage) {
+            // regardless of user setting, authoring-react
+            // must be enabled in extensions
+            return 'register';
+        } else {
+            // respect user setting
+            return authoringReactEnabledUserSelection ? 'register' : 'deregister';
+        }
+    })();
+
+    if (action === 'register') {
+        setAuthoringReact(true);
+
+        registerAuthoringReactWidgets();
+        registerAuthoringReactFields();
+    } else {
+        setAuthoringReact(false);
+        unregisterInternalExtension(authoringReactWidgetsExtension);
+        unregisterInternalExtension('authoring-react--fields');
+    }
+
+    if (isNavigatingToAnExtensionPage) {
+        ng.get('authoringWorkspace').close();
+    }
+};

scripts/core/menu/menu.ts

@@ -3,6 +3,7 @@ import {GlobalMenuHorizontal} from './GlobalMenuHorizontal';
 import {appConfig} from 'appConfig';
 import {addInternalEventListener} from 'core/internal-events';
 import {IFullWidthPageCapabilityConfiguration} from 'superdesk-api';
+import {switchAuthoring} from './authoring-switch';
 
 SuperdeskFlagsService.$inject = [];
 function SuperdeskFlagsService() {
@@ -157,6 +158,7 @@ angular.module('superdesk.core.menu', [
         'privileges',
         'lodash',
         'workspaceMenu',
+        '$location',
         function(
             $route,
             superdesk,
@@ -166,6 +168,7 @@ angular.module('superdesk.core.menu', [
             privileges,
             _,
             workspaceMenu,
+            $location,
         ) {
             return {
                 require: '^sdSuperdeskView',
@@ -286,15 +289,26 @@ angular.module('superdesk.core.menu', [
 
                         _.each(scope.menu, (activity) => {
                             activity.isActive = route && route.href &&
-                                    route.href.substr(0, activity.href.length) === activity.href;
+                                route.href.substr(0, activity.href.length) === activity.href;
                         });
 
                         if (route && route.href) {
                             scope.activeMenuItemPath = getActiveMenuItemPath(route.href);
                         }
                     }
 
-                    scope.$on('$locationChangeStart', () => {
+                    switchAuthoring($location.absUrl());
+
+                    /**
+                     * Gets triggered after the location has been changed for the final time.
+                     * Using this is consistent and assures you that `nextUrl` is the final url
+                     * you'll receive for the location change.
+                     */
+                    scope.$on('$locationChangeSuccess', (_, newUrl, oldRoute) => {
+                        switchAuthoring(newUrl);
+                    });
+
+                    scope.$on('$locationChangeStart', (_, a, b) => {
                         ctrl.flags.menu = false;
                     });
 

scripts/core/superdesk-api.d.ts

@@ -5,18 +5,18 @@ declare module 'superdesk-api' {
 
     type OrderedMap<K, V> = import('immutable').OrderedMap<K, V>;
 
-    export interface DeepReadonlyArray<T> extends ReadonlyArray<DeepReadonly<T>> {};
+    export interface DeepReadonlyArray<T> extends ReadonlyArray<DeepReadonly<T>> { };
 
     export type DeepReadonlyObject<T> = {
         readonly [P in keyof T]: DeepReadonly<T[P]>;
     }
 
     export type DeepReadonly<T> =
         T extends Function
-            ? T
-            : T extends Array<infer U>
-                ? DeepReadonlyArray<U>
-                : DeepReadonlyObject<T>;
+        ? T
+        : T extends Array<infer U>
+        ? DeepReadonlyArray<U>
+        : DeepReadonlyObject<T>;
 
     export type Omit<K, V> = Pick<K, Exclude<keyof K, V>>;
 
@@ -284,7 +284,7 @@ declare module 'superdesk-api' {
     };
     export type IDatelineValueStorage = IDatelineValueOperational;
     export type IDatelineUserPreferences = never;
-    export interface IDatelineFieldConfig extends ICommonFieldConfig {}
+    export interface IDatelineFieldConfig extends ICommonFieldConfig { }
 
     // AUTHORING-REACT FIELD TYPES - time
 
@@ -299,7 +299,7 @@ declare module 'superdesk-api' {
 
     export type ITagInputValueOperational = Array<string> | null;
     export type ITagInputValueStorage = ITagInputValueOperational;
-    export interface ITagInputFieldConfig extends ICommonFieldConfig {};
+    export interface ITagInputFieldConfig extends ICommonFieldConfig { };
     export type ITagInputUserPreferences = never;
 
     // AUTHORING-REACT FIELD TYPES - duration
@@ -507,7 +507,7 @@ declare module 'superdesk-api' {
     // EXTENSIONS
 
     export type onSpikeMiddlewareResult = {warnings?: Array<{text: string}>};
-    export type onPublishMiddlewareResult= {warnings?: Array<{text: string}>};
+    export type onPublishMiddlewareResult = {warnings?: Array<{text: string}>};
 
     /**
      * float number 0 < x < 1. Larger the number, closer the component will be rendered to its side.
@@ -1080,13 +1080,13 @@ declare module 'superdesk-api' {
             [id: string]: IArticle | IRelatedArticle;
         };
         type:
-            | 'text'
-            | 'picture'
-            | 'video'
-            | 'audio'
-            | 'preformatted'
-            | 'graphic'
-            | 'composite';
+        | 'text'
+        | 'picture'
+        | 'video'
+        | 'audio'
+        | 'preformatted'
+        | 'graphic'
+        | 'composite';
         firstpublished?: string;
         linked_in_packages?: Array<{
             package: string;
@@ -1450,13 +1450,13 @@ declare module 'superdesk-api' {
         };
         schema: {};
         field_type:
-            | 'text'
-            | 'media'
-            | 'date'
-            | 'embed'
-            | 'urls'
-            | 'related_content'
-            | 'custom';
+        | 'text'
+        | 'media'
+        | 'date'
+        | 'embed'
+        | 'urls'
+        | 'related_content'
+        | 'custom';
         field_options?: { // Used for related content fields
             allowed_types?: {
                 picture?: boolean;
@@ -1467,12 +1467,12 @@ declare module 'superdesk-api' {
                 in_progress?: boolean;
                 published?: boolean;
             };
-            multiple_items?: { enabled: boolean; max_items: number };
+            multiple_items?: {enabled: boolean; max_items: number};
             single?: boolean; // used for custom text fields
         };
         custom_field_type?: string;
-        custom_field_config?: { [key: string]: any };
-        date_shortcuts?: Array<{ value: number; term: string; label: string }>;
+        custom_field_config?: {[key: string]: any};
+        date_shortcuts?: Array<{value: number; term: string; label: string}>;
         init_version?: number;
         preffered_items?: boolean;
         tags?: Array<IVocabularyTag>;
@@ -1541,7 +1541,7 @@ declare module 'superdesk-api' {
         length: number;
     }
 
-    export interface IAttachment extends IBaseRestApiResponse{
+    export interface IAttachment extends IBaseRestApiResponse {
         title: string;
         mimetype: string;
         filename: string;
@@ -1620,7 +1620,7 @@ declare module 'superdesk-api' {
         | {$lt: any}
         | {$lte: any}
         | {$in: any};
-        // consider adding $inString for matching substrings
+    // consider adding $inString for matching substrings
 
     export type IComparison = {[field: string]: IComparisonOptions};
     export type IAndOperator = {$and: Array<IComparison | ILogicalOperator>};
@@ -2773,7 +2773,7 @@ declare module 'superdesk-api' {
             InputLabel: React.ComponentType<{text: string}>;
             Icon: React.ComponentType<IPropsIcon>;
             IconBig: React.ComponentType<IPropsIconBig>;
-            TopMenuDropdownButton: React.ComponentType<{onClick: () => void; disabled?: boolean; active: boolean; pulsate?: boolean; 'data-test-id'?: string; tooltip?:string}>;
+            TopMenuDropdownButton: React.ComponentType<{onClick: () => void; disabled?: boolean; active: boolean; pulsate?: boolean; 'data-test-id'?: string; tooltip?: string}>;
 
             // TODO: move the component with all its dependencies to a separate project and use via npm package
             getAuthoringComponent: <T extends IBaseRestApiResponse>() => React.ComponentType<IPropsAuthoring<T>>;

scripts/extensions/broadcasting/src/page.tsx

@@ -81,10 +81,12 @@ export class RundownsPage extends React.PureComponent<IProps, IState> {
                 enabled: true,
                 allowed: true,
                 onToggle: (val) => {
-                    this.setState({rundownAction: {
-                        ...rundownAction,
-                        fullWidth: val,
-                    }});
+                    this.setState({
+                        rundownAction: {
+                            ...rundownAction,
+                            fullWidth: val,
+                        }
+                    });
                 },
             });
         }