Planning integration adjustments

e2e/client/specs/helpers/monitoring.ts

@@ -434,8 +434,8 @@ class Monitoring {
          * @param {boolean} useFullButtonText
          * @param {boolean} confirm Accept confirmation dialog.
          */
-        this.actionOnItem = function(action, group, item, useFullButtonText, confirm) {
-            var menu = this.openItemMenu(group, item);
+        this.actionOnItem = function(action, group, item, useFullButtonText = true, confirm) {
+            const menu: ElementFinder = this.openItemMenu(group, item);
 
             browser.wait(() => menu.isPresent(), 3000);
 
@@ -471,14 +471,12 @@ class Monitoring {
          * @param {number} item
          */
         this.actionOnItemSubmenu = function(action, submenu, group, item) {
-            var menu = this.openItemMenu(group, item);
-            var header = menu.element(by.partialButtonText(action));
-            var btn = menu.all(by.partialButtonText(submenu)).first();
+            const menu: ElementFinder = this.openItemMenu(group, item);
+            const header = menu.element(by.buttonText(action));
+            const btn = menu.element(by.partialButtonText(submenu));
+
+            browser.actions().mouseMove(header, {x: -50, y: -50}).mouseMove(header).perform();
 
-            browser.actions()
-                .mouseMove(header, {x: -50, y: -50})
-                .mouseMove(header)
-                .perform();
             waitFor(btn, 1000);
             btn.click();
         };

e2e/client/specs/helpers/pages.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-this-alias */
 /* eslint-disable newline-per-chained-call */
 
-import {element, by, browser, $, $$, promise as wdpromise} from 'protractor';
+import {element, by, browser, $, $$, promise as wdpromise, ElementFinder} from 'protractor';
 import './waitReady';
 export {authoring} from './authoring';
 export {content} from './content';
@@ -102,14 +102,14 @@ class SearchProvider {
 
 class IngestDashboard {
     dropDown: any;
-    ingestDashboard: any;
+    ingestDashboard: ElementFinder;
     openDropDown: () => any;
     getProviderList: () => any;
     getProvider: (index: any) => any;
     getProviderButton: (provider: any) => any;
     getDashboardList: () => any;
     getDashboard: (index: any) => any;
-    getDashboardSettings: (dashboard: any) => any;
+    getDashboardSettingsButton: (dashboard: any) => any;
     getDashboardSettingsStatusButton: (settings: any) => any;
     getDashboardStatus: (dashboard: any) => any;
     getDashboardSettingsIngestCountButton: (settings: any) => any;
@@ -140,14 +140,14 @@ class IngestDashboard {
         };
 
         this.getDashboardList = function() {
-            return self.ingestDashboard.all(by.repeater('item in items'));
+            return self.ingestDashboard.all(by.repeater('item in items track by item._id'));
         };
 
         this.getDashboard = function(index) {
             return self.getDashboardList().get(index);
         };
 
-        this.getDashboardSettings = function(dashboard) {
+        this.getDashboardSettingsButton = function(dashboard) {
             return dashboard.element(by.css('.dropdown'));
         };
 
@@ -156,15 +156,15 @@ class IngestDashboard {
         };
 
         this.getDashboardStatus = function(dashboard) {
-            return dashboard.element(by.css('.status'));
+            return dashboard.element(by.className('status'));
         };
 
         this.getDashboardSettingsIngestCountButton = function(settings) {
             return settings.element(by.model('item.show_ingest_count'));
         };
 
         this.getDashboardIngestCount = function(dashboard) {
-            return dashboard.element(by.css('.ingested-count'));
+            return dashboard.element(by.className('ingested-count'));
         };
     }
 }

e2e/client/specs/helpers/utils.ts

@@ -235,7 +235,7 @@ export function waitHidden(elem, time?) {
 }
 
 export function scrollToView(elem: ElementFinder) {
-    browser.executeScript('arguments[0].scrollIntoViewIfNeeded();', elem);
+    browser.executeScript('arguments[0]?.scrollIntoViewIfNeeded?.();', elem);
 }
 
 export function scrollRelative(elem: ElementFinder, direction: 'up'| 'down', pixelsToScroll: number) {

e2e/client/specs/helpers/workspace.ts

@@ -130,7 +130,7 @@ class Workspace {
          * @param {string} name
          */
         this.showHighlightList = function(name) {
-            var item = this.getHighlightListItem(name);
+            const item = this.getHighlightListItem(name);
 
             browser.wait(ECE.elementToBeClickable(item), 1000);
             item.click();
@@ -146,7 +146,7 @@ class Workspace {
          * @return {promise} highlight element
          */
         this.getHighlightListItem = function(name) {
-            var menu = element(by.id('highlightPackage'));
+            const menu = element(by.id('highlightPackage'));
 
             browser.actions()
                 .mouseMove(menu)

e2e/client/specs/ingest_provider_spec.ts

@@ -42,19 +42,20 @@ describe('ingest_provider', () => {
     it('Change settings for Ingest Provider', () => {
         addProvider();
         expect(ingestDashboard.getDashboardList().count()).toEqual(1);
-        var dashboard = ingestDashboard.getDashboard(0);
-        var settings = ingestDashboard.getDashboardSettings(dashboard);
 
-        settings.click();
+        const dashboard = ingestDashboard.getDashboard(0);
+        const mainSettingsButton = ingestDashboard.getDashboardSettingsButton(dashboard);
+
+        mainSettingsButton.click();
 
         // status
         expect(ingestDashboard.getDashboardStatus(dashboard).isDisplayed()).toBe(true);
-        ingestDashboard.getDashboardSettingsStatusButton(settings).click();
+        ingestDashboard.getDashboardSettingsStatusButton(mainSettingsButton).click();
         expect(ingestDashboard.getDashboardStatus(dashboard).isDisplayed()).toBe(false);
 
         // ingest count
         expect(ingestDashboard.getDashboardIngestCount(dashboard).isDisplayed()).toBe(true);
-        ingestDashboard.getDashboardSettingsIngestCountButton(settings).click();
+        ingestDashboard.getDashboardSettingsIngestCountButton(mainSettingsButton).click();
         expect(ingestDashboard.getDashboardIngestCount(dashboard).isDisplayed()).toBe(false);
     });
 
@@ -70,7 +71,7 @@ describe('ingest_provider', () => {
     it('Go to Ingest Providers and open dialog', () => {
         addProvider();
         var dashboard = ingestDashboard.getDashboard(0);
-        var settings = ingestDashboard.getDashboardSettings(dashboard);
+        var settings = ingestDashboard.getDashboardSettingsButton(dashboard);
 
         settings.click();
         settings.element(by.css('.icon-pencil')).click();

package.json

@@ -123,7 +123,7 @@
     "sass-loader": "6.0.6",
     "shortid": "2.2.8",
     "style-loader": "0.20.2",
-    "superdesk-ui-framework": "^4.0.0",
+    "superdesk-ui-framework": "^4.0.1",
     "ts-loader": "3.5.0",
     "typescript": "4.9.5",
     "uuid": "8.3.1",

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

@@ -815,7 +815,7 @@ export function getAuthoringPrimaryToolbarWidgets(
             return {
                 ...item,
                 component: (props: {entity: IArticle}) => (
-                    <Component article={props.entity} />
+                    <Component entity={props.entity} />
                 ),
             };
         })

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

@@ -16,7 +16,6 @@ export class AuthoringAngularTemplateIntegration extends React.PureComponent<IPr
                 <AuthoringIntegrationWrapper
                     itemId={null} // Id doesn't apply when editing embedded JSON.
                     sidebarMode="hidden"
-                    hideSecondaryToolbar={true}
                     authoringStorage={getTemplateEditViewAuthoringStorage(this.props.template.data as IArticle)}
                     onFieldChange={(_fieldId, fieldsData, computeLatestEntity) => {
                         this.props.template.data = computeLatestEntity();

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

@@ -1,5 +1,6 @@
 /* eslint-disable react/no-multi-comp */
 /* eslint-disable no-case-declarations */
+/* eslint-disable react/display-name */
 import React from 'react';
 import {
     IArticle,
@@ -44,6 +45,7 @@ import {PINNED_WIDGET_USER_PREFERENCE_SETTINGS, closedIntentionally} from 'apps/
 import {AuthoringIntegrationWrapperSidebar} from './authoring-integration-wrapper-sidebar';
 import {assertNever} from 'core/helpers/typescript-helpers';
 import {ContentProfileDropdown} from './subcomponents/content-profile-dropdown';
+import {IconButton} from 'superdesk-ui-framework';
 
 export function getWidgetsFromExtensions(article: IArticle): Array<IArticleSideWidget> {
     return Object.values(extensions)
@@ -52,16 +54,62 @@ export function getWidgetsFromExtensions(article: IArticle): Array<IArticleSideW
         .sort((a, b) => a.order - b.order);
 }
 
-const defaultToolbarItems: Array<React.ComponentType<{
-    article: IArticle;
-    reinitialize: (itemWithChanges: IArticle) => void;
-}>> = [
-    CreatedModifiedInfo,
-];
-
 interface IProps {
     itemId: IArticle['_id'];
 }
+
+const getAuthoringCosmeticActions = (exposed: IExposedFromAuthoring<IArticle>): Array<ITopBarWidget<IArticle>> => [{
+    availableOffline: true,
+    component: () => (
+        <IconButton
+            icon="preview-mode"
+            ariaValue={gettext('Print preview')}
+            onClick={() => {
+                exposed.printPreview();
+            }}
+        />
+    ),
+    group: 'end',
+    priority: 1,
+    keyBindings: {'ctrl+shift+i': () => {
+        exposed.printPreview();
+    }},
+},
+{
+    availableOffline: true,
+    component: () => (
+        <IconButton
+            icon="adjust"
+            ariaValue={gettext('Toggle theme')}
+            onClick={() => {
+                exposed.toggleTheme();
+            }}
+        />
+    ),
+    group: 'end',
+    priority: 2,
+    keyBindings: {'ctrl+shift+t': () => {
+        exposed.toggleTheme();
+    }},
+},
+{
+    availableOffline: true,
+    component: () => (
+        <IconButton
+            icon="switches"
+            ariaValue={gettext('Configure themes')}
+            onClick={() => {
+                exposed.configureTheme();
+            }}
+        />
+    ),
+    group: 'end',
+    priority: 3,
+    keyBindings: {'ctrl+shift+c': () => {
+        exposed.configureTheme();
+    }},
+}];
+
 export type ISideWidget = {
     activeId?: string;
     pinnedId?: string;
@@ -221,9 +269,6 @@ interface IPropsWrapper extends IProps {
         actions: Array<ITopBarWidget<IArticle>>;
     };
 
-    // Hides the toolbar which includes the "Print Preview" button.
-    hideSecondaryToolbar?: boolean;
-
     // If it's not passed then the sidebar is shown expanded and can't be collapsed.
     // If hidden is passed then it can't be expanded.
     // If it's set to true or false then it can be collapsed/expanded back.
@@ -329,16 +374,11 @@ export class AuthoringIntegrationWrapper extends React.PureComponent<IPropsWrapp
         const secondaryToolbarWidgetsFromExtensions = Object.values(extensions)
             .flatMap(({activationResult}) => activationResult?.contributions?.authoringTopbar2Widgets ?? []);
 
-        const secondaryToolbarWidgetsReady = defaultToolbarItems.concat(secondaryToolbarWidgetsFromExtensions)
-            .map((Component) => (props) => <Component reinitialize={props.reinitialize} article={props.item} />);
-
         return (
             <WithInteractiveArticleActionsPanel location="authoring">
                 {(panelState, panelActions) => (
                     <AuthoringReact
-                        themingEnabled
                         onFieldChange={this.props.onFieldChange}
-                        hideSecondaryToolbar={this.props.hideSecondaryToolbar}
                         ref={(component) => {
                             this.authoringReactRef = component;
                         }}
@@ -550,7 +590,18 @@ export class AuthoringIntegrationWrapper extends React.PureComponent<IPropsWrapp
                                 }}
                             />
                         )}
-                        secondaryToolbarWidgets={secondaryToolbarWidgetsReady}
+                        getSecondaryToolbarWidgets={(exposed) => [
+                            {
+                                availableOffline: true,
+                                component: () => (
+                                    <CreatedModifiedInfo article={exposed.item} />
+                                ),
+                                group: 'start',
+                                priority: 1,
+                            },
+                            ...secondaryToolbarWidgetsFromExtensions,
+                            ...getAuthoringCosmeticActions(exposed),
+                        ]}
                         validateBeforeSaving={false}
                         getSideWidgetIdAtIndex={(article, index) => {
                             return getWidgetsFromExtensions(article)[index]._id;