1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import React from 'react';
6 import { connect } from 'react-redux';
7 import { Dispatch } from 'redux';
12 } from '@material-ui/core';
13 import { RootState } from 'store/store';
15 COLLECTION_CREATE_FORM_SELECTOR,
17 COLLECTION_CREATE_FORM_NAME
18 } from 'store/collections/collection-create-actions';
19 import { ArvadosTheme } from 'common/custom-theme';
20 import { getPropertyChip } from '../resource-properties-form/property-chip';
21 import { removePropertyFromResourceForm } from 'store/resources/resources-actions';
23 type CssRules = 'tag';
25 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
27 marginRight: theme.spacing.unit,
28 marginBottom: theme.spacing.unit
32 interface CreateCollectionPropertiesListDataProps {
33 properties: CollectionProperties;
36 interface CreateCollectionPropertiesListActionProps {
37 handleDelete: (key: string, value: string) => void;
40 const mapStateToProps = (state: RootState): CreateCollectionPropertiesListDataProps => {
41 const properties = COLLECTION_CREATE_FORM_SELECTOR(state, 'properties');
42 return { properties };
45 const mapDispatchToProps = (dispatch: Dispatch): CreateCollectionPropertiesListActionProps => ({
46 handleDelete: (key: string, value: string) => dispatch<any>(removePropertyFromResourceForm(key, value, COLLECTION_CREATE_FORM_NAME))
49 type CreateCollectionPropertiesListProps = CreateCollectionPropertiesListDataProps &
50 CreateCollectionPropertiesListActionProps & WithStyles<CssRules>;
52 const List = withStyles(styles)(
53 ({ classes, handleDelete, properties }: CreateCollectionPropertiesListProps) =>
56 Object.keys(properties).map(k =>
57 Array.isArray(properties[k])
58 ? (properties[k] as string[]).map((v: string) =>
61 () => handleDelete(k, v),
64 k, (properties[k] as string),
65 () => handleDelete(k, (properties[k] as string)),
71 export const CreateCollectionPropertiesList = connect(mapStateToProps, mapDispatchToProps)(List);