Add a status message when the selected client doesn't have graphql plugin

Summary: Adds a status message when the one deeplinks to support form and the selectedClient doesn't support GraphQL plugin.

Reviewed By: jknoxville

Differential Revision: D19602900

fbshipit-source-id: 98a45ead2659bb229f4a1301e918e02dca05fc66

src/dispatcher/application.tsx

@@ -13,6 +13,7 @@ import {setStaticView} from '../reducers/connections';
 import {selectedPlugins as setSelectedPlugins} from '../reducers/plugins';
 import {starPlugin as setStarPlugin} from '../reducers/connections';
 import {setSupportFormV2State, Groups} from '../reducers/supportForm';
+import {addStatusMessage, removeStatusMessage} from '../reducers/application';
 import {Store} from '../reducers/index.js';
 import {Logger} from '../fb-interfaces/Logger';
 import {parseFlipperPorts} from '../utils/environmentVariables';
@@ -27,6 +28,7 @@ import {deconstructClientId} from '../utils/clientUtils';
 import {defaultSelectedPluginsForGroup} from '../fb-stubs/utils/supportForm';
 import {selectPlugin} from '../reducers/connections';
 import qs from 'query-string';
+import {showStatusUpdatesForDuration} from '../utils/promiseTimeout';
 
 export const uriComponents = (url: string): Array<string> => {
   if (!url) {
@@ -141,16 +143,39 @@ export default (store: Store, logger: Logger) => {
       // Enable GraphQL plugin if grp to be posted is the GraphQL one.
       // TODO: Handle the case where GraphQL plugin is not supported by Client
       const {app} = deconstructClientId(selectedApp);
-      const graphQLEnabled: boolean = store
+      const selectedClient = store
         .getState()
-        .connections.userStarredPlugins[app].includes('GraphQL');
-      if (!graphQLEnabled) {
+        .connections.clients.find(client => client.id === selectedApp);
+      const enabledPlugins: Array<string> | null = store.getState().connections
+        .userStarredPlugins[app];
+      const graphQLEnabled =
+        enabledPlugins != null && enabledPlugins.includes('GraphQL');
+      if (
+        selectedClient &&
+        selectedClient.plugins.includes('GraphQL') &&
+        !graphQLEnabled
+      ) {
         store.dispatch(
           setStarPlugin({
             selectedApp: app,
             selectedPlugin: 'GraphQL',
           }),
         );
+      } else if (
+        !selectedClient ||
+        !selectedClient.plugins.includes('GraphQL')
+      ) {
+        showStatusUpdatesForDuration(
+          'The current client does not support GraphQL plugin. Please change the app from the dropdown in the support form',
+          'Deeplink',
+          10000,
+          payload => {
+            store.dispatch(addStatusMessage(payload));
+          },
+          payload => {
+            store.dispatch(removeStatusMessage(payload));
+          },
+        );
       }
     }
     store.dispatch(

src/utils/promiseTimeout.tsx

@@ -51,3 +51,23 @@ export function showStatusUpdatesForPromise<T>(
       throw e;
     });
 }
+
+export function showStatusUpdatesForDuration(
+  message: string,
+  sender: string,
+  duration: number,
+  addStatusMessage: (payload: StatusMessageType) => void,
+  removeStatusMessage: (payload: StatusMessageType) => void,
+): void {
+  showStatusUpdatesForPromise(
+    new Promise((resolve, _reject) => {
+      setTimeout(function() {
+        resolve();
+      }, duration);
+    }),
+    message,
+    sender,
+    addStatusMessage,
+    removeStatusMessage,
+  );
+}