From ed0a92ddb17c89651006dcca6a2ab504134cd28d Mon Sep 17 00:00:00 2001 From: Kavith Lokuhewage Date: Tue, 19 Nov 2019 12:45:34 +0530 Subject: [PATCH 1/6] Avoid disabling btns while waiting for network calls --- web/src/components/ControlPanel.less | 3 +++ web/src/components/RunButton.tsx | 9 +++++---- web/src/components/ShareButton.tsx | 9 +++++---- 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/web/src/components/ControlPanel.less b/web/src/components/ControlPanel.less index bc9687a..c31202c 100644 --- a/web/src/components/ControlPanel.less +++ b/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; diff --git a/web/src/components/RunButton.tsx b/web/src/components/RunButton.tsx index 0e7826e..6d92269 100644 --- a/web/src/components/RunButton.tsx +++ b/web/src/components/RunButton.tsx @@ -6,17 +6,18 @@ export function RunButton() { return { ({ onRun, runInProgress }) => () } diff --git a/web/src/components/ShareButton.tsx b/web/src/components/ShareButton.tsx index 5daab42..19378b1 100644 --- a/web/src/components/ShareButton.tsx +++ b/web/src/components/ShareButton.tsx @@ -6,17 +6,18 @@ export function ShareButton() { return { ({ onShare, shareInProgress }) => () } From 9ec2a393506e4653070ec5e177d1e2eee6aca3f9 Mon Sep 17 00:00:00 2001 From: Kavith Lokuhewage Date: Tue, 19 Nov 2019 13:46:29 +0530 Subject: [PATCH 2/6] Display msg & copy to clipboard once shared --- web/package-lock.json | 5 +++++ web/package.json | 1 + web/src/components/ControlPanel.tsx | 24 +++++++++++++++++------- web/src/components/Playground.tsx | 10 ++++++++++ 4 files changed, 33 insertions(+), 7 deletions(-) diff --git a/web/package-lock.json b/web/package-lock.json index 35c845c..19aa0c4 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -1132,6 +1132,11 @@ "del": "4.1.1" } }, + "clipboard-polyfill": { + "version": "2.8.6", + "resolved": "https://registry.npmjs.org/clipboard-polyfill/-/clipboard-polyfill-2.8.6.tgz", + "integrity": "sha512-kz/1ov+PXsBpGnW9XJH3dLWdYj12FpXqO89Dngm/GRPoI36E/tnYs6N0YPTEhxM9WHAlFiN5eoyIVuv5nzKXvg==" + }, "cliui": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz", diff --git a/web/package.json b/web/package.json index 689f13c..ab4be65 100644 --- a/web/package.json +++ b/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", diff --git a/web/src/components/ControlPanel.tsx b/web/src/components/ControlPanel.tsx index 65f66af..908d2d0 100644 --- a/web/src/components/ControlPanel.tsx +++ b/web/src/components/ControlPanel.tsx @@ -1,14 +1,24 @@ import * as React from "react"; import "./ControlPanel.less"; +import { PlaygroundContext } from "./Playground"; import { RunButton } from "./RunButton"; import { ShareButton } from "./ShareButton"; export function ControlPanel() { - return
-
- - - -
-
; + return + { ({ displayCopiedToCB }) => ( +
+
+ + + + {displayCopiedToCB && + + copied to clipboard. + + } +
+
)} + ; } diff --git a/web/src/components/Playground.tsx b/web/src/components/Playground.tsx index d8dafa2..d359cff 100644 --- a/web/src/components/Playground.tsx +++ b/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({ From b0d86d6ecb6b914de8e95940fcafa5bc22ab30b8 Mon Sep 17 00:00:00 2001 From: Kavith Lokuhewage Date: Tue, 19 Nov 2019 13:50:36 +0530 Subject: [PATCH 3/6] Add google analytics scripts --- web/src/index.ejs | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/web/src/index.ejs b/web/src/index.ejs index 97fbd0d..fc58449 100644 --- a/web/src/index.ejs +++ b/web/src/index.ejs @@ -2,6 +2,21 @@ + + + + + + @@ -14,6 +29,10 @@ + + +
From 12a989af2a255e1c2c9139fa2d1fc5b6123b1e6c Mon Sep 17 00:00:00 2001 From: Kavith Lokuhewage Date: Tue, 19 Nov 2019 13:59:03 +0530 Subject: [PATCH 4/6] Add ballerina download button --- web/src/components/ControlPanel.less | 3 +++ web/src/components/ControlPanel.tsx | 5 +++++ 2 files changed, 8 insertions(+) diff --git a/web/src/components/ControlPanel.less b/web/src/components/ControlPanel.less index c31202c..e31f510 100644 --- a/web/src/components/ControlPanel.less +++ b/web/src/components/ControlPanel.less @@ -30,4 +30,7 @@ height: 40px; margin-right: 15px; } + .download-text { + margin-top: 5px;; + } } \ No newline at end of file diff --git a/web/src/components/ControlPanel.tsx b/web/src/components/ControlPanel.tsx index 908d2d0..df5d08e 100644 --- a/web/src/components/ControlPanel.tsx +++ b/web/src/components/ControlPanel.tsx @@ -18,6 +18,11 @@ export function ControlPanel() { copied to clipboard. } + Love it? + download now! + )} ; From 3b0ce726bb79a47a059459bc0b7928a42cdc2208 Mon Sep 17 00:00:00 2001 From: Kavith Lokuhewage Date: Tue, 19 Nov 2019 14:06:45 +0530 Subject: [PATCH 5/6] Use project version for web server container --- docker/nginx/build.gradle | 12 +++++++----- docker/nginx/cloudbuild.yaml | 4 ++-- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/docker/nginx/build.gradle b/docker/nginx/build.gradle index 7e02cf0..eab193c 100644 --- a/docker/nginx/build.gradle +++ b/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, '.' } diff --git a/docker/nginx/cloudbuild.yaml b/docker/nginx/cloudbuild.yaml index 66219b1..a34bcd0 100644 --- a/docker/nginx/cloudbuild.yaml +++ b/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' \ No newline at end of file +- '$_IMAGE_TAG' \ No newline at end of file From 16ef2a1ad12b4a02a2a6bda2911eabbe0a08b5b2 Mon Sep 17 00:00:00 2001 From: Kavith Lokuhewage Date: Tue, 19 Nov 2019 14:15:16 +0530 Subject: [PATCH 6/6] Fix copied URL to clipboard --- web/src/components/Playground.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/components/Playground.tsx b/web/src/components/Playground.tsx index d359cff..44091ae 100644 --- a/web/src/components/Playground.tsx +++ b/web/src/components/Playground.tsx @@ -111,7 +111,7 @@ 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}`); + clipboard.writeText("https://play.ballerina.io" + `${location.pathname}?${params}`); this.setState({ displayCopiedToCB: true, shareInProgress: false,