X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/467d932e354ea551cbff134ac50723bd56cea68d..dfac252e5d6639c0bc6f106f1985fcdcd7402376:/src/views-components/project-properties/create-project-properties-list.tsx

diff --git a/src/views-components/project-properties/create-project-properties-list.tsx b/src/views-components/project-properties/create-project-properties-list.tsx
index 41003adc..8a61dcf7 100644
--- a/src/views-components/project-properties/create-project-properties-list.tsx
+++ b/src/views-components/project-properties/create-project-properties-list.tsx
@@ -2,14 +2,18 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
-import { formValueSelector } from 'redux-form';
-import { withStyles, StyleRulesCallback, WithStyles, Chip } from '@material-ui/core';
-import { RootState } from '~/store/store';
-import { removePropertyFromCreateProjectForm, CREATE_FORM_SELECTOR } from '~/store/projects/project-create-actions';
-import { ArvadosTheme } from '~/common/custom-theme';
+import {
+    withStyles,
+    StyleRulesCallback,
+    WithStyles,
+} from '@material-ui/core';
+import { RootState } from 'store/store';
+import { removePropertyFromCreateProjectForm, PROJECT_CREATE_FORM_SELECTOR, ProjectProperties } from 'store/projects/project-create-actions';
+import { ArvadosTheme } from 'common/custom-theme';
+import { getPropertyChip } from '../resource-properties-form/property-chip';
 
 type CssRules = 'tag';
 
@@ -21,34 +25,41 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 });
 
 interface CreateProjectPropertiesListDataProps {
-    properties: { [key: string]: string };
+    properties: ProjectProperties;
 }
 
 interface CreateProjectPropertiesListActionProps {
-    handleDelete: (key: string) => void;
+    handleDelete: (key: string, value: string) => void;
 }
 
 const mapStateToProps = (state: RootState): CreateProjectPropertiesListDataProps => {
-    const properties = CREATE_FORM_SELECTOR(state, 'properties');
+    const properties = PROJECT_CREATE_FORM_SELECTOR(state, 'properties');
     return { properties };
 };
 
 const mapDispatchToProps = (dispatch: Dispatch): CreateProjectPropertiesListActionProps => ({
-    handleDelete: (key: string) => dispatch<any>(removePropertyFromCreateProjectForm(key))
+    handleDelete: (key: string, value: string) => dispatch<any>(removePropertyFromCreateProjectForm(key, value))
 });
 
-type CreateProjectPropertiesListProps = CreateProjectPropertiesListDataProps & 
+type CreateProjectPropertiesListProps = CreateProjectPropertiesListDataProps &
     CreateProjectPropertiesListActionProps & WithStyles<CssRules>;
 
 const List = withStyles(styles)(
     ({ classes, handleDelete, properties }: CreateProjectPropertiesListProps) =>
         <div>
             {properties &&
-                Object.keys(properties).map(k => {
-                    return <Chip key={k} className={classes.tag}
-                        onDelete={() => handleDelete(k)}
-                        label={`${k}: ${properties[k]}`} />;
-                })}
+                Object.keys(properties).map(k =>
+                    Array.isArray(properties[k])
+                    ? (properties[k] as string[]).map((v: string) =>
+                        getPropertyChip(
+                            k, v,
+                            () => handleDelete(k, v),
+                            classes.tag))
+                    : getPropertyChip(
+                        k, (properties[k] as string),
+                        () => handleDelete(k, (properties[k] as string)),
+                        classes.tag))
+                }
         </div>
 );