tabs fix

Author: philippfromme

lib/components/TaskTesting/TaskTesting.js

@@ -189,7 +189,7 @@ export default function TaskTesting({
   /** @type {React.MutableRefObject<import('../../types').ElementOutputVariables|null>} */
   const liveVariablesRef = useRef(null);
 
-  const [ executionCompleted, setExecutionCompleted ] = useState(false);
+  const [ selectedTabIndex, setSelectedTabIndex ] = useState(0);
 
   // Initialize services once the injector is available
   useEffect(() => {
@@ -385,7 +385,6 @@ export default function TaskTesting({
         });
       }
 
-      setExecutionCompleted(true);
       onTaskExecutionFinished(element, result);
     };
 
@@ -464,7 +463,9 @@ export default function TaskTesting({
 
     onTaskExecutionStarted(element);
 
-    setExecutionCompleted(false);
+    // Switch to Output tab to show execution progress and results
+    setSelectedTabIndex(1);
+
     setExecutionLog([]);
     executionLogRef.current.reset();
     setLiveVariables(null);
@@ -616,57 +617,42 @@ export default function TaskTesting({
           </div>
         </div>
         <div className={ `task-testing__container--body${isTaskExecuting ? ' task-testing__container--body-executing' : ''}` }>
-          { isTaskExecuting ? (
-            <Output
-              element={ element }
-              isConnectionConfigured={ isConnectionConfigured }
-              isTaskExecuting={ isTaskExecuting }
-              output={ output }
-              currentOperateUrl={ currentOperateUrl }
-              onResetOutput={ handleResetOutput }
-              taskExecutionStatus={ taskExecutionStatus || 'idle' }
-              executionLog={ executionLog }
-              tasklistBaseUrl={ tasklistBaseUrl }
-              liveVariables={ liveVariables }
-            />
-          ) : (
-            <TabContainer selectedIndex={ executionCompleted ? 1 : 0 }>
-              <TabContainer.Tab label="Input">
-                <Input
-                  allOutputs={ allOutputs }
-                  input={ input }
-                  onErrorChange={ setInputError }
-                  onResetInput={ handleResetInput }
-                  onSetInput={ handleSetInput }
-                  variablesForElement={ variablesForElement }
-                />
-              </TabContainer.Tab>
-              <TabContainer.Tab label="Output">
-                <Output
-                  element={ element }
-                  isConnectionConfigured={ isConnectionConfigured }
-                  isTaskExecuting={ isTaskExecuting }
-                  output={ output }
-                  currentOperateUrl={ currentOperateUrl }
-                  onResetOutput={ handleResetOutput }
-                  taskExecutionStatus={ taskExecutionStatus || 'idle' }
-                  executionLog={ output?.executionLog || [] }
-                  tasklistBaseUrl={ tasklistBaseUrl }
-                />
-              </TabContainer.Tab>
-              { pluginsProviderValue.getPlugins('output.body.tab')
-                .map(plugin => ({
-                  label: plugin.label,
-                  content: plugin.render?.({ element, output, isTaskExecuting, executionLog }) || plugin.children
-                }))
-                .filter(tab => tab.content)
-                .map((tab, index) => (
-                  <TabContainer.Tab key={ index } label={ tab.label }>
-                    { tab.content }
-                  </TabContainer.Tab>
-                )) }
-            </TabContainer>
-          ) }
+          <Tabs selectedIndex={ selectedTabIndex } setSelectedIndex={ setSelectedTabIndex }>
+            <Tabs.Tab label="Input" disabled={ isTaskExecuting }>
+              <Input
+                allOutputs={ allOutputs }
+                input={ input }
+                onErrorChange={ setInputError }
+                onResetInput={ handleResetInput }
+                onSetInput={ handleSetInput }
+                variablesForElement={ variablesForElement }
+              />
+            </Tabs.Tab>
+            <Tabs.Tab label="Output">
+              <Output
+                element={ element }
+                isConnectionConfigured={ isConnectionConfigured }
+                isTaskExecuting={ isTaskExecuting }
+                output={ output }
+                currentOperateUrl={ currentOperateUrl }
+                onResetOutput={ handleResetOutput }
+                taskExecutionStatus={ taskExecutionStatus || 'idle' }
+                executionLog={ output?.executionLog || [] }
+                tasklistBaseUrl={ tasklistBaseUrl }
+              />
+            </Tabs.Tab>
+            { pluginsProviderValue.getPlugins('output.body.tab')
+              .map(plugin => ({
+                label: plugin.label,
+                content: plugin.render?.({ element, output, isTaskExecuting, executionLog }) || plugin.children
+              }))
+              .filter(tab => tab.content)
+              .map((tab, index) => (
+                <Tabs.Tab key={ index } label={ tab.label } disabled={ isTaskExecuting }>
+                  { tab.content }
+                </Tabs.Tab>
+              )) }
+          </Tabs>
         </div>
       </div>
       {children}
@@ -738,17 +724,21 @@ function HeaderStatusText({ isTaskExecuting, isConnectionConfigured, taskExecuti
   return null;
 }
 
-
-function TabContainer({ selectedIndex = 0, children }) {
-  const [ activeIndex, setActiveIndex ] = useState(selectedIndex);
-
-  useEffect(() => {
-    setActiveIndex(selectedIndex);
-  }, [ selectedIndex ]);
-
+/**
+ * Simple Tabs component to switch between Input and Output views. The Tabs.Tab
+ * component is used as a marker for the Tabs component to identify the tabs. It
+ * does not render anything itself.
+ *
+ * @param {Object} props
+ * @param {number} [props.selectedIndex=0] - The index of the initially selected tab.
+ * @param {function} [props.setSelectedIndex] - Function to set the index of the selected tab.
+ * @param {React.ReactNode} props.children - The tab elements.
+ * @returns {React.ReactElement} The rendered Tabs component.
+ */
+function Tabs({ selectedIndex = 0, setSelectedIndex = () => {}, children }) {
   const tabs = useMemo(() => {
     return /** @type {React.ReactElement[]} */ (React.Children.toArray(children).filter(
-      child => /** @type {React.ReactElement} */ (child).type === TabItem
+      child => /** @type {React.ReactElement} */ (child).type === Tab
     ));
   }, [ children ]);
 
@@ -760,26 +750,33 @@ function TabContainer({ selectedIndex = 0, children }) {
             key={ index }
             type="button"
             role="tab"
-            className={ classNames('task-testing-tabs__tab', { 'task-testing-tabs__tab--active': index === activeIndex }) }
-            aria-selected={ index === activeIndex }
-            onClick={ () => setActiveIndex(index) }
+            className={ classNames('task-testing-tabs__tab', {
+              'task-testing-tabs__tab--active': index === selectedIndex,
+              'task-testing-tabs__tab--disabled': tab.props.disabled
+            }) }
+            aria-selected={ index === selectedIndex }
+            onClick={ () => setSelectedIndex(index) }
+            disabled={ tab.props.disabled }
           >
             { tab.props.label }
           </button>
         )) }
       </div>
       <div className="task-testing-tabs__panel">
-        { tabs[activeIndex]?.props.children }
+        { tabs[selectedIndex]?.props.children }
       </div>
     </>
   );
 }
 
 /**
- * @param {{ label?: string, children?: React.ReactNode }} _props
+ * This component is used as a marker for the Tabs component to identify the
+ * tabs. It does not render anything itself.
+ *
+ * @param {{ label?: string, children?: React.ReactNode, disabled?: boolean }} _props
  */
-function TabItem(_props) {
+function Tab(_props) {
   return null;
 }
 
-TabContainer.Tab = TabItem;
+Tabs.Tab = Tab;

lib/style/style.scss

@@ -67,6 +67,10 @@
       color: #161616;
       border-bottom-color: #0f62fe;
     }
+
+    &.task-testing-tabs__tab--disabled {
+      color: #8d8d8d;
+    }
   }
 
   .task-testing-tabs__panel {