add aditional button for full width mode

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

@@ -34,6 +34,7 @@ import {IArticleActionInteractive} from 'core/interactive-article-actions-panel/
 import {dispatchInternalEvent} from 'core/internal-events';
 import {notify} from 'core/notify/notify';
 import {showModal} from '@superdesk/common';
+import {ToggleFullWidth} from 'apps/authoring/authoring/components/toggleFullWithEditor';
 
 function onClose() {
     ng.get('authoringWorkspace').close();
@@ -43,6 +44,8 @@ function onClose() {
 function getInlineToolbarActions(
     options: IExposedFromAuthoring<IArticle>,
     action?: IAuthoringActionType,
+    hideMonitoring?: (state: boolean, event: React.MouseEvent<HTMLButtonElement>) => void,
+    isExpanded?: boolean,
 ): IAuthoringOptions<IArticle> {
     const {
         item,
@@ -137,6 +140,18 @@ function getInlineToolbarActions(
         availableOffline: true,
     };
 
+    const toggleFullWidthButton: ITopBarWidget<IArticle> = {
+        group: 'start',
+        priority: 0.1,
+        component: () => (
+            <ToggleFullWidth
+                onClick={(event) => hideMonitoring(true, event)}
+                isExpanded={isExpanded}
+            />
+        ),
+        availableOffline: true,
+    };
+
     const getManageHighlights = (): ITopBarWidget<IArticle> => ({
         group: 'start',
         priority: 0.3,
@@ -388,22 +403,22 @@ function getInlineToolbarActions(
     if (action === 'kill') {
         return {
             readOnly: false,
-            actions: [sendKillAction, closeIconButton, minimizeButton],
+            actions: [toggleFullWidthButton, sendKillAction, closeIconButton, minimizeButton],
         };
     }
 
     if (action === 'correct') {
         return {
             readOnly: false,
-            actions: [sendCorrectionAction, cancelAuthoringAction, minimizeButton],
+            actions: [toggleFullWidthButton, sendCorrectionAction, cancelAuthoringAction, minimizeButton],
         };
     }
 
     switch (itemState) {
     case ITEM_STATE.DRAFT:
         return {
             readOnly: false,
-            actions: [saveButton, minimizeButton, ...getReadOnlyAndArchivedFrom()],
+            actions: [toggleFullWidthButton, saveButton, minimizeButton, ...getReadOnlyAndArchivedFrom()],
         };
 
     case ITEM_STATE.SUBMITTED:
@@ -413,6 +428,7 @@ function getInlineToolbarActions(
     case ITEM_STATE.UNPUBLISHED:
         // eslint-disable-next-line no-case-declarations
         const actions: Array<ITopBarWidget<IArticle>> = [
+            toggleFullWidthButton,
             minimizeButton,
             closeButton,
             ...getReadOnlyAndArchivedFrom(),
@@ -634,6 +650,7 @@ function getInlineToolbarActions(
                     ),
                     availableOffline: false,
                 },
+                toggleFullWidthButton,
                 closeIconButton,
             ],
         };
@@ -657,6 +674,7 @@ function getInlineToolbarActions(
                     ),
                     availableOffline: false,
                 },
+                toggleFullWidthButton,
                 closeIconButton,
             ],
         };
@@ -666,6 +684,7 @@ function getInlineToolbarActions(
         return {
             readOnly: true,
             actions: [
+                toggleFullWidthButton,
                 updateAction,
                 correctAction,
                 takedownAction,
@@ -678,13 +697,14 @@ function getInlineToolbarActions(
     case ITEM_STATE.BEING_CORRECTED:
         return {
             readOnly: false,
-            actions: [closeIconButton, saveButton],
+            actions: [toggleFullWidthButton, closeIconButton, saveButton],
         };
 
     case ITEM_STATE.CORRECTION:
         return {
             readOnly: false,
             actions: [
+                toggleFullWidthButton, 
                 saveButton,
                 {
                     group: 'end',
@@ -710,13 +730,13 @@ function getInlineToolbarActions(
     case ITEM_STATE.KILLED:
         return {
             readOnly: true,
-            actions: [closeIconButton],
+            actions: [toggleFullWidthButton, closeIconButton],
         };
 
     case ITEM_STATE.RECALLED:
         return {
             readOnly: true,
-            actions: [closeIconButton],
+            actions: [toggleFullWidthButton, closeIconButton],
         };
     default:
         assertNever(itemState);
@@ -795,6 +815,8 @@ export function getAuthoringPrimaryToolbarWidgets(
 export interface IProps {
     action?: IAuthoringActionType;
     itemId: IArticle['_id'];
+    hideMonitoring: () => void;
+    isExpanded: boolean;
 }
 
 export class AuthoringAngularIntegration extends React.PureComponent<IProps> {
@@ -806,7 +828,7 @@ export class AuthoringAngularIntegration extends React.PureComponent<IProps> {
                     getAuthoringPrimaryToolbarWidgets={getAuthoringPrimaryToolbarWidgets}
                     itemId={this.props.itemId}
                     onClose={onClose}
-                    getInlineToolbarActions={(exposed) => getInlineToolbarActions(exposed, this.props.action)}
+                    getInlineToolbarActions={(exposed) => getInlineToolbarActions(exposed, this.props.action, this.props.hideMonitoring, this.props.isExpanded)}
                     authoringStorage={(() => {
                         if (this.props.action === 'kill' || this.props.action === 'takedown') {
                             return getAuthoringStorageIArticleKillOrTakedown(this.props.action);

scripts/apps/authoring-react/authoring-react.scss

@@ -20,7 +20,6 @@
     justify-content: space-between;
     gap: 16px;
     align-items: center;
-    padding-left: 16px;
 
     > * {
         display: flex;

scripts/apps/authoring/authoring/components/toggleFullWithEditor.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {Icon} from 'superdesk-ui-framework/react/components/Icon';
+import {Tooltip} from 'superdesk-ui-framework/react/components/Tooltip';
+import classNames from 'classnames';
+
+interface IProps {
+    isExpanded: boolean;
+    onClick(event): void;
+}
+
+export class ToggleFullWidth extends React.Component<IProps> {
+    render() {
+        let classes = classNames('expand-button', {
+            'expand-button--expanded': this.props.isExpanded,
+        })
+        return (
+            <Tooltip
+                text={this.props.isExpanded ? "Revert Authoring" : "Expand Authoring"}
+                flow='right'
+                appendToBody={true}
+            >
+                <button
+                    className={classes}
+                    onClick={this.props.onClick}
+                >
+                    <Icon name='chevron-left-thin' />
+                </button>
+            </Tooltip>
+        );
+    }
+}

scripts/apps/authoring/authoring/directives/AuthoringEmbeddedDirective.ts

@@ -3,14 +3,15 @@ import * as helpers from 'apps/authoring/authoring/helpers';
 import {gettext} from 'core/utils';
 import {appConfig, authoringReactViewEnabled} from 'appConfig';
 import {canPrintPreview} from 'apps/search/helpers';
+import {IFullWidthPageCapabilityConfiguration} from 'superdesk-api';
 
-AuthoringEmbeddedDirective.$inject = ['api', 'notify', '$filter'];
-export function AuthoringEmbeddedDirective(api, notify, $filter) {
+AuthoringEmbeddedDirective.$inject = ['superdeskFlags', 'api', 'notify', '$filter'];
+export function AuthoringEmbeddedDirective(superdeskFlags, api, notify, $filter) {
     return {
         template: authoringReactViewEnabled
             ? (
                 '<div>' +
-                    '<sd-authoring-integration-wrapper data-action="action" data-item-id="item._id">' +
+                    '<sd-authoring-integration-wrapper data-action="action" data-item-id="item._id" data-hide-monitoring="hideMonitoring" data-is-expanded="isExpanded">' +
                     '</sd-authoring-react>' +
                 '</div>'
             )
@@ -22,6 +23,27 @@ export function AuthoringEmbeddedDirective(api, notify, $filter) {
         },
         link: function(scope) {
             scope.canPrintPreview = canPrintPreview;
+            scope.isExpanded = superdeskFlags.flags.hideMonitoring;
+
+            scope.hideMonitoring = function(state, e) {
+                const fullWidthConfig: IFullWidthPageCapabilityConfiguration = scope.$parent.$parent.$parent.fullWidthConfig;
+
+                if (fullWidthConfig.enabled) {
+                    if (fullWidthConfig.allowed) {
+                        fullWidthConfig.onToggle(!scope.fullWidthEnabled);
+                    }
+                } else {
+                    // eslint-disable-next-line no-lonely-if
+                    if (superdeskFlags.flags.authoring && state) {
+                        e.preventDefault();
+                        superdeskFlags.flags.hideMonitoring = !superdeskFlags.flags.hideMonitoring;
+                        scope.isExpanded = superdeskFlags.flags.hideMonitoring;
+                        scope.$applyAsync();
+                    } else {
+                        superdeskFlags.flags.hideMonitoring = false;
+                    }
+                }
+            };
 
             function overrideEdnote(template) {
                 /* Override Editor note with given template or default one

scripts/apps/authoring/authoring/directives/AuthoringTopbarDirective.ts

@@ -6,6 +6,7 @@ import {addInternalEventListener, dispatchInternalEvent} from 'core/internal-eve
 import {appConfig} from 'appConfig';
 import {ITEM_STATE} from 'apps/archive/constants';
 import {IArticleActionInteractive} from 'core/interactive-article-actions-panel/interfaces';
+import {IFullWidthPageCapabilityConfiguration} from 'superdesk-api';
 
 /**
  * @ngdoc directive
@@ -16,12 +17,13 @@ import {IArticleActionInteractive} from 'core/interactive-article-actions-panel/
  *
  * @description Generates authoring subnav bar
  */
-AuthoringTopbarDirective.$inject = ['TranslationService', 'privileges', 'authoringWorkspace', '$q'];
+AuthoringTopbarDirective.$inject = ['TranslationService', 'privileges', 'authoringWorkspace', '$q', 'superdeskFlags'];
 export function AuthoringTopbarDirective(
     TranslationService,
     privileges,
     authoringWorkspace: AuthoringWorkspaceService,
     $q,
+    superdeskFlags
 ) {
     return {
         templateUrl: 'scripts/apps/authoring/views/authoring-topbar.html',
@@ -32,7 +34,7 @@ export function AuthoringTopbarDirective(
 
             scope.additionalButtons = authoringWorkspace.authoringTopBarAdditionalButtons;
             scope.buttonsToHide = authoringWorkspace.authoringTopBarButtonsToHide;
-
+            scope.monitoringHidden = superdeskFlags.flags.hideMonitoring ?? false;
             scope.saveTopbarLoading = false;
             scope.getSpellchecker = getSpellchecker;
             scope.userHasPrivileges = privileges.userHasPrivileges;
@@ -145,6 +147,32 @@ export function AuthoringTopbarDirective(
             scope.$on('$destroy', () => {
                 removeSaveEventListener();
             });
+
+            scope.$watch(() => {
+                return superdeskFlags.flags.hideMonitoring;
+            }, (value) => {
+                scope.monitoringHidden = value;
+            });
+
+            scope.hideMonitoring = function(state, e) {
+                const fullWidthConfig: IFullWidthPageCapabilityConfiguration = scope.$parent.$parent.$parent.$parent.fullWidthConfig;
+
+                if (fullWidthConfig.enabled) {
+                    if (fullWidthConfig.allowed) {
+                        fullWidthConfig.onToggle(!scope.fullWidthEnabled);
+                    }
+                } else {
+                    // eslint-disable-next-line no-lonely-if
+                    if (superdeskFlags.flags.authoring && state) {
+                        e.preventDefault();
+                        superdeskFlags.flags.hideMonitoring = !superdeskFlags.flags.hideMonitoring;
+                    } else {
+                        superdeskFlags.flags.hideMonitoring = false;
+                        scope.superdeskFlags = false;
+                    }
+                }
+            };
+
         },
     };
 }

scripts/apps/authoring/authoring/index.ts

@@ -101,7 +101,7 @@ angular.module('superdesk.apps.authoring', [
     .directive('html5vfix', directive.Html5vfix)
     .directive('sdDashboardCard', directive.DashboardCard)
     .component('sdCharacterCount', reactToAngular1(CharacterCount, ['item', 'html', 'limit'], [], 'display: inline'))
-    .component('sdAuthoringIntegrationWrapper', reactToAngular1(AuthoringAngularIntegration, ['itemId', 'action'], []))
+    .component('sdAuthoringIntegrationWrapper', reactToAngular1(AuthoringAngularIntegration, ['itemId', 'action', 'hideMonitoring', 'isExpanded'], []))
     .component(
         'sdInteractiveArticleActionsPanelCombined',
         reactToAngular1(InteractiveArticleActionsPanelCombined, [

scripts/apps/authoring/views/authoring-topbar.html

@@ -5,7 +5,7 @@
   sd-media-query min-width="880"
   data-test-id="authoring-topbar"
 >
-
+    <toggle-full-width ng-click="hideMonitoring(currentRoute.href === item.href, $event)" ng-href="#{{ :: item.href }}" is-expanded="monitoringHidden"></toggle-full-width>
     <sd-authoring-topbar-react
       article="item"
       action="action"

scripts/core/directives/index.ts

@@ -19,6 +19,7 @@ import {PhoneHomeModalDirective} from './PhoneHomeModalDirective';
 import {reactToAngular1} from 'superdesk-ui-framework';
 import {UserAvatar} from 'apps/users/components/UserAvatar';
 import {UserOrganisationAvatar} from 'apps/users/components/OrganisationAvatar';
+import {ToggleFullWidth} from 'apps/authoring/authoring/components/toggleFullWithEditor';
 
 /**
  * @ngdoc module
@@ -62,4 +63,8 @@ export default angular
     .component(
         'sdOrganisationAvatar',
         reactToAngular1(UserOrganisationAvatar, ['size']),
+    )
+    .component(
+        'toggleFullWidth',
+        reactToAngular1(ToggleFullWidth, ['isExpanded', 'onClick']),
     );