From e80843d433ddb4e9ab3a6c003a59a9d6c5030147 Mon Sep 17 00:00:00 2001
From: Lorenzo Blasa <lblasa@meta.com>
Date: Wed, 13 Sep 2023 05:19:13 -0700
Subject: [PATCH] Modal visible -> open

Summary: The `visible` prop is marked as deprecated in favour of `open`

Reviewed By: passy

Differential Revision: D49226821

fbshipit-source-id: 4a4a7d03a1c8ff860c4e4cd02e19071185a8554e
---
 desktop/flipper-plugin/src/ui/Dialog.tsx                  | 4 ++--
 desktop/flipper-ui-core/src/chrome/ChangelogSheet.tsx     | 6 +-----
 .../flipper-ui-core/src/chrome/PlatformSelectWizard.tsx   | 2 +-
 desktop/flipper-ui-core/src/chrome/SettingsSheet.tsx      | 2 +-
 .../flipper-ui-core/src/chrome/ShareSheetExportFile.tsx   | 2 +-
 .../flipper-ui-core/src/chrome/ShareSheetExportUrl.tsx    | 4 ++--
 .../src/chrome/plugin-manager/PluginManager.tsx           | 2 +-
 desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx       | 8 ++++----
 .../src/sandy-chrome/SetupDoctorScreen.tsx                | 2 +-
 .../flipper-ui-core/src/sandy-chrome/WelcomeScreen.tsx    | 2 +-
 .../src/sandy-chrome/appinspect/LaunchEmulator.tsx        | 4 ++--
 .../sandy-chrome/notification/BlocklistSettingButton.tsx  | 2 +-
 .../navigation/components/RequiredParametersDialog.tsx    | 2 +-
 .../public/navigation/components/SaveBookmarkDialog.tsx   | 2 +-
 desktop/plugins/public/network/index.tsx                  | 4 ++--
 .../public/ui-debugger/components/tree/TreeControls.tsx   | 2 +-
 .../ui-debugger/components/visualizer/Visualization2D.tsx | 2 +-
 .../components/visualizer/VisualizerControls.tsx          | 3 +--
 18 files changed, 25 insertions(+), 30 deletions(-)

diff --git a/desktop/flipper-plugin/src/ui/Dialog.tsx b/desktop/flipper-plugin/src/ui/Dialog.tsx
index b34ba0223..b24c3ed31 100644
--- a/desktop/flipper-plugin/src/ui/Dialog.tsx
+++ b/desktop/flipper-plugin/src/ui/Dialog.tsx
@@ -59,7 +59,7 @@ export const Dialog = {
           return (
             <Modal
               title={opts.title}
-              visible
+              open
               okText={opts.okText}
               cancelText={opts.cancelText}
               onOk={async () => {
@@ -280,7 +280,7 @@ export const Dialog = {
           return (
             <Modal
               title={title ?? 'Loading...'}
-              visible
+              open
               footer={null}
               width={width ?? defaultWidth}
               closable={false}>
diff --git a/desktop/flipper-ui-core/src/chrome/ChangelogSheet.tsx b/desktop/flipper-ui-core/src/chrome/ChangelogSheet.tsx
index 8ca2322c4..dfb023657 100644
--- a/desktop/flipper-ui-core/src/chrome/ChangelogSheet.tsx
+++ b/desktop/flipper-ui-core/src/chrome/ChangelogSheet.tsx
@@ -57,11 +57,7 @@ class ChangelogSheet extends Component<Props, {}> {
 
   render() {
     return this.props.changelog ? (
-      <Modal
-        visible
-        title="Changelog"
-        onCancel={this.props.onHide}
-        footer={null}>
+      <Modal open title="Changelog" onCancel={this.props.onHide} footer={null}>
         <Markdown
           source={
             this.props.recent
diff --git a/desktop/flipper-ui-core/src/chrome/PlatformSelectWizard.tsx b/desktop/flipper-ui-core/src/chrome/PlatformSelectWizard.tsx
index f6910e30d..6caa0b942 100644
--- a/desktop/flipper-ui-core/src/chrome/PlatformSelectWizard.tsx
+++ b/desktop/flipper-ui-core/src/chrome/PlatformSelectWizard.tsx
@@ -122,7 +122,7 @@ class PlatformSelectWizard extends Component<Props, State> {
 
     return (
       <Modal
-        visible
+        open
         centered
         onCancel={() => {
           this.props.onHide();
diff --git a/desktop/flipper-ui-core/src/chrome/SettingsSheet.tsx b/desktop/flipper-ui-core/src/chrome/SettingsSheet.tsx
index b68df46c3..b8030b935 100644
--- a/desktop/flipper-ui-core/src/chrome/SettingsSheet.tsx
+++ b/desktop/flipper-ui-core/src/chrome/SettingsSheet.tsx
@@ -101,7 +101,7 @@ class SettingsSheet extends Component<Props, State> {
   ) {
     return (
       <Modal
-        visible
+        open
         centered
         onCancel={this.props.onHide}
         width={570}
diff --git a/desktop/flipper-ui-core/src/chrome/ShareSheetExportFile.tsx b/desktop/flipper-ui-core/src/chrome/ShareSheetExportFile.tsx
index 0e997469e..a91cac408 100644
--- a/desktop/flipper-ui-core/src/chrome/ShareSheetExportFile.tsx
+++ b/desktop/flipper-ui-core/src/chrome/ShareSheetExportFile.tsx
@@ -200,7 +200,7 @@ export default class ShareSheetExportFile extends Component<Props, State> {
 
   render() {
     return (
-      <Modal visible onCancel={this.cancelAndHide} footer={null}>
+      <Modal open onCancel={this.cancelAndHide} footer={null}>
         {this.renderStatus()}
       </Modal>
     );
diff --git a/desktop/flipper-ui-core/src/chrome/ShareSheetExportUrl.tsx b/desktop/flipper-ui-core/src/chrome/ShareSheetExportUrl.tsx
index 4c7c0d06e..a2a60ccfb 100644
--- a/desktop/flipper-ui-core/src/chrome/ShareSheetExportUrl.tsx
+++ b/desktop/flipper-ui-core/src/chrome/ShareSheetExportUrl.tsx
@@ -152,7 +152,7 @@ export default class ShareSheetExportUrl extends Component<Props, State> {
 
   renderPending(statusUpdate: string | null) {
     return (
-      <Modal visible onCancel={this.cancelAndHide} footer={null}>
+      <Modal open onCancel={this.cancelAndHide} footer={null}>
         <ShareSheetPendingDialog
           width={500}
           statusUpdate={statusUpdate}
@@ -171,7 +171,7 @@ export default class ShareSheetExportUrl extends Component<Props, State> {
 
     const {title, errorArray} = displayFetchMetadataErrors(fetchMetaDataErrors);
     return (
-      <Modal visible onCancel={this.cancelAndHide} footer={null}>
+      <Modal open onCancel={this.cancelAndHide} footer={null}>
         <Layout.Container>
           <>
             <FlexColumn>
diff --git a/desktop/flipper-ui-core/src/chrome/plugin-manager/PluginManager.tsx b/desktop/flipper-ui-core/src/chrome/plugin-manager/PluginManager.tsx
index e63b000e5..943e73907 100644
--- a/desktop/flipper-ui-core/src/chrome/plugin-manager/PluginManager.tsx
+++ b/desktop/flipper-ui-core/src/chrome/plugin-manager/PluginManager.tsx
@@ -15,7 +15,7 @@ import {Modal} from 'antd';
 
 export default function (props: {onHide: () => any}) {
   return (
-    <Modal visible centered width={800} onCancel={props.onHide} footer={null}>
+    <Modal open centered width={800} onCancel={props.onHide} footer={null}>
       <Tabs>
         <Tab tab="Plugin Status">
           <PluginDebugger />
diff --git a/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx b/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx
index e84aff56f..057332093 100644
--- a/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx
+++ b/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx
@@ -197,7 +197,7 @@ function ExportEverythingEverywhereAllAtOnceStatusModal({
 
   return (
     <Modal
-      visible={!!status}
+      open={!!status}
       centered
       onCancel={() => {
         setStatus(undefined);
@@ -230,7 +230,7 @@ function NotificationButton() {
         }}
       />
       <Modal
-        visible={isOpen}
+        open={isOpen}
         onCancel={() =>
           store.dispatch({type: 'isNotificationModalOpen', payload: false})
         }
@@ -537,7 +537,7 @@ function TroubleshootingModal() {
   );
   return (
     <Modal
-      visible={isOpen}
+      open={isOpen}
       onCancel={() => store.dispatch(toggleConnectivityModal())}
       width="100%"
       footer={null}
@@ -561,7 +561,7 @@ function FlipperDevToolsModal({
 }) {
   return (
     <Modal
-      visible={isOpen}
+      open={isOpen}
       onCancel={onClose}
       width="100%"
       footer={null}
diff --git a/desktop/flipper-ui-core/src/sandy-chrome/SetupDoctorScreen.tsx b/desktop/flipper-ui-core/src/sandy-chrome/SetupDoctorScreen.tsx
index 9459398c3..29d75620e 100644
--- a/desktop/flipper-ui-core/src/sandy-chrome/SetupDoctorScreen.tsx
+++ b/desktop/flipper-ui-core/src/sandy-chrome/SetupDoctorScreen.tsx
@@ -276,7 +276,7 @@ export default function SetupDoctorScreen({
       centered
       width={570}
       title="Setup Doctor"
-      visible={visible}
+      open={visible}
       destroyOnClose
       footer={
         <SetupDoctorFooter
diff --git a/desktop/flipper-ui-core/src/sandy-chrome/WelcomeScreen.tsx b/desktop/flipper-ui-core/src/sandy-chrome/WelcomeScreen.tsx
index b6ab9f064..e4a17ebee 100644
--- a/desktop/flipper-ui-core/src/sandy-chrome/WelcomeScreen.tsx
+++ b/desktop/flipper-ui-core/src/sandy-chrome/WelcomeScreen.tsx
@@ -110,7 +110,7 @@ export default function WelcomeScreen({
     <Modal
       centered
       closable={false}
-      visible={visible}
+      open={visible}
       footer={
         <WelcomeFooter
           onClose={onClose}
diff --git a/desktop/flipper-ui-core/src/sandy-chrome/appinspect/LaunchEmulator.tsx b/desktop/flipper-ui-core/src/sandy-chrome/appinspect/LaunchEmulator.tsx
index 542430695..b6768f91d 100644
--- a/desktop/flipper-ui-core/src/sandy-chrome/appinspect/LaunchEmulator.tsx
+++ b/desktop/flipper-ui-core/src/sandy-chrome/appinspect/LaunchEmulator.tsx
@@ -60,7 +60,7 @@ function NoSDKsEnabledAlert({onClose}: {onClose: () => void}) {
   return (
     <>
       <Modal
-        visible
+        open
         centered
         onCancel={onClose}
         title="No Mobile SDKs Enabled"
@@ -252,7 +252,7 @@ export const LaunchEmulatorDialog = withTrackingScope(
 
     return (
       <Modal
-        visible
+        open
         centered
         onCancel={onClose}
         title="Launch Virtual device"
diff --git a/desktop/flipper-ui-core/src/sandy-chrome/notification/BlocklistSettingButton.tsx b/desktop/flipper-ui-core/src/sandy-chrome/notification/BlocklistSettingButton.tsx
index dfe09fffa..c17102a85 100644
--- a/desktop/flipper-ui-core/src/sandy-chrome/notification/BlocklistSettingButton.tsx
+++ b/desktop/flipper-ui-core/src/sandy-chrome/notification/BlocklistSettingButton.tsx
@@ -31,7 +31,7 @@ export default function BlocklistSettingButton(props: {
       />
       <Modal
         title="Notification Setting"
-        visible={showModal}
+        open={showModal}
         width={650}
         footer={null}
         onCancel={() => setShowModal(false)}>
diff --git a/desktop/plugins/public/navigation/components/RequiredParametersDialog.tsx b/desktop/plugins/public/navigation/components/RequiredParametersDialog.tsx
index dead39be2..cf050dd4a 100644
--- a/desktop/plugins/public/navigation/components/RequiredParametersDialog.tsx
+++ b/desktop/plugins/public/navigation/components/RequiredParametersDialog.tsx
@@ -34,7 +34,7 @@ export function RequiredParametersDialog(props: Props) {
     useRequiredParameterFormValidator(requiredParameters);
   return (
     <Modal
-      visible
+      open
       onCancel={onHide}
       title="Provide bookmark details"
       footer={
diff --git a/desktop/plugins/public/navigation/components/SaveBookmarkDialog.tsx b/desktop/plugins/public/navigation/components/SaveBookmarkDialog.tsx
index 9ab881ac5..afe436302 100644
--- a/desktop/plugins/public/navigation/components/SaveBookmarkDialog.tsx
+++ b/desktop/plugins/public/navigation/components/SaveBookmarkDialog.tsx
@@ -56,7 +56,7 @@ export function SaveBookmarkDialog(props: Props) {
     return null;
   } else {
     return (
-      <Modal visible footer={null} onCancel={onHide}>
+      <Modal open footer={null} onCancel={onHide}>
         {(onHide: () => void) => {
           return (
             <Container>
diff --git a/desktop/plugins/public/network/index.tsx b/desktop/plugins/public/network/index.tsx
index 3c931648c..e056dd712 100644
--- a/desktop/plugins/public/network/index.tsx
+++ b/desktop/plugins/public/network/index.tsx
@@ -477,7 +477,7 @@ function showCustomColumnDialog(
     return (
       <Modal
         title="Add custom column"
-        visible
+        open
         onOk={() => {
           const header = form.getFieldValue('header');
           const type = form.getFieldValue('type');
@@ -614,7 +614,7 @@ export function Component() {
           }
         />
         <Modal
-          visible={showMockResponseDialog}
+          open={showMockResponseDialog}
           onCancel={instance.onCloseButtonPressed}
           footer={null}
           title="Mock Network Responses"
diff --git a/desktop/plugins/public/ui-debugger/components/tree/TreeControls.tsx b/desktop/plugins/public/ui-debugger/components/tree/TreeControls.tsx
index 3e9003bef..cd7d65b1b 100644
--- a/desktop/plugins/public/ui-debugger/components/tree/TreeControls.tsx
+++ b/desktop/plugins/public/ui-debugger/components/tree/TreeControls.tsx
@@ -141,7 +141,7 @@ function FrameworkEventsMonitoringModal({
   return (
     <Modal
       title="Framework event monitoring"
-      visible={visible}
+      open={visible}
       footer={null}
       onCancel={onCancel}>
       <Space direction="vertical" size="large">
diff --git a/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx b/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx
index a8afa87e4..bcde80ef5 100644
--- a/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx
+++ b/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx
@@ -353,7 +353,7 @@ const DelayedHoveredToolTip: React.FC<{
 
   return (
     <Tooltip
-      visible={isVisible}
+      open={isVisible}
       key={nodeId}
       placement="top"
       zIndex={100}
diff --git a/desktop/plugins/public/ui-debugger/components/visualizer/VisualizerControls.tsx b/desktop/plugins/public/ui-debugger/components/visualizer/VisualizerControls.tsx
index 7c7a27dcd..4cd6f518b 100644
--- a/desktop/plugins/public/ui-debugger/components/visualizer/VisualizerControls.tsx
+++ b/desktop/plugins/public/ui-debugger/components/visualizer/VisualizerControls.tsx
@@ -7,7 +7,7 @@
  * @format
  */
 
-import {Button, Dropdown, Menu, Slider, Tooltip, Typography} from 'antd';
+import {Button, Dropdown, Slider, Tooltip, Typography} from 'antd';
 import {Layout, produce, theme, usePlugin} from 'flipper-plugin';
 import {ClientNode, Id} from '../../ClientTypes';
 import {plugin} from '../../index';
@@ -85,7 +85,6 @@ export function VisualiserControls({
         {targetMode.state === 'selected' && (
           <Slider
             min={0}
-            tooltipVisible={false}
             value={targetMode.sliderPosition}
             max={targetMode.targetedNodes.length - 1}
             onChange={(value) => {