Add playground headers (#3016)

* Add playground headers

* Small refactor, messages generation

* Small refactor, messages generation

* Ci

* Ci

Co-authored-by: andrzejewsky <vox3r69@gmail.com>

.github/workflows/approveAndMergeReleasePR.js

@@ -92,7 +92,7 @@ program
         requestBody += `\nIf this bugs won't be fixed in next patch release for this version mark them as known issues`;
       }
     } else if (testsStatus === "ERRORED") {
-      requestBody = `Tests ERRORED! Check log at ${options.dashboard_url}`
+      requestBody = `Tests ERRORED! Check log at ${options.dashboard_url}`;
     }
 
     const event = "COMMENT";

locale/defaultMessages.json

@@ -300,6 +300,10 @@
     "context": "min price in channel",
     "string": "Min. value"
   },
+  "0KmZCN": {
+    "context": "button",
+    "string": "Open playground"
+  },
   "0MetrR": {
     "context": "webhook input help text",
     "string": "This URL will receive webhook POST requests"
@@ -827,6 +831,9 @@
     "context": "tracking number",
     "string": "Tracking Number: {trackingNumber}"
   },
+  "4T/RzC": {
+    "string": "Make sure to save token, you won’t be able to see it again."
+  },
   "4VOIum": {
     "context": "product availability",
     "string": "Enabling this checkbox will remove product from search and category pages. It will be available on collection pages."
@@ -975,6 +982,9 @@
   "5ZvuVw": {
     "string": "No products matching given query"
   },
+  "5ZxAiY": {
+    "string": "Token"
+  },
   "5aiFbL": {
     "context": "tabel column header",
     "string": "Price"
@@ -4567,6 +4577,9 @@
     "context": "error message",
     "string": "Cannot choose a shipping method for an order without the shipping address"
   },
+  "Wm+KUd": {
+    "string": "Headers"
+  },
   "WnlZMO": {
     "context": "title",
     "string": "There’s a problem with app."
@@ -4965,6 +4978,10 @@
     "context": "button",
     "string": "Copy"
   },
+  "ZhqH8J": {
+    "context": "button",
+    "string": "Copy headers"
+  },
   "Zhxu58": {
     "context": "Fixed amount subtitle",
     "string": "Fixed amount"
@@ -7275,9 +7292,6 @@
     "context": "voucher status",
     "string": "Expired"
   },
-  "t9a9GQ": {
-    "string": "We’ve created your token. Make sure to copy your new personal access token now. You won’t be able to see it again."
-  },
   "tA5HJx": {
     "context": "webhook input help text",
     "string": "secret key is used to create a hash signature with each payload. *optional field"

src/custom-apps/components/TokenCreateDialog/TokenCreateDialog.tsx

@@ -4,6 +4,7 @@ import CardSpacer from "@dashboard/components/CardSpacer";
 import ConfirmButton from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
 import FormSpacer from "@dashboard/components/FormSpacer";
+import { getApiUrl } from "@dashboard/config";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import useModalDialogOpen from "@dashboard/hooks/useModalDialogOpen";
 import { buttonMessages } from "@dashboard/intl";
@@ -36,11 +37,18 @@ function handleCopy(token: string) {
   navigator.clipboard.writeText(token);
 }
 
+const Mono = ({ children, className }) => (
+  <span className={className}>{children}</span>
+);
+const createHeadersString = (token: string) =>
+  `{\n  "authorization": "Bearer ${token}"\n}`;
+
 const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
   const { confirmButtonState, open, token, onClose, onCreate } = props;
   const [step, setStep] = React.useState<TokenCreateStep>("form");
   const intl = useIntl();
   const classes = useStyles(props);
+  const headers = createHeadersString(token);
 
   React.useEffect(() => {
     if (token !== undefined) {
@@ -52,6 +60,10 @@ const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
     onClose: () => setStep("form"),
   });
 
+  const openPlayground = () => {
+    window.open(getApiUrl(), "_blank");
+  };
+
   return (
     <Dialog open={open} fullWidth maxWidth="sm">
       <Form initial={{ name: "" }} onSubmit={data => onCreate(data.name)}>
@@ -89,20 +101,17 @@ const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
                 <>
                   <Typography>
                     <FormattedMessage
-                      id="t9a9GQ"
-                      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."
+                      id="4T/RzC"
+                      defaultMessage="Make sure to save token, you won’t be able to see it again."
                     />
                   </Typography>
                   <CardSpacer />
                   <Paper className={classes.paper} elevation={0}>
                     <Typography variant="caption">
-                      <FormattedMessage
-                        id="Kxiige"
-                        defaultMessage="Generated Token"
-                      />
+                      <FormattedMessage id="5ZxAiY" defaultMessage="Token" />
                     </Typography>
                     <Typography data-test-id="generated-token">
-                      {token}
+                      <Mono className={classes.mono}>{token}</Mono>
                     </Typography>
                     <Button
                       className={classes.copy}
@@ -115,6 +124,33 @@ const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
                       />
                     </Button>
                   </Paper>
+                  <CardSpacer />
+                  <Paper className={classes.paper} elevation={0}>
+                    <Typography variant="caption">
+                      <FormattedMessage id="Wm+KUd" defaultMessage="Headers" />
+                    </Typography>
+                    <Typography data-test-id="generated-token">
+                      <Mono className={classes.mono}>{headers}</Mono>
+                    </Typography>
+                    <Button
+                      className={classes.copy}
+                      onClick={() => handleCopy(headers)}
+                    >
+                      <FormattedMessage
+                        id="ZhqH8J"
+                        defaultMessage="Copy headers"
+                        description="button"
+                      />
+                    </Button>
+                    <Button className={classes.copy} onClick={openPlayground}>
+                      <FormattedMessage
+                        id="0KmZCN"
+                        defaultMessage="Open playground"
+                        description="button"
+                      />
+                    </Button>
+                  </Paper>
+                  <CardSpacer />
                 </>
               )}
             </DialogContent>

src/custom-apps/components/TokenCreateDialog/styles.ts

@@ -8,12 +8,19 @@ export const useStyles = makeStyles(
     },
     copy: {
       marginTop: theme.spacing(),
+      marginRight: theme.spacing(),
       position: "relative",
       right: theme.spacing(1),
     },
+    mono: {
+      fontFamily:
+        "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+      fontSize: theme.typography.caption.fontSize,
+    },
     paper: {
       background: alpha(theme.palette.primary.main, 0.05),
       padding: theme.spacing(2, 3),
+      whiteSpace: "pre-wrap",
     },
   }),
   {