From 9de856c69f2cdffa4d7803c93ad0b64a62f22e65 Mon Sep 17 00:00:00 2001
From: Konstantin Markov <maga.ot.oz@protonmail.com>
Date: Mon, 28 Oct 2024 14:15:15 +0200
Subject: [PATCH 1/6] Resizing authoring on widget pin, allow for a secondary
 widget

---
 .../article-widgets/find-and-replace.tsx      |   4 +-
 .../authoring-integration-wrapper-sidebar.tsx |   3 +-
 .../authoring-integration-wrapper.tsx         | 387 +++++++++---------
 .../apps/authoring-react/authoring-react.tsx  |  10 +-
 .../comments/CommentsWidget.tsx               |   2 +-
 scripts/core/ui/ui.ts                         |  25 +-
 6 files changed, 230 insertions(+), 201 deletions(-)

diff --git a/scripts/apps/authoring-react/article-widgets/find-and-replace.tsx b/scripts/apps/authoring-react/article-widgets/find-and-replace.tsx
index c8a7c0d0fb..fa0f6f9859 100644
--- a/scripts/apps/authoring-react/article-widgets/find-and-replace.tsx
+++ b/scripts/apps/authoring-react/article-widgets/find-and-replace.tsx
@@ -134,7 +134,7 @@ class FindAndReplaceWidget extends React.PureComponent<IArticleSideWidgetCompone
                                             this.highlightMatches();
                                         });
                                     }}
-                                    disabled={this.state.replaceValue.trim().length < 1}
+                                    disabled={this.state.replaceValue?.trim().length < 1}
                                 />
 
                                 <Button
@@ -150,7 +150,7 @@ class FindAndReplaceWidget extends React.PureComponent<IArticleSideWidgetCompone
                                             this.highlightMatches();
                                         });
                                     }}
-                                    disabled={this.state.replaceValue.trim().length < 1}
+                                    disabled={this.state.replaceValue?.trim().length < 1}
                                 />
                             </Spacer>
                         </div>
diff --git a/scripts/apps/authoring-react/authoring-integration-wrapper-sidebar.tsx b/scripts/apps/authoring-react/authoring-integration-wrapper-sidebar.tsx
index 42fffba7bb..13d64f8cbb 100644
--- a/scripts/apps/authoring-react/authoring-integration-wrapper-sidebar.tsx
+++ b/scripts/apps/authoring-react/authoring-integration-wrapper-sidebar.tsx
@@ -62,7 +62,6 @@ export class AuthoringIntegrationWrapperSidebar extends React.PureComponent<IPro
 
         return (
             <Nav.SideBarTabs
-                disabled={sideWidget?.pinned}
                 activeTab={sideWidget?.id}
                 onActiveTabChange={(nextWidgetId) => {
                     if (nextWidgetId == null && closedIntentionally.value == true) {
@@ -90,4 +89,4 @@ export class AuthoringIntegrationWrapperSidebar extends React.PureComponent<IPro
             />
         );
     }
-}
\ No newline at end of file
+}
diff --git a/scripts/apps/authoring-react/authoring-integration-wrapper.tsx b/scripts/apps/authoring-react/authoring-integration-wrapper.tsx
index a92c01da83..76ab09098e 100644
--- a/scripts/apps/authoring-react/authoring-integration-wrapper.tsx
+++ b/scripts/apps/authoring-react/authoring-integration-wrapper.tsx
@@ -241,6 +241,7 @@ interface IPropsWrapper extends IProps {
 interface IState {
     sidebarMode: boolean | 'hidden';
     sideWidget: null | ISideWidget;
+    sideWidgetSecondary: null | ISideWidget;
 }
 
 export class AuthoringIntegrationWrapper extends React.PureComponent<IPropsWrapper, IState> {
@@ -254,6 +255,7 @@ export class AuthoringIntegrationWrapper extends React.PureComponent<IPropsWrapp
         this.state = {
             sidebarMode: this.props.sidebarMode === 'hidden' ? 'hidden' : (this.props.sidebarMode ?? false),
             sideWidget: localStorageWidget != null ? JSON.parse(localStorageWidget) : null,
+            sideWidgetSecondary: null,
         };
 
         this.prepareForUnmounting = this.prepareForUnmounting.bind(this);
@@ -324,203 +326,214 @@ export class AuthoringIntegrationWrapper extends React.PureComponent<IPropsWrapp
 
         return (
             <WithInteractiveArticleActionsPanel location="authoring">
-                {(panelState, panelActions) => {
-                    return (
-                        <AuthoringReact
-                            themingEnabled
-                            onFieldChange={this.props.onFieldChange}
-                            hideSecondaryToolbar={this.props.hideSecondaryToolbar}
-                            ref={(component) => {
-                                this.authoringReactRef = component;
-                            }}
-                            itemId={this.props.itemId}
-                            resourceNames={ARTICLE_RELATED_RESOURCE_NAMES}
-                            onClose={() => this.props.onClose()}
-                            authoringStorage={this.props.authoringStorage}
-                            fieldsAdapter={getFieldsAdapter(this.props.authoringStorage)}
-                            storageAdapter={{
-                                storeValue: (value, fieldId, article) => {
-                                    return {
-                                        ...article,
-                                        extra: {
-                                            ...(article.extra ?? {}),
-                                            [fieldId]: value,
-                                        },
-                                    };
-                                },
-                                retrieveStoredValue: (item: IArticle, fieldId) => item.extra?.[fieldId] ?? null,
-                            }}
-                            getLanguage={(article) => article.language ?? 'en'}
-                            onEditingStart={(article) => {
-                                dispatchCustomEvent('articleEditStart', article);
-                            }}
-                            onEditingEnd={(article) => {
-                                dispatchCustomEvent('articleEditEnd', article);
-                            }}
-                            getActions={({
+                {(panelState, panelActions) => (
+                    <AuthoringReact
+                        themingEnabled
+                        onFieldChange={this.props.onFieldChange}
+                        hideSecondaryToolbar={this.props.hideSecondaryToolbar}
+                        ref={(component) => {
+                            this.authoringReactRef = component;
+                        }}
+                        itemId={this.props.itemId}
+                        resourceNames={ARTICLE_RELATED_RESOURCE_NAMES}
+                        onClose={() => this.props.onClose()}
+                        authoringStorage={this.props.authoringStorage}
+                        fieldsAdapter={getFieldsAdapter(this.props.authoringStorage)}
+                        storageAdapter={{
+                            storeValue: (value, fieldId, article) => {
+                                return {
+                                    ...article,
+                                    extra: {
+                                        ...(article.extra ?? {}),
+                                        [fieldId]: value,
+                                    },
+                                };
+                            },
+                            retrieveStoredValue: (item: IArticle, fieldId) => item.extra?.[fieldId] ?? null,
+                        }}
+                        getLanguage={(article) => article.language ?? 'en'}
+                        onEditingStart={(article) => {
+                            dispatchCustomEvent('articleEditStart', article);
+                        }}
+                        onEditingEnd={(article) => {
+                            dispatchCustomEvent('articleEditEnd', article);
+                        }}
+                        getActions={({
+                            item,
+                            contentProfile,
+                            fieldsData,
+                            getLatestItem,
+                            handleUnsavedChanges,
+                            hasUnsavedChanges,
+                            authoringStorage,
+                            fieldsAdapter,
+                            storageAdapter,
+                        }) => {
+                            const authoringActionsFromExtensions = getAuthoringActionsFromExtensions(
                                 item,
                                 contentProfile,
                                 fieldsData,
-                                getLatestItem,
-                                handleUnsavedChanges,
-                                hasUnsavedChanges,
-                                authoringStorage,
-                                fieldsAdapter,
-                                storageAdapter,
-                            }) => {
-                                const authoringActionsFromExtensions = getAuthoringActionsFromExtensions(
-                                    item,
-                                    contentProfile,
-                                    fieldsData,
-                                );
-
-                                return [
-                                    getSaveAsTemplate(getLatestItem),
-                                    getCompareVersionsModal(
-                                        getLatestItem,
-                                        authoringStorage,
-                                        fieldsAdapter,
-                                        storageAdapter,
-                                    ),
-                                    getMultiEditModal(getLatestItem),
-                                    getHighlightsAction(getLatestItem),
-                                    getMarkedForDesksModal(getLatestItem),
-                                    getExportModal(getLatestItem, handleUnsavedChanges, hasUnsavedChanges),
-                                    getTranslateModal(getLatestItem),
-                                    ...authoringActionsFromExtensions,
-                                ];
-                            }}
-                            getSidebarWidgetsCount={({item}) => getWidgetsFromExtensions(item).length}
-                            sideWidget={this.state.sideWidget}
-                            onSideWidgetChange={(sideWidget) => {
+                            );
+
+                            return [
+                                getSaveAsTemplate(getLatestItem),
+                                getCompareVersionsModal(
+                                    getLatestItem,
+                                    authoringStorage,
+                                    fieldsAdapter,
+                                    storageAdapter,
+                                ),
+                                getMultiEditModal(getLatestItem),
+                                getHighlightsAction(getLatestItem),
+                                getMarkedForDesksModal(getLatestItem),
+                                getExportModal(getLatestItem, handleUnsavedChanges, hasUnsavedChanges),
+                                getTranslateModal(getLatestItem),
+                                ...authoringActionsFromExtensions,
+                            ];
+                        }}
+                        getSidebarWidgetsCount={({item}) => getWidgetsFromExtensions(item).length}
+                        sideWidget={this.state.sideWidgetSecondary ?? this.state.sideWidget}
+                        onSideWidgetChange={(sideWidget) => {
+                            if (this.state.sideWidgetSecondary != null) {
+                                this.setState({
+                                    sideWidgetSecondary: sideWidget,
+                                    sideWidget: sideWidget.pinned ? null : this.state.sideWidget,
+                                });
+
+                                closedIntentionally.value = false;
+                            } else {
                                 this.setState({sideWidget});
-                            }}
-                            getInlineToolbarActions={this.props.getInlineToolbarActions}
-                            getAuthoringPrimaryToolbarWidgets={
-                                this.props.getAuthoringPrimaryToolbarWidgets != null
-                                    ? () => this.props.getAuthoringPrimaryToolbarWidgets(panelState, panelActions)
-                                    : undefined
                             }
-                            getSidePanel={({
-                                item,
-                                getLatestItem,
-                                contentProfile,
-                                fieldsData,
-                                handleFieldsDataChange,
-                                fieldsAdapter,
-                                storageAdapter,
-                                authoringStorage,
-                                handleUnsavedChanges,
-                                sideWidget,
-                                onItemChange,
-                                addValidationErrors,
-                            }, readOnly) => {
-                                if (panelState.active === true) {
-                                    return (
-                                        <InteractiveArticleActionsPanel
-                                            items={panelState.items}
-                                            tabs={panelState.tabs}
-                                            activeTab={panelState.activeTab}
-                                            handleUnsavedChanges={
-                                                () => handleUnsavedChanges().then((res) => [res])
+                        }}
+                        getInlineToolbarActions={this.props.getInlineToolbarActions}
+                        getAuthoringPrimaryToolbarWidgets={
+                            this.props.getAuthoringPrimaryToolbarWidgets != null
+                                ? () => this.props.getAuthoringPrimaryToolbarWidgets(panelState, panelActions)
+                                : undefined
+                        }
+                        getSidePanel={({
+                            item,
+                            getLatestItem,
+                            contentProfile,
+                            fieldsData,
+                            handleFieldsDataChange,
+                            fieldsAdapter,
+                            storageAdapter,
+                            authoringStorage,
+                            handleUnsavedChanges,
+                            sideWidget,
+                            onItemChange,
+                            addValidationErrors,
+                        }, readOnly) => {
+                            if (panelState.active === true) {
+                                return (
+                                    <InteractiveArticleActionsPanel
+                                        items={panelState.items}
+                                        tabs={panelState.tabs}
+                                        activeTab={panelState.activeTab}
+                                        handleUnsavedChanges={
+                                            () => handleUnsavedChanges().then((res) => [res])
+                                        }
+                                        onClose={panelActions.closePanel}
+                                        onError={(error) => {
+                                            if (error.kind === 'publishing-error') {
+                                                addValidationErrors(error.fields);
+                                            } else {
+                                                assertNever(error.kind);
                                             }
-                                            onClose={panelActions.closePanel}
-                                            onError={(error) => {
-                                                if (error.kind === 'publishing-error') {
-                                                    addValidationErrors(error.fields);
-                                                } else {
-                                                    assertNever(error.kind);
-                                                }
-                                            }}
-                                            markupV2
-                                        />
-                                    );
-                                }
+                                        }}
+                                        markupV2
+                                    />
+                                );
+                            }
 
-                                if (sideWidget == null) {
-                                    return null;
-                                }
+                            if (sideWidget == null) {
+                                return null;
+                            }
 
-                                const WidgetComponent = getWidgetsFromExtensions(item)
-                                    .find((widget) => sideWidget === widget._id)?.component;
+                            const WidgetComponent = getWidgetsFromExtensions(item)
+                                .find((widget) => sideWidget === widget._id)?.component;
+
+                            return (
+                                <WidgetStatePersistenceHOC sideWidgetId={sideWidget}>
+                                    {(widgetRef) => (
+                                        <WidgetComponent
+                                            ref={widgetRef}
+                                            initialState={(() => {
+                                                const localStorageWidgetState =
+                                                    JSON.parse(localStorage.getItem('SIDE_WIDGET') ?? 'null');
+
+                                                if (localStorageWidgetState?.id != null) {
+                                                    const initialState = localStorageWidgetState?.initialState;
+
+                                                    sdApi.preferences.update(
+                                                        PINNED_WIDGET_USER_PREFERENCE_SETTINGS,
+                                                        {type: 'string', _id: localStorageWidgetState?.id},
+                                                    );
+
+                                                    // Once a user switches the widget, authoring gets
+                                                    // re-rendered 3-4 times, causing this logic to run more
+                                                    // than once. To prevent wrong widget state its
+                                                    // deleted after 5 seconds.
+                                                    setTimeout(() => {
+                                                        localStorage.removeItem('SIDE_WIDGET');
+                                                    }, 5000);
+
+                                                    closedIntentionally.value = false;
+                                                    return initialState;
+                                                }
 
-                                return (
-                                    <WidgetStatePersistenceHOC sideWidgetId={sideWidget}>
-                                        {(widgetRef) => (
-                                            <WidgetComponent
-                                                ref={widgetRef}
-                                                initialState={(() => {
-                                                    const localStorageWidgetState =
-                                                        JSON.parse(localStorage.getItem('SIDE_WIDGET') ?? 'null');
-
-                                                    if (localStorageWidgetState?.id != null) {
-                                                        const initialState = localStorageWidgetState?.initialState;
-
-                                                        sdApi.preferences.update(
-                                                            PINNED_WIDGET_USER_PREFERENCE_SETTINGS,
-                                                            {type: 'string', _id: localStorageWidgetState?.id},
-                                                        );
-
-                                                        // Once a user switches the widget, authoring gets
-                                                        // re-rendered 3-4 times, causing this logic to run more
-                                                        // than once. To prevent wrong widget state its
-                                                        // deleted after 5 seconds.
-                                                        setTimeout(() => {
-                                                            localStorage.removeItem('SIDE_WIDGET');
-                                                        }, 5000);
-
-                                                        closedIntentionally.value = false;
-                                                        return initialState;
-                                                    }
-
-                                                    if (
-                                                        localStorageWidgetState == null
-                                                        && closedIntentionally.value === true
-                                                        && widgetState[this.state.sideWidget.id] != null
-                                                    ) {
-                                                        return widgetState[this.state.sideWidget.id];
-                                                    }
-
-                                                    return undefined;
-                                                })()}
-                                                article={item}
-                                                getLatestArticle={getLatestItem}
-                                                contentProfile={contentProfile}
-                                                fieldsData={fieldsData}
-                                                authoringStorage={authoringStorage}
-                                                fieldsAdapter={fieldsAdapter}
-                                                storageAdapter={storageAdapter}
-                                                onFieldsDataChange={handleFieldsDataChange}
-                                                readOnly={readOnly}
-                                                handleUnsavedChanges={() => handleUnsavedChanges()}
-                                                onItemChange={onItemChange}
-                                            />
-                                        )}
-                                    </WidgetStatePersistenceHOC>
-                                );
-                            }}
-                            getSidebar={
-                                this.state.sidebarMode !== true
-                                    ? null
-                                    : (options) => (
-                                        <AuthoringIntegrationWrapperSidebar
-                                            options={options}
-                                            sideWidget={this.state.sideWidget}
-                                            setSideWidget={(sideWidget) => {
-                                                this.setState({sideWidget});
-                                            }}
+                                                if (
+                                                    localStorageWidgetState == null
+                                                    && closedIntentionally.value === true
+                                                    && widgetState[this.state.sideWidget.id] != null
+                                                ) {
+                                                    return widgetState[this.state.sideWidget.id];
+                                                }
+
+                                                return undefined;
+                                            })()}
+                                            article={item}
+                                            getLatestArticle={getLatestItem}
+                                            contentProfile={contentProfile}
+                                            fieldsData={fieldsData}
+                                            authoringStorage={authoringStorage}
+                                            fieldsAdapter={fieldsAdapter}
+                                            storageAdapter={storageAdapter}
+                                            onFieldsDataChange={handleFieldsDataChange}
+                                            readOnly={readOnly}
+                                            handleUnsavedChanges={() => handleUnsavedChanges()}
+                                            onItemChange={onItemChange}
                                         />
-                                    )
-                            }
-                            secondaryToolbarWidgets={secondaryToolbarWidgetsReady}
-                            validateBeforeSaving={false}
-                            getSideWidgetIdAtIndex={(article, index) => {
-                                return getWidgetsFromExtensions(article)[index]._id;
-                            }}
-                            autoFocus={this.props.autoFocus}
-                        />
-                    );
-                }}
+                                    )}
+                                </WidgetStatePersistenceHOC>
+                            );
+                        }}
+                        getSidebar={this.state.sidebarMode !== true ? null : (options) => (
+                            <AuthoringIntegrationWrapperSidebar
+                                options={options}
+                                sideWidget={this.state.sideWidgetSecondary ?? this.state.sideWidget}
+                                setSideWidget={(sideWidget) => {
+                                    if (this.state.sideWidget?.id === sideWidget?.id && sideWidget?.id != null) {
+                                        this.setState({sideWidgetSecondary: null});
+                                        closedIntentionally.value = true;
+                                    } else if (this.state.sideWidget?.pinned === true) {
+                                        this.setState({sideWidgetSecondary: sideWidget});
+                                        closedIntentionally.value = true;
+                                    } else {
+                                        this.setState({sideWidget});
+                                    }
+                                }}
+                            />
+                        )}
+                        secondaryToolbarWidgets={secondaryToolbarWidgetsReady}
+                        validateBeforeSaving={false}
+                        getSideWidgetIdAtIndex={(article, index) => {
+                            return getWidgetsFromExtensions(article)[index]._id;
+                        }}
+                        autoFocus={this.props.autoFocus}
+                    />
+                )}
             </WithInteractiveArticleActionsPanel>
         );
     }
diff --git a/scripts/apps/authoring-react/authoring-react.tsx b/scripts/apps/authoring-react/authoring-react.tsx
index 1cc4f0befe..af44f9c2f9 100644
--- a/scripts/apps/authoring-react/authoring-react.tsx
+++ b/scripts/apps/authoring-react/authoring-react.tsx
@@ -333,17 +333,21 @@ export class AuthoringReact<T extends IBaseRestApiResponse> extends React.PureCo
         };
 
         widgetReactIntegration.pinWidget = () => {
-            const widgetPinned = !(this.props.sideWidget?.pinned ?? false);
+            const shouldWidgetGetPinned = !(this.props.sideWidget?.pinned ?? false);
             const update = {
                 type: 'string',
-                _id: widgetPinned ? this.props.sideWidget.id : null,
+                _id: shouldWidgetGetPinned ? this.props.sideWidget.id : null,
             };
 
+            dispatchEvent(new CustomEvent('resize-monitoring', {
+                detail: {value: shouldWidgetGetPinned ? -330 : 330},
+            }));
+
             closedIntentionally.value = true;
             sdApi.preferences.update(PINNED_WIDGET_USER_PREFERENCE_SETTINGS, update);
             this.props.onSideWidgetChange({
                 ...this.props.sideWidget,
-                pinned: widgetPinned,
+                pinned: shouldWidgetGetPinned,
             });
         };
 
diff --git a/scripts/apps/authoring-react/generic-widgets/comments/CommentsWidget.tsx b/scripts/apps/authoring-react/generic-widgets/comments/CommentsWidget.tsx
index 2405245ec3..64ec48b498 100644
--- a/scripts/apps/authoring-react/generic-widgets/comments/CommentsWidget.tsx
+++ b/scripts/apps/authoring-react/generic-widgets/comments/CommentsWidget.tsx
@@ -216,7 +216,7 @@ class CommentsWidget<T> extends React.PureComponent<IProps<T>, IState> {
                         text="post"
                         type="primary"
                         onClick={this.save}
-                        disabled={this.state.newCommentMessage.length < 1}
+                        disabled={this.state.newCommentMessage?.length < 1}
                     />
                 </Spacer>
             </Spacer>
diff --git a/scripts/core/ui/ui.ts b/scripts/core/ui/ui.ts
index d4fddec702..0ac19a089a 100644
--- a/scripts/core/ui/ui.ts
+++ b/scripts/core/ui/ui.ts
@@ -926,23 +926,36 @@ function splitterWidget(superdesk, $timeout, $rootScope) {
                 }, 0, false);
             }
 
-            /*
-             * Resize on request
-             */
-            $rootScope.$on('resize:monitoring', (e, value) => {
-                if ((workspace.outerWidth() + value) < MONITORING_MIN_WIDTH) {
+            const resizeOnDemandHandler = (resizeWith: number) => {
+                if ((workspace.outerWidth() + resizeWith) < MONITORING_MIN_WIDTH) {
                     return;
                 }
 
-                workspace.width(workspace.outerWidth() + value);
+                workspace.width(workspace.outerWidth() + resizeWith);
 
                 resize();
 
                 $timeout(() => {
                     afterResize();
                 }, 500, false);
+            };
+
+            addEventListener('resize-monitoring', (e: CustomEvent) => {
+                resizeOnDemandHandler(e.detail.value);
+            });
+
+            /*
+             * Resize on request
+             */
+            $rootScope.$on('resize:monitoring', (e, value) => {
+                resizeOnDemandHandler(value);
             });
 
+            $rootScope.$on('$destroy', () => {
+                removeEventListener('resize-monitoring', (e: CustomEvent) => {
+                    resizeOnDemandHandler(e.detail.value);
+                });
+            });
             /*
              * If authoring is not initialized,
              * wait, and initialize it again

From 9a303f774570495dfafd8f20f885df647647338a Mon Sep 17 00:00:00 2001
From: Konstantin Markov <maga.ot.oz@protonmail.com>
Date: Tue, 29 Oct 2024 16:06:52 +0200
Subject: [PATCH 2/6] Macros improvement, fix editor crash,

---
 .../authoring-react/field-adapters/authors.tsx  |  2 +-
 scripts/apps/authoring-react/macros/macros.tsx  | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/scripts/apps/authoring-react/field-adapters/authors.tsx b/scripts/apps/authoring-react/field-adapters/authors.tsx
index b39cbb4ec4..dc8b3eab50 100644
--- a/scripts/apps/authoring-react/field-adapters/authors.tsx
+++ b/scripts/apps/authoring-react/field-adapters/authors.tsx
@@ -51,7 +51,7 @@ export const authors: IFieldAdapter<IArticle> = {
                 const metadata = ng.get('metadata');
 
                 const authorsTree = arrayToTree(
-                    metadata.values.authors as Array<IUserOption | IAuthorRole>,
+                    (metadata.values.authors ?? []) as Array<IUserOption | IAuthorRole>,
                     (item) => getId(item),
                     (item) => {
                         if (isAuthorRole(item)) {
diff --git a/scripts/apps/authoring-react/macros/macros.tsx b/scripts/apps/authoring-react/macros/macros.tsx
index c2f753f3ca..dd145f67a5 100644
--- a/scripts/apps/authoring-react/macros/macros.tsx
+++ b/scripts/apps/authoring-react/macros/macros.tsx
@@ -18,7 +18,7 @@ import {Button} from 'superdesk-ui-framework/react/components/Button';
 import {sdApi} from 'api';
 import {dispatchInternalEvent} from 'core/internal-events';
 import {generatePatch} from 'core/patch';
-import {ToggleBox} from 'superdesk-ui-framework/react';
+import {Label, ToggleBox} from 'superdesk-ui-framework/react';
 import {Switch} from 'superdesk-ui-framework/react/components/Switch';
 import {omitFields} from '../data-layer';
 import {assertNever, nameof} from 'core/helpers/typescript-helpers';
@@ -304,7 +304,20 @@ class MacrosWidget extends React.PureComponent<IArticleSideWidgetComponentType,
 
     render() {
         if (this.state.macros == null) {
-            return null;
+            return (
+                <AuthoringWidgetLayout
+                    header={(
+                        <AuthoringWidgetHeading
+                            widgetId={MACROS_WIDGET_ID}
+                            widgetName={getLabel()}
+                            editMode={false}
+                        />
+                    )}
+                    body={(
+                        <Label text={gettext('No macros configured.')} />
+                    )}
+            />
+            );
         }
 
         const RunMacroButton: React.ComponentType<{macro: IMacro}> = ({macro}) => {

From 91d56f600a06b4af70771916a22735604adc6d65 Mon Sep 17 00:00:00 2001
From: Konstantin Markov <maga.ot.oz@protonmail.com>
Date: Tue, 29 Oct 2024 16:23:05 +0200
Subject: [PATCH 3/6] Fix lint

---
 scripts/apps/authoring-react/macros/macros.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/apps/authoring-react/macros/macros.tsx b/scripts/apps/authoring-react/macros/macros.tsx
index dd145f67a5..7087437536 100644
--- a/scripts/apps/authoring-react/macros/macros.tsx
+++ b/scripts/apps/authoring-react/macros/macros.tsx
@@ -316,7 +316,7 @@ class MacrosWidget extends React.PureComponent<IArticleSideWidgetComponentType,
                     body={(
                         <Label text={gettext('No macros configured.')} />
                     )}
-            />
+                />
             );
         }
 

From e3e134cf649bc27b75ac6dbec60db806287efe26 Mon Sep 17 00:00:00 2001
From: Konstantin Markov <maga.ot.oz@protonmail.com>
Date: Mon, 11 Nov 2024 12:57:04 +0200
Subject: [PATCH 4/6] Fix widget pinning

---
 .../article-widgets/find-and-replace.tsx      |  2 +-
 .../versions-tab.tsx                          | 12 ++--
 .../authoring-integration-wrapper-sidebar.tsx | 35 ++++-------
 .../authoring-integration-wrapper.tsx         | 55 +++++++----------
 .../apps/authoring-react/authoring-react.tsx  | 59 +++++++++----------
 .../comments/CommentsWidget.tsx               |  2 +-
 .../widget-header-component.tsx               |  6 +-
 .../widgets/WidgetHeaderComponent.tsx         | 18 +-----
 scripts/apps/authoring/widgets/widgets.ts     |  6 +-
 scripts/core/superdesk-api.d.ts               |  4 +-
 10 files changed, 81 insertions(+), 118 deletions(-)

diff --git a/scripts/apps/authoring-react/article-widgets/find-and-replace.tsx b/scripts/apps/authoring-react/article-widgets/find-and-replace.tsx
index fa0f6f9859..8ac16ae25a 100644
--- a/scripts/apps/authoring-react/article-widgets/find-and-replace.tsx
+++ b/scripts/apps/authoring-react/article-widgets/find-and-replace.tsx
@@ -134,7 +134,7 @@ class FindAndReplaceWidget extends React.PureComponent<IArticleSideWidgetCompone
                                             this.highlightMatches();
                                         });
                                     }}
-                                    disabled={this.state.replaceValue?.trim().length < 1}
+                                    disabled={(this.state.replaceValue ?? '').trim().length < 1}
                                 />
 
                                 <Button
diff --git a/scripts/apps/authoring-react/article-widgets/versions-and-item-history/versions-tab.tsx b/scripts/apps/authoring-react/article-widgets/versions-and-item-history/versions-tab.tsx
index cf6df5f3e7..534f85dfbb 100644
--- a/scripts/apps/authoring-react/article-widgets/versions-and-item-history/versions-tab.tsx
+++ b/scripts/apps/authoring-react/article-widgets/versions-and-item-history/versions-tab.tsx
@@ -114,11 +114,11 @@ export class VersionsTab extends React.PureComponent<IArticleSideWidgetComponent
 
         compareAuthoringEntities({
             item1: {
-                label: gettext('version {{n}}', {n: from._current_version}),
+                label: gettext('version {{n}}', {n: from?._current_version}),
                 entity: from,
             },
             item2: {
-                label: gettext('version {{n}}', {n: to._current_version}),
+                label: gettext('version {{n}}', {n: to?._current_version}),
                 entity: to,
             },
             getLanguage: () => '',
@@ -158,7 +158,7 @@ export class VersionsTab extends React.PureComponent<IArticleSideWidgetComponent
                                     },
                                 });
                             }}
-                            getLabel={(item) => gettext('version: {{n}}', {n: item._current_version})}
+                            getLabel={(item) => gettext('version: {{n}}', {n: item?._current_version})}
                             required
                         />
 
@@ -173,7 +173,7 @@ export class VersionsTab extends React.PureComponent<IArticleSideWidgetComponent
                                     },
                                 });
                             }}
-                            getLabel={(item) => gettext('version: {{n}}', {n: item._current_version})}
+                            getLabel={(item) => gettext('version: {{n}}', {n: item?._current_version})}
                             required
                         />
                     </Spacer>
@@ -233,7 +233,7 @@ export class VersionsTab extends React.PureComponent<IArticleSideWidgetComponent
 
                                 <Spacer h gap="8" justifyContent="space-between" alignItems="center" noWrap>
                                     <div>
-                                        {gettext('version: {{n}}', {n: item._current_version})}
+                                        {gettext('version: {{n}}', {n: item?._current_version})}
                                     </div>
 
                                     <div style={{display: 'flex'}}>
@@ -255,7 +255,7 @@ export class VersionsTab extends React.PureComponent<IArticleSideWidgetComponent
                                                         item,
                                                         contentProfile,
                                                         fieldsData,
-                                                        gettext('version {{n}}', {n: item._current_version}),
+                                                        gettext('version {{n}}', {n: item?._current_version}),
                                                     );
                                                 }}
                                                 style="hollow"
diff --git a/scripts/apps/authoring-react/authoring-integration-wrapper-sidebar.tsx b/scripts/apps/authoring-react/authoring-integration-wrapper-sidebar.tsx
index 13d64f8cbb..cf5437eacb 100644
--- a/scripts/apps/authoring-react/authoring-integration-wrapper-sidebar.tsx
+++ b/scripts/apps/authoring-react/authoring-integration-wrapper-sidebar.tsx
@@ -3,7 +3,6 @@ import * as Nav from 'superdesk-ui-framework/react/components/Navigation';
 import {IArticle, IExposedFromAuthoring} from 'superdesk-api';
 import {ISideBarTab} from 'superdesk-ui-framework/react/components/Navigation/SideBarTabs';
 import {getWidgetsFromExtensions, ISideWidget} from './authoring-integration-wrapper';
-import {closedIntentionally} from 'apps/authoring/widgets/widgets';
 
 interface IProps {
     options: IExposedFromAuthoring<IArticle>;
@@ -58,32 +57,24 @@ export class AuthoringIntegrationWrapperSidebar extends React.PureComponent<IPro
             return null;
         }
 
-        const {sideWidget} = this.props;
+        const {sideWidget, setSideWidget} = this.props;
 
         return (
             <Nav.SideBarTabs
-                activeTab={sideWidget?.id}
+                activeTab={sideWidget?.activeId}
                 onActiveTabChange={(nextWidgetId) => {
-                    if (nextWidgetId == null && closedIntentionally.value == true) {
-                        closedIntentionally.value = false;
+                    // active is closed, we set the pinned as active
+                    if (nextWidgetId == null && sideWidget.pinnedId != null) {
+                        setSideWidget({
+                            activeId: sideWidget?.pinnedId,
+                            pinnedId: sideWidget?.pinnedId,
+                        });
+                    } else {
+                        setSideWidget({
+                            activeId: nextWidgetId,
+                            pinnedId: sideWidget?.pinnedId,
+                        });
                     }
-
-                    const isWidgetPinned = (() => {
-                        if (sideWidget?.id != null && sideWidget.id === nextWidgetId) {
-                            return sideWidget.pinned;
-                        }
-
-                        return false;
-                    })();
-
-                    this.props.setSideWidget(
-                        nextWidgetId == null
-                            ? null
-                            : {
-                                id: nextWidgetId,
-                                pinned: isWidgetPinned,
-                            },
-                    );
                 }}
                 items={this.state.sidebarTabs}
             />
diff --git a/scripts/apps/authoring-react/authoring-integration-wrapper.tsx b/scripts/apps/authoring-react/authoring-integration-wrapper.tsx
index 76ab09098e..2b38f6643d 100644
--- a/scripts/apps/authoring-react/authoring-integration-wrapper.tsx
+++ b/scripts/apps/authoring-react/authoring-integration-wrapper.tsx
@@ -56,10 +56,9 @@ const defaultToolbarItems: Array<React.ComponentType<{article: IArticle}>> = [Cr
 interface IProps {
     itemId: IArticle['_id'];
 }
-
 export type ISideWidget = {
-    id: string;
-    pinned?: boolean;
+    activeId?: string;
+    pinnedId?: string;
 };
 
 const getCompareVersionsModal = (
@@ -240,8 +239,7 @@ interface IPropsWrapper extends IProps {
 
 interface IState {
     sidebarMode: boolean | 'hidden';
-    sideWidget: null | ISideWidget;
-    sideWidgetSecondary: null | ISideWidget;
+    sideWidget: ISideWidget;
 }
 
 export class AuthoringIntegrationWrapper extends React.PureComponent<IPropsWrapper, IState> {
@@ -251,11 +249,14 @@ export class AuthoringIntegrationWrapper extends React.PureComponent<IPropsWrapp
         super(props);
 
         const localStorageWidget = localStorage.getItem('SIDE_WIDGET');
+        const widgetId = localStorageWidget != null ? JSON.parse(localStorageWidget) : null;
 
         this.state = {
             sidebarMode: this.props.sidebarMode === 'hidden' ? 'hidden' : (this.props.sidebarMode ?? false),
-            sideWidget: localStorageWidget != null ? JSON.parse(localStorageWidget) : null,
-            sideWidgetSecondary: null,
+            sideWidget: {
+                pinnedId: widgetId,
+                activeId: widgetId,
+            },
         };
 
         this.prepareForUnmounting = this.prepareForUnmounting.bind(this);
@@ -269,7 +270,10 @@ export class AuthoringIntegrationWrapper extends React.PureComponent<IPropsWrapp
     }
 
     componentDidUpdate(_prevProps: IPropsWrapper, prevState: IState): void {
-        if (this.state.sideWidget?.id != null && this.state.sideWidget?.id != prevState.sideWidget?.id) {
+        if (
+            this.state.sideWidget?.pinnedId != null
+            && this.state.sideWidget?.pinnedId != prevState.sideWidget?.pinnedId
+        ) {
             this.loadWidgetFromPreferences();
         }
     }
@@ -280,8 +284,8 @@ export class AuthoringIntegrationWrapper extends React.PureComponent<IPropsWrapp
         if (pinnedWidgetPreference?._id != null) {
             this.setState({
                 sideWidget: {
-                    id: pinnedWidgetPreference._id,
-                    pinned: true,
+                    pinnedId: pinnedWidgetPreference._id,
+                    activeId: pinnedWidgetPreference._id,
                 },
             });
         }
@@ -392,18 +396,10 @@ export class AuthoringIntegrationWrapper extends React.PureComponent<IPropsWrapp
                             ];
                         }}
                         getSidebarWidgetsCount={({item}) => getWidgetsFromExtensions(item).length}
-                        sideWidget={this.state.sideWidgetSecondary ?? this.state.sideWidget}
+                        sideWidget={this.state.sideWidget}
                         onSideWidgetChange={(sideWidget) => {
-                            if (this.state.sideWidgetSecondary != null) {
-                                this.setState({
-                                    sideWidgetSecondary: sideWidget,
-                                    sideWidget: sideWidget.pinned ? null : this.state.sideWidget,
-                                });
-
-                                closedIntentionally.value = false;
-                            } else {
-                                this.setState({sideWidget});
-                            }
+                            this.setState({sideWidget});
+                            closedIntentionally.value = false;
                         }}
                         getInlineToolbarActions={this.props.getInlineToolbarActions}
                         getAuthoringPrimaryToolbarWidgets={
@@ -486,9 +482,9 @@ export class AuthoringIntegrationWrapper extends React.PureComponent<IPropsWrapp
                                                 if (
                                                     localStorageWidgetState == null
                                                     && closedIntentionally.value === true
-                                                    && widgetState[this.state.sideWidget.id] != null
+                                                    && widgetState[this.state.sideWidget?.activeId] != null
                                                 ) {
-                                                    return widgetState[this.state.sideWidget.id];
+                                                    return widgetState[this.state.sideWidget?.activeId];
                                                 }
 
                                                 return undefined;
@@ -512,17 +508,10 @@ export class AuthoringIntegrationWrapper extends React.PureComponent<IPropsWrapp
                         getSidebar={this.state.sidebarMode !== true ? null : (options) => (
                             <AuthoringIntegrationWrapperSidebar
                                 options={options}
-                                sideWidget={this.state.sideWidgetSecondary ?? this.state.sideWidget}
+                                sideWidget={this.state.sideWidget}
                                 setSideWidget={(sideWidget) => {
-                                    if (this.state.sideWidget?.id === sideWidget?.id && sideWidget?.id != null) {
-                                        this.setState({sideWidgetSecondary: null});
-                                        closedIntentionally.value = true;
-                                    } else if (this.state.sideWidget?.pinned === true) {
-                                        this.setState({sideWidgetSecondary: sideWidget});
-                                        closedIntentionally.value = true;
-                                    } else {
-                                        this.setState({sideWidget});
-                                    }
+                                    this.setState({sideWidget});
+                                    closedIntentionally.value = false;
                                 }}
                             />
                         )}
diff --git a/scripts/apps/authoring-react/authoring-react.tsx b/scripts/apps/authoring-react/authoring-react.tsx
index af44f9c2f9..615c301b1b 100644
--- a/scripts/apps/authoring-react/authoring-react.tsx
+++ b/scripts/apps/authoring-react/authoring-react.tsx
@@ -333,36 +333,32 @@ export class AuthoringReact<T extends IBaseRestApiResponse> extends React.PureCo
         };
 
         widgetReactIntegration.pinWidget = () => {
-            const shouldWidgetGetPinned = !(this.props.sideWidget?.pinned ?? false);
+            const nextPinnedWidget = this.props.sideWidget.pinnedId != null ? null : this.props.sideWidget.activeId;
             const update = {
                 type: 'string',
-                _id: shouldWidgetGetPinned ? this.props.sideWidget.id : null,
+                _id: nextPinnedWidget,
             };
 
             dispatchEvent(new CustomEvent('resize-monitoring', {
-                detail: {value: shouldWidgetGetPinned ? -330 : 330},
+                detail: {value: nextPinnedWidget ? -330 : 330},
             }));
 
-            closedIntentionally.value = true;
             sdApi.preferences.update(PINNED_WIDGET_USER_PREFERENCE_SETTINGS, update);
+
+            // Pinned state can change, but the active widget shouldn't change
+            // from this function
             this.props.onSideWidgetChange({
-                ...this.props.sideWidget,
-                pinned: shouldWidgetGetPinned,
+                activeId: this.props.sideWidget.activeId,
+                pinnedId: nextPinnedWidget
             });
         };
 
         widgetReactIntegration.getActiveWidget = () => {
-            return this.props.sideWidget?.id ?? null;
+            return this.props.sideWidget?.activeId;
         };
 
         widgetReactIntegration.getPinnedWidget = () => {
-            const pinned = this.props.sideWidget?.pinned === true;
-
-            if (pinned) {
-                return this.props.sideWidget.id;
-            }
-
-            return null;
+            return this.props.sideWidget?.pinnedId;
         };
 
         widgetReactIntegration.closeActiveWidget = () => {
@@ -1207,16 +1203,15 @@ export class AuthoringReact<T extends IBaseRestApiResponse> extends React.PureCo
             authoringStorage: authoringStorage,
             storageAdapter: storageAdapter,
             fieldsAdapter: fieldsAdapter,
-            sideWidget: this.props.sideWidget?.id ?? null,
+            sideWidget: this.props.sideWidget?.activeId,
             toggleSideWidget: (id) => {
-                if (id == null || this.props.sideWidget?.id === id) {
-                    this.props.onSideWidgetChange(null);
-                } else {
-                    this.props.onSideWidgetChange({
-                        id: id,
-                        pinned: false,
-                    });
-                }
+                const activeWidgetId = this.props.sideWidget?.activeId;
+
+                debugger
+                this.props.onSideWidgetChange({
+                    activeId: id,
+                    pinnedId: id === activeWidgetId ? activeWidgetId : this.props.sideWidget?.pinnedId,
+                });
             },
             addValidationErrors: (moreValidationErrors) => {
                 this.setState({
@@ -1332,11 +1327,11 @@ export class AuthoringReact<T extends IBaseRestApiResponse> extends React.PureCo
 
         for (let i = 0; i < widgetsCount; i++) {
             widgetKeybindings[`ctrl+alt+${i + 1}`] = () => {
-                const nextWidgetName: string = this.props.getSideWidgetIdAtIndex(exposed.item, i);
+                const nextWidgetId: string = this.props.getSideWidgetIdAtIndex(exposed.item, i);
 
                 this.props.onSideWidgetChange({
-                    id: nextWidgetName,
-                    pinned: this.props.sideWidget?.pinned ?? false,
+                    activeId: nextWidgetId,
+                    pinnedId: this.props.sideWidget?.pinnedId,
                 });
             };
         }
@@ -1355,8 +1350,6 @@ export class AuthoringReact<T extends IBaseRestApiResponse> extends React.PureCo
             },
         ] : [];
 
-        const pinned = this.props.sideWidget?.pinned === true;
-
         const printPreviewAction = (() => {
             const execute = () => {
                 previewAuthoringEntity(
@@ -1415,6 +1408,8 @@ export class AuthoringReact<T extends IBaseRestApiResponse> extends React.PureCo
             },
         };
 
+        const isPinned = this.props.sideWidget?.pinnedId != null;
+
         return (
             <div style={{display: 'contents'}} ref={this.setRef}>
                 {
@@ -1547,10 +1542,10 @@ export class AuthoringReact<T extends IBaseRestApiResponse> extends React.PureCo
                                             />
                                         </Layout.AuthoringMain>
                                     )}
-                                    sideOverlay={!pinned && OpenWidgetComponent != null && OpenWidgetComponent}
-                                    sideOverlayOpen={!pinned && OpenWidgetComponent != null}
-                                    sidePanel={pinned && OpenWidgetComponent != null && OpenWidgetComponent}
-                                    sidePanelOpen={pinned && OpenWidgetComponent != null}
+                                    sideOverlay={!isPinned && OpenWidgetComponent != null && OpenWidgetComponent}
+                                    sideOverlayOpen={!isPinned && OpenWidgetComponent != null}
+                                    sidePanel={isPinned && OpenWidgetComponent != null && OpenWidgetComponent}
+                                    sidePanelOpen={isPinned && OpenWidgetComponent != null}
                                     sideBar={this.props.getSidebar?.(exposed)}
                                 />
                             );
diff --git a/scripts/apps/authoring-react/generic-widgets/comments/CommentsWidget.tsx b/scripts/apps/authoring-react/generic-widgets/comments/CommentsWidget.tsx
index 64ec48b498..839cb2cbb4 100644
--- a/scripts/apps/authoring-react/generic-widgets/comments/CommentsWidget.tsx
+++ b/scripts/apps/authoring-react/generic-widgets/comments/CommentsWidget.tsx
@@ -216,7 +216,7 @@ class CommentsWidget<T> extends React.PureComponent<IProps<T>, IState> {
                         text="post"
                         type="primary"
                         onClick={this.save}
-                        disabled={this.state.newCommentMessage?.length < 1}
+                        disabled={(this.state.newCommentMessage ?? '').length < 1}
                     />
                 </Spacer>
             </Spacer>
diff --git a/scripts/apps/authoring-react/widget-header-component.tsx b/scripts/apps/authoring-react/widget-header-component.tsx
index 063c151a59..a0976aa22c 100644
--- a/scripts/apps/authoring-react/widget-header-component.tsx
+++ b/scripts/apps/authoring-react/widget-header-component.tsx
@@ -7,11 +7,11 @@ import {gettext} from 'core/utils';
 export class WidgetHeaderComponent extends React.PureComponent<IWidgetIntegrationComponentProps> {
     render() {
         const {
-            widget,
             pinned,
             pinWidget,
             customContent,
         } = this.props;
+        const sidebarPinnedId = widgetReactIntegration.getPinnedWidget();
 
         return (
             <Layout.PanelHeader
@@ -19,13 +19,13 @@ export class WidgetHeaderComponent extends React.PureComponent<IWidgetIntegratio
                 onClose={pinned ? undefined : () => this.props.closeWidget()}
                 iconButtons={widgetReactIntegration.disableWidgetPinning == null
                     ? undefined
-                    : [
+                    : sidebarPinnedId != null && (sidebarPinnedId !== widgetReactIntegration.getActiveWidget()) ? [] : [
                         <Rotate degrees={pinned ? 90 : 0} key="noop">
                             <IconButton
                                 icon="pin"
                                 ariaValue={gettext('Pin')}
                                 onClick={() => {
-                                    pinWidget(widget);
+                                    pinWidget();
                                 }}
                             />
                         </Rotate>,
diff --git a/scripts/apps/authoring/widgets/WidgetHeaderComponent.tsx b/scripts/apps/authoring/widgets/WidgetHeaderComponent.tsx
index c53c9a19e4..ae44b3a09d 100644
--- a/scripts/apps/authoring/widgets/WidgetHeaderComponent.tsx
+++ b/scripts/apps/authoring/widgets/WidgetHeaderComponent.tsx
@@ -8,11 +8,7 @@ import {gettext} from 'core/utils';
  */
 export class WidgetHeaderComponent extends React.PureComponent<IWidgetIntegrationComponentProps> {
     render() {
-        const {
-            widget,
-            pinWidget,
-            pinned,
-        } = this.props;
+        const {pinWidget, pinned} = this.props;
 
         return (
             <div className="widget-header">
@@ -20,18 +16,10 @@ export class WidgetHeaderComponent extends React.PureComponent<IWidgetIntegratio
                     <span>{this.props.widgetName}</span>
                     <span>
                         <button
-                            className={
-                                classNames(
-                                    'sd-widget-pin icn-btn',
-                                    {
-                                        'sd-widget-pinned': widget.pinned,
-                                        'active': widget.pinned,
-                                    },
-                                )
-                            }
+                            className="sd-widget-pin icn-btn"
                             disabled={pinned}
                             onClick={() => {
-                                pinWidget(widget);
+                                pinWidget();
                             }}
                             aria-label={gettext('Pin/Unpin')}
                         >
diff --git a/scripts/apps/authoring/widgets/widgets.ts b/scripts/apps/authoring/widgets/widgets.ts
index ad438a0bdc..93e632a9b2 100644
--- a/scripts/apps/authoring/widgets/widgets.ts
+++ b/scripts/apps/authoring/widgets/widgets.ts
@@ -101,9 +101,9 @@ function AuthoringWidgetsProvider() {
 export interface IWidgetIntegrationComponentProps {
     widgetName: string;
     pinned: boolean;
-    widget: any;
+    widget: string;
     editMode: boolean;
-    pinWidget(widget: any): void;
+    pinWidget(sideWidget?: IWidget): void;
     closeWidget(): void;
 
     /**
@@ -121,7 +121,7 @@ export interface IWidgetIntegrationComponentProps {
  * and styles in the angular based authoring.
  */
 interface IWidgetIntegration {
-    pinWidget(widget: any): void;
+    pinWidget(sideWidget?: IWidget): void;
     getActiveWidget(): any;
     closeActiveWidget(): any;
     getPinnedWidget(): any;
diff --git a/scripts/core/superdesk-api.d.ts b/scripts/core/superdesk-api.d.ts
index c8b087e7cb..e421bf57b7 100644
--- a/scripts/core/superdesk-api.d.ts
+++ b/scripts/core/superdesk-api.d.ts
@@ -217,8 +217,8 @@ declare module 'superdesk-api' {
         getSidebarWidgetsCount(options: IExposedFromAuthoring<T>): number;
 
         sideWidget: null | {
-            id: string;
-            pinned?: boolean;
+            pinnedId?: string;
+            activeId?: string;
         };
 
         getSideWidgetIdAtIndex(item: T, index: number): string;

From 471811231469fd58bb89f394ba4cf970255b2a43 Mon Sep 17 00:00:00 2001
From: Konstantin Markov <maga.ot.oz@protonmail.com>
Date: Mon, 11 Nov 2024 13:20:00 +0200
Subject: [PATCH 5/6] Fix lint, fix compare versions

---
 .../versions-and-item-history/versions-tab.tsx   | 16 +++++++++-------
 scripts/apps/authoring-react/authoring-react.tsx |  3 +--
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/scripts/apps/authoring-react/article-widgets/versions-and-item-history/versions-tab.tsx b/scripts/apps/authoring-react/article-widgets/versions-and-item-history/versions-tab.tsx
index 534f85dfbb..33e42a96ce 100644
--- a/scripts/apps/authoring-react/article-widgets/versions-and-item-history/versions-tab.tsx
+++ b/scripts/apps/authoring-react/article-widgets/versions-and-item-history/versions-tab.tsx
@@ -114,11 +114,11 @@ export class VersionsTab extends React.PureComponent<IArticleSideWidgetComponent
 
         compareAuthoringEntities({
             item1: {
-                label: gettext('version {{n}}', {n: from?._current_version}),
+                label: gettext('version {{n}}', {n: from._current_version}),
                 entity: from,
             },
             item2: {
-                label: gettext('version {{n}}', {n: to?._current_version}),
+                label: gettext('version {{n}}', {n: to._current_version}),
                 entity: to,
             },
             getLanguage: () => '',
@@ -158,7 +158,7 @@ export class VersionsTab extends React.PureComponent<IArticleSideWidgetComponent
                                     },
                                 });
                             }}
-                            getLabel={(item) => gettext('version: {{n}}', {n: item?._current_version})}
+                            getLabel={(item) => gettext('version: {{n}}', {n: item._current_version})}
                             required
                         />
 
@@ -173,7 +173,7 @@ export class VersionsTab extends React.PureComponent<IArticleSideWidgetComponent
                                     },
                                 });
                             }}
-                            getLabel={(item) => gettext('version: {{n}}', {n: item?._current_version})}
+                            getLabel={(item) => gettext('version: {{n}}', {n: item._current_version})}
                             required
                         />
                     </Spacer>
@@ -183,7 +183,9 @@ export class VersionsTab extends React.PureComponent<IArticleSideWidgetComponent
                     <div style={{display: 'flex', justifyContent: 'center'}}>
                         <Button
                             text={gettext('Compare')}
-                            disabled={selectedForComparison.from === selectedForComparison.to}
+                            disabled={selectedForComparison?.from != null
+                                && (selectedForComparison.from === selectedForComparison.to)
+                            }
                             onClick={() => {
                                 this.compareVersions();
                             }}
@@ -233,7 +235,7 @@ export class VersionsTab extends React.PureComponent<IArticleSideWidgetComponent
 
                                 <Spacer h gap="8" justifyContent="space-between" alignItems="center" noWrap>
                                     <div>
-                                        {gettext('version: {{n}}', {n: item?._current_version})}
+                                        {gettext('version: {{n}}', {n: item._current_version})}
                                     </div>
 
                                     <div style={{display: 'flex'}}>
@@ -255,7 +257,7 @@ export class VersionsTab extends React.PureComponent<IArticleSideWidgetComponent
                                                         item,
                                                         contentProfile,
                                                         fieldsData,
-                                                        gettext('version {{n}}', {n: item?._current_version}),
+                                                        gettext('version {{n}}', {n: item._current_version}),
                                                     );
                                                 }}
                                                 style="hollow"
diff --git a/scripts/apps/authoring-react/authoring-react.tsx b/scripts/apps/authoring-react/authoring-react.tsx
index 993420fd00..9fb1e049c6 100644
--- a/scripts/apps/authoring-react/authoring-react.tsx
+++ b/scripts/apps/authoring-react/authoring-react.tsx
@@ -350,7 +350,7 @@ export class AuthoringReact<T extends IBaseRestApiResponse> extends React.PureCo
             // from this function
             this.props.onSideWidgetChange({
                 activeId: this.props.sideWidget.activeId,
-                pinnedId: nextPinnedWidget
+                pinnedId: nextPinnedWidget,
             });
         };
 
@@ -1212,7 +1212,6 @@ export class AuthoringReact<T extends IBaseRestApiResponse> extends React.PureCo
             toggleSideWidget: (id) => {
                 const activeWidgetId = this.props.sideWidget?.activeId;
 
-                debugger
                 this.props.onSideWidgetChange({
                     activeId: id,
                     pinnedId: id === activeWidgetId ? activeWidgetId : this.props.sideWidget?.pinnedId,

From 85d882ff025bd52a142e6ebfdc51a637b473148a Mon Sep 17 00:00:00 2001
From: Konstantin Markov <maga.ot.oz@protonmail.com>
Date: Mon, 11 Nov 2024 14:17:40 +0200
Subject: [PATCH 6/6] Adjust broadcasting, fix widget closing from inside
 widget

---
 scripts/apps/authoring-react/authoring-react.tsx     |  5 ++++-
 scripts/extensions/broadcasting/src/page.tsx         |  4 ++--
 .../src/rundown-templates/template-edit.tsx          |  4 ++--
 .../src/rundowns/prepare-create-edit-rundown-item.ts |  4 ++--
 .../broadcasting/src/rundowns/rundown-view-edit.tsx  | 12 ++++++++----
 5 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/scripts/apps/authoring-react/authoring-react.tsx b/scripts/apps/authoring-react/authoring-react.tsx
index 9fb1e049c6..c03676ad7f 100644
--- a/scripts/apps/authoring-react/authoring-react.tsx
+++ b/scripts/apps/authoring-react/authoring-react.tsx
@@ -364,7 +364,10 @@ export class AuthoringReact<T extends IBaseRestApiResponse> extends React.PureCo
 
         widgetReactIntegration.closeActiveWidget = () => {
             closedIntentionally.value = false;
-            this.props.onSideWidgetChange(null);
+            this.props.onSideWidgetChange({
+                activeId: this.props.sideWidget?.pinnedId,
+                pinnedId: this.props.sideWidget?.pinnedId,
+            });
         };
 
         widgetReactIntegration.WidgetHeaderComponent = WidgetHeaderComponent;
diff --git a/scripts/extensions/broadcasting/src/page.tsx b/scripts/extensions/broadcasting/src/page.tsx
index 189202a49a..2eeda1fa9c 100644
--- a/scripts/extensions/broadcasting/src/page.tsx
+++ b/scripts/extensions/broadcasting/src/page.tsx
@@ -134,8 +134,8 @@ export class RundownsPage extends React.PureComponent<IProps, IState> {
                     : {
                         ...rundownItemActionNext,
                         sideWidget: {
-                            id: sidePanel,
-                            pinned: false,
+                            activeId: sidePanel,
+                            pinnedId: undefined,
                         },
                     };
 
diff --git a/scripts/extensions/broadcasting/src/rundown-templates/template-edit.tsx b/scripts/extensions/broadcasting/src/rundown-templates/template-edit.tsx
index ca0b2e0321..377f9de1c9 100644
--- a/scripts/extensions/broadcasting/src/rundown-templates/template-edit.tsx
+++ b/scripts/extensions/broadcasting/src/rundown-templates/template-edit.tsx
@@ -99,8 +99,8 @@ type IProps = IPropsEditable | IPropsReadOnly;
 
 interface IState {
     sideWidget: null | {
-        id: string;
-        pinned?: boolean;
+        activeId?: string;
+        pinnedId?: string;
     };
 }
 
diff --git a/scripts/extensions/broadcasting/src/rundowns/prepare-create-edit-rundown-item.ts b/scripts/extensions/broadcasting/src/rundowns/prepare-create-edit-rundown-item.ts
index 5c8cef15b3..a3a187a8cf 100644
--- a/scripts/extensions/broadcasting/src/rundowns/prepare-create-edit-rundown-item.ts
+++ b/scripts/extensions/broadcasting/src/rundowns/prepare-create-edit-rundown-item.ts
@@ -15,8 +15,8 @@ const {httpRequestJsonLocal} = superdesk;
 
 interface IRundownItemActionBase extends IWithAuthoringReactKey {
     sideWidget: null | {
-        id: string;
-        pinned?: boolean;
+        activeId?: string;
+        pinnedId?: string;
     };
 }
 
diff --git a/scripts/extensions/broadcasting/src/rundowns/rundown-view-edit.tsx b/scripts/extensions/broadcasting/src/rundowns/rundown-view-edit.tsx
index 5b2d7c4541..8d8ebd4967 100644
--- a/scripts/extensions/broadcasting/src/rundowns/rundown-view-edit.tsx
+++ b/scripts/extensions/broadcasting/src/rundowns/rundown-view-edit.tsx
@@ -682,9 +682,13 @@ export class RundownViewEditComponent extends React.PureComponent<IProps, IState
 
                                                     return (
                                                         <Nav.SideBarTabs
-                                                            activeTab={sideWidget?.id ?? null}
-                                                            onActiveTabChange={(val) => {
-                                                                toggleSideWidget(val);
+                                                            activeTab={sideWidget?.activeId ?? null}
+                                                            onActiveTabChange={(nextWidget) => {
+                                                                if (sideWidget?.pinnedId && nextWidget == null) {
+                                                                    toggleSideWidget(sideWidget.pinnedId);
+                                                                } else {
+                                                                    toggleSideWidget(nextWidget);
+                                                                }
                                                             }}
                                                             items={sideWidgetsAllowed.map(({icon, _id}) => {
                                                                 const sidebarTab: ISideBarTab = {
@@ -715,7 +719,7 @@ export class RundownViewEditComponent extends React.PureComponent<IProps, IState
                                                     authoringStorage,
                                                     handleUnsavedChanges,
                                                 }) => {
-                                                    const sideWidgetName = sideWidget?.id ?? null;
+                                                    const sideWidgetName = sideWidget?.activeId ?? null;
 
                                                     if (
                                                         sideWidgetName == null