Add UI Validation for whitespaces

- changed error messages to match warning messages style
- removed the functionality of closing error messages
- added validations for whitespace on  idf path and tools path based on selected version of esp-idf
- disabled install button if any error appear

src/views/setup/Install.vue

@@ -9,14 +9,8 @@
 
       <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('')">
-          <iconify-icon icon="close" />
-        </div>
+      <div v-if="espIdfErrorStatus">
+        <span class="error-text">{{ espIdfErrorStatus }}</span>
       </div>
 
       <folderOpen
@@ -28,14 +22,9 @@
 
       <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('')">
-          <iconify-icon icon="close" />
-        </div>
+      <div v-if="pyExecErrorStatus">
+        <span class="error-text">{{ pyExecErrorStatus }}</span>
+
       </div>
 
       <div class="field install-btn">
@@ -44,6 +33,7 @@
             @click="installEspIdf"
             class="button"
             data-config-id="start-install-btn"
+            :disabled="isThereAnError"
           >
             Install
           </button>
@@ -54,8 +44,9 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component, Vue, Watch } from "vue-property-decorator";
 import { Action, Mutation, State } from "vuex-class";
+import { IEspIdfLink } from "./types";
 import folderOpen from "./components/folderOpen.vue";
 import selectEspIdf from "./components/selectEspIdf.vue";
 import selectPyVersion from "./components/selectPyVersion.vue";
@@ -70,14 +61,24 @@ import selectPyVersion from "./components/selectPyVersion.vue";
 export default class Install extends Vue {
   @Action installEspIdf;
   @Action openEspIdfToolsFolder;
-  @Mutation setEspIdfErrorStatus;
-  @Mutation setPyExecErrorStatus;
+  // @Mutation setEspIdfErrorStatus;
+  // @Mutation setPyExecErrorStatus;
   @Mutation setToolsFolder;
   @State("gitVersion") private storeGitVersion: string;
   @State("espIdfErrorStatus") private storeErrorStatus: string;
   @State("pathSep") private storePathSep: string;
   @State("pyExecErrorStatus") private storePyExecErrorStatus: string;
   @State("toolsFolder") private storeToolsFolder: string;
+  @State("selectedEspIdfVersion") private storeSelectedEspIdfVersion: IEspIdfLink;
+
+  @Watch('selectedEspIdfVersion')
+  onSelectedEspIdfVersionChanged() {
+    this.setToolsFolder(this.toolsFolder);
+  }
+
+  get isThereAnError() {
+    return this.espIdfErrorStatus !== '' || this.pyExecErrorStatus !== '';
+  }
 
   get gitVersion() {
     return this.storeGitVersion;
@@ -98,6 +99,10 @@ export default class Install extends Vue {
   get toolsFolder() {
     return this.storeToolsFolder;
   }
+
+  get selectedEspIdfVersion() {
+    return this.storeSelectedEspIdfVersion;
+  }
 }
 </script>
 
@@ -106,15 +111,8 @@ export default class Install extends Vue {
   margin: 1% 5%;
 }
 
-.error-message {
-  padding: 0.5em;
-  margin: 0.5em;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.error-message .icon:hover {
-  color: var(--vscode-button-foreground);
+.error-text {
+  color: var(--vscode-editorError-foreground);
+  font-size: small;
 }
 </style>

src/views/setup/components/folderOpen.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="field">
+  <div>
     <label class="label">{{ propLabel }}</label>
     <div class="field has-addons align-center">
       <div class="control expanded">

src/views/setup/components/selectEspIdf.vue

@@ -65,7 +65,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component, Vue, Watch } from "vue-property-decorator";
 import { IdfMirror, IEspIdfLink } from "../types";
 import { State, Action, Mutation } from "vuex-class";
 import folderOpen from "./folderOpen.vue";
@@ -92,6 +92,18 @@ export default class SelectEspIdf extends Vue {
   @State("selectedIdfMirror") private storeSelectedIdfMirror: IdfMirror;
   @State("showIdfTagList") private storeShowIdfTagList: boolean;
 
+  @Watch('selectedIdfVersion', { deep: true })
+  onSelectedIdfVersionChanged(newValue: IEspIdfLink, oldValue: IEspIdfLink) {
+    // Validate the paths for whitespaces when the version changes.
+    const hasWhitespace = this.validatePathForWhitespace(this.espIdf, this.espIdfContainer);
+
+    if (hasWhitespace && this.isVersionLowerThan5) {
+      this.setEspIdfErrorStatus("Whitespaces in project, ESP-IDF and ESP Tools paths are not supported in versions lower than 5.0");
+    } else {
+      this.clearIDfErrorStatus();
+    }
+  }
+
   get espIdf() {
     return this.storeEspIdf;
   }
@@ -141,22 +153,27 @@ export default class SelectEspIdf extends Vue {
     this.setShowIdfTagList(showTags);
   }
   get isVersionLowerThan5() {
-  if (this.selectedIdfVersion && this.selectedIdfVersion.name) {
-    // Regular expression to match the version number in the format vX.X.X or release/vX.X
-    const match = this.selectedIdfVersion.name.match(/v(\d+(\.\d+)?(\.\d+)?)/);
-    
-    // If a version number was found, parse it
-    if (match) {
-      const versionNumber = parseFloat(match[1]);
-      // Return true if versionNumber is less than 5
-      return versionNumber < 5;
-    } else {
-      // If no version number found, assume it's a development branch and return false
-      return false;
+    if (this.selectedIdfVersion && this.selectedIdfVersion.name) {
+      // Regular expression to match the version number in the format vX.X.X or release/vX.X
+      const match = this.selectedIdfVersion.name.match(/v(\d+(\.\d+)?(\.\d+)?)/);
+      
+      // If a version number was found, parse it
+      if (match) {
+        const versionNumber = parseFloat(match[1]);
+        // Return true if versionNumber is less than 5
+        return versionNumber < 5;
+      } else {
+        // If no version number found, assume it's a development branch and return false
+        return false;
+      }
     }
+    return false;
   }
-  return false;
-}
+
+  private validatePathForWhitespace(...paths: string[]): boolean {
+      // Check all provided paths for whitespaces
+      return paths.some(path => /\s/.test(path));
+    }
 
   public clearIDfErrorStatus() {
     this.setEspIdfErrorStatus("");

src/views/setup/store/index.ts

@@ -240,18 +240,32 @@ export const actions: ActionTree<IState, any> = {
 
 export const mutations: MutationTree<IState> = {
   setEspIdfPath(state, espIdf: string) {
-    const newState = state;
+    const newState = { ...state };
     newState.espIdf = espIdf;
+
+    const errorStatus = checkVersionAndPath(newState.selectedEspIdfVersion.name, espIdf);
+    if (errorStatus) {
+      newState.espIdfErrorStatus = errorStatus;
+      Object.assign(state, newState);
+      return;
+    }
+
+    newState.espIdfErrorStatus = '';
     Object.assign(state, newState);
   },
+
   setEspIdfContainerPath(state, espIdfContainer: string) {
-    const newState = state;
+    const newState = { ...state };
     newState.espIdfContainer = espIdfContainer;
-    Object.assign(state, newState);
-  },
-  setEspIdfErrorStatus(state, errorStatus: string) {
-    const newState = state;
-    newState.espIdfErrorStatus = errorStatus;
+
+    const errorStatus = checkVersionAndPath(newState.selectedEspIdfVersion.name, espIdfContainer);
+    if (errorStatus) {
+      newState.espIdfErrorStatus = errorStatus;
+      Object.assign(state, newState);
+      return;
+    }
+
+    newState.espIdfErrorStatus = '';
     Object.assign(state, newState);
   },
   setEspIdfVersionList(state, espIdfVersionList: IEspIdfLink[]) {
@@ -332,11 +346,6 @@ export const mutations: MutationTree<IState> = {
     newState.platform = platform;
     Object.assign(state, newState);
   },
-  setPyExecErrorStatus(state, errorStatus: string) {
-    const newState = state;
-    newState.pyExecErrorStatus = errorStatus;
-    Object.assign(state, newState);
-  },
   setPyReqsLog(state, pyReqsLog: string) {
     const newState = state;
     newState.pyReqsLog = pyReqsLog;
@@ -356,9 +365,22 @@ export const mutations: MutationTree<IState> = {
     Object.assign(state, newState);
   },
   setSelectedEspIdfVersion(state, selectedEspIdfVersion: IEspIdfLink) {
-    const newState = state;
+    const newState = { ...state };
     newState.selectedEspIdfVersion = selectedEspIdfVersion;
     newState.idfDownloadStatus.id = selectedEspIdfVersion.name;
+
+    let errorStatus = checkVersionAndPath(selectedEspIdfVersion.name, newState.espIdf);
+    if (!errorStatus) {
+      errorStatus = checkVersionAndPath(selectedEspIdfVersion.name, newState.espIdfContainer);
+    }
+
+    if (errorStatus) {
+      newState.espIdfErrorStatus = errorStatus;
+      Object.assign(state, newState);
+      return;
+    }
+
+    newState.espIdfErrorStatus = '';
     Object.assign(state, newState);
   },
   setSelectedSysPython(state, selectedSysPython: string) {
@@ -377,8 +399,18 @@ export const mutations: MutationTree<IState> = {
     Object.assign(state, newState);
   },
   setToolsFolder(state, toolsFolder: string) {
-    const newState = state;
+    const newState = { ...state };
     newState.toolsFolder = toolsFolder;
+
+    const errorStatus = checkVersionAndPath(state.selectedEspIdfVersion.name, toolsFolder);
+
+    if (errorStatus) {
+      newState.pyExecErrorStatus = errorStatus;
+      Object.assign(state, newState);
+      return;
+    }
+
+    newState.pyExecErrorStatus = '';
     Object.assign(state, newState);
   },
   setToolChecksum(state, toolData: { name: string; checksum: boolean }) {
@@ -501,3 +533,23 @@ export const setupStore: StoreOptions<IState> = {
 Vue.use(Vuex);
 
 export const store = new Store(setupStore);
+
+// Helper functions
+
+// check the version and if a given path contains any whitespace
+function checkVersionAndPath(versionName: string, path: string) {
+  if (versionName) {
+    // Regular expression to match the version number in the format vX.X.X or release/vX.X
+    const match = versionName.match(/v(\d+(\.\d+)?(\.\d+)?)/);
+    if (match) {
+      const versionNumber = parseFloat(match[1]);
+
+      // Check if version is less than 5 and path contains whitespace
+      if (versionNumber < 5 && /\s/.test(path)) {
+        return "Whitespaces in path are not supported in versions lower than 5.0";
+      }
+    }
+  }
+
+  return '';
+}