in src/platform/plugins/shared/saved_objects_management/public/management_section/objects_table/components/table.tsx [183:512]
render() {
const {
pageIndex,
pageSize,
sort,
itemId,
items,
totalItemCount,
isSearching,
filterOptions,
selectionConfig: selection,
capabilities,
onDelete,
onActionRefresh,
selectedSavedObjects,
onTableChange,
goInspectObject,
onShowRelationships,
basePath,
actionRegistry,
columnRegistry,
taggingApi,
allowedTypes,
} = this.props;
const cappedTotalItemCount = Math.min(totalItemCount, MAX_PAGINATED_ITEM);
const pagination = {
pageIndex,
pageSize,
totalItemCount: cappedTotalItemCount,
pageSizeOptions: [5, 10, 20, 50],
};
const filters = [
{
type: 'field_value_selection',
field: 'type',
name: i18n.translate('savedObjectsManagement.objectsTable.table.typeFilterName', {
defaultMessage: 'Type',
}),
multiSelect: 'or',
options: filterOptions,
},
...(taggingApi ? [taggingApi.ui.getSearchBarFilter({ useName: true })] : []),
];
const columns = [
{
field: 'type',
name: i18n.translate('savedObjectsManagement.objectsTable.table.columnTypeName', {
defaultMessage: 'Type',
}),
width: '65px',
align: 'center',
description: i18n.translate(
'savedObjectsManagement.objectsTable.table.columnTypeDescription',
{ defaultMessage: 'Type of the saved object' }
),
sortable: true,
'data-test-subj': 'savedObjectsTableRowType',
render: (type: string, object: SavedObjectWithMetadata) => {
const typeLabel = getSavedObjectLabel(type, allowedTypes);
return (
<EuiIconTip
aria-label={typeLabel}
type={object.meta.icon || 'apps'}
size="s"
content={typeLabel}
iconProps={{ 'data-test-subj': 'objectType' }}
/>
);
},
} as EuiTableFieldDataColumnType<SavedObjectWithMetadata<any>>,
{
field: 'meta.title',
name: i18n.translate('savedObjectsManagement.objectsTable.table.columnTitleName', {
defaultMessage: 'Title',
}),
description: i18n.translate(
'savedObjectsManagement.objectsTable.table.columnTitleDescription',
{ defaultMessage: 'Title of the saved object' }
),
dataType: 'string',
sortable: false,
'data-test-subj': 'savedObjectsTableRowTitle',
render: (title: string, object: SavedObjectWithMetadata) => {
const { path = '' } = object.meta.inAppUrl || {};
const canGoInApp = this.props.canGoInApp(object);
if (!canGoInApp) {
return <EuiText size="s">{title || getDefaultTitle(object)}</EuiText>;
}
return (
<EuiLink href={basePath.prepend(path)}>{title || getDefaultTitle(object)}</EuiLink>
);
},
} as EuiTableFieldDataColumnType<SavedObjectWithMetadata<any>>,
...(taggingApi ? [taggingApi.ui.getTableColumnDefinition({ serverPaging: true })] : []),
...columnRegistry.getAll().map((column) => {
column.setColumnContext({ capabilities });
column.registerOnFinishCallback(() => {
const { refreshOnFinish = () => [] } = column;
const objectsToRefresh = refreshOnFinish();
onActionRefresh(objectsToRefresh);
});
return {
...column.euiColumn,
sortable: false,
'data-test-subj': `savedObjectsTableColumn-${column.id}`,
};
}),
this.getUpdatedAtColumn(),
{
name: i18n.translate('savedObjectsManagement.objectsTable.table.columnActionsName', {
defaultMessage: 'Actions',
}),
width: '80px',
actions: [
{
name: i18n.translate(
'savedObjectsManagement.objectsTable.table.columnActions.inspectActionName',
{ defaultMessage: 'Inspect' }
),
description: i18n.translate(
'savedObjectsManagement.objectsTable.table.columnActions.inspectActionDescription',
{ defaultMessage: 'Inspect this saved object' }
),
type: 'icon',
icon: 'inspect',
onClick: (object) => goInspectObject(object),
'data-test-subj': 'savedObjectsTableAction-inspect',
},
{
name: i18n.translate(
'savedObjectsManagement.objectsTable.table.columnActions.viewRelationshipsActionName',
{ defaultMessage: 'Relationships' }
),
description: i18n.translate(
'savedObjectsManagement.objectsTable.table.columnActions.viewRelationshipsActionDescription',
{
defaultMessage:
'View the relationships this saved object has to other saved objects',
}
),
type: 'icon',
icon: 'kqlSelector',
onClick: (object) => onShowRelationships(object),
'data-test-subj': 'savedObjectsTableAction-relationships',
},
...actionRegistry.getAll().map((action) => {
action.setActionContext({ capabilities });
return {
...action.euiAction,
'data-test-subj': `savedObjectsTableAction-${action.id}`,
onClick: (object: SavedObjectWithMetadata) => {
this.setState({
activeAction: action,
});
action.registerOnFinishCallback(() => {
this.setState({
activeAction: undefined,
});
const { refreshOnFinish = () => [] } = action;
const objectsToRefresh = refreshOnFinish();
onActionRefresh(objectsToRefresh);
});
if (action.euiAction.onClick) {
action.euiAction.onClick(object as any);
}
},
};
}),
],
} as EuiTableActionsColumnType<SavedObjectWithMetadata>,
];
let queryParseError;
if (!this.state.isSearchTextValid) {
const parseErrorMsg = i18n.translate(
'savedObjectsManagement.objectsTable.searchBar.unableToParseQueryErrorMessage',
{ defaultMessage: 'Unable to parse query' }
);
queryParseError = (
<EuiFormErrorText>{`${parseErrorMsg}. ${this.state.parseErrorMessage}`}</EuiFormErrorText>
);
}
const button = (
<EuiButton
iconType="arrowDown"
iconSide="right"
onClick={this.toggleExportPopoverVisibility}
isDisabled={selectedSavedObjects.length === 0}
>
<FormattedMessage
id="savedObjectsManagement.objectsTable.table.exportPopoverButtonLabel"
defaultMessage="Export"
/>
</EuiButton>
);
const activeActionContents = this.state.activeAction?.render() ?? null;
const exceededResultCount = totalItemCount > MAX_PAGINATED_ITEM;
const anySelected = selectedSavedObjects.length > 0;
const allHidden =
anySelected && selectedSavedObjects.every(({ meta: { hiddenType } }) => hiddenType);
return (
<Fragment>
{activeActionContents}
<EuiSearchBar
box={{
'data-test-subj': 'savedObjectSearchBar',
schema: {
recognizedFields: ['type', 'tag'],
},
}}
filters={filters as any}
onChange={this.onChange}
defaultQuery={this.props.initialQuery}
toolsRight={[
<EuiToolTip
data-test-subj="deleteSOToolTip"
key="deleteSOToolTip"
content={
allHidden ? (
<FormattedMessage
id="savedObjectsManagement.objectsTable.table.deleteDisabledTooltip"
defaultMessage="Selected objects can’t be deleted because they are hidden objects."
/>
) : undefined
}
>
<EuiButton
key="deleteSO"
iconType="trash"
color="danger"
onClick={onDelete}
isDisabled={
!anySelected || allHidden || !capabilities.savedObjectsManagement.delete
}
title={
capabilities.savedObjectsManagement.delete
? undefined
: i18n.translate(
'savedObjectsManagement.objectsTable.table.deleteButtonTitle',
{
defaultMessage: 'Unable to delete saved objects',
}
)
}
data-test-subj="savedObjectsManagementDelete"
>
<FormattedMessage
id="savedObjectsManagement.objectsTable.table.deleteButtonLabel"
defaultMessage="Delete"
/>
</EuiButton>
</EuiToolTip>,
<EuiPopover
key="exportSOOptions"
button={button}
isOpen={this.state.isExportPopoverOpen}
closePopover={this.closeExportPopover}
>
<EuiFormRow
label={
<FormattedMessage
id="savedObjectsManagement.objectsTable.exportObjectsConfirmModal.exportOptionsLabel"
defaultMessage="Options"
/>
}
>
<EuiSwitch
name="includeReferencesDeep"
label={
<FormattedMessage
id="savedObjectsManagement.objectsTable.exportObjectsConfirmModal.includeReferencesDeepLabel"
defaultMessage="Include related objects"
/>
}
checked={this.state.isIncludeReferencesDeepChecked}
onChange={this.toggleIsIncludeReferencesDeepChecked}
/>
</EuiFormRow>
<EuiFormRow>
<EuiButton key="exportSO" iconType="exportAction" onClick={this.onExportClick} fill>
<FormattedMessage
id="savedObjectsManagement.objectsTable.table.exportButtonLabel"
defaultMessage="Export"
/>
</EuiButton>
</EuiFormRow>
</EuiPopover>,
]}
/>
{queryParseError}
<EuiSpacer />
{exceededResultCount && (
<>
<EuiText color="subdued" size="s" data-test-subj="savedObjectsTableTooManyResultsLabel">
<FormattedMessage
id="savedObjectsManagement.objectsTable.table.tooManyResultsLabel"
defaultMessage="Showing {limit} of {totalItemCount, plural, one {# object} other {# objects}}"
values={{ totalItemCount, limit: MAX_PAGINATED_ITEM }}
/>
</EuiText>
<EuiSpacer size="s" />
</>
)}
<div data-test-subj="savedObjectsTable">
<EuiBasicTable
loading={isSearching}
itemId={itemId}
items={items}
columns={columns as any}
pagination={pagination}
sorting={{ sort }}
selection={selection}
onChange={onTableChange}
rowProps={(item) => ({
'data-test-subj': `savedObjectsTableRow row-${item.id}`,
})}
/>
</div>
</Fragment>
);
}