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

@@ -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,18 +34,7 @@ const ButtonContainer = styled(FlexColumn)({
   padding: 20,
 });
 
-export default class SandboxView extends FlipperPlugin<
-  SandboxState,
-  any,
-  unknown
-> {
-  state: SandboxState = {
-    sandboxes: [],
-    customSandbox: '',
-    showFeedback: false,
-  };
-
-  static TextInput = styled.input({
+const TextInput = styled.input({
   border: `1px solid ${colors.light10}`,
   fontSize: '1em',
   padding: '0 5px',
@@ -60,13 +44,13 @@ export default class SandboxView extends FlipperPlugin<
   flexGrow: 1,
 });
 
-  static FeedbackMessage = styled.span({
+const FeedbackMessage = styled.span({
   fontSize: '1.2em',
   paddingTop: '10px',
   color: 'green',
 });
 
-  static TextInputLayout = styled(FlexColumn)({
+const TextInputLayout = styled(FlexColumn)({
   float: 'left',
   justifyContent: 'center',
   flexGrow: 1,
@@ -76,70 +60,84 @@ export default class SandboxView extends FlipperPlugin<
   marginLeft: 15,
 });
 
-  init() {
-    if (!this.client.isConnected) {
-      return;
-    }
-    this.client
-      .call('getSandbox', {})
+export function plugin(client: PluginClient<{}, ClientMethods>) {
+  const sandboxes = createState<Array<Sandbox>>([]);
+  const customSandbox = createState<string>('');
+  const showFeedback = createState<boolean>(false);
+
+  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 {
+    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>
-        <SandboxView.TextInputLayout>
+      <TextInputLayout>
         <ButtonGroup>
-            <SandboxView.TextInput
+          <TextInput
             type="text"
             placeholder="Sandbox URL (e.g. unixname.sb.facebook.com)"
             key="sandbox-url"
-              onChange={this.onChangeSandbox}
+            onChange={instance.onChangeSandbox}
             onKeyPress={(event) => {
               if (event.key === 'Enter') {
-                  this.onSendSandboxEnvironment(this.state.customSandbox);
+                instance.onSendSandboxEnvironment(customSandbox);
               }
             }}
           />
           <Button
             key="sandbox-send"
             icon="download"
-              onClick={() =>
-                this.onSendSandboxEnvironment(this.state.customSandbox)
-              }
-              disabled={this.state.customSandbox == null}
+            onClick={() => instance.onSendSandboxEnvironment(customSandbox)}
+            disabled={customSandbox == null}
           />
         </ButtonGroup>
-          <SandboxView.FeedbackMessage
-            hidden={this.state.showFeedback == false}>
+        <FeedbackMessage hidden={showFeedback == false}>
           Success!
-          </SandboxView.FeedbackMessage>
-        </SandboxView.TextInputLayout>
-        {this.state.sandboxes.map((sandbox) => (
+        </FeedbackMessage>
+      </TextInputLayout>
+      {sandboxes.map((sandbox) => (
         <ButtonContainer key={sandbox.value}>
           <BigButton
-              onClick={() => this.onSendSandboxEnvironment(sandbox.value)}>
+            onClick={() => instance.onSendSandboxEnvironment(sandbox.value)}>
             {sandbox.name}
           </BigButton>
         </ButtonContainer>
@@ -147,4 +145,3 @@ export default class SandboxView extends FlipperPlugin<
     </FlexColumn>
   );
 }
-}

desktop/plugins/public/sandbox/package.json

@@ -13,5 +13,8 @@
   "icon": "translate",
   "bugs": {
     "url": "https://github.com/facebook/flipper/issues"
+  },
+  "peerDependencies": {
+    "flipper-plugin": "*"
   }
 }