Resizing authoring on widget pin, allow for a secondary widget

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>

scripts/apps/authoring-react/article-widgets/versions-and-item-history/versions-tab.tsx

@@ -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();
                             }}

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,36 +57,27 @@ export class AuthoringIntegrationWrapperSidebar extends React.PureComponent<IPro
             return null;
         }
 
-        const {sideWidget} = this.props;
+        const {sideWidget, setSideWidget} = this.props;
 
         return (
             <Nav.SideBarTabs
-                disabled={sideWidget?.pinned}
-                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}
             />
         );
     }
-}
+}

scripts/apps/authoring-react/authoring-react.tsx

@@ -334,37 +334,40 @@ export class AuthoringReact<T extends IBaseRestApiResponse> extends React.PureCo
         };
 
         widgetReactIntegration.pinWidget = () => {
-            const widgetPinned = !(this.props.sideWidget?.pinned ?? false);
+            const nextPinnedWidget = this.props.sideWidget.pinnedId != null ? null : this.props.sideWidget.activeId;
             const update = {
                 type: 'string',
-                _id: widgetPinned ? this.props.sideWidget.id : null,
+                _id: nextPinnedWidget,
             };
 
-            closedIntentionally.value = true;
+            dispatchEvent(new CustomEvent('resize-monitoring', {
+                detail: {value: nextPinnedWidget ? -330 : 330},
+            }));
+
             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: widgetPinned,
+                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 = () => {
             closedIntentionally.value = false;
-            this.props.onSideWidgetChange(null);
+            this.props.onSideWidgetChange({
+                activeId: this.props.sideWidget?.pinnedId,
+                pinnedId: this.props.sideWidget?.pinnedId,
+            });
         };
 
         widgetReactIntegration.WidgetHeaderComponent = WidgetHeaderComponent;
@@ -1208,16 +1211,14 @@ 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;
+
+                this.props.onSideWidgetChange({
+                    activeId: id,
+                    pinnedId: id === activeWidgetId ? activeWidgetId : this.props.sideWidget?.pinnedId,
+                });
             },
             addValidationErrors: (moreValidationErrors) => {
                 this.setState({
@@ -1333,11 +1334,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,
                 });
             };
         }
@@ -1356,8 +1357,6 @@ export class AuthoringReact<T extends IBaseRestApiResponse> extends React.PureCo
             },
         ] : [];
 
-        const pinned = this.props.sideWidget?.pinned === true;
-
         const printPreviewAction = (() => {
             const execute = () => {
                 previewAuthoringEntity(
@@ -1416,6 +1415,8 @@ export class AuthoringReact<T extends IBaseRestApiResponse> extends React.PureCo
             },
         };
 
+        const isPinned = this.props.sideWidget?.pinnedId != null;
+
         const onChangeSideWidget = (item: T) => {
             authoringStorage.getContentProfile(item, this.props.fieldsAdapter)
                 .then((res) => {
@@ -1563,10 +1564,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)}
                             />
                         )}

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>

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}) => {

scripts/apps/authoring-react/widget-header-component.tsx

@@ -7,25 +7,25 @@ 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
                 title={customContent == null ? this.props.widgetName : ''}
                 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>,

scripts/apps/authoring/widgets/WidgetHeaderComponent.tsx

@@ -8,30 +8,18 @@ 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">
                 <div className="widget-title widget-heading--title">
                     <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')}
                         >

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;

scripts/core/superdesk-api.d.ts

@@ -220,8 +220,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;

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