From 996132afbdc5ae2acc0db96841c76b3f38d8ec5a Mon Sep 17 00:00:00 2001
From: Maninder Singh <manindr@fb.com>
Date: Thu, 12 May 2022 06:27:22 -0700
Subject: [PATCH] Migrate 'Sandbox' plugin to Sandy API

Summary:
As part of an ongoing effort to migrate Flipper plugins to new Sandy arch, this diff aims to help by migrating the 'Sandbox' Plugin.

Most of the changes were straightforward, as in, could be done by following this excellent migration guide : https://www.internalfb.com/intern/staticdocs/flipper/docs/extending/sandy-migration/

Only thing which caused few issues was the "onready" behaviour. In the old pattern, the 'init' method used to get executed on every render. So it was ok to check for "isconnected" prop there.

Now the 'plugin' method is only executed once => and since the device might not be connected then, the "onReady" method (which is equivalent to old 'init' method) didn't work.

To fix this => the init method has been replace with "onConnect".

Reviewed By: lblasa

Differential Revision: D36284538

fbshipit-source-id: 4b2bf74c6d11625e4bd784fbb29fd270158a41ff
---
 desktop/plugins/public/sandbox/index.tsx    | 203 ++++++++++----------
 desktop/plugins/public/sandbox/package.json |   3 +
 2 files changed, 103 insertions(+), 103 deletions(-)

diff --git a/desktop/plugins/public/sandbox/index.tsx b/desktop/plugins/public/sandbox/index.tsx
index 54a22b5c3..9bdb1ac4e 100644
--- a/desktop/plugins/public/sandbox/index.tsx
+++ b/desktop/plugins/public/sandbox/index.tsx
@@ -7,27 +7,22 @@
  * @format
  */
 
-import {
-  FlipperPlugin,
-  FlexColumn,
-  ButtonGroup,
-  Button,
-  styled,
-  colors,
-} from 'flipper';
+import {FlexColumn, ButtonGroup, Button, styled, colors} from 'flipper';
 import React, {ChangeEvent} from 'react';
+import {PluginClient, createState, usePlugin, useValue} from 'flipper-plugin';
 
 export type Sandbox = {
   name: string;
   value: string;
 };
 
-type SandboxState = {
-  sandboxes: Array<Sandbox>;
-  customSandbox: string;
-  showFeedback: boolean;
+type ClientMethods = {
+  getSandbox(): Promise<Sandbox[]>;
+  setSandbox(sandbox: {sandbox: string}): Promise<SetSandboxResult>;
 };
 
+type SetSandboxResult = {result: boolean};
+
 const BigButton = styled(Button)({
   flexGrow: 1,
   fontSize: 24,
@@ -39,112 +34,114 @@ const ButtonContainer = styled(FlexColumn)({
   padding: 20,
 });
 
-export default class SandboxView extends FlipperPlugin<
-  SandboxState,
-  any,
-  unknown
-> {
-  state: SandboxState = {
-    sandboxes: [],
-    customSandbox: '',
-    showFeedback: false,
-  };
+const TextInput = styled.input({
+  border: `1px solid ${colors.light10}`,
+  fontSize: '1em',
+  padding: '0 5px',
+  borderRight: 0,
+  borderTopLeftRadius: 4,
+  borderBottomLeftRadius: 4,
+  flexGrow: 1,
+});
 
-  static TextInput = styled.input({
-    border: `1px solid ${colors.light10}`,
-    fontSize: '1em',
-    padding: '0 5px',
-    borderRight: 0,
-    borderTopLeftRadius: 4,
-    borderBottomLeftRadius: 4,
-    flexGrow: 1,
-  });
+const FeedbackMessage = styled.span({
+  fontSize: '1.2em',
+  paddingTop: '10px',
+  color: 'green',
+});
 
-  static FeedbackMessage = styled.span({
-    fontSize: '1.2em',
-    paddingTop: '10px',
-    color: 'green',
-  });
+const TextInputLayout = styled(FlexColumn)({
+  float: 'left',
+  justifyContent: 'center',
+  flexGrow: 1,
+  borderRadius: 4,
+  marginRight: 15,
+  marginTop: 15,
+  marginLeft: 15,
+});
 
-  static TextInputLayout = styled(FlexColumn)({
-    float: 'left',
-    justifyContent: 'center',
-    flexGrow: 1,
-    borderRadius: 4,
-    marginRight: 15,
-    marginTop: 15,
-    marginLeft: 15,
-  });
+export function plugin(client: PluginClient<{}, ClientMethods>) {
+  const sandboxes = createState<Array<Sandbox>>([]);
+  const customSandbox = createState<string>('');
+  const showFeedback = createState<boolean>(false);
 
-  init() {
-    if (!this.client.isConnected) {
-      return;
-    }
-    this.client
-      .call('getSandbox', {})
+  client.onConnect(() => {
+    client
+      .send('getSandbox', undefined)
       .then((results: Array<Sandbox>) => {
-        this.setState({sandboxes: results});
+        sandboxes.set(results);
       })
       .catch((e) => console.error('[sandbox] getSandbox call failed:', e));
-  }
+  });
 
-  onSendSandboxEnvironment = (sandbox: string) => {
-    this.client
-      .call('setSandbox', {
-        sandbox: sandbox,
+  const onSendSandboxEnvironment = (sandbox: string) => {
+    client
+      .send('setSandbox', {
+        sandbox,
       })
-      .then((result: {result: boolean}) => {
+      .then((result: SetSandboxResult) => {
         setTimeout(() => {
-          this.setState({showFeedback: false});
+          showFeedback.set(false);
         }, 3000);
-        this.setState({showFeedback: result.result});
+        showFeedback.set(result.result);
       })
       .catch((e) => console.error('[sandbox] setSandbox call failed:', e));
   };
 
-  onChangeSandbox = (e: ChangeEvent<HTMLInputElement>) => {
-    this.setState({customSandbox: e.target.value});
+  const onChangeSandbox = (e: ChangeEvent<HTMLInputElement>) => {
+    customSandbox.set(e.target.value);
   };
 
-  render() {
-    return (
-      <FlexColumn>
-        <SandboxView.TextInputLayout>
-          <ButtonGroup>
-            <SandboxView.TextInput
-              type="text"
-              placeholder="Sandbox URL (e.g. unixname.sb.facebook.com)"
-              key="sandbox-url"
-              onChange={this.onChangeSandbox}
-              onKeyPress={(event) => {
-                if (event.key === 'Enter') {
-                  this.onSendSandboxEnvironment(this.state.customSandbox);
-                }
-              }}
-            />
-            <Button
-              key="sandbox-send"
-              icon="download"
-              onClick={() =>
-                this.onSendSandboxEnvironment(this.state.customSandbox)
-              }
-              disabled={this.state.customSandbox == null}
-            />
-          </ButtonGroup>
-          <SandboxView.FeedbackMessage
-            hidden={this.state.showFeedback == false}>
-            Success!
-          </SandboxView.FeedbackMessage>
-        </SandboxView.TextInputLayout>
-        {this.state.sandboxes.map((sandbox) => (
-          <ButtonContainer key={sandbox.value}>
-            <BigButton
-              onClick={() => this.onSendSandboxEnvironment(sandbox.value)}>
-              {sandbox.name}
-            </BigButton>
-          </ButtonContainer>
-        ))}
-      </FlexColumn>
-    );
-  }
+  return {
+    client,
+    onChangeSandbox,
+    onSendSandboxEnvironment,
+    customSandbox,
+    sandboxes,
+    showFeedback,
+  };
+}
+
+export function Component() {
+  const instance = usePlugin(plugin);
+  const customSandbox = useValue(instance.customSandbox);
+  const sandboxes = useValue(instance.sandboxes);
+  const showFeedback = useValue(instance.showFeedback);
+
+  return (
+    <FlexColumn>
+      <TextInputLayout>
+        <ButtonGroup>
+          <TextInput
+            type="text"
+            placeholder="Sandbox URL (e.g. unixname.sb.facebook.com)"
+            key="sandbox-url"
+            onChange={instance.onChangeSandbox}
+            onKeyPress={(event) => {
+              if (event.key === 'Enter') {
+                instance.onSendSandboxEnvironment(customSandbox);
+              }
+            }}
+          />
+          <Button
+            key="sandbox-send"
+            icon="download"
+            onClick={() => instance.onSendSandboxEnvironment(customSandbox)}
+            disabled={customSandbox == null}
+          />
+        </ButtonGroup>
+        <FeedbackMessage hidden={showFeedback == false}>
+          Success!
+        </FeedbackMessage>
+      </TextInputLayout>
+      {sandboxes.map((sandbox) => (
+        <ButtonContainer key={sandbox.value}>
+          <BigButton
+            onClick={() => instance.onSendSandboxEnvironment(sandbox.value)}>
+            {sandbox.name}
+          </BigButton>
+        </ButtonContainer>
+      ))}
+    </FlexColumn>
+  );
 }
diff --git a/desktop/plugins/public/sandbox/package.json b/desktop/plugins/public/sandbox/package.json
index a74f2c715..7002a4db2 100644
--- a/desktop/plugins/public/sandbox/package.json
+++ b/desktop/plugins/public/sandbox/package.json
@@ -13,5 +13,8 @@
   "icon": "translate",
   "bugs": {
     "url": "https://github.com/facebook/flipper/issues"
+  },
+  "peerDependencies": {
+    "flipper-plugin": "*"
   }
 }