src/views-components/project-properties/update-project-properties-list.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { connect } from 'react-redux';
   7 import { Dispatch } from 'redux';
   8 import {
   9     withStyles,
  10     StyleRulesCallback,
  11     WithStyles,
  12 } from '@material-ui/core';
  13 import { RootState } from 'store/store';
  14 import {
  15     PROJECT_UPDATE_FORM_SELECTOR,
  16     PROJECT_UPDATE_FORM_NAME,
  17 } from 'store/projects/project-update-actions';
  18 import { ArvadosTheme } from 'common/custom-theme';
  19 import { getPropertyChip } from '../resource-properties-form/property-chip';
  20 import { ProjectProperties } from 'store/projects/project-create-actions';
  21 import { removePropertyFromResourceForm } from 'store/resources/resources-actions';
  22
  23 type CssRules = 'tag';
  24
  25 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  26     tag: {
  27         marginRight: theme.spacing.unit,
  28         marginBottom: theme.spacing.unit
  29     }
  30 });
  31
  32 interface UpdateProjectPropertiesListDataProps {
  33     properties: ProjectProperties;
  34 }
  35
  36 interface UpdateProjectPropertiesListActionProps {
  37     handleDelete: (key: string, value: string) => void;
  38 }
  39
  40 const mapStateToProps = (state: RootState): UpdateProjectPropertiesListDataProps => {
  41     const properties = PROJECT_UPDATE_FORM_SELECTOR(state, 'properties');
  42     return { properties };
  43 };
  44
  45 const mapDispatchToProps = (dispatch: Dispatch): UpdateProjectPropertiesListActionProps => ({
  46     handleDelete: (key: string, value: string) => dispatch<any>(removePropertyFromResourceForm(key, value, PROJECT_UPDATE_FORM_NAME))
  47 });
  48
  49 type UpdateProjectPropertiesListProps = UpdateProjectPropertiesListDataProps &
  50     UpdateProjectPropertiesListActionProps & WithStyles<CssRules>;
  51
  52 const List = withStyles(styles)(
  53     ({ classes, handleDelete, properties }: UpdateProjectPropertiesListProps) =>
  54         <div>
  55             {properties &&
  56                 Object.keys(properties).map(k =>
  57                     Array.isArray(properties[k])
  58                     ? (properties[k] as string[]).map((v: string) =>
  59                         getPropertyChip(
  60                             k, v,
  61                             () => handleDelete(k, v),
  62                             classes.tag))
  63                     : getPropertyChip(
  64                         k, (properties[k] as string),
  65                         () => handleDelete(k, (properties[k] as string)),
  66                         classes.tag))
  67                 }
  68         </div>
  69 );
  70
  71 export const UpdateProjectPropertiesList = connect(mapStateToProps, mapDispatchToProps)(List);