// SPDX-License-Identifier: AGPL-3.0
import React from 'react';
+import { Dispatch } from 'redux';
import {
StyleRulesCallback,
WithStyles,
Grid,
Tooltip,
Typography,
- Card, CardHeader, CardContent,
+ Card
} from '@material-ui/core';
import { connect, DispatchProp } from "react-redux";
import { RouteComponentProps } from 'react-router';
import { ArvadosTheme } from 'common/custom-theme';
import { RootState } from 'store/store';
-import { MoreOptionsIcon, CollectionIcon, ReadOnlyIcon, CollectionOldVersionIcon } from 'components/icon/icon';
+import { MoreOptionsIcon, CollectionIcon, ReadOnlyIcon, CollectionOldVersionIcon, RenameIcon } from 'components/icon/icon';
import { DetailsAttribute } from 'components/details-attribute/details-attribute';
import { CollectionResource, getCollectionUrl } from 'models/collection';
import { CollectionPanelFiles } from 'views-components/collection-panel-files/collection-panel-files';
-import { CollectionTagForm } from './collection-tag-form';
-import { deleteCollectionTag, navigateToProcess, collectionPanelActions } from 'store/collection-panel/collection-panel-action';
+import { navigateToProcess, collectionPanelActions } from 'store/collection-panel/collection-panel-action';
import { getResource } from 'store/resources/resources';
import { openContextMenu, resourceUuidToContextMenuKind } from 'store/context-menu/context-menu-actions';
import { formatDate, formatFileSize } from "common/formatters";
-import { openDetailsPanel } from 'store/details-panel/details-panel-action';
+import { openDetailsPanel, openResourcePropertiesDialog } from 'store/details-panel/details-panel-action';
import { snackbarActions, SnackbarKind } from 'store/snackbar/snackbar-actions';
import { getPropertyChip } from 'views-components/resource-properties-form/property-chip';
import { IllegalNamingWarning } from 'components/warning/warning';
const { classes, item, dispatch, isWritable, isOldVersion, isLoadingFiles, tooManyFiles } = this.props;
const panelsData: MPVPanelState[] = [
{name: "Details"},
- {name: "Properties", visible: false},
{name: "Files"},
];
return item
</Grid>
</Card>
</MPVPanelContent>
- <MPVPanelContent xs="auto" data-cy='collection-properties-panel'>
- <Card className={classes.propertiesCard}>
- <CardHeader title="Properties" />
- <CardContent><Grid container>
- {isWritable && <Grid item xs={12}>
- <CollectionTagForm />
- </Grid>}
- <Grid item xs={12}>
- {Object.keys(item.properties).length > 0
- ? Object.keys(item.properties).map(k =>
- Array.isArray(item.properties[k])
- ? item.properties[k].map((v: string) =>
- getPropertyChip(
- k, v,
- isWritable
- ? this.handleDelete(k, v)
- : undefined,
- classes.tag))
- : getPropertyChip(
- k, item.properties[k],
- isWritable
- ? this.handleDelete(k, item.properties[k])
- : undefined,
- classes.tag)
- )
- : <div className={classes.centeredLabel}>No properties set on this collection.</div>
- }
- </Grid>
- </Grid></CardContent>
- </Card>
- </MPVPanelContent>
<MPVPanelContent xs>
<Card className={classes.filesCard}>
<CollectionPanelFiles
kind: SnackbarKind.SUCCESS
}))
- handleDelete = (key: string, value: string) => () => {
- this.props.dispatch<any>(deleteCollectionTag(key, value));
- }
-
openCollectionDetails = (e: React.MouseEvent<HTMLElement>) => {
const { item } = this.props;
if (item) {
)
);
-export const CollectionDetailsAttributes = (props: { item: CollectionResource, twoCol: boolean, classes?: Record<CssRules, string>, showVersionBrowser?: () => void }) => {
+interface CollectionDetailsActionProps {
+ onClick: () => void;
+}
+
+interface CollectionDetailsProps {
+ item: CollectionResource;
+ classes?: any;
+ twoCol?: boolean;
+ showVersionBrowser?: () => void;
+}
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+ onClick: () => dispatch<any>(openResourcePropertiesDialog()),
+});
+
+export const CollectionDetailsAttributes = connect(null, mapDispatchToProps)(
+(props: CollectionDetailsProps & CollectionDetailsActionProps) => {
const item = props.item;
- const classes = props.classes || { label: '', value: '', button: '' };
+ const classes = props.classes || { label: '', value: '', button: '', tag: '' };
const isOldVersion = item && item.currentVersionUuid !== item.uuid;
const mdSize = props.twoCol ? 6 : 12;
const showVersionBrowser = props.showVersionBrowser;
<DetailsAttribute classLabel={classes.label} classValue={classes.value}
label='Storage classes' value={item.storageClassesDesired.join(', ')} />
</Grid>
+ <Grid item xs={12} md={mdSize}>
+ <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+ label='Properties'>
+ { !props.twoCol
+ ? <div data-cy='property-editor-btn' onClick={props.onClick}>
+ <RenameIcon className={classes.editIcon} />
+ </div>
+ : '' }
+ </DetailsAttribute>
+ { Object.keys(item.properties).length > 0
+ ? Object.keys(item.properties).map(k =>
+ Array.isArray(item.properties[k])
+ ? item.properties[k].map((v: string) =>
+ getPropertyChip(k, v, undefined, classes.tag))
+ : getPropertyChip(k, item.properties[k], undefined, classes.tag))
+ : <div className={classes.value}>No properties</div> }
+ </Grid>
</Grid>;
-};
+});