Add default token

2019-09-30 18:46:48 +02:00 · 2019-09-30 18:46:48 +02:00 · c7b650b27a
commit c7b650b27a
parent 4801bd6fa0
12 changed files with 246 additions and 83 deletions
--- a/src/services/components/ServiceDefaultToken/ServiceDefaultToken.tsx
+++ b/src/services/components/ServiceDefaultToken/ServiceDefaultToken.tsx
@ -0,0 +1,98 @@
+import Button from "@material-ui/core/Button";
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import IconButton from "@material-ui/core/IconButton";
+import Paper from "@material-ui/core/Paper";
+import { Theme } from "@material-ui/core/styles";
+import { fade } from "@material-ui/core/styles/colorManipulator";
+import Typography from "@material-ui/core/Typography";
+import CloseIcon from "@material-ui/icons/Close";
+import { makeStyles } from "@material-ui/styles";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+export interface ServiceDefaultTokenProps {
+  token: string;
+  onTokenClose: () => void;
+}
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    cancel: {
+      marginRight: theme.spacing.unit
+    },
+    closeContainer: {
+      display: "flex",
+      justifyContent: "flex-end",
+      position: "relative",
+      right: -theme.spacing.unit,
+      top: -theme.spacing.unit
+    },
+    copy: {
+      marginTop: theme.spacing.unit,
+      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`
+    },
+    root: {
+      boxShadow: "0px 5px 10px rgba(0, 0, 0, 0.05)"
+    },
+    text: {
+      display: "grid",
+      gridColumnGap: theme.spacing.unit * 3 + "px",
+      gridTemplateColumns: "1fr 60px",
+      marginBottom: theme.spacing.unit * 3
+    }
+  }),
+  {
+    name: "ServiceTokenCreateDialog"
+  }
+);
+
+function handleCopy(token: string) {
+  navigator.clipboard.writeText(token);
+}
+
+const ServiceDefaultToken: React.FC<ServiceDefaultTokenProps> = props => {
+  const { token, onTokenClose } = props;
+  const classes = useStyles(props);
+
+  return (
+    <Card className={classes.root}>
+      <CardContent>
+        <div className={classes.text}>
+          <Typography>
+            <FormattedMessage defaultMessage="We’ve created your default token. Make sure to copy your new personal access token now. You won’t be able to see it again." />
+          </Typography>
+          <div className={classes.closeContainer}>
+            <IconButton onClick={onTokenClose}>
+              <CloseIcon />
+            </IconButton>
+          </div>
+        </div>
+        <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(token)}
+          >
+            <FormattedMessage
+              defaultMessage="Copy token"
+              description="button"
+            />
+          </Button>
+        </Paper>
+      </CardContent>
+    </Card>
+  );
+};
+
+ServiceDefaultToken.displayName = "ServiceDefaultToken";
+export default ServiceDefaultToken;
--- a/src/services/components/ServiceDefaultToken/index.ts
+++ b/src/services/components/ServiceDefaultToken/index.ts
@ -0,0 +1,2 @@
+export { default } from "./ServiceDefaultToken";
+export * from "./ServiceDefaultToken";
--- a/src/services/components/ServiceDetailsPage/ServiceDetailsPage.stories.tsx
+++ b/src/services/components/ServiceDetailsPage/ServiceDetailsPage.stories.tsx
@ -15,11 +15,13 @@ const props: ServiceDetailsPageProps = {
  onBack: () => undefined,
  onDelete: () => undefined,
  onSubmit: () => undefined,
+  onTokenClose: () => undefined,
  onTokenCreate: () => undefined,
  onTokenDelete: () => undefined,
  permissions,
  saveButtonBarState: "default",
-  service
+  service,
+  token: null
 };
 storiesOf("Views / Services / Service details", module)
  .addDecorator(Decorator)
@ -32,4 +34,7 @@ storiesOf("Views / Services / Service details", module)
      {...props}
      errors={["name"].map(field => formError(field))}
    />
+  ))
+  .add("default token", () => (
+    <ServiceDetailsPage {...props} token="93B4AF3D7E9FD7C61C4C9B32FF82F" />
  ));
--- a/src/services/components/ServiceDetailsPage/ServiceDetailsPage.tsx
+++ b/src/services/components/ServiceDetailsPage/ServiceDetailsPage.tsx
@ -17,6 +17,7 @@ import { maybe } from "@saleor/misc";
 import { ServiceDetails_serviceAccount } from "@saleor/services/types/ServiceDetails";
 import { UserError } from "@saleor/types";
 import { PermissionEnum } from "@saleor/types/globalTypes";
+import ServiceDefaultToken from "../ServiceDefaultToken";
 import ServiceInfo from "../ServiceInfo";
 import ServiceTokens from "../ServiceTokens";

@ -32,9 +33,11 @@ export interface ServiceDetailsPageProps {
  permissions: ShopInfo_shop_permissions[];
  saveButtonBarState: ConfirmButtonTransitionState;
  service: ServiceDetails_serviceAccount;
+  token: string;
  onBack: () => void;
  onTokenDelete: (id: string) => void;
  onDelete: () => void;
+  onTokenClose: () => void;
  onTokenCreate: () => void;
  onSubmit: (data: ServiceDetailsPageFormData) => void;
 }
@ -46,8 +49,10 @@ const ServiceDetailsPage: React.FC<ServiceDetailsPageProps> = props => {
    permissions,
    saveButtonBarState,
    service,
+    token,
    onBack,
    onDelete,
+    onTokenClose,
    onTokenCreate,
    onTokenDelete,
    onSubmit
@ -84,6 +89,15 @@ const ServiceDetailsPage: React.FC<ServiceDetailsPageProps> = props => {
          <PageHeader title={maybe(() => service.name)} />
          <Grid>
            <div>
+              {token && (
+                <>
+                  <ServiceDefaultToken
+                    token={token}
+                    onTokenClose={onTokenClose}
+                  />
+                  <CardSpacer />
+                </>
+              )}
              <ServiceInfo
                data={data}
                disabled={disabled}
--- a/src/services/components/ServiceTokenCreateDialog/ServiceTokenCreateDialog.tsx
+++ b/src/services/components/ServiceTokenCreateDialog/ServiceTokenCreateDialog.tsx
@ -37,6 +37,7 @@ const useStyles = makeStyles(
      marginRight: theme.spacing.unit
    },
    copy: {
+      marginTop: theme.spacing.unit,
      position: "relative",
      right: theme.spacing.unit
    },
@ -50,6 +51,10 @@ const useStyles = makeStyles(
  }
 );

+function handleCopy(token: string) {
+  navigator.clipboard.writeText(token);
+}
+
 const ServiceTokenCreateDialog: React.FC<
  ServiceTokenCreateDialogProps
 > = props => {
@ -71,88 +76,84 @@ const ServiceTokenCreateDialog: React.FC<
  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" />
+        {({ change, data, submit }) => (
+          <>
+            <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>
-                    <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" ? (
-                  <>
+                    <Typography>{token}</Typography>
                    <Button
-                      className={classes.cancel}
+                      className={classes.copy}
                      color="primary"
-                      onClick={onClose}
-                    >
-                      <FormattedMessage {...buttonMessages.cancel} />
-                    </Button>
-                    <ConfirmButton
-                      transitionState={confirmButtonState}
-                      onClick={submit}
+                      onClick={() => handleCopy(token)}
                    >
                      <FormattedMessage
-                        defaultMessage="Create"
-                        description="create service token, button"
+                        defaultMessage="Copy token"
+                        description="button"
                      />
-                    </ConfirmButton>
-                  </>
-                ) : (
-                  <Button color="primary" variant="contained" onClick={onClose}>
-                    <FormattedMessage {...buttonMessages.done} />
+                    </Button>
+                  </Paper>
+                </>
+              )}
+            </DialogContent>
+            <DialogActions>
+              {step === "form" ? (
+                <>
+                  <Button
+                    className={classes.cancel}
+                    color="primary"
+                    onClick={onClose}
+                  >
+                    <FormattedMessage {...buttonMessages.cancel} />
                  </Button>
-                )}
-              </DialogActions>
-            </>
-          );
-        }}
+                  <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>
  );
--- a/src/services/index.tsx
+++ b/src/services/index.tsx
@ -23,8 +23,14 @@ const ServiceList: React.FC<RouteComponentProps> = ({ location }) => {
  return <ServiceListComponent params={params} />;
 };

-const ServiceDetails: React.FC<RouteComponentProps<{ id: string }>> = ({
-  match
+interface ServiceDetailsProps extends RouteComponentProps<{ id: string }> {
+  token: string;
+  onTokenClose: () => void;
+}
+const ServiceDetails: React.FC<ServiceDetailsProps> = ({
+  match,
+  token,
+  onTokenClose
 }) => {
  const qs = parseQs(location.search.substr(1));
  const params: ServiceUrlQueryParams = qs;
@ -33,20 +39,36 @@ const ServiceDetails: React.FC<RouteComponentProps<{ id: string }>> = ({
    <ServiceDetailsComponent
      id={decodeURIComponent(match.params.id)}
      params={params}
+      token={token}
+      onTokenClose={onTokenClose}
    />
  );
 };

 const ServiceSection = () => {
  const intl = useIntl();
+  const [token, setToken] = React.useState<string>(null);

  return (
    <>
      <WindowTitle title={intl.formatMessage(sectionNames.serviceAccounts)} />
      <Switch>
        <Route exact path={serviceListPath} component={ServiceList} />
-        <Route exact path={serviceAddPath} component={ServiceCreate} />
-        <Route path={servicePath(":id")} component={ServiceDetails} />
+        <Route
+          exact
+          path={serviceAddPath}
+          render={() => <ServiceCreate setToken={setToken} />}
+        />
+        <Route
+          path={servicePath(":id")}
+          render={props => (
+            <ServiceDetails
+              {...props}
+              token={token}
+              onTokenClose={() => setToken(null)}
+            />
+          )}
+        />
      </Switch>
    </>
  );
--- a/src/services/mutations.ts
+++ b/src/services/mutations.ts
@ -22,6 +22,7 @@ const serviceCreateMutation = gql`
        field
        message
      }
+      authToken
      serviceAccount {
        ...ServiceFragment
      }
--- a/src/services/types/ServiceCreate.ts
+++ b/src/services/types/ServiceCreate.ts
@ -24,6 +24,7 @@ export interface ServiceCreate_serviceAccountCreate_serviceAccount {
 export interface ServiceCreate_serviceAccountCreate {
  __typename: "ServiceAccountCreate";
  errors: ServiceCreate_serviceAccountCreate_errors[] | null;
+  authToken: string | null;
  serviceAccount: ServiceCreate_serviceAccountCreate_serviceAccount | null;
 }

--- a/src/services/views/ServiceCreate/ServiceCreate.tsx
+++ b/src/services/views/ServiceCreate/ServiceCreate.tsx
@ -14,7 +14,10 @@ import ServiceCreatePage, {
 } from "../../components/ServiceCreatePage";
 import { serviceListUrl, serviceUrl } from "../../urls";

-export const ServiceCreate: React.StatelessComponent = () => {
+interface ServiceCreateProps {
+  setToken: (token: string) => void;
+}
+export const ServiceCreate: React.FC<ServiceCreateProps> = ({ setToken }) => {
  const navigate = useNavigator();
  const notify = useNotifier();
  const intl = useIntl();
@ -26,6 +29,7 @@ export const ServiceCreate: React.StatelessComponent = () => {
        text: intl.formatMessage(commonMessages.savedChanges)
      });
      navigate(serviceUrl(data.serviceAccountCreate.serviceAccount.id));
+      setToken(data.serviceAccountCreate.authToken);
    }
  };

--- a/src/services/views/ServiceDetails/ServiceDetails.tsx
+++ b/src/services/views/ServiceDetails/ServiceDetails.tsx
@ -34,17 +34,23 @@ import {
 interface OrderListProps {
  id: string;
  params: ServiceUrlQueryParams;
+  token: string;
+  onTokenClose: () => void;
 }

 export const ServiceDetails: React.StatelessComponent<OrderListProps> = ({
  id,
-  params
+  params,
+  token,
+  onTokenClose
 }) => {
  const navigate = useNavigator();
  const notify = useNotifier();
  const intl = useIntl();
  const shop = useShop();

+  React.useEffect(() => onTokenClose, []);
+
  const closeModal = () =>
    navigate(
      serviceUrl(id, {
@ -203,9 +209,11 @@ export const ServiceDetails: React.StatelessComponent<OrderListProps> = ({
                              <ServiceDetailsPage
                                disabled={loading}
                                errors={[]}
+                                token={token}
                                onBack={handleBack}
                                onDelete={() => openModal("remove")}
                                onSubmit={handleSubmit}
+                                onTokenClose={onTokenClose}
                                onTokenCreate={() => openModal("create-token")}
                                onTokenDelete={id =>
                                  openModal("remove-token", id)
--- a/src/theme.ts
+++ b/src/theme.ts
@ -1,3 +1,4 @@
+import Card from "@material-ui/core/Card";
 import { createMuiTheme, Theme } from "@material-ui/core/styles";
 import { darken, fade } from "@material-ui/core/styles/colorManipulator";
 import TextField from "@material-ui/core/TextField";
@ -84,7 +85,6 @@ export default (colors: IThemeColors): Theme =>
          borderRadius: 8,
          borderStyle: "solid",
          borderWidth: 1,
-          boxShadow: "none",
          overflow: "visible"
        }
      },
@ -540,3 +540,8 @@ TextField.defaultProps = {
  ...TextField.defaultProps,
  variant: "outlined"
 };
+
+Card.defaultProps = {
+  ...Card.defaultProps,
+  elevation: 0
+};
--- a/src/types/globalTypes.ts
+++ b/src/types/globalTypes.ts
@ -321,6 +321,8 @@ export interface AttributeFilterInput {
  availableInGrid?: boolean | null;
  search?: string | null;
  ids?: (string | null)[] | null;
+  inCollection?: string | null;
+  inCategory?: string | null;
 }

 export interface AttributeInput {