Make multi file deployment work again

client/src/plugins/camunda-plugin/deployment-tool/DeploymentTool.js

@@ -282,15 +282,19 @@ export default class DeploymentTool extends PureComponent {
 
   async saveConfiguration(tab, configuration) {
 
+    const fileSystem = this.props._getGlobal('fileSystem');
     const {
       endpoint,
       deployment
     } = configuration;
 
     await this.saveEndpoint(endpoint);
 
+    const deploymentWithAttachments = await withSerializedAttachments(
+      deployment, file => fileSystem.getFilePath(file)
+    );
     const tabConfiguration = {
-      deployment: withSerializedAttachments(deployment),
+      deployment: deploymentWithAttachments,
       endpointId: endpoint.id
     };
 
@@ -663,13 +667,18 @@ function getDeploymentType(tab) {
   }
 }
 
-function withSerializedAttachments(deployment) {
+async function withSerializedAttachments(deployment, getPath) {
   const { attachments: fileList = [] } = deployment;
-  const attachments = fileList.map(file => ({ path: file.path }));
+  const attachments = await Promise.all(fileList.map(async file => {
+    const path = file.path || await getPath(file.contents);
+    return {
+      path
+    };
+  }));
 
   return { ...deployment, attachments };
 }
 
 function basename(filePath) {
-  return filePath.split('\\').pop().split('/').pop();
+  return filePath ? filePath.split('\\').pop().split('/').pop() : '<unnamed>';
 }

client/src/plugins/camunda-plugin/deployment-tool/__tests__/DeploymentToolSpec.js

@@ -270,12 +270,11 @@ describe('<DeploymentTool>', function() {
 
       // given
       const file = {
-        path: '/file/path/user.form',
         name: 'user.form',
         contents: []
       };
       const attachments = [ {
-        path: file.path
+        path: '/non/existing/path/user.form'
       } ];
       const savedConfiguration = createConfiguration({ attachments });
       const config = {
@@ -310,7 +309,6 @@ describe('<DeploymentTool>', function() {
       const { attachments: deployedAttachments } = deploySpy.args[0][1].deployment;
 
       expect(deployedAttachments[0]).have.property('name', file.name);
-      expect(deployedAttachments[0]).have.property('path', file.path);
       expect(deployedAttachments[0]).have.property('contents');
       expect(deployedAttachments[0].contents).not.to.be.null;
     });
@@ -1523,6 +1521,9 @@ function createSavedConfiguration(configuration) {
 
 function createFileSystem(overrides = {}) {
   return {
+    getFilePath() {
+      return '/file/path';
+    },
     readFile() {},
     ...overrides
   };

client/src/shared/ui/form/FileInput.js

@@ -26,7 +26,7 @@ import ErrorIcon from '../../../../resources/icons/Error.svg';
  * @typedef FileDescriptor
  * @property {Uint8Array|Blob|null} contents
  * @property {string} name
- * @property {string} path
+ * @property {number} lastModified
  */
 
 export default function FileInput(props) {
@@ -47,8 +47,9 @@ export default function FileInput(props) {
   function onChange() {
     const { files } = inputRef.current;
     const fileDescriptors = toFileDescriptors(files);
+    const newValue = uniqueBy(file => fileToKey(file), value, fileDescriptors);
 
-    form.setFieldValue(name, uniqueBy('path', value, fileDescriptors));
+    form.setFieldValue(name, newValue);
   }
 
   function removeFile(fileToRemove) {
@@ -82,6 +83,10 @@ export default function FileInput(props) {
   );
 }
 
+/**
+ * @param {object} props
+ * @param {FileDescriptor[]} props.files
+ */
 function FileList(props) {
   const {
     errors: formErrors,
@@ -96,7 +101,7 @@ function FileList(props) {
     <ul className={ classNames('file-list', { 'is-invalid': invalid }) }>
       { files.map((file, index) => (
         <ListItem
-          key={ file.path } name={ file.name } onRemove={ () => onRemove(file) }
+          key={ fileToKey(file) } name={ file.name } onRemove={ () => onRemove(file) }
           error={ getIn(formErrors, `${fieldName}[${index}]`) } />
       ))}
     </ul>
@@ -134,7 +139,6 @@ function toFileDescriptors(fileList) {
     .map(file => {
       return {
         name: file.name,
-        path: file.path,
         lastModified: file.lastModified,
         contents: file
       };
@@ -167,3 +171,11 @@ function getIconFromFileType(name, error) {
     return <div className="default_file-icon" />;
   }
 }
+
+/**
+ * @param {FileDescriptor} file
+ * @returns {string}
+ */
+function fileToKey(file) {
+  return `${file.name}_${file.lastModified}`;
+}