Merge pull request #22 from kaviththiranga/master

Fixes to UX and add GA, GTM

docker/nginx/build.gradle

@@ -2,6 +2,10 @@ dependencies {
     project(":frontend")
 }
 
+def env = System.getenv()
+def gcpProjectID = env["BPG_GCP_PROJECT_ID"]
+def imageTag = 'gcr.io/' + gcpProjectID +'/playground-web:' + project.version
+
 task cleanResources(type: Delete) {
     delete "resources/web"
 }
@@ -23,14 +27,12 @@ def inputFiles = [
 task cloudBuild(type: Exec) {
     dependsOn copyPublicContent
     inputs.files(inputFiles)
-    commandLine "gcloud", "builds", "submit", "--config", "cloudbuild.yaml", "."
+    commandLine "gcloud", "builds", "submit", "--config", "cloudbuild.yaml", 
+        "--substitutions=_IMAGE_TAG=" + imageTag, "."
 }
 
-def env = System.getenv()
-def gcpProjectID = env["BPG_GCP_PROJECT_ID"]
-
 task build(type: Exec) {
     dependsOn copyPublicContent
     inputs.files(inputFiles)
-    commandLine 'docker', 'build', '-t', 'gcr.io/' + gcpProjectID +'/playground-web:' + project.version, '.'
+    commandLine 'docker', 'build', '-t', imageTag, '.'
 }

docker/nginx/cloudbuild.yaml

@@ -1,5 +1,5 @@
 steps:
 - name: 'gcr.io/cloud-builders/docker'
-  args: [ 'build', '-t', 'gcr.io/$PROJECT_ID/playground-web', '.' ]
+  args: [ 'build', '-t', '$_IMAGE_TAG', '.' ]
 images:
-- 'gcr.io/$PROJECT_ID/playground-web'
+- '$_IMAGE_TAG'

web/package.json

@@ -43,6 +43,7 @@
   },
   "dependencies": {
     "classnames": "^2.2.6",
+    "clipboard-polyfill": "^2.8.6",
     "monaco-editor": "^0.18.1",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",

web/src/components/ControlPanel.less

@@ -5,10 +5,13 @@
         height: 40px;
         outline-style: none;
         background-color: #F2F3F4!important;
+        text-align: center;
+        min-width: 75px;
         &:hover {
             background-color: white!important;
         }
         .loading {
+            font-size: large;
             span {
                 animation-name: blink;
                 animation-duration: 1.4s;
@@ -27,4 +30,7 @@
         height: 40px;
         margin-right: 15px;
     }
+    .download-text {
+        margin-top: 5px;;
+    }
 }

web/src/components/ControlPanel.tsx

@@ -1,14 +1,29 @@
 import * as React from "react";
 import "./ControlPanel.less";
+import { PlaygroundContext } from "./Playground";
 import { RunButton } from "./RunButton";
 import { ShareButton } from "./ShareButton";
 
 export function ControlPanel() {
-    return <div className="control-panel w3-top w3-teal">
-                <div className="w3-bar">
-                    <img className="logo" src="images/ballerina-logo-play.svg" />
-                    <RunButton />
-                    <ShareButton />
-                </div>
-            </div>;
+    return <PlaygroundContext.Consumer>
+    { ({ displayCopiedToCB }) => (
+        <div className="control-panel w3-top w3-teal">
+            <div className="w3-bar">
+                <img className="logo" src="images/ballerina-logo-play.svg" />
+                <RunButton />
+                <ShareButton />
+                {displayCopiedToCB &&
+                    <span
+                        className="w3-text w3-small w3-animate-opacity">
+                            copied to clipboard.
+                    </span>
+                }
+                <span className="w3-text w3-right download-text">Love it? <a
+                    target="_blank"
+                    href="https://ballerina.io/downloads/">
+                            download now</a>!
+                    </span>
+            </div>
+        </div>)}
+    </PlaygroundContext.Consumer>;
 }

web/src/components/Playground.tsx

@@ -4,6 +4,7 @@ import { loadSample } from "../utils/samples";
 import { CodeEditor } from "./CodeEditor";
 import { ControlPanel } from "./ControlPanel";
 import { OutputPanel } from "./OutputPanel";
+import * as clipboard from "clipboard-polyfill"
 import "./Playground.less";
 
 declare const CONTROLLER_BACKEND_URL: string;
@@ -13,6 +14,7 @@ export interface IPlaygroundState {
     sourceCode: string;
     runInProgress: boolean;
     shareInProgress: boolean;
+    displayCopiedToCB: boolean;
     showDiagram: boolean;
     responses: PlaygroundResponse[];
     session: PlaySession;
@@ -31,6 +33,7 @@ export class Playground extends React.Component<{}, IPlaygroundState> {
     constructor(props: {}) {
         super(props);
         this.state = {
+            displayCopiedToCB: false,
             responses: [],
             runInProgress: false,
             session: new PlaySession(controllerUrl),
@@ -108,9 +111,16 @@ export class Playground extends React.Component<{}, IPlaygroundState> {
                 params.set("gist", gist.id);
                 params.set("file", "play.bal");
                 window.history.replaceState({}, "", `${location.pathname}?${params}`);
+                clipboard.writeText("https://play.ballerina.io" + `${location.pathname}?${params}`);
                 this.setState({
+                    displayCopiedToCB: true,
                     shareInProgress: false,
                 });
+                setTimeout(() => {
+                    this.setState({
+                        displayCopiedToCB: false,
+                    });
+                }, 3000);
             }, (reason: string) => {
                 this.printError(reason);
                 this.setState({

web/src/components/RunButton.tsx

@@ -6,17 +6,18 @@ export function RunButton() {
     return <PlaygroundContext.Consumer>
                 { ({ onRun, runInProgress }) => (<button
                         className={cn(
-                            "w3-button w3-white w3-round",
-                            { "w3-disabled": runInProgress },
+                            "w3-button w3-white w3-round run-button",
                         )}
-                        onClick={onRun}
+                        onClick={runInProgress ? () => undefined : onRun}
                     >
-                        Run
                         {runInProgress &&
                             <span className="loading">
                                 <span>.</span><span>.</span><span>.</span>
                             </span>
                         }
+                        {!runInProgress &&
+                            <span>Run</span>
+                        }
                 </button>)
 
                 }

web/src/components/ShareButton.tsx

@@ -6,17 +6,18 @@ export function ShareButton() {
     return <PlaygroundContext.Consumer>
                 { ({ onShare, shareInProgress }) => (<button
                         className={cn(
-                            "w3-button w3-white w3-round",
-                            { "w3-disabled": shareInProgress },
+                            "w3-button w3-white w3-round share-button",
                         )}
-                        onClick={onShare}
+                        onClick={shareInProgress ? () => undefined : onShare}
                     >
-                        Share
                         {shareInProgress &&
                             <span className="loading">
                                 <span>.</span><span>.</span><span>.</span>
                             </span>
                         }
+                        {!shareInProgress &&
+                            <span>Share</span>
+                        }
                 </button>)
 
                 }

web/src/index.ejs

@@ -2,6 +2,21 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-92163714-5"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'UA-92163714-5');
+    </script>
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-NZ683V9');</script>
+    <!-- End Google Tag Manager -->
     <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
@@ -14,6 +29,10 @@
     <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
   </head>
   <body>
+        <!-- Google Tag Manager (noscript) -->
+        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NZ683V9"
+        height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+        <!-- End Google Tag Manager (noscript) -->
         <div id="container"></div>
         <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
         <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>