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

@@ -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}>

desktop/flipper-ui-core/src/chrome/ChangelogSheet.tsx

@@ -57,11 +57,7 @@ class ChangelogSheet extends Component<Props, {}> {
 
   render() {
     return this.props.changelog ? (
-      <Modal
+      <Modal open title="Changelog" onCancel={this.props.onHide} footer={null}>
-        visible
-        title="Changelog"
-        onCancel={this.props.onHide}
-        footer={null}>
         <Markdown
           source={
             this.props.recent

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();

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}

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>
     );

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>

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 />

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}

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

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}

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"

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)}>

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={

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>

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"

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">

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}

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) => {