Update webviews to vscode style (#1554)

* menuconfig test new vscode tree

* refactor checkbox

* add select component

* update checkbox smaller code

* add int component

* add string and hex components

* update menu title style

* add settings tree rm vscode elements dependency

* update menuconfig search bar

* add vscode style in new project wizard

* update troubleshoot form

* project config editor updates

* update cmakelists editor ui

* tracing

* size changes

* partition table

* nvs partition table

* update welcome page

* rm examples

* remove example panel

* fix welcome panel replace description

* fix sanitize html input

* rm examples ui code

* fix ui create project test

* update extractPlainText

* fix data config id in string input

* add missing data-config-id tags

* add open folder in create test component test

* dismiss notifications test component

* increase timeout

* test using notification action

* update ui workflow to see screenshots

* update vscode extension tester

* use specific vscode version

* update advanced configured test

* update advanced expect

* use min version extension tester

* test basename

* dirname instead

* update testWorkspace to minimal project

* update idf installed msg logic

* update msg installed logic

* rm display none for espidf status

* rm unnecesary changes

* clean and check doc cmd output

* add env vars in workflow

* switch back from new project webview

* update menuconfig string test element

* fix tests

* add warn message for reload nvs webview

* fix lint

* ui changes for menuconfig and welcome page

* rm node modules codicon reference

* fix settings tree this ref

* rm create from templates cmd, add new project created page with open button

* update docs remove show examples command

* collapsed items menuconfig newProject update partitionTable errors

* add error modal for nvs partition editor

* fix close icon not shown in cmakelists editor

* fix partition table unit tests update new project ui test

* fix create blink example duplicated button click

Author: brianignacio5

.github/workflows/ui-test.yml

@@ -17,19 +17,36 @@ jobs:
         with:
           submodules: "recursive"
 
-      - name: Run ui test
-        uses: ./.github/actions/idf
-        id: idfuitest
+      - name: Install ESP-IDF
+        run: |
+          ESP_IDF_VERSION="v5.3.2"
+          sudo apt update
+          sudo apt install -y python3-pip git wget flex bison gperf python3-venv cmake ninja-build ccache libffi-dev libssl-dev dfu-util
+          wget https://dl.espressif.com/github_assets/espressif/esp-idf/releases/download/${ESP_IDF_VERSION}/esp-idf-${ESP_IDF_VERSION}.zip -O esp-idf.zip
+          unzip esp-idf.zip -d ~/
+          rm esp-idf.zip
+          mv ~/esp-idf-${ESP_IDF_VERSION} ~/esp-idf
+          ~/esp-idf/install.sh
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
-          run: /ui-entrypoint.sh
+          node-version: '20'
 
-      - name: See if screenshots are generated
-        if: failure()
-        run: ls /github/workspace/test-resources/screenshots
+      - name: Install Yarn dependencies
+        run: |
+          yarn
+          yarn install
+
+      - name: Run Yarn script with xvfb
+        run: |
+          export IDF_TOOLS_PATH=~/.espressif
+          export IDF_PATH=~/esp-idf
+          source ~/esp-idf/export.sh && xvfb-run --auto-servernum yarn ci-test
 
       - name: Upload screenshots
         uses: actions/upload-artifact@v4
         if: failure()
         with: 
           name: screenshots
-          path: /github/workspace/test-resources/screenshots
+          path: /home/runner/work/vscode-esp-idf-extension/vscode-esp-idf-extension/test-resources/screenshots

README.md

@@ -165,13 +165,7 @@ Press <kbd>F1</kbd> or click menu `View` -> `Command Palette...` to show Visual
             <td></td>
         </tr>
         <tr>
-            <td rowspan=11 align="center">Basic</td>
-            <td>Show Example Projects</td>
-            <td>Launch UI to show examples from selected framework and allow you to create a project from them. This command will show frameworks already configured in the extension, so to view ESP-Rainmaker examples, you need to run the <strong>Install ESP-Rainmaker</strong> first (or set the equivalent setting idf.espRainmakerPath), and then execute this command to see the examples.</td>
-            <td></td>
-            <td></td>
-        </tr>
-        <tr>
+            <td rowspan=10 align="center">Basic</td>
             <td>Set Espressif Device Target</td>
             <td>This will set the target for the current project (IDF_TARGET). Similar to <strong>idf.py set-target</strong>. For example, if you want to use ESP32 or ESP32-C3, you need to execute this command.</td>
             <td></td>
@@ -233,19 +227,7 @@ Press <kbd>F1</kbd> or click menu `View` -> `Command Palette...` to show Visual
             <td><kbd>Ctrl</kbd> <kbd>E</kbd> <kbd>D</kbd></td>
         </tr>
         <tr>
-            <td rowspan=5 align="center">Project creation</td>
-            <td>Show Example Projects</td>
-            <td>Launch UI to show examples from selected framework and allow you to create a project from them. This command will show frameworks already configured in the extension, so to view ESP-Rainmaker examples, you need to run the <strong>Install ESP-Rainmaker</strong> first (or set the equivalent setting idf.espRainmakerPath), and then execute this command to see the examples.</td>
-            <td></td>
-            <td></td>
-        </tr>
-        <tr>
-            <td>Create Project from Extension Template</td>
-            <td>Create an ESP-IDF project using one of the extension template projects.</td>
-            <td><kbd>⌘</kbd> <kbd>I</kbd> <kbd>C</kbd></td>
-            <td><kbd>Ctrl</kbd> <kbd>E</kbd> <kbd>C</kbd></td>
-        </tr>
-        <tr>
+            <td rowspan=4 align="center">Project creation</td>
             <td>Create New ESP-IDF Component</td>
             <td>Create a new component in the current directory based on ESP-IDF component template.</td>
             <td></td>
@@ -563,7 +545,7 @@ See an example in the [debugging](https://docs.espressif.com/projects/vscode-esp
 
 ## Available Tasks in `tasks.json`
 
-A template `tasks.json` is included when creating a project using **ESP-IDF: Create Project from Extension Template**. These tasks can be executed by pressing <kbd>F1</kbd>, writing `Tasks: Run task` and selecting one of the following:
+A template `tasks.json` is included when creating a project using **ESP-IDF: New Project**. These tasks can be executed by pressing <kbd>F1</kbd>, writing `Tasks: Run task` and selecting one of the following:
 
 1. `Build` - Build Project
 2. `Set Target to esp32`

README_CN.md

@@ -165,13 +165,7 @@ ESP-IDF 扩展在 VS Code 底部蓝色窗口的状态栏中提供了一系列命
             <td></td>
         </tr>
         <tr>
-            <td rowspan=11 align="center">基础命令</td>
-            <td>展示示例项目</td>
-            <td>启动 UI 以显示所选框架的示例，可从中创建新项目。此命令将显示扩展中已配置的框架，如果想查看 ESP-Rainmaker 示例，需要先运行 <strong>安装 ESP-Rainmaker</strong> 命令（或设置相应的 idf.espRainmakerPath），然后执行此命令以查看示例。</td>
-            <td></td>
-            <td></td>
-        </tr>
-        <tr>
+            <td rowspan=10 align="center">基础命令</td>
             <td>设置乐鑫设备目标</td>
             <td>该命令为当前项目设置目标 (IDF_TARGET)，效果等同于 <strong>idf.py set-target</strong>。例如，若想使用 ESP32 或 ESP32-C3，则需执行此命令。</td>
             <td></td>
@@ -233,13 +227,7 @@ ESP-IDF 扩展在 VS Code 底部蓝色窗口的状态栏中提供了一系列命
             <td><kbd>Ctrl</kbd> <kbd>E</kbd> <kbd>D</kbd></td>
         </tr>
         <tr>
-            <td rowspan=5 align="center">创建项目</td>
-            <td>展示示例项目</td>
-            <td>启动 UI 以显示所选框架的示例，可从中创建新项目。此命令将显示扩展中已配置的框架，如果想查看 ESP-Rainmaker 示例，需要先运行 <strong>安装 ESP-Rainmaker</strong> 命令（或设置相应的 idf.espRainmakerPath），然后执行此命令以查看示例。</td>
-            <td></td>
-            <td></td>
-        </tr>
-        <tr>
+            <td rowspan=4 align="center">创建项目</td>
             <td>基于模板创建新项目</td>
             <td>使用扩展中的项目模板来创建一个新的 ESP-IDF 项目。</td>
             <td><kbd>⌘</kbd> <kbd>I</kbd> <kbd>C</kbd></td>

docs/LANG_CONTRIBUTE.md

@@ -12,7 +12,6 @@ Each file has a key value structure such as:
 
 ```json
 {
-  "espIdf.createFiles.title": "ESP-IDF: Create ESP-IDF Project from Extension Template",
   "englishTextOrTextId": "translationInNewLanguage"
 }
 ```

docs_espressif/en/additionalfeatures/app-tracing.rst

@@ -9,11 +9,11 @@ Let's open a ESP-IDF project. For this tutorial we will use the `system/app_trac
 
 - Navigate to **View** > **Command Palette**.
 
-- Type **ESP-IDF: Show Examples Projects**, select the command and choose ``Use Current ESP-IDF (/path/to/esp-idf)``.
+- Type **ESP-IDF: New Project**, select the command and choose ESP-IDF version to use.
 
 If you don't see the option, please review the setup in :ref:`Install ESP-IDF and Tools <installation>`.
 
-- A window will be open with a list a projects, go the **system** section and choose the ``app_trace_to_host``. You will see a **Create Project Using Example app_trace_to_host** button in the top and a description of the project below. Click the button and the project will be opened in a new window.
+- A window will be open with settings to configure the project. Later you can choose from a list a ESP-IDF examples, go the **system** section and choose the ``app_trace_to_host``. You will see a **Create Project Using Example app_trace_to_host** button in the top and a description of the project below. Click the button and the project will be opened in a new window.
 
 .. image:: ../../../media/tutorials/app_trace/app_tracing.png
 

docs_espressif/en/additionalfeatures/coverage.rst

@@ -14,11 +14,11 @@ Let's use the ESP-IDF `GCOV Example <https://github.com/espressif/esp-idf/tree/m
 
 - Navigate to **View** > **Command Palette**.
 
-- Type **ESP-IDF: Show Examples Projects** and choose ``Use Current ESP-IDF (/path/to/esp-idf)``.
+- Type **ESP-IDF: New Project** and choose ESP-IDF version to use.
 
 If you don't see the option, please review the current ESP-IDF setup in :ref:`Installation <installation>`.
 
-- A window will be open with a list a projects, go the **system** section and choose the ``gcov``. You will see a **Create Project Using Example gcov** button in the top and a description of the project below. Click **Create Project Using Example GCOV** button.
+- A window will be open with settings to configure the project. Later you can choose from a list a ESP-IDF examples, go the **system** section and choose the ``gcov``. You will see a **Create Project Using Example gcov** button in the top and a description of the project below. Click **Create Project Using Example GCOV** button.
 
 .. image:: ../../../media/tutorials/coverage/gcov_example.png
 

docs_espressif/en/additionalfeatures/heap-tracing.rst

@@ -7,11 +7,11 @@ Let's open a ESP-IDF project. For this tutorial we will use the ``system/sysview
 
 - Navigate to **View** > **Command Palette**.
 
-- Type **ESP-IDF: Show Examples Projects**, select the command and choose ``Use Current ESP-IDF (/path/to/esp-idf)``.
+- Type **ESP-IDF: New Project**, select the command and choose ESP-IDF version to use.
 
 If you don't see the option, please review the setup in :ref:`Install ESP-IDF and Tools <installation>`.
 
-- A window will be open with a list a projects, go the **system** section and choose the ``sysview_tracing_heap_log``. You will see a **Create Project Using Example sysview_tracing_heap_log** button in the top and a description of the project below. Click the button and the project will be opened in a new window.
+- A window will be open with settings to configure the project. Later you can choose from a list a ESP-IDF examples, go the **system** section and choose the ``sysview_tracing_heap_log``. You will see a **Create Project Using Example sysview_tracing_heap_log** button in the top and a description of the project below. Click the button and the project will be opened in a new window.
 
 .. image:: ../../../media/tutorials/heap_trace/sysview_tracing_heap_log.png
 

docs_espressif/en/additionalfeatures/install-esp-components.rst

@@ -20,7 +20,7 @@ For more information, refer to `ESP Component Registry Documentation <https://do
 Install Arduino-ESP32 as Component
 ----------------------------------
 
-The ``ESP-IDF: Add Arduino-ESP32 as ESP-IDF Component`` command adds `Arduino-ESP32 <https://github.com/espressif/arduino-esp32>`_ as an ESP-IDF component in your current directory (``${CURRENT_DIRECTORY}/components/arduino``). You can also use the ``ESP-IDF: Create Project from Extension Template`` command with the ``arduino-as-component`` template to create a new project directory that includes Arduino-ESP32 as an ESP-IDF component.
+The ``ESP-IDF: Add Arduino-ESP32 as ESP-IDF Component`` command adds `Arduino-ESP32 <https://github.com/espressif/arduino-esp32>`_ as an ESP-IDF component in your current directory (``${CURRENT_DIRECTORY}/components/arduino``).
 
 .. note::
 

docs_espressif/en/additionalfeatures/qemu.rst

@@ -13,7 +13,7 @@ ESP-IDF setup can include a fork of `Espressif QEMU fork <https://github.com/esp
 Development steps:
 
 1. Prepare a project folder in a container based on the dockerfile in the templates ``.devcontainer`` directory in this repository. For this you can:
-   - Create a project using **ESP-IDF: New Project**, **ESP-IDF: Show Examples Projects** or **ESP-IDF: Create Project from Extension Template** command which will include the ``.devcontainer`` directory.
+   - Create a project using **ESP-IDF: New Project** command which will include the ``.devcontainer`` directory.
    - Use the **ESP-IDF: Add Docker Container Configuration** command to add the ``.devcontainer`` files to the currently opened project directory.
 2. Use the **Remote Containers: Open Folder in Container..** command to open the folder within the container.
 3. The **Remote Containers** will build the container from the Dockerfile (if it has not been created before) and install this extension on the container.

docs_espressif/en/commands.rst

@@ -34,8 +34,6 @@ All commands start with ``ESP-IDF:``.
      - Set required values in your project SDKConfig to enable code coverage analysis.
    * - Configure project for ESP-Clang
      - Configure the current ESP-IDF project to use esp-clang as toolchain to use and configure LLVM Clang extension in settings.json.
-   * - Create Project from Extension Template
-     - Create an ESP-IDF project using one of the extension template projects.
    * - Create New ESP-IDF Component
      - Create a new component in the current directory based on ESP-IDF component template.
    * - Dispose of Current SDK Configuration Editor Server Process
@@ -126,8 +124,6 @@ All commands start with ``ESP-IDF:``.
      - This will set the target for the current project (IDF_TARGET). Similar to **idf.py set-target**. For example, if you want to use ESP32 or ESP32-C3, you need to execute this command.
    * - Set ESP-MATTER Device Path (ESP_MATTER_DEVICE_PATH)
      - The **ESP-IDF: Set ESP-MATTER Device Path (ESP_MATTER_DEVICE_PATH)** is used to define the device path for ESP-Matter. ESP-Matter is not supported in Windows.
-   * - Show Example Projects
-     - Launch UI to show examples from selected framework and allow you to create a project from them. This command will show frameworks already configured in the extension. To view ESP-Rainmaker examples, you need to run the **Install ESP-Rainmaker** first (or set the equivalent setting idf.espRainmakerPath), and then execute this command to see the examples.
    * - Show Ninja Build Summary
      - Execute the Chromium ninja-build-summary.py.
    * - Size Analysis of the Binaries