Expose suggestNewPlugin as a shared util

Reviewed By: antonk52, ivanmisuno

Differential Revision: D46798839

fbshipit-source-id: f2b942a138a998f167b60c04c32c634545bbfe96

desktop/flipper-plugin/src/__tests__/api.node.tsx

@@ -67,6 +67,7 @@ test('Correct top level API exposed', () => {
       "safeStringify",
       "sleep",
       "styled",
+      "suggestNewPlugin",
       "textContent",
       "theme",
       "timeout",

desktop/flipper-plugin/src/index.tsx

@@ -101,6 +101,7 @@ export {
   ElementSearchResultSet,
   ElementID,
 } from './ui/elements-inspector/ElementsInspector';
+export {suggestNewPlugin} from './ui/SuggestNewPlugin';
 export {useMemoize} from './utils/useMemoize';
 
 export {createTablePlugin} from './utils/createTablePlugin';

desktop/flipper-plugin/src/ui/SuggestNewPlugin.tsx

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {Button, notification} from 'antd';
+import {getFlipperLib, PluginClient} from 'flipper-plugin-core';
+import * as React from 'react';
+
+export type SuggestNewPluginProps = {
+  newPluginGK?: string;
+  newPluginId: string;
+  newPluginName: string;
+  legacyPluginId: string;
+  legacyPluginName: string;
+  client: PluginClient;
+};
+
+export const suggestNewPlugin = ({
+  newPluginGK,
+  newPluginId,
+  newPluginName,
+  legacyPluginId,
+  legacyPluginName,
+  client,
+}: SuggestNewPluginProps) => {
+  if (newPluginGK && !getFlipperLib().GK(newPluginGK)) {
+    return;
+  }
+
+  const lastShownTimestampKey = `${legacyPluginId}-${newPluginId}-BannerLastShownTimestamp`;
+  let lastShownTimestampFromStorage = undefined;
+  try {
+    lastShownTimestampFromStorage = window.localStorage.getItem(
+      lastShownTimestampKey,
+    );
+  } catch (e) {}
+
+  if (lastShownTimestampFromStorage) {
+    const WithinOneDay = (timestamp: number) => {
+      const Day = 1 * 24 * 60 * 60 * 1000;
+      const DayAgo = Date.now() - Day;
+
+      return timestamp > DayAgo;
+    };
+    const lastShownTimestamp = Number(lastShownTimestampFromStorage);
+    if (WithinOneDay(lastShownTimestamp)) {
+      // The banner was shown less than 24-hours ago, don't show it again.
+      return;
+    }
+  }
+
+  const lastShownTimestamp = Date.now();
+  try {
+    window.localStorage.setItem(
+      lastShownTimestampKey,
+      String(lastShownTimestamp),
+    );
+  } catch (e) {}
+
+  const key = `open-${newPluginId}-${lastShownTimestamp}`;
+  const btn = (
+    <Button
+      type="primary"
+      size="small"
+      onClick={() => {
+        notification.close(key);
+        client.selectPlugin(newPluginId, undefined);
+      }}>
+      Try it now!
+    </Button>
+  );
+
+  notification.open({
+    message: `${legacyPluginName} plugin is being deprecated.`,
+    description: `The new replacement plugin, ${newPluginName}, is available for use now.
+      Find it on the left panel`,
+    duration: 30,
+    type: 'warning',
+    btn,
+    key,
+  });
+};

docs/extending/flipper-plugin.mdx

@@ -1092,6 +1092,10 @@ The colors exposed here support dark mode.
 
 ## Utilities
 
+### suggestNewPlugin
+
+Display a pop-up prompting users switch to a new plugin
+
 ### getFlipperLib
 
 A set of globally available utilities such as opening links, interacting with the clipboard (see the following example), and many more.