TASK: refactor asset replace dialog and asset upload screen

Author: andrehoffmann30

Configuration/Settings.Neos.yaml

@@ -32,8 +32,6 @@ Neos:
         javascript:
           Flowpack.Media.Ui:AssetEditor:
             resource: resource://Flowpack.Media.Ui/Public/AssetEditor/Plugin.js
-          Flowpack.Media.Ui:ImageUpload:
-            resource: resource://Flowpack.Media.Ui/Public/AssetUpload/Plugin.js
         stylesheets:
           Flowpack.Media.Ui:AssetEditor:
             resource: resource://Flowpack.Media.Ui/Public/AssetEditor/Plugin.css

Resources/Private/JavaScript/asset-upload-screen/index.js

@@ -0,0 +1 @@
+export * from './src';

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

@@ -6,23 +6,22 @@
   "engines": {
     "node": ">=12"
   },
-  "scripts": {
-    "build": "NODE_ENV=production neos-react-scripts build",
-    "watch": "neos-react-scripts watch"
-  },
   "dependencies": {
+    "@apollo/client": "^3.3.13",
     "@media-ui/core": "*",
+    "@media-ui/feature-asset-upload": "*",
     "@media-ui/media-module": "*",
-    "@neos-project/neos-ui-extensibility": "^5.3.4"
+    "apollo-upload-client": "^14.1.3",
+    "plow-js": "^2.2.0",
+    "react-redux": "^5.1.2",
+    "react": "^17.0.1",
+    "recoil": "^0.2.0"
   },
   "devDependencies": {
     "webpack": "^4.44.2",
     "webpack-graphql-loader": "^1.0.2"
   },
   "browserslist": [
     "defaults and > 1% and not ie <= 11"
-  ],
-  "neos": {
-    "buildTargetDirectory": "../../../Public/AssetUpload"
-  }
+  ]
 }

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

@@ -69,7 +69,7 @@ interface AssetUploadScreenState {
     i18nRegistry: globalRegistry.get('i18n'),
     frontendConfiguration: globalRegistry.get('frontendConfiguration').get('Flowpack.Media.Ui'),
 }))
-export default class AssetUploadScreen extends React.PureComponent<AssetUploadScreenProps, AssetUploadScreenState> {
+export class AssetUploadScreen extends React.PureComponent<AssetUploadScreenProps, AssetUploadScreenState> {
     constructor(props) {
         super(props);
     }

Resources/Private/JavaScript/asset-upload-screen/src/index.js

@@ -0,0 +1 @@
+export { AssetUploadScreen } from './AssetUploadScreen';

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

@@ -74,20 +74,20 @@ const ReplaceAssetDialog: React.FC = () => {
         });
 
         if (hasApprovalToReplaceAsset) {
-            try {
-                const result = await replaceAsset({ asset: selectedAsset, file, options: replacementOptions });
-
-                Notify.ok(translate('uploadDialog.replacementFinished', 'Replacement finished'));
-                closeDialog();
-                void refetchAssets();
-                if (result?.data.replaceAsset.success) {
-                    setLabel(file.title);
-                    setCaption(file.caption);
-                    setCopyrightNotice(file.copyrightNotice);
-                }
-            } catch (error) {
-                Notify.error(translate('assetReplacement.error', 'Replacement failed'), error);
-            }
+            replaceAsset({ asset: selectedAsset, file, options: replacementOptions })
+                .then((result) => {
+                    if (result?.data.replaceAsset.success) {
+                        setLabel(file.title);
+                        setCaption(file.caption);
+                        setCopyrightNotice(file.copyrightNotice);
+                    }
+                    Notify.ok(translate('uploadDialog.replacementFinished', 'Replacement finished'));
+                    closeDialog();
+                    refetchAssets();
+                })
+                .catch((error) => {
+                    Notify.error(translate('assetReplacement.error', 'Replacement failed'), error);
+                });
         }
     }, [
         replaceAsset,