// SPDX-License-Identifier: AGPL-3.0
import React from 'react';
-import { Dispatch } from 'redux';
import {
StyleRulesCallback,
WithStyles,
import { RouteComponentProps } from 'react-router';
import { ArvadosTheme } from 'common/custom-theme';
import { RootState } from 'store/store';
-import { MoreOptionsIcon, CollectionIcon, ReadOnlyIcon, CollectionOldVersionIcon, RenameIcon } from 'components/icon/icon';
+import { MoreOptionsIcon, CollectionIcon, ReadOnlyIcon, CollectionOldVersionIcon } 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 { getResource } from 'store/resources/resources';
import { openContextMenu, resourceUuidToContextMenuKind } from 'store/context-menu/context-menu-actions';
import { formatDate, formatFileSize } from "common/formatters";
-import { openDetailsPanel, openResourcePropertiesDialog } from 'store/details-panel/details-panel-action';
+import { openDetailsPanel } 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';
color: theme.customs.colors.yellow700
},
tag: {
- marginRight: theme.spacing.unit,
- marginBottom: theme.spacing.unit
+ marginRight: theme.spacing.unit / 2,
+ marginBottom: theme.spacing.unit / 2
},
label: {
fontSize: '0.875rem'
)
);
-interface CollectionDetailsActionProps {
- onClick: () => void;
-}
-
interface CollectionDetailsProps {
item: CollectionResource;
classes?: any;
showVersionBrowser?: () => void;
}
-const mapDispatchToProps = (dispatch: Dispatch) => ({
- onClick: () => dispatch<any>(openResourcePropertiesDialog()),
-});
-
-export const CollectionDetailsAttributes = connect(null, mapDispatchToProps)(
-(props: CollectionDetailsProps & CollectionDetailsActionProps) => {
+export const CollectionDetailsAttributes = (props: CollectionDetailsProps) => {
const item = props.item;
const classes = props.classes || { label: '', value: '', button: '', tag: '' };
const isOldVersion = item && item.currentVersionUuid !== item.uuid;
</Grid>
<Grid item xs={12} md={mdSize}>
<DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='Number of files' value={item.fileCount} />
+ label='Number of files' value={<span data-cy='collection-file-count'>{item.fileCount}</span>} />
</Grid>
<Grid item xs={12} md={mdSize}>
<DetailsAttribute classLabel={classes.label} classValue={classes.value}
<DetailsAttribute classLabel={classes.label} classValue={classes.value}
label='Storage classes' value={item.storageClassesDesired.join(', ')} />
</Grid>
- <Grid item xs={12} md={mdSize}>
+
+ {/*
+ NOTE: The property list should be kept at the bottom, because it spans
+ the entire available width, without regards of the twoCol prop.
+ */}
+ <Grid item xs={12} md={12}>
<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>
+ label='Properties' />
{ Object.keys(item.properties).length > 0
? Object.keys(item.properties).map(k =>
Array.isArray(item.properties[k])
: <div className={classes.value}>No properties</div> }
</Grid>
</Grid>;
-});
+};