Add default token

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;

src/services/components/ServiceDefaultToken/index.ts

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

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" />
   ));

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}

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,10 +76,7 @@ const ServiceTokenCreateDialog: React.FC<
   return (
     <Dialog open={open} fullWidth maxWidth="sm">
       <Form initial={{ name: "" }} onSubmit={data => onCreate(data.name)}>
-        {({ change, data, submit }) => {
+        {({ change, data, submit }) => (
-          const handleCopy = () => navigator.clipboard.writeText(token);
-
-          return (
           <>
             <DialogTitle>
               <FormattedMessage
@@ -113,14 +115,14 @@ const ServiceTokenCreateDialog: React.FC<
                     <Button
                       className={classes.copy}
                       color="primary"
-                        onClick={handleCopy}
+                      onClick={() => handleCopy(token)}
                     >
                       <FormattedMessage
                         defaultMessage="Copy token"
                         description="button"
                       />
                     </Button>
-                    </Paper>{" "}
+                  </Paper>
                 </>
               )}
             </DialogContent>
@@ -151,8 +153,7 @@ const ServiceTokenCreateDialog: React.FC<
               )}
             </DialogActions>
           </>
-          );
+        )}
-        }}
       </Form>
     </Dialog>
   );

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 }>> = ({
+interface ServiceDetailsProps extends RouteComponentProps<{ id: string }> {
-  match
+  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
-        <Route path={servicePath(":id")} component={ServiceDetails} />
+          exact
+          path={serviceAddPath}
+          render={() => <ServiceCreate setToken={setToken} />}
+        />
+        <Route
+          path={servicePath(":id")}
+          render={props => (
+            <ServiceDetails
+              {...props}
+              token={token}
+              onTokenClose={() => setToken(null)}
+            />
+          )}
+        />
       </Switch>
     </>
   );

src/services/mutations.ts

@@ -22,6 +22,7 @@ const serviceCreateMutation = gql`
         field
         message
       }
+      authToken
       serviceAccount {
         ...ServiceFragment
       }

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;
 }
 

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);
     }
   };
 

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)

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
+};

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 {