fix: 💄 Updated modal to the new open api

phac-nml · Nov 18, 2024 · 1149843 · 1149843
1 parent 8841f7c
commit 1149843
Show file tree

Hide file tree

Showing 11 changed files with 28 additions and 28 deletions.
diff --git a/src/main/webapp/resources/js/pages/UserGroupsPage/components/CreateNewUserGroupButton.jsx b/src/main/webapp/resources/js/pages/UserGroupsPage/components/CreateNewUserGroupButton.jsx
@@ -78,7 +78,7 @@ export function CreateNewUserGroupButton({ baseUrl }) {
       <Modal
         className="t-new-group-modal"
         title={i18n("CreateNewUserGroupButton.title")}
-        visible={visible}
+        open={visible}
         onCancel={onCancel}
         onOk={onOk}
         okButtonProps={{ className: "t-confirm-new-group" }}

diff --git a/src/main/webapp/resources/js/pages/admin/components/clients/add/AddClientModal.jsx b/src/main/webapp/resources/js/pages/admin/components/clients/add/AddClientModal.jsx
@@ -30,7 +30,7 @@ const { Paragraph } = Typography;
 export function AddClientModal({ children, onComplete, existing = null }) {
   const { updateTable } = useContext(PagedTableContext);
 
-  const [visible, setVisible] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
   const clientIdRef = useRef();
   const [grantType, setGrantType] = useState("password");
 
@@ -39,10 +39,10 @@ export function AddClientModal({ children, onComplete, existing = null }) {
   set keyboard focus onto the user name input.
    */
   useEffect(() => {
-    if (visible) {
+    if (open) {
       setTimeout(() => clientIdRef.current.focus(), 100);
     }
-  }, [visible]);
+  }, [open]);
 
   const [form] = Form.useForm();
 
@@ -85,7 +85,7 @@ export function AddClientModal({ children, onComplete, existing = null }) {
       if (!existing) {
         form.resetFields();
       }
-      setVisible(false);
+      setOpen(false);
     } catch (errors) {
       // Re-enforce the error to the user
       errors.errorFields.forEach((error) =>
@@ -96,7 +96,7 @@ export function AddClientModal({ children, onComplete, existing = null }) {
 
   const closeModal = () => {
     form.resetFields();
-    setVisible(false);
+    setOpen(false);
   };
 
   const initialValues = {
@@ -110,11 +110,11 @@ export function AddClientModal({ children, onComplete, existing = null }) {
   return (
     <>
       {React.cloneElement(children, {
-        onClick: () => setVisible(true),
+        onClick: () => setOpen(true),
       })}
       <Modal
         className="t-client-modal"
-        visible={visible}
+        open={open}
         title={
           existing
             ? i18n("AddClientModal.title-edit")

diff --git a/src/main/webapp/resources/js/pages/projects/create/CreateProjectLayout.jsx b/src/main/webapp/resources/js/pages/projects/create/CreateProjectLayout.jsx
@@ -17,7 +17,7 @@ import { useSelector } from "react-redux";
  */
 export function CreateProjectLayout({ children }) {
   const [form] = Form.useForm();
-  const [visible, setVisible] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
   const [current, setCurrent] = React.useState(0);
   const [loading, setLoading] = React.useState(false);
 
@@ -75,16 +75,16 @@ export function CreateProjectLayout({ children }) {
   const onCancel = () => {
     form.resetFields();
     setCurrent(0);
-    setVisible(false);
+    setOpen(false);
   };
 
   return (
     <>
       {React.cloneElement(children, {
-        onClick: () => setVisible(true),
+        onClick: () => setOpen(true),
       })}
       <Modal
-        visible={visible}
+        open={open}
         footer={
           <div
             style={{

diff --git a/...pages/projects/linelist/components/TableControlPanel/TemplatesPanel/SaveTemplateModal.jsx b/...pages/projects/linelist/components/TableControlPanel/TemplatesPanel/SaveTemplateModal.jsx
@@ -82,7 +82,7 @@ export function SaveTemplateModal({
   return (
     <Modal
       title={i18n("linelist.templates.saveModal.title")}
-      visible={visible}
+      open={visible}
       onCancel={onClose}
       onOk={onOk}
       okButtonProps={{

diff --git a/src/main/webapp/resources/js/pages/projects/samples/components/CreateNewSample.jsx b/src/main/webapp/resources/js/pages/projects/samples/components/CreateNewSample.jsx
@@ -89,7 +89,7 @@ export default function CreateNewSample({
 
   return (
     <Modal
-      visible={visible}
+      open={visible}
       onOk={createSample}
       onCancel={handleCancel}
       title={i18n("AddSample.title")}

diff --git a/src/main/webapp/resources/js/pages/projects/samples/components/FilterByFileModal.jsx b/src/main/webapp/resources/js/pages/projects/samples/components/FilterByFileModal.jsx
@@ -75,7 +75,7 @@ export default function FilterByFileModal({ visible, onComplete, onCancel }) {
 
   return (
     <Modal
-      visible={visible}
+      open={visible}
       onCancel={onCancel}
       onOk={onOk}
       cancelButtonProps={{ className: "t-filter-cancel" }}

diff --git a/src/main/webapp/resources/js/pages/projects/samples/components/LinkerModal.jsx b/src/main/webapp/resources/js/pages/projects/samples/components/LinkerModal.jsx
@@ -67,7 +67,7 @@ export default function LinkerModal({
   return (
     <Modal
       className="t-linker-modal"
-      visible={visible}
+      open={visible}
       title={i18n("Linker.title")}
       onCancel={onFinish}
       footer={

diff --git a/src/main/webapp/resources/js/pages/projects/samples/components/MergeModal.jsx b/src/main/webapp/resources/js/pages/projects/samples/components/MergeModal.jsx
@@ -92,7 +92,7 @@ export default function MergeModal({ samples, visible, onComplete, onCancel }) {
     <Modal
       title={i18n("MergeModal.title")}
       className="t-merge-modal"
-      visible={visible}
+      open={visible}
       onOk={onSubmit}
       okText={i18n("MergeModal.okText")}
       okButtonProps={{

diff --git a/src/main/webapp/resources/js/pages/projects/samples/components/RemoveModal.jsx b/src/main/webapp/resources/js/pages/projects/samples/components/RemoveModal.jsx
@@ -37,7 +37,7 @@ export default function RemoveModal({
     <Modal
       title={i18n("RemoveModal.title")}
       className="t-remove-modal"
-      visible={visible}
+      open={visible}
       onCancel={onCancel}
       onOk={onOk}
       okText={i18n("RemoveModal.okText")}

diff --git a/...app/resources/js/pages/projects/settings/components/metadata/MetadataAddTemplateField.jsx b/...app/resources/js/pages/projects/settings/components/metadata/MetadataAddTemplateField.jsx
@@ -10,7 +10,7 @@ import React from "react";
  * @constructor
  */
 export function MetadataAddTemplateField({ fields = [], onAddFields }) {
-  const [visible, setVisible] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
   const [selected, setSelected] = React.useState([]);
   const [selectedFields, setSelectedFields] = React.useState([]);
 
@@ -31,17 +31,17 @@ export function MetadataAddTemplateField({ fields = [], onAddFields }) {
    * is successfully completed, close the modal.
    */
   const addFieldsToTemplate = () =>
-    onAddFields(selectedFields).then(() => setVisible(false));
+    onAddFields(selectedFields).then(() => setOpen(false));
 
   return (
     <>
-      <Button disabled={fields.length === 0} onClick={() => setVisible(true)}>
+      <Button disabled={fields.length === 0} onClick={() => setOpen(true)}>
         {i18n("MetadataAddTemplateField.button")}
       </Button>
       <Modal
         title={i18n("MetadataAddTemplateField.title")}
-        visible={visible}
-        onCancel={() => setVisible(false)}
+        open={open}
+        onCancel={() => setOpen(false)}
         onOk={addFieldsToTemplate}
         okText={i18n("MetadataAddTemplateField.ok-text")}
       >

diff --git a/...ebapp/resources/js/pages/projects/settings/components/metadata/MetadataTemplateCreate.jsx b/...ebapp/resources/js/pages/projects/settings/components/metadata/MetadataTemplateCreate.jsx
@@ -25,7 +25,7 @@ export function MetadataTemplateCreate({ children, projectId, fields = [] }) {
   const navigate = useNavigate();
   const [createMetadataTemplate] = useCreateMetadataTemplateMutation();
   const [names, setNames] = React.useState(undefined);
-  const [visible, setVisible] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
   const [fieldsState, setFieldsState] = React.useState([]);
   const [form] = Form.useForm();
   const { data: templates, refetch: refetchTemplates } =
@@ -61,7 +61,7 @@ export function MetadataTemplateCreate({ children, projectId, fields = [] }) {
       .unwrap()
       .then((template) => {
         form.resetFields(Object.keys(values));
-        setVisible(false);
+        setOpen(false);
         refetchTemplates();
         navigate(
           setBaseUrl(
@@ -75,13 +75,13 @@ export function MetadataTemplateCreate({ children, projectId, fields = [] }) {
   return (
     <>
       {React.cloneElement(children, {
-        onClick: () => setVisible(true),
+        onClick: () => setOpen(true),
       })}
       <Modal
         className="t-create-modal"
         title={i18n("CreateMetadataTemplate.title")}
-        visible={visible}
-        onCancel={() => setVisible(false)}
+        open={open}
+        onCancel={() => setOpen(false)}
         okText={i18n("CreateMetadataTemplate.ok-text")}
         onOk={onOk}
         okButtonProps={{