src/views-components/resource-properties-dialog/resource-properties-dialog.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 { Dispatch } from "redux";
   7 import { connect } from "react-redux";
   8 import { RootState } from 'store/store';
   9 import { withDialog, WithDialogProps } from "store/dialog/with-dialog";
  10 import { RESOURCE_PROPERTIES_DIALOG_NAME } from 'store/details-panel/details-panel-action';
  11 import {
  12     Dialog,
  13     DialogTitle,
  14     DialogContent,
  15     DialogActions,
  16     Button,
  17     withStyles,
  18     StyleRulesCallback,
  19     WithStyles
  20 } from '@material-ui/core';
  21 import { ArvadosTheme } from 'common/custom-theme';
  22 import { ResourcePropertiesDialogForm } from 'views-components/resource-properties-dialog/resource-properties-dialog-form';
  23 import { getResource } from 'store/resources/resources';
  24 import { getPropertyChip } from "../resource-properties-form/property-chip";
  25 import { deleteResourceProperty } from "store/resources/resources-actions";
  26 import { ResourceWithProperties } from "models/resource";
  27
  28 type CssRules = 'tag';
  29
  30 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  31     tag: {
  32         marginRight: theme.spacing.unit,
  33         marginBottom: theme.spacing.unit
  34     }
  35 });
  36
  37 interface ResourcePropertiesDialogDataProps {
  38     resource: ResourceWithProperties;
  39 }
  40
  41 interface ResourcePropertiesDialogActionProps {
  42     handleDelete: (uuid: string, key: string, value: string) => void;
  43 }
  44
  45 const mapStateToProps = ({ detailsPanel, resources, properties }: RootState): ResourcePropertiesDialogDataProps => ({
  46     resource: getResource(detailsPanel.resourceUuid)(resources) as ResourceWithProperties,
  47 });
  48
  49 const mapDispatchToProps = (dispatch: Dispatch): ResourcePropertiesDialogActionProps => ({
  50     handleDelete: (uuid: string, key: string, value: string) => () => dispatch<any>(deleteResourceProperty(uuid, key, value)),
  51 });
  52
  53 type ResourcePropertiesDialogProps = ResourcePropertiesDialogDataProps & ResourcePropertiesDialogActionProps & WithDialogProps<{}> & WithStyles<CssRules>;
  54
  55 export const ResourcePropertiesDialog = connect(mapStateToProps, mapDispatchToProps)(
  56     withStyles(styles)(
  57         withDialog(RESOURCE_PROPERTIES_DIALOG_NAME)(
  58             ({ classes, open, closeDialog, handleDelete, resource }: ResourcePropertiesDialogProps) =>
  59                 <Dialog open={open}
  60                     onClose={closeDialog}
  61                     fullWidth
  62                     maxWidth='sm'>
  63                     <DialogTitle>Edit properties</DialogTitle>
  64                     <DialogContent>
  65                         <ResourcePropertiesDialogForm uuid={resource ? resource.uuid : ''} />
  66                         {resource && resource.properties &&
  67                             Object.keys(resource.properties).map(k =>
  68                                 Array.isArray(resource.properties[k])
  69                                     ? resource.properties[k].map((v: string) =>
  70                                         getPropertyChip(
  71                                             k, v,
  72                                             handleDelete(resource.uuid, k, v),
  73                                             classes.tag))
  74                                     : getPropertyChip(
  75                                         k, resource.properties[k],
  76                                         handleDelete(resource.uuid, k, resource.properties[k]),
  77                                         classes.tag)
  78                             )
  79                         }
  80                     </DialogContent>
  81                     <DialogActions>
  82                         <Button
  83                             variant='text'
  84                             color='primary'
  85                             onClick={closeDialog}>
  86                             Close
  87                     </Button>
  88                     </DialogActions>
  89                 </Dialog>
  90             )
  91     ));