Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Resizing authoring on widget pin, allow for a secondary widget #4676

Merged
merged 7 commits into from
Nov 11, 2024
Merged

Resizing authoring on widget pin, allow for a secondary widget #4676

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9de856c
Resizing authoring on widget pin, allow for a secondary widget
thecalcc Oct 28, 2024
9a303f7
Macros improvement, fix editor crash,
thecalcc Oct 29, 2024
91d56f6
Fix lint
thecalcc Oct 29, 2024
e3e134c
Fix widget pinning
thecalcc Nov 11, 2024
6ce34ed
Merge branch 'develop' into secondary-widget-react
thecalcc Nov 11, 2024
4718112
Fix lint, fix compare versions
thecalcc Nov 11, 2024
85d882f
Adjust broadcasting, fix widget closing from inside widget
thecalcc Nov 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion scripts/apps/authoring-react/article-widgets/find-and-replace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
12 changes: 6 additions & 6 deletions scripts/apps/authoring-react/article-widgets/versions-and-item-history/versions-tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can't output a string with pieces missing to the UI - which would happen since you use optional chaining without a fallback.

Current version is mandatory, not sure why are you applying optional chaining all over the place here.

entity: from,
},
item2: {
label: gettext('version {{n}}', {n: to._current_version}),
label: gettext('version {{n}}', {n: to?._current_version}),
entity: to,
},
getLanguage: () => '',
Expand Down Expand Up @@ -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
/>

Expand All @@ -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>
Expand Down Expand Up @@ -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'}}>
Expand All @@ -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"
Expand Down
35 changes: 13 additions & 22 deletions scripts/apps/authoring-react/authoring-integration-wrapper-sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand Down Expand Up @@ -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}
/>
Expand Down
55 changes: 22 additions & 33 deletions scripts/apps/authoring-react/authoring-integration-wrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = (
Expand Down Expand Up @@ -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> {
Expand All @@ -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);
Expand All @@ -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();
}
}
Expand All @@ -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,
},
});
}
Expand Down Expand Up @@ -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={
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}}
/>
)}
Expand Down
59 changes: 27 additions & 32 deletions scripts/apps/authoring-react/authoring-react.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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,
});
};
}
Expand All @@ -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(
Expand Down Expand Up @@ -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}>
{
Expand Down Expand Up @@ -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)}
/>
);
Expand Down
2 changes: 1 addition & 1 deletion scripts/apps/authoring-react/generic-widgets/comments/CommentsWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions scripts/apps/authoring-react/widget-header-component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>,
Expand Down
Loading