WIP Upgrade to Antd v6

frontend/javascripts/admin/account/account_profile_view.tsx

@@ -1,7 +1,7 @@
 import { CheckOutlined, DownOutlined, EditOutlined } from "@ant-design/icons";
 import ChangeEmailView from "admin/auth/change_email_view";
 import { updateSelectedThemeOfUser } from "admin/rest_api";
-import { Button, Col, Dropdown, Row } from "antd";
+import { Button, Col, Dropdown, Row, Space } from "antd";
 import { useWkSelector } from "libs/react_hooks";
 import * as Utils from "libs/utils";
 import { useState } from "react";
@@ -94,9 +94,12 @@ function AccountProfileView() {
     {
       title: "Theme",
       content: (
-        <Dropdown.Button menu={{ items: themeItems }} trigger={["click"]} icon={<DownOutlined />}>
-          {themeItems.find((item) => item.key === selectedTheme)?.label}
-        </Dropdown.Button>
+        <Space.Compact>
+          <Button>{themeItems.find((item) => item.key === selectedTheme)?.label}</Button>
+          <Dropdown menu={{ items: themeItems }} trigger={["click"]}>
+            <Button icon={<DownOutlined />} aria-label="Select theme" />
+          </Dropdown>
+        </Space.Compact>
       ),
     },
   ];

frontend/javascripts/admin/account/account_security_view.tsx

@@ -134,7 +134,7 @@ function AccountSecurityView() {
         </FormItem>
         <Alert
           type="info"
-          message={messages["auth.reset_logout"]}
+          title={messages["auth.reset_logout"]}
           showIcon
           style={{
             marginBottom: 24,

frontend/javascripts/admin/account/helpers/settings_card.tsx

@@ -20,9 +20,11 @@ export function SettingsCard({ title, content, tooltip, action, style }: Setting
             {tooltip != null ? (
               <Popover
                 content={tooltip}
-                overlayInnerStyle={{
-                  maxWidth: 250,
-                  wordWrap: "break-word",
+                styles={{
+                  container: {
+                    maxWidth: 250,
+                    wordWrap: "break-word",
+                  },
                 }}
               >
                 <InfoCircleOutlined style={{ marginLeft: 8 }} />

frontend/javascripts/admin/auth/authentication_modal.tsx

@@ -49,7 +49,7 @@ export default function AuthenticationModal({
   return (
     <Modal title={step} onCancel={onCancel} open={isOpen} footer={null} maskClosable={false}>
       <Alert
-        message={alertMessage}
+        title={alertMessage}
         type="info"
         showIcon
         style={{

frontend/javascripts/admin/auth/change_email_view.tsx

@@ -153,7 +153,7 @@ function ChangeEmailView({ onCancel }: { onCancel: () => void }) {
       </FormItem>
       <Alert
         type="info"
-        message="You will be logged out after successfully changing your email address."
+        title="You will be logged out after successfully changing your email address."
         showIcon
         style={{
           marginBottom: 24,

frontend/javascripts/admin/auth/login_form.tsx

@@ -61,7 +61,7 @@ function LoginForm({ layout, onLoggedIn, hideFooter, style }: Props) {
   const iframeWarning = getIsInIframe() ? (
     <Alert
       type="warning"
-      message={
+      title={
         <span>
           Authentication within an iFrame probably does not work due to third-party cookies being
           forbidden in most browsers. Please

frontend/javascripts/admin/dataset/composition_wizard/01_select_import_type.tsx

@@ -27,7 +27,7 @@ export default function SelectImportType({
         different ways to accomplish this:
         <div style={{ margin: 12 }}>
           <Radio.Group onChange={onChange} value={composeMode}>
-            <Space direction="vertical">
+            <Space orientation="vertical">
               <Radio value={"WITHOUT_TRANSFORMS"}>Combine datasets without any transforms</Radio>
               <Radio value={"WK_ANNOTATIONS"}>
                 Combine datasets by using skeleton annotations (NML)

frontend/javascripts/admin/dataset/dataset_components.tsx

@@ -28,7 +28,7 @@ export function CardContainer({
           marginLeft: "auto",
           marginRight: "auto",
         }}
-        bordered={false}
+        variant="borderless"
         title={
           <>
             <h3 style={{ lineHeight: "10px", marginTop: subtitle != null ? "22px" : "12px" }}>
@@ -133,9 +133,8 @@ export function DatastoreFormItem({
       initialValue={datastores.length ? datastores[0].url : null}
     >
       <Select
-        showSearch
+        showSearch={{ optionFilterProp: "label" }}
         placeholder="Select a Datastore"
-        optionFilterProp="label"
         disabled={disabled}
         style={{
           width: "100%",

frontend/javascripts/admin/dataset/dataset_upload_view.tsx

@@ -189,7 +189,7 @@ type UploadFormFieldTypes = {
 };
 
 export const dataPrivacyInfo = (
-  <Space direction="horizontal" size={4}>
+  <Space orientation="horizontal" size={4}>
     Per default, imported data is private and only visible within your organization.
     <a
       style={{ color: "var(--ant-color-primary)" }}
@@ -690,7 +690,7 @@ class DatasetUploadView extends React.Component<PropsWithFormAndRouter, State> {
     );
   };
 
-  onFormValueChange = (changedValues: UploadFormFieldTypes) => {
+  onFormValueChange = (changedValues: Partial<UploadFormFieldTypes>) => {
     if (changedValues.datastoreUrl) {
       this.setState({ datastoreUrl: changedValues.datastoreUrl });
       this.updateUnfinishedUploads();
@@ -722,7 +722,7 @@ class DatasetUploadView extends React.Component<PropsWithFormAndRouter, State> {
           {hasPricingPlanExceededStorage(this.props.organization) ? (
             <Alert
               type="error"
-              message={
+              title={
                 <>
                   Your organization has exceeded the available storage. Uploading new datasets is
                   disabled. Visit the{" "}
@@ -736,7 +736,7 @@ class DatasetUploadView extends React.Component<PropsWithFormAndRouter, State> {
 
           {unfinishedAndNotSelectedUploads.length > 0 && (
             <Alert
-              message={
+              title={
                 <>
                   Unfinished Dataset Uploads{" "}
                   <Tooltip
@@ -810,7 +810,7 @@ class DatasetUploadView extends React.Component<PropsWithFormAndRouter, State> {
           >
             {features().isWkorgInstance && (
               <Alert
-                message={
+                title={
                   <>
                     We are happy to help!
                     <br />

frontend/javascripts/admin/job/job_list_view.tsx

@@ -498,7 +498,6 @@ function JobListView() {
           }}
           style={{
             marginTop: 30,
-            marginBottom: 30,
           }}
         >
           <Column

frontend/javascripts/admin/onboarding.tsx

@@ -34,7 +34,6 @@ import type { APITeamMembership } from "types/api_types";
 import Store from "viewer/store";
 import { PERMISSIONS, PermissionsAndTeamsComponent } from "./user/permissions_and_teams_modal_view";
 
-const { Step } = Steps;
 const FormItem = Form.Item;
 
 function StepHeader({
@@ -153,7 +152,7 @@ export function OptionCard({ icon, header, children, action, height }: OptionCar
       }}
     >
       <Card
-        bordered={false}
+        variant="borderless"
         styles={{
           body: {
             textAlign: "center",
@@ -753,11 +752,8 @@ function OnboardingView() {
               style={{
                 height: 25,
               }}
-            >
-              {availableSteps.map(({ title }) => (
-                <Step title={title} key={title} />
-              ))}
-            </Steps>
+              items={availableSteps.map(({ title }) => ({ title, key: title }))}
+            />
           </Col>
         </Row>
         <div

frontend/javascripts/admin/organization/organization_cards.tsx

@@ -153,7 +153,7 @@ export function PlanExceededAlert({ organization }: { organization: APIOrganizat
     <Alert
       showIcon
       type="error"
-      message={message}
+      title={message}
       action={activeUser && isUserAllowedToRequestUpgrades(activeUser) ? actionButton : null}
       style={{ marginBottom: 20 }}
     />
@@ -181,7 +181,7 @@ export function PlanAboutToExceedAlert({ organization }: { organization: APIOrga
       <Alert
         showIcon
         type="warning"
-        message="Your WEBKNOSSOS plan is about to expire soon. Renew your plan now to avoid being downgraded, users being blocked, and losing access to features."
+        title="Your WEBKNOSSOS plan is about to expire soon. Renew your plan now to avoid being downgraded, users being blocked, and losing access to features."
         action={activeUser && isUserAllowedToRequestUpgrades(activeUser) ? actionButton : null}
         style={{ marginBottom: 20 }}
       />

frontend/javascripts/admin/organization/upgrade_plan_modal.tsx

@@ -17,6 +17,7 @@ import dayjs from "dayjs";
 import features from "features";
 import { formatCurrency } from "libs/format_utils";
 
+import type { GetRef } from "antd/lib";
 import renderIndependently from "libs/render_independently";
 import Toast from "libs/toast";
 import messages from "messages";
@@ -76,7 +77,7 @@ export function upgradeUserQuota() {
 }
 
 function UpgradeUserQuotaModal({ destroy }: { destroy: () => void }) {
-  const userInputRef = useRef<HTMLInputElement | null>(null);
+  const userInputRef = useRef<GetRef<typeof InputNumber> | null>(null);
 
   const handleUserUpgrade = async () => {
     if (userInputRef.current) {
@@ -120,7 +121,7 @@ export function upgradeStorageQuota() {
   renderIndependently((destroyCallback) => <UpgradeStorageQuotaModal destroy={destroyCallback} />);
 }
 function UpgradeStorageQuotaModal({ destroy }: { destroy: () => void }) {
-  const storageInputRef = useRef<HTMLInputElement | null>(null);
+  const storageInputRef = useRef<GetRef<typeof InputNumber> | null>(null);
 
   const handleStorageUpgrade = async () => {
     if (storageInputRef.current) {
@@ -315,7 +316,7 @@ export function orderWebknossosCredits() {
 }
 
 function OrderWebknossosCreditsModal({ destroy }: { destroy: () => void }) {
-  const userInputRef = useRef<HTMLInputElement | null>(null);
+  const userInputRef = useRef<GetRef<typeof InputNumber> | null>(null);
   const defaultCostPerCreditInEuro = formatCurrency(features().costPerCreditInEuro, "€");
   const defaultCostPerCreditInDollar = formatCurrency(features().costPerCreditInDollar, "$");
   const [creditCostAsString, setCreditCostsAsString] = useState<string>(

frontend/javascripts/admin/project/project_create_view.tsx

@@ -103,9 +103,8 @@ function ProjectCreateView() {
             ]}
           >
             <Select
-              showSearch
+              showSearch={{ optionFilterProp: "label" }}
               placeholder="Select a Team"
-              optionFilterProp="label"
               style={fullWidth}
               disabled={isEditMode}
               loading={isFetchingData}
@@ -127,9 +126,8 @@ function ProjectCreateView() {
             ]}
           >
             <Select
-              showSearch
               placeholder="Select a User"
-              optionFilterProp="label"
+              showSearch={{ optionFilterProp: "label" }}
               style={fullWidth}
               disabled={isEditMode}
               loading={isFetchingData}