Add validation for existing setup path

src/setup/SetupPanel.ts

@@ -49,6 +49,7 @@ import { getOpenOcdRules } from "./addOpenOcdRules";
 import { checkSpacesInPath, getEspIdfFromCMake } from "../utils";
 import { useIdfSetupSettings } from "./setupValidation/espIdfSetup";
 import { clearPreviousIdfSetups } from "./existingIdfSetups";
+import * as fs from "fs";
 
 export class SetupPanel {
   public static currentPanel: SetupPanel | undefined;
@@ -83,6 +84,14 @@ export class SetupPanel {
   private readonly panel: WebviewPanel;
   private disposables: Disposable[] = [];
 
+  private async checkFileExists(filePath: string): Promise<boolean> {
+    return new Promise((resolve) => {
+      fs.access(filePath, fs.constants.F_OK, (err) => {
+        resolve(!err);
+      });
+    });
+  }
+
   constructor(
     private context: ExtensionContext,
     column: ViewColumn,
@@ -325,6 +334,16 @@ export class SetupPanel {
         case "exploreComponents":
           await commands.executeCommand("esp.component-manager.ui.show");
           break;
+        case "checkFileExists":
+          if (message.path) {
+            const fileExists = await this.checkFileExists(message.path);
+            this.panel.webview.postMessage({
+              command: "checkFileExistsResponse",
+              path: message.path,
+              exists: fileExists,
+            });
+          }
+          break;
         default:
           break;
       }
@@ -443,7 +462,6 @@ export class SetupPanel {
               ? espIdfPath
               : idfContainerPath;
           this.checkSpacesInPaths(toolsPath);
-
           if (idfPathToCheck === toolsPath) {
             const idfPathSameIdfToolsPathMsg = `IDF_PATH and IDF_TOOLS_PATH can't be the same. Please use another location. (ERROR_SAME_IDF_PATH_AND__IDF_TOOLS_PATH)`;
             throw new Error(idfPathSameIdfToolsPathMsg);

src/views/setup/Install.vue

@@ -1,3 +1,61 @@
+<template>
+  <div id="install">
+    <div class="notification is-danger error-message" v-if="espIdfErrorStatus">
+      <p>{{ espIdfErrorStatus }}</p>
+      <div class="icon is-large is-size-4" @click="setEspIdfErrorStatus">
+        <IconClose />
+      </div>
+    </div>
+
+    <div class="notification is-danger error-message" v-if="pyExecErrorStatus">
+      <p>{{ pyExecErrorStatus }}</p>
+      <div class="icon is-large is-size-4" @click="setPyExecErrorStatus">
+        <IconClose />
+      </div>
+    </div>
+
+    <div class="notification">
+      <div class="field" v-if="isNotWinPlatform && gitVersion">
+        <label data-config-id="git-version"
+          >Git version: {{ gitVersion }}</label
+        >
+      </div>
+
+      <selectEspIdf />
+
+      <folderOpen
+        propLabel="Enter ESP-IDF Tools directory (IDF_TOOLS_PATH):"
+        :propModel="toolsFolder"
+        :propMutate="setToolsFolder"
+        :openMethod="store.openEspIdfToolsFolder"
+      />
+
+      <div v-if="hasToolsWhitespace" class="notification is-danger">
+        White spaces are not allowed in the ESP-IDF Tools path.
+      </div>
+
+      <div v-if="!toolsFolder" class="notification is-danger">
+        ESP-IDF Tools path should not be empty.
+      </div>
+
+      <selectPyVersion v-if="isNotWinPlatform" />
+
+      <div class="field install-btn">
+        <div class="control">
+          <button
+            @click="store.installEspIdf"
+            class="button"
+            data-config-id="start-install-btn"
+            :disabled="isInstallDisabled || store.isInstallButtonDisabled"
+          >
+            {{ actionButtonText }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
 import { useSetupStore } from "./store";
@@ -20,6 +78,7 @@ const {
   selectedEspIdfVersion,
   espIdf,
   espIdfContainer,
+  isInstallButtonDisabled,
 } = storeToRefs(store);
 
 const isNotWinPlatform = computed(() => {
@@ -101,64 +160,6 @@ function setToolsFolder(newToolsPath: string) {
 }
 </script>
 
-<template>
-  <div id="install">
-    <div class="notification is-danger error-message" v-if="espIdfErrorStatus">
-      <p>{{ espIdfErrorStatus }}</p>
-      <div class="icon is-large is-size-4" @click="setEspIdfErrorStatus">
-        <IconClose />
-      </div>
-    </div>
-
-    <div class="notification is-danger error-message" v-if="pyExecErrorStatus">
-      <p>{{ pyExecErrorStatus }}</p>
-      <div class="icon is-large is-size-4" @click="setPyExecErrorStatus">
-        <IconClose />
-      </div>
-    </div>
-
-    <div class="notification">
-      <div class="field" v-if="isNotWinPlatform && gitVersion">
-        <label data-config-id="git-version"
-          >Git version: {{ gitVersion }}</label
-        >
-      </div>
-
-      <selectEspIdf />
-
-      <folderOpen
-        propLabel="Enter ESP-IDF Tools directory (IDF_TOOLS_PATH):"
-        :propModel="toolsFolder"
-        :propMutate="setToolsFolder"
-        :openMethod="store.openEspIdfToolsFolder"
-      />
-
-      <div v-if="hasToolsWhitespace" class="notification is-danger">
-        White spaces are not allowed in the ESP-IDF Tools path.
-      </div>
-
-      <div v-if="!toolsFolder" class="notification is-danger">
-        ESP-IDF Tools path should not be empty.
-      </div>
-
-      <selectPyVersion v-if="isNotWinPlatform" />
-
-      <div class="field install-btn">
-        <div class="control">
-          <button
-            @click="store.installEspIdf"
-            class="button"
-            data-config-id="start-install-btn"
-            :disabled="isInstallDisabled"
-          >
-            {{ actionButtonText }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <style scoped>
 #install {
   margin: 1% 5%;

src/views/setup/components/folderOpen.vue

@@ -1,19 +1,23 @@
 <script setup lang="ts">
 import { IconFolder, IconFolderOpened } from "@iconify-prerendered/vue-codicon";
 import { computed } from "vue";
+import { defineProps, defineEmits } from "vue";
 import { useSetupStore } from "../store";
+
 let folderIcon = "folder";
-const store = useSetupStore();
 const props = defineProps<{
   keyEnterMethod?: () => void;
   onChangeMethod?: () => void;
-  openMethod: () => void;
+  openMethod: () => Promise<string | undefined>;
   propLabel: string;
   propModel: string;
   propMutate: (val: string) => void;
   staticText?: string;
 }>();
 
+const store = useSetupStore();
+const emit = defineEmits(["blur"]);
+
 const dataModel = computed({
   get() {
     return props.propModel;
@@ -31,6 +35,17 @@ function onKeyEnter() {
     props.keyEnterMethod();
   }
 }
+
+async function selectFolder() {
+  const folder = await props.openMethod();
+  if (folder !== undefined) {
+    props.propMutate(folder);
+    emit("blur", folder);
+    if (props.onChangeMethod) {
+      props.onChangeMethod();
+    }
+  }
+}
 </script>
 
 <template>
@@ -42,6 +57,7 @@ function onKeyEnter() {
           type="text"
           class="input"
           v-model="dataModel"
+          @blur="$emit('blur', dataModel)"
           @keyup.enter="onKeyEnter"
         />
       </div>
@@ -54,10 +70,10 @@ function onKeyEnter() {
           style="text-decoration: none;"
           @mouseover="folderIcon = 'folder-opened'"
           @mouseout="folderIcon = 'folder'"
-          v-on:click="openMethod"
+          @click="selectFolder"
         >
-          <IconFolderOpened v-if="(folderIcon === 'folder-opened')" />
-          <IconFolder v-if="(folderIcon === 'folder')" />
+          <IconFolderOpened v-if="folderIcon === 'folder-opened'" />
+          <IconFolder v-if="folderIcon === 'folder'" />
         </div>
       </div>
     </div>