Skip to content

Commit 94ddbc0

Browse files
andrehoffmann30andrehoffmann30
committed
TASK: rebase to latest release, refactor and fix code to work with latest changes
1 parent fa60fd6 commit 94ddbc0

41 files changed

Lines changed: 578 additions & 348 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎Configuration/Settings.Features.yaml‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,8 @@ Neos:
33
Ui:
44
frontendConfiguration:
55
Flowpack.Media.Ui:
6-
useNewMediaSelection: true
6+
# Use the new upload dialog where the user can add additional information like caption or copy right notice when uploading the asset
77
useNewAssetUpload: true
8-
queryAssetUsage: false
9-
pollForChanges: true
10-
showSimilarAssets: false
11-
showVariantsEditor: false
128
# Allow the user to let the system create redirects when assets are replaced or renamed
139
createAssetRedirectsOption: true
1410
# Only allow a single asset collection selection per asset to treat collection like folders

‎Configuration/Settings.yaml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,15 @@ Flowpack:
22
Media:
33
Ui:
44
maximumFileUploadLimit: 10
5+
# Configure which properties in the new upload dialog are show and which are required
6+
upload:
7+
properties:
8+
copyrightNotice:
9+
show: true
10+
required: false
11+
title:
12+
show: true
13+
required: false
14+
caption:
15+
show: true
16+
required: false

‎Resources/Private/JavaScript/asset-upload-screen/package.json‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,18 @@
88
},
99
"dependencies": {
1010
"@apollo/client": "^3.3.13",
11-
"@media-ui/core": "*",
12-
"@media-ui/feature-asset-upload": "*",
13-
"@media-ui/media-module": "*",
11+
"@media-ui/core": "workspace:*",
12+
"@media-ui/feature-asset-upload": "workspace:*",
13+
"@media-ui/media-module": "workspace:*",
1414
"apollo-upload-client": "^14.1.3",
15-
"plow-js": "^2.2.0",
15+
"react": "^17.0.2",
1616
"react-redux": "^5.1.2",
17-
"react": "^17.0.1",
18-
"recoil": "^0.2.0"
19-
},
20-
"devDependencies": {
21-
"webpack": "^4.44.2",
22-
"webpack-graphql-loader": "^1.0.2"
17+
"recoil": "^0.7.7"
2318
},
2419
"browserslist": [
25-
"defaults and > 1% and not ie <= 11"
20+
"> 0.5%",
21+
"last 2 versions",
22+
"not dead",
23+
"supports async-functions"
2624
]
2725
}

‎Resources/Private/JavaScript/asset-upload-screen/src/AssetUploadScreen.tsx‎

Lines changed: 69 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,28 @@
1-
import * as React from 'react';
1+
import React, { createRef } from 'react';
22
import { connect } from 'react-redux';
3-
import { RecoilRoot } from 'recoil';
4-
import { ApolloClient, ApolloLink, ApolloProvider } from '@apollo/client';
3+
import { ApolloClient, ApolloLink } from '@apollo/client';
54
import { createUploadLink } from 'apollo-upload-client';
6-
import { $get, $transform } from 'plow-js';
75

86
// Neos dependencies are provided by the UI
97
// @ts-ignore
108
import { neos } from '@neos-project/neos-ui-decorators';
119
// @ts-ignore
1210
import { actions } from '@neos-project/neos-ui-redux-store';
1311

14-
import {
15-
I18nRegistry,
16-
IntlProvider,
17-
MediaUiProvider,
18-
MediaUiThemeProvider,
19-
Notify,
20-
NotifyProvider,
21-
} from '@media-ui/core/src';
22-
import { FeatureFlags, SelectionConstraints } from '@media-ui/core/src/interfaces';
23-
import { AssetMediaType } from '@media-ui/core/src/state/selectedMediaTypeState';
24-
import { ApolloErrorHandler, CacheFactory, PersistentStateManager } from '@media-ui/media-module/src/core';
25-
26-
import TYPE_DEFS_CORE from '@media-ui/core/schema.graphql';
27-
import TYPE_DEFS_CLIPBOARD from '@media-ui/feature-clipboard/schema.graphql';
28-
import TYPE_DEFS_ASSET_USAGE from '@media-ui/feature-asset-usage/schema.graphql';
29-
30-
// GraphQL local resolvers
31-
import buildClipboardResolver from '@media-ui/feature-clipboard/src/resolvers/mutation';
32-
import buildModuleResolver from '@media-ui/media-module/src/resolvers/mutation';
33-
import { createRef } from 'react';
3412
import NewAssetUpload from './NewAssetUpload';
3513

14+
import { MediaUiProvider, typeDefs as TYPE_DEFS_CORE } from '@media-ui/core';
15+
import MediaApplicationWrapper from '@media-ui/core/src/components/MediaApplicationWrapper';
16+
import { CacheFactory, createErrorHandler } from '@media-ui/media-module/src/core';
17+
import { typeDefs as TYPE_DEFS_ASSET_USAGE } from '@media-ui/feature-asset-usage';
18+
3619
let apolloClient = null;
3720

3821
interface AssetUploadScreenProps {
3922
i18nRegistry: I18nRegistry;
40-
frontendConfiguration: {
41-
queryAssetUsage: boolean;
42-
};
23+
frontendConfiguration: FeatureFlags;
4324
neos: Record<string, unknown>;
44-
type: AssetMediaType | 'images'; // The image editor sets the type to 'images'
25+
type: AssetType | 'images'; // The image editor sets the type to 'images'
4526
onComplete: (result: { object: { __identity: string } }) => void;
4627
isLeftSideBarHidden: boolean;
4728
isNodeCreationDialogOpen: boolean;
@@ -55,23 +36,22 @@ interface AssetUploadScreenState {
5536
initialNodeCreationDialogOpenState: boolean;
5637
}
5738

58-
@connect(
59-
$transform({
60-
isLeftSideBarHidden: $get('ui.leftSideBar.isHidden'),
61-
isNodeCreationDialogOpen: $get('ui.nodeCreationDialog.isOpen'),
62-
}),
63-
{
64-
addFlashMessage: actions.UI.FlashMessages.add,
65-
toggleSidebar: actions.UI.LeftSideBar.toggle,
66-
}
67-
)
68-
@neos((globalRegistry) => ({
69-
i18nRegistry: globalRegistry.get('i18n'),
70-
frontendConfiguration: globalRegistry.get('frontendConfiguration').get('Flowpack.Media.Ui'),
71-
}))
7239
export class AssetUploadScreen extends React.PureComponent<AssetUploadScreenProps, AssetUploadScreenState> {
40+
notificationHandler: NeosNotification;
41+
7342
constructor(props) {
7443
super(props);
44+
this.state = {
45+
initialLeftSideBarHiddenState: false,
46+
initialNodeCreationDialogOpenState: false,
47+
};
48+
this.notificationHandler = {
49+
info: (message) => props.addFlashMessage(message, message, 'info'),
50+
ok: (message) => props.addFlashMessage(message, message, 'success'),
51+
notice: (message) => props.addFlashMessage(message, message, 'info'),
52+
warning: (title, message = '') => props.addFlashMessage(title, message, 'error'),
53+
error: (title, message = '') => props.addFlashMessage(title, message, 'error'),
54+
};
7555
}
7656

7757
getConfig() {
@@ -90,22 +70,17 @@ export class AssetUploadScreen extends React.PureComponent<AssetUploadScreenProp
9070
if (!apolloClient) {
9171
const { endpoints } = this.getConfig();
9272
const cache = CacheFactory.createCache(this.props.frontendConfiguration as FeatureFlags);
93-
PersistentStateManager.restoreLocalState(cache, this.props.constraints);
9473

9574
apolloClient = new ApolloClient({
9675
cache,
9776
link: ApolloLink.from([
98-
ApolloErrorHandler,
77+
createErrorHandler(this.notificationHandler),
9978
createUploadLink({
10079
uri: endpoints.graphql,
10180
credentials: 'same-origin',
10281
}),
10382
]),
104-
typeDefs: [TYPE_DEFS_CORE, TYPE_DEFS_CLIPBOARD, TYPE_DEFS_ASSET_USAGE],
105-
resolvers: [
106-
buildModuleResolver(PersistentStateManager.updateLocalState),
107-
buildClipboardResolver(PersistentStateManager.updateLocalState),
108-
],
83+
typeDefs: [TYPE_DEFS_CORE, TYPE_DEFS_ASSET_USAGE],
10984
});
11085
}
11186
return apolloClient;
@@ -121,45 +96,58 @@ export class AssetUploadScreen extends React.PureComponent<AssetUploadScreenProp
12196
return this.props.i18nRegistry.translate(id, fallback, params, packageKey, sourceName);
12297
};
12398

99+
getInitialState = () => {
100+
const { frontendConfiguration, constraints, type } = this.props;
101+
102+
return {
103+
applicationContext: 'selection' as ApplicationContext,
104+
featureFlags: frontendConfiguration,
105+
constraints: {
106+
...(constraints || {}),
107+
assetType: type === 'images' ? 'image' : type,
108+
},
109+
};
110+
};
111+
124112
render() {
125-
const { addFlashMessage, onComplete, constraints, type } = this.props;
126-
const client = this.getApolloClient();
113+
const { onComplete } = this.props;
127114
const { dummyImage } = this.getConfig();
128115
const containerRef = createRef<HTMLDivElement>();
129-
130-
const featureFlags: FeatureFlags = this.props.frontendConfiguration as FeatureFlags;
131-
132-
// The Neos.UI Flashmessages only support the levels 'success', 'error' and 'info'
133-
const Notification: Notify = {
134-
info: (message) => addFlashMessage(message, message, 'info'),
135-
ok: (message) => addFlashMessage(message, message, 'success'),
136-
notice: (message) => addFlashMessage(message, message, 'info'),
137-
warning: (title, message = '') => addFlashMessage(title, message, 'error'),
138-
error: (title, message = '') => addFlashMessage(title, message, 'error'),
139-
};
116+
const isInNodeCreationDialog = this.state.initialNodeCreationDialogOpenState;
140117

141118
return (
142119
<div style={{ width: '100%', height: '100%', padding: '2rem' }}>
143-
<IntlProvider translate={this.translate}>
144-
<NotifyProvider notificationApi={Notification}>
145-
<ApolloProvider client={client}>
146-
<RecoilRoot>
147-
<MediaUiProvider
148-
dummyImage={dummyImage}
149-
containerRef={containerRef}
150-
featureFlags={featureFlags}
151-
constraints={constraints || {}}
152-
assetType={type === 'images' ? 'image' : type}
153-
>
154-
<MediaUiThemeProvider>
155-
<NewAssetUpload onComplete={onComplete} />
156-
</MediaUiThemeProvider>
157-
</MediaUiProvider>
158-
</RecoilRoot>
159-
</ApolloProvider>
160-
</NotifyProvider>
161-
</IntlProvider>
120+
<MediaApplicationWrapper
121+
client={this.getApolloClient()}
122+
translate={this.translate}
123+
notificationApi={this.notificationHandler}
124+
initialState={this.getInitialState()}
125+
>
126+
<MediaUiProvider
127+
dummyImage={dummyImage}
128+
selectionMode
129+
isInNodeCreationDialog={isInNodeCreationDialog}
130+
containerRef={containerRef}
131+
>
132+
<NewAssetUpload onComplete={onComplete} />
133+
</MediaUiProvider>
134+
</MediaApplicationWrapper>
162135
</div>
163136
);
164137
}
165138
}
139+
140+
const mapStateToProps = (state: any) => ({
141+
isLeftSideBarHidden: state.ui.leftSideBar.isHidden,
142+
isNodeCreationDialogOpen: state.ui.nodeCreationDialog.isOpen,
143+
});
144+
145+
const mapGlobalRegistryToProps = neos((globalRegistry: any) => ({
146+
i18nRegistry: globalRegistry.get('i18n'),
147+
frontendConfiguration: globalRegistry.get('frontendConfiguration').get('Flowpack.Media.Ui'),
148+
}));
149+
150+
export default connect(() => ({}), {
151+
addFlashMessage: actions.UI.FlashMessages.add,
152+
toggleSidebar: actions.UI.LeftSideBar.toggle,
153+
})(connect(mapStateToProps)(mapGlobalRegistryToProps(AssetUploadScreen)));

‎Resources/Private/JavaScript/asset-upload-screen/src/NewAssetUpload.module.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.uploadArea {
2+
padding: 1rem;
3+
}
4+
5+
.controls {
6+
margin-top: 2rem;
7+
display: flex;
8+
justify-content: flex-end;
9+
}

‎Resources/Private/JavaScript/asset-upload-screen/src/NewAssetUpload.tsx‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,18 @@ import * as React from 'react';
22

33
import { Button } from '@neos-project/react-ui-components';
44

5-
import { createUseMediaUiStyles, MediaUiTheme, useIntl, useNotify } from '@media-ui/core/src';
5+
import { useIntl, useNotify } from '@media-ui/core/src';
66
import { useUploadDialogState, useUploadFiles } from '@media-ui/feature-asset-upload/src/hooks';
77
import { useCallback } from 'react';
8-
import { FilesUploadState, UploadedFile } from '@media-ui/feature-asset-upload/src/interfaces';
98
import { PreviewSection, UploadSection } from '@media-ui/feature-asset-upload/src/components';
10-
11-
const useStyles = createUseMediaUiStyles((theme: MediaUiTheme) => ({
12-
uploadArea: {
13-
padding: theme.spacing.full,
14-
},
15-
controls: {
16-
marginTop: '2rem',
17-
display: 'flex',
18-
justifyContent: 'flex-end',
19-
},
20-
}));
9+
import { FilesUploadState, UploadedFile } from '@media-ui/feature-asset-upload/typings';
10+
import classes from './NewAssetUpload.module.css';
2111

2212
const NewAssetUpload = (props: { onComplete: (result: { object: { __identity: string } }) => void }) => {
2313
const { translate } = useIntl();
2414
const Notify = useNotify();
2515
const { uploadFiles, uploadState, loading } = useUploadFiles();
2616
const { state: dialogState, setFiles, setUploadPossible } = useUploadDialogState();
27-
const classes = useStyles();
2817
const onComplete = props.onComplete;
2918

3019
const handleUpload = useCallback(() => {
@@ -62,6 +51,7 @@ const NewAssetUpload = (props: { onComplete: (result: { object: { __identity: st
6251
);
6352
} else {
6453
Notify.ok(translate('uploadDialog.uploadFinished', 'Upload finished'));
54+
console.log(uploadFiles);
6555
onComplete({ object: { __identity: uploadFiles[0].assetId } });
6656
}
6757
setUploadPossible(false);

‎Resources/Private/JavaScript/asset-upload-screen/src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { AssetUploadScreen } from './AssetUploadScreen';
1+
export { default as AssetUploadScreen } from './AssetUploadScreen';

‎Resources/Private/JavaScript/asset-upload/package.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
"private": true,
66
"main": "src/index.ts",
77
"dependencies": {
8-
"@media-ui/core": "workspace:*"
9-
"@media-ui/core": "*",
10-
"@media-ui/media-module": "*"
8+
"@media-ui/core": "workspace:*",
9+
"@media-ui/media-module": "workspace:*"
1110
}
1211
}

‎Resources/Private/JavaScript/asset-upload/src/components/Dialogs/NewAssetDialog.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ import { useUploadDialogState, useUploadFiles } from '../../hooks';
1111
import { useAssetsQuery } from '@media-ui/core/src/hooks';
1212

1313
import classes from './NewAssetDialog.module.css';
14+
import { FilesUploadState, UploadedFile } from '../../../typings';
1415

1516
const NewAssetDialog: React.FC = () => {
1617
const { translate } = useIntl();
1718
const Notify = useNotify();
1819
const { uploadFiles, uploadState, loading } = useUploadFiles();
1920
const { state: dialogState, closeDialog, setFiles, setUploadPossible } = useUploadDialogState();
20-
const { state: dialogState, closeDialog, setFiles } = useUploadDialogState();
2121
const { refetch } = useAssetsQuery();
2222

2323
const handleUpload = useCallback(() => {
@@ -68,7 +68,16 @@ const NewAssetDialog: React.FC = () => {
6868
.catch((error) => {
6969
Notify.error(translate('fileUpload.error', 'Upload failed'), error);
7070
});
71-
}, [uploadFiles, dialogState.files.selected, setFiles, Notify, translate, refetch]);
71+
}, [
72+
dialogState.files.selected,
73+
dialogState.files.finished,
74+
uploadFiles,
75+
setFiles,
76+
setUploadPossible,
77+
Notify,
78+
translate,
79+
refetch,
80+
]);
7281

7382
const handleSetFiles = useCallback(
7483
(files: UploadedFile[]) => {

‎Resources/Private/JavaScript/asset-upload/src/components/Dialogs/ReplaceAssetDialog.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,16 @@ import UploadSection from '../UploadSection';
1212
import PreviewSection from '../PreviewSection';
1313
import { useUploadDialogState } from '../../hooks';
1414
import useReplaceAsset, { AssetReplacementOptions } from '../../hooks/useReplaceAsset';
15-
import { UploadedFile } from '../../interfaces';
1615
import { useSetRecoilState } from 'recoil';
16+
17+
import classes from './ReplaceAssetDialog.module.css';
18+
import { UploadedFile } from '../../../typings';
1719
import {
1820
selectedAssetLabelState,
1921
selectedAssetCaptionState,
2022
selectedAssetCopyrightNoticeState,
2123
} from '@media-ui/media-module/src/state';
2224

23-
import classes from './ReplaceAssetDialog.module.css';
24-
2525
const ReplaceAssetDialog: React.FC = () => {
2626
const { translate } = useIntl();
2727
const Notify = useNotify();
@@ -37,11 +37,9 @@ const ReplaceAssetDialog: React.FC = () => {
3737
keepOriginalFilename: false,
3838
generateRedirects: false,
3939
});
40-
const classes = useStyles();
4140
const setLabel = useSetRecoilState(selectedAssetLabelState);
4241
const setCaption = useSetRecoilState(selectedAssetCaptionState);
4342
const setCopyrightNotice = useSetRecoilState(selectedAssetCopyrightNoticeState);
44-
const uploadPossible = !loading && dialogState.files.selected.length > 0;
4543
const acceptedFileTypes = useMemo(() => {
4644
// TODO: Extract this into a helper function
4745
const completeMediaType = selectedAsset?.file.mediaType;

0 commit comments

Comments
 (0)