src/views-components/resource-properties-form/property-chip.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { Chip } from '@material-ui/core';
   7 import { connect } from 'react-redux';
   8 import { RootState } from '~/store/store';
   9 import * as CopyToClipboard from 'react-copy-to-clipboard';
  10 import { getVocabulary } from '~/store/vocabulary/vocabulary-selectors';
  11 import { Dispatch } from 'redux';
  12 import { snackbarActions, SnackbarKind } from '~/store/snackbar/snackbar-actions';
  13 import { getTagValueLabel, getTagKeyLabel, Vocabulary } from '~/models/vocabulary';
  14
  15 interface PropertyChipComponentDataProps {
  16     propKey: string;
  17     propValue: string;
  18     className: string;
  19     vocabulary: Vocabulary;
  20 }
  21
  22 interface PropertyChipComponentActionProps {
  23     onDelete?: () => void;
  24     onCopy: (message: string) => void;
  25 }
  26
  27 type PropertyChipComponentProps = PropertyChipComponentActionProps & PropertyChipComponentDataProps;
  28
  29 const mapStateToProps = ({ properties }: RootState) => ({
  30     vocabulary: getVocabulary(properties),
  31 });
  32
  33 const mapDispatchToProps = (dispatch: Dispatch) => ({
  34     onCopy: (message: string) => dispatch(snackbarActions.OPEN_SNACKBAR({
  35         message,
  36         hideDuration: 2000,
  37         kind: SnackbarKind.SUCCESS
  38     }))
  39 });
  40
  41 // Renders a Chip with copyable-on-click tag:value data based on the vocabulary
  42 export const PropertyChipComponent = connect(mapStateToProps, mapDispatchToProps)(
  43     ({ propKey, propValue, vocabulary, className, onCopy, onDelete }: PropertyChipComponentProps) => {
  44         const label = `${getTagKeyLabel(propKey, vocabulary)}: ${getTagValueLabel(propKey, propValue, vocabulary)}`;
  45         return (
  46             <CopyToClipboard key={propKey} text={label} onCopy={() => onCopy("Copied to clipboard")}>
  47                 <Chip onDelete={onDelete} key={propKey}
  48                     className={className} label={label} />
  49             </CopyToClipboard>
  50         );
  51     }
  52 );
  53
  54 export const getPropertyChip = (k:string, v:string, handleDelete:any, className:string) =>
  55     <PropertyChipComponent
  56         key={k} className={className}
  57         onDelete={handleDelete}
  58         propKey={k} propValue={v} />;