Fix deprecation warnings for antd <Collapse> components

CHANGELOG.unreleased.md

@@ -32,6 +32,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Fixed a bug in ND volume annotation downloads where the additionalAxes metadata had wrong indices. [#7592](https://github.com/scalableminds/webknossos/pull/7592)
 - Fixed a bug in proofreading aka editable mapping annotations where splitting would sometimes give the new id to the selected segment rather than to the split-off one. [#7608](https://github.com/scalableminds/webknossos/pull/7608)
 - Fixed small styling errors as a follow up to the antd v5 upgrade [#7612](https://github.com/scalableminds/webknossos/pull/7612)
+-Fixed deprecation warnings caused by Antd <Collapse> components. [#7610](https://github.com/scalableminds/webknossos/pull/7610)
 
 
 ### Removed

frontend/javascripts/admin/dataset/dataset_add_remote_view.tsx

@@ -39,7 +39,6 @@ import { Unicode } from "oxalis/constants";
 import { readFileAsText } from "libs/read_file";
 import * as Utils from "libs/utils";
 
-const { Panel } = Collapse;
 const FormItem = Form.Item;
 const RadioGroup = Radio.Group;
 
@@ -552,13 +551,20 @@ function AddZarrLayer({
       {exploreLog ? (
         <Row gutter={8}>
           <Col span={24}>
-            <Collapse defaultActiveKey="1">
-              <Panel header="Error Log" key="1">
-                <Hint style={{ width: "90%" }}>
-                  <pre style={{ whiteSpace: "pre-wrap" }}>{exploreLog}</pre>
-                </Hint>
-              </Panel>
-            </Collapse>
+            <Collapse
+              defaultActiveKey="1"
+              items={[
+                {
+                  key: "1",
+                  label: "Error Log",
+                  children: (
+                    <Hint style={{ width: "90%" }}>
+                      <pre style={{ whiteSpace: "pre-wrap" }}>{exploreLog}</pre>
+                    </Hint>
+                  ),
+                },
+              ]}
+            />
           </Col>
         </Row>
       ) : null}

frontend/javascripts/admin/tasktype/recommended_configuration_view.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, Col, Collapse, Form, Input, Row, Table, Button } from "antd";
+import { Checkbox, Col, Collapse, Form, Input, Row, Table, Button, CollapseProps } from "antd";
 import { FormInstance } from "antd/lib/form";
 import * as React from "react";
 import _ from "lodash";
@@ -9,7 +9,6 @@ import { validateUserSettingsJSON } from "types/validation";
 import { TDViewDisplayModeEnum } from "oxalis/constants";
 import features from "features";
 const FormItem = Form.Item;
-const { Panel } = Collapse;
 
 function getRecommendedConfigByCategory() {
   return {
@@ -138,79 +137,84 @@ export default function RecommendedConfigurationView({
     };
   });
 
+  const recommendedSettingsView = (
+    <Row gutter={32}>
+      <Col span={12}>
+        <div>
+          The recommended configuration will be displayed to users when starting to work on a task
+          with this task type. The user is able to accept or decline this recommendation.
+          <br />
+          <br />
+          <FormItem
+            name="recommendedConfiguration"
+            hasFeedback
+            rules={[
+              {
+                validator: (rule, value) =>
+                  enabled ? validateUserSettingsJSON(rule, value) : Promise.resolve(),
+              },
+            ]}
+          >
+            <Input.TextArea
+              spellCheck={false}
+              autoSize={{
+                minRows: 20,
+              }}
+              style={jsonEditStyle}
+            />
+          </FormItem>
+        </div>
+        <Button className="button-margin" onClick={() => removeSettings(form, "orthogonal")}>
+          Remove Orthogonal-only Settings
+        </Button>
+        <Button className="button-margin" onClick={() => removeSettings(form, "flight")}>
+          Remove Flight/Oblique-only Settings
+        </Button>
+        <Button className="button-margin" onClick={() => removeSettings(form, "volume")}>
+          Remove Volume-only Settings
+        </Button>
+      </Col>
+      <Col span={12}>
+        Valid settings and their default values: <br />
+        <br />
+        <Table
+          columns={columns}
+          dataSource={configurationEntries}
+          size="small"
+          pagination={false}
+          className="large-table"
+          scroll={{
+            x: "max-content",
+          }}
+        />
+      </Col>
+    </Row>
+  );
+
+  const collapseItems: CollapseProps["items"] = [
+    {
+      key: "config",
+      label: (
+        <React.Fragment>
+          <Checkbox
+            checked={enabled}
+            style={{
+              marginRight: 10,
+            }}
+          />{" "}
+          Add Recommended User Settings
+        </React.Fragment>
+      ),
+      showArrow: false,
+      children: recommendedSettingsView,
+    },
+  ];
+
   return (
     <Collapse
       onChange={(openedPanels) => onChangeEnabled(openedPanels.length === 1)}
-      // @ts-expect-error ts-migrate(2322) FIXME: Type 'string | null' is not assignable to type 'st... Remove this comment to see the full error message
-      activeKey={enabled ? "config" : null}
-    >
-      <Panel
-        key="config"
-        header={
-          <React.Fragment>
-            <Checkbox
-              checked={enabled}
-              style={{
-                marginRight: 10,
-              }}
-            />{" "}
-            Add Recommended User Settings
-          </React.Fragment>
-        }
-        showArrow={false}
-      >
-        <Row gutter={32}>
-          <Col span={12}>
-            <div>
-              The recommended configuration will be displayed to users when starting to work on a
-              task with this task type. The user is able to accept or decline this recommendation.
-              <br />
-              <br />
-              <FormItem
-                name="recommendedConfiguration"
-                hasFeedback
-                rules={[
-                  {
-                    validator: (rule, value) =>
-                      enabled ? validateUserSettingsJSON(rule, value) : Promise.resolve(),
-                  },
-                ]}
-              >
-                <Input.TextArea
-                  spellCheck={false}
-                  autoSize={{
-                    minRows: 20,
-                  }}
-                  style={jsonEditStyle}
-                />
-              </FormItem>
-            </div>
-            <Button className="button-margin" onClick={() => removeSettings(form, "orthogonal")}>
-              Remove Orthogonal-only Settings
-            </Button>
-            <Button className="button-margin" onClick={() => removeSettings(form, "flight")}>
-              Remove Flight/Oblique-only Settings
-            </Button>
-            <Button className="button-margin" onClick={() => removeSettings(form, "volume")}>
-              Remove Volume-only Settings
-            </Button>
-          </Col>
-          <Col span={12}>
-            Valid settings and their default values: <br />
-            <br />
-            <Table
-              columns={columns}
-              dataSource={configurationEntries}
-              size="small"
-              pagination={false}
-              className="large-table"
-              scroll={{
-                x: "max-content",
-              }}
-            />
-          </Col>
-        </Row>
-      </Panel>
-    </Collapse>
+      activeKey={enabled ? "config" : undefined}
+      items={collapseItems}
+    />
   );
 }