Update setup and createTable tutorial to 100% Sandy

Summary:
The current desktop plugin tutorial was outdated as it has several steps that are now automated, and still referred to old APIs. This has been updated now.

Additionally left the intermediate code of the tutorial in the plugin, but splitting `index.tsx` into `index_table.tsx` and `index_custom.tsx` (which will be updated in the next diff)

Clarified the tutorial page labels a little bit to show that 3 pages are covering the Desktop plugin development process.

Changelog: Updated the Desktop plugin tutorial

Reviewed By: jknoxville

Differential Revision: D28990029

fbshipit-source-id: a06a7a774ceca3daf10f8e8fbd4e03191dbfd1cc

docs/tutorial/js-setup.mdx

@@ -1,56 +1,39 @@
 ---
 id: js-setup
 title: Building a Desktop Plugin
-sidebar_label: Building a Desktop Plugin
+sidebar_label: Desktop Plugin - Setup
 ---
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
 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
-plugins here: https://fbflipper.com/docs/extending/js-setup.
+on the desktop side. 
 
 <img alt="Custom cards UI for our sea mammals plugin" src={useBaseUrl("img/js-custom.png")} />
 
-## 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
-you start Flipper and add a newly created directory the `pluginPaths` attribute.
+## Scaffolding a new Desktop plugin
 
-Your file will then look something like this:
-
-```json
-{
-  "pluginPaths": [
-    "~/Flipper/custom-plugins/"
-  ],
-  ...
-}
-```
-
-## Creating the Plugin Package
-
-With the loading part out of the way, we can create the new plugin. For that, first create a new folder inside the custom plugins directory. Then use `flipper-pkg init` to initialise a new Flipper desktop plugin package.
-`flipper-pkg` is a NPM module, so we can run it directly using `npx` if Node and NPM are installed.
+A new Flipper Desktop plugin can be scaffolded by running `npx flipper-pkg init` in the directory where you want to store the plugin sources (Don't run this command inside the Flipper repository itself!). For example:
 
 ```bash
-$ cd ~/Flipper/custom-plugins/
-$ npx flipper-pkg init
+mkdir ~/FlipperPlugins
+cd ~/FlipperPlugins
+npx flipper-pkg init
 ```
 
+Add the directory to the Flipper watch folder if asked. In this tutorial we will be creating a `client` plugin. `device` plugins are only used when creating plugins that _don't_ connect to a specific application and are pretty rare.
+
 The tool will ask you to provide "id" and "title" for your plugin. Use "sea-mammals" as "id" and "Sea Mammals" as "title". After that the tool will create two files in the directory: `package.json` and `src/index.tsx`.
 
-See [package.json](https://github.com/facebook/flipper/blob/master/desktop/plugins/public/seamammals/package.json) for an example.
-
-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.
+After the process has finished, use `yarn watch` in the generated directory to start compiling the plugin on the fly. 
 
 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>
+
+For more background on the generated files and overal plugin structure, see the [Plugin Structure](../extending/desktop-plugin-structure) page.