Fixes for AI model and Job list views (#9140)

Added several improvements for the AI model and job list views:

- Use `<LinkButton>` components to prevent text wrap between the icon
and action texts
- Before: <img width="171" height="426" alt="Screenshot 2025-12-10 at 15
39 18"
src="https://github.com/user-attachments/assets/42ae4fb4-3aaf-4fba-9de3-cd0dcebeb428"
/>
- Use modals obtain by the new antd hook API for proper light/dark mode
styling
- <img width="599" height="257" alt="Screenshot 2025-12-10 at 16 08 10"
src="https://github.com/user-attachments/assets/cda5f4c4-770c-4fa8-b736-875182aa8ac6"
/>

### URL of deployed dev instance (used for testing):
- https://___.webknossos.xyz

### Steps to test:
1. Start a few tiff downloads or AI jobs (can be unsuccessful)
2. Navigate to Analysis > Jobs. Check the actions buttons text wrap  
3. Navigate to Analysis > AI Models. Click on show training data. Modal
show be correctly themed.

Testing with multiple training annotations for the AI modal training
might be blocked by #9141

### Issues:
- fixes #https://scm.slack.com/archives/C5AKLAV0B/p1765370965274249

------
(Please delete unneeded items, merge only when none are left open)
- [ ] Added changelog entry (create a `$PR_NUMBER.md` file in
`unreleased_changes` or use `./tools/create-changelog-entry.py`)
- [ ] Added migration guide entry if applicable (edit the same file as
for the changelog)
- [ ] Updated [documentation](../blob/master/docs) if applicable
- [ ] Adapted [wk-libs python
client](https://github.com/scalableminds/webknossos-libs/tree/master/webknossos/webknossos/client)
if relevant API parts change
- [ ] Removed dev-only changes like prints and application.conf edits
- [x] Considered [common edge
cases](../blob/master/.github/common_edge_cases.md)
- [ ] Needs datastore update after deployment

Author: hotzenklotz

frontend/javascripts/admin/job/job_list_view.tsx

@@ -13,10 +13,11 @@ import {
 import { PropTypes } from "@scalableminds/prop-types";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { cancelJob, getJobs, retryJob } from "admin/rest_api";
-import { Flex, Input, Modal, Spin, Table, Tooltip, Typography } from "antd";
+import { App, Flex, Input, Spin, Table, Tooltip, Typography } from "antd";
 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 { confirmAsync } from "dashboard/dataset/helper_components";
 import { formatCreditsString, formatWkLibsNdBBox } from "libs/format_utils";
 import Persistence from "libs/persistence";
@@ -65,18 +66,23 @@ const { Column } = Table;
 const { Search } = Input;
 
 export const getShowTrainingDataLink = (
+  modal: ReturnType<typeof App.useApp>["modal"],
   trainingAnnotations: {
     annotationId: string;
   }[],
 ) => {
   return trainingAnnotations == null ? null : trainingAnnotations.length > 1 ? (
-    <a
+    <LinkButton
+      icon={<EyeOutlined />}
       onClick={() => {
-        Modal.info({
+        modal.info({
+          title: "Training Data",
+          closable: true,
+          maskClosable: true,
           content: (
             <div>
               The following annotations were used during training:
-              <ul>
+              <ul style={{ padding: 15 }}>
                 {trainingAnnotations.map((annotation: { annotationId: string }, index: number) => (
                   <li key={`annotation_${index}`}>
                     <a
@@ -95,15 +101,16 @@ export const getShowTrainingDataLink = (
       }}
     >
       Show Training Data
-    </a>
+    </LinkButton>
   ) : (
-    <a
+    <LinkButton
+      icon={<EyeOutlined />}
       href={`/annotations/${trainingAnnotations[0].annotationId}`}
       target="_blank"
       rel="noreferrer noopener"
     >
       Show Training Data
-    </a>
+    </LinkButton>
   );
 };
 
@@ -134,6 +141,7 @@ export function JobState({ job }: { job: APIJob }) {
 
 function JobListView() {
   const queryClient = useQueryClient();
+  const { modal } = App.useApp();
   const { data: jobs, isLoading } = useQuery({
     queryKey: ["jobs"],
     queryFn: getJobs,
@@ -170,6 +178,7 @@ function JobListView() {
   function renderDescription(__: any, job: APIJob) {
     const linkToDataset = getLinkToDataset(job);
     const layerName = job.args.annotationLayerName || job.args.layerName;
+
     if (job.command === APIJobCommand.CONVERT_TO_WKW && job.args.datasetName) {
       return <span>{`Conversion to WKW of ${job.args.datasetName}`}</span>;
     } else if (job.command === APIJobCommand.EXPORT_TIFF && linkToDataset != null) {
@@ -308,7 +317,7 @@ function JobListView() {
       return (
         <span>
           {`Train ${modelName} on ${numberOfTrainingAnnotations} ${Utils.pluralize("annotation", numberOfTrainingAnnotations)}. `}
-          {getShowTrainingDataLink(job.args.trainingAnnotations)}
+          {getShowTrainingDataLink(modal, job.args.trainingAnnotations)}
         </span>
       );
     } else {
@@ -371,8 +380,7 @@ function JobListView() {
         <span>
           {job.resultLink && (
             <Link to={job.resultLink} title="View Dataset">
-              <EyeOutlined className="icon-margin-right" />
-              View
+              <LinkButton icon={<EyeOutlined />}>View</LinkButton>
             </Link>
           )}
         </span>
@@ -381,21 +389,19 @@ function JobListView() {
       return (
         <span>
           {job.resultLink && (
-            <a href={job.resultLink} title="Download">
-              <DownloadOutlined className="icon-margin-right" />
+            <LinkButton href={job.resultLink} icon={<DownloadOutlined />}>
               Download
-            </a>
+            </LinkButton>
           )}
         </span>
       );
     } else if (job.command === APIJobCommand.RENDER_ANIMATION) {
       return (
         <span>
           {job.resultLink && (
-            <a href={job.resultLink} title="Download">
-              <DownloadOutlined className="icon-margin-right" />
+            <LinkButton href={job.resultLink} icon={<DownloadOutlined />}>
               Download
-            </a>
+            </LinkButton>
           )}
         </span>
       );
@@ -435,9 +441,9 @@ function JobListView() {
       return (
         <span>
           {job.resultLink && (
-            <a href={job.resultLink} title="Result">
+            <LinkButton href={job.resultLink} icon={<DownloadOutlined />}>
               Result
-            </a>
+            </LinkButton>
           )}
           {job.returnValue && <p>{job.returnValue}</p>}
         </span>

frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx

@@ -1,5 +1,4 @@
 import {
-  EyeOutlined,
   FileTextOutlined,
   InfoCircleOutlined,
   SyncOutlined,
@@ -8,22 +7,25 @@ import {
 import { useQuery } from "@tanstack/react-query";
 import { JobState, getShowTrainingDataLink } from "admin/job/job_list_view";
 import { getAiModels, getUsersOrganizations, updateAiModel } from "admin/rest_api";
-import { Button, Col, Flex, Modal, Row, Select, Table, Tooltip, Typography } from "antd";
+import { App, Button, Col, Flex, Modal, Row, Select, Table, Tooltip, Typography } from "antd";
 import FormattedDate from "components/formatted_date";
+import LinkButton from "components/link_button";
 import { useFetch } from "libs/react_helpers";
 import { useWkSelector } from "libs/react_hooks";
 import Toast from "libs/toast";
 import uniq from "lodash/uniq";
 import { useState } from "react";
 import type { Key } from "react";
+import { formatUserName } from "viewer/model/accessors/user_accessor";
+
 import { Link } from "react-router-dom";
 import type { AiModel } from "types/api_types";
-import { formatUserName } from "viewer/model/accessors/user_accessor";
 import { enforceActiveUser } from "viewer/model/accessors/user_accessor";
 
 export default function AiModelListView() {
   const activeUser = useWkSelector((state) => enforceActiveUser(state.activeUser));
   const [currentlyEditedModel, setCurrentlyEditedModel] = useState<AiModel | null>(null);
+  const { modal } = App.useApp();
 
   const {
     data: aiModels = [],
@@ -123,7 +125,7 @@ export default function AiModelListView() {
           {
             title: "Actions",
             render: (aiModel: AiModel) =>
-              renderActionsForModel(aiModel, () => setCurrentlyEditedModel(aiModel)),
+              renderActionsForModel(modal, aiModel, () => setCurrentlyEditedModel(aiModel)),
             key: "actions",
           },
         ]}
@@ -133,12 +135,15 @@ export default function AiModelListView() {
   );
 }
 
-const renderActionsForModel = (model: AiModel, onChangeSharedOrganizations: () => void) => {
+const renderActionsForModel = (
+  modal: ReturnType<typeof App.useApp>["modal"],
+  model: AiModel,
+  onChangeSharedOrganizations: () => void,
+) => {
   const organizationSharingButton = model.isOwnedByUsersOrganization ? (
-    <a onClick={onChangeSharedOrganizations}>
-      <TeamOutlined className="icon-margin-right" />
+    <LinkButton onClick={onChangeSharedOrganizations} icon={<TeamOutlined />}>
       Manage Access
-    </a>
+    </LinkButton>
   ) : null;
   if (model.trainingJob == null) {
     return organizationSharingButton;
@@ -150,22 +155,14 @@ const renderActionsForModel = (model: AiModel, onChangeSharedOrganizations: () =
     <Col>
       {trainingJobState === "SUCCESS" ? <Row>{organizationSharingButton}</Row> : null}
       {voxelyticsWorkflowHash != null ? (
-        /* margin left is needed  as organizationSharingButton is a button with a 16 margin */
         <Row>
           <Link to={`/workflows/${voxelyticsWorkflowHash}`}>
-            <FileTextOutlined className="icon-margin-right" />
-            Voxelytics Report
+            <LinkButton icon={<FileTextOutlined />}>Voxelytics Report</LinkButton>
           </Link>
         </Row>
       ) : null}
       {trainingAnnotations != null ? (
-        <Row>
-          <EyeOutlined
-            className="icon-margin-right"
-            style={{ color: "var(--ant-color-primary)" }}
-          />
-          {getShowTrainingDataLink(trainingAnnotations)}
-        </Row>
+        <Row>{getShowTrainingDataLink(modal, trainingAnnotations)}</Row>
       ) : null}
     </Col>
   );
@@ -211,7 +208,7 @@ function EditModelSharedOrganizationsModal({
 
   return (
     <Modal
-      title={`Edit Organizations with Access to AI Model ${model.name}`}
+      title={"Edit Organizations with Access to this AI Model"}
       open
       onOk={submitNewSharedOrganizations}
       onCancel={onClose}
@@ -220,27 +217,27 @@ function EditModelSharedOrganizationsModal({
       width={800}
     >
       <p>
-        Select all organization that should have access to the AI model{" "}
+        Select all organizations that should have access to the AI model{" "}
         <Typography.Text italic>{model.name}</Typography.Text>.
       </p>
       <Typography.Paragraph type="secondary">
-        You can only select or deselect organizations that you are a member of. However, other users
-        in your organization may have granted access to additional organizations that you are not
-        part of. Only members of your organization who have access to those organizations can modify
-        their access.
+        You can only manage access for organizations you belong to. Other members of your
+        organization may have access to additional organizations not listed here. Only they can
+        modify access for those organizations.
       </Typography.Paragraph>
-      <Col span={14} offset={4}>
+      <Flex justify="center">
         <Select
           mode="multiple"
           allowClear
           autoFocus
-          style={{ width: "100%" }}
+          style={{ minWidth: 400 }}
+          dropdownMatchSelectWidth={false}
           placeholder="Please select"
           onChange={handleChange}
           options={options}
           value={selectedOrganizationIds}
         />
-      </Col>
+      </Flex>
     </Modal>
   );
 }