From f0d446c36be72cc41d5269249f2600657049957b Mon Sep 17 00:00:00 2001 From: abose Date: Mon, 13 Jan 2025 13:37:38 +0530 Subject: [PATCH 1/3] chore: enabling git in start project dialog in desktop and ui icon/ux changes in browser app Show error messages to user on non github urls not supported in browser --- src/assets/new-project/assets/css/style.css | 6 + .../new-project/assets/js/code-editor.js | 4 - .../assets/js/new-github-project.js | 200 +++++++++--------- src/assets/new-project/code-editor.html | 4 +- src/assets/new-project/images/git.svg | 4 + src/assets/new-project/images/tab-img7.png | Bin 1193 -> 0 bytes .../new-project/new-project-github.html | 25 ++- src/nls/root/strings.js | 9 +- 8 files changed, 140 insertions(+), 112 deletions(-) create mode 100644 src/assets/new-project/images/git.svg delete mode 100644 src/assets/new-project/images/tab-img7.png diff --git a/src/assets/new-project/assets/css/style.css b/src/assets/new-project/assets/css/style.css index 689fac19fc..b1a94ca10b 100644 --- a/src/assets/new-project/assets/css/style.css +++ b/src/assets/new-project/assets/css/style.css @@ -909,6 +909,12 @@ img { margin-bottom: 30px; } +.project-bottom { + border-top: 3px solid rgba(255, 255, 255, 0.1); + padding-top: 20px; + margin-top: auto; +} + .new-project-content { overflow-y: auto; } diff --git a/src/assets/new-project/assets/js/code-editor.js b/src/assets/new-project/assets/js/code-editor.js index 743daf8899..7629cea98d 100644 --- a/src/assets/new-project/assets/js/code-editor.js +++ b/src/assets/new-project/assets/js/code-editor.js @@ -204,10 +204,6 @@ function initCodeEditor() { _openURLInTauri(document.getElementById(iconID).getAttribute('href')); }; } - if(window.top.__TAURI__) { - // in desktop, we don't show github project option till we have git extension integrated. - document.getElementById("newGitHubProject").classList.add("forced-hidden"); - } document.getElementById("newGitHubProject").onclick = function() { Metrics.countEvent(Metrics.EVENT_TYPE.NEW_PROJECT, "main.Click", "github-project"); window.location.href = 'new-project-github.html'; diff --git a/src/assets/new-project/assets/js/new-github-project.js b/src/assets/new-project/assets/js/new-github-project.js index b0bd9e8981..331647268d 100644 --- a/src/assets/new-project/assets/js/new-github-project.js +++ b/src/assets/new-project/assets/js/new-github-project.js @@ -23,115 +23,125 @@ /*eslint strict: ["error", "global"]*/ /* jshint ignore:start */ -let createProjectBtn, websiteURLInput, locationInput; -const FLATTEN_ZIP_FIRST_LEVEL_DIR = true; +function browserInit() { + let createProjectBtn, websiteURLInput, locationInput; + const FLATTEN_ZIP_FIRST_LEVEL_DIR = true; -function _isValidGitHubURL(url) { - // strip trailing slash - url = url.replace(/\/$/, ""); - let githubPrefix = "https://github.com/"; - let components = url.replace("https://github.com/", '').split('/'); - if(!url.startsWith(githubPrefix) || components.length !== 2){ - return false; + function _isValidGitHubURL(url) { + // strip trailing slash + url = url.replace(/\/$/, ""); + let githubPrefix = "https://github.com/"; + let components = url.replace("https://github.com/", '').split('/'); + if(!url.startsWith(githubPrefix) || components.length !== 2){ + return false; + } + return true; } - return true; -} -function _fixGitHubBrokenURL() { - let githubPrefix = "https://github.com/", - gitSuffix = '.git'; - let githubURL = websiteURLInput.value; - if(githubURL.startsWith("http:")){ - githubURL = githubURL.replace("http:", "https:"); - } - if(!githubURL.startsWith(githubPrefix)){ - return; - } - // strip any query string params if present - let queryParamTrimIndex = githubURL.indexOf('?') >= 0 ? githubURL.indexOf('?') : githubURL.length; - githubURL = githubURL.substring(0, queryParamTrimIndex); - // trim everything after https://github.com/orgname/repo/... to https://github.com/orgname/repo - let components = githubURL.replace("https://github.com/", '').split('/'); - // trim .git at the end of the name - if(githubURL.endsWith(gitSuffix)){ - githubURL = githubURL.replace(new RegExp(gitSuffix + '$'), ''); - } - if(components.length > 2){ - githubURL = `https://github.com/${components[0]}/${components[1]}`; + function _fixGitHubBrokenURL() { + let githubPrefix = "https://github.com/", + gitSuffix = '.git'; + let githubURL = websiteURLInput.value; + if(githubURL.startsWith("http:")){ + githubURL = githubURL.replace("http:", "https:"); + } + if(!githubURL.startsWith(githubPrefix)){ + return; + } + // strip any query string params if present + let queryParamTrimIndex = githubURL.indexOf('?') >= 0 ? githubURL.indexOf('?') : githubURL.length; + githubURL = githubURL.substring(0, queryParamTrimIndex); + // trim everything after https://github.com/orgname/repo/... to https://github.com/orgname/repo + let components = githubURL.replace("https://github.com/", '').split('/'); + // trim .git at the end of the name + if(githubURL.endsWith(gitSuffix)){ + githubURL = githubURL.replace(new RegExp(gitSuffix + '$'), ''); + } + if(components.length > 2){ + githubURL = `https://github.com/${components[0]}/${components[1]}`; + } + websiteURLInput.value = githubURL; } - websiteURLInput.value = githubURL; -} -function _validateGitHubURL() { - _fixGitHubBrokenURL(); - let githubURL = websiteURLInput.value; - if(_isValidGitHubURL(githubURL)){ - $(websiteURLInput).removeClass("error-border"); - return true; + function _validateGitHubURL() { + _fixGitHubBrokenURL(); + let githubURL = websiteURLInput.value; + const $messageDisplay = $("#messageDisplay"); + if(_isValidGitHubURL(githubURL)){ + $(websiteURLInput).removeClass("error-border"); + $messageDisplay.html(""); + return true; + } + $(websiteURLInput).addClass("error-border"); + $messageDisplay.html(`  ${Strings.ERROR_ONLY_GITHUB}`); + return false; } - $(websiteURLInput).addClass("error-border"); - return false; -} -function _validateProjectLocation() { - if(!window.showDirectoryPicker){ - // fs access apis not present, so we will give phoenix empty location to figure out a suitable location + function _validateProjectLocation() { + if(!window.showDirectoryPicker){ + // fs access apis not present, so we will give phoenix empty location to figure out a suitable location + return true; + } + let location = locationInput.value; + if( location === Strings.PLEASE_SELECT_A_FOLDER){ + $(locationInput).addClass("error-border"); + return false; + } + $(locationInput).removeClass("error-border"); return true; } - let location = locationInput.value; - if( location === Strings.PLEASE_SELECT_A_FOLDER){ - $(locationInput).addClass("error-border"); - return false; + + function _validate() { + return _validateGitHubURL() + && _validateProjectLocation(); } - $(locationInput).removeClass("error-border"); - return true; -} -function _validate() { - return _validateGitHubURL() - && _validateProjectLocation(); -} + function _selectFolder() { + newProjectExtension.showFolderSelect() + .then(file =>{ + locationInput.fullPath = file; + locationInput.value = file.replace(newProjectExtension.getMountDir(), ""); + _validateProjectLocation(); + }); + } -function _selectFolder() { - newProjectExtension.showFolderSelect() - .then(file =>{ - locationInput.fullPath = file; - locationInput.value = file.replace(newProjectExtension.getMountDir(), ""); - _validateProjectLocation(); - }); -} + function _createProjectClicked() { + if(_validate()){ + let githubURL = websiteURLInput.value; + let components = githubURL.replace("https://github.com/", '').split('/'); + let zipURL = `https://phcode.site/getGitHubZip?org=${components[0]}&repo=${components[1]}`; + let suggestedProjectName = `${components[0]}-${components[1]}`; + newProjectExtension.downloadAndOpenProject( + zipURL, + locationInput.fullPath, suggestedProjectName, FLATTEN_ZIP_FIRST_LEVEL_DIR) + .then(()=>{ + Metrics.countEvent(Metrics.EVENT_TYPE.NEW_PROJECT, "github.Click", "create.success"); + newProjectExtension.closeDialogue(); + }); + } else { + newProjectExtension.showErrorDialogue( + Strings.MISSING_FIELDS, + Strings.PLEASE_FILL_ALL_REQUIRED); + } + Metrics.countEvent(Metrics.EVENT_TYPE.NEW_PROJECT, "github.Click", "create"); + } -function _createProjectClicked() { - if(_validate()){ - let githubURL = websiteURLInput.value; - let components = githubURL.replace("https://github.com/", '').split('/'); - let zipURL = `https://phcode.site/getGitHubZip?org=${components[0]}&repo=${components[1]}`; - let suggestedProjectName = `${components[0]}-${components[1]}`; - newProjectExtension.downloadAndOpenProject( - zipURL, - locationInput.fullPath, suggestedProjectName, FLATTEN_ZIP_FIRST_LEVEL_DIR) - .then(()=>{ - Metrics.countEvent(Metrics.EVENT_TYPE.NEW_PROJECT, "github.Click", "create.success"); - newProjectExtension.closeDialogue(); - }); - } else { - newProjectExtension.showErrorDialogue( - Strings.MISSING_FIELDS, - Strings.PLEASE_FILL_ALL_REQUIRED); + function initGitProject() { + if(!window.showDirectoryPicker){ // fs access apis not present + $(document.getElementById("projectLocation")).addClass("forced-hidden"); + } + createProjectBtn = document.getElementById("createProjectBtn"); + websiteURLInput = document.getElementById("websiteURLInput"); + locationInput = document.getElementById("locationInput"); + createProjectBtn.onclick = _createProjectClicked; + $(websiteURLInput).keyup(_validate); + locationInput.value = Strings.PLEASE_SELECT_A_FOLDER; + locationInput.onclick = _selectFolder; + _validate(); } - Metrics.countEvent(Metrics.EVENT_TYPE.NEW_PROJECT, "github.Click", "create"); + window.initGitProject = initGitProject; } -function initGithubProject() { - if(!window.showDirectoryPicker){ // fs access apis not present - $(document.getElementById("projectLocation")).addClass("forced-hidden"); - } - createProjectBtn = document.getElementById("createProjectBtn"); - websiteURLInput = document.getElementById("websiteURLInput"); - locationInput = document.getElementById("locationInput"); - createProjectBtn.onclick = _createProjectClicked; - $(websiteURLInput).keyup(_validate); - locationInput.value = Strings.PLEASE_SELECT_A_FOLDER; - locationInput.onclick = _selectFolder; - _validate(); +if(!window.top.Phoenix.isNativeApp){ + browserInit(); } diff --git a/src/assets/new-project/code-editor.html b/src/assets/new-project/code-editor.html index 594ff0c001..643f6e9a99 100644 --- a/src/assets/new-project/code-editor.html +++ b/src/assets/new-project/code-editor.html @@ -124,8 +124,8 @@

{{START_PROJECT}}

  • - image - {{GITHUB_PROJECT}} + image + {{GIT_PROJECT}}
    • diff --git a/src/assets/new-project/images/git.svg b/src/assets/new-project/images/git.svg new file mode 100644 index 0000000000..f2b825c812 --- /dev/null +++ b/src/assets/new-project/images/git.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/new-project/images/tab-img7.png b/src/assets/new-project/images/tab-img7.png deleted file mode 100644 index b56518494b71487709128235c6e5a4f8084786c1..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1193 zcmV;a1XlZrP)Q}{3iPZwPPzqpCmm6s2#{Yft|NDk`ejIh~2{S z2_m1M>Itd>EzpL$JDsH{T0dOU`biVyd*IJP~&>SsSLr#KcxF_VP$r1c3!0$|P&Y4j)_O>z9p3r53yoVvpbK7leQ^ zU*=#MFi8zqIeGB(<*mfi1lBKWStZpGU*=&xX#1|S(p=c?BngS6him6QZYZVS&XJTs z&Xek`@c>Li?8(Jm1yCHNuA}LY;brmq$s3--0<@6YBETB_4;7Gs6V}gaS<9nLXf+rjh6%AsXqqnC$H4cLRTlznMRS^i$$!LtjuU2^ zw;PM4Q8!d?jvM1I8hoyWPZA6MpywewnzQZ`)ZO0tFo^h6Qn4RMot#^wumYu}aE zRwYCmkAK;p8#z;i8l6@FUtfg;d*F=!2P7;=TctTEsl>{d%c%NN>7Kca>M;^{fSM}d zZI=}s1c4V}!whh$s4@9(G>T*8;Ay`+NrNc>Jzp0%iWe!hsln*OBVtmBLr*J{-Hp{U zLTm18=@7`dVx>o+SYD9M3mI6rO_Hr>X=F`dAh?+!sj|1~UfEi{l2Ne`#W7<6W3@<5 zU>VUV`krXUmebrlC3V-*b=x#Shehm(!Af^1z&5_xFcxvPXOBvfjQPluFL#N z + - -
    + +
    @@ -24,7 +29,7 @@
    - {{NEW_PROJECT_FROM_GITHUB}} + {{NEW_PROJECT_FROM_GIT}}
    @@ -42,16 +47,22 @@
    - {{GITHUB_REPO_URL}} - - + {{GIT_REPO_URL}} +
    {{LOCATION}} - + +
    +
    + +
    +
    + +
    diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index d115b006f4..09925a6e1a 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -1184,20 +1184,21 @@ define({ "CODE_EDITOR": "Code Editor", "BUILD_THE_WEB": "Build the web", "IMPORT_PROJECT": "Import Project", - "GITHUB_PROJECT": "GitHub Project", - "NEW_PROJECT_FROM_GITHUB": "New Project from GitHub", - "GITHUB_REPO_URL": "GitHub Repo URL :", + "GIT_PROJECT": "Get from Git", + "NEW_PROJECT_FROM_GIT": "New Project from Git", + "GIT_REPO_URL": "Git Repo URL :", "START_PROJECT": "Start Project\u2026", "DOWNLOAD_DESKTOP_APP": "Download Desktop App", "GET_DESKTOP_APP": "Get Desktop App", "CREATE_PROJECT": "Create Project", "SETTING_UP_PROJECT": "Setting Up Project", "LOCATION": "Location :", + "ERROR_ONLY_GITHUB": "The browser version of {APP_NAME} supports only GitHub URLs. To work with other Git URLs, please use the desktop app.", "DOWNLOADING": "Downloading...", "DOWNLOADING_FILE": "Downloading {0}...", "EXTRACTING_FILES_PROGRESS": "Extracting {0} of {1} files.", "COMPRESS_FILES_PROGRESS": "Compressing {0} of {1} files.", - "DOWNLOAD_FAILED_MESSAGE": "Make sure the download URL is a valid.
    NB: As Phoenix is in alpha, Private Repos and GitHub URLs larger than 25 MB is not allowed.", + "DOWNLOAD_FAILED_MESSAGE": "Make sure the download URL is a valid.
    NB: As Phoenix is free, Private Repos and GitHub URLs larger than 25 MB is not allowed.", "PLEASE_SELECT_A_FOLDER": "Please select a folder...", "UNZIP_IN_PROGRESS": "Unzipping files...", "UNZIP_FAILED": "Error: Unzipping failed.", From 23b05e90f190d0ab4ccfe1613d37071ef5538a68 Mon Sep 17 00:00:00 2001 From: abose Date: Mon, 13 Jan 2025 17:04:26 +0530 Subject: [PATCH 2/3] chore: phoenix desktop git clone ux from start project. actual git clone remaining. ui done --- .../new-project/assets/js/new-git-project.js | 118 ++++++++++++++++++ .../assets/js/new-github-project.js | 2 + .../new-project/new-project-github.html | 7 +- .../Phoenix/new-project.js | 68 +++++++++- src/nls/root/strings.js | 4 + 5 files changed, 193 insertions(+), 6 deletions(-) create mode 100644 src/assets/new-project/assets/js/new-git-project.js diff --git a/src/assets/new-project/assets/js/new-git-project.js b/src/assets/new-project/assets/js/new-git-project.js new file mode 100644 index 0000000000..f21761b0d1 --- /dev/null +++ b/src/assets/new-project/assets/js/new-git-project.js @@ -0,0 +1,118 @@ +/* + * GNU AGPL-3.0 License + * + * Copyright (c) 2021 - present core.ai . All rights reserved. + * + * This program is free software: you can redistribute it and/or modify it + * under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, but WITHOUT + * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or + * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License + * for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see https://opensource.org/licenses/AGPL-3.0. + * + */ + +/*global newProjectExtension, Strings, Metrics*/ +/*eslint no-console: 0*/ +/*eslint strict: ["error", "global"]*/ +/* jshint ignore:start */ + +function desktopInit() { + const LAST_GIT_CLONE_BASE_DIR = "PH_LAST_GIT_CLONE_BASE_DIR"; + let createProjectBtn, websiteURLInput, locationInput; + + function _validateGitURL(errors) { + let gitURL = websiteURLInput.value; + if(gitURL){ + $(websiteURLInput).removeClass("error-border"); + return true; + } + $(websiteURLInput).addClass("error-border"); + errors.push(`  ${Strings.ERROR_GIT_URL_INVALID}`); + return false; + } + + function _validateProjectLocation(errors) { + let location = locationInput.value; + if( location === Strings.PLEASE_SELECT_A_FOLDER){ + $(locationInput).addClass("error-border"); + return false; + } + if(locationInput.error){ + errors.push(`  ${locationInput.error}`); + $(locationInput).addClass("error-border"); + return false; + } + $(locationInput).removeClass("error-border"); + return true; + } + + function _validate() { + const errors = []; + let isValid = _validateGitURL(errors); + isValid = _validateProjectLocation(errors) && isValid; + $(createProjectBtn).prop('disabled', !isValid); + const $messageDisplay = $("#messageDisplay"); + $messageDisplay.html(""); + if(!isValid) { + $messageDisplay.html(errors.join("
    ")); + } + return isValid; + } + + async function _deduceClonePath(newPath) { + if(!newPath){ + newPath = locationInput.originalPath; + } + if(!newPath){ + return; + } + const {clonePath, error} = await newProjectExtension.getGitCloneDir(newPath, websiteURLInput.value); + locationInput.fullPath = clonePath; + locationInput.value = window.top.Phoenix.fs.getTauriPlatformPath(clonePath); + locationInput.error = error; + locationInput.originalPath = newPath; + } + + function _selectFolder() { + newProjectExtension.showFolderSelect(locationInput.originalPath || "") + .then((newPath)=>{ + _deduceClonePath(newPath).then(_validate); + }).catch((err)=>{ + console.error("user cancelled or error", err); + }); + } + + function _createProjectClicked() { + localStorage.setItem(LAST_GIT_CLONE_BASE_DIR, locationInput.originalPath); + //newProjectExtension.gitClone(websiteURLInput.value, locationInput.value); + Metrics.countEvent(Metrics.EVENT_TYPE.NEW_PROJECT, "git.Click", "create"); + newProjectExtension.closeDialogue(); + } + + function initGitProject() { + $(".label-clone").text(Strings.GIT_CLONE_URL); + createProjectBtn = document.getElementById("createProjectBtn"); + websiteURLInput = document.getElementById("websiteURLInput"); + locationInput = document.getElementById("locationInput"); + createProjectBtn.onclick = _createProjectClicked; + $(websiteURLInput).keyup(()=>{ + _deduceClonePath().then(_validate); + }); + locationInput.value = Strings.PLEASE_SELECT_A_FOLDER; + locationInput.onclick = _selectFolder; + websiteURLInput.value = "https://github.com/phcode-dev/HTML-Starter-Templates.git"; + _deduceClonePath(localStorage.getItem(LAST_GIT_CLONE_BASE_DIR)).then(_validate); + } + window.initGitProject = initGitProject; +} + +if(window.top.Phoenix.isNativeApp){ + desktopInit(); +} diff --git a/src/assets/new-project/assets/js/new-github-project.js b/src/assets/new-project/assets/js/new-github-project.js index 331647268d..c6da86fc54 100644 --- a/src/assets/new-project/assets/js/new-github-project.js +++ b/src/assets/new-project/assets/js/new-github-project.js @@ -130,6 +130,7 @@ function browserInit() { if(!window.showDirectoryPicker){ // fs access apis not present $(document.getElementById("projectLocation")).addClass("forced-hidden"); } + $(".label-clone").text(Strings.GIT_REPO_URL); createProjectBtn = document.getElementById("createProjectBtn"); websiteURLInput = document.getElementById("websiteURLInput"); locationInput = document.getElementById("locationInput"); @@ -137,6 +138,7 @@ function browserInit() { $(websiteURLInput).keyup(_validate); locationInput.value = Strings.PLEASE_SELECT_A_FOLDER; locationInput.onclick = _selectFolder; + websiteURLInput.value = "https://github.com/phcode-dev/HTML-Starter-Templates"; _validate(); } window.initGitProject = initGitProject; diff --git a/src/assets/new-project/new-project-github.html b/src/assets/new-project/new-project-github.html index e9ef560f93..72205d9722 100644 --- a/src/assets/new-project/new-project-github.html +++ b/src/assets/new-project/new-project-github.html @@ -11,6 +11,7 @@ +