Template Explorer Modal

.circleci/config.yml

@@ -14,7 +14,7 @@ parameters:
     default: ""
   run_file_tests_keyword:
     type: enum
-    enum: ["", "ai_panel", "ballot", "ballot_0_4_14", "blockchain", "bottom-bar", "circom", "code_format", "compile_run_widget", "compiler_api", "contract_flattener", "contract_verification", "debugger", "defaultLayout", "deploy_vefiry", "dgit_github", "dgit_local", "editor", "editorHoverContext", "editorReferences", "editor_error_marker", "editor_line_text", "eip1153", "eip7702", "environment-account", "erc721", "etherscan_api", "expandAllFolders", "fileExplorer", "fileManager_api", "file_decorator", "file_explorer_context_menu", "file_explorer_dragdrop", "file_explorer_multiselect", "generalSettings", "gist", "homeTab", "importFromGithub", "layout", "learneth", "libraryDeployment", "matomo-bot-detection", "matomo-consent", "mcp_all_resources", "mcp_all_tools", "mcp_server_complete", "mcp_server_connection", "mcp_server_lifecycle", "mcp_workflow_integration", "metamask", "migrateFileSystem", "noir", "pinned_contracts", "pinned_plugin", "pluginManager", "plugin_api", "providers", "proxy_oz_v4", "proxy_oz_v5", "proxy_oz_v5_non_shanghai_runtime", "publishContract", "quickDapp_metamask", "recorder", "remixd", "runAndDeploy", "script-runner", "search", "signingMessage", "sol2uml", "solidityImport", "solidityUnittests", "specialFunctions", "staticAnalysis", "stressEditor", "templates", "terminal", "transactionExecution", "txListener", "uniswap_v4_core", "url", "usingWebWorker", "verticalIconsPanel", "vm_state", "vyper_api", "walkthrough", "workspace", "workspace_git"]
+    enum: ["", "ai_panel", "ballot", "ballot_0_4_14", "blockchain", "bottom-bar", "circom", "code_format", "compile_run_widget", "compiler_api", "contract_flattener", "contract_verification", "debugger", "defaultLayout", "deploy_vefiry", "dgit_github", "dgit_local", "editor", "editorHoverContext", "editorReferences", "editor_error_marker", "editor_line_text", "eip1153", "eip7702", "environment-account", "erc721", "etherscan_api", "expandAllFolders", "fileExplorer", "fileManager_api", "file_decorator", "file_explorer_context_menu", "file_explorer_dragdrop", "file_explorer_multiselect", "generalSettings", "gist", "homeTab", "importFromGithub", "layout", "learneth", "libraryDeployment", "matomo-bot-detection", "matomo-consent", "mcp_all_resources", "mcp_all_tools", "mcp_server_complete", "mcp_server_connection", "mcp_server_lifecycle", "mcp_workflow_integration", "metamask", "migrateFileSystem", "noir", "pinned_contracts", "pinned_plugin", "pluginManager", "plugin_api", "providers", "proxy_oz_v4", "proxy_oz_v5", "proxy_oz_v5_non_shanghai_runtime", "publishContract", "quickDapp_metamask", "recorder", "remixd", "runAndDeploy", "script-runner", "search", "signingMessage", "sol2uml", "solidityImport", "solidityUnittests", "specialFunctions", "staticAnalysis", "stressEditor", "template_exp_modal", "terminal", "transactionExecution", "txListener", "uniswap_v4_core", "url", "usingWebWorker", "verticalIconsPanel", "vm_state", "vyper_api", "walkthrough", "workspace", "workspace_git"]
     default: ""
   run_flaky_tests:
     type: boolean

apps/remix-ide-e2e/src/tests/ballot.test.ts

@@ -96,16 +96,23 @@ module.exports = {
     browser
       .clickLaunchIcon('filePanel')
       .click('*[data-id="workspacesSelect"]')
+      .pause(2000)
       .click('*[data-id="workspacecreate"]')
-      .waitForElementPresent('*[data-id="create-remixDefault"]')
-      .scrollAndClick('*[data-id="create-remixDefault"]')
-      .waitForElementVisible('*[data-id="modalDialogCustomPromptTextCreate"]')
-      .scrollAndClick('*[data-id="modalDialogCustomPromptTextCreate"]')
-      .setValue('*[data-id="modalDialogCustomPromptTextCreate"]', 'workspace_remix_default')
-      // eslint-disable-next-line dot-notation
-      .execute(function () { document.querySelector('*[data-id="modalDialogCustomPromptTextCreate"]')['value'] = 'workspace_remix_default' })
-      .modalFooterOKClick('TemplatesSelection')
+      .waitForElementVisible('*[data-id="template-explorer-modal-react"]')
+      .waitForElementVisible('*[data-id="template-explorer-template-container"]')
+      .click('*[data-id="template-explorer-template-container"]')
+      .waitForElementPresent('*[data-id="template-card-remixDefault-0"]')
+      .click('*[data-id="template-card-remixDefault-0"]')
+      .waitForElementVisible('*[data-id="workspace-details-section"]')
+      .waitForElementVisible('*[data-id="default-workspace-name-edit-icon"]')
+      .click('*[data-id="default-workspace-name-edit-icon"]')
+      .waitForElementVisible('*[data-id="workspace-name-input"]')
+      .setValue('*[data-id="workspace-name-input"]', 'workspace_remix_default')
+      .click('*[data-id="default-workspace-name-edit-icon"]')
+      .waitForElementVisible('*[data-id="default-workspace-name-span"]')
+      .assert.textContains('*[data-id="default-workspace-name-span"]', 'WORKSPACE_REMIX_DEFAULT', 'Workspace name is correct')
       .pause(1000)
+      .click('*[data-id="validateWorkspaceButton"]')
       .waitForElementVisible('*[data-id="treeViewLitreeViewItemcontracts"]')
       .addFile('contracts/lib/storage/src/Storage.sol', { content: storageContract})
       .addFile('remappings.txt', { content: 'storage=contracts/lib/storage/src' })

apps/remix-ide-e2e/src/tests/circom.test.ts

@@ -13,10 +13,16 @@ module.exports = {
     browser
       .clickLaunchIcon('filePanel')
       .click('*[data-id="workspacesSelect"]')
+      .pause(2000)
       .click('*[data-id="workspacecreate"]')
-      .waitForElementPresent('*[data-id="create-semaphore"]')
-      .scrollAndClick('*[data-id="create-semaphore"]')
-      .modalFooterOKClick('TemplatesSelection')
+      .waitForElementVisible('*[data-id="template-explorer-modal-react"]')
+      .waitForElementVisible('*[data-id="template-explorer-template-container"]')
+      .click('*[data-id="template-explorer-template-container"]')
+      .waitForElementVisible('*[data-id="template-explorer-template-container"]')
+      .scrollInto('*[data-id="template-category-Circom ZKP"]')
+      .waitForElementVisible('*[data-id="template-card-semaphore-0"]')
+      .click('*[data-id="template-card-semaphore-0"]')
+      .click('*[data-id="validate-semaphoreworkspace-button"]')
       .waitForElementVisible('*[data-id="treeViewLitreeViewItemcircuits"]')
       .waitForElementVisible('*[data-id="treeViewLitreeViewItemcircuits/semaphore.circom"]')
       .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts"]')
@@ -33,8 +39,8 @@ module.exports = {
   'Should compile a simple circuit using editor play button #group1': function (browser: NightwatchBrowser) {
     browser
       .click('[data-id="treeViewLitreeViewItemcircuits/simple.circom"]')
-      .waitForElementPresent('[data-path="Semaphore - 1/circuits/simple.circom"]')
-      .waitForElementVisible('[data-path="Semaphore - 1/circuits/simple.circom"]')
+      .waitForElementPresent('[data-path="circuits/simple.circom"]')
+      .waitForElementVisible('[data-path="circuits/simple.circom"]')
       .waitForElementPresent('[data-id="verticalIconsKindcircuit-compiler"]')
       .waitForElementVisible('[data-id="verticalIconsKindcircuit-compiler"]')
       .click('[data-id="compile-action"]')
@@ -65,8 +71,8 @@ module.exports = {
   'Should compile a simple circuit using compile button in circom plugin #group2': function (browser: NightwatchBrowser) {
     browser
       .click('[data-id="treeViewLitreeViewItemcircuits/simple.circom"]')
-      .waitForElementPresent('[data-path="Semaphore - 1/circuits/simple.circom"]')
-      .waitForElementVisible('[data-path="Semaphore - 1/circuits/simple.circom"]')
+      .waitForElementPresent('[data-path="circuits/simple.circom"]')
+      .waitForElementVisible('[data-path="circuits/simple.circom"]')
       .clickLaunchIcon('circuit-compiler')
       .frame(0)
       .waitForElementPresent('button[data-id="compile_circuit_btn"]')
@@ -114,8 +120,8 @@ module.exports = {
   'Should compile a simple circuit using CTRL + S from the editor #group3': function (browser: NightwatchBrowser) {
     browser
       .click('[data-id="treeViewLitreeViewItemcircuits/simple.circom"]')
-      .waitForElementPresent('[data-path="Semaphore - 1/circuits/simple.circom"]')
-      .waitForElementVisible('[data-path="Semaphore - 1/circuits/simple.circom"]')
+      .waitForElementPresent('[data-path="circuits/simple.circom"]')
+      .waitForElementVisible('[data-path="circuits/simple.circom"]')
       .waitForElementPresent('[data-id="verticalIconsKindcircuit-compiler"]')
       .waitForElementVisible('[data-id="verticalIconsKindcircuit-compiler"]')
       .perform(function () {
@@ -134,8 +140,8 @@ module.exports = {
   'Should display warnings for compiled circuit without pragma version #group4': function (browser: NightwatchBrowser) {
     browser
       .click('[data-id="treeViewLitreeViewItemcircuits/simple.circom"]')
-      .waitForElementPresent('[data-path="Semaphore - 1/circuits/simple.circom"]')
-      .waitForElementVisible('[data-path="Semaphore - 1/circuits/simple.circom"]')
+      .waitForElementPresent('[data-path="circuits/simple.circom"]')
+      .waitForElementVisible('[data-path="circuits/simple.circom"]')
       .setEditorValue(warningCircuit)
       .clickLaunchIcon('circuit-compiler')
       .frame(0)
@@ -184,9 +190,9 @@ module.exports = {
       .clickLaunchIcon('filePanel')
       .click('*[data-id="workspacesSelect"]')
       .click('*[data-id="workspacecreate"]')
-      .waitForElementPresent('*[data-id="create-hashchecker"]')
-      .scrollAndClick('*[data-id="create-hashchecker"]')
-      .modalFooterOKClick('TemplatesSelection')
+      .waitForElementPresent('*[data-id="template-card-hashchecker-1"]')
+      .click('*[data-id="template-card-hashchecker-1"]')
+      .click('*[data-id="validate-hashcheckerworkspace-button"]')
       .pause(100)
       .waitForElementVisible('*[data-id="treeViewLitreeViewItemcircuits"]')
       .waitForElementVisible('*[data-id="treeViewLitreeViewItemcircuits/calculate_hash.circom"]')
@@ -204,8 +210,8 @@ module.exports = {
   'Should run groth16 trusted setup script for hash checker #group5': function (browser: NightwatchBrowser) {
     browser
       .click('[data-id="treeViewLitreeViewItemscripts/groth16/groth16_trusted_setup.ts"]')
-      .waitForElementPresent('[data-path="Hash Checker - 1/scripts/groth16/groth16_trusted_setup.ts"]')
-      .waitForElementVisible('[data-path="Hash Checker - 1/scripts/groth16/groth16_trusted_setup.ts"]')
+      .waitForElementPresent('[data-path="scripts/groth16/groth16_trusted_setup.ts"]')
+      .waitForElementVisible('[data-path="scripts/groth16/groth16_trusted_setup.ts"]')
       .waitForElementPresent('[data-id="verticalIconsKindcircuit-compiler"]')
       .waitForElementVisible('[data-id="verticalIconsKindcircuit-compiler"]')
       .click('[data-id="compile-action"]')
@@ -218,8 +224,8 @@ module.exports = {
   'Should run groth16 zkproof script for hash checker #group5': function (browser: NightwatchBrowser) {
     browser
       .click('[data-id="treeViewLitreeViewItemscripts/groth16/groth16_zkproof.ts"]')
-      .waitForElementPresent('[data-path="Hash Checker - 1/scripts/groth16/groth16_zkproof.ts"]')
-      .waitForElementVisible('[data-path="Hash Checker - 1/scripts/groth16/groth16_zkproof.ts"]')
+      .waitForElementPresent('[data-path="scripts/groth16/groth16_zkproof.ts"]')
+      .waitForElementVisible('[data-path="scripts/groth16/groth16_zkproof.ts"]')
       .waitForElementPresent('[data-id="verticalIconsKindcircuit-compiler"]')
       .waitForElementVisible('[data-id="verticalIconsKindcircuit-compiler"]')
       .click('[data-id="compile-action"]')
@@ -238,8 +244,8 @@ module.exports = {
   'Should run plonk trusted setup script for hash checker #group6': function (browser: NightwatchBrowser) {
     browser
       .click('[data-id="treeViewLitreeViewItemscripts/plonk/plonk_trusted_setup.ts"]')
-      .waitForElementPresent('[data-path="Hash Checker - 1/scripts/plonk/plonk_trusted_setup.ts"]')
-      .waitForElementVisible('[data-path="Hash Checker - 1/scripts/plonk/plonk_trusted_setup.ts"]')
+      .waitForElementPresent('[data-path="scripts/plonk/plonk_trusted_setup.ts"]')
+      .waitForElementVisible('[data-path="scripts/plonk/plonk_trusted_setup.ts"]')
       .waitForElementPresent('[data-id="verticalIconsKindcircuit-compiler"]')
       .waitForElementVisible('[data-id="verticalIconsKindcircuit-compiler"]')
       .click('[data-id="compile-action"]')
@@ -252,8 +258,8 @@ module.exports = {
   'Should run plonk zkproof script for hash checker #group6': function (browser: NightwatchBrowser) {
     browser
       .click('[data-id="treeViewLitreeViewItemscripts/plonk/plonk_zkproof.ts"]')
-      .waitForElementPresent('[data-path="Hash Checker - 1/scripts/plonk/plonk_zkproof.ts"]')
-      .waitForElementVisible('[data-path="Hash Checker - 1/scripts/plonk/plonk_zkproof.ts"]')
+      .waitForElementPresent('[data-path="scripts/plonk/plonk_zkproof.ts"]')
+      .waitForElementVisible('[data-path="scripts/plonk/plonk_zkproof.ts"]')
       .waitForElementPresent('[data-id="verticalIconsKindcircuit-compiler"]')
       .waitForElementVisible('[data-id="verticalIconsKindcircuit-compiler"]')
       .click('[data-id="compile-action"]')

apps/remix-ide-e2e/src/tests/erc721.test.ts

@@ -15,16 +15,18 @@ module.exports = {
   'Deploy SampleERC721 whose bytecode is very similar to ERC721': function (browser: NightwatchBrowser) {
     browser.clickLaunchIcon('filePanel')
       .click('*[data-id="workspacesSelect"]')
+      .pause(2000)
       .click('*[data-id="workspacecreate"]')
-      // create contract
-      .waitForElementPresent('*[data-id="create-hashchecker"]')
-      .scrollAndClick('*[data-id="create-ozerc721"]')
-      .waitForElementVisible('*[data-id="modalDialogCustomPromptTextCreate"]')
-      .scrollAndClick('*[data-id="modalDialogCustomPromptTextCreate"]')
-      .setValue('*[data-id="modalDialogCustomPromptTextCreate"]', 'workspace_erc721')
-      // eslint-disable-next-line dot-notation
-      .execute(function () { document.querySelector('*[data-id="modalDialogCustomPromptTextCreate"]')['value'] = 'workspace_erc721' })
-      .modalFooterOKClick('TemplatesSelection')
+      .waitForElementVisible('*[data-id="template-explorer-modal-react"]')
+      .waitForElementVisible('*[data-id="template-explorer-template-container"]')
+      .click('*[data-id="template-explorer-template-container"]')
+      .waitForElementVisible('*[data-id="template-explorer-template-container"]')
+      .waitForElementVisible('*[data-id="contract-wizard-topcard"]')
+      .click('*[data-id="contract-wizard-topcard"]')
+      .waitForElementVisible('*[data-id="contract-wizard-container"]')
+      .click('*[data-id="contract-wizard-contract-type-dropdown"]')
+      .click('*[data-id="contract-wizard-contract-type-dropdown-item-erc721"]')
+      .click('*[data-id="contract-wizard-validate-workspace-button"]')
       .pause(100)
       .waitForElementVisible('*[data-id="treeViewLitreeViewItemcontracts"]')
       .waitForElementVisible('*[data-id="treeViewLitreeViewItemcontracts/MyToken.sol"]')

apps/remix-ide-e2e/src/tests/noir.test.ts

@@ -14,9 +14,9 @@ module.exports = {
       .clickLaunchIcon('filePanel')
       .click('*[data-id="workspacesSelect"]')
       .click('*[data-id="workspacecreate"]')
-      .waitForElementPresent('*[data-id="create-multNr"]')
-      .scrollAndClick('*[data-id="create-multNr"]')
-      .modalFooterOKClick('TemplatesSelection')
+      .waitForElementPresent('*[data-id="template-card-multNr-0"]')
+      .scrollAndClick('*[data-id="template-card-multNr-0"]')
+      .click('*[data-id="validate-multNrworkspace-button"]')
       .waitForElementVisible('*[data-id="treeViewLitreeViewItemsrc"]')
       .waitForElementVisible('*[data-id="treeViewLitreeViewItemsrc/main.nr"]')
       .waitForElementVisible('*[data-id="treeViewLitreeViewItemtests"]')

apps/remix-ide-e2e/src/tests/pinned_contracts.test.ts

@@ -43,15 +43,23 @@ module.exports = {
     browser
       .clickLaunchIcon('filePanel')
       .click('*[data-id="workspacesSelect"]')
+      .pause(2000)
       .click('*[data-id="workspacecreate"]')
-      .waitForElementPresent('*[data-id="create-remixDefault"]')
-      .scrollAndClick('*[data-id="create-remixDefault"]')
-      .waitForElementVisible('*[data-id="modalDialogCustomPromptTextCreate"]')
-      .scrollAndClick('*[data-id="modalDialogCustomPromptTextCreate"]')
-      .setValue('*[data-id="modalDialogCustomPromptTextCreate"]', 'workspace_remix_default')
-      // eslint-disable-next-line dot-notation
-      .execute(function () { document.querySelector('*[data-id="modalDialogCustomPromptTextCreate"]')['value'] = 'workspace_remix_default' })
-      .modalFooterOKClick('TemplatesSelection')
+      .waitForElementVisible('*[data-id="template-explorer-modal-react"]')
+      .waitForElementVisible('*[data-id="template-explorer-template-container"]')
+      .click('*[data-id="template-explorer-template-container"]')
+      .waitForElementPresent('*[data-id="template-card-remixDefault-0"]')
+      .click('*[data-id="template-card-remixDefault-0"]')
+      .waitForElementVisible('*[data-id="workspace-details-section"]')
+      .waitForElementVisible('*[data-id="default-workspace-name-edit-icon"]')
+      .click('*[data-id="default-workspace-name-edit-icon"]')
+      .waitForElementVisible('*[data-id="workspace-name-input"]')
+      .setValue('*[data-id="workspace-name-input"]', 'workspace_remix_default')
+      .click('*[data-id="default-workspace-name-edit-icon"]')
+      .waitForElementVisible('*[data-id="default-workspace-name-span"]')
+      .assert.textContains('*[data-id="default-workspace-name-span"]', 'WORKSPACE_REMIX_DEFAULT', 'Workspace name is correct')
+      .pause(1000)
+      .click('*[data-id="validateWorkspaceButton"]')
       .clickLaunchIcon('udapp')
       .assert.elementPresent('*[data-id="deployedContracts"]')
       .assert.textContains('*[data-id="deployedContractsBadge"]', '0')

apps/remix-ide-e2e/src/tests/script-runner.test.ts

@@ -72,10 +72,16 @@ const tests = {
       .pause(2000)
       .waitForElementVisible('*[data-id="workspacesSelect"]')
       .click('*[data-id="workspacesSelect"]')
+      .pause(2000)
       .click('*[data-id="workspacecreate"]')
-      .waitForElementPresent('*[data-id="create-semaphore"]')
-      .scrollAndClick('*[data-id="create-semaphore"]')
-      .modalFooterOKClick('TemplatesSelection')
+      .waitForElementVisible('*[data-id="template-explorer-modal-react"]')
+      .waitForElementVisible('*[data-id="template-explorer-template-container"]')
+      .click('*[data-id="template-explorer-template-container"]')
+      .waitForElementVisible('*[data-id="template-explorer-template-container"]')
+      .scrollInto('*[data-id="template-category-Circom ZKP"]')
+      .waitForElementVisible('*[data-id="template-card-semaphore-0"]')
+      .click('*[data-id="template-card-semaphore-0"]')
+      .click('*[data-id="validate-semaphoreworkspace-button"]')
       // .waitForElementVisible('*[data-id="treeViewLitreeViewItemcircuits/semaphore.circom"]')
       .waitForElementVisible({
         locateStrategy: 'xpath',
@@ -95,9 +101,9 @@ const tests = {
       .click('*[data-id="workspacesSelect"]')
       .click('*[data-id="workspacecreate"]')
       // .click('*[data-id="workspacesSelect"]')
-      .waitForElementVisible('*[data-id="create-introToEIP7702"]')
-      .click('*[data-id="create-introToEIP7702"]')
-      .modalFooterOKClick('TemplatesSelection')
+      .waitForElementVisible('*[data-id="template-card-simpleEip7702-2"]')
+      .click('*[data-id="template-card-simpleEip7702-2"]')
+      .click('*[data-id="validate-simpleEip7702workspace-button"]')
       // .waitForElementVisible('*[data-id="treeViewLitreeViewItemcontracts/Example7702.sol"]')
       .waitForElementVisible({
         locateStrategy: 'xpath',
@@ -107,8 +113,8 @@ const tests = {
         locateStrategy: 'xpath',
         selector: "//li[@data-id='UIScriptRunner' and @role='tab']"
       })
-      .waitForElementVisible('[data-id="sr-notloaded-default"]')
-      .waitForElementVisible('[data-id="sr-loaded-ethers6"]')
+      .scrollAndClick('*[data-id="sr-notloaded-ethers6"]')
+      .scrollInto('[data-id="sr-notloaded-default"]')
   },
   'reset to default after template': function (browser: NightwatchBrowser) {
     browser