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 {
+import {FlexColumn, ButtonGroup, Button, styled, colors} from 'flipper';
-  FlipperPlugin,
-  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 = {
+type ClientMethods = {
-  sandboxes: Array<Sandbox>;
+  getSandbox(): Promise<Sandbox[]>;
-  customSandbox: string;
+  setSandbox(sandbox: {sandbox: string}): Promise<SetSandboxResult>;
-  showFeedback: boolean;
 };
 
+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<
+const TextInput = styled.input({
-  SandboxState,
+  border: `1px solid ${colors.light10}`,
-  any,
+  fontSize: '1em',
-  unknown
+  padding: '0 5px',
-> {
+  borderRight: 0,
-  state: SandboxState = {
+  borderTopLeftRadius: 4,
-    sandboxes: [],
+  borderBottomLeftRadius: 4,
-    customSandbox: '',
+  flexGrow: 1,
-    showFeedback: false,
+});
-  };
 
-  static TextInput = styled.input({
+const FeedbackMessage = styled.span({
-    border: `1px solid ${colors.light10}`,
+  fontSize: '1.2em',
-    fontSize: '1em',
+  paddingTop: '10px',
-    padding: '0 5px',
+  color: 'green',
-    borderRight: 0,
+});
-    borderTopLeftRadius: 4,
-    borderBottomLeftRadius: 4,
-    flexGrow: 1,
-  });
 
-  static FeedbackMessage = styled.span({
+const TextInputLayout = styled(FlexColumn)({
-    fontSize: '1.2em',
+  float: 'left',
-    paddingTop: '10px',
+  justifyContent: 'center',
-    color: 'green',
+  flexGrow: 1,
-  });
+  borderRadius: 4,
+  marginRight: 15,
+  marginTop: 15,
+  marginLeft: 15,
+});
 
-  static TextInputLayout = styled(FlexColumn)({
+export function plugin(client: PluginClient<{}, ClientMethods>) {
-    float: 'left',
+  const sandboxes = createState<Array<Sandbox>>([]);
-    justifyContent: 'center',
+  const customSandbox = createState<string>('');
-    flexGrow: 1,
+  const showFeedback = createState<boolean>(false);
-    borderRadius: 4,
-    marginRight: 15,
-    marginTop: 15,
-    marginLeft: 15,
-  });
 
-  init() {
+  client.onConnect(() => {
-    if (!this.client.isConnected) {
+    client
-      return;
+      .send('getSandbox', undefined)
-    }
-    this.client
-      .call('getSandbox', {})
       .then((results: Array<Sandbox>) => {
-        this.setState({sandboxes: results});
+        sandboxes.set(results);
       })
       .catch((e) => console.error('[sandbox] getSandbox call failed:', e));
-  }
+  });
 
-  onSendSandboxEnvironment = (sandbox: string) => {
+  const onSendSandboxEnvironment = (sandbox: string) => {
-    this.client
+    client
-      .call('setSandbox', {
+      .send('setSandbox', {
-        sandbox: sandbox,
+        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>) => {
+  const onChangeSandbox = (e: ChangeEvent<HTMLInputElement>) => {
-    this.setState({customSandbox: e.target.value});
+    customSandbox.set(e.target.value);
   };
 
-  render() {
+  return {
-    return (
+    client,
-      <FlexColumn>
+    onChangeSandbox,
-        <SandboxView.TextInputLayout>
+    onSendSandboxEnvironment,
-          <ButtonGroup>
+    customSandbox,
-            <SandboxView.TextInput
+    sandboxes,
-              type="text"
+    showFeedback,
-              placeholder="Sandbox URL (e.g. unixname.sb.facebook.com)"
+  };
-              key="sandbox-url"
+}
-              onChange={this.onChangeSandbox}
+
-              onKeyPress={(event) => {
+export function Component() {
-                if (event.key === 'Enter') {
+  const instance = usePlugin(plugin);
-                  this.onSendSandboxEnvironment(this.state.customSandbox);
+  const customSandbox = useValue(instance.customSandbox);
-                }
+  const sandboxes = useValue(instance.sandboxes);
-              }}
+  const showFeedback = useValue(instance.showFeedback);
-            />
+
-            <Button
+  return (
-              key="sandbox-send"
+    <FlexColumn>
-              icon="download"
+      <TextInputLayout>
-              onClick={() =>
+        <ButtonGroup>
-                this.onSendSandboxEnvironment(this.state.customSandbox)
+          <TextInput
-              }
+            type="text"
-              disabled={this.state.customSandbox == null}
+            placeholder="Sandbox URL (e.g. unixname.sb.facebook.com)"
-            />
+            key="sandbox-url"
-          </ButtonGroup>
+            onChange={instance.onChangeSandbox}
-          <SandboxView.FeedbackMessage
+            onKeyPress={(event) => {
-            hidden={this.state.showFeedback == false}>
+              if (event.key === 'Enter') {
-            Success!
+                instance.onSendSandboxEnvironment(customSandbox);
-          </SandboxView.FeedbackMessage>
+              }
-        </SandboxView.TextInputLayout>
+            }}
-        {this.state.sandboxes.map((sandbox) => (
+          />
-          <ButtonContainer key={sandbox.value}>
+          <Button
-            <BigButton
+            key="sandbox-send"
-              onClick={() => this.onSendSandboxEnvironment(sandbox.value)}>
+            icon="download"
-              {sandbox.name}
+            onClick={() => instance.onSendSandboxEnvironment(customSandbox)}
-            </BigButton>
+            disabled={customSandbox == null}
-          </ButtonContainer>
+          />
-        ))}
+        </ButtonGroup>
-      </FlexColumn>
+        <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>
+  );
 }

desktop/plugins/public/sandbox/package.json

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