Script Runner UI Refactor

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

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

apps/remix-ide/src/app/tabs/script-runner-ui.tsx

@@ -18,7 +18,7 @@ const profile = {
   icon: 'assets/img/solid-gear-circle-play.svg',
   description: 'Configure the dependencies for running scripts.',
   kind: '',
-  location: 'sidePanel',
+  location: 'mainPanel',
   version: packageJson.version,
   maintainedBy: 'Remix'
 }
@@ -394,4 +394,4 @@ export class ScriptRunnerUIPlugin extends ViewPlugin {
     }
   }
 
-}
+}

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-list-${props.config.name}`}>
+            <div data-id={`sr-list-${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/custom-script-runner.tsx

@@ -165,4 +165,4 @@ export const CustomScriptRunner = (props: ScriptRunnerUIProps) => {
         </button>)}
     </div>
   );
-}
+}

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

@@ -1,10 +1,12 @@
 import React, { useEffect, useState } from "react";
-import { Accordion, Button } from "react-bootstrap";
+import { Accordion, Button, Form } from "react-bootstrap";
 import { customScriptRunnerConfig, ProjectConfiguration } from "../types";
 import { faCaretDown, faCaretRight, faCheck, faExclamationCircle, faRedoAlt, faToggleOn } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { CustomScriptRunner } from "./custom-script-runner";
 import { CustomTooltip } from "@remix-ui/helper";
+import { FormattedMessage } from "react-intl";
+import ConfigSection from "./components/config-section";
 const _paq = (window._paq = window._paq || []) // eslint-disable-line
 
 export interface ScriptRunnerUIProps {
@@ -33,8 +35,25 @@ export const ScriptRunnerUI = (props: ScriptRunnerUIProps) => {
   }
 
   return (
-    <div className="px-1">
-      <Accordion activeKey={activeKey} defaultActiveKey="default">
+    <div className="px-5">
+      <div className="d-flex flex-column justify-content-between mt-4">
+        <div className="text-uppercase mb-3 text-dark" style={{ fontSize: 'x-large' }}>script configuration</div>
+        <div className="text-uppercase text-white" 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 +116,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;
+  }
+}

libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx

@@ -243,7 +243,7 @@ export const TabsUI = (props: TabsUIProps) => {
                 data-id="script-config"
                 className="btn text-dark border-left ml-2 pr-0 py-0 d-flex"
                 onClick={async () => {
-                  props.plugin.call('menuicons', 'select', 'scriptRunnerBridge')
+                  props.plugin.call('manager', 'activatePlugin', 'scriptRunnerBridge')
                 }}
               >
                 <i className="fa-kit fa-solid-gear-circle-play"></i>