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

Use service account search hook

Browse source
This commit is contained in:
dominik-zeglen 2019-11-19 16:23:17 +01:00
parent 4daec82206
commit 0a7f65727a
7 changed files with 155 additions and 154 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/hooks/makeTopLevelSearch.ts
View file

@ -43,3 +43,5 @@ function makeTopLevelSearch<
}
});
}
export default makeTopLevelSearch;

0
src/containers/SearchServiceAccount/types/SearchServiceAccount.ts → src/searches/types/SearchServiceAccount.ts
View file

4
src/containers/SearchServiceAccount/index.tsx → src/searches/useServiceAccountSearch.ts
View file

@ -1,7 +1,7 @@
import gql from "graphql-tag";
import makeTopLevelSearch from "@saleor/hooks/makeTopLevelSearch";
import { pageInfoFragment } from "@saleor/queries";
import TopLevelSearch from "../TopLevelSearch";
import {
SearchServiceAccount,
SearchServiceAccountVariables
@ -28,7 +28,7 @@ export const searchServiceAccount = gql`
}
`;
export default TopLevelSearch<
export default makeTopLevelSearch<
SearchServiceAccount,
SearchServiceAccountVariables
>(searchServiceAccount);

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

@ -6,9 +6,9 @@ import FormSpacer from "@saleor/components/FormSpacer";
import Grid from "@saleor/components/Grid";
import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
import { SearchServiceAccount_search_edges_node } from "@saleor/containers/SearchServiceAccount/types/SearchServiceAccount";
import { sectionNames } from "@saleor/intl";
import { maybe } from "@saleor/misc";
import { SearchServiceAccount_search_edges_node } from "@saleor/searches/types/SearchServiceAccount";
import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
import WebhookEvents from "@saleor/webhooks/components/WebhookEvents";
@ -19,7 +19,6 @@ import React from "react";
import { useIntl } from "react-intl";
export interface FormData {
id: string;
events: WebhookEventTypeEnum[];
isActive: boolean;
name: string;
@ -52,9 +51,8 @@ const WebhookCreatePage: React.FC<WebhookCreatePageProps> = ({
const initialForm: FormData = {
allEvents: false,
events: [],
id: null,
isActive: false,
name: null,
name: "",
secretKey: "",
serviceAccount: "",
targetUrl: ""

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

@ -1,3 +1,6 @@
import React from "react";
import { useIntl } from "react-intl";
import AppHeader from "@saleor/components/AppHeader";
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
import Container from "@saleor/components/Container";
@ -6,10 +9,10 @@ import FormSpacer from "@saleor/components/FormSpacer";
import Grid from "@saleor/components/Grid";
import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
import { SearchServiceAccount_search_edges_node } from "@saleor/containers/SearchServiceAccount/types/SearchServiceAccount";
import useStateFromProps from "@saleor/hooks/useStateFromProps";
import { sectionNames } from "@saleor/intl";
import { maybe } from "@saleor/misc";
import { SearchServiceAccount_search_edges_node } from "@saleor/searches/types/SearchServiceAccount";
import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
import WebhookEvents from "@saleor/webhooks/components/WebhookEvents";
@ -18,11 +21,7 @@ import WebhookStatus from "@saleor/webhooks/components/WebhookStatus";
import { WebhookCreate_webhookCreate_webhookErrors } from "@saleor/webhooks/types/WebhookCreate";
import { WebhookDetails_webhook } from "@saleor/webhooks/types/WebhookDetails";
import React from "react";
import { useIntl } from "react-intl";
export interface FormData {
id: string;
events: WebhookEventTypeEnum[];
isActive: boolean;
name: string;
@ -63,7 +62,6 @@ const WebhooksDetailsPage: React.FC<WebhooksDetailsPageProps> = ({
events: maybe(() => webhook.events, [])
.map(event => event.eventType)
.filter(event => event !== WebhookEventTypeEnum.ANY_EVENTS),
id: maybe(() => webhook.id, null),
isActive: maybe(() => webhook.isActive, false),
name: maybe(() => webhook.name, ""),
secretKey: maybe(() => webhook.secretKey, ""),

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

@ -1,8 +1,8 @@
import { WindowTitle } from "@saleor/components/WindowTitle";
import SearchServiceAccount from "@saleor/containers/SearchServiceAccount";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import { commonMessages } from "@saleor/intl";
import useServiceAccountSearch from "@saleor/searches/useServiceAccountSearch";
import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
import { WebhookCreate as WebhookCreateData } from "@saleor/webhooks/types/WebhookCreate";
import React from "react";
@ -26,6 +26,12 @@ export const WebhooksCreate: React.FC<WebhooksCreateProps> = () => {
const navigate = useNavigator();
const notify = useNotifier();
const intl = useIntl();
const {
search: searchServiceAccount,
result: searchServiceAccountOpt
} = useServiceAccountSearch({
variables: DEFAULT_INITIAL_SEARCH_DATA
});
const onSubmit = (data: WebhookCreateData) => {
if (data.webhookCreate.webhookErrors.length === 0) {
@ -39,62 +45,56 @@ export const WebhooksCreate: React.FC<WebhooksCreateProps> = () => {
const handleBack = () => navigate(webhooksListUrl());
return (
<SearchServiceAccount variables={DEFAULT_INITIAL_SEARCH_DATA}>
{({ search: searchServiceAccount, result: searchServiceAccountOpt }) => (
<TypedWebhookCreate onCompleted={onSubmit}>
{(webhookCreate, webhookCreateOpts) => {
const handleSubmit = (data: FormData) =>
webhookCreate({
variables: {
input: {
events: data.allEvents
? [WebhookEventTypeEnum.ANY_EVENTS]
: data.events,
isActive: data.isActive,
name: data.name,
secretKey: data.secretKey,
serviceAccount: data.serviceAccount,
targetUrl: data.targetUrl
}
}
});
<TypedWebhookCreate onCompleted={onSubmit}>
{(webhookCreate, webhookCreateOpts) => {
const handleSubmit = (data: FormData) =>
webhookCreate({
variables: {
input: {
events: data.allEvents
? [WebhookEventTypeEnum.ANY_EVENTS]
: data.events,
isActive: data.isActive,
name: data.name,
secretKey: data.secretKey,
serviceAccount: data.serviceAccount,
targetUrl: data.targetUrl
}
}
});
const formTransitionState = getMutationState(
webhookCreateOpts.called,
webhookCreateOpts.loading,
maybe(() => webhookCreateOpts.data.webhookCreate.webhookErrors)
);
const formTransitionState = getMutationState(
webhookCreateOpts.called,
webhookCreateOpts.loading,
maybe(() => webhookCreateOpts.data.webhookCreate.webhookErrors)
);
return (
<>
<WindowTitle
title={intl.formatMessage({
defaultMessage: "Create Webhook",
description: "window title"
})}
/>
<WebhookCreatePage
disabled={false}
errors={maybe(
() => webhookCreateOpts.data.webhookCreate.webhookErrors,
[]
)}
fetchServiceAccounts={searchServiceAccount}
services={maybe(() =>
searchServiceAccountOpt.data.search.edges.map(
edge => edge.node
)
)}
onBack={handleBack}
onSubmit={handleSubmit}
saveButtonBarState={formTransitionState}
/>
</>
);
}}
</TypedWebhookCreate>
)}
</SearchServiceAccount>
return (
<>
<WindowTitle
title={intl.formatMessage({
defaultMessage: "Create Webhook",
description: "window title"
})}
/>
<WebhookCreatePage
disabled={false}
errors={maybe(
() => webhookCreateOpts.data.webhookCreate.webhookErrors,
[]
)}
fetchServiceAccounts={searchServiceAccount}
services={maybe(() =>
searchServiceAccountOpt.data.search.edges.map(edge => edge.node)
)}
onBack={handleBack}
onSubmit={handleSubmit}
saveButtonBarState={formTransitionState}
/>
</>
);
}}
</TypedWebhookCreate>
);
};
WebhooksCreate.displayName = "WebhooksCreate";

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

@ -1,14 +1,15 @@
import React from "react";
import { useIntl } from "react-intl";
import { WindowTitle } from "@saleor/components/WindowTitle";
import SearchServiceAccount from "@saleor/containers/SearchServiceAccount";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import { commonMessages } from "@saleor/intl";
import useServiceAccountSearch from "@saleor/searches/useServiceAccountSearch";
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 { DEFAULT_INITIAL_SEARCH_DATA } from "../../config";
import { getMutationState, maybe } from "../../misc";
import WebhooksDetailsPage from "../components/WebhooksDetailsPage";
@ -33,6 +34,12 @@ export const WebhooksDetails: React.FC<WebhooksDetailsProps> = ({
const navigate = useNavigator();
const notify = useNotifier();
const intl = useIntl();
const {
search: searchServiceAccount,
result: searchServiceAccountOpt
} = useServiceAccountSearch({
variables: DEFAULT_INITIAL_SEARCH_DATA
});
const closeModal = () =>
navigate(
@ -72,96 +79,92 @@ export const WebhooksDetails: React.FC<WebhooksDetailsProps> = ({
};
return (
<SearchServiceAccount variables={DEFAULT_INITIAL_SEARCH_DATA}>
{({ search: searchServiceAccount, result: searchServiceAccountOpt }) => (
<TypedWebhookUpdate onCompleted={onWebhookUpdate}>
{(webhookUpdate, webhookUpdateOpts) => (
<TypedWebhookDelete onCompleted={onWebhookDelete}>
{(webhookDelete, webhookDeleteOpts) => (
<TypedWebhooksDetailsQuery variables={{ id }}>
{webhookDetails => {
const formTransitionState = getMutationState(
webhookUpdateOpts.called,
webhookUpdateOpts.loading,
maybe(
() => webhookUpdateOpts.data.webhookUpdate.webhookErrors
)
);
<TypedWebhookUpdate onCompleted={onWebhookUpdate}>
{(webhookUpdate, webhookUpdateOpts) => (
<TypedWebhookDelete onCompleted={onWebhookDelete}>
{(webhookDelete, webhookDeleteOpts) => (
<TypedWebhooksDetailsQuery variables={{ id }}>
{webhookDetails => {
const formTransitionState = getMutationState(
webhookUpdateOpts.called,
webhookUpdateOpts.loading,
maybe(
() => webhookUpdateOpts.data.webhookUpdate.webhookErrors
)
);
const handleRemoveConfirm = () =>
webhookDelete({
variables: {
id
}
});
const handleRemoveConfirm = () =>
webhookDelete({
variables: {
id
}
});
const formErrors = maybe(
() => webhookUpdateOpts.data.webhookUpdate.webhookErrors,
[]
);
const formErrors = maybe(
() => webhookUpdateOpts.data.webhookUpdate.webhookErrors,
[]
);
const deleteTransitionState = getMutationState(
webhookDeleteOpts.called,
webhookDeleteOpts.loading,
maybe(() => webhookDeleteOpts.data.webhookDelete.errors)
);
const deleteTransitionState = getMutationState(
webhookDeleteOpts.called,
webhookDeleteOpts.loading,
maybe(() => webhookDeleteOpts.data.webhookDelete.errors)
);
return (
<>
<WindowTitle
title={maybe(() => webhookDetails.data.webhook.name)}
/>
<WebhooksDetailsPage
disabled={webhookDetails.loading}
errors={formErrors}
saveButtonBarState={formTransitionState}
webhook={maybe(() => webhookDetails.data.webhook)}
fetchServiceAccounts={searchServiceAccount}
services={maybe(() =>
searchServiceAccountOpt.data.search.edges.map(
edge => edge.node
)
)}
onBack={() => navigate(webhooksListUrl())}
onDelete={() => openModal("remove")}
onSubmit={data => {
webhookUpdate({
variables: {
id,
input: {
events: data.allEvents
? [WebhookEventTypeEnum.ANY_EVENTS]
: data.events,
isActive: data.isActive,
name: data.name,
secretKey: data.secretKey,
serviceAccount: data.serviceAccount,
targetUrl: data.targetUrl
}
}
});
}}
/>
<WebhookDeleteDialog
confirmButtonState={deleteTransitionState}
name={maybe(
() => webhookDetails.data.webhook.name,
"..."
)}
onClose={closeModal}
onConfirm={handleRemoveConfirm}
open={params.action === "remove"}
/>
</>
);
}}
</TypedWebhooksDetailsQuery>
)}
</TypedWebhookDelete>
return (
<>
<WindowTitle
title={maybe(() => webhookDetails.data.webhook.name)}
/>
<WebhooksDetailsPage
disabled={webhookDetails.loading}
errors={formErrors}
saveButtonBarState={formTransitionState}
webhook={maybe(() => webhookDetails.data.webhook)}
fetchServiceAccounts={searchServiceAccount}
services={maybe(() =>
searchServiceAccountOpt.data.search.edges.map(
edge => edge.node
)
)}
onBack={() => navigate(webhooksListUrl())}
onDelete={() => openModal("remove")}
onSubmit={data => {
webhookUpdate({
variables: {
id,
input: {
events: data.allEvents
? [WebhookEventTypeEnum.ANY_EVENTS]
: data.events,
isActive: data.isActive,
name: data.name,
secretKey: data.secretKey,
serviceAccount: data.serviceAccount,
targetUrl: data.targetUrl
}
}
});
}}
/>
<WebhookDeleteDialog
confirmButtonState={deleteTransitionState}
name={maybe(
() => webhookDetails.data.webhook.name,
"..."
)}
onClose={closeModal}
onConfirm={handleRemoveConfirm}
open={params.action === "remove"}
/>
</>
);
}}
</TypedWebhooksDetailsQuery>
)}
</TypedWebhookUpdate>
</TypedWebhookDelete>
)}
</SearchServiceAccount>
</TypedWebhookUpdate>
);
};
WebhooksDetails.displayName = "WebhooksDetails";