services/workbench2/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 React from 'react';
   6 import { Chip } from '@mui/material';
   7 import { connect } from 'react-redux';
   8 import { RootState } from 'store/store';
   9 import 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             <span onClick={(ev)=>ev.stopPropagation()}>
  47                 <CopyToClipboard key={propKey} text={label} onCopy={() => onCopy("Copied to clipboard")}>
  48                     <Chip onDelete={onDelete} key={propKey}
  49                         className={className} label={label} />
  50                 </CopyToClipboard>
  51             </span>
  52         );
  53     }
  54 );
  55
  56 export const getPropertyChip = (k: string, v: string, handleDelete: any, className: string) =>
  57     <PropertyChipComponent
  58         key={`${k}-${v}`} className={className}
  59         onDelete={handleDelete}
  60         propKey={k} propValue={v} />;