15067: Creates PropertyChipComponent to be used where tags need listing.

[arvados-workbench2.git] / src / views-components / project-properties-dialog / project-properties-dialog.tsx

diff --git a/src/views-components/project-properties-dialog/project-properties-dialog.tsx b/src/views-components/project-properties-dialog/project-properties-dialog.tsx
index a071a985417efad9fbc2d5806427808bd9d89e14..7a4cfba6c56e5d133c2a61a94101f33c2d01cd3f 100644 (file)
--- a/src/views-components/project-properties-dialog/project-properties-dialog.tsx
+++ b/src/views-components/project-properties-dialog/project-properties-dialog.tsx
@@ -9,14 +9,11 @@ import { RootState } from '~/store/store';
 import { withDialog, WithDialogProps } from "~/store/dialog/with-dialog";
 import { ProjectResource } from '~/models/project';
 import { PROJECT_PROPERTIES_DIALOG_NAME, deleteProjectProperty } from '~/store/details-panel/details-panel-action';
-import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Chip, withStyles, StyleRulesCallback, WithStyles } from '@material-ui/core';
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, withStyles, StyleRulesCallback, WithStyles } from '@material-ui/core';
 import { ArvadosTheme } from '~/common/custom-theme';
 import { ProjectPropertiesForm } from '~/views-components/project-properties-dialog/project-properties-form';
 import { getResource } from '~/store/resources/resources';
-import * as CopyToClipboard from 'react-copy-to-clipboard';
-import { snackbarActions, SnackbarKind } from '~/store/snackbar/snackbar-actions';
-import { getTagValueLabel, getTagKeyLabel, Vocabulary } from '~/models/vocabulary';
-import { getVocabulary } from "~/store/vocabulary/vocabulary-selectors";
+import { PropertyChipComponent } from "../resource-properties-form/property-chip";
 
 type CssRules = 'tag';
 
@@ -29,26 +26,18 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 
 interface ProjectPropertiesDialogDataProps {
     project: ProjectResource;
-    vocabulary: Vocabulary;
 }
 
 interface ProjectPropertiesDialogActionProps {
     handleDelete: (key: string) => void;
-    onCopy: (message: string) => void;
 }
 
 const mapStateToProps = ({ detailsPanel, resources, properties }: RootState): ProjectPropertiesDialogDataProps => ({
     project: getResource(detailsPanel.resourceUuid)(resources) as ProjectResource,
-    vocabulary: getVocabulary(properties),
 });
 
 const mapDispatchToProps = (dispatch: Dispatch): ProjectPropertiesDialogActionProps => ({
     handleDelete: (key: string) => dispatch<any>(deleteProjectProperty(key)),
-    onCopy: (message: string) => dispatch(snackbarActions.OPEN_SNACKBAR({
-                message,
-                hideDuration: 2000,
-                kind: SnackbarKind.SUCCESS
-            }))
 });
 
 type ProjectPropertiesDialogProps =  ProjectPropertiesDialogDataProps & ProjectPropertiesDialogActionProps & WithDialogProps<{}> & WithStyles<CssRules>;
@@ -56,7 +45,7 @@ type ProjectPropertiesDialogProps =  ProjectPropertiesDialogDataProps & ProjectP
 export const ProjectPropertiesDialog = connect(mapStateToProps, mapDispatchToProps)(
     withStyles(styles)(
     withDialog(PROJECT_PROPERTIES_DIALOG_NAME)(
-        ({ classes, open, closeDialog, handleDelete, onCopy, project, vocabulary }: ProjectPropertiesDialogProps) =>
+        ({ classes, open, closeDialog, handleDelete, project }: ProjectPropertiesDialogProps) =>
             <Dialog open={open}
                 onClose={closeDialog}
                 fullWidth
@@ -65,16 +54,11 @@ export const ProjectPropertiesDialog = connect(mapStateToProps, mapDispatchToPro
                 <DialogContent>
                     <ProjectPropertiesForm />
                     {project && project.properties &&
-                        Object.keys(project.properties).map(k => {
-                            const label = `${getTagKeyLabel(k, vocabulary)}: ${getTagValueLabel(k, project.properties[k], vocabulary)}`;
-                            return (
-                                <CopyToClipboard key={k} text={label} onCopy={() => onCopy("Copied")}>
-                                    <Chip key={k} className={classes.tag}
-                                        onDelete={() => handleDelete(k)}
-                                        label={label} />
-                                </CopyToClipboard>
-                            );
-                        })
+                        Object.keys(project.properties).map(k =>
+                            <PropertyChipComponent
+                                onDelete={() => handleDelete(k)}
+                                key={k} className={classes.tag}
+                                propKey={k} propValue={project.properties[k]} />)
                     }
                 </DialogContent>
                 <DialogActions>
@@ -86,4 +70,5 @@ export const ProjectPropertiesDialog = connect(mapStateToProps, mapDispatchToPro
                     </Button>
                 </DialogActions>
             </Dialog>
-)));
\ No newline at end of file
+    )
+));
\ No newline at end of file