feat(demo): beautify testrun panel style (#524)

apps/demo-free-layout/src/components/sidebar/sidebar-renderer.tsx

@@ -91,7 +91,8 @@ export const SidebarRenderer = () => {
       visible={visible}
       onCancel={handleClose}
       closable={false}
-      width={360}
+      motion={false}
+      width={368}
       headerStyle={{
         display: 'none',
       }}

apps/demo-free-layout/src/components/testrun/testrun-button/index.tsx

@@ -79,7 +79,7 @@ export function TestRunButton(props: { disabled: boolean }) {
   return (
     <>
       {button}
-      <TestRunSidePanel visible={visible} onCancel={() => setVisible((v) => !v)} />
+      <TestRunSidePanel visible={visible} onCancel={() => setVisible(false)} />
     </>
   );
 }

apps/demo-free-layout/src/components/testrun/testrun-panel/index.module.less

@@ -7,22 +7,21 @@
   .title {
     font-size: 15px;
     font-weight: 500;
-    margin-bottom: 10px;
     color: #333;
   }
 
   .error {
     color: red;
     font-size: 14px;
-    margin-top: 30px;
   }
 
   .code-editor-container {
-    height: 400px;
+    min-height: 200px;
+    max-height: 400px;
     background: #fff;
     padding: 8px 8px 8px 4px;
     border-radius: 4px;
-    border: 1px solid #52649a12;
+    border: 1px solid #52649a0f;
 
     :global(.cm-editor) {
       height: 100% !important;
@@ -30,11 +29,13 @@
     }
 
     :global(.cm-scroller) {
-      height: 400px !important;
+      min-height: 200px !important;
+      max-height: 400px !important;
     }
 
     :global(.cm-content) {
-      min-height: 400px !important;
+      min-height: 200px !important;
+      max-height: 400px !important;
     }
   }
 }
@@ -55,9 +56,9 @@
 
 .button {
   border-radius: 8px;
-  margin-bottom: 16px;
-  width: 100%;
+  width: 326px;
   height: 40px;
+  margin: 16px;
 
   &.running {
     background-color: rgba(87, 104, 161, 0.08) !important; // override semi style
@@ -69,3 +70,59 @@
     color: #fff;
   }
 }
+
+
+.testrun-panel-container {
+  background: rgb(251, 251, 251);
+  margin: 8px 8px 8px 0;
+  height: calc(100vh - 40px);
+  border-radius: 8px;
+  border: 1px solid rgba(82, 100, 154, 0.13);
+  padding: 8px 0 8px 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .testrun-panel-header {
+    background: var(#fcfcff);
+    border-bottom: 1px solid rgba(82, 100, 154, 0.13);
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    display: flex;
+    height: 40px;
+    justify-content: space-between;
+    min-height: 40px;
+    width: 100%;
+    align-items: center;
+
+    .testrun-panel-title {
+      font-size: 16px;
+      font-weight: 500;
+      margin: 8px 8px 8px 16px;
+    }
+
+    .testrun-panel-close {
+      margin: 8px 16px 8px 8px;
+    }
+  }
+
+  .testrun-panel-content {
+    height: calc(100% - 40px);
+    margin: 8px 8px 8px 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow: auto;
+    margin-bottom: 72px;
+  }
+
+  .testrun-panel-footer {
+    border-top: 1px solid rgba(82, 100, 154, 0.13);
+    height: 40px;
+    position: fixed;
+    background: #fbfbfb;
+    height: 72px;
+    bottom: 16px;
+    border-radius: 0 0 8px 8px;
+  }
+}

apps/demo-free-layout/src/components/testrun/testrun-panel/index.tsx

@@ -3,16 +3,17 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { FC, useEffect, useState } from 'react';
+import { FC, useContext, useEffect, useState } from 'react';
 
 import { WorkflowInputs, WorkflowOutputs } from '@flowgram.ai/runtime-interface';
 import { useService } from '@flowgram.ai/free-layout-editor';
 import { CodeEditor } from '@flowgram.ai/form-materials';
 import { Button, SideSheet } from '@douyinfe/semi-ui';
-import { IconPlay, IconSpin, IconStop } from '@douyinfe/semi-icons';
+import { IconClose, IconPlay, IconSpin, IconStop } from '@douyinfe/semi-icons';
 
 import { NodeStatusGroup } from '../node-status-bar/group';
 import { WorkflowRuntimeService } from '../../../plugins/runtime-plugin/runtime-service';
+import { SidebarContext } from '../../../context';
 
 import styles from './index.module.less';
 
@@ -23,6 +24,8 @@ interface TestRunSidePanelProps {
 
 export const TestRunSidePanel: FC<TestRunSidePanelProps> = ({ visible, onCancel }) => {
   const runtimeService = useService(WorkflowRuntimeService);
+  const { nodeId: sidebarNodeId, setNodeId } = useContext(SidebarContext);
+
   const [isRunning, setRunning] = useState(false);
   const [value, setValue] = useState<string>(`{}`);
   const [errors, setErrors] = useState<string[]>();
@@ -56,7 +59,9 @@ export const TestRunSidePanel: FC<TestRunSidePanelProps> = ({ visible, onCancel
     onCancel();
   };
 
+  // runtime effect
   useEffect(() => {
+    setNodeId(undefined);
     const disposer = runtimeService.onResultChanged(({ result, errors }) => {
       setRunning(false);
       setResult(result);
@@ -69,6 +74,13 @@ export const TestRunSidePanel: FC<TestRunSidePanelProps> = ({ visible, onCancel
     return () => disposer.dispose();
   }, []);
 
+  // sidebar effect
+  useEffect(() => {
+    if (sidebarNodeId) {
+      onCancel();
+    }
+  }, [sidebarNodeId]);
+
   const renderRunning = (
     <div className={styles['testrun-panel-running']}>
       <IconSpin spin size="large" />
@@ -78,7 +90,7 @@ export const TestRunSidePanel: FC<TestRunSidePanelProps> = ({ visible, onCancel
 
   const renderForm = (
     <div className={styles['testrun-panel-form']}>
-      <div className={styles.title}>Input</div>
+      <div className={styles.title}>Input Form</div>
       <div className={styles['code-editor-container']}>
         <CodeEditor languageId="json" value={value} onChange={setValue} />
       </div>
@@ -87,8 +99,8 @@ export const TestRunSidePanel: FC<TestRunSidePanelProps> = ({ visible, onCancel
           {e}
         </div>
       ))}
-      <NodeStatusGroup title="Inputs" data={result?.inputs} optional disableCollapse />
-      <NodeStatusGroup title="Outputs" data={result?.outputs} optional disableCollapse />
+      <NodeStatusGroup title="Inputs Result" data={result?.inputs} optional disableCollapse />
+      <NodeStatusGroup title="Outputs Result" data={result?.outputs} optional disableCollapse />
     </div>
   );
 
@@ -107,10 +119,37 @@ export const TestRunSidePanel: FC<TestRunSidePanelProps> = ({ visible, onCancel
       title="Test Run"
       visible={visible}
       mask={false}
+      motion={false}
       onCancel={onClose}
-      footer={renderButton}
+      width={368}
+      headerStyle={{
+        display: 'none',
+      }}
+      bodyStyle={{
+        padding: 0,
+      }}
+      style={{
+        background: 'none',
+        boxShadow: 'none',
+      }}
     >
-      {isRunning ? renderRunning : renderForm}
+      <div className={styles['testrun-panel-container']}>
+        <div className={styles['testrun-panel-header']}>
+          <div className={styles['testrun-panel-title']}>Test Run</div>
+          <Button
+            className={styles['testrun-panel-title']}
+            type="tertiary"
+            icon={<IconClose />}
+            size="small"
+            theme="borderless"
+            onClick={onClose}
+          />
+        </div>
+        <div className={styles['testrun-panel-content']}>
+          {isRunning ? renderRunning : renderForm}
+        </div>
+        <div className={styles['testrun-panel-footer']}>{renderButton}</div>
+      </div>
     </SideSheet>
   );
 };