Fix antd deprecation warnings for Tabs.TabPane

CHANGELOG.unreleased.md

@@ -30,6 +30,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Exploring HTTP uris of unknown hosts no longer causes an exception error message to be displayed. [#7422](https://github.com/scalableminds/webknossos/pull/7422)
 - Fixed the initialization of the dark theme if it was active during page load. [#7446](https://github.com/scalableminds/webknossos/pull/7446)
 - Fixed a rare bug in ad-hoc meshing for voxelytics-created segmentations with agglomerate mappings. [#7449](https://github.com/scalableminds/webknossos/pull/7449)
+- Fixed several deprecation warning for using antd's Tabs.TabPane components. [#7469]
 
 ### Removed
 

frontend/javascripts/admin/dataset/dataset_add_view.tsx

@@ -1,6 +1,6 @@
 import type { RouteComponentProps } from "react-router-dom";
 import { withRouter } from "react-router-dom";
-import { Tabs, Modal, Button, Layout } from "antd";
+import { Tabs, Modal, Button, Layout, TabsProps } from "antd";
 import { DatabaseOutlined, UploadOutlined } from "@ant-design/icons";
 import React, { useState } from "react";
 import { connect } from "react-redux";
@@ -13,7 +13,6 @@ import features from "features";
 import { getDatastores } from "admin/admin_rest_api";
 import { useFetch } from "libs/react_helpers";
 
-const { TabPane } = Tabs;
 const { Content, Sider } = Layout;
 
 enum DatasetAddViewTabs {
@@ -107,34 +106,34 @@ function DatasetAddView({ history }: RouteComponentProps) {
     ? (defaultActiveTabFromHash as DatasetAddViewTabs)
     : DatasetAddViewTabs.UPLOAD;
 
+  const tabs: TabsProps["items"] = [
+    {
+      label: (
+        <span>
+          <UploadOutlined />
+          Upload Dataset
+        </span>
+      ),
+      key: DatasetAddViewTabs.UPLOAD,
+      children: <DatasetUploadView datastores={datastores} onUploaded={handleDatasetAdded} />,
+    },
+    {
+      label: (
+        <span>
+          <DatabaseOutlined />
+          Add Remote Dataset
+        </span>
+      ),
+      key: DatasetAddViewTabs.REMOTE,
+      children: <DatasetAddRemoteView datastores={datastores} onAdded={handleDatasetAdded} />,
+    },
+  ];
+
   return (
     <React.Fragment>
       <Layout>
         <Content>
-          <Tabs defaultActiveKey={defaultActiveKey} className="container">
-            <TabPane
-              tab={
-                <span>
-                  <UploadOutlined />
-                  Upload Dataset
-                </span>
-              }
-              key={DatasetAddViewTabs.UPLOAD}
-            >
-              <DatasetUploadView datastores={datastores} onUploaded={handleDatasetAdded} />
-            </TabPane>
-            <TabPane
-              tab={
-                <span>
-                  <DatabaseOutlined />
-                  Add Remote Dataset
-                </span>
-              }
-              key={DatasetAddViewTabs.REMOTE}
-            >
-              <DatasetAddRemoteView datastores={datastores} onAdded={handleDatasetAdded} />
-            </TabPane>
-          </Tabs>
+          <Tabs defaultActiveKey={defaultActiveKey} className="container" items={tabs} />
         </Content>
         <VoxelyticsBanner />
       </Layout>

frontend/javascripts/admin/task/task_create_view.tsx

@@ -1,35 +1,34 @@
 import { BarsOutlined, ScheduleOutlined } from "@ant-design/icons";
-import { Tabs } from "antd";
+import { Tabs, TabsProps } from "antd";
 import React from "react";
 import TaskCreateBulkView from "admin/task/task_create_bulk_view";
 import TaskCreateFormView from "admin/task/task_create_form_view";
-const { TabPane } = Tabs;
 
-const TaskCreateView = () => (
-  <Tabs defaultActiveKey="1" className="container">
-    <TabPane
-      tab={
+const TaskCreateView = () => {
+  const tabs: TabsProps["items"] = [
+    {
+      label: (
         <span>
           <ScheduleOutlined />
           Create Task
         </span>
-      }
-      key="1"
-    >
-      <TaskCreateFormView taskId={null} />
-    </TabPane>
-    <TabPane
-      tab={
+      ),
+      key: "1",
+      children: <TaskCreateFormView taskId={null} />,
+    },
+    {
+      label: (
         <span>
           <BarsOutlined />
           Bulk Creation
         </span>
-      }
-      key="2"
-    >
-      <TaskCreateBulkView />
-    </TabPane>
-  </Tabs>
-);
+      ),
+      key: "2",
+      children: <TaskCreateBulkView />,
+    },
+  ];
+
+  return <Tabs defaultActiveKey="1" className="container" items={tabs} />;
+};
 
 export default TaskCreateView;

frontend/javascripts/admin/voxelytics/task_view.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { JSONTree } from "react-json-tree";
-import { Progress, Tabs, Tooltip } from "antd";
+import { Progress, Tabs, TabsProps, Tooltip } from "antd";
 // @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module 'reac... Remove this comment to see the full error message
 import Markdown from "react-remarkable";
 import {
@@ -15,9 +15,6 @@ import LogTab from "./log_tab";
 import StatisticsTab from "./statistics_tab";
 import { runStateToStatus, useTheme } from "./utils";
 import { formatNumber } from "libs/format_utils";
-
-const { TabPane } = Tabs;
-
 function labelRenderer(_keyPath: Array<string | number>) {
   const keyPath = _keyPath.slice().reverse();
   const divWithId = <div id={`label-${keyPath.join(".")}`}>{keyPath.slice(-1)[0]}</div>;
@@ -50,6 +47,98 @@ function TaskView({
   const ingoingEdges = dag.edges.filter((edge) => edge.target === taskName);
   const [theme, invertTheme] = useTheme();
 
+  const configTab = (
+    <>
+      <p>
+        Class: <span style={{ fontFamily: "monospace" }}>{task.task}</span>
+      </p>
+      <JSONTree
+        data={task.config}
+        hideRoot
+        shouldExpandNode={shouldExpandNode}
+        labelRenderer={labelRenderer}
+        theme={theme}
+        invertTheme={invertTheme}
+      />
+    </>
+  );
+
+  const logTab =
+    runId != null ? (
+      <LogTab
+        workflowHash={workflowHash}
+        runId={runId}
+        taskName={taskInfo.taskName}
+        isRunning={taskInfo.state === VoxelyticsRunState.RUNNING}
+        beginTime={taskInfo.beginTime}
+        endTime={taskInfo.endTime}
+      />
+    ) : (
+      <p>Please select a specific run.</p>
+    );
+
+  const tabs: TabsProps["items"] = [{ label: "Config", key: "1", children: configTab }];
+  if (task.description != null)
+    tabs.unshift({
+      label: "Description",
+      key: "0",
+      children: (
+        <Markdown
+          source={task.description}
+          options={{
+            html: false,
+            breaks: true,
+            linkify: true,
+          }}
+        />
+      ),
+    });
+
+  if (Object.keys(artifacts).length > 0)
+    tabs.push({
+      label: "Output Artifacts",
+      key: "2",
+      children: (
+        <ArtifactsViewer
+          workflowHash={workflowHash}
+          runId={runId}
+          taskName={taskName}
+          artifacts={artifacts}
+        />
+      ),
+    });
+
+  if (Object.keys(task.inputs).length > 0)
+    tabs.push({
+      label: "Input Artifacts",
+      key: "3",
+      children: <ul>{renderInputs(task.inputs, ingoingEdges, onSelectTask)}</ul>,
+    });
+
+  if (
+    [
+      VoxelyticsRunState.COMPLETE,
+      VoxelyticsRunState.RUNNING,
+      VoxelyticsRunState.STALE,
+      VoxelyticsRunState.FAILED,
+      VoxelyticsRunState.CANCELLED,
+    ].includes(taskInfo.state)
+  ) {
+    tabs.push({ label: "Logs", key: "4", children: logTab });
+    tabs.push({
+      label: "Statistics",
+      key: "5",
+      children: (
+        <StatisticsTab
+          workflowHash={workflowHash}
+          runId={runId}
+          taskName={taskInfo.taskName}
+          isRunning={taskInfo.state === VoxelyticsRunState.RUNNING}
+        />
+      ),
+    });
+  }
+
   return (
     <div>
       {[
@@ -119,86 +208,7 @@ function TaskView({
           </span>
         </div>
       )}
-      <Tabs defaultActiveKey="1">
-        {task.description != null ? (
-          <TabPane tab="Description" key="0">
-            <Markdown
-              source={task.description}
-              options={{
-                html: false,
-                breaks: true,
-                linkify: true,
-              }}
-            />
-          </TabPane>
-        ) : null}
-        <TabPane tab="Config" key="1">
-          <p>
-            Class: <span style={{ fontFamily: "monospace" }}>{task.task}</span>
-          </p>
-          <JSONTree
-            data={task.config}
-            hideRoot
-            shouldExpandNode={shouldExpandNode}
-            labelRenderer={labelRenderer}
-            theme={theme}
-            invertTheme={invertTheme}
-          />
-        </TabPane>
-        {Object.keys(artifacts).length > 0 ? (
-          <TabPane tab="Output Artifacts" key="2">
-            <ArtifactsViewer
-              workflowHash={workflowHash}
-              runId={runId}
-              taskName={taskName}
-              artifacts={artifacts}
-            />
-          </TabPane>
-        ) : null}
-        {Object.keys(task.inputs).length > 0 ? (
-          <TabPane tab="Input Artifacts" key="3">
-            <ul>{renderInputs(task.inputs, ingoingEdges, onSelectTask)}</ul>
-          </TabPane>
-        ) : null}
-        {[
-          VoxelyticsRunState.COMPLETE,
-          VoxelyticsRunState.RUNNING,
-          VoxelyticsRunState.STALE,
-          VoxelyticsRunState.FAILED,
-          VoxelyticsRunState.CANCELLED,
-        ].includes(taskInfo.state) && (
-          <TabPane tab="Logs" key="4">
-            {runId != null ? (
-              <LogTab
-                workflowHash={workflowHash}
-                runId={runId}
-                taskName={taskInfo.taskName}
-                isRunning={taskInfo.state === VoxelyticsRunState.RUNNING}
-                beginTime={taskInfo.beginTime}
-                endTime={taskInfo.endTime}
-              />
-            ) : (
-              <p>Please select a specific run.</p>
-            )}
-          </TabPane>
-        )}
-        {[
-          VoxelyticsRunState.COMPLETE,
-          VoxelyticsRunState.RUNNING,
-          VoxelyticsRunState.STALE,
-          VoxelyticsRunState.FAILED,
-          VoxelyticsRunState.CANCELLED,
-        ].includes(taskInfo.state) && (
-          <TabPane tab="Statistics" key="5">
-            <StatisticsTab
-              workflowHash={workflowHash}
-              runId={runId}
-              taskName={taskInfo.taskName}
-              isRunning={taskInfo.state === VoxelyticsRunState.RUNNING}
-            />
-          </TabPane>
-        )}
-      </Tabs>
+      <Tabs defaultActiveKey="1" items={tabs} />
     </div>
   );
 }