fix e2e for script runner ui

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

@@ -18,19 +18,28 @@ const tests = {
   },
   'Should load default script runner': function (browser: NightwatchBrowser) {
     browser
+      .waitForElementVisible('*[data-id="verticalIconsKindfilePanel"]')
+      .click('*[data-id="verticalIconsKindfilePanel"]')
+      .waitForElementVisible('*[data-id="treeViewDivtreeViewItemscripts"]')
+      .click('*[data-id="treeViewDivtreeViewItemscripts"]')
+      .waitForElementVisible('*[data-id="treeViewDivtreeViewItemscripts/deploy_with_ethers.ts"]')
+      .click('*[data-id="treeViewDivtreeViewItemscripts/deploy_with_ethers.ts"]')
+      .waitForElementVisible('button[data-id="script-config"]')
+      .click('button[data-id="script-config"]')
       .waitForElementVisible('[data-id="sr-loaded-default"]')
       .waitForElementVisible('[data-id="dependency-ethers-^5"]')
-            .waitForElementVisible('[data-id="sr-toggle-ethers6"]')
+      .waitForElementVisible('[data-id="sr-load-ethers6"]')
   },
   'Should load script runner ethers6': function (browser: NightwatchBrowser) {
     browser
-            .click('[data-id="sr-toggle-ethers6"]')
+      .click('[data-id="sr-load-ethers6"]')
       .waitForElementVisible('[data-id="sr-loaded-ethers6"]')
       .waitForElementPresent('[data-id="dependency-ethers-^6"]')
   },
   'Should have config file in .remix/script.config.json': function (browser: NightwatchBrowser) {
     browser
-            .clickLaunchIcon('filePanel')
+      .frameParent()
+      // .clickLaunchIcon('filePanel')
       .waitForElementVisible('[data-path=".remix"]')
       .waitForElementVisible('[data-id="treeViewDivDraggableItem.remix/script.config.json"]')
       .openFile('.remix/script.config.json')
@@ -73,9 +82,9 @@ const tests = {
         locateStrategy: 'xpath',
         selector: "//li[@data-id='UIScriptRunner' and @role='tab']"
       })
-            .waitForElementVisible('[data-id="sr-loaded-default"]')
+      .waitForElementVisible('[data-id="sr-load-default"]')
       .waitForElementVisible('[data-id="dependency-ethers-^5"]')
-            .waitForElementVisible('[data-id="sr-toggle-ethers6"]')
+      .waitForElementVisible('[data-id="sr-load-zksyncv6"]')
   },
   'switch to default workspace that should be on ethers6': function (browser: NightwatchBrowser) {
     browser
@@ -95,7 +104,6 @@ const tests = {
 
 module.exports = tests
 
-
 const deployWithEthersJs = `
 import { ethers } from 'ethers'
 

apps/remix-ide/src/app/tabs/locales/en/scriptrunnerui.json

@@ -0,0 +1,3 @@
+{
+  "scriptrunnerui.defaultSection": "{{configName}}"
+}

libs/remix-ui/scriptrunner/src/lib/components/config-section.tsx

@@ -0,0 +1,137 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { FormattedMessage } from 'react-intl'
+import { ProjectConfiguration } from '../../types';
+import { faCheck, faExclamationCircle, faRedoAlt, faToggleOn, faCaretDown, faCaretUp } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { CustomTooltip } from '@remix-ui/helper';
+
+export interface ConfigSectionProps {
+  _paq: any;
+  activeKey: string
+  setActiveKey: (key: string) => void
+  config: ProjectConfiguration
+  key: number
+  loadScriptRunner: (config: ProjectConfiguration) => void
+  activeConfig: ProjectConfiguration
+}
+
+export default function ConfigSection(props: ConfigSectionProps) {
+  const [isVisible, setIsVisible] = useState(true)
+
+  const handleAnimationEnd = () => {
+    setIsVisible(false);
+  }
+
+  const SectionHeader = () => {
+
+    return (
+      <section className="mr-1">
+        <div className="custom-control custom-radio">
+          <input
+            className="custom-control-input"
+            type="radio"
+            name="scriptrunner-config-radio"
+            value={props.config.name}
+            id={props.config.title || props.config.name}
+            onChange={() => {
+              props.setActiveKey(props.config.name)
+              props.loadScriptRunner(props.config)
+              props._paq.push(['trackEvent', 'scriptRunnerPlugin', 'loadScriptRunnerConfig', props.config.name])
+            }}
+            checked={props.activeKey === props.config.name}
+          />
+          <label className="form-check-label custom-control-label" htmlFor={`${props.config.title || props.config.name}`}
+            data-id={`sr-load-${props.config.name}`}>
+            <div data-id={`sr-loaded-${props.config.name}`} className="pl-2">{props.config.title || props.config.name}</div>
+          </label>
+        </div>
+      </section>
+    )
+  }
+
+  const Dependencies = () => {
+    const [showAll, setShowAll] = useState(false);
+    const visibleDeps = showAll ? props.config.dependencies : props.config.dependencies.slice(0, 4);
+    const hasMore = props.config.dependencies.length > 4;
+
+    return (
+      <>
+        {visibleDeps.map((dep, depIndex) => (
+          <li className="p-1 text-secondary" data-id={`dependency-${dep.name}-${dep.version}`} key={depIndex}>
+            {dep.name} (v{dep.version})
+          </li>
+        ))}
+        {hasMore && (
+          <li>
+            <a
+              href="#"
+              className="text-primary text-decoration-none"
+              onClick={(e) => {
+                e.preventDefault();
+                setShowAll(!showAll);
+              }}
+            >
+              {showAll ? 'Show less' : 'Show more'}
+              <FontAwesomeIcon icon={showAll ? faCaretUp : faCaretDown} className="ml-1" />
+            </a>
+          </li>
+        )}
+      </>
+    )
+  }
+
+  return (
+    <section className="mb-4">
+      <section className="d-flex flex-row ">
+        <SectionHeader />
+        <div className="d-flex flex-row ml-3">
+          {props.config.isLoading && <div className="d-flex flex-row pb-1 align-items-center justify-content-center">
+            <span>Loading config</span><i className="fas fa-spinner fa-spin ml-1"></i>
+          </div>}
+        </div>
+        <>
+          {!props.config.isLoading && !props.config.errorStatus && !props.config.error &&
+          <div onClick={() => props.loadScriptRunner(props.config)} className="pointer px-2 pb-1">
+            { props.activeConfig && props.activeConfig.name === props.config.name &&
+              <div className={`${!isVisible ? 'd-flex flex-row align-items-center justify-content-center pt-1' : 'd-flex flex-row pb-1 align-items-center justify-content-center'}`}>
+                {isVisible && <span onAnimationEnd={handleAnimationEnd} className="text-success" style={{ animation: 'fadeOut 5s forwards', animationFillMode: 'forwards' }}>Config loaded</span>}
+                <FontAwesomeIcon data-id={`sr-loaded-${props.config.name}`} className="text-success ml-3" icon={faCheck}></FontAwesomeIcon>
+              </div>
+            }
+          </div>
+          }
+          <div className="w-25"></div>
+        </>
+      </section>
+      <section id="errorSection">
+        {props.config.errorStatus && props.config.error && <div className="text-danger">
+          <CustomTooltip tooltipText={props.config.error}>
+            <FontAwesomeIcon data-id={`sr-error-${props.config.name}`} icon={faExclamationCircle}></FontAwesomeIcon>
+          </CustomTooltip>
+
+        </div>}
+        {!props.config.isLoading && props.config.errorStatus && props.config.error &&
+            <div
+              onClick={() => {
+                props.loadScriptRunner(props.config)
+                props._paq.push(['trackEvent', 'scriptRunnerPlugin', 'loadScriptRunnerConfig', props.config.name])
+              }}
+              className="pointer px-2"
+            >
+              <FontAwesomeIcon data-id={`sr-reload-${props.config.name}`} icon={faRedoAlt}></FontAwesomeIcon>
+            </div>
+        }
+      </section>
+      <section className="d-flex flex-column" style={{ width: '100%' }} >
+        <div className="mt-4 bg-light p-3 ">
+          <p className="text-dark text-monospace">{props.config.description}</p>
+          <p className="text-dark">Dependencies</p>
+          <ul className="list-unstyled ">
+            <Dependencies />
+          </ul>
+        </div>
+      </section>
+
+    </section>
+  )
+}

libs/remix-ui/scriptrunner/src/lib/script-runner-ui.tsx

@@ -5,6 +5,7 @@ import { faCaretDown, faCaretRight, faCheck, faExclamationCircle, faRedoAlt, faT
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { CustomScriptRunner } from "./custom-script-runner";
 import { CustomTooltip } from "@remix-ui/helper";
+import ConfigSection from "./components/config-section";
 const _paq = (window._paq = window._paq || []) // eslint-disable-line
 
 export interface ScriptRunnerUIProps {
@@ -33,8 +34,25 @@ export const ScriptRunnerUI = (props: ScriptRunnerUIProps) => {
   }
 
   return (
-    <div className="px-1 pt-2">
+    <div className="px-5">
-      <Accordion activeKey={activeKey} defaultActiveKey="default">
+      <div className="d-flex flex-column justify-content-between mt-4">
+        <div className="text-uppercase mb-3 text-dark h2" style={{ fontSize: 'x-large' }}>script configuration</div>
+        <div className="text-uppercase text-dark h3" style={{ fontSize: 'large' }}>choose a specific configuration for your script</div>
+      </div>
+      <div className="mt-5 d-flex flex-column gap-3 mb-4">
+        {configurations.filter((config) => config.publish).map((config: ProjectConfiguration, index) => (
+          <ConfigSection
+            activeKey={activeKey}
+            setActiveKey={setActiveKey}
+            config={config}
+            key={index}
+            loadScriptRunner={loadScriptRunner}
+            _paq={_paq}
+            activeConfig={activeConfig}
+          />
+        ))}
+      </div>
+      {/* <Accordion activeKey={activeKey} defaultActiveKey="default">
         {configurations.filter((config) => config.publish).map((config: ProjectConfiguration, index) => (
           <div key={index}>
             <div className="d-flex align-items-baseline justify-content-between">
@@ -97,7 +115,7 @@ export const ScriptRunnerUI = (props: ScriptRunnerUIProps) => {
             </Accordion.Collapse>
           </div>))
         }
-      </Accordion>
+      </Accordion> */}
       {enableCustomScriptRunner &&
         <CustomScriptRunner
           customConfig={props.customConfig}

libs/remix-ui/scriptrunner/src/lib/scriptrunner.css

@@ -0,0 +1,14 @@
+.remixui_spanfade {
+  opacity: 1;
+  animation: fadeOut 3s forwards;
+}
+
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}