From c806a836e503c209b02e53ab3f88cbc822263c76 Mon Sep 17 00:00:00 2001
From: Rustin <rustin.liu@gmail.com>
Date: Sat, 28 Mar 2020 15:16:39 +0800
Subject: [PATCH] fix: set codesandbox referrer to no-referrer (#22688)

* fix: set referrer to no-referrer

* fix: use <a> replace form

* refactoring: remove useless code

* fix: refine css issue
---
 site/theme/static/demo.less                |  1 +
 site/theme/static/template.html            |  6 +++---
 site/theme/template/Content/Demo/index.jsx | 24 +++++++++-------------
 3 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/site/theme/static/demo.less b/site/theme/static/demo.less
index 6e24b740bb..32b35f91b4 100644
--- a/site/theme/static/demo.less
+++ b/site/theme/static/demo.less
@@ -341,6 +341,7 @@
   }
 
   &-codesandbox {
+    display: inline-block;
     width: 20px;
     height: 20px;
     overflow: hidden;
diff --git a/site/theme/static/template.html b/site/theme/static/template.html
index 31332ba159..b07cd05502 100644
--- a/site/theme/static/template.html
+++ b/site/theme/static/template.html
@@ -22,7 +22,7 @@
     <link rel="stylesheet/less" type="text/css" href="{{ root }}color.less" />
     <script src="https://polyfill.alicdn.com/polyfill.min.js?features=default,es2015,Intl"></script>
     <script>
-      (function() {
+      (function () {
         function isLocalStorageNameSupported() {
           var testKey = 'test';
           var storage = window.localStorage;
@@ -100,10 +100,10 @@
     </script>
     <!-- Hotjar Tracking Code for ant.design -->
     <script>
-      (function(h, o, t, j, a, r) {
+      (function (h, o, t, j, a, r) {
         h.hj =
           h.hj ||
-          function() {
+          function () {
             (h.hj.q = h.hj.q || []).push(arguments);
           };
         h._hjSettings = { hjid: 473408, hjsv: 5 };
diff --git a/site/theme/template/Content/Demo/index.jsx b/site/theme/template/Content/Demo/index.jsx
index 6373206592..72e6e422a6 100644
--- a/site/theme/template/Content/Demo/index.jsx
+++ b/site/theme/template/Content/Demo/index.jsx
@@ -332,22 +332,18 @@ ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
                 />
               </Tooltip>
             </form>
-            <form
-              action="https://codesandbox.io/api/v1/sandboxes/define"
-              method="POST"
-              target="_blank"
-              onClick={() => this.track({ type: 'codesandbox', demo: meta.id })}
-            >
-              <input
-                type="hidden"
-                name="parameters"
-                value={compress(JSON.stringify(codesanboxPrefillConfig))}
-              />
+            <form>
               <Tooltip title={<FormattedMessage id="app.demo.codesandbox" />}>
-                <input
-                  type="submit"
-                  value="Create New Sandbox with Prefilled Data"
+                {/* FIXME: This temporarily solution to fix issues/22636, we need revert it to use form after the codesandbox api issue fixed. */}
+                <a
+                  aria-label="Create New Sandbox with Prefilled Data"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  href={`https://codesandbox.io/api/v1/sandboxes/define?parameters=${compress(
+                    JSON.stringify(codesanboxPrefillConfig),
+                  )}`}
                   className="code-box-codesandbox"
+                  onClick={() => this.track({ type: 'codesandbox', demo: meta.id })}
                 />
               </Tooltip>
             </form>