Use the same create-plugin tutorial for FB and non-FB users

Summary: Per title

Reviewed By: passy

Differential Revision: D25558871

fbshipit-source-id: 85fbc73143a5ca172115169d08f8cdce502eb833

docs/tutorial/android.mdx

@@ -3,6 +3,7 @@ id: android
 title: Building an Android Plugin
 ---
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import {FbInternalOnly} from 'internaldocs-fb-helpers';
 
 <img alt="Android Tutorial App" src={useBaseUrl("img/android-tutorial-app.png")} />
 
@@ -22,6 +23,12 @@ https://github.com/facebook/flipper/tree/7dae5771d96ea76b75796d3b3a2c78746e581e3
 
 ## Creating a Plugin
 
+<FbInternalOnly>
+<div class="warning">
+[FB-Only] Depending the options selected during scaffolding (see intro), some of the following code might already have been generated by `scarf`. 
+</div>
+</FbInternalOnly>
+
 On Android, a Flipper plugin is a class that implements the
 [`FlipperPlugin`](https://github.com/facebook/flipper/blob/master/android/src/main/java/com/facebook/flipper/core/FlipperPlugin.java)
 interface.

docs/tutorial/intro.mdx

@@ -3,10 +3,10 @@ id: intro
 title: Intro
 ---
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import {FbInternalOnly} from 'internaldocs-fb-helpers';
 
 <img alt="Android App Tutorial" src={useBaseUrl("img/android-tutorial.png")} />
 
-
 Flipper was designed with extensibility in mind from the start to enable engineers to quickly build quality, easy-to-use tools for their own needs and applications.
 In addition to building plugins for the existing platforms, you can also extend the capabilities of Flipper to other platforms by conforming to the `FlipperClient` API. After this, you can make use of the existing desktop plugins by writing client plugins that conform to the same API.
 
@@ -22,3 +22,42 @@ this tutorial:
 
 - **Desktop app**: This is the Electron-based application you run on your desktop.
 - **Mobile client**: This is the mobile app running most likely on a phone or other mobile device. It connects to the desktop app.
+
+<FbInternalOnly>
+
+## Scaffolding a new plugin
+
+To create your plugin and add it to Wilde / fb4a there are some steps to go through. That's why we made a simple scripts for it.
+
+Go to your terminal and simply run `scarf flipper-plugin`, this will setup all required files for you.
+
+On completion you'll have everything set up ready to start and running it on Flipper. Run `hg diff` to see the following:
+
+* **Desktop plugin files**: The UI code for your plugin. Everything starts in the `index.js` file
+* **Native Flipper plugin files**: The Android / iOS code for your plugin
+* **Integration with flagship apps**: Your plugin has already been added into Wilde and/or fb4a!
+
+### Gatekeeper
+
+Depending on the scaffolding choices, we've gated your new plugin behind a GK, so you can go ahead and ship it without premature exposure. You will have to create the gatekeeper, and add yourself to it so you can see your plugin. The GK name is defined in your plugins `package.json`.
+
+### Let's see something on screen
+
+Now that you have a good ground for your plugin there is nothing better than actually see something on screen. Make sure you build and run fb4a or wilde with your generated changes.
+
+You also need to compile and run the flipper desktop app, with your new plugin.
+
+To locally run Flipper just go to your terminal (please use non-atom terminal):
+
+```
+$ cd ~/fbsource/xplat/sonar/desktop
+$ yarn install
+$ yarn start
+```
+This will kickoff a local build of Flipper that will spawn automatically for you once its ready. While you're working on your custom plugin you'll not be using the Flipper build pre-installed on your machine.
+
+As you keep tweaking and improving your desktop plugin, the only thing to do is to save your changes (on your `index.tsx` file) and it will automatically reload flipper with all changes applied for you. This makes it possible to see your changes automatically appear on screen without rebuilding Flipper every time.
+
+To start an IDE we recommend to run `code-fb ~/fbsource/xplat/sonar/`
+
+</FbInternalOnly>

docs/tutorial/ios.mdx

@@ -3,6 +3,7 @@ id: ios
 title: Building an iOS Plugin
 ---
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import {FbInternalOnly} from 'internaldocs-fb-helpers';
 
 <img alt="iOS Tutorial App" src={useBaseUrl("img/ios-tutorial-app.png")} />
 
@@ -15,6 +16,12 @@ You can find the source code of the project [on GitHub](https://github.com/faceb
 
 ## Creating a Plugin
 
+<FbInternalOnly>
+<div class="warning">
+[FB-Only] Depending the options selected during scaffolding (see intro), some of the following code might already have been generated by `scarf`. 
+</div>
+</FbInternalOnly>
+
 On iOS, a Flipper plugin is a class that implements the
 [`FlipperPlugin`](https://github.com/facebook/flipper/blob/master/iOS/FlipperKit/FlipperPlugin.h)
 interface.

docs/tutorial/js-publishing.mdx

@@ -4,6 +4,16 @@ title: Publishing your Plugin
 sidebar_label: Publishing
 ---
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import Link from '@docusaurus/Link';
+import {FbInternalOnly, OssOnly} from 'internaldocs-fb-helpers';
+
+<FbInternalOnly>
+
+The process of releasing plugins is largely automated at Facebook, and described in detail <Link to={useBaseUrl('/docs/extending/fb/desktop-plugin-releases')}>here</Link>.
+
+</FbInternalOnly>
+
+<OssOnly>
 
 Once you're happy with your plugin and want the world to see it,
 you can publish it to npm. Ensure that your plugin follows these
@@ -64,3 +74,5 @@ This may be Maven Central, JCenter or GitHub Packages for Android,
 CocoaPods for iOS and npm or GitHub Packages for React Native.
 Make sure to leave setup instructions in the README of your
 npm package.
+
+</OssOnly>

docs/tutorial/js-setup.mdx

@@ -4,6 +4,7 @@ title: Building a Desktop Plugin
 sidebar_label: Building a Desktop Plugin
 ---
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import {FbInternalOnly, OssOnly} from 'internaldocs-fb-helpers';
 
 Now that we have the native side covered, let's display the data we're sending
 on the desktop side. You can check out the full workflow of building Flipper desktop
@@ -13,6 +14,12 @@ plugins here: https://fbflipper.com/docs/extending/js-setup.
 
 ## Dynamic Plugin loading
 
+<FbInternalOnly>
+[FB-Only] After scaffolding and starting Flipper from source, no further steps are needed to setup the desktop plugin. 
+</FbInternalOnly>
+
+<OssOnly>
+
 By default, Flipper will start with the plugins it was bundled with. You can
 configure it to also look for plugins in custom directories. To do that,
 modify the `~/.flipper/config.json` file that is created the first time
@@ -84,3 +91,5 @@ For instance:
 To ensure there are no errors in the defined plugin, install packages (using `yarn install` or `npm install`) and execute script `lint` (`yarn lint` or `npm run lint`) which shows all the mismatches that should be fixed to make the plugin definition valid.
 
 Now that our package has been set up, we are ready to build a UI for our plugin. Either by using a standardized table-based plugin, or by creating a custom UI.
+
+</OssOnly>

docs/tutorial/js-table.mdx

@@ -3,9 +3,16 @@ id: js-table
 title: Showing a table
 ---
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import Link from '@docusaurus/Link';
 
 <img alt="Android Tutorial App" src={useBaseUrl("img/android-tutorial-desktop.png")} />
 
+<div class="warning">
+
+The APIs described on this page are currently being revised, if you are looking for a plugin that does more than displaying a table, we recommend to skip to the <Link to={useBaseUrl('/docs/tutorial/js-custom')}>Custom Plugin</Link> page right away.
+If you want to follow the steps on this page, **remove** `flipper-plugin` from the (peer)dependencies in the `package.json` of your scaffolded plugin.
+</div>
+
 ## Building a Table
 
 We have found that one of the most useful things you can do to understand how your app works
@@ -67,6 +74,8 @@ For this tutorial, however, we will just show the full object by
 using our `ManagedDataInspector` UI component:
 
 ```javascript
+import {Panel, ManagedDataInspector} from 'flipper';
+
 function renderSidebar(row: Row) {
   return (
     <Panel floating={false} heading={'Info'}>