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
2023-09-13 05:19:13 -07:00
parent 860af1eff7
commit e80843d433
18 changed files with 25 additions and 30 deletions
--- 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}>
--- 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
--- 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();
--- 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}
--- 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>
    );
--- 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>
--- 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 />
--- 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}
--- 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
--- 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}
--- 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"
--- 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)}>
--- 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={
--- 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>
--- 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"
--- 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">
--- 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}
--- 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) => {