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 gql from "graphql-tag";
import makeTopLevelSearch from "@saleor/hooks/makeTopLevelSearch";
import { pageInfoFragment } from "@saleor/queries"; import { pageInfoFragment } from "@saleor/queries";
import TopLevelSearch from "../TopLevelSearch";
import { import {
SearchServiceAccount, SearchServiceAccount,
SearchServiceAccountVariables SearchServiceAccountVariables
@ -28,7 +28,7 @@ export const searchServiceAccount = gql`
} }
`; `;
export default TopLevelSearch< export default makeTopLevelSearch<
SearchServiceAccount, SearchServiceAccount,
SearchServiceAccountVariables SearchServiceAccountVariables
>(searchServiceAccount); >(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 Grid from "@saleor/components/Grid";
import PageHeader from "@saleor/components/PageHeader"; import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar"; import SaveButtonBar from "@saleor/components/SaveButtonBar";
import { SearchServiceAccount_search_edges_node } from "@saleor/containers/SearchServiceAccount/types/SearchServiceAccount";
import { sectionNames } from "@saleor/intl"; import { sectionNames } from "@saleor/intl";
import { maybe } from "@saleor/misc"; import { maybe } from "@saleor/misc";
import { SearchServiceAccount_search_edges_node } from "@saleor/searches/types/SearchServiceAccount";
import { WebhookEventTypeEnum } from "@saleor/types/globalTypes"; import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler"; import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
import WebhookEvents from "@saleor/webhooks/components/WebhookEvents"; import WebhookEvents from "@saleor/webhooks/components/WebhookEvents";
@ -19,7 +19,6 @@ import React from "react";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
export interface FormData { export interface FormData {
id: string;
events: WebhookEventTypeEnum[]; events: WebhookEventTypeEnum[];
isActive: boolean; isActive: boolean;
name: string; name: string;
@ -52,9 +51,8 @@ const WebhookCreatePage: React.FC<WebhookCreatePageProps> = ({
const initialForm: FormData = { const initialForm: FormData = {
allEvents: false, allEvents: false,
events: [], events: [],
id: null,
isActive: false, isActive: false,
name: null, name: "",
secretKey: "", secretKey: "",
serviceAccount: "", serviceAccount: "",
targetUrl: "" 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 AppHeader from "@saleor/components/AppHeader";
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
import Container from "@saleor/components/Container"; import Container from "@saleor/components/Container";
@ -6,10 +9,10 @@ import FormSpacer from "@saleor/components/FormSpacer";
import Grid from "@saleor/components/Grid"; import Grid from "@saleor/components/Grid";
import PageHeader from "@saleor/components/PageHeader"; import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar"; import SaveButtonBar from "@saleor/components/SaveButtonBar";
import { SearchServiceAccount_search_edges_node } from "@saleor/containers/SearchServiceAccount/types/SearchServiceAccount";
import useStateFromProps from "@saleor/hooks/useStateFromProps"; import useStateFromProps from "@saleor/hooks/useStateFromProps";
import { sectionNames } from "@saleor/intl"; import { sectionNames } from "@saleor/intl";
import { maybe } from "@saleor/misc"; import { maybe } from "@saleor/misc";
import { SearchServiceAccount_search_edges_node } from "@saleor/searches/types/SearchServiceAccount";
import { WebhookEventTypeEnum } from "@saleor/types/globalTypes"; import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler"; import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
import WebhookEvents from "@saleor/webhooks/components/WebhookEvents"; 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 { WebhookCreate_webhookCreate_webhookErrors } from "@saleor/webhooks/types/WebhookCreate";
import { WebhookDetails_webhook } from "@saleor/webhooks/types/WebhookDetails"; import { WebhookDetails_webhook } from "@saleor/webhooks/types/WebhookDetails";
import React from "react";
import { useIntl } from "react-intl";
export interface FormData { export interface FormData {
id: string;
events: WebhookEventTypeEnum[]; events: WebhookEventTypeEnum[];
isActive: boolean; isActive: boolean;
name: string; name: string;
@ -63,7 +62,6 @@ const WebhooksDetailsPage: React.FC<WebhooksDetailsPageProps> = ({
events: maybe(() => webhook.events, []) events: maybe(() => webhook.events, [])
.map(event => event.eventType) .map(event => event.eventType)
.filter(event => event !== WebhookEventTypeEnum.ANY_EVENTS), .filter(event => event !== WebhookEventTypeEnum.ANY_EVENTS),
id: maybe(() => webhook.id, null),
isActive: maybe(() => webhook.isActive, false), isActive: maybe(() => webhook.isActive, false),
name: maybe(() => webhook.name, ""), name: maybe(() => webhook.name, ""),
secretKey: maybe(() => webhook.secretKey, ""), secretKey: maybe(() => webhook.secretKey, ""),

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

@ -1,8 +1,8 @@
import { WindowTitle } from "@saleor/components/WindowTitle"; import { WindowTitle } from "@saleor/components/WindowTitle";
import SearchServiceAccount from "@saleor/containers/SearchServiceAccount";
import useNavigator from "@saleor/hooks/useNavigator"; import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import useServiceAccountSearch from "@saleor/searches/useServiceAccountSearch";
import { WebhookEventTypeEnum } from "@saleor/types/globalTypes"; import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
import { WebhookCreate as WebhookCreateData } from "@saleor/webhooks/types/WebhookCreate"; import { WebhookCreate as WebhookCreateData } from "@saleor/webhooks/types/WebhookCreate";
import React from "react"; import React from "react";
@ -26,6 +26,12 @@ export const WebhooksCreate: React.FC<WebhooksCreateProps> = () => {
const navigate = useNavigator(); const navigate = useNavigator();
const notify = useNotifier(); const notify = useNotifier();
const intl = useIntl(); const intl = useIntl();
const {
search: searchServiceAccount,
result: searchServiceAccountOpt
} = useServiceAccountSearch({
variables: DEFAULT_INITIAL_SEARCH_DATA
});
const onSubmit = (data: WebhookCreateData) => { const onSubmit = (data: WebhookCreateData) => {
if (data.webhookCreate.webhookErrors.length === 0) { if (data.webhookCreate.webhookErrors.length === 0) {
@ -39,62 +45,56 @@ export const WebhooksCreate: React.FC<WebhooksCreateProps> = () => {
const handleBack = () => navigate(webhooksListUrl()); const handleBack = () => navigate(webhooksListUrl());
return ( return (
<SearchServiceAccount variables={DEFAULT_INITIAL_SEARCH_DATA}> <TypedWebhookCreate onCompleted={onSubmit}>
{({ search: searchServiceAccount, result: searchServiceAccountOpt }) => ( {(webhookCreate, webhookCreateOpts) => {
<TypedWebhookCreate onCompleted={onSubmit}> const handleSubmit = (data: FormData) =>
{(webhookCreate, webhookCreateOpts) => { webhookCreate({
const handleSubmit = (data: FormData) => variables: {
webhookCreate({ input: {
variables: { events: data.allEvents
input: { ? [WebhookEventTypeEnum.ANY_EVENTS]
events: data.allEvents : data.events,
? [WebhookEventTypeEnum.ANY_EVENTS] isActive: data.isActive,
: data.events, name: data.name,
isActive: data.isActive, secretKey: data.secretKey,
name: data.name, serviceAccount: data.serviceAccount,
secretKey: data.secretKey, targetUrl: data.targetUrl
serviceAccount: data.serviceAccount, }
targetUrl: data.targetUrl }
} });
}
});
const formTransitionState = getMutationState( const formTransitionState = getMutationState(
webhookCreateOpts.called, webhookCreateOpts.called,
webhookCreateOpts.loading, webhookCreateOpts.loading,
maybe(() => webhookCreateOpts.data.webhookCreate.webhookErrors) maybe(() => webhookCreateOpts.data.webhookCreate.webhookErrors)
); );
return ( return (
<> <>
<WindowTitle <WindowTitle
title={intl.formatMessage({ title={intl.formatMessage({
defaultMessage: "Create Webhook", defaultMessage: "Create Webhook",
description: "window title" description: "window title"
})} })}
/> />
<WebhookCreatePage <WebhookCreatePage
disabled={false} disabled={false}
errors={maybe( errors={maybe(
() => webhookCreateOpts.data.webhookCreate.webhookErrors, () => webhookCreateOpts.data.webhookCreate.webhookErrors,
[] []
)} )}
fetchServiceAccounts={searchServiceAccount} fetchServiceAccounts={searchServiceAccount}
services={maybe(() => services={maybe(() =>
searchServiceAccountOpt.data.search.edges.map( searchServiceAccountOpt.data.search.edges.map(edge => edge.node)
edge => edge.node )}
) onBack={handleBack}
)} onSubmit={handleSubmit}
onBack={handleBack} saveButtonBarState={formTransitionState}
onSubmit={handleSubmit} />
saveButtonBarState={formTransitionState} </>
/> );
</> }}
); </TypedWebhookCreate>
}}
</TypedWebhookCreate>
)}
</SearchServiceAccount>
); );
}; };
WebhooksCreate.displayName = "WebhooksCreate"; 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 { WindowTitle } from "@saleor/components/WindowTitle";
import SearchServiceAccount from "@saleor/containers/SearchServiceAccount";
import useNavigator from "@saleor/hooks/useNavigator"; import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import useServiceAccountSearch from "@saleor/searches/useServiceAccountSearch";
import { WebhookEventTypeEnum } from "@saleor/types/globalTypes"; import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
import WebhookDeleteDialog from "@saleor/webhooks/components/WebhookDeleteDialog"; import WebhookDeleteDialog from "@saleor/webhooks/components/WebhookDeleteDialog";
import { WebhookDelete } from "@saleor/webhooks/types/WebhookDelete"; import { WebhookDelete } from "@saleor/webhooks/types/WebhookDelete";
import { WebhookUpdate } from "@saleor/webhooks/types/WebhookUpdate"; import { WebhookUpdate } from "@saleor/webhooks/types/WebhookUpdate";
import React from "react";
import { useIntl } from "react-intl";
import { DEFAULT_INITIAL_SEARCH_DATA } from "../../config"; import { DEFAULT_INITIAL_SEARCH_DATA } from "../../config";
import { getMutationState, maybe } from "../../misc"; import { getMutationState, maybe } from "../../misc";
import WebhooksDetailsPage from "../components/WebhooksDetailsPage"; import WebhooksDetailsPage from "../components/WebhooksDetailsPage";
@ -33,6 +34,12 @@ export const WebhooksDetails: React.FC<WebhooksDetailsProps> = ({
const navigate = useNavigator(); const navigate = useNavigator();
const notify = useNotifier(); const notify = useNotifier();
const intl = useIntl(); const intl = useIntl();
const {
search: searchServiceAccount,
result: searchServiceAccountOpt
} = useServiceAccountSearch({
variables: DEFAULT_INITIAL_SEARCH_DATA
});
const closeModal = () => const closeModal = () =>
navigate( navigate(
@ -72,96 +79,92 @@ export const WebhooksDetails: React.FC<WebhooksDetailsProps> = ({
}; };
return ( return (
<SearchServiceAccount variables={DEFAULT_INITIAL_SEARCH_DATA}> <TypedWebhookUpdate onCompleted={onWebhookUpdate}>
{({ search: searchServiceAccount, result: searchServiceAccountOpt }) => ( {(webhookUpdate, webhookUpdateOpts) => (
<TypedWebhookUpdate onCompleted={onWebhookUpdate}> <TypedWebhookDelete onCompleted={onWebhookDelete}>
{(webhookUpdate, webhookUpdateOpts) => ( {(webhookDelete, webhookDeleteOpts) => (
<TypedWebhookDelete onCompleted={onWebhookDelete}> <TypedWebhooksDetailsQuery variables={{ id }}>
{(webhookDelete, webhookDeleteOpts) => ( {webhookDetails => {
<TypedWebhooksDetailsQuery variables={{ id }}> const formTransitionState = getMutationState(
{webhookDetails => { webhookUpdateOpts.called,
const formTransitionState = getMutationState( webhookUpdateOpts.loading,
webhookUpdateOpts.called, maybe(
webhookUpdateOpts.loading, () => webhookUpdateOpts.data.webhookUpdate.webhookErrors
maybe( )
() => webhookUpdateOpts.data.webhookUpdate.webhookErrors );
)
);
const handleRemoveConfirm = () => const handleRemoveConfirm = () =>
webhookDelete({ webhookDelete({
variables: { variables: {
id id
} }
}); });
const formErrors = maybe( const formErrors = maybe(
() => webhookUpdateOpts.data.webhookUpdate.webhookErrors, () => webhookUpdateOpts.data.webhookUpdate.webhookErrors,
[] []
); );
const deleteTransitionState = getMutationState( const deleteTransitionState = getMutationState(
webhookDeleteOpts.called, webhookDeleteOpts.called,
webhookDeleteOpts.loading, webhookDeleteOpts.loading,
maybe(() => webhookDeleteOpts.data.webhookDelete.errors) maybe(() => webhookDeleteOpts.data.webhookDelete.errors)
); );
return ( return (
<> <>
<WindowTitle <WindowTitle
title={maybe(() => webhookDetails.data.webhook.name)} title={maybe(() => webhookDetails.data.webhook.name)}
/> />
<WebhooksDetailsPage <WebhooksDetailsPage
disabled={webhookDetails.loading} disabled={webhookDetails.loading}
errors={formErrors} errors={formErrors}
saveButtonBarState={formTransitionState} saveButtonBarState={formTransitionState}
webhook={maybe(() => webhookDetails.data.webhook)} webhook={maybe(() => webhookDetails.data.webhook)}
fetchServiceAccounts={searchServiceAccount} fetchServiceAccounts={searchServiceAccount}
services={maybe(() => services={maybe(() =>
searchServiceAccountOpt.data.search.edges.map( searchServiceAccountOpt.data.search.edges.map(
edge => edge.node edge => edge.node
) )
)} )}
onBack={() => navigate(webhooksListUrl())} onBack={() => navigate(webhooksListUrl())}
onDelete={() => openModal("remove")} onDelete={() => openModal("remove")}
onSubmit={data => { onSubmit={data => {
webhookUpdate({ webhookUpdate({
variables: { variables: {
id, id,
input: { input: {
events: data.allEvents events: data.allEvents
? [WebhookEventTypeEnum.ANY_EVENTS] ? [WebhookEventTypeEnum.ANY_EVENTS]
: data.events, : data.events,
isActive: data.isActive, isActive: data.isActive,
name: data.name, name: data.name,
secretKey: data.secretKey, secretKey: data.secretKey,
serviceAccount: data.serviceAccount, serviceAccount: data.serviceAccount,
targetUrl: data.targetUrl targetUrl: data.targetUrl
} }
} }
}); });
}} }}
/> />
<WebhookDeleteDialog <WebhookDeleteDialog
confirmButtonState={deleteTransitionState} confirmButtonState={deleteTransitionState}
name={maybe( name={maybe(
() => webhookDetails.data.webhook.name, () => webhookDetails.data.webhook.name,
"..." "..."
)} )}
onClose={closeModal} onClose={closeModal}
onConfirm={handleRemoveConfirm} onConfirm={handleRemoveConfirm}
open={params.action === "remove"} open={params.action === "remove"}
/> />
</> </>
); );
}} }}
</TypedWebhooksDetailsQuery> </TypedWebhooksDetailsQuery>
)}
</TypedWebhookDelete>
)} )}
</TypedWebhookUpdate> </TypedWebhookDelete>
)} )}
</SearchServiceAccount> </TypedWebhookUpdate>
); );
}; };
WebhooksDetails.displayName = "WebhooksDetails"; WebhooksDetails.displayName = "WebhooksDetails";