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     removePropertyFromUpdateProjectForm,
  16     PROJECT_UPDATE_FORM_SELECTOR,
  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
  22 type CssRules = 'tag';
  23
  24 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  25     tag: {
  26         marginRight: theme.spacing.unit,
  27         marginBottom: theme.spacing.unit
  28     }
  29 });
  30
  31 interface UpdateProjectPropertiesListDataProps {
  32     properties: ProjectProperties;
  33 }
  34
  35 interface UpdateProjectPropertiesListActionProps {
  36     handleDelete: (key: string, value: string) => void;
  37 }
  38
  39 const mapStateToProps = (state: RootState): UpdateProjectPropertiesListDataProps => {
  40     const properties = PROJECT_UPDATE_FORM_SELECTOR(state, 'properties');
  41     return { properties };
  42 };
  43
  44 const mapDispatchToProps = (dispatch: Dispatch): UpdateProjectPropertiesListActionProps => ({
  45     handleDelete: (key: string, value: string) => dispatch<any>(removePropertyFromUpdateProjectForm(key, value))
  46 });
  47
  48 type UpdateProjectPropertiesListProps = UpdateProjectPropertiesListDataProps &
  49     UpdateProjectPropertiesListActionProps & WithStyles<CssRules>;
  50
  51 const List = withStyles(styles)(
  52     ({ classes, handleDelete, properties }: UpdateProjectPropertiesListProps) =>
  53         <div>
  54             {properties &&
  55                 Object.keys(properties).map(k =>
  56                     Array.isArray(properties[k])
  57                     ? (properties[k] as string[]).map((v: string) =>
  58                         getPropertyChip(
  59                             k, v,
  60                             () => handleDelete(k, v),
  61                             classes.tag))
  62                     : getPropertyChip(
  63                         k, (properties[k] as string),
  64                         () => handleDelete(k, (properties[k] as string)),
  65                         classes.tag))
  66                 }
  67         </div>
  68 );
  69
  70 export const UpdateProjectPropertiesList = connect(mapStateToProps, mapDispatchToProps)(List);