Don’t scroll up when showing confirm modals

CHANGELOG.unreleased.md

@@ -21,6 +21,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Fixed a bug where some values in the project list were displayed incorrectly after pausing/unpausing the project. [#5339](https://github.com/scalableminds/webknossos/pull/5339)
 - Fixed that editing a task type would always re-add the default values to the recommended configuration (if enabled). [#5341](https://github.com/scalableminds/webknossos/pull/5341)
 - Fixed a bug where tasks created from existing volume annotations that did not have a specified bounding box were broken. [#5362](https://github.com/scalableminds/webknossos/pull/5361)
+- Fixed a bug where the page would scroll up unexpectedly when showing various confirm modals. [#5371](https://github.com/scalableminds/webknossos/pull/5371)
 
 ### Removed
 -

frontend/javascripts/admin/scripts/script_list_view.js

@@ -10,6 +10,7 @@ import _ from "lodash";
 import type { APIScript, APIUser } from "types/api_flow_types";
 import { getScripts, deleteScript } from "admin/admin_rest_api";
 import { handleGenericError } from "libs/error_handling";
+import LinkButton from "components/link_button";
 import Persistence from "libs/persistence";
 import * as Utils from "libs/utils";
 import messages from "messages";
@@ -190,10 +191,10 @@ class ScriptListView extends React.PureComponent<Props, State> {
                       Edit
                     </Link>
                     <br />
-                    <a href="#" onClick={_.partial(this.deleteScript, script)}>
+                    <LinkButton onClick={_.partial(this.deleteScript, script)}>
                       <DeleteOutlined />
                       Delete
-                    </a>
+                    </LinkButton>
                   </span>
                 )}
               />

frontend/javascripts/admin/task/task_list_view.js

@@ -25,6 +25,7 @@ import { handleGenericError } from "libs/error_handling";
 import FormattedDate from "components/formatted_date";
 import Persistence from "libs/persistence";
 import TaskAnnotationView from "admin/task/task_annotation_view";
+import LinkButton from "components/link_button";
 import { downloadTasksAsCSV } from "admin/task/task_create_form_view";
 import TaskSearchForm, {
   type QueryObject,
@@ -342,10 +343,10 @@ class TaskListView extends React.PureComponent<Props, State> {
                     </AsyncLink>
                   ) : null}
                   <br />
-                  <a href="#" onClick={_.partial(this.deleteTask, task)}>
+                  <LinkButton onClick={_.partial(this.deleteTask, task)}>
                     <DeleteOutlined />
                     Delete
-                  </a>
+                  </LinkButton>
                 </span>
               )}
             />

frontend/javascripts/admin/tasktype/task_type_list_view.js

@@ -10,6 +10,7 @@ import { AsyncLink } from "components/async_clickables";
 import type { APITaskType } from "types/api_flow_types";
 import { getTaskTypes, deleteTaskType, downloadNml } from "admin/admin_rest_api";
 import { handleGenericError } from "libs/error_handling";
+import LinkButton from "components/link_button";
 import Persistence from "libs/persistence";
 import * as Utils from "libs/utils";
 import messages from "messages";
@@ -274,10 +275,10 @@ class TaskTypeListView extends React.PureComponent<Props, State> {
                       Download
                     </AsyncLink>
                     <br />
-                    <a href="#" onClick={_.partial(this.deleteTaskType, taskType)}>
+                    <LinkButton onClick={_.partial(this.deleteTaskType, taskType)}>
                       <DeleteOutlined />
                       Delete
-                    </a>
+                    </LinkButton>
                   </span>
                 )}
               />

frontend/javascripts/admin/team/team_list_view.js

@@ -9,6 +9,7 @@ import _ from "lodash";
 import type { APITeam } from "types/api_flow_types";
 import { getEditableTeams, deleteTeam } from "admin/admin_rest_api";
 import { handleGenericError } from "libs/error_handling";
+import LinkButton from "components/link_button";
 import CreateTeamModal from "admin/team/create_team_modal_view";
 import Persistence from "libs/persistence";
 import * as Utils from "libs/utils";
@@ -157,10 +158,10 @@ class TeamListView extends React.PureComponent<Props, State> {
                 title="Action"
                 key="actions"
                 render={(__, script: APITeam) => (
-                  <a href="#" onClick={_.partial(this.deleteTeam, script)}>
+                  <LinkButton onClick={_.partial(this.deleteTeam, script)}>
                     <DeleteOutlined />
                     Delete
-                  </a>
+                  </LinkButton>
                 )}
               />
             </Table>

frontend/javascripts/admin/user/user_list_view.js

@@ -23,6 +23,7 @@ import type { APIUser, APITeamMembership, ExperienceMap } from "types/api_flow_t
 import { InviteUsersModal } from "admin/onboarding";
 import type { OxalisState } from "oxalis/store";
 import { enforceActiveUser } from "oxalis/model/accessors/user_accessor";
+import LinkButton from "components/link_button";
 import { getEditableUsers, updateUser } from "admin/admin_rest_api";
 import { stringToColor } from "libs/format_utils";
 import EditableTextLabel from "oxalis/view/components/editable_text_label";
@@ -201,10 +202,10 @@ class UserListView extends React.PureComponent<PropsWithRouter, State> {
           <Row key={user.id} gutter={16}>
             <Col span={6}>{`${user.lastName}, ${user.firstName} (${user.email}) `}</Col>
             <Col span={4}>
-              <a href="#" onClick={() => this.activateUser(user)}>
+              <LinkButton onClick={() => this.activateUser(user)}>
                 <UserAddOutlined />
                 Activate User
-              </a>
+              </LinkButton>
             </Col>
           </Row>
         ))}
@@ -510,16 +511,16 @@ class UserListView extends React.PureComponent<PropsWithRouter, State> {
                   {// eslint-disable-next-line no-nested-ternary
                   user.isActive ? (
                     this.props.activeUser.isAdmin ? (
-                      <a href="#" onClick={() => this.deactivateUser(user)}>
+                      <LinkButton onClick={() => this.deactivateUser(user)}>
                         <UserDeleteOutlined />
                         Deactivate User
-                      </a>
+                      </LinkButton>
                     ) : null
                   ) : (
-                    <a href="#" onClick={() => this.activateUser(user)}>
+                    <LinkButton onClick={() => this.activateUser(user)}>
                       <UserAddOutlined />
                       Activate User
-                    </a>
+                    </LinkButton>
                   )}
                 </span>
               )}

frontend/javascripts/components/link_button.js

@@ -0,0 +1,7 @@
+// @flow
+import { Button } from "antd";
+import * as React from "react";
+
+export default function LinkButton(props: Object) {
+  return <Button type="link" {...props} className="link-button" />;
+}

frontend/javascripts/dashboard/dashboard_task_list_view.js

@@ -30,6 +30,7 @@ import {
 } from "admin/admin_rest_api";
 import { enforceActiveUser } from "oxalis/model/accessors/user_accessor";
 import { handleGenericError } from "libs/error_handling";
+import LinkButton from "components/link_button";
 import FormattedDate from "components/formatted_date";
 import Persistence from "libs/persistence";
 import Request from "libs/request";
@@ -257,10 +258,10 @@ class DashboardTaskListView extends React.PureComponent<PropsWithRouter, State>
         <br />
         {isAdmin || this.props.isAdminView ? (
           <div>
-            <a href="#" onClick={() => this.openTransferModal(annotation.id)}>
+            <LinkButton onClick={() => this.openTransferModal(annotation.id)}>
               <TeamOutlined />
               Transfer
-            </a>
+            </LinkButton>
             <br />
           </div>
         ) : null}
@@ -277,23 +278,23 @@ class DashboardTaskListView extends React.PureComponent<PropsWithRouter, State>
               Download
             </AsyncLink>
             <br />
-            <a href="#" onClick={() => this.resetTask(annotation)}>
+            <LinkButton onClick={() => this.resetTask(annotation)}>
               <RollbackOutlined />
               Reset
-            </a>
+            </LinkButton>
             <br />
-            <a href="#" onClick={() => this.cancelAnnotation(annotation)}>
+            <LinkButton onClick={() => this.cancelAnnotation(annotation)}>
               <DeleteOutlined />
               Reset and Cancel
-            </a>
+            </LinkButton>
             <br />
           </div>
         ) : null}
         {this.props.isAdminView ? null : (
-          <a href="#" onClick={() => this.confirmFinish(task)}>
+          <LinkButton onClick={() => this.confirmFinish(task)}>
             <CheckCircleOutlined />
             Finish
-          </a>
+          </LinkButton>
         )}
       </div>
     );

frontend/stylesheets/antd_overwrites.less

@@ -197,3 +197,14 @@ label.ant-checkbox-wrapper {
   flex-direction: column;
   line-height: 13px;
 }
+
+// Custom component `LinkButton` renders a button that looks like a link.
+// Antd’s `button type="link"` only gets us halfway there, though, hence, this:
+.link-button {
+  border: 0;
+  padding: 0;
+  height: initial;
+}
+.link-button > .anticon + span, .link-button > span + .anticon {
+  margin-left: initial;
+}