From 7604ef1081fc6b54f3d1e8408c331bdfdcbc4d54 Mon Sep 17 00:00:00 2001
From: Konstantin Markov <maga.ot.oz@protonmail.com>
Date: Thu, 24 Aug 2023 16:02:16 +0300
Subject: [PATCH] Switch to authoring react in broadcasting (#4313)

---
 scripts/appConfig.ts                          | 13 ++++-
 .../fields/linked-items/index.tsx             | 20 ++++----
 .../authoring-react/fields/register-fields.ts |  4 +-
 .../manage-widget-registration.ts             |  2 +-
 .../MetaDataDropdownSingleSelectReact.tsx     |  4 +-
 scripts/core/menu/authoring-switch.ts         | 50 +++++++++++++++++++
 scripts/core/menu/menu.ts                     | 11 +++-
 scripts/extensions/broadcasting/src/page.tsx  | 10 ++--
 8 files changed, 94 insertions(+), 20 deletions(-)
 create mode 100644 scripts/core/menu/authoring-switch.ts

diff --git a/scripts/appConfig.ts b/scripts/appConfig.ts
index 52482aa1d0..1d0edb842f 100644
--- 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
index b2bbb27ac5..1de70676bf 100644
--- 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
index d72f4cf16e..f379ea7166 100644
--- 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
index d5bbc5f449..d42e72c4fd 100644
--- 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
index 4e77d80d50..84f72d0cb8 100644
--- 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
new file mode 100644
index 0000000000..95460ff52b
--- /dev/null
+++ 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
index 2801132485..595aeecfa6 100644
--- 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,7 +289,7 @@ 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) {
@@ -294,6 +297,12 @@ angular.module('superdesk.core.menu', [
                         }
                     }
 
+                    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
index f7ca906d85..94e7f7f68f 100644
--- 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,
+                        },
+                    });
                 },
             });
         }