Enhance/whitespaces2

src/views/setup/Install.vue

@@ -2,7 +2,7 @@
 import { storeToRefs } from "pinia";
 import { useSetupStore } from "./store";
 import { SetupMode } from "./types";
-import { computed } from "vue";
+import { computed, watchEffect } from "vue";
 import folderOpen from "./components/folderOpen.vue";
 import selectEspIdf from "./components/selectEspIdf.vue";
 import selectPyVersion from "./components/selectPyVersion.vue";
@@ -17,6 +17,9 @@ const {
   pyExecErrorStatus,
   toolsFolder,
   setupMode,
+  selectedEspIdfVersion,
+  espIdf,
+  espIdfContainer,
 } = storeToRefs(store);
 
 const isNotWinPlatform = computed(() => {
@@ -27,6 +30,61 @@ const actionButtonText = computed(() => {
   return setupMode.value === SetupMode.advanced ? "Configure Tools" : "Install";
 });
 
+const hasToolsWhitespace = computed(() => {
+  return /\s/.test(toolsFolder.value);
+});
+
+const isVersionLessThanFive = computed(() => {
+  if (!selectedEspIdfVersion.value || !selectedEspIdfVersion.value.version) {
+    return false;
+  }
+
+  const versionString = selectedEspIdfVersion.value.version.match(
+    /(\d+\.\d+\.\d+|\d+\.\d+)/
+  );
+  if (!versionString) {
+    return false;
+  }
+
+  const version = versionString[0].split(".").map((num) => parseInt(num));
+  if (version[0] < 5) {
+    return true;
+  } else if (version[0] === 5 && version[1] === 0 && version[2] === 0) {
+    return true;
+  }
+
+  return false;
+});
+
+const hasWhitespaceInEspIdf = computed(() => {
+  return /\s/.test(espIdf.value);
+});
+
+const hasWhitespaceInEspIdfContainer = computed(() => {
+  return /\s/.test(espIdfContainer.value);
+});
+
+const isInstallDisabled = computed(() => {
+  return (
+    hasToolsWhitespace.value ||
+    (selectedEspIdfVersion.value.filename !== "manual" &&
+      isVersionLessThanFive.value &&
+      hasWhitespaceInEspIdfContainer.value)
+  );
+});
+
+watchEffect(() => {
+  if (!hasWhitespaceInEspIdf.value) {
+    store.whiteSpaceErrorIDF = "";
+  }
+  if (!hasWhitespaceInEspIdfContainer.value) {
+    store.whiteSpaceErrorIDFContainer = "";
+  }
+  if (!hasToolsWhitespace.value) {
+    store.whiteSpaceErrorTools = "";
+  }
+});
+
 function setEspIdfErrorStatus() {
   store.espIdfErrorStatus = "";
 }
@@ -42,24 +100,28 @@ function setToolsFolder(newToolsPath: string) {
 
 <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></selectEspIdf>
-
-      <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>
+      <selectEspIdf />
 
       <folderOpen
         propLabel="Enter ESP-IDF Tools directory (IDF_TOOLS_PATH):"
@@ -68,24 +130,19 @@ function setToolsFolder(newToolsPath: string) {
         :openMethod="store.openEspIdfToolsFolder"
       />
 
-      <selectPyVersion v-if="isNotWinPlatform"></selectPyVersion>
-
-      <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 v-if="hasToolsWhitespace" class="notification is-danger">
+        White spaces are not allowed in the ESP-IDF Tools path.
       </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>
@@ -96,10 +153,6 @@ function setToolsFolder(newToolsPath: string) {
 </template>
 
 <style scoped>
-#install {
-  margin: 1% 5%;
-}
-
 .error-message {
   padding: 0.5em;
   margin: 0.5em;

src/views/setup/components/selectEspIdf.vue

@@ -3,7 +3,7 @@ import { storeToRefs } from "pinia";
 import { useSetupStore } from "../store";
 import { IdfMirror } from "../types";
 import folderOpen from "./folderOpen.vue";
-import { computed } from "vue";
+import { computed, watchEffect } from "vue";
 
 const store = useSetupStore();
 
@@ -22,7 +22,7 @@ const {
 } = storeToRefs(store);
 
 const idfVersionList = computed(() => {
-  if (showIdfTagList) {
+  if (showIdfTagList.value) {
     const idfVersionWithTagsList = [...espIdfVersionList.value];
     for (const idfTag of espIdfTags.value) {
       const existingVersion = espIdfVersionList.value.find(
@@ -54,6 +54,52 @@ const resultingIdfPath = computed(() => {
     store.pathSep
   }esp-idf`;
 });
+
+const isVersionLessThanFive = computed(() => {
+  if (!selectedEspIdfVersion.value || !selectedEspIdfVersion.value.version) {
+    return false;
+  }
+
+  const versionString = selectedEspIdfVersion.value.version.match(
+    /(\d+\.\d+\.\d+|\d+\.\d+)/
+  );
+  if (!versionString) {
+    return false;
+  }
+
+  const version = versionString[0].split(".").map((num) => parseInt(num));
+  if (version[0] < 5) {
+    return true;
+  } else if (version[0] === 5 && version[1] === 0 && version[2] === 0) {
+    return true;
+  }
+
+  return false;
+});
+
+const hasWhitespaceInEspIdf = computed(() => {
+  return /\s/.test(espIdf.value);
+});
+
+const hasWhitespaceInEspIdfContainer = computed(() => {
+  return /\s/.test(espIdfContainer.value);
+});
+
+const showManualVersionWarning = computed(() => {
+  return (
+    selectedEspIdfVersion.value.filename === "manual" &&
+    hasWhitespaceInEspIdf.value
+  );
+});
+
+watchEffect(() => {
+  if (!hasWhitespaceInEspIdf.value) {
+    store.whiteSpaceErrorIDF = "";
+  }
+  if (!hasWhitespaceInEspIdfContainer.value) {
+    store.whiteSpaceErrorIDFContainer = "";
+  }
+});
 </script>
 
 <template>
@@ -120,6 +166,22 @@ const resultingIdfPath = computed(() => {
         selectedEspIdfVersion && selectedEspIdfVersion.filename !== 'manual'
       "
     />
+    <div v-if="showManualVersionWarning" class="notification is-warning">
+      Make sure the ESP-IDF version is not lower than 5.0, since white spaces
+      are not supported for earlier versions.
+    </div>
+    <div
+      v-if="
+        selectedEspIdfVersion &&
+        selectedEspIdfVersion.filename !== 'manual' &&
+        isVersionLessThanFive &&
+        hasWhitespaceInEspIdfContainer
+      "
+      class="notification is-danger"
+    >
+      White spaces are only supported for ESP-IDF path for versions >
+      5.0
+    </div>
   </div>
 </template>
 

src/views/setup/store.ts

@@ -72,6 +72,9 @@ export const useSetupStore = defineStore("setup", () => {
   let pathSep: Ref<string> = ref("/");
   let platform: Ref<string> = ref("");
   let pyExecErrorStatus: Ref<string> = ref("");
+  let whiteSpaceErrorIDF: Ref<string> = ref("");
+  let whiteSpaceErrorTools: Ref<string> = ref("");
+  let whiteSpaceErrorIDFContainer: Ref<string> = ref("");
   let pyReqsLog: Ref<string> = ref("");
   let pyVersionsList: Ref<string[]> = ref([]);
   let saveScope: Ref<number> = ref(1);
@@ -430,5 +433,8 @@ export const useSetupStore = defineStore("setup", () => {
     openShowExamplesPanel,
     requestInitValues,
     toggleContent,
+    whiteSpaceErrorIDF,
+    whiteSpaceErrorTools,
+    whiteSpaceErrorIDFContainer,
   };
 });