X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/f0d519637c997df11d5b1a1b32b3d9e4a2872325..618af1a3106c399765788be4583463ab35d97cd5:/src/views-components/rename-file-dialog/rename-file-dialog.tsx

diff --git a/src/views-components/rename-file-dialog/rename-file-dialog.tsx b/src/views-components/rename-file-dialog/rename-file-dialog.tsx
index 37028f9d..b67697b5 100644
--- a/src/views-components/rename-file-dialog/rename-file-dialog.tsx
+++ b/src/views-components/rename-file-dialog/rename-file-dialog.tsx
@@ -2,27 +2,43 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import { Dispatch } from "redux";
-import { reduxForm, reset, startSubmit, stopSubmit } from "redux-form";
-import { withDialog } from "~/store/dialog/with-dialog";
-import { dialogActions } from "~/store/dialog/dialog-actions";
-import { RenameDialog } from "~/components/rename-dialog/rename-dialog";
+import React from 'react';
+import { compose, Dispatch } from 'redux';
+import { reduxForm, InjectedFormProps, Field } from 'redux-form';
+import { withDialog, WithDialogProps } from 'store/dialog/with-dialog';
+import { FormDialog } from 'components/form-dialog/form-dialog';
+import { DialogContentText } from '@material-ui/core';
+import { TextField } from 'components/text-field/text-field';
+import { RENAME_FILE_DIALOG, RenameFileDialogData, renameFile } from 'store/collection-panel/collection-panel-files/collection-panel-files-actions';
+import { WarningCollection } from 'components/warning-collection/warning-collection';
+import { RENAME_FILE_VALIDATION } from 'validators/validators';
 
-export const RENAME_FILE_DIALOG = 'renameFileDialog';
-
-export const openRenameFileDialog = (originalName: string) =>
-    (dispatch: Dispatch) => {
-        dispatch(reset(RENAME_FILE_DIALOG));
-        dispatch(dialogActions.OPEN_DIALOG({ id: RENAME_FILE_DIALOG, data: originalName }));
-    };
-
-export const [RenameFileDialog] = [RenameDialog]
-    .map(withDialog(RENAME_FILE_DIALOG))
-    .map(reduxForm({
+export const RenameFileDialog = compose(
+    withDialog(RENAME_FILE_DIALOG),
+    reduxForm({
         form: RENAME_FILE_DIALOG,
-        onSubmit: (data, dispatch) => {
-            dispatch(startSubmit(RENAME_FILE_DIALOG));
-            // TODO: call collection file renaming action here
-            setTimeout(() => dispatch(stopSubmit(RENAME_FILE_DIALOG, { name: 'Invalid name' })), 2000);
+        touchOnChange: true,
+        onSubmit: (data: { path: string }, dispatch: Dispatch) => {
+            dispatch<any>(renameFile(data.path));
         }
-    }));
+    })
+)((props: WithDialogProps<RenameFileDialogData> & InjectedFormProps<{ name: string, path: string }>) =>
+    <FormDialog
+        dialogTitle='Rename'
+        formFields={RenameDialogFormFields}
+        submitLabel='Ok'
+        {...props}
+    />);
+
+const RenameDialogFormFields = (props: WithDialogProps<RenameFileDialogData>) => <>
+    <DialogContentText>
+        {`Please, enter a new name for ${props.data.name}`}
+    </DialogContentText>
+    <Field
+        name='path'
+        component={TextField as any}
+        autoFocus={true}
+        validate={RENAME_FILE_VALIDATION}
+    />
+    <WarningCollection text="Renaming a file will change the collection's content address." />
+</>;