Group selection view

Summary:
Added a group selection view in the support form to select the group to post the support form in. Added two groups for GraphQL's android and iOS.
Also added a check to avoid selecting graphQL group unless GraphQL plugin is enabled.

Reviewed By: mweststrate

Differential Revision: D19538023

fbshipit-source-id: 022d592ae2aa17ed1e1b10a37b011ddc68df560a

src/chrome/ListView.tsx

@@ -33,11 +33,16 @@ type SubType =
       type: 'single';
     };
 
+export type Element = {
+  label: string;
+  id: string;
+  unselectable?: {toolTipMessage: string};
+};
 type Props = {
   onSubmit?: () => void;
   onChange: (elements: Array<string>) => void;
   onHide: () => any;
-  elements: Array<{label: string; id: string}>;
+  elements: Array<Element>;
   title?: string;
 } & SubType;
 
@@ -84,30 +89,36 @@ type RowComponentProps = {
   label: string;
   selected: boolean;
   onChange: (name: string, selected: boolean) => void;
+  disable: boolean;
+  toolTipMessage?: string;
 };
 
 class RowComponent extends Component<RowComponentProps> {
   render() {
-    const {id, label, selected, onChange} = this.props;
+    const {id, label, selected, onChange, disable, toolTipMessage} = this.props;
     return (
       <FlexColumn>
-        <Padder
+        <Tooltip
-          paddingRight={8}
+          title={disable ? toolTipMessage : null}
-          paddingTop={8}
+          options={{position: 'toRight'}}>
-          paddingBottom={8}
+          <Padder
-          paddingLeft={8}>
+            paddingRight={8}
-          <FlexRow>
+            paddingTop={8}
-            <Text> {label} </Text>
+            paddingBottom={8}
-            <Spacer />
+            paddingLeft={8}>
-            <Checkbox
+            <FlexRow>
-              checked={selected}
+              <Text> {label} </Text>
-              onChange={selected => {
+              <Spacer />
-                onChange(id, selected);
+              <Checkbox
-              }}
+                checked={selected}
-            />
+                onChange={selected => {
-          </FlexRow>
+                  onChange(id, selected);
-        </Padder>
+                }}
-        <Line />
+              />
+            </FlexRow>
+          </Padder>
+          <Line />
+        </Tooltip>
       </FlexColumn>
     );
   }
@@ -129,9 +140,11 @@ export default class ListView extends Component<Props, State> {
     if (this.props.type === 'single') {
       if (!selected) {
         this.setState({selectedElements: selectedElements});
+        this.props.onChange([...selectedElements]);
       } else {
         selectedElements.add(id);
         this.setState({selectedElements: selectedElements});
+        this.props.onChange([...selectedElements]);
       }
     } else {
       if (selected) {
@@ -152,7 +165,7 @@ export default class ListView extends Component<Props, State> {
         <FlexColumn>
           {this.props.title && <Title>{this.props.title}</Title>}
           <RowComponentContainer>
-            {this.props.elements.map(({id, label}) => {
+            {this.props.elements.map(({id, label, unselectable}) => {
               return (
                 <RowComponent
                   id={id}
@@ -160,6 +173,8 @@ export default class ListView extends Component<Props, State> {
                   key={id}
                   selected={this.state.selectedElements.has(id)}
                   onChange={this.handleChange}
+                  disable={unselectable != null}
+                  toolTipMessage={unselectable?.toolTipMessage}
                 />
               );
             })}

src/chrome/mainsidebar/MainSidebarUtilsSection.tsx

@@ -93,7 +93,9 @@ function MainSidebarUtilsSection({
                 name={'app-dailies'}
                 isActive={active}
               />
-              <PluginName isActive={active}>Litho Support Request</PluginName>
+              <PluginName isActive={active}>
+                Litho/GraphQL Support Request
+              </PluginName>
             </ListItem>
           );
         })()}