saleor-dashboard/src/webhooks/components/WebhooksList/WebhooksList.tsx
Krzysztof Bialoglowicz 834addf3c0 Add webhook delete
2019-10-10 07:38:21 +02:00

162 lines
5.1 KiB
TypeScript

import Card from "@material-ui/core/Card";
import IconButton from "@material-ui/core/IconButton";
import {
createStyles,
Theme,
withStyles,
WithStyles
} from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import EditIcon from "@material-ui/icons/Edit";
import DeleteIcon from "@material-ui/icons/Delete";
import React from "react";
import { useIntl } from "react-intl";
import Skeleton from "@saleor/components/Skeleton";
import TablePagination from "@saleor/components/TablePagination";
import { maybe, renderCollection } from "@saleor/misc";
import { ListProps } from "@saleor/types";
import { Webhooks_webhooks_edges_node } from "../../types/Webhooks";
export interface WebhooksListProps extends ListProps {
webhooks: Webhooks_webhooks_edges_node[];
onRemove: (id: string) => void;
}
const styles = (theme: Theme) =>
createStyles({
[theme.breakpoints.up("lg")]: {
colAction: {
"& svg": {
color: theme.palette.primary.main
},
textAlign: "right"
},
colActive: {},
colName: {}
},
colAction: {},
colActive: {},
colName: {},
link: {
cursor: "pointer"
}
});
const numberOfColumns = 4;
const WebhooksList = withStyles(styles, { name: "PluginList" })(
({
classes,
settings,
webhooks,
disabled,
onNextPage,
pageInfo,
onRowClick,
onRemove,
onUpdateListSettings,
onPreviousPage
}: WebhooksListProps & WithStyles<typeof styles>) => {
const intl = useIntl();
return (
<Card>
<Table>
<TableHead>
<TableCell className={classes.colName} padding="dense">
{intl.formatMessage({
defaultMessage: "Name",
description: "webhook name"
})}
</TableCell>
<TableCell className={classes.colActive} padding="dense">
{intl.formatMessage({
defaultMessage: "Service Account",
description: "webhook service account"
})}
</TableCell>
<TableCell className={classes.colAction} padding="dense">
{intl.formatMessage({
defaultMessage: "Action",
description: "user action bar"
})}
</TableCell>
</TableHead>
<TableFooter>
<TableRow>
<TablePagination
colSpan={numberOfColumns}
settings={settings}
hasNextPage={
pageInfo && !disabled ? pageInfo.hasNextPage : false
}
onNextPage={onNextPage}
onUpdateListSettings={onUpdateListSettings}
hasPreviousPage={
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
}
onPreviousPage={onPreviousPage}
/>
</TableRow>
</TableFooter>
<TableBody>
{renderCollection(
webhooks,
webhook => {
return (
<TableRow
hover={!!webhook}
className={!!webhook ? classes.link : undefined}
onClick={webhook ? onRowClick(webhook.id) : undefined}
key={webhook ? webhook.id : "skeleton"}
>
<TableCell className={classes.colName}>
{maybe<React.ReactNode>(() => webhook.name, <Skeleton />)}
</TableCell>
<TableCell className={classes.colActive}>
{maybe<React.ReactNode>(
() => webhook.serviceAccount.name,
<Skeleton />
)}
</TableCell>
<TableCell className={classes.colAction}>
<div
onClick={webhook ? onRowClick(webhook.id) : undefined}
>
<EditIcon />
</div>
<IconButton
color="primary"
onClick={
webhook ? () => onRemove(webhook.id) : undefined
}
>
<DeleteIcon />
</IconButton>
</TableCell>
</TableRow>
);
},
() => (
<TableRow>
<TableCell colSpan={numberOfColumns}>
{intl.formatMessage({
defaultMessage: "No webhooks found"
})}
</TableCell>
</TableRow>
)
)}
</TableBody>
</Table>
</Card>
);
}
);
WebhooksList.displayName = "WebhooksList";
export default WebhooksList;