Switch to authoring react in broadcasting (#4313)

superdesk · Aug 24, 2023 · 7604ef1 · 7604ef1
1 parent ebb8bd9
commit 7604ef1
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 20 deletions.
diff --git a/scripts/appConfig.ts b/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;
+}
diff --git a/scripts/apps/authoring-react/fields/linked-items/index.tsx b/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');
+                        }
                     }
                 },
             },

diff --git a/scripts/apps/authoring-react/fields/register-fields.ts b/scripts/apps/authoring-react/fields/register-fields.ts
@@ -17,6 +17,8 @@ import {getArticlesInPackageField} from './package-items';
 import {getTagInputField} from './tag-input';
 import {getDatelineField} from './dateline';
 
+export const AUTHORING_REACT_FIELDS = 'authoring-react--fields';
+
 export function registerAuthoringReactFields() {
     const result: IExtensionActivationResult = {
         contributions: {
@@ -57,5 +59,5 @@ export function registerAuthoringReactFields() {
         },
     };
 
-    registerInternalExtension('authoring-react--fields', result);
+    registerInternalExtension(AUTHORING_REACT_FIELDS, result);
 }
diff --git a/scripts/apps/authoring-react/manage-widget-registration.ts b/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'] = [

diff --git a/scripts/apps/authoring/metadata/views/MetaDataDropdownSingleSelectReact.tsx b/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>

diff --git a/scripts/core/menu/authoring-switch.ts b/scripts/core/menu/authoring-switch.ts
@@ -0,0 +1,50 @@
+import {authoringReactEnabledUserSelection, extensions, setAuthoringReact} from 'appConfig';
+import {AUTHORING_REACT_FIELDS, 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';
+
+/**
+ * Enable authoring react in certain conditions
+ */
+export const setupAuthoringReact = (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(
+        (extensionUrl) => extensionUrl.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();
+    }
+};
diff --git a/scripts/core/menu/menu.ts b/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 {setupAuthoringReact} 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,14 +289,20 @@ 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);
                         }
                     }
 
+                    setupAuthoringReact($location.absUrl());
+
+                    scope.$on('$locationChangeSuccess', (e, newUrl) => {
+                        setupAuthoringReact(newUrl);
+                    });
+
                     scope.$on('$locationChangeStart', () => {
                         ctrl.flags.menu = false;
                     });

diff --git a/scripts/extensions/broadcasting/src/page.tsx b/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,
+                        },
+                    });
                 },
             });
         }