From 1c532095ab840f311ecd927b60337faf4f010246 Mon Sep 17 00:00:00 2001
From: Andrey Goncharov <aigoncharov@meta.com>
Date: Fri, 16 Jun 2023 08:29:54 -0700
Subject: [PATCH] Expose suggestNewPlugin as a shared util

Reviewed By: antonk52, ivanmisuno

Differential Revision: D46798839

fbshipit-source-id: f2b942a138a998f167b60c04c32c634545bbfe96
---
 .../flipper-plugin/src/__tests__/api.node.tsx |  1 +
 desktop/flipper-plugin/src/index.tsx          |  1 +
 .../src/ui/SuggestNewPlugin.tsx               | 87 +++++++++++++++++++
 docs/extending/flipper-plugin.mdx             |  4 +
 4 files changed, 93 insertions(+)
 create mode 100644 desktop/flipper-plugin/src/ui/SuggestNewPlugin.tsx

diff --git a/desktop/flipper-plugin/src/__tests__/api.node.tsx b/desktop/flipper-plugin/src/__tests__/api.node.tsx
index f028f5f8afa..9c348c87f7f 100644
--- a/desktop/flipper-plugin/src/__tests__/api.node.tsx
+++ b/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",
diff --git a/desktop/flipper-plugin/src/index.tsx b/desktop/flipper-plugin/src/index.tsx
index 01a563323cd..7016dd0fd78 100644
--- a/desktop/flipper-plugin/src/index.tsx
+++ b/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';
diff --git a/desktop/flipper-plugin/src/ui/SuggestNewPlugin.tsx b/desktop/flipper-plugin/src/ui/SuggestNewPlugin.tsx
new file mode 100644
index 00000000000..6ce2f7fcba4
--- /dev/null
+++ b/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,
+  });
+};
diff --git a/docs/extending/flipper-plugin.mdx b/docs/extending/flipper-plugin.mdx
index eb23440fec3..b183f996dd0 100644
--- a/docs/extending/flipper-plugin.mdx
+++ b/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.