chore: phoenix desktop git clone ux from start project. actual git clone remaining. ui done

abose · abose · commit 09096e9f9b53 · 2025-01-14T08:34:14.000+05:30
diff --git a/src/assets/new-project/assets/js/new-git-project.js 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(`<span><i class="fas fa-exclamation-triangle" style="color: #f89406"></i>&nbsp;&nbsp;${Strings.ERROR_GIT_URL_INVALID}</span>`);
+        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(`<span><i class="fas fa-exclamation-triangle" style="color: #f89406"></i>&nbsp;&nbsp;${locationInput.error}</span>`);
+            $(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("<br>"));
+        }
+        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
@@ -130,13 +130,15 @@ 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");
         createProjectBtn.onclick = _createProjectClicked;
         $(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
@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="../../thirdparty/fontawesome/css/all.min.css">
     <script src="assets/js/phoenix.js"></script>
     <script src="assets/js/new-github-project.js"></script>
+    <script src="assets/js/new-git-project.js"></script>
     <style>
         #messageDisplay span {
             width: 100%;
@@ -47,12 +48,12 @@
 
     <div class="website-main-content">
         <div class="website-detail d-flex align-items-center">
-            <span class="localize">{{GIT_REPO_URL}}</span>
-            <input id="websiteURLInput" class="w-100" type="text" name="web-url" value="https://github.com/phcode-dev/HTML-Starter-Templates"/>
+            <span class="label-clone"></span>
+            <input id="websiteURLInput" class="w-100" type="text" name="web-url" value="" spellcheck="false" autocomplete="off"/>
         </div>
         <div id="projectLocation" class="website-detail d-flex align-items-center">
             <span class="localize">{{LOCATION}}</span>
-            <input id="locationInput" class="w-100" type="button" name="web-url" value="">
+            <input id="locationInput" class="w-100" style="text-wrap: inherit;" type="button" name="web-url" value="">
         </div>
         <div class="website-detail d-flex align-items-center">
             <span></span>
diff --git a/src/extensionsIntegrated/Phoenix/new-project.js b/src/extensionsIntegrated/Phoenix/new-project.js
@@ -18,7 +18,7 @@
  *
  */
 
-/*global Phoenix*/
+/*global path*/
 
 define(function (require, exports, module) {
     const Dialogs = require("widgets/Dialogs"),
@@ -376,9 +376,9 @@ define(function (require, exports, module) {
         });
     }
 
-    function showFolderSelect() {
+    function showFolderSelect(initialPath = "") {
         return new Promise((resolve, reject)=>{
-            FileSystem.showOpenDialog(false, true, Strings.CHOOSE_FOLDER, '', null, function (err, files) {
+            FileSystem.showOpenDialog(false, true, Strings.CHOOSE_FOLDER, initialPath, null, function (err, files) {
                 if(err || files.length !== 1){
                     reject();
                     return;
@@ -388,6 +388,67 @@ define(function (require, exports, module) {
         });
     }
 
+    function _getGitFolderName(gitURL) {
+        if (typeof gitURL !== 'string' || !gitURL.trim()) {
+            return "";
+        }
+        // Remove trailing `.git` if it exists and split the URL
+        const parts = gitURL.replace(/\.git$/, '').split('/');
+        // Return the last segment as the project folder name
+        return parts[parts.length - 1];
+    }
+
+    async function _dirExists(fullPath) {
+        try {
+            const {entry} = await FileSystem.resolveAsync(fullPath);
+            return entry.isDirectory;
+        } catch (e) {
+            return false;
+        }
+    }
+
+    /**
+     * Determines which directory to use for a Git clone operation:
+     *  1. If the selected directory is empty, returns that directory.
+     *  2. Otherwise, checks/creates a child directory named after the Git project.
+     *     - If that child directory is (or becomes) empty, returns its entry.
+     *     - If it is not empty, returns null.
+     *
+     * @param {string} selectedDir - The full path to the user-selected directory.
+     * @param {string} gitURL - The Git clone URL (used to derive the child folder name).
+     * @returns {Promise<{error, }>} error string to show to user and the path to clone.
+     */
+    async function getGitCloneDir(selectedDir, gitURL) {
+        const selectedDirExists = await _dirExists(selectedDir);
+        if (!selectedDirExists) {
+            return {error: Strings.ERROR_GIT_FOLDER_NOT_EXIST, clonePath: selectedDir};
+        }
+
+        const {entry: selectedEntry} = await FileSystem.resolveAsync(selectedDir);
+        if (await selectedEntry.isEmptyAsync()) {
+            return {clonePath: selectedDir};
+        }
+
+        // If not empty, compute the child directory path
+        const folderName = _getGitFolderName(gitURL);
+        if(!folderName){
+            return {error: Strings.ERROR_GIT_FOLDER_NOT_EMPTY, clonePath: selectedDir};
+        }
+
+        const childDirPath = path.join(selectedDir, folderName);
+        const childDirExists = await _dirExists(childDirPath);
+        if (!childDirExists) {
+            return {clonePath: childDirPath};
+        }
+        // The child directory exists; check if it is empty
+        const {entry: childEntry} = await FileSystem.resolveAsync(childDirPath);
+        const isChildEmpty = await childEntry.isEmptyAsync();
+        if(isChildEmpty){
+            return {clonePath: childDirPath};
+        }
+        return {error: Strings.ERROR_GIT_FOLDER_NOT_EMPTY, clonePath: childDirPath};
+    }
+
     function showAboutBox() {
         CommandManager.execute(Commands.HELP_ABOUT);
     }
@@ -398,6 +459,7 @@ define(function (require, exports, module) {
     exports.downloadAndOpenProject = downloadAndOpenProject;
     exports.showFolderSelect = showFolderSelect;
     exports.showErrorDialogue = showErrorDialogue;
+    exports.getGitCloneDir = getGitCloneDir;
     exports.setupExploreProject = defaultProjects.setupExploreProject;
     exports.setupStartupProject = defaultProjects.setupStartupProject;
     exports.alreadyExists = window.Phoenix.VFS.existsAsync;
diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js
@@ -1187,13 +1187,17 @@ define({
     "GIT_PROJECT": "Get from Git",
     "NEW_PROJECT_FROM_GIT": "New Project from Git",
     "GIT_REPO_URL": "Git Repo URL :",
+    "GIT_CLONE_URL": "Git Clone 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.",
+    "ERROR_GIT_URL_INVALID": "Please enter a valid Git clone URL.",
+    "ERROR_GIT_FOLDER_NOT_EMPTY": "The Selected folder cannot be used for Git clone as it is not empty or is unreadable.",
+    "ERROR_GIT_FOLDER_NOT_EXIST": "The Selected folder cannot be used for Git clone as it does not exist.",
     "DOWNLOADING": "Downloading...",
     "DOWNLOADING_FILE": "Downloading {0}...",
     "EXTRACTING_FILES_PROGRESS": "Extracting {0} of {1} files.",
