Refactor connection notification

Summary:
Extract notification creation from inside the existing function.

This will be reused to display connection notifications from the server event.

Reviewed By: antonk52

Differential Revision: D47873728

fbshipit-source-id: c01dc93dfef28135ecf7e77e92d4d517af082125

desktop/flipper-ui-core/src/dispatcher/flipperServer.tsx

@@ -295,6 +295,36 @@ export function handleDeviceDisconnected(
   existing?.connected.set(false);
 }
 
+function showConnectivityTroubleshootNotification(
+  store: Store,
+  key: string,
+  message: string,
+  description: string,
+) {
+  notification.error({
+    key,
+    message,
+    description: (
+      <Layout.Bottom>
+        <p>${description}</p>
+        <div>
+          <Button
+            type="primary"
+            style={{float: 'right'}}
+            onClick={() => {
+              store.dispatch(setTopLevelSelection('connectivity'));
+              store.dispatch(setStaticView(ConnectivityHub));
+              notification.close(key);
+            }}>
+            Troubleshoot
+          </Button>
+        </div>
+      </Layout.Bottom>
+    ),
+    duration: 0,
+  });
+}
+
 export async function handleClientConnected(
   server: FlipperServer,
   store: Store,
@@ -330,31 +360,13 @@ export async function handleClientConnected(
           e,
         );
         const key = `device-find-failure-${query.device_id}`;
-        notification.error({
+        showConnectivityTroubleshootNotification(
+          store,
           key,
-          message: 'Connection failed',
+          'Connection failed',
-          description: (
+          `Failed to find device '${query.device_id}' while trying to
-            <Layout.Bottom>
+        connect app '${query.app}'`,
-              <p>
+        );
-                Failed to find device '{query.device_id}' while trying to
-                connect app '{query.app}'`
-              </p>
-              <div>
-                <Button
-                  type="primary"
-                  style={{float: 'right'}}
-                  onClick={() => {
-                    store.dispatch(setTopLevelSelection('connectivity'));
-                    store.dispatch(setStaticView(ConnectivityHub));
-                    notification.close(key);
-                  }}>
-                  Troubleshoot
-                </Button>
-              </div>
-            </Layout.Bottom>
-          ),
-          duration: 0,
-        });
       },
     ));