Fix antd deprecation warning for <Modal open/visible>

CHANGELOG.unreleased.md

@@ -30,6 +30,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Fixed a bug where a user with multiple organizations could not log in anymore after one of their organization accounts got deactivated. [#6719](https://github.com/scalableminds/webknossos/pull/6719)
 - Fixed rare crash in new Datasets tab in dashboard. [#6750](https://github.com/scalableminds/webknossos/pull/6750) and [#6753](https://github.com/scalableminds/webknossos/pull/6753)
 - Fixed a bug where remote datasets without authentication could not be explored. [#6764](https://github.com/scalableminds/webknossos/pull/6764)
+- Fixed deprecation warnings for antd <Modal> props. [#6765](https://github.com/scalableminds/webknossos/pull/6765)
 
 ### Removed
 

frontend/javascripts/admin/auth/accept_invite_view.tsx

@@ -22,7 +22,7 @@ export default function AcceptInviteView({
   activeUser: APIUser | null | undefined;
 }) {
   const history = useHistory();
-  const [isAuthenticationModalVisible, setIsAuthenticationModalVisible] = useState(false);
+  const [isAuthenticationModalOpen, setIsAuthenticationModalOpen] = useState(false);
   const [targetOrganization, exception] = useFetch(
     async () => {
       try {
@@ -78,7 +78,7 @@ export default function AcceptInviteView({
         Join this Organization
       </AsyncButton>
     ) : (
-      <Button type="primary" onClick={() => setIsAuthenticationModalVisible(true)} size="large">
+      <Button type="primary" onClick={() => setIsAuthenticationModalOpen(true)} size="large">
         Log in / Register
       </Button>
     );
@@ -94,7 +94,7 @@ export default function AcceptInviteView({
         alertMessage={`Please register or login to join ${targetOrganizationName}.`}
         inviteToken={token}
         onLoggedIn={async (userJustRegistered) => {
-          setIsAuthenticationModalVisible(false);
+          setIsAuthenticationModalOpen(false);
 
           if (!userJustRegistered) {
             await onClickJoin();
@@ -104,8 +104,8 @@ export default function AcceptInviteView({
             onSuccessfulJoin(userJustRegistered);
           }
         }}
-        onCancel={() => setIsAuthenticationModalVisible(false)}
-        visible={isAuthenticationModalVisible}
+        onCancel={() => setIsAuthenticationModalOpen(false)}
+        isOpen={isAuthenticationModalOpen}
       />
       <Spin spinning={targetOrganization == null}>
         <Result

frontend/javascripts/admin/auth/authentication_modal.tsx

@@ -11,14 +11,14 @@ import LoginForm from "./login_form";
 type Props = {
   onLoggedIn: (userJustRegistered: boolean) => unknown;
   onCancel: () => void;
-  visible: boolean;
+  isOpen: boolean;
   alertMessage: string;
   inviteToken?: string;
 };
 export default function AuthenticationModal({
   onLoggedIn,
   onCancel,
-  visible,
+  isOpen,
   alertMessage,
   inviteToken,
 }: Props) {
@@ -47,7 +47,7 @@ export default function AuthenticationModal({
       <RegistrationForm onRegistered={onRegistered} inviteToken={inviteToken} />
     );
   return (
-    <Modal title={step} onCancel={onCancel} visible={visible} footer={null} maskClosable={false}>
+    <Modal title={step} onCancel={onCancel} open={isOpen} footer={null} maskClosable={false}>
       <Alert
         message={alertMessage}
         type="info"
@@ -81,7 +81,7 @@ export function withAuthentication<P, C extends ComponentType<P>>(
   WrappedComponent: C,
 ): ComponentType<AuthenticationProps<P>> {
   return function Wrapper(props: AuthenticationProps<P>) {
-    const [isAuthenticationModalVisible, setIsAuthenticationModalVisible] = useState(false);
+    const [isAuthenticationModalOpen, setIsAuthenticationModalOpen] = useState(false);
     const { activeUser, authenticationMessage, onClick: originalOnClick, ...rest } = props;
 
     if (activeUser != null) {
@@ -91,15 +91,15 @@ export function withAuthentication<P, C extends ComponentType<P>>(
       return (
         <>
           {/* @ts-expect-error ts-migrate(2322) FIXME: Type 'Omit<AuthenticationProps<P>, "activeUser" | ... Remove this comment to see the full error message */}
-          <WrappedComponent {...rest} onClick={() => setIsAuthenticationModalVisible(true)} />
+          <WrappedComponent {...rest} onClick={() => setIsAuthenticationModalOpen(true)} />
           <AuthenticationModal
             alertMessage={authenticationMessage}
             onLoggedIn={() => {
-              setIsAuthenticationModalVisible(false);
+              setIsAuthenticationModalOpen(false);
               originalOnClick();
             }}
-            onCancel={() => setIsAuthenticationModalVisible(false)}
-            visible={isAuthenticationModalVisible}
+            onCancel={() => setIsAuthenticationModalOpen(false)}
+            isOpen={isAuthenticationModalOpen}
           />
         </>
       );

frontend/javascripts/admin/dataset/dataset_add_zarr_view.tsx

@@ -176,7 +176,7 @@ function DatasetAddZarrView(props: Props) {
           <Modal
             title="Add Layer"
             width={800}
-            visible={showAddLayerModal}
+            open={showAddLayerModal}
             footer={null}
             onCancel={() => setShowAddLayerModal(false)}
           >

frontend/javascripts/admin/dataset/dataset_upload_view.tsx

@@ -433,7 +433,7 @@ class DatasetUploadView extends React.Component<PropsWithFormAndRouter, State> {
     const { isRetrying, isFinishing, uploadProgress, isUploading } = this.state;
     return (
       <Modal
-        visible={isUploading}
+        open={isUploading}
         keyboard={false}
         maskClosable={false}
         className="no-footer-modal"

frontend/javascripts/admin/onboarding.tsx

@@ -220,7 +220,7 @@ type InviteUsersModalState = {
 
 export class InviteUsersModal extends React.Component<
   {
-    visible?: boolean;
+    isOpen?: boolean;
     handleVisibleChange?: (...args: Array<any>) => any;
     destroy?: (...args: Array<any>) => any;
     organizationName: string;
@@ -311,7 +311,7 @@ export class InviteUsersModal extends React.Component<
 
     return (
       <Modal
-        open={this.props.visible == null ? true : this.props.visible}
+        open={this.props.isOpen == null ? true : this.props.isOpen}
         title={
           <>
             <UserAddOutlined /> Invite Users
@@ -497,7 +497,7 @@ class OnboardingView extends React.PureComponent<Props, State> {
     >
       {this.state.isDatasetUploadModalVisible && (
         <Modal
-          visible
+          open
           width="85%"
           footer={null}
           maskClosable={false}
@@ -609,7 +609,7 @@ class OnboardingView extends React.PureComponent<Props, State> {
           </LinkButton>{" "}
           <InviteUsersModal
             organizationName={this.state.organizationName}
-            visible={this.state.isInviteModalVisible}
+            isOpen={this.state.isInviteModalVisible}
             handleVisibleChange={(isInviteModalVisible) =>
               this.setState({
                 isInviteModalVisible,

frontend/javascripts/admin/project/transfer_all_tasks_modal.tsx

@@ -129,7 +129,7 @@ class TransferAllTasksModal extends React.PureComponent<Props, State> {
 
     if (!project) {
       return (
-        <Modal title="Error" visible onOk={this.props.onCancel} onCancel={this.props.onCancel}>
+        <Modal title="Error" open onOk={this.props.onCancel} onCancel={this.props.onCancel}>
           <p>{messages["project.none_selected"]}</p>
         </Modal>
       );
@@ -138,7 +138,7 @@ class TransferAllTasksModal extends React.PureComponent<Props, State> {
       return (
         <Modal
           title={title}
-          visible
+          open
           onCancel={this.props.onCancel}
           // @ts-expect-error ts-migrate(2322) FIXME: Type '{ children: (string | Element)[]; title: str... Remove this comment to see the full error message
           pagination="false"

frontend/javascripts/admin/task/task_annotation_view.tsx

@@ -40,15 +40,15 @@ type StateProps = {
 };
 type Props = OwnProps & StateProps;
 type State = {
-  isTransferModalVisible: boolean;
+  isTransferModalOpen: boolean;
   annotations: Array<APIAnnotation>;
   currentAnnotation: APIAnnotation | null | undefined;
 };
 
 class TaskAnnotationView extends React.PureComponent<Props, State> {
   state: State = {
     currentAnnotation: null,
-    isTransferModalVisible: false,
+    isTransferModalOpen: false,
     annotations: [],
   };
 
@@ -94,7 +94,7 @@ class TaskAnnotationView extends React.PureComponent<Props, State> {
 
   updateAnnotationState = (updatedAnnotation: APIAnnotation) => {
     this.setState((prevState) => ({
-      isTransferModalVisible: false,
+      isTransferModalOpen: false,
       annotations: prevState.annotations.map((a) =>
         a.id === updatedAnnotation.id ? updatedAnnotation : a,
       ),
@@ -131,7 +131,7 @@ class TaskAnnotationView extends React.PureComponent<Props, State> {
           onClick={() =>
             this.setState({
               currentAnnotation: annotation,
-              isTransferModalVisible: true,
+              isTransferModalOpen: true,
             })
           }
         >
@@ -219,11 +219,11 @@ class TaskAnnotationView extends React.PureComponent<Props, State> {
         </table>
         {this.state.currentAnnotation?.owner ? (
           <TransferTaskModal
-            visible={this.state.isTransferModalVisible}
+            isOpen={this.state.isTransferModalOpen}
             annotationId={this.state.currentAnnotation.id}
             onCancel={() =>
               this.setState({
-                isTransferModalVisible: false,
+                isTransferModalOpen: false,
               })
             }
             onChange={this.updateAnnotationState}

frontend/javascripts/admin/task/task_list_view.tsx

@@ -46,7 +46,7 @@ type State = {
   users: APIUser[];
   searchQuery: string;
   selectedUserIdForAssignment: string | null;
-  isAnonymousTaskLinkModalVisible: boolean;
+  isAnonymousTaskLinkModalOpen: boolean;
 };
 const typeHint: Array<APITask> = [];
 const persistence = new Persistence<Pick<State, "searchQuery">>(
@@ -63,7 +63,7 @@ class TaskListView extends React.PureComponent<Props, State> {
     users: [],
     searchQuery: "",
     selectedUserIdForAssignment: null,
-    isAnonymousTaskLinkModalVisible: Utils.hasUrlParam("showAnonymousLinks"),
+    isAnonymousTaskLinkModalOpen: Utils.hasUrlParam("showAnonymousLinks"),
   };
 
   componentDidMount() {
@@ -200,7 +200,7 @@ class TaskListView extends React.PureComponent<Props, State> {
   getAnonymousTaskLinkModal() {
     const anonymousTaskId = Utils.getUrlParamValue("showAnonymousLinks");
 
-    if (!this.state.isAnonymousTaskLinkModalVisible) {
+    if (!this.state.isAnonymousTaskLinkModalOpen) {
       return null;
     }
 
@@ -211,18 +211,18 @@ class TaskListView extends React.PureComponent<Props, State> {
     return (
       <Modal
         title={`Anonymous Task Links for Task ${anonymousTaskId}`}
-        visible={this.state.isAnonymousTaskLinkModalVisible}
+        open={this.state.isAnonymousTaskLinkModalOpen}
         onOk={() => {
           navigator.clipboard
             .writeText(tasksString)
             .then(() => Toast.success("Links copied to clipboard"));
           this.setState({
-            isAnonymousTaskLinkModalVisible: false,
+            isAnonymousTaskLinkModalOpen: false,
           });
         }}
         onCancel={() =>
           this.setState({
-            isAnonymousTaskLinkModalVisible: false,
+            isAnonymousTaskLinkModalOpen: false,
           })
         }
       >

frontend/javascripts/admin/team/create_team_modal_view.tsx

@@ -7,10 +7,10 @@ const FormItem = Form.Item;
 type Props = {
   onOk: (...args: Array<any>) => any;
   onCancel: (...args: Array<any>) => any;
-  isVisible: boolean;
+  isOpen: boolean;
 };
 
-function CreateTeamModalForm({ onOk: onOkCallback, onCancel, isVisible }: Props) {
+function CreateTeamModalForm({ onOk: onOkCallback, onCancel, isOpen }: Props) {
   const [form] = Form.useForm();
 
   const onOk = async () => {
@@ -32,7 +32,7 @@ function CreateTeamModalForm({ onOk: onOkCallback, onCancel, isVisible }: Props)
   };
 
   return (
-    <Modal visible={isVisible} title="Add a New Team" okText="Ok" onCancel={onCancel} onOk={onOk}>
+    <Modal open={isOpen} title="Add a New Team" okText="Ok" onCancel={onCancel} onOk={onOk}>
       <Shortcut keys="enter" onTrigger={onOk} supportInputElements />
 
       <Form layout="vertical" form={form}>

frontend/javascripts/admin/team/team_list_view.tsx

@@ -193,7 +193,7 @@ class TeamListView extends React.PureComponent<Props, State> {
           <CreateTeamModal
             // @ts-expect-error ts-migrate(2322) FIXME: Type '{ teams: never[]; isVisible: boolean; onOk: ... Remove this comment to see the full error message
             teams={this.state.teams}
-            isVisible={this.state.isTeamCreationModalVisible}
+            isOpen={this.state.isTeamCreationModalVisible}
             onOk={this.createTeam}
             onCancel={() =>
               this.setState({

frontend/javascripts/admin/user/experience_modal_view.tsx

@@ -26,7 +26,7 @@ type TableEntry = {
 type Props = {
   onChange: (arg0: Array<APIUser>) => void;
   onCancel: () => void;
-  visible: boolean;
+  isOpen: boolean;
   selectedUsers: Array<APIUser>;
   initialDomainToEdit: string | null | undefined;
 };
@@ -230,7 +230,7 @@ class ExperienceModalView extends React.PureComponent<Props, State> {
   render() {
     const selectedUsersCount = this.props.selectedUsers.length;
 
-    if (!this.props.visible && selectedUsersCount === 0) {
+    if (!this.props.isOpen && selectedUsersCount === 0) {
       return null;
     }
 
@@ -244,7 +244,7 @@ class ExperienceModalView extends React.PureComponent<Props, State> {
             ? `Change Experiences of ${selectedUsersCount} Users`
             : `Change Experiences for ${this.props.selectedUsers[0].firstName} ${this.props.selectedUsers[0].lastName}`
         }
-        visible={this.props.visible}
+        open={this.props.isOpen}
         onCancel={this.props.onCancel}
         width={multipleUsers ? 800 : 600}
         maskClosable={false}

frontend/javascripts/admin/user/permissions_and_teams_modal_view.tsx

@@ -23,7 +23,7 @@ enum PERMISSIONS {
 type TeamRoleModalProp = {
   onChange: (...args: Array<any>) => any;
   onCancel: (...args: Array<any>) => any;
-  visible: boolean;
+  isOpen: boolean;
   selectedUserIds: Key[];
   users: Array<APIUser>;
   activeUser: APIUser;
@@ -340,7 +340,7 @@ class PermissionsAndTeamsModalView extends React.PureComponent<TeamRoleModalProp
       <Modal
         maskClosable={false}
         closable={false}
-        visible={this.props.visible}
+        open={this.props.isOpen}
         onCancel={this.props.onCancel}
         footer={
           <div>