Add all csv info to displayed table on successful task creation

CHANGELOG.unreleased.md

@@ -21,6 +21,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - The visibility of meshes can now be toggled via the meshes tab. [#5346](https://github.com/scalableminds/webknossos/pull/5345)
 - Added an icon to the info tab of a tracing that links to the dataset settings. It's located next to the dataset name. [#5462](https://github.com/scalableminds/webknossos/pull/5462)
 - When exporting an user bounding box to tiff, the active mapping will now be applied to the exported data, as well. [#5474](https://github.com/scalableminds/webknossos/pull/5474)
+- Changed the layout of the modal that informs the user about the success of task creations and changed the naming schema for the downloadable csv file containing the information about created tasks. [#5491](https://github.com/scalableminds/webknossos/pull/5491)
 
 ### Fixed
 - Fixed that the row selection in the user table wasn't properly preserved when filtering the table and (un)selecting rows. [#5486](https://github.com/scalableminds/webknossos/pull/5486)

frontend/javascripts/admin/task/task_create_form_view.js

@@ -18,7 +18,7 @@ import {
 import { FormInstance } from "antd/lib/form";
 import Toast from "libs/toast";
 import React from "react";
-import { InboxOutlined } from "@ant-design/icons";
+import { InboxOutlined, WarningOutlined } from "@ant-design/icons";
 import _ from "lodash";
 
 import type { APIDataset, APITaskType, APIProject, APIScript, APITask } from "types/api_flow_types";
@@ -117,14 +117,13 @@ export function downloadTasksAsCSV(tasks: Array<APITask>) {
   if (tasks.length < 0) {
     return;
   }
-  const maybeTaskPlural = tasks.length > 2 ? "tasks" : "task";
+  const maybeTaskPlural = tasks.length > 1 ? "task_ids" : "task_id";
   const lastCreationTime = Math.max(...tasks.map(task => task.created));
-  const currentDateAsString = formatDateInLocalTimeZone(lastCreationTime);
-  const allTeamNames = _.uniq(tasks.map(task => task.team));
-  const teamName = allTeamNames.length > 1 ? "multiple_teams" : allTeamNames[0];
+  const currentDateAsString = formatDateInLocalTimeZone(lastCreationTime, "YYYY-MM-DD_HH-mm");
+  const allProjectNames = _.uniq(tasks.map(task => task.projectName)).join("_");
   const allTasksAsStrings = tasks.map(task => taskToText(task)).join("\n");
   const csv = [TASK_CSV_HEADER, allTasksAsStrings].join("\n");
-  const filename = `${teamName}-${maybeTaskPlural}-${currentDateAsString}.csv`;
+  const filename = `${maybeTaskPlural}_${allProjectNames}_${currentDateAsString}.csv`;
   const blob = new Blob([csv], { type: "text/plain;charset=utf-8" });
   saveAs(blob, filename);
 }
@@ -138,14 +137,6 @@ export function handleTaskCreationResponse(response: TaskCreationResponseContain
   const subHeadingStyle = { fontWeight: "bold" };
   const displayResultsStyle = { maxHeight: 300, overflow: "auto" };
 
-  const warningsContent =
-    warnings.length > 0 ? (
-      <div>
-        <div style={subHeadingStyle}>There were warnings during task creation:</div>
-        <div>{warnings.join("\n")}</div>
-      </div>
-    ) : null;
-
   tasks.forEach((taskResponse: TaskCreationResponse, i: number) => {
     if (taskResponse.status === 200 && taskResponse.success) {
       if (!teamName) {
@@ -156,6 +147,24 @@ export function handleTaskCreationResponse(response: TaskCreationResponseContain
       failedTasks.push(`Line ${i}: ${taskResponse.error} \n`);
     }
   });
+
+  const allProjectNames = _.uniq(successfulTasks.map(task => task.projectName));
+  if (allProjectNames.length > 1) {
+    warnings.push(
+      `You created tasks for multiple projects at a time: ${allProjectNames.join(", ")}.`,
+    );
+  }
+  const warningsContent =
+    warnings.length > 0 ? (
+      <div>
+        <div style={subHeadingStyle}>
+          <WarningOutlined style={{ color: "var(--ant-warning)" }} /> There were warnings during
+          task creation:
+        </div>
+        <div style={{ whiteSpace: "pre-line" }}>{warnings.join("\n")}</div>
+      </div>
+    ) : null;
+
   const failedTasksAsString = failedTasks.join("");
   const successfulTasksContent =
     successfulTasks.length <= maxDisplayedTasksCount ? (
@@ -165,7 +174,7 @@ export function handleTaskCreationResponse(response: TaskCreationResponseContain
         {successfulTasks.map(task => taskToShortText(task)).join("\n")}
       </pre>
     ) : (
-      "Too many tasks to show, please use CSV download for a full list."
+      "Too many tasks to show, please use CSV download above for a full list."
     );
   const failedTasksContent =
     failedTasks.length <= maxDisplayedTasksCount ? (
@@ -184,37 +193,34 @@ export function handleTaskCreationResponse(response: TaskCreationResponseContain
         {warningsContent}
         {successfulTasks.length > 0 ? (
           <div>
+            <div style={{ display: "flex", justifyContent: "center", margin: 20 }}>
+              <Button onClick={() => downloadTasksAsCSV(successfulTasks)} type="primary">
+                Download task info as CSV
+              </Button>
+            </div>
             <div style={subHeadingStyle}> Successful Tasks: </div>
             <div style={displayResultsStyle}>{successfulTasksContent}</div>
           </div>
         ) : null}
-        {successfulTasks.length > 0 ? (
-          <React.Fragment>
-            <br />
-            <Button onClick={() => downloadTasksAsCSV(successfulTasks)}>
-              Download task info as CSV
-            </Button>
-            <br />
-          </React.Fragment>
-        ) : null}
         {failedTasks.length > 0 ? (
           <React.Fragment>
             <Divider />
             <div>
-              <br />
+              <div style={{ display: "flex", justifyContent: "center", margin: 20 }}>
+                <Button
+                  onClick={() => {
+                    const blob = new Blob([failedTasksAsString], {
+                      type: "text/plain;charset=utf-8",
+                    });
+                    saveAs(blob, "failed-tasks.csv");
+                  }}
+                >
+                  Download failed task info as CSV
+                </Button>
+              </div>
               <div style={subHeadingStyle}> Failed Tasks:</div>
               <div style={displayResultsStyle}> {failedTasksContent}</div>
               <br />
-              <Button
-                onClick={() => {
-                  const blob = new Blob([failedTasksAsString], {
-                    type: "text/plain;charset=utf-8",
-                  });
-                  saveAs(blob, "failed-tasks.csv");
-                }}
-              >
-                Download failed task info as CSV
-              </Button>
               <br />
             </div>
           </React.Fragment>

frontend/javascripts/components/formatted_date.js

@@ -10,8 +10,12 @@ const defaultTimeFormat = "YYYY-MM-DD HH:mm";
  * a pure string representation. In all other cases, please prefer the
  * <FormattedDate /> component below.
  */
-export function formatDateInLocalTimeZone(date?: number = Date.now()): string {
-  return moment(date).format(defaultTimeFormat);
+export function formatDateInLocalTimeZone(
+  date?: number = Date.now(),
+  format?: ?string = null,
+): string {
+  format = format || defaultTimeFormat;
+  return moment(date).format(format);
 }
 
 export default function FormattedDate({