Open details panel on file click
[arvados-workbench2.git] / src / views-components / project-properties / create-project-properties-list.tsx
index 942de8a89b4235d5ecf91e7a11e3fdee999038e1..1d2050fe4c25343f2f903a7ab27a469bd972ec60 100644 (file)
@@ -5,10 +5,9 @@
 import * as 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, PROJECT_CREATE_FORM_NAME } from '~/store/projects/project-create-actions';
+import { removePropertyFromCreateProjectForm, PROJECT_CREATE_FORM_SELECTOR, ProjectProperties } from '~/store/projects/project-create-actions';
 import { ArvadosTheme } from '~/common/custom-theme';
 
 type CssRules = 'tag';
@@ -21,16 +20,15 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 });
 
 interface CreateProjectPropertiesListDataProps {
-    properties: any;
+    properties: ProjectProperties;
 }
 
 interface CreateProjectPropertiesListActionProps {
     handleDelete: (key: string) => void;
 }
 
-const selector = formValueSelector(PROJECT_CREATE_FORM_NAME);
 const mapStateToProps = (state: RootState): CreateProjectPropertiesListDataProps => {
-    const properties = selector(state, 'properties');
+    const properties = PROJECT_CREATE_FORM_SELECTOR(state, 'properties');
     return { properties };
 };
 
@@ -41,15 +39,16 @@ const mapDispatchToProps = (dispatch: Dispatch): CreateProjectPropertiesListActi
 type CreateProjectPropertiesListProps = CreateProjectPropertiesListDataProps & 
     CreateProjectPropertiesListActionProps & WithStyles<CssRules>;
 
-export const CreateProjectPropertiesList = connect(mapStateToProps, mapDispatchToProps)(
-    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]}`} />;
+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]}`} />;
                 })}
-            </div>
-        ));
\ No newline at end of file
+        </div>
+);
+
+export const CreateProjectPropertiesList = connect(mapStateToProps, mapDispatchToProps)(List);
\ No newline at end of file