import React from 'react';
import {
- StyleRulesCallback, WithStyles, withStyles, Card, CardContent, Grid, Tooltip, IconButton
+ StyleRulesCallback, WithStyles, withStyles
} from '@material-ui/core';
import { ArvadosTheme } from 'common/custom-theme';
-import { HelpIcon, ShareMeIcon } from 'components/icon/icon';
+import { ShareMeIcon } from 'components/icon/icon';
import { createTree } from 'models/tree';
import { DataColumns } from 'components/data-table/data-table';
import { SortDirection } from 'components/data-table/data-column';
-import { DataTableDefaultView } from 'components/data-table-default-view/data-table-default-view';
import { API_CLIENT_AUTHORIZATION_PANEL_ID } from '../../store/api-client-authorizations/api-client-authorizations-actions';
import { DataExplorer } from 'views-components/data-explorer/data-explorer';
import { ResourcesState } from 'store/resources/resources';
CommonUuid, TokenApiClientId, TokenApiToken, TokenCreatedByIpAddress, TokenDefaultOwnerUuid, TokenExpiresAt,
TokenLastUsedAt, TokenLastUsedByIpAddress, TokenScopes, TokenUserId
} from 'views-components/data-explorer/renderers';
+import { ApiClientAuthorization } from 'models/api-client-authorization';
-type CssRules = 'card' | 'cardContent' | 'helpIconGrid';
+type CssRules = 'root';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
- card: {
+ root: {
width: '100%',
- overflow: 'auto'
- },
- cardContent: {
- padding: 0,
- '&:last-child': {
- paddingBottom: 0
- }
- },
- helpIconGrid: {
- textAlign: 'right'
}
});
USER_ID = 'User ID'
}
-export const apiClientAuthorizationPanelColumns: DataColumns<string> = [
+export const apiClientAuthorizationPanelColumns: DataColumns<string, ApiClientAuthorization> = [
{
name: ApiClientAuthorizationPanelColumnNames.UUID,
selected: true,
configurable: true,
- sortDirection: SortDirection.NONE,
+ sort: {direction: SortDirection.NONE, field: "uuid"},
filters: createTree(),
render: uuid => <CommonUuid uuid={uuid} />
},
onItemClick: (item: string) => void;
onContextMenu: (event: React.MouseEvent<HTMLElement>, item: string) => void;
onItemDoubleClick: (item: string) => void;
- openHelpDialog: () => void;
}
export interface ApiClientAuthorizationPanelRootDataProps {
& ApiClientAuthorizationPanelRootDataProps & WithStyles<CssRules>;
export const ApiClientAuthorizationPanelRoot = withStyles(styles)(
- ({ classes, onItemDoubleClick, onItemClick, onContextMenu, openHelpDialog }: ApiClientAuthorizationPanelRootProps) =>
- <Card className={classes.card}>
- <CardContent className={classes.cardContent}>
- <Grid container direction="row" justify="flex-end">
- <Grid item xs={12} className={classes.helpIconGrid}>
- <Tooltip title="Api token - help">
- <IconButton onClick={openHelpDialog}>
- <HelpIcon />
- </IconButton>
- </Tooltip>
- </Grid>
- <Grid item xs={12}>
- <DataExplorer
- id={API_CLIENT_AUTHORIZATION_PANEL_ID}
- onRowClick={onItemClick}
- onRowDoubleClick={onItemDoubleClick}
- onContextMenu={onContextMenu}
- contextMenuColumn={true}
- hideColumnSelector
- hideSearchInput
- dataTableDefaultView={
- <DataTableDefaultView
- icon={ShareMeIcon}
- messages={[DEFAULT_MESSAGE]} />
- } />
- </Grid>
- </Grid>
- </CardContent>
- </Card>
-);
\ No newline at end of file
+ ({ classes, onItemDoubleClick, onItemClick, onContextMenu }: ApiClientAuthorizationPanelRootProps) =>
+ <div className={classes.root}><DataExplorer
+ id={API_CLIENT_AUTHORIZATION_PANEL_ID}
+ onRowClick={onItemClick}
+ onRowDoubleClick={onItemDoubleClick}
+ onContextMenu={onContextMenu}
+ contextMenuColumn={true}
+ hideColumnSelector
+ hideSearchInput
+ defaultViewIcon={ShareMeIcon}
+ defaultViewMessages={[DEFAULT_MESSAGE]} />
+ </div>
+);