Antd v6 Follow-ups

frontend/javascripts/admin/task/task_create_form_view.tsx

@@ -167,7 +167,7 @@ export function handleTaskCreationResponse(
         <Alert
           showIcon
           type="warning"
-          message="There were warnings during task creation"
+          title="There were warnings during task creation"
           description={warnings.join("\n")}
         />
       </div>

frontend/javascripts/dashboard/dashboard_task_list_view.tsx

@@ -508,11 +508,7 @@ class DashboardTaskListView extends React.PureComponent<Props, State> {
           toggleShowFinished={this.toggleShowFinished}
           getFinishVerb={this.getFinishVerb}
         />
-        {this.state.showFinishedTasks ? (
-          <h3 id="tasksHeadline" className="TestTasksHeadline">
-            My Finished Tasks
-          </h3>
-        ) : null}
+        {this.state.showFinishedTasks ? <h3>My Finished Tasks</h3> : null}
         {this.renderTaskList()}
         <div
           style={{

frontend/javascripts/dashboard/dataset_view.tsx

@@ -320,6 +320,7 @@ export function DatasetRefreshButton({ context }: { context: DatasetCollectionCo
       </FastTooltip>
       <Dropdown
         menu={{ onClick: () => context.checkDatasets(organizationId), items: refreshMenuItems }}
+        trigger={["click", "hover"]}
       >
         <Button disabled={context.isChecking}>
           <EllipsisOutlined />

frontend/javascripts/dashboard/explorative_annotations_view.tsx

@@ -27,6 +27,7 @@ import type { ColumnType } from "antd/lib/table/interface";
 import { AsyncLink } from "components/async_clickables";
 import FormattedDate from "components/formatted_date";
 import FormattedId from "components/formatted_id";
+import LinkButton from "components/link_button";
 import TextWithDescription from "components/text_with_description";
 import update from "immutability-helper";
 import { handleGenericError } from "libs/error_handling";
@@ -87,7 +88,7 @@ const persistence = new Persistence<PartialState>(
 );
 
 const READ_ONLY_ICON = (
-  <span className="fa-stack fa-1x">
+  <span className="fa-stack fa-1x" style={{ width: "1em" }}>
     <i className="fas fa-pen fa-stack-1x" />
     <i className="fas fa-slash fa-stack-1x" />
   </span>
@@ -613,7 +614,6 @@ class ExplorativeAnnotationsView extends React.PureComponent<Props, State> {
       return this.getEmptyListPlaceholder();
     }
 
-    const disabledColor = { color: "var(--ant-color-text-disabled)" };
     const columns: ColumnType<APIAnnotationInfo>[] = [
       {
         title: "ID",
@@ -624,12 +624,14 @@ class ExplorativeAnnotationsView extends React.PureComponent<Props, State> {
             <FormattedId id={annotation.id} />
 
             {!this.isAnnotationEditable(annotation) ? (
-              <div style={disabledColor}>{READ_ONLY_ICON} read-only</div>
+              <LinkButton disabled icon={READ_ONLY_ICON}>
+                read-only
+              </LinkButton>
             ) : null}
             {annotation.isLockedByOwner ? (
-              <div style={disabledColor}>
-                <LockOutlined style={{ marginLeft: 8, marginRight: 8 }} /> locked
-              </div>
+              <LinkButton disabled icon={<LockOutlined />}>
+                locked
+              </LinkButton>
             ) : null}
           </>
         ),

frontend/javascripts/dashboard/publication_view.tsx

@@ -1,16 +1,19 @@
 import { getPublications } from "admin/rest_api";
-import { Input, List, Spin } from "antd";
+import { Flex, Input, List, Spin } from "antd";
 import PublicationCard from "dashboard/publication_card";
 import { handleGenericError } from "libs/error_handling";
 import * as Utils from "libs/utils";
 import type React from "react";
 import { memo, useEffect, useState } from "react";
 import type { APIPublication } from "types/api_types";
+
 const { Search } = Input;
+
 export function PublicationViewWithHeader() {
   const [isLoading, setIsLoading] = useState(false);
-  const [publications, setPublications] = useState<Array<APIPublication>>([]);
+  const [publications, setPublications] = useState<APIPublication[]>([]);
   const [searchQuery, setSearchQuery] = useState("");
+
   useEffect(() => {
     (async () => {
       try {
@@ -32,28 +35,19 @@ export function PublicationViewWithHeader() {
     <Search
       style={{
         width: 200,
-        float: "right",
       }}
-      placeholder="Search Publication"
+      placeholder="Search Publications"
       onChange={handleSearch}
       value={searchQuery}
     />
   );
   return (
     <div>
-      <div className="pull-right">{publications.length > 0 && search}</div>
-      <div
-        className="clearfix"
-        style={{
-          margin: "20px 0px",
-        }}
-      />
+      <Flex justify="flex-end">{publications.length > 0 && search}</Flex>
       <Spin size="large" spinning={isLoading}>
         <div
           style={{
             minHeight: "100px",
-            paddingLeft: 10,
-            paddingRight: 10,
           }}
         >
           <PublicationView publications={publications} searchQuery={searchQuery} />

frontend/javascripts/navbar.tsx

@@ -13,6 +13,7 @@ import {
   Badge,
   Button,
   ConfigProvider,
+  Flex,
   Input,
   type InputRef,
   Layout,
@@ -131,16 +132,10 @@ function UserInitials({
   isMultiMember: boolean;
 }) {
   const { firstName, lastName } = activeUser;
-
   const initialOf = (str: string) => str.slice(0, 1).toUpperCase();
 
   return (
-    <div
-      style={{
-        position: "relative",
-        display: "flex",
-      }}
-    >
+    <div>
       <Avatar
         className="hover-effect-via-opacity"
         style={{
@@ -315,13 +310,12 @@ function getTimeTrackingMenu(collapse: boolean): MenuItemType {
     key: "timeStatisticMenu",
 
     label: (
-      <Link
-        to="/timetracking"
-        style={{
-          fontWeight: 400,
-        }}
-      >
-        {getCollapsibleMenuTitle("Time Tracking", <BarChartOutlined />, collapse)}
+      <Link to="/timetracking">
+        {getCollapsibleMenuTitle(
+          "Time Tracking",
+          <BarChartOutlined className="icon-margin-right" />,
+          collapse,
+        )}
       </Link>
     ),
   };
@@ -490,9 +484,6 @@ function NotificationIcon({
   return (
     <div
       style={{
-        position: "relative",
-        display: "flex",
-        marginRight: 12,
         paddingTop: navbarHeight > constants.DEFAULT_NAVBAR_HEIGHT ? constants.BANNER_HEIGHT : 0,
       }}
     >
@@ -700,7 +691,6 @@ function AnonymousAvatar() {
         className="hover-effect-via-opacity"
         icon={<UserOutlined />}
         style={{
-          marginLeft: 8,
           marginTop: bannerHeight,
         }}
       />
@@ -724,15 +714,15 @@ function AnnotationLockedByUserTag({
   if (blockedByUser == null) {
     content = (
       <Tooltip title={messages["annotation.acquiringMutexFailed.noUser"]}>
-        <Tag color="warning" className="flex-center-child" variant="outlined">
+        <Tag color="warning" variant="outlined">
           Locked by unknown user.
         </Tag>
       </Tooltip>
     );
   } else if (blockedByUser.id === activeUser.id) {
     content = (
       <Tooltip title={messages["annotation.acquiringMutexSucceeded"]}>
-        <Tag color="success" className="flex-center-child" variant="outlined">
+        <Tag color="success" variant="outlined">
           Locked by you. Reload to edit.
         </Tag>
       </Tooltip>
@@ -745,17 +735,13 @@ function AnnotationLockedByUserTag({
           userName: blockingUserName,
         })}
       >
-        <Tag color="warning" className="flex-center-child" variant="outlined">
+        <Tag color="warning" variant="outlined">
           Locked by {blockingUserName}
         </Tag>
       </Tooltip>
     );
   }
-  return (
-    <span style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
-      {content}
-    </span>
-  );
+  return content;
 }
 
 function AnnotationLockedByOwnerTag(props: { annotationOwnerName: string; isOwner: boolean }) {
@@ -764,9 +750,10 @@ function AnnotationLockedByOwnerTag(props: { annotationOwnerName: string; isOwne
     : "";
   const tooltipMessage =
     messages["tracing.read_only_mode_notification"](true, props.isOwner) + unlockHintForOwners;
+
   return (
     <Tooltip title={tooltipMessage}>
-      <Tag color="warning" className="flex-center-child" variant="outlined">
+      <Tag color="warning" variant="outlined">
         Locked by {props.annotationOwnerName}
       </Tag>
     </Tooltip>
@@ -828,11 +815,18 @@ function Navbar({ isAuthenticated }: { isAuthenticated: boolean }) {
         <Link
           to="/dashboard"
           style={{
-            fontWeight: 400,
             verticalAlign: "middle",
           }}
         >
-          {getCollapsibleMenuTitle("WEBKNOSSOS", <span className="logo" />, collapseAllNavItems)}
+          {getCollapsibleMenuTitle(
+            "WEBKNOSSOS",
+            <img
+              src="/assets/images/logo-icon-only.svg"
+              className="logo icon-margin-right"
+              alt="logo"
+            />,
+            collapseAllNavItems,
+          )}
         </Link>
       ),
     },
@@ -954,15 +948,9 @@ function Navbar({ isAuthenticated }: { isAuthenticated: boolean }) {
         }}
       />
       <ConfigProvider theme={getAntdTheme("dark")}>
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "flex-end",
-            marginRight: 12,
-          }}
-        >
+        <Flex align="center" justify="flex-end" gap="small">
           {trailingNavItems}
-        </div>
+        </Flex>
       </ConfigProvider>
     </Header>
   );

frontend/javascripts/viewer/view/action_bar_view.tsx

@@ -327,6 +327,7 @@ class ActionBarView extends React.PureComponent<Props, State> {
             items: menuItems,
           }}
           disabled={disabled}
+          trigger={["click", "hover"]}
         >
           <Button disabled={disabled} icon={<ExperimentOutlined />} title={tooltipText}>
             AI Analysis

frontend/javascripts/viewer/view/ai_jobs/ai_jobs_drawer.tsx

@@ -55,10 +55,10 @@ export const AiJobsDrawer = ({ isOpen }: { isOpen: boolean }) => {
     <Drawer
       title="Run a WEBKNOSSOS AI Job"
       placement="right"
-      width={1200}
+      size={1200}
       open={isOpen}
       onClose={handleClose}
-      destroyOnClose={true}
+      destroyOnHidden
     >
       <Tabs activeKey={activeKey} items={items} onChange={handleChange} />
     </Drawer>

frontend/stylesheets/main.less

@@ -60,12 +60,9 @@ body {
 
 .ant-layout-header {
   .logo {
-    background: url(/assets/images/logo-icon-only.svg) 15px center no-repeat;
-    padding-left: 46px;
-    height: 48px;
-    float: left;
-    margin-top: 1px;
-    background-size: 24px 24px;
+    width: 30px;
+    height: 30px;
+    margin-top: -2px;
   }
 
   .ant-menu-item .logo {
@@ -733,4 +730,4 @@ button.narrow {
   .ant-notification-notice-btn {
     margin-top: 0 !important;
   }
-}
+}

package.json

@@ -136,7 +136,7 @@
     "@tanstack/react-query-persist-client": "^5.83.0",
     "@zip.js/zip.js": "^2.7.32",
     "ansi-to-react": "^6.1.6",
-    "antd": "^6.1.0",
+    "antd": "^6.1.1",
     "ball-morphology": "^0.1.0",
     "base64-js": "^1.2.1",
     "beautiful-react-hooks": "^3.11.1",