From c8548e806311cd41c622ecc2457fc4a3f5fd1c0a Mon Sep 17 00:00:00 2001
From: Pritesh Nandgaonkar <prit91@fb.com>
Date: Tue, 11 Feb 2020 05:47:24 -0800
Subject: [PATCH] Always allow user to select group

Summary: This diff always allows user to select the group irrespective of the validation error. We will show the validation error at the bottom before letting them submit.

Reviewed By: passy

Differential Revision: D19816805

fbshipit-source-id: ff576a2101a5ed548c56a2f08da8d27457ebf332
---
 src/reducers/supportForm.tsx | 44 ++++++++++++++++++++++++++++++------
 1 file changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/reducers/supportForm.tsx b/src/reducers/supportForm.tsx
index 2d2a3d653..885c77012 100644
--- a/src/reducers/supportForm.tsx
+++ b/src/reducers/supportForm.tsx
@@ -25,6 +25,7 @@ import {State as PluginStatesState} from './pluginStates';
 import {State as PluginsState} from '../reducers/plugins';
 import {State as PluginMessageQueueState} from '../reducers/pluginMessageQueue';
 import Client from '../Client';
+import {OS} from '../devices/BaseDevice';
 
 const {
   GRAPHQL_IOS_SUPPORT_GROUP_ID,
@@ -39,41 +40,67 @@ type MediaObject = SubmediaType & {
   path: string;
 };
 
+export type GroupValidationErrors = {
+  plugins: string | null;
+  os: string | null;
+};
+
 export class Group {
   constructor(
     name: GroupNames,
     workplaceGroupID: number,
     requiredPlugins: Array<string>,
     defaultPlugins: Array<string>,
+    supportedOS: Array<OS>,
   ) {
     this.name = name;
     this.requiredPlugins = requiredPlugins;
     this.defaultPlugins = defaultPlugins;
     this.workplaceGroupID = workplaceGroupID;
+    this.supportedOS = supportedOS;
   }
   readonly name: GroupNames;
   requiredPlugins: Array<string>;
   defaultPlugins: Array<string>;
   workplaceGroupID: number;
+  supportedOS: Array<OS>;
 
-  getValidationMessage(selectedPlugins: Array<string>): string | null {
+  getValidationMessage(
+    selectedPlugins: Array<string>,
+    selectedOS: OS | null,
+  ): GroupValidationErrors {
     const nonSelectedPlugin: Array<string> = [];
     for (const plugin of this.requiredPlugins) {
       if (!selectedPlugins.includes(plugin)) {
         nonSelectedPlugin.push(plugin);
       }
     }
-    if (nonSelectedPlugin.length <= 0) {
-      return null;
-    }
-    let str = 'should be exported if you want to submit to this group.';
+
+    // Plugin validation
+    let str: string | null =
+      'should be exported if you want to submit to this group. Make sure, if your selected app supports those plugins, if so then enable it and select it from the plugin selection.';
     if (nonSelectedPlugin.length == 1) {
       str = `the ${nonSelectedPlugin.pop()} plugin ${str}`;
-    } else {
+    } else if (nonSelectedPlugin.length > 1) {
       const lastPlugin = nonSelectedPlugin.pop();
       str = `the ${nonSelectedPlugin.join(',')} and ${lastPlugin} ${str}`;
+    } else {
+      // nonSelectedPlugin is empty
+      str = null;
     }
-    return str;
+
+    // OS validation
+    let osError: string | null = null;
+    if (!selectedOS) {
+      osError = 'Please select an app from the drop down.';
+    } else if (!this.supportedOS.includes(selectedOS)) {
+      osError = `The group ${
+        this.name
+      } supports exports from ${this.supportedOS.join(
+        ', ',
+      )}. But your selected device's OS is ${selectedOS}, which is unsupported.`;
+    }
+    return {plugins: str, os: osError};
   }
 
   handleSupportFormDeeplinks(store: Store) {
@@ -227,6 +254,7 @@ export const LITHO_GROUP = new Group(
   LITHO_SUPPORT_GROUP_ID,
   ['Inspector'],
   ['Inspector', 'Sections', 'DeviceLogs'],
+  ['Android'],
 );
 
 export const GRAPHQL_ANDROID_GROUP = new Group(
@@ -234,6 +262,7 @@ export const GRAPHQL_ANDROID_GROUP = new Group(
   GRAPHQL_ANDROID_SUPPORT_GROUP_ID,
   ['GraphQL'],
   ['GraphQL', 'DeviceLogs'],
+  ['Android'],
 );
 
 export const GRAPHQL_IOS_GROUP = new Group(
@@ -241,6 +270,7 @@ export const GRAPHQL_IOS_GROUP = new Group(
   GRAPHQL_IOS_SUPPORT_GROUP_ID,
   ['GraphQL'],
   ['GraphQL', 'DeviceLogs'],
+  ['iOS'],
 );
 
 export const SUPPORTED_GROUPS: Array<Group> = [