djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix small issues

Browse source
This commit is contained in:
Krzysztof Bialoglowicz 2019-10-11 15:35:33 +02:00
parent 83cd51e001
commit c8dbe00db4
14 changed files with 346 additions and 405 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/configuration/index.tsx
View file

@ -166,7 +166,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
},
{
description: intl.formatMessage({
defaultMessage: "View and update your site settings"
defaultMessage: "View and update your webhook and their settings"
}),
icon: <Webhooks fontSize="inherit" viewBox="0 0 44 44" />,
permission: PermissionEnum.MANAGE_WEBHOOKS,

13
src/webhooks/components/WebhookCreatePage/WebhookCreatePage.tsx
View file

@ -10,12 +10,11 @@ import { sectionNames } from "@saleor/intl";
import { maybe } from "@saleor/misc";
import { UserError } from "@saleor/types";
import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
import WebhookEvents from "@saleor/webhooks/components/WebhookEvents";
import WebhookInfo from "@saleor/webhooks/components/WebhookInfo";
import WebhookStatus from "@saleor/webhooks/components/WebhookStatus";
import React from "react";
import { useIntl } from "react-intl";
import { ServiceList_serviceAccounts_edges_node } from "../../types/ServiceList";
import WebhookEvents from "../WebhookEvents";
import WebhookInfo from "../WebhookInfo";
import WebhookStatus from "../WebhookStatus";
export interface FormData {
id: string;
@ -59,8 +58,7 @@ const WebhookCreatePage: React.StatelessComponent<WebhookCreatePageProps> = ({
return (
<Form errors={errors} initial={initialForm} onSubmit={onSubmit}>
{({ data, errors, hasChanged, submit, change }) => {
return (
{({ data, errors, hasChanged, submit, change }) => (
<Container>
<AppHeader onBack={onBack}>
{intl.formatMessage(sectionNames.plugins)}
@ -102,8 +100,7 @@ const WebhookCreatePage: React.StatelessComponent<WebhookCreatePageProps> = ({
onSave={submit}
/>
</Container>
);
}}
)}
</Form>
);
};

2
src/webhooks/components/WebhookCreatePage/WebhooksCreatePage.stories.tsx
View file

@ -13,7 +13,7 @@ const props: WebhookCreatePageProps = {
saveButtonBarState: "default",
services: []
};
storiesOf("Views / Services / Create service", module)
storiesOf("Views / Webhook / Create webhook", module)
.addDecorator(Decorator)
.add("default", () => <WebhookCreatePage {...props} />)
.add("loading", () => <WebhookCreatePage {...props} disabled={true} />)

17
src/webhooks/components/WebhookEvents/WebhookEvents.tsx
View file

@ -4,9 +4,10 @@ import Typography from "@material-ui/core/Typography";
import CardTitle from "@saleor/components/CardTitle";
import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import Hr from "@saleor/components/Hr";
import { ChangeEvent } from "@saleor/hooks/useForm";
import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
import React from "react";
import { useIntl } from "react-intl";
import { WebhookEventTypeEnum } from "../../../types/globalTypes";
interface WebhookEventsProps {
data: {
@ -25,16 +26,14 @@ const WebhookEvents: React.StatelessComponent<WebhookEventsProps> = ({
const intl = useIntl();
const eventsEnum = Object.values(WebhookEventTypeEnum);
const handleAllEventsChange = (event: React.ChangeEvent<any>) =>
onChange(event, () =>
const handleAllEventsChange = () =>
onChange({
target: {
name: "events",
value: WebhookEventTypeEnum.ALL_EVENTS
}
} as any)
);
const handleEventsChange = (event: React.ChangeEvent<any>) => {
} as any);
const handleEventsChange = (event: ChangeEvent) => {
onChange({
target: {
name: "events",
@ -73,10 +72,9 @@ const WebhookEvents: React.StatelessComponent<WebhookEventsProps> = ({
/>
<Hr />
{!data.allEvents &&
eventsEnum.map((event, index) => {
if (index !== 0) {
eventsEnum.slice(1).map(event => {
return (
<div key={index}>
<div key={event}>
<ControlledCheckbox
checked={data.events.includes(event)}
disabled={disabled}
@ -86,7 +84,6 @@ const WebhookEvents: React.StatelessComponent<WebhookEventsProps> = ({
/>
</div>
);
}
})}
</CardContent>
</Card>

26
src/webhooks/components/WebhookInfo/WebhookInfo.tsx
View file

@ -10,6 +10,8 @@ import CardTitle from "@saleor/components/CardTitle";
import FormSpacer from "@saleor/components/FormSpacer";
import Hr from "@saleor/components/Hr";
import SingleSelectField from "@saleor/components/SingleSelectField";
import { SingleAutocompleteSelectField } from "@saleor/components/SingleAutocompleteSelectField";
import { commonMessages } from "@saleor/intl";
import { FormErrors } from "@saleor/types";
import { FormData } from "../WebhooksDetailsPage";
@ -54,10 +56,7 @@ const WebhookInfo: React.StatelessComponent<WebhookInfoProps> = ({
/>
<CardContent>
<Typography className={classes.title}>
{intl.formatMessage({
defaultMessage: "General Information",
description: "webhook general information"
})}
{intl.formatMessage(commonMessages.generalInformations)}
</Typography>
<TextField
disabled={disabled}
@ -81,17 +80,22 @@ const WebhookInfo: React.StatelessComponent<WebhookInfoProps> = ({
description: "webhook specific information"
})}
</Typography>
<SingleSelectField
<SingleAutocompleteSelectField
disabled={disabled}
displayValue={data.serviceAccount}
label={intl.formatMessage({
defaultMessage: "Assign to Service Account"
})}
name="serviceAccount"
onChange={onChange}
value={data.serviceAccount}
choices={services.map(service => ({
label: service.name,
value: service.id
}))}
name="serviceAccount"
value={data.serviceAccount}
label={intl.formatMessage({
defaultMessage: "Assign to Service Account"
})}
onChange={onChange}
InputProps={{
autoComplete: "off"
}}
/>
<FormSpacer />
<TextField

5
src/webhooks/components/WebhookStatus/WebhookStatus.tsx
View file

@ -3,6 +3,7 @@ import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import CardTitle from "@saleor/components/CardTitle";
import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import { FormChange } from "@saleor/hooks/useForm";
import React from "react";
import { useIntl } from "react-intl";
@ -11,10 +12,10 @@ import { FormData } from "../WebhooksDetailsPage";
interface WebhookStatusProps {
data: FormData;
disabled: boolean;
onChange: (event: React.ChangeEvent<any>) => void;
onChange: (event: FormChange) => void;
}
const WebhookStatus: React.StatelessComponent<WebhookStatusProps> = ({
const WebhookStatus: React.FC<WebhookStatusProps> = ({
data,
disabled,
onChange

2
src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.stories.tsx
View file

@ -16,7 +16,7 @@ const props: WebhooksDetailsPageProps = {
saveButtonBarState: "default",
services: []
};
storiesOf("Views / Services / Service details", module)
storiesOf("Views / Webhook / Webhook details", module)
.addDecorator(Decorator)
.add("default", () => <WebhooksDetailsPage {...props} />)
.add("loading", () => (

27
src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx
View file

@ -10,13 +10,13 @@ import { sectionNames } from "@saleor/intl";
import { maybe } from "@saleor/misc";
import { UserError } from "@saleor/types";
import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
import WebhookEvents from "@saleor/webhooks/components/WebhookEvents";
import WebhookInfo from "@saleor/webhooks/components/WebhookInfo";
import WebhookStatus from "@saleor/webhooks/components/WebhookStatus";
import { ServiceList_serviceAccounts_edges_node } from "@saleor/webhooks/types/ServiceList";
import { Webhook_webhook } from "@saleor/webhooks/types/Webhook";
import React from "react";
import { useIntl } from "react-intl";
import { ServiceList_serviceAccounts_edges_node } from "../../types/ServiceList";
import { Webhook_webhook } from "../../types/Webhook";
import WebhookEvents from "../WebhookEvents";
import WebhookInfo from "../WebhookInfo";
import WebhookStatus from "../WebhookStatus";
export interface FormData {
id: string;
@ -54,11 +54,8 @@ const WebhooksDetailsPage: React.StatelessComponent<
}) => {
const intl = useIntl();
const initialForm: FormData = {
allEvents: maybe(
() =>
maybe(() => webhook.events, [])[0].eventType ===
WebhookEventTypeEnum.ALL_EVENTS,
false
allEvents: !!maybe(() => webhook.events, []).find(
event => event.eventType === WebhookEventTypeEnum.ALL_EVENTS
),
events: maybe(() => webhook.events, []).map(event => event.eventType),
id: maybe(() => webhook.id, null),
@ -70,8 +67,7 @@ const WebhooksDetailsPage: React.StatelessComponent<
};
return (
<Form errors={errors} initial={initialForm} onSubmit={onSubmit}>
{({ data, errors, hasChanged, submit, change }) => {
return (
{({ data, errors, hasChanged, submit, change }) => (
<Container>
<AppHeader onBack={onBack}>
{intl.formatMessage(sectionNames.plugins)}
@ -79,11 +75,11 @@ const WebhooksDetailsPage: React.StatelessComponent<
<PageHeader
title={intl.formatMessage(
{
defaultMessage: "{pluginName} Details",
defaultMessage: "{webhookName} Details",
description: "header"
},
{
pluginName: maybe(() => webhook.name, "...")
webhookName: maybe(() => webhook.name, "...")
}
)}
/>
@ -119,8 +115,7 @@ const WebhooksDetailsPage: React.StatelessComponent<
onDelete={onDelete}
/>
</Container>
);
}}
)}
</Form>
);
};

37
src/webhooks/components/WebhooksList/WebhooksList.tsx
View file

@ -1,11 +1,6 @@
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 { Theme } 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";
@ -14,6 +9,7 @@ import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import DeleteIcon from "@material-ui/icons/Delete";
import EditIcon from "@material-ui/icons/Edit";
import makeStyles from "@material-ui/styles/makeStyles";
import React from "react";
import { useIntl } from "react-intl";
@ -28,8 +24,7 @@ export interface WebhooksListProps extends ListProps {
onRemove: (id: string) => void;
}
const styles = (theme: Theme) =>
createStyles({
const useStyles = makeStyles((theme: Theme) => ({
[theme.breakpoints.up("lg")]: {
colAction: {
"& svg": {
@ -43,16 +38,14 @@ const styles = (theme: Theme) =>
colAction: {},
colActive: {},
colName: {},
link: {
tableRow: {
cursor: "pointer"
}
});
}));
const numberOfColumns = 4;
const WebhooksList = withStyles(styles, { name: "PluginList" })(
({
classes,
const WebhooksList: React.FC<WebhooksListProps> = ({
settings,
webhooks,
disabled,
@ -62,8 +55,9 @@ const WebhooksList = withStyles(styles, { name: "PluginList" })(
onRemove,
onUpdateListSettings,
onPreviousPage
}: WebhooksListProps & WithStyles<typeof styles>) => {
}) => {
const intl = useIntl();
const classes = useStyles({});
return (
<Card>
<Table>
@ -94,9 +88,7 @@ const WebhooksList = withStyles(styles, { name: "PluginList" })(
<TablePagination
colSpan={numberOfColumns}
settings={settings}
hasNextPage={
pageInfo && !disabled ? pageInfo.hasNextPage : false
}
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
onNextPage={onNextPage}
onUpdateListSettings={onUpdateListSettings}
hasPreviousPage={
@ -109,11 +101,10 @@ const WebhooksList = withStyles(styles, { name: "PluginList" })(
<TableBody>
{renderCollection(
webhooks,
webhook => {
return (
webhook => (
<TableRow
hover={!!webhook}
className={!!webhook ? classes.link : undefined}
className={!!webhook ? classes.tableRow : undefined}
onClick={webhook ? onRowClick(webhook.id) : undefined}
key={webhook ? webhook.id : "skeleton"}
>
@ -145,8 +136,7 @@ const WebhooksList = withStyles(styles, { name: "PluginList" })(
</IconButton>
</TableCell>
</TableRow>
);
},
),
() => (
<TableRow>
<TableCell colSpan={numberOfColumns}>
@ -161,7 +151,6 @@ const WebhooksList = withStyles(styles, { name: "PluginList" })(
</Table>
</Card>
);
}
);
};
WebhooksList.displayName = "WebhooksList";
export default WebhooksList;

2
src/webhooks/components/WebhooksListPage/WebhookListPage.stories.tsx
View file

@ -21,7 +21,7 @@ const props: WebhooksListPageProps = {
webhooks: webhookList
};
storiesOf("Views / Services / Service list", module)
storiesOf("Views / Webhook / Webhook list", module)
.addDecorator(Decorator)
.add("default", () => <WebhooksListPage {...props} />)
.add("loading", () => (

39
src/webhooks/queries.ts
View file

@ -1,18 +1,9 @@
import gql from "graphql-tag";
import { TypedQuery } from "../queries";
import { ServiceList, ServiceListVariables } from "./types/ServiceList";
import { Webhook, WebhookVariables } from "./types/Webhook";
import { Webhooks, WebhooksVariables } from "./types/Webhooks";
export const serviceFragment = gql`
fragment ServiceFragment on ServiceAccount {
id
name
isActive
}
`;
export const webhooksFragment = gql`
fragment WebhookFragment on Webhook {
id
@ -59,37 +50,9 @@ export const TypedWebhooksListQuery = TypedQuery<Webhooks, WebhooksVariables>(
webhooksList
);
const serviceList = gql`
${serviceFragment}
query ServiceList($first: Int, $after: String, $last: Int, $before: String) {
serviceAccounts(
first: $first
after: $after
before: $before
last: $last
) {
edges {
node {
...ServiceFragment
}
}
pageInfo {
hasPreviousPage
hasNextPage
startCursor
endCursor
}
}
}
`;
export const TypedServiceListQuery = TypedQuery<
ServiceList,
ServiceListVariables
>(serviceList);
const webhooksDetails = gql`
${webhooksFragment}
query Webhook($id: ID!) {
query WebhookDetails($id: ID!) {
webhook(id: $id) {
...WebhookFragment
}

3
src/webhooks/types/ServiceList.ts
View file

@ -2,8 +2,6 @@
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { ServiceAccountFilterInput } from "./../../types/globalTypes";
// ====================================================
// GraphQL query operation: ServiceList
// ====================================================
@ -43,5 +41,4 @@ export interface ServiceListVariables {
after?: string | null;
last?: number | null;
before?: string | null;
filter?: ServiceAccountFilterInput | null;
}

10
src/webhooks/views/WebhooksCreate.tsx
View file

@ -10,7 +10,6 @@ import { useIntl } from "react-intl";
import { getMutationState, maybe } from "../../misc";
import WebhookCreatePage, { FormData } from "../components/WebhookCreatePage";
import { TypedWebhookCreate } from "../mutations";
import { TypedServiceListQuery } from "../queries";
import {
webhooksListUrl,
WebhooksListUrlQueryParams,
@ -43,7 +42,7 @@ export const WebhooksCreate: React.StatelessComponent<
return (
<TypedWebhookCreate onCompleted={onSubmit}>
{(WebhookCreate, webhookCreateOpts) => {
const handleSubmit = (data: FormData) => {
const handleSubmit = (data: FormData) =>
WebhookCreate({
variables: {
input: {
@ -58,7 +57,6 @@ export const WebhooksCreate: React.StatelessComponent<
}
}
});
};
const formTransitionState = getMutationState(
webhookCreateOpts.called,
@ -66,9 +64,6 @@ export const WebhooksCreate: React.StatelessComponent<
maybe(() => webhookCreateOpts.data.webhookCreate.errors)
);
return (
<TypedServiceListQuery displayLoader variables={{ first: 99 }}>
{({ data }) => {
return (
<>
<WindowTitle
@ -93,9 +88,6 @@ export const WebhooksCreate: React.StatelessComponent<
</>
);
}}
</TypedServiceListQuery>
);
}}
</TypedWebhookCreate>
);
};

18
src/webhooks/views/WebhooksDetails.tsx
View file

@ -5,13 +5,14 @@ import { commonMessages } from "@saleor/intl";
import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
import WebhookDeleteDialog from "@saleor/webhooks/components/WebhookDeleteDialog";
import { WebhookDelete } from "@saleor/webhooks/types/WebhookDelete";
import { WebhookUpdate } from "@saleor/webhooks/types/WebhookUpdate";
import React from "react";
import { useIntl } from "react-intl";
import { getMutationState, maybe } from "../../misc";
import WebhooksDetailsPage from "../components/WebhooksDetailsPage";
import { TypedWebhookDelete, TypedWebhookUpdate } from "../mutations";
import { TypedServiceListQuery, TypedWebhooksDetailsQuery } from "../queries";
import { TypedWebhooksDetailsQuery } from "../queries";
import {
webhooksListUrl,
WebhooksListUrlQueryParams,
@ -59,8 +60,17 @@ export const WebhooksDetails: React.StatelessComponent<
}
};
const onWebhookUpdate = (data: WebhookUpdate) => {
if (data.webhookUpdate.errors.length === 0) {
notify({
text: intl.formatMessage(commonMessages.savedChanges)
});
navigate(webhooksUrl(data.webhookUpdate.webhook.id));
}
};
return (
<TypedWebhookUpdate>
<TypedWebhookUpdate onCompleted={onWebhookUpdate}>
{(webhookUpdate, webhookUpdateOpts) => (
<TypedWebhookDelete onCompleted={onWebhookDelete}>
{(webhookDelete, webhookDeleteOpts) => (
@ -91,8 +101,6 @@ export const WebhooksDetails: React.StatelessComponent<
);
return (
<TypedServiceListQuery variables={{ first: 99 }}>
{({ data }) => (
<>
<WindowTitle
title={maybe(() => WebhookDetails.data.webhook.name)}
@ -136,8 +144,6 @@ export const WebhooksDetails: React.StatelessComponent<
open={params.action === "remove"}
/>
</>
)}
</TypedServiceListQuery>
);
}}
</TypedWebhooksDetailsQuery>