Use local storage for state persisting

Summary: Apply local storage setting at a few relevant places, see parent diff

Reviewed By: cekkaewnumchai

Differential Revision: D29516498

fbshipit-source-id: 4797986e3540217e42dfb867f7d627921b97618e

desktop/plugins/public/network/index.tsx

@@ -123,7 +123,10 @@ export function plugin(client: PluginClient<Events, Methods>) {
 
   const partialResponses = createState<PartialResponses>({});
 
-  const customColumns = createState<CustomColumnConfig[]>([]); // Store in local storage as well: T69989583
+  const customColumns = createState<CustomColumnConfig[]>([], {
+    persist: 'customColumns',
+    persistToLocalStorage: true,
+  });
   const columns = createState<DataTableColumn<Request>[]>(baseColumns); // not persistable
 
   client.onDeepLink((payload: unknown) => {

desktop/plugins/public/reactdevtools/index.tsx

@@ -19,7 +19,7 @@ import {
 } from 'flipper-plugin';
 import React from 'react';
 import getPort from 'get-port';
-import {Button, Switch, Typography} from 'antd';
+import {Button, message, Switch, Typography} from 'antd';
 import child_process from 'child_process';
 import fs from 'fs';
 import path from 'path';
@@ -75,28 +75,37 @@ export function devicePlugin(client: DevicePluginClient) {
     ConnectionStatus.Initializing,
   );
   const globalDevToolsPath = createState<string>();
-  const useGlobalDevTools = createState(false); // TODO: store in local storage T69989583
+  const useGlobalDevTools = createState(false, {
+    persist: 'useGlobalDevTools',
+    persistToLocalStorage: true,
+  });
   let devToolsInstance: typeof ReactDevToolsStandaloneEmbedded =
     ReactDevToolsStandaloneEmbedded;
+
   let startResult: {close(): void} | undefined = undefined;
 
   let pollHandle: NodeJS.Timeout | undefined = undefined;
 
+  function getDevToolsModule() {
+    // Load right library
+    if (useGlobalDevTools.get()) {
+      console.log('Loading ' + globalDevToolsPath.get());
+      return global.electronRequire(globalDevToolsPath.get()!).default;
+    } else {
+      return ReactDevToolsStandaloneEmbedded;
+    }
+  }
+
   async function toggleUseGlobalDevTools() {
     if (!globalDevToolsPath.get()) {
+      message.warn(
+        "No globally installed react-devtools package found. Run 'npm install -g react-devtools'.",
+      );
       return;
     }
     useGlobalDevTools.update((v) => !v);
 
-    // Load right library
-    if (useGlobalDevTools.get()) {
-      console.log('Loading ' + globalDevToolsPath.get());
-      devToolsInstance = global.electronRequire(
-        globalDevToolsPath.get()!,
-      ).default;
-    } else {
-      devToolsInstance = ReactDevToolsStandaloneEmbedded;
-    }
+    devToolsInstance = getDevToolsModule();
 
     statusMessage.set('Switching devTools');
     connectionStatus.set(ConnectionStatus.Initializing);
@@ -221,14 +230,18 @@ export function devicePlugin(client: DevicePluginClient) {
     );
   }
 
-  client.onReady(() => {
-    findGlobalDevTools().then((path) => {
-      globalDevToolsPath.set(path + '/standalone');
+  client.onReady(async () => {
+    const path = await findGlobalDevTools();
     if (path) {
+      globalDevToolsPath.set(path + '/standalone');
       console.log('Found global React DevTools: ', path);
+      // load it, if the flag is set
+      devToolsInstance = getDevToolsModule();
+    } else {
+      console.log('Found global React DevTools: ', path);
+      useGlobalDevTools.set(false); // disable in case it was enabled
     }
   });
-  });
 
   client.onDestroy(() => {
     startResult?.close();