From db520e7f3ed8cde1092013e3f115f0afb334597c Mon Sep 17 00:00:00 2001 From: Tomas Kikutis Date: Thu, 26 Oct 2023 11:03:40 +0200 Subject: [PATCH] Add styles for multi column publish tab (#4345) --- package-lock.json | 30 +- package.json | 2 +- .../actions/publish-tab.tsx | 240 ++++++++-------- .../index-ui.tsx | 261 ++++++++++-------- .../interfaces.ts | 9 + .../panel/panel-footer.tsx | 4 +- .../panel/panel-main.tsx | 8 +- 7 files changed, 310 insertions(+), 244 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0da1c27436..ada23551fc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -689,9 +689,9 @@ } }, "@types/enzyme-adapter-react-16": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/@types/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.7.tgz", - "integrity": "sha512-BQLgUf3vbuzi37iCjhXNG/iBmCzuLxlIxhkafO8AJisXxRbGOfbuJi1Stwlwr5oj/6/Ea7mViKG7Wh54n0ULXw==", + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/@types/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.8.tgz", + "integrity": "sha512-nzYumRvxSh2Vbk7mkseYbInmpMbVZRc1EJQVeQmXhNCNVmLg2VOKAJujc7YJ/gDdPW+X03wYrDGa1Bj0Q/NTaw==", "requires": { "@types/enzyme": "*" } @@ -994,7 +994,7 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==" + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" }, "prop-types": { "version": "15.8.1", @@ -2636,7 +2636,7 @@ "strip-ansi": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz", - "integrity": "sha512-DerhZL7j6i6/nEnVG0qViKXI0OKouvvpsAiaj7c+LfqZZZxdwZtv8+UiA/w4VUJpT8UzX0pR1dcHOii1GbmruQ==", + "integrity": "sha1-JfSOoiynkYfzF0pNuHWTR7sSYiA=", "requires": { "ansi-regex": "^0.2.1" } @@ -2644,7 +2644,7 @@ "supports-color": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz", - "integrity": "sha512-tdCZ28MnM7k7cJDJc7Eq80A9CsRFAAOZUy41npOZCs++qSjfIy7o5Rh46CBk+Dk5FbKJ33X3Tqg4YrV07N5RaA==" + "integrity": "sha1-2S3iaU6z9nMjlz1649i1W0wiGQo=" } } }, @@ -6491,7 +6491,7 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==" + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" } } }, @@ -12153,7 +12153,7 @@ "object-assign": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz", - "integrity": "sha512-jHP15vXVGeVh1HuaA2wY6lxk+whK/x4KBG88VXeRma7CCun7iGD5qPc4eYykQ9sdQvg8jkwFKsSxHln2ybW3xQ==" + "integrity": "sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I=" }, "object-component": { "version": "0.0.3", @@ -13678,7 +13678,7 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==" } } }, @@ -16207,7 +16207,7 @@ "strip-ansi": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", - "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==", + "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "requires": { "ansi-regex": "^2.0.0" } @@ -16749,9 +16749,9 @@ } }, "superdesk-ui-framework": { - "version": "3.0.59", - "resolved": "https://registry.npmjs.org/superdesk-ui-framework/-/superdesk-ui-framework-3.0.59.tgz", - "integrity": "sha512-FuXyJNGVE970jlHWm0vD1Cr9QGLEfjONPaPfNSAKQZHW1f//By2VERgPi8TFv1kTdZOlXcOP6vFhnw/OR/Z6Nw==", + "version": "3.0.60", + "resolved": "https://registry.npmjs.org/superdesk-ui-framework/-/superdesk-ui-framework-3.0.60.tgz", + "integrity": "sha512-/GXkxBKyPtQDAjhR0MSQM5SjOTfnY/f6dNZkC4QZGa4Z9fZy39Z6F1+KfSPY53mDXfNdJ9vNeLSeksNa2Jk2Eg==", "requires": { "@material-ui/lab": "^4.0.0-alpha.56", "@popperjs/core": "^2.4.0", @@ -16935,7 +16935,7 @@ "supports-color": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", - "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==" + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=" }, "svgo": { "version": "0.7.2", @@ -17813,7 +17813,7 @@ "core-util-is": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", - "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=" + "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==" } } }, diff --git a/package.json b/package.json index 7beea0c07d..aa4094505f 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,7 @@ "sass-loader": "6.0.6", "shortid": "2.2.8", "style-loader": "0.20.2", - "superdesk-ui-framework": "^3.0.59", + "superdesk-ui-framework": "^3.0.60", "ts-loader": "3.5.0", "tslint": "5.11.0", "typescript": "4.9.5", diff --git a/scripts/core/interactive-article-actions-panel/actions/publish-tab.tsx b/scripts/core/interactive-article-actions-panel/actions/publish-tab.tsx index 4f590d5be8..e9ec89e24d 100644 --- a/scripts/core/interactive-article-actions-panel/actions/publish-tab.tsx +++ b/scripts/core/interactive-article-actions-panel/actions/publish-tab.tsx @@ -5,7 +5,7 @@ import {gettext} from 'core/utils'; import {PanelContent} from '../panel/panel-content'; import {PanelFooter} from '../panel/panel-footer'; import {DestinationSelect} from '../subcomponents/destination-select'; -import {IPanelError, ISendToDestination} from '../interfaces'; +import {IPanelError, IPropsHocInteractivePanelTab, ISendToDestination} from '../interfaces'; import {getCurrentDeskDestination} from '../utils/get-initial-destination'; import { IPublishingDateOptions, @@ -29,7 +29,7 @@ import {PreviewModal} from 'apps/publish-preview/previewModal'; import {notify} from 'core/notify/notify'; import {sdApi} from 'api'; -interface IProps { +interface IProps extends IPropsHocInteractivePanelTab { item: IArticle; closePublishView(): void; handleUnsavedChanges(): Promise; @@ -45,7 +45,7 @@ interface IState { subscribers: Array | null; } -export class PublishTab extends React.PureComponent { +export class WithPublishTab extends React.PureComponent { constructor(props: IProps) { super(props); @@ -153,129 +153,139 @@ export class PublishTab extends React.PureComponent { .flatMap(({activationResult}) => activationResult?.contributions?.publishingSections ?? []); const style: CSSProperties | undefined = sectionsFromExtensions.length > 0 - ? {display: 'flex', alignItems: 'start', justifyContent: 'space-between'} + ? {display: 'flex', alignItems: 'start', justifyContent: 'space-between', gap: 32} : undefined; - return ( - - -
-
- { - publishFromEnabled && ( - - { - this.setState({ - selectedDestination: value, - }); - }} - includePersonalSpace={false} + const childrenStyle: CSSProperties = { + flex: 1, // equal width for columns + }; - /** - * Changing the destination is only used - * to control which desk's output stage - * the published item appears in, thus - * choosing a stage would not have an impact - */ - hideStages={true} - /> - - ) - } + return this.props.children({ + columnCount: 1 + sectionsFromExtensions.length, + content: ( + + +
+
+ { + publishFromEnabled && ( + + { + this.setState({ + selectedDestination: value, + }); + }} + includePersonalSpace={false} - { - this.setState( - {publishingDateOptions: val}, - () => this.props.onDataChange({ - ...this.props.item, - ...getPublishingDatePatch( - this.props.item, - this.state.publishingDateOptions, - ), - }), - ); - }} - allowSettingEmbargo={appConfig.ui.publishEmbargo !== false} - /> + /** + * Changing the destination is only used + * to control which desk's output stage + * the published item appears in, thus + * choosing a stage would not have an impact + */ + hideStages={true} + /> + + ) + } + + { + this.setState( + {publishingDateOptions: val}, + () => this.props.onDataChange({ + ...this.props.item, + ...getPublishingDatePatch( + this.props.item, + this.state.publishingDateOptions, + ), + }), + ); + }} + allowSettingEmbargo={appConfig.ui.publishEmbargo !== false} + /> - { - this.setState( - {publishingTarget: val}, - () => this.props.onDataChange({ - ...this.props.item, - ...getPublishingTargetPatch(this.props.item, this.state.publishingTarget), - }), + { + this.setState( + {publishingTarget: val}, + () => this.props.onDataChange({ + ...this.props.item, + ...getPublishingTargetPatch( + this.props.item, + this.state.publishingTarget, + ), + }), + ); + }} + /> +
+ + { + sectionsFromExtensions.map((panel, i) => { + const Component = panel.component; + + return ( +
+ +
); - }} - /> + }) + }
+ + { - sectionsFromExtensions.map((panel, i) => { - const Component = panel.component; - - return ( -
- -
- ); - }) + canPreview && ( +
- - - - { - canPreview && ( -
- - - {(() => { - if (activeTab === 'publish') { - if (items.length !== 1) { - logger.error(new Error('Publishing multiple items from authoring pane is not supported')); - - return null; - } - - const item = items[0]; - - return ( - handleUnsavedChanges([item]).then((res) => res[0]) - } - /> - ); - } if (activeTab === 'correct') { - if (items.length !== 1) { - logger.error(new Error('Correcting multiple items from authoring pane is not supported')); - - return null; + const panelHeader = ( + +
+ ({id, label: getTabLabel(id)})) } + selectedTabId={activeTab} + onChange={(tab: IArticleActionInteractive) => { + this.setState({ + activeTab: tab, + }); + }} + data-test-id="tabs" + /> + +
+ + ); - const item = items[0]; - - return ( - handleUnsavedChanges([item]).then((res) => res[0]) - } - /> - ); - } else if (activeTab === 'send_to') { - return ( - - ); - } else if (activeTab === 'fetch_to') { - return ( - - ); - } if (activeTab === 'duplicate_to') { - return ( - - ); - } if (activeTab === 'unspike') { - return ( - - ); - } else { - return assertNever(activeTab); + function PanelWithHeader({columnCount = 1, children}: {columnCount?: number, children: React.ReactNode}) { + return ( + + {panelHeader} + {children} + + ); + } + + if (activeTab === 'publish') { + if (items.length !== 1) { + // this block should never run, but I'm handling it anyway just in case + + const error = gettext('Publishing multiple items from authoring pane is not supported'); + + logger.error(new Error(error)); + + return ( +
{error}
+ ); + } + + const item = items[0]; + + return ( + handleUnsavedChanges([item]).then((res) => res[0]) } - })()} - - ); + > + {({columnCount, content}) => ( + + {content} + + )} + + ); + } else if (activeTab === 'correct') { + if (items.length !== 1) { + // this block should never run, but I'm handling it anyway just in case + + const error = gettext('Correcting multiple items from authoring pane is not supported'); + + logger.error(new Error(error)); + + return ( +
{error}
+ ); + } + + const item = items[0]; + + return ( + + handleUnsavedChanges([item]).then((res) => res[0]) + } + /> + + ); + } else if (activeTab === 'send_to') { + return ( + + + + ); + } else if (activeTab === 'fetch_to') { + return ( + + + + ); + } else if (activeTab === 'duplicate_to') { + return ( + + + + ); + } else if (activeTab === 'unspike') { + return ( + + + + ); + } else { + return assertNever(activeTab); + } } } diff --git a/scripts/core/interactive-article-actions-panel/interfaces.ts b/scripts/core/interactive-article-actions-panel/interfaces.ts index 728fbbafd0..369ea207a7 100644 --- a/scripts/core/interactive-article-actions-panel/interfaces.ts +++ b/scripts/core/interactive-article-actions-panel/interfaces.ts @@ -29,3 +29,12 @@ export interface ISendToDestinationPersonalSpace { } export type ISendToDestination = ISendToDestinationDesk | ISendToDestinationPersonalSpace; + +export interface IHocInteractivePanelResult { + columnCount: number; + content: React.ReactNode; +} + +export interface IPropsHocInteractivePanelTab { + children(args: IHocInteractivePanelResult): JSX.Element; +} diff --git a/scripts/core/interactive-article-actions-panel/panel/panel-footer.tsx b/scripts/core/interactive-article-actions-panel/panel/panel-footer.tsx index d37eebaee0..29d4c013ee 100644 --- a/scripts/core/interactive-article-actions-panel/panel/panel-footer.tsx +++ b/scripts/core/interactive-article-actions-panel/panel/panel-footer.tsx @@ -7,7 +7,9 @@ export class PanelFooter extends React.PureComponent { if (this.props.markupV2) { return ( - {this.props.children} +
+ {this.props.children} +
); } else { diff --git a/scripts/core/interactive-article-actions-panel/panel/panel-main.tsx b/scripts/core/interactive-article-actions-panel/panel/panel-main.tsx index d83dd1aff9..8cce6101c4 100644 --- a/scripts/core/interactive-article-actions-panel/panel/panel-main.tsx +++ b/scripts/core/interactive-article-actions-panel/panel/panel-main.tsx @@ -9,13 +9,18 @@ export interface IPropsSendToPanel { */ markupV2: boolean; 'data-test-id'?: string; + width?: React.CSSProperties['width']; } export class Panel extends React.PureComponent { render() { if (this.props.markupV2) { return ( - + {this.props.children} ); @@ -24,6 +29,7 @@ export class Panel extends React.PureComponent {
{this.props.children}