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

Add token operations

Browse source
This commit is contained in:
dominik-zeglen 2019-09-30 12:32:00 +02:00
parent 043371685e
commit a1b9bf8d4e
14 changed files with 515 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/intl.ts
View file

@ -88,6 +88,10 @@ export const buttonMessages = defineMessages({
defaultMessage: "Delete",
description: "button"
},
done: {
defaultMessage: "Done",
description: "button"
},
edit: {
defaultMessage: "Edit",
description: "button"

162
src/services/components/ServiceTokenCreateDialog/ServiceTokenCreateDialog.tsx Normal file
View file

@ -0,0 +1,162 @@
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import Paper from "@material-ui/core/Paper";
import { Theme } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/styles";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { fade } from "@material-ui/core/styles/colorManipulator";
import CardSpacer from "@saleor/components/CardSpacer";
import ConfirmButton, {
ConfirmButtonTransitionState
} from "@saleor/components/ConfirmButton";
import Form from "@saleor/components/Form";
import FormSpacer from "@saleor/components/FormSpacer";
import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen";
import { buttonMessages } from "@saleor/intl";
export interface ServiceTokenCreateDialogProps {
confirmButtonState: ConfirmButtonTransitionState;
open: boolean;
token: string | undefined;
onClose: () => void;
onCreate: (name: string) => void;
}
type ServiceTokenCreateStep = "form" | "summary";
const useStyles = makeStyles(
(theme: Theme) => ({
cancel: {
marginRight: theme.spacing.unit
},
copy: {
position: "relative",
right: theme.spacing.unit
},
paper: {
background: fade(theme.palette.primary.main, 0.05),
padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 3}px`
}
}),
{
name: "ServiceTokenCreateDialog"
}
);
const ServiceTokenCreateDialog: React.FC<
ServiceTokenCreateDialogProps
> = props => {
const { confirmButtonState, open, token, onClose, onCreate } = props;
const [step, setStep] = React.useState<ServiceTokenCreateStep>("form");
const intl = useIntl();
const classes = useStyles(props);
React.useEffect(() => {
if (token !== undefined) {
setStep("summary");
}
}, [token]);
useModalDialogOpen(open, {
onClose: () => setStep("form")
});
return (
<Dialog open={open} fullWidth maxWidth="sm">
<Form initial={{ name: "" }} onSubmit={data => onCreate(data.name)}>
{({ change, data, submit }) => {
const handleCopy = () => navigator.clipboard.writeText(token);
return (
<>
<DialogTitle>
<FormattedMessage
defaultMessage="Create Token"
description="header"
/>
</DialogTitle>
<DialogContent>
{step === "form" ? (
<>
<Typography>
<FormattedMessage defaultMessage="Access token is used to authenticate service accounts" />
</Typography>
<FormSpacer />
<TextField
label={intl.formatMessage({
defaultMessage: "Token Note"
})}
value={data.name}
onChange={change}
fullWidth
name="name"
/>
</>
) : (
<>
<Typography>
<FormattedMessage defaultMessage="We’ve created your token. Make sure to copy your new personal access token now. You won’t be able to see it again." />
</Typography>
<CardSpacer />
<Paper className={classes.paper} elevation={0}>
<Typography variant="caption">
<FormattedMessage defaultMessage="Generated Token" />
</Typography>
<Typography>{token}</Typography>
<Button
className={classes.copy}
color="primary"
onClick={handleCopy}
>
<FormattedMessage
defaultMessage="Copy token"
description="button"
/>
</Button>
</Paper>{" "}
</>
)}
</DialogContent>
<DialogActions>
{step === "form" ? (
<>
<Button
className={classes.cancel}
color="primary"
onClick={onClose}
>
<FormattedMessage {...buttonMessages.cancel} />
</Button>
<ConfirmButton
transitionState={confirmButtonState}
onClick={submit}
>
<FormattedMessage
defaultMessage="Create"
description="create service token, button"
/>
</ConfirmButton>
</>
) : (
<Button color="primary" variant="contained" onClick={onClose}>
<FormattedMessage {...buttonMessages.done} />
</Button>
)}
</DialogActions>
</>
);
}}
</Form>
</Dialog>
);
};
ServiceTokenCreateDialog.displayName = "ServiceTokenCreateDialog";
export default ServiceTokenCreateDialog;

2
src/services/components/ServiceTokenCreateDialog/index.ts Normal file
View file

@ -0,0 +1,2 @@
export { default } from "./ServiceTokenCreateDialog";
export * from "./ServiceTokenCreateDialog";

19
src/services/components/ServiceTokenDeleteDialog/ServiceTokenDeleteDialog.stories.tsx Normal file
View file

@ -0,0 +1,19 @@
import { storiesOf } from "@storybook/react";
import React from "react";
import Decorator from "@saleor/storybook/Decorator";
import ServiceTokenDeleteDialog, {
ServiceTokenDeleteDialogProps
} from "./ServiceTokenDeleteDialog";
const props: ServiceTokenDeleteDialogProps = {
confirmButtonState: "default",
name: "Slack",
onClose: () => undefined,
onConfirm: () => undefined,
open: true
};
storiesOf("Views / Services / Token delete", module)
.addDecorator(Decorator)
.add("default", () => <ServiceTokenDeleteDialog {...props} />);

51
src/services/components/ServiceTokenDeleteDialog/ServiceTokenDeleteDialog.tsx Normal file
View file

@ -0,0 +1,51 @@
import DialogContentText from "@material-ui/core/DialogContentText";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import ActionDialog from "@saleor/components/ActionDialog";
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
export interface ServiceTokenDeleteDialogProps {
confirmButtonState: ConfirmButtonTransitionState;
open: boolean;
onConfirm: () => void;
onClose: () => void;
name: string;
}
const ServiceTokenDeleteDialog: React.FC<ServiceTokenDeleteDialogProps> = ({
name,
confirmButtonState,
onClose,
onConfirm,
open
}) => {
const intl = useIntl();
return (
<ActionDialog
open={open}
onClose={onClose}
confirmButtonState={confirmButtonState}
onConfirm={onConfirm}
variant="delete"
title={intl.formatMessage({
defaultMessage: "Delete Service Account",
description: "dialog title"
})}
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to delete token {token}?"
description="delete token"
values={{
token: <strong>{name}</strong>
}}
/>
</DialogContentText>
</ActionDialog>
);
};
ServiceTokenDeleteDialog.displayName = "ServiceTokenDeleteDialog";
export default ServiceTokenDeleteDialog;

2
src/services/components/ServiceTokenDeleteDialog/index.ts Normal file
View file

@ -0,0 +1,2 @@
export { default } from "./ServiceTokenDeleteDialog";
export * from "./ServiceTokenDeleteDialog";

5
src/services/components/ServiceTokens/ServiceTokens.tsx
View file

@ -94,7 +94,10 @@ const ServiceTokens: React.FC<ServiceTokensProps> = props => {
{maybe<React.ReactNode>(() => token.name, <Skeleton />)}
</TableCell>
<TableCell className={classes.colKey}>
{maybe<React.ReactNode>(() => token.authToken, <Skeleton />)}
{maybe<React.ReactNode>(
() => `**** ${token.authToken}`,
<Skeleton />
)}
</TableCell>
<TableCell className={classes.colActions}>
<IconButton

2
src/services/fixtures.ts
View file

@ -38,7 +38,7 @@ export const service: ServiceDetails_serviceAccount = {
tokens: [
{
__typename: "ServiceAccountToken",
authToken: "**** AK05",
authToken: "AK05",
id: "t1",
name: "default"
}

39
src/services/mutations.ts
View file

@ -4,6 +4,14 @@ import { TypedMutation } from "../mutations";
import { serviceDetailsFragment, serviceFragment } from "./queries";
import { ServiceCreate, ServiceCreateVariables } from "./types/ServiceCreate";
import { ServiceDelete, ServiceDeleteVariables } from "./types/ServiceDelete";
import {
ServiceTokenCreate,
ServiceTokenCreateVariables
} from "./types/ServiceTokenCreate";
import {
ServiceTokenDelete,
ServiceTokenDeleteVariables
} from "./types/ServiceTokenDelete";
import { ServiceUpdate, ServiceUpdateVariables } from "./types/ServiceUpdate";
const serviceCreateMutation = gql`
@ -60,3 +68,34 @@ export const ServiceUpdateMutation = TypedMutation<
ServiceUpdate,
ServiceUpdateVariables
>(serviceUpdateMutation);
const serviceTokenCreate = gql`
mutation ServiceTokenCreate($input: ServiceAccountTokenInput!) {
serviceAccountTokenCreate(input: $input) {
errors {
field
message
}
authToken
}
}
`;
export const ServiceTokenCreateMutation = TypedMutation<
ServiceTokenCreate,
ServiceTokenCreateVariables
>(serviceTokenCreate);
const serviceTokenDelete = gql`
mutation ServiceTokenDelete($id: ID!) {
serviceAccountTokenDelete(id: $id) {
errors {
field
message
}
}
}
`;
export const ServiceTokenDeleteMutation = TypedMutation<
ServiceTokenDelete,
ServiceTokenDeleteVariables
>(serviceTokenDelete);

29
src/services/types/ServiceTokenCreate.ts Normal file
View file

@ -0,0 +1,29 @@
/* tslint:disable */
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { ServiceAccountTokenInput } from "./../../types/globalTypes";
// ====================================================
// GraphQL mutation operation: ServiceTokenCreate
// ====================================================
export interface ServiceTokenCreate_serviceAccountTokenCreate_errors {
__typename: "Error";
field: string | null;
message: string | null;
}
export interface ServiceTokenCreate_serviceAccountTokenCreate {
__typename: "ServiceAccountTokenCreate";
errors: ServiceTokenCreate_serviceAccountTokenCreate_errors[] | null;
authToken: string | null;
}
export interface ServiceTokenCreate {
serviceAccountTokenCreate: ServiceTokenCreate_serviceAccountTokenCreate | null;
}
export interface ServiceTokenCreateVariables {
input: ServiceAccountTokenInput;
}

26
src/services/types/ServiceTokenDelete.ts Normal file
View file

@ -0,0 +1,26 @@
/* tslint:disable */
/* eslint-disable */
// This file was automatically generated and should not be edited.
// ====================================================
// GraphQL mutation operation: ServiceTokenDelete
// ====================================================
export interface ServiceTokenDelete_serviceAccountTokenDelete_errors {
__typename: "Error";
field: string | null;
message: string | null;
}
export interface ServiceTokenDelete_serviceAccountTokenDelete {
__typename: "ServiceAccountTokenDelete";
errors: ServiceTokenDelete_serviceAccountTokenDelete_errors[] | null;
}
export interface ServiceTokenDelete {
serviceAccountTokenDelete: ServiceTokenDelete_serviceAccountTokenDelete | null;
}
export interface ServiceTokenDeleteVariables {
id: string;
}

241
src/services/views/ServiceDetails/ServiceDetails.tsx
View file

@ -8,11 +8,16 @@ import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc";
import ServiceDeleteDialog from "@saleor/services/components/ServiceDeleteDialog";
import ServiceTokenCreateDialog from "@saleor/services/components/ServiceTokenCreateDialog";
import ServiceTokenDeleteDialog from "@saleor/services/components/ServiceTokenDeleteDialog";
import {
ServiceDeleteMutation,
ServiceTokenCreateMutation,
ServiceTokenDeleteMutation,
ServiceUpdateMutation
} from "@saleor/services/mutations";
import { ServiceDelete } from "@saleor/services/types/ServiceDelete";
import { ServiceTokenDelete } from "@saleor/services/types/ServiceTokenDelete";
import { ServiceUpdate } from "@saleor/services/types/ServiceUpdate";
import ServiceDetailsPage, {
ServiceDetailsPageFormData
@ -59,7 +64,7 @@ export const ServiceDetails: React.StatelessComponent<OrderListProps> = ({
);
const onServiceUpdate = (data: ServiceUpdate) => {
if (!maybe(() => data.serviceAccountUpdate.errors.length !== 0)) {
if (maybe(() => data.serviceAccountUpdate.errors.length === 0)) {
notify({
text: intl.formatMessage(commonMessages.savedChanges)
});
@ -82,79 +87,175 @@ export const ServiceDetails: React.StatelessComponent<OrderListProps> = ({
variables={{ id }}
require={["serviceAccount"]}
>
{({ data, loading }) => (
<ServiceUpdateMutation onCompleted={onServiceUpdate}>
{(updateService, updateServiceOpts) => (
<ServiceDeleteMutation onCompleted={onServiceDelete}>
{(deleteService, deleteServiceOpts) => {
const handleSubmit = (data: ServiceDetailsPageFormData) =>
updateService({
variables: {
id,
input: {
isActive: data.isActive,
name: data.name,
permissions: data.hasFullAccess
? shop.permissions.map(permission => permission.code)
: data.permissions
}
}
});
{({ data, loading, refetch }) => {
const onTokenDelete = (data: ServiceTokenDelete) => {
if (maybe(() => data.serviceAccountTokenDelete.errors.length === 0)) {
notify({
text: intl.formatMessage(commonMessages.savedChanges)
});
refetch();
closeModal();
}
};
return (
<ServiceUpdateMutation onCompleted={onServiceUpdate}>
{(updateService, updateServiceOpts) => (
<ServiceDeleteMutation onCompleted={onServiceDelete}>
{(deleteService, deleteServiceOpts) => (
<ServiceTokenCreateMutation>
{(createToken, createTokenOpts) => (
<ServiceTokenDeleteMutation onCompleted={onTokenDelete}>
{(deleteToken, deleteTokenOpts) => {
const handleSubmit = (
data: ServiceDetailsPageFormData
) =>
updateService({
variables: {
id,
input: {
isActive: data.isActive,
name: data.name,
permissions: data.hasFullAccess
? shop.permissions.map(
permission => permission.code
)
: data.permissions
}
}
});
const handleRemoveConfirm = () =>
deleteService({
variables: {
id
}
});
const handleRemoveConfirm = () =>
deleteService({
variables: {
id
}
});
const formTransitionState = getMutationState(
updateServiceOpts.called,
updateServiceOpts.loading,
maybe(
() => updateServiceOpts.data.serviceAccountUpdate.errors
)
);
const handleTokenCreate = (name: string) =>
createToken({
variables: {
input: {
name,
serviceAccount: id
}
}
});
const deleteTransitionState = getMutationState(
deleteServiceOpts.called,
deleteServiceOpts.loading,
maybe(
() => deleteServiceOpts.data.serviceAccountDelete.errors
)
);
const handleTokenDelete = () =>
deleteToken({
variables: {
id: params.id
}
});
return (
<>
<WindowTitle
title={maybe(() => data.serviceAccount.name)}
/>
<ServiceDetailsPage
disabled={loading}
errors={[]}
onBack={handleBack}
onDelete={() => openModal("remove")}
onSubmit={handleSubmit}
onTokenCreate={() => openModal("create-token")}
onTokenDelete={() => openModal("remove-token")}
permissions={maybe(() => shop.permissions)}
service={maybe(() => data.serviceAccount)}
saveButtonBarState={formTransitionState}
/>
<ServiceDeleteDialog
confirmButtonState={deleteTransitionState}
name={maybe(() => data.serviceAccount.name, "...")}
onClose={closeModal}
onConfirm={handleRemoveConfirm}
open={params.action === "remove"}
/>
</>
);
}}
</ServiceDeleteMutation>
)}
</ServiceUpdateMutation>
)}
const formTransitionState = getMutationState(
updateServiceOpts.called,
updateServiceOpts.loading,
maybe(
() =>
updateServiceOpts.data.serviceAccountUpdate
.errors
)
);
const deleteTransitionState = getMutationState(
deleteServiceOpts.called,
deleteServiceOpts.loading,
maybe(
() =>
deleteServiceOpts.data.serviceAccountDelete
.errors
)
);
const createTokenTransitionState = getMutationState(
createTokenOpts.called,
createTokenOpts.loading,
maybe(
() =>
createTokenOpts.data.serviceAccountTokenCreate
.errors
)
);
const deleteTokenTransitionState = getMutationState(
deleteTokenOpts.called,
deleteTokenOpts.loading,
maybe(
() =>
deleteTokenOpts.data.serviceAccountTokenDelete
.errors
)
);
return (
<>
<WindowTitle
title={maybe(() => data.serviceAccount.name)}
/>
<ServiceDetailsPage
disabled={loading}
errors={[]}
onBack={handleBack}
onDelete={() => openModal("remove")}
onSubmit={handleSubmit}
onTokenCreate={() => openModal("create-token")}
onTokenDelete={id =>
openModal("remove-token", id)
}
permissions={maybe(() => shop.permissions)}
service={maybe(() => data.serviceAccount)}
saveButtonBarState={formTransitionState}
/>
<ServiceDeleteDialog
confirmButtonState={deleteTransitionState}
name={maybe(
() => data.serviceAccount.name,
"..."
)}
onClose={closeModal}
onConfirm={handleRemoveConfirm}
open={params.action === "remove"}
/>
<ServiceTokenCreateDialog
confirmButtonState={createTokenTransitionState}
onClose={closeModal}
onCreate={handleTokenCreate}
open={params.action === "create-token"}
token={maybe(
() =>
createTokenOpts.data
.serviceAccountTokenCreate.authToken
)}
/>
<ServiceTokenDeleteDialog
confirmButtonState={deleteTokenTransitionState}
name={maybe(() => {
const token = data.serviceAccount.tokens.find(
token => token.id === params.id
);
if (token.name) {
return token.name;
}
return `**** ${token.authToken}`;
}, "...")}
onClose={closeModal}
onConfirm={handleTokenDelete}
open={params.action === "remove-token"}
/>
</>
);
}}
</ServiceTokenDeleteMutation>
)}
</ServiceTokenCreateMutation>
)}
</ServiceDeleteMutation>
)}
</ServiceUpdateMutation>
);
}}
</ServiceDetailsQuery>
);
};

1
src/services/views/ServiceList/ServiceList.tsx
View file

@ -13,7 +13,6 @@ import SaveFilterTabDialog, {
SaveFilterTabDialogFormData
} from "@saleor/components/SaveFilterTabDialog";
import { configurationMenuUrl } from "@saleor/configuration";
import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc";
import { ServiceDeleteMutation } from "@saleor/services/mutations";

5
src/types/globalTypes.ts
View file

@ -661,6 +661,11 @@ export interface ServiceAccountInput {
permissions?: (PermissionEnum | null)[] | null;
}
export interface ServiceAccountTokenInput {
name?: string | null;
serviceAccount: string;
}
export interface ShippingPriceInput {
name?: string | null;
price?: any | null;