Merge branch '14363-warning-note'
authorPawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>
Tue, 23 Oct 2018 07:57:10 +0000 (09:57 +0200)
committerPawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>
Tue, 23 Oct 2018 07:57:10 +0000 (09:57 +0200)
refs #14363

Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>

src/components/confirmation-dialog/confirmation-dialog.tsx
src/components/icon/icon.tsx
src/components/warning-collection/warning-collection.tsx [new file with mode: 0644]
src/views-components/dialog-upload/dialog-collection-files-upload.tsx
src/views-components/rename-file-dialog/rename-file-dialog.tsx

index 13714a7d3577f65a53bceeea3d0adfac0cb4ca80..3c368a1f09c577b0df1ebdaef3d9d42527271f20 100644 (file)
@@ -5,6 +5,7 @@
 import * as React from "react";
 import { Dialog, DialogTitle, DialogContent, DialogActions, Button, DialogContentText } from "@material-ui/core";
 import { WithDialogProps } from "~/store/dialog/with-dialog";
+import { WarningIcon } from '~/components/icon/icon';
 
 export interface ConfirmationDialogDataProps {
     title: string;
@@ -20,9 +21,12 @@ export interface ConfirmationDialogProps {
 export const ConfirmationDialog = (props: ConfirmationDialogProps & WithDialogProps<ConfirmationDialogDataProps>) =>
     <Dialog open={props.open}>
         <DialogTitle>{props.data.title}</DialogTitle>
-        <DialogContent>
-            <DialogContentText>
+        <DialogContent style={{ display: 'flex', alignItems: 'center' }}>
+            <WarningIcon />
+            <DialogContentText style={{ paddingLeft: '8px' }}>
                 {props.data.text}
+                <br />
+                {props.data.title === 'Removing file' ? 'Removing a file will change content adress.' : 'Removing files will change content adress.'}
             </DialogContentText>
         </DialogContent>
         <DialogActions>
index 946d81a52a2831bf400fc891ddd9d3ffff365f47..1061a2ecb12db81cbc404ca0d41ab4428e3f78ce 100644 (file)
@@ -48,6 +48,7 @@ import SettingsApplications from '@material-ui/icons/SettingsApplications';
 import SettingsEthernet from '@material-ui/icons/SettingsEthernet';
 import Star from '@material-ui/icons/Star';
 import StarBorder from '@material-ui/icons/StarBorder';
+import Warning from '@material-ui/icons/Warning';
 
 export type IconType = React.SFC<{ className?: string }>;
 
@@ -99,3 +100,4 @@ export const TrashIcon: IconType = (props) => <Delete {...props} />;
 export const UserPanelIcon: IconType = (props) => <Person {...props} />;
 export const UsedByIcon: IconType = (props) => <Folder {...props} />;
 export const WorkflowIcon: IconType = (props) => <Code {...props} />;
+export const WarningIcon: IconType = (props) => <Warning style={{ color: '#fbc02d', height: '30px', width: '30px' }} {...props} />;
diff --git a/src/components/warning-collection/warning-collection.tsx b/src/components/warning-collection/warning-collection.tsx
new file mode 100644 (file)
index 0000000..59efc78
--- /dev/null
@@ -0,0 +1,30 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from "react";
+import { WarningIcon } from "~/components/icon/icon";
+import { StyleRulesCallback, DialogContentText, WithStyles, withStyles } from "@material-ui/core";
+import { ArvadosTheme } from '~/common/custom-theme';
+
+type CssRules = 'container' | 'text';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+    text: {
+        paddingLeft: '8px'
+    }
+});
+
+interface WarningCollectionProps {
+    text: string;
+}
+
+export const WarningCollection = withStyles(styles)(({ classes, text }: WarningCollectionProps & WithStyles<CssRules>) =>
+    <span className={classes.container}>
+        <WarningIcon />
+        <DialogContentText className={classes.text}>{text}</DialogContentText>
+    </span>);
\ No newline at end of file
index 35c1ed6d73b950d7992e5700f071df12a2e75c59..1c062d5a4de78755f86aa7736e5ebaa849989a5c 100644 (file)
@@ -9,7 +9,7 @@ import { CollectionCreateFormDialogData } from '~/store/collections/collection-c
 import { FormDialog } from '~/components/form-dialog/form-dialog';
 import { require } from '~/validators/require';
 import { FileUploaderField } from '~/views-components/file-uploader/file-uploader';
-
+import { WarningCollection } from '~/components/warning-collection/warning-collection';
 
 type DialogCollectionFilesUploadProps = WithDialogProps<{}> & InjectedFormProps<CollectionCreateFormDialogData>;
 
@@ -21,11 +21,13 @@ export const DialogCollectionFilesUpload = (props: DialogCollectionFilesUploadPr
         {...props}
     />;
 
-const UploadCollectionFilesFields = () =>
+const UploadCollectionFilesFields = () => <>
     <Field
         name='files'
         validate={FILES_FIELD_VALIDATION}
-        component={FileUploaderField} />;
+        component={FileUploaderField} />
+    <WarningCollection text="Uploading new files will change content address." />
+</>;
 
 const FILES_FIELD_VALIDATION = [require];
 
index 862227bd888c27c277e4b4d9e28d66a0e36b76f3..0abdb5d6c2cf91027ece9024ec534fc6e3bbeded 100644 (file)
@@ -10,6 +10,7 @@ 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';
 
 export const RenameFileDialog = compose(
     withDialog(RENAME_FILE_DIALOG),
@@ -35,4 +36,5 @@ const RenameDialogFormFields = (props: WithDialogProps<RenameFileDialogData>) =>
         name='name'
         component={TextField}
     />
+    <WarningCollection text="Renaming a file will change content adress." />
 </>;